/* ==========================================================================
   Word pages — /word/<slug> and /word/<slug>/declensions

   The category groups follow the app's CategoryDisclosureGroup: a 12px
   rounded rect filled with the cell-border colour at 10% and stroked at 30%,
   16pt of horizontal padding, the title bold in the category's own colour,
   a count in a capsule filled at 20%, and a chevron drawn in that same
   colour rather than the system grey. Definition cards inside are the app's
   fabric cells, minus the gilded thread, which the website drops.
   ========================================================================== */

/* ==========================================================================
   The Mac app's shape: a list on the left, the detail pane on the right,
   and the Mac's own type scale (AppFonts.swift) rather than the iPhone's.
   Mac: wordHeading 36pt, largeTitle category headers 26pt, definitionText
   30pt. 30pt is kept back to ~21px here — the content pane is ~800px, and
   30px would give a 46-character line where the app has a whole window.
   ========================================================================== */
:root {
  --sidebar-w: 17.5rem;
  --mac-word: clamp(2.1rem, 1.5rem + 2.4vw, 2.25rem);   /* 36pt */
  --mac-cat: clamp(1.25rem, 1rem + 1.1vw, 1.625rem);    /* 26pt largeTitle */
  --mac-def: clamp(1.0625rem, .95rem + .5vw, 1.3125rem);
}

.word-shell > .wrap {
  display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: 2rem; align-items: start;
}
.word-main { min-width: 0; }

/* ---------- the sidebar ---------- */
.word-sidebar { position: sticky; top: calc(var(--header-h) + 1.25rem); }
.sidebar-inner {
  background-color: var(--glass);
  background-image: linear-gradient(color-mix(in srgb, var(--card-border) 10%, transparent),
                                    color-mix(in srgb, var(--card-border) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
  border-radius: 14px; padding: .85rem .8rem;
  max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.sidebar-eyebrow, .sidebar-foot {
  margin: .1rem .35rem .6rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--indigo);
}
.sidebar-foot { margin: .7rem .35rem .1rem; color: var(--muted-card); }
.cat-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.cat-nav a {
  display: flex; align-items: baseline; gap: .6rem; text-decoration: none;
  padding: .5rem .65rem; border-radius: 10px; color: var(--text);
  background: var(--card); border: 2px solid color-mix(in srgb, var(--card-border) 45%, transparent);
  font-size: .92rem; line-height: 1.3;
}
.cat-nav a:hover { border-color: var(--card-border); }
/* the app marks the selected row with the brand red, not a fill */
.cat-nav a[aria-current="true"] {
  border-color: var(--accent); color: var(--accent); font-weight: 650;
}
.nav-name { flex: 1 1 auto; min-width: 0; }
.nav-count {
  flex: none; font-size: .75rem; font-weight: 700; color: var(--muted-card);
  font-variant-numeric: tabular-nums;
}
.cat-nav a[aria-current="true"] .nav-count { color: var(--accent); }

/* Below the split-view width the sidebar goes away entirely, as it does on
   iPhone — the app uses a NavigationStack there, not a NavigationSplitView.
   The collapsed groups are already the same list, in the same order. */
@media (max-width: 900px) {
  .word-shell > .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .word-sidebar { display: none; }
}

/* ---------- the word header, on the sky ---------- */
.word-head { padding: clamp(1.5rem, 1rem + 3vw, 3rem) 0 1.25rem; }
.word-head h1 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .6em;
  color: var(--on-sky); margin-bottom: .55rem;
}
.word-head h1 { font-size: var(--mac-word); }
.word-head h1 .deva { font-family: var(--font-deva); line-height: 1.25; }
.word-head h1 .translit {
  font-size: clamp(1.2rem, .9rem + 1.2vw, 1.9rem); font-weight: 650;
  font-style: italic; color: var(--on-sky); opacity: .82; letter-spacing: 0;
}
.word-head .lede { color: var(--on-sky); max-width: 46rem; }

.facts-row {
  display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin: 0 0 1.25rem; padding: 0;
}
.facts-row .fact {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .35rem .85rem; border-radius: 999px;
  background: var(--glass); border: 1px solid color-mix(in srgb, var(--card-border) 45%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.facts-row dt {
  /* the app's CaptionTextView: .caption, uppercase, bold, deepIndigo —
     the same style ROOT: and EPISTEMOLOGY: wear in WordInfoView */
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--indigo);
}
.facts-row dd { margin: 0; color: var(--on-sky); font-size: .95rem; }   /* --text: 4.41:1 here */
.facts-row dd [lang="sa"] { font-family: var(--font-deva); }
.facts-row dd i { font-style: italic; color: var(--on-sky); }   /* --muted-card: 4.08:1 here */

/* View Declension Tables. It wears the site's .btn shape so it reads as a
   button, but the app's quiet colouring rather than the filled brand red —
   the table glyph in navigationTintColor, a classicNavy label, and
   arrow.up.forward.square in declensionArrow, over the accent at 10%.
   The app lays that tint straight over its own background; over the painted
   sky the navy label measures 4.29:1, so the tint goes over parchment glass
   here, which reaches 7.0:1 in both themes. */
.decl-link {
  width: 100%; margin-top: .25rem;
  color: var(--navy); font-weight: 700;
  /* the label has to clear 280px in one line beside two glyphs */
  font-size: .95rem; padding-inline: .9rem; text-wrap: balance;
  /* the same parchment fill as the facts pills above it; the accent wash is
     held back for hover, so the control still lights up like a button */
  background-color: var(--glass);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.decl-link:hover, .decl-link:focus-visible {
  background-color: var(--glass-strong);
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 12%, transparent),
                                    color-mix(in srgb, var(--accent) 12%, transparent));
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
}
.decl-link .decl-icon { color: var(--accent); }
.decl-link .decl-arrow { width: .95em; height: .95em; color: var(--decl-arrow); }

/* Wide: the facts move into a column beside the title, each one the app's
   caption over its value, so the header stops trailing empty sky to the
   right. Narrow: they fall back to the wrapped row of pills. */
@media (min-width: 901px) {
  .head-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 17.5rem);
    gap: 2.5rem; align-items: start;
  }
  .head-main { min-width: 0; }
  .head-aside { display: flex; flex-direction: column; gap: .5rem; }

  .word-head .facts-row {
    flex-direction: column; align-items: stretch; gap: .5rem; margin: 0;
  }
  .word-head .facts-row .fact {
    flex-direction: column; align-items: flex-start; gap: .1rem;
    padding: .55rem .9rem; border-radius: 12px;
  }
  .word-head .facts-row dt { font-size: .68rem; }
  .word-head .facts-row dd { font-size: 1rem; }
}

