/* Design-system components (ds- prefix). Tokens only: see tokens.css.
   rem values appear only where a container/width breakpoint cannot use a custom property. */

.ds-button, .ds-close, .ds-tab, .ds-sort, .ds-term__btn { font: inherit; cursor: pointer; }
.ds-button:focus-visible, .ds-close:focus-visible, .ds-tab:focus-visible, .ds-sort:focus-visible,
.ds-term__btn:focus-visible, .ds-input:focus-visible, .ds-card__link:focus-visible,
.ds-table-wrap:focus-visible, .ds-tabpanel:focus-visible {
  outline: 2px solid var(--ds-focus); outline-offset: 2px;
}

/* Buttons */
.ds-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  min-block-size: 44px; min-inline-size: 44px; padding: var(--ds-space-2) var(--ds-space-5);
  border: 1px solid transparent; border-radius: var(--ds-radius-md);
  font-family: var(--ds-font-ui); font-size: var(--ds-text-md); line-height: var(--ds-leading-tight);
  text-decoration: none; max-inline-size: 100%;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-snappy), border-color var(--ds-dur-fast) var(--ds-ease-snappy), transform var(--ds-dur-fast) var(--ds-ease-snappy);
}
.ds-button--sm { padding-inline: var(--ds-space-3); font-size: var(--ds-text-sm); }
.ds-button--lg { padding: var(--ds-space-3) var(--ds-space-8); font-size: var(--ds-text-lg); }
.ds-button--primary { background: var(--ds-action); color: var(--ds-action-contrast); }
.ds-button--secondary { background: transparent; color: var(--ds-text); border-color: var(--ds-border); }
.ds-button--secondary:hover { border-color: var(--ds-accent); }
.ds-button--ghost { background: transparent; color: var(--ds-accent); }
.ds-button--ghost:hover { background: var(--ds-surface-sunken); }
.ds-button--danger { background: var(--ds-danger); color: var(--ds-accent-contrast); }
.ds-button--primary:hover, .ds-button--danger:hover { filter: brightness(1.1); }
.ds-button:active { transform: translateY(1px); }
.ds-button[disabled], .ds-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ds-button__label { min-inline-size: 0; overflow-wrap: anywhere; }

/* Card */
.ds-card {
  position: relative; display: flex; flex-direction: column; gap: var(--ds-space-3); min-inline-size: 0;
  padding: var(--ds-space-5); background: var(--ds-surface-raised); color: var(--ds-text);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-1);
}
.ds-card--link { transition: box-shadow var(--ds-dur-base) var(--ds-ease-gentle), border-color var(--ds-dur-base) var(--ds-ease-gentle); }
.ds-card--link:hover { box-shadow: var(--ds-shadow-2); border-color: var(--ds-accent); }
.ds-card__eyebrow { margin: 0; font-size: var(--ds-text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ds-accent); font-variant-numeric: lining-nums tabular-nums; }
.ds-card__title { margin: 0; font-family: var(--ds-font-display); font-size: var(--ds-text-xl); line-height: var(--ds-leading-tight); font-weight: 600; }
.ds-card__link { color: inherit; text-decoration: none; }
.ds-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card is the tap target */
.ds-card__body { color: var(--ds-text-muted); font-size: var(--ds-text-md); line-height: var(--ds-leading-normal); }
.ds-card__footer { margin-block-start: auto; padding-block-start: var(--ds-space-3); border-block-start: 1px solid var(--ds-border); position: relative; }