/* ---------- the category groups ---------- */
.senses { padding-bottom: clamp(2rem, 1rem + 4vw, 3.5rem); }
.senses-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .75rem; margin-bottom: 1rem;
}
.senses-head h2 { color: var(--on-sky); margin: 0; }

/* the eight colours the Cologne corpus uses, each with a night value */
:root {
  --decl-arrow:#7E544C;
  --scholar-grey:#A0A0A0; --scholar-grey-dark:#828282; --scholar-link:#585E6C;
  --scholar-light-blue:#4A4AC8;   /* app value #8080FF is 2.72:1 on the card */ --scholar-blue:#0000FF; --scholar-brown:#A52A2A; --scholar-red:#FF0000;
}
[data-theme="dark"] {
  --decl-arrow:#E49E8E;
  --scholar-grey:#B0B0B0; --scholar-grey-dark:#A6A6A6; --scholar-link:#B2BCD0;
  --scholar-light-blue:#B0C4FA; --scholar-blue:#9EC6F0; --scholar-brown:#E29C8C; --scholar-red:#F08676;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --decl-arrow:#E49E8E;
    --scholar-grey:#B0B0B0; --scholar-grey-dark:#A6A6A6; --scholar-link:#B2BCD0;
    --scholar-light-blue:#B0C4FA; --scholar-blue:#9EC6F0; --scholar-brown:#E29C8C; --scholar-red:#F08676;
  }
}

.catgroup {
  /* the app: frame at fillOpacity, stroked at 0.3, 12pt radius */
  --frame: var(--card-border);
  --cat-accent: var(--accent);
  /* The app washes the group over its own background at 10%. Over the
     painted sky that puts .cat-title and the chevron at 2.87:1 in dark, and
     a scrolling parallax sky moves the backdrop under a stationary header —
     so the tint is laid over parchment glass instead of over the sky. */
  background-color: var(--glass);
  background-image: linear-gradient(color-mix(in srgb, var(--frame) 10%, transparent),
                                    color-mix(in srgb, var(--frame) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--frame) 30%, transparent);
  border-radius: 12px;
  padding: .5rem 1rem;                    /* 8pt vertical, 16pt horizontal */
  margin-bottom: .75rem;
}
.catgroup--pinned { --frame: var(--indigo); --cat-accent: var(--indigo); }
.catgroup--related { --frame: var(--navy); --cat-accent: var(--navy); }