/* Section */
.ds-section { padding-block: var(--ds-space-10); color: var(--ds-text); }
.ds-section--raised { background: var(--ds-surface-raised); }
.ds-section--sunken { background: var(--ds-surface-sunken); }
.ds-section--dawn { background: var(--ds-dawn); }
.ds-section__inner { margin-inline: auto; padding-inline: var(--ds-space-4); display: flex; flex-direction: column; gap: var(--ds-space-6); min-inline-size: 0; }
.ds-section__inner--marketing { max-inline-size: 72rem; }
.ds-section__inner--member { max-inline-size: 60rem; }
.ds-section__inner--fluid { max-inline-size: none; }
.ds-section__head { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.ds-section__title { margin: 0; font-family: var(--ds-font-display); font-size: var(--ds-text-3xl); line-height: var(--ds-leading-tight); font-weight: 600; }
.ds-section__lede { margin: 0; max-inline-size: 65ch; font-size: var(--ds-text-lg); line-height: var(--ds-leading-normal); color: var(--ds-text-muted); }
@media (min-width: 48rem) { .ds-section__inner { padding-inline: var(--ds-space-8); } .ds-section__title { font-size: var(--ds-text-4xl); } }

/* Stack */
.ds-stack { display: flex; flex-direction: column; min-inline-size: 0; }
.ds-stack--start { align-items: flex-start; } .ds-stack--center { align-items: center; }
.ds-stack--end { align-items: flex-end; } .ds-stack--stretch { align-items: stretch; }
.ds-stack--gap-1 { gap: var(--ds-space-1); } .ds-stack--gap-2 { gap: var(--ds-space-2); } .ds-stack--gap-3 { gap: var(--ds-space-3); }
.ds-stack--gap-4 { gap: var(--ds-space-4); } .ds-stack--gap-5 { gap: var(--ds-space-5); } .ds-stack--gap-6 { gap: var(--ds-space-6); }
.ds-stack--gap-7 { gap: var(--ds-space-7); } .ds-stack--gap-8 { gap: var(--ds-space-8); } .ds-stack--gap-9 { gap: var(--ds-space-9); }
.ds-stack--gap-10 { gap: var(--ds-space-10); } .ds-stack--gap-11 { gap: var(--ds-space-11); } .ds-stack--gap-12 { gap: var(--ds-space-12); }

/* Grid: columns follow the container's width; --ds-grid-min is the smallest column */
.ds-grid { container-type: inline-size; min-inline-size: 0; --ds-grid-min: calc(var(--ds-space-12) * 5); }
.ds-grid--min-sm { --ds-grid-min: calc(var(--ds-space-12) * 3); }
.ds-grid--min-lg { --ds-grid-min: calc(var(--ds-space-12) * 7); }
.ds-grid__inner { display: grid; gap: var(--ds-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ds-grid-min)), 1fr)); }
.ds-grid__inner > * { min-inline-size: 0; }
.ds-grid--cols-1 > .ds-grid__inner { grid-template-columns: 1fr; }
@container (min-width: 36rem) { .ds-grid--cols-2 > .ds-grid__inner, .ds-grid--cols-3 > .ds-grid__inner, .ds-grid--cols-4 > .ds-grid__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 54rem) { .ds-grid--cols-3 > .ds-grid__inner, .ds-grid--cols-4 > .ds-grid__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 72rem) { .ds-grid--cols-4 > .ds-grid__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Dialog and sheet (native <dialog>) */
.ds-dialog, .ds-sheet { padding: 0; border: 1px solid var(--ds-border); background: var(--ds-surface-raised); color: var(--ds-text); box-shadow: var(--ds-shadow-3); z-index: var(--ds-z-dialog); }
.ds-dialog::backdrop, .ds-sheet::backdrop { background: var(--ds-surface-sunken); opacity: .72; backdrop-filter: blur(var(--ds-blur-sm)); }
.ds-dialog { inline-size: min(calc(100% - var(--ds-space-8)), calc(var(--ds-space-12) * 10)); max-block-size: calc(100dvh - var(--ds-space-8)); border-radius: var(--ds-radius-lg); margin: auto; overflow: hidden; }
.ds-sheet { max-block-size: 100dvh; max-inline-size: 100%; margin: 0; overflow: hidden; border-radius: 0; }
.ds-sheet--end { inset-block: 0; inset-inline: auto 0; block-size: 100dvh; inline-size: min(100%, calc(var(--ds-space-12) * 8)); border-inline-end: 0; }
.ds-sheet--start { inset-block: 0; inset-inline: 0 auto; block-size: 100dvh; inline-size: min(100%, calc(var(--ds-space-12) * 8)); border-inline-start: 0; }
.ds-sheet--bottom { inset-block: auto 0; inset-inline: 0; inline-size: 100%; max-block-size: 85dvh; border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0; }
.ds-dialog[open], .ds-sheet[open] { display: flex; flex-direction: column; animation: ds-pop var(--ds-dur-base) var(--ds-ease-gentle); }
.ds-sheet--end[open] { animation-name: ds-slide-end; } .ds-sheet--start[open] { animation-name: ds-slide-start; } .ds-sheet--bottom[open] { animation-name: ds-slide-up; }
.ds-dialog__panel, .ds-sheet__panel { display: flex; flex-direction: column; min-block-size: 0; flex: 1; overflow: hidden; }
.ds-dialog__head, .ds-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5); border-block-end: 1px solid var(--ds-border); }
.ds-dialog__title, .ds-sheet__title { margin: 0; font-family: var(--ds-font-display); font-size: var(--ds-text-xl); line-height: var(--ds-leading-tight); }
.ds-dialog__body, .ds-sheet__body { padding: var(--ds-space-5); overflow: auto; overscroll-behavior: contain; line-height: var(--ds-leading-normal); }
.ds-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5); border-block-start: 1px solid var(--ds-border); }
.ds-close { position: relative; flex: none; min-block-size: 44px; min-inline-size: 44px; display: inline-grid; place-items: center; background: transparent; color: var(--ds-text); border: 1px solid transparent; border-radius: var(--ds-radius-md); font-size: var(--ds-text-2xl); line-height: 1; }
.ds-close:hover { background: var(--ds-surface-sunken); }
@keyframes ds-pop { from { opacity: 0; transform: translateY(var(--ds-space-2)); } }
@keyframes ds-slide-end { from { transform: translateX(100%); } }
@keyframes ds-slide-start { from { transform: translateX(-100%); } }
@keyframes ds-slide-up { from { transform: translateY(100%); } }