.catgroup > summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 0;                       /* the label's 8pt vertical */
  list-style: none; cursor: pointer;
}
.catgroup > summary::-webkit-details-marker { display: none; }
.catgroup > summary:focus-visible { outline: 3px solid var(--cat-accent); outline-offset: 4px; border-radius: 8px; }

.cat-title {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: var(--mac-cat);              /* the Mac's .largeTitle */
  font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--cat-accent);
}
.cat-count {
  /* the app fills this at frame 20%, which measures 2.9:1 over the darker
     sky; the glass keeps the same translucent read and passes everywhere */
  flex: none; font-size: .8rem; font-weight: 700; line-height: 1;
  padding: .32rem .6rem; border-radius: 999px;
  color: var(--cat-accent);
  background: var(--glass-strong);
  border: 1px solid color-mix(in srgb, var(--frame) 40%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cat-chevron {
  flex: none; width: 1.05rem; height: 1.05rem; color: var(--cat-accent);
  transition: transform .2s ease;
}
.catgroup[open] > summary .cat-chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .cat-chevron { transition: none; } }

.cat-body { padding-top: 12px; padding-bottom: .5rem; display: grid; gap: .85rem; }
.cat-body > *, .declensions > .wrap > * { min-width: 0; }

/* ---------- a definition, on the app's fabric cell ---------- */
.sense {
  position: relative; isolation: isolate;
  background: var(--card); color: var(--text);
  border: 2px solid var(--card-border); border-radius: 12px;
  padding: 1rem 1.1rem;
}
.sense::before {
  content: ""; position: absolute; inset: 0; border-radius: 10px;
  background: url("img/weave.webp") repeat; background-size: 315px;
  opacity: .1; pointer-events: none; z-index: -1;
}
.sense-text { margin: 0 0 .6rem; max-width: 74ch; font-size: var(--mac-def);
  line-height: 1.55; }
.sense-text b, .sense-text strong { color: var(--text-2); }

/* the scholar reading: the dictionary's own markup, in the app's colours.
   Devanagari runs pick up the Devanagari stack through the language tag the
   font stack already covers, so the Latin abbreviations keep their own face. */
.sense-text--scholar { font-size: calc(var(--mac-def) * .92); line-height: 1.62; }
.sense-text--scholar div { margin: 0 0 .35rem; }
.sense-text--scholar div:last-child { margin-bottom: 0; }
.sense-text--scholar sup { font-size: .7em; vertical-align: super; line-height: 0; }
.sense-text--scholar i, .sense-text--scholar em { color: inherit; }
.sense-source { margin: 0; font-style: italic; color: var(--navy);
  font-size: calc(var(--mac-def) * .84); }

/* the Simplified / Scholar segmented control: maroon thumb, white label */
.sense-toggle {
  display: inline-flex; gap: 2px; margin-bottom: .75rem; padding: 2px;
  border-radius: 999px; background: color-mix(in srgb, var(--card-border) 18%, transparent);
}
.sense-toggle button {
  font: inherit; font-size: .85rem; font-weight: 650; cursor: pointer;
  padding: .3rem .9rem; border-radius: 999px; border: 0;
  background: transparent; color: var(--muted-card);
}
.sense-toggle button.on { background: var(--accent); color: var(--on-accent); }
.sense-toggle button:not(.on):hover { color: var(--text); }

/* ---------- the closing section ----------
   The same shape as the home page's: centred on the sky with the damaru over
   the headline, and .section's own generous padding is what separates it from
   the definitions above. A hairline marks the seam, since what precedes it
   here is a dense column of cards rather than open page. */
.word-cta {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
}
.word-cta .lede { max-width: 38rem; margin-inline: auto; }
.word-cta .cta-features {
  justify-content: center; max-width: 44rem; margin: 1.25rem auto 1.75rem;
}
/* These state facts; they are not controls. The pill shape and the bold
   accent text of .chip read as buttons, so they take the facts-row's
   treatment instead — a 12px plate with the label in ordinary text. */
.word-cta .cta-features .chip {
  border-radius: 12px; padding: .5rem .9rem;
  font-size: .9rem; font-weight: 500;
  color: var(--on-sky);
  border-color: color-mix(in srgb, var(--card-border) 45%, transparent);
}
.word-cta .cta-features [lang="sa"] { font-family: var(--font-deva); }
.word-cta .shot-note { max-width: 54rem; margin: 1.75rem auto 0; }

/* jump straight to a gender's table, in place of a back button */
.gender-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.gender-jump a {
  display: inline-flex; align-items: baseline; gap: .45rem; text-decoration: none;
  padding: .45rem 1rem; border-radius: 999px; font-weight: 650; color: var(--accent);
  background: var(--glass); border: 1.5px solid color-mix(in srgb, var(--card-border) 55%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.gender-jump a:hover { background: var(--glass-strong); }
.gender-jump a [lang="sa"] { font-family: var(--font-deva); }
.gender-jump .jump-en {
  font-size: .76em; font-weight: 700; color: var(--navy);
  text-transform: uppercase; letter-spacing: .08em;
}

/* ---------- declension tables ---------- */
.declensions { padding-bottom: clamp(2rem, 1rem + 4vw, 4rem); }
/* The grid belongs on the .wrap, not on the section: the section's only child
   IS the wrap, so a gap set here applied between nothing and the tables sat
   flush against each other. Roomier than the old 1.25rem, to match the type. */
.declensions > .wrap { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); }
.decl-table .table-scroll { max-width: 100%; overflow-x: auto; }
.decl-table table { min-width: 28rem; }
.decl-table {
  background-color: var(--glass);
  background-image: linear-gradient(color-mix(in srgb, var(--card-border) 10%, transparent),
                                    color-mix(in srgb, var(--card-border) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
  border-radius: 12px; padding: .75rem 1rem 1rem;
}
.decl-table h2 {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  font-size: var(--mac-cat); color: var(--accent); margin: .5rem 0 .75rem;
}
.decl-table h2 [lang="sa"] { font-family: var(--font-deva); }
.decl-table .gender-en {
  font-size: .62em; font-weight: 700; color: var(--navy);
  text-transform: uppercase; letter-spacing: .08em;
}
.decl-table table { width: 100%; border-collapse: collapse; font-size: 1rem; background: var(--card); border-radius: 10px; overflow: hidden; }
.decl-table th, .decl-table td {
  text-align: left; padding: .6rem .75rem; vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 35%, transparent);
}
.decl-table thead th { background: color-mix(in srgb, var(--card-border) 22%, transparent); color: var(--text-2); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.decl-table tbody th { color: var(--muted-card); font-weight: 650; white-space: nowrap; }
.decl-table th span, .decl-table td span { display: block; }
/* Devanagari leads the label; the English name is the gloss beneath it. */
.decl-table .label-deva {
  font-family: var(--font-deva); font-weight: 600; font-size: 1.05rem;
  text-transform: none; letter-spacing: 0; color: var(--text);
}
.decl-table .label-en {
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 650; color: var(--muted-card);
}
.decl-table thead th .label-deva { color: var(--text-2); }
.decl-table tr:last-child th, .decl-table tr:last-child td { border-bottom: 0; }
.form-deva { font-family: var(--font-deva); font-size: 1.15rem; color: var(--text); }
.form-iast { font-style: italic; color: var(--muted-card); font-size: .9rem; }

@media (max-width: 600px) {
  .catgroup { padding: .4rem .75rem; }
  .decl-table { padding: .5rem .6rem .75rem; }
  .decl-table th, .decl-table td { padding: .5rem .45rem; }
}

/* ---------- odds and ends ---------- */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sense-source cite { font-style: italic; }

/* the words hub */
.word-index { padding-bottom: clamp(2rem, 1rem + 4vw, 4rem); }
.word-list { display: grid; gap: .6rem; padding: 0; margin: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.word-list a {
  display: flex; align-items: baseline; gap: .55rem; text-decoration: none;
  padding: .7rem .95rem; border-radius: 12px; color: var(--text);
  background: var(--glass); border: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.word-list a:hover { background: var(--glass-strong); }
.word-list .deva { font-family: var(--font-deva); font-size: 1.25rem; color: var(--accent); }
.word-list .translit { font-style: italic; color: var(--on-sky); }   /* 983 rows */