/* Tabs: views of the same data only */
.ds-tablist { display: flex; gap: var(--ds-space-1); overflow-x: auto; border-block-end: 1px solid var(--ds-border); max-inline-size: 100%; }
.ds-tab { position: relative; flex: none; min-block-size: 44px; padding: var(--ds-space-2) var(--ds-space-4); background: transparent; color: var(--ds-text-muted); border: 0; border-block-end: 2px solid transparent; font-family: var(--ds-font-ui); font-size: var(--ds-text-md); }
.ds-tab:hover { color: var(--ds-text); }
.ds-tab[aria-selected="true"] { color: var(--ds-accent); border-block-end-color: var(--ds-accent); }
.ds-tabpanel { padding-block: var(--ds-space-5); min-inline-size: 0; }
.ds-tabs[data-ds-ready] .ds-tabpanel[data-ds-inactive] { display: none; }

/* Table: scrolls inside its own wrapper */
.ds-table-wrap { max-inline-size: 100%; overflow-x: auto; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface-raised); }
.ds-table { inline-size: 100%; border-collapse: collapse; font-size: var(--ds-text-sm); color: var(--ds-text); font-variant-numeric: lining-nums tabular-nums; }
.ds-table__caption { padding: var(--ds-space-3) var(--ds-space-4); text-align: start; color: var(--ds-text-muted); caption-side: top; }
.ds-table th, .ds-table td { padding: var(--ds-space-3) var(--ds-space-4); text-align: start; border-block-end: 1px solid var(--ds-border); vertical-align: top; }
.ds-table th { background: var(--ds-surface-sunken); font-weight: 600; white-space: nowrap; }
.ds-table tbody tr:last-child td { border-block-end: 0; }
.ds-sort { position: relative; min-block-size: 44px; padding: 0 var(--ds-space-1); background: transparent; color: inherit; border: 0; font-weight: inherit; display: inline-flex; align-items: center; gap: var(--ds-space-1); }
.ds-table th[aria-sort="ascending"] .ds-sort::after { content: "\2191"; }
.ds-table th[aria-sort="descending"] .ds-sort::after { content: "\2193"; }

/* Toasts */
.ds-toast-region { position: fixed; inset-block-end: var(--ds-space-4); inset-inline: var(--ds-space-4); z-index: var(--ds-z-toast); display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-2); pointer-events: none; }
.ds-toast { pointer-events: auto; max-inline-size: min(100%, calc(var(--ds-space-12) * 8)); padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-surface-raised); color: var(--ds-text); border: 1px solid var(--ds-border); border-inline-start: 4px solid var(--ds-accent); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-2); font-size: var(--ds-text-sm); animation: ds-pop var(--ds-dur-base) var(--ds-ease-gentle); }
.ds-toast--success { border-inline-start-color: var(--ds-success); }
.ds-toast--warning { border-inline-start-color: var(--ds-warning); }
.ds-toast--danger { border-inline-start-color: var(--ds-danger); }

/* Field */
.ds-field { display: flex; flex-direction: column; gap: var(--ds-space-2); min-inline-size: 0; }
.ds-label { font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-text); }
.ds-required { color: var(--ds-danger); }
.ds-input { inline-size: 100%; min-block-size: 44px; padding: var(--ds-space-2) var(--ds-space-3); background: var(--ds-surface-sunken); color: var(--ds-text); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); font-family: var(--ds-font-ui); font-size: var(--ds-text-md); box-sizing: border-box; }
textarea.ds-input { min-block-size: calc(var(--ds-space-12) * 2); resize: vertical; }
.ds-field--error .ds-input { border-color: var(--ds-danger); }
.ds-hint { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.ds-error { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-danger); }

/* Term */
.ds-term { position: relative; display: inline; }
.ds-term__btn { position: relative; display: inline; padding: 0; min-block-size: 0; background: transparent; color: inherit; border: 0; border-block-end: 1px dotted var(--ds-accent); border-radius: var(--ds-radius-sm); }
.ds-term__btn::after { content: ""; position: absolute; inset-inline: 0; inset-block: -12px; } /* 44px tap area without changing line height */
.ds-term__btn:hover { color: var(--ds-accent); }
.ds-term-pops { position: static; }
.ds-term__pop { position: absolute; z-index: var(--ds-z-overlay); inline-size: max-content; max-inline-size: min(calc(var(--ds-space-12) * 6), calc(100vw - var(--ds-space-8))); display: flex; flex-direction: column; gap: var(--ds-space-1); padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-surface-raised); color: var(--ds-text); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-2); font-size: var(--ds-text-sm); line-height: var(--ds-leading-normal); text-align: start; white-space: normal; }
.ds-term__pop[hidden] { display: none; }
.ds-term__name { font-family: var(--ds-font-display); font-size: var(--ds-text-md); }
.ds-term__name [lang="hi"] { font-family: var(--ds-font-ui), "Noto Sans Devanagari", "Mukta", sans-serif; color: var(--ds-accent); line-height: var(--ds-leading-normal); }
.ds-term__def { color: var(--ds-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .ds-button, .ds-card--link { transition: none; }
  .ds-dialog[open], .ds-sheet[open], .ds-toast { animation: none; }
  .ds-button:active { transform: none; }
}