/* Sambal Tina dictionary.

   Layout only. Colours come from tokens.css; this file adds no new palette.
   The page reuses the shared editorial shell (site.css / site-polish.css) and
   only styles what is specific to a searchable reference page. */

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.about-hero .section-label{
  margin:0 0 20px;
  color:var(--blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* The compiler's byline sits directly under the title: this dictionary is the
   project's work, and the cited source is credited separately below. */
.about-hero .byline{
  margin:24px 0 0;
  padding-left:16px;
  border-left:3px solid var(--blue);
  display:grid;
  gap:3px;
}
.about-hero .byline strong{
  color:var(--navy);
  font-size:clamp(15px,1.3vw,17px);
  font-weight:700;
  letter-spacing:.01em;
}
.about-hero .byline span{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.about-hero .byline+.lead{margin-top:26px}

/* Who made this */
.dict-credits{
  background:var(--soft);
  border-top:1px solid var(--line);
  padding:clamp(60px,7vw,92px) 0;
}
.dict-credits h2{
  width:var(--content);
  margin:0 auto clamp(28px,3vw,42px);
  color:var(--navy);
  font-family:var(--font-editorial);
  font-weight:400;
  font-size:clamp(30px,3.4vw,46px);
  letter-spacing:-.032em;
}
.credits-grid{
  width:var(--content);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
.credits-lead{
  margin:0 0 18px;
  color:var(--ink);
  font-family:var(--font-editorial);
  font-size:clamp(19px,1.7vw,23px);
  line-height:1.5;
  letter-spacing:-.015em;
}
.credits-main p{
  margin:0 0 15px;
  color:var(--text);
  font-size:15px;
  line-height:1.8;
}
.credits-main p:last-child{margin-bottom:0}
.credits-side{
  padding-top:20px;
  border-top:3px solid var(--blue);
}
.credits-side h3{
  margin:0 0 12px;
  color:var(--navy);
  font-family:var(--font-display);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.credits-side p{
  margin:0 0 14px;
  color:var(--text);
  font-size:13.5px;
  line-height:1.72;
}
.credits-rights{
  padding-top:14px;
  border-top:1px solid var(--line);
  color:var(--muted)!important;
  font-size:12px!important;
  margin-bottom:0!important;
}

/* What this is, and what it is not */
.dict-promise{
  width:var(--content);
  margin:0 auto;
  padding:8px 0 76px;
}
.dict-promise h2{
  margin:0 0 34px;
  color:var(--navy);
  font-family:var(--font-editorial);
  font-weight:400;
  font-size:clamp(28px,3vw,40px);
  letter-spacing:-.03em;
}
.promise-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,44px);
}
.promise-grid>div{
  padding-top:20px;
  border-top:3px solid var(--blue);
}
.promise-grid h3{
  margin:0 0 11px;
  color:var(--navy);
  font-family:var(--font-display);
  font-size:16px;
  line-height:1.3;
  letter-spacing:-.01em;
}
.promise-grid p{
  margin:0;
  color:var(--text);
  font-size:14px;
  line-height:1.75;
}

/* Phrasebook */
.phrasebook{
  background:var(--soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(64px,7vw,96px) 0;
}
.phrasebook-head{
  width:var(--content);
  margin:0 auto clamp(34px,4vw,52px);
  max-width:780px;
}
.phrasebook-head h2{
  margin:0 0 14px;
  color:var(--navy);
  font-family:var(--font-editorial);
  font-weight:400;
  font-size:clamp(32px,4vw,52px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.phrasebook-head p{
  margin:0;
  color:var(--text);
  font-size:15px;
  line-height:1.75;
}
.phrasebook-groups{
  width:var(--content);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(20px,2.4vw,32px);
}
.phrasebook-groups:empty::before{
  content:attr(data-empty);
  color:var(--muted);
  font-size:14px;
}
.phrase-group{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px 24px;
}
.phrase-group h3{
  margin:0 0 18px;
  color:var(--blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.phrase-group ul{margin:0;padding:0;list-style:none}
.phrase-group li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:baseline;
  padding:11px 0;
  border-top:1px solid var(--line);
}
.phrase-group li:first-child{border-top:0;padding-top:0}
.phrase-en{
  color:var(--muted);
  font-size:13px;
}
.phrase-tina{
  color:var(--ink);
  font-family:var(--font-editorial);
  font-size:19px;
  line-height:1.2;
}
.phrase-page{
  color:var(--muted);
  font-size:10px;
  letter-spacing:.04em;
  white-space:nowrap;
}

/* Search */
.dict{
  width:var(--content);
  margin:0 auto;
  padding:clamp(70px,7vw,104px) 0 40px;
}
.dict-head{max-width:780px;margin:0 0 30px}
.dict-head h2{
  margin:0 0 10px;
  color:var(--navy);
  font-family:var(--font-editorial);
  font-weight:400;
  font-size:clamp(32px,4vw,52px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.dict-sub{margin:0;color:var(--text);font-size:15px;line-height:1.7}

.dict-controls{
  position:sticky;
  top:0;
  z-index:20;
  display:grid;
  gap:14px;
  padding:16px 0;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.dict-search input{
  width:100%;
  min-height:56px;
  padding:0 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white);
  color:var(--ink);
  /* 16px minimum: anything smaller makes mobile Safari zoom on focus. */
  font-size:var(--control-font);
  font-family:inherit;
  transition:border-color var(--ease),box-shadow var(--ease);
}
.dict-search input:hover{border-color:#BFC8D8}
.dict-search input:focus{
  outline:0;
  border-color:var(--blue-bright);
  box-shadow:0 0 0 4px rgba(30,99,233,.10);
}
.dict-filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  min-height:44px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--text);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background var(--ease),border-color var(--ease),color var(--ease);
}
.chip:hover{border-color:#BFC8D8}
.chip.is-active{
  background:var(--blue);
  border-color:var(--blue);
  color:var(--white);
}

.dict-status{
  margin:22px 0 0;
  color:var(--muted);
  font-size:13px;
}

/* Results */
.dict-results{
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.dict-entry{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr) auto;
  gap:clamp(16px,2.4vw,38px);
  align-items:start;
  padding:22px 0;
  border-top:1px solid var(--line);
}
.entry-head{min-width:0}
.entry-tina{
  margin:0;
  color:var(--navy);
  font-family:var(--font-editorial);
  font-size:clamp(21px,2vw,26px);
  line-height:1.18;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.entry-pos{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:12px;
  font-style:italic;
}
.entry-glosses{min-width:0}
.entry-en{
  margin:0;
  color:var(--ink);
  font-size:15px;
  line-height:1.6;
  overflow-wrap:anywhere;
}
.entry-fil{
  margin:7px 0 0;
  color:var(--text);
  font-size:13.5px;
  line-height:1.65;
  overflow-wrap:anywhere;
}
.entry-fil::before{
  content:"Filipino · ";
  color:var(--muted);
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.entry-missing{
  margin:7px 0 0;
  color:var(--muted);
  font-size:12.5px;
  font-style:italic;
}
.entry-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
  text-align:right;
}
.entry-note{
  margin:0;
  max-width:230px;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.5;
}

.badge{
  display:inline-block;
  padding:5px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}
.badge-strong{background:#E9F4EC;color:#1F6238}
.badge-ok{background:#EEF2FF;color:#1B3B8F}
.badge-check{background:#FFF3DC;color:#8A5A00}
.badge-page{background:var(--soft);color:var(--muted);border:1px solid var(--line)}

mark{background:rgba(255,199,0,.34);color:inherit;border-radius:2px;padding:0 1px}

.dict-more{margin:28px 0 0}
.dict-noscript{
  margin:20px 0 0;
  padding:18px 20px;
  border-left:3px solid var(--blue);
  background:var(--soft);
  color:var(--text);
  font-size:14px;
  line-height:1.7;
}
.dict-noscript a{color:var(--blue);text-decoration:underline}

/* Legend */
.dict-legend{
  width:var(--content);
  margin:0 auto;
  padding:clamp(56px,6vw,84px) 0;
}
.dict-legend h2{
  margin:0 0 26px;
  color:var(--navy);
  font-family:var(--font-display);
  font-size:18px;
  letter-spacing:-.01em;
}
.dict-legend dl{margin:0;display:grid;gap:0}
.dict-legend dl>div{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:24px;
  align-items:start;
  padding:15px 0;
  border-top:1px solid var(--line);
}
.dict-legend dt{margin:0}
.dict-legend dd{margin:0;color:var(--text);font-size:14px;line-height:1.7}

.dict-help{width:var(--content);margin:0 auto}
.dict-help-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px!important;
}

@media(max-width:980px){
  .promise-grid{grid-template-columns:1fr;gap:26px}
  .credits-grid{grid-template-columns:1fr;gap:30px}
  .dict-entry{grid-template-columns:1fr;gap:12px;padding:20px 0}
  .entry-meta{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
  }
  .entry-note{max-width:none}
  .dict-legend dl>div{grid-template-columns:1fr;gap:9px}
}

@media(max-width:520px){
  .phrase-group{padding:22px 18px;border-radius:14px}
  .dict-controls{padding:12px 0}
}

@media(prefers-reduced-motion:reduce){
  .dict-search input,.chip{transition:none}
}


/* At a glance ------------------------------------------------------------- */
.dict-stats{
  width:var(--content);
  margin:0 auto;
  padding:12px 0 64px;
}
.stat-row{
  margin:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}
.stat{background:var(--white);padding:22px 20px}
.stat dt{
  margin:0 0 8px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.stat dd{
  margin:0;
  color:var(--navy);
  font-family:var(--font-display);
  font-size:clamp(26px,2.8vw,36px);
  font-weight:800;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}

/* Entry of the day -------------------------------------------------------- */
.daily{
  background:var(--navy);
  color:#fff;
  padding:clamp(48px,5.5vw,72px) 0;
}
.daily-inner{width:var(--content);margin:0 auto;max-width:820px}
.daily .section-label{color:var(--yellow);margin:0 0 14px}
.daily-word{
  margin:0;
  color:#fff;
  font-family:var(--font-editorial);
  font-weight:400;
  font-size:clamp(40px,5.5vw,72px);
  line-height:1.02;
  letter-spacing:-.04em;
  overflow-wrap:anywhere;
}
.daily-gloss{
  margin:16px 0 0;
  color:rgba(255,255,255,.9);
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.55;
}
.daily-meta{
  margin:14px 0 0;
  color:rgba(255,255,255,.5);
  font-size:12px;
  letter-spacing:.05em;
}

/* Search field additions -------------------------------------------------- */
.dict-search{position:relative}
.dict-clear{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border:0;
  border-radius:999px;
  background:var(--soft);
  color:var(--muted);
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.dict-clear:hover{background:var(--line);color:var(--ink)}
.dict-sub kbd{
  display:inline-block;
  min-width:22px;
  padding:2px 6px;
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:5px;
  background:var(--soft);
  color:var(--ink);
  font-family:inherit;
  font-size:12px;
  text-align:center;
}
.chip-count{
  margin-left:6px;
  opacity:.62;
  font-variant-numeric:tabular-nums;
}

/* Alphabet ---------------------------------------------------------------- */
.dict-alphabet{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.dict-alphabet button{
  min-width:34px;
  min-height:34px;
  padding:0 8px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background var(--ease),color var(--ease);
}
.dict-alphabet button:hover{background:var(--soft);color:var(--ink)}
.dict-alphabet button.is-active{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}

/* Entry additions --------------------------------------------------------- */
.entry-status{
  margin:8px 0 0;
  color:var(--muted);
  font-size:11px;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.entry-copy{
  margin-top:2px;
  padding:5px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:background var(--ease),color var(--ease),border-color var(--ease);
}
.entry-copy:hover{background:var(--soft);color:var(--ink);border-color:#BFC8D8}
.entry-copy.is-copied{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}
.dict-entry{transition:background var(--ease)}
.dict-entry:hover{background:var(--soft)}

@media(max-width:980px){
  .stat-row{grid-template-columns:1fr 1fr}
  .dict-alphabet{
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .dict-alphabet::-webkit-scrollbar{display:none}
  .dict-alphabet button{flex:0 0 auto}
}

@media(prefers-reduced-motion:reduce){
  .dict-entry,.entry-copy,.dict-alphabet button{transition:none}
}

/* Breadcrumb: where this page sits, for a reader and for a crawler. */
.crumbs{max-width:1180px;margin:0 auto;padding:104px clamp(20px,5vw,48px) 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
  font:500 11.5px/1.4 var(--font-ui);letter-spacing:.06em;text-transform:uppercase}
.crumbs li{display:flex;align-items:center;gap:8px;color:var(--muted)}
.crumbs li+li::before{content:"/";color:var(--line)}
.crumbs a{color:var(--blue);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}
.living-static{border-top:1px solid var(--line)}

/* Entries maintained by an editor, layered over the archive. The label is
   part of the entry, not decoration: a reader should be able to tell a
   corrected reading from what the source actually said. */
.badge-edited{background:rgba(13,59,158,.1);color:var(--blue)}
.entry-credit{
  font:400 11px/1.4 var(--font-ui);color:var(--muted);
  align-self:center;
}
.entry-example{
  margin:8px 0 0;font:400 13.5px/1.55 var(--font-ui);
  color:var(--text);font-style:italic;
}
.entry-example span{font-style:normal;color:var(--muted)}

/* Sambal Tina 101 — the primer between the statistics and the promise.

   This section was written and shipped with no styling at all. Its rules had
   been drafted in sambal-tina-community.css, a stylesheet no page ever linked,
   so the markup arrived on the page and fell back to browser defaults: three
   articles stacked full-width instead of a three-column grid, "01/02/03"
   rendering as ordinary body text rather than as markers, and the three core
   vowels running together as "AIO".

   The rules here are new rather than recovered. The drafted ones were built
   for a dark hero — white text, translucent white borders — and this section
   sits on the light page, so lifting them would have produced white-on-white.
   They also targeted `.vowel-row span` while the markup uses `<b>`, which is
   the more accurate element anyway: these are three letters being pointed at,
   not three spans.

   The proportions deliberately match .dict-promise directly below it — same
   content width, same three columns, same blue rule over each card — because
   the two sections are read as a pair and had no reason to disagree. */
.dict-primer{
  width:var(--content);
  margin:0 auto;
  padding:70px 0 8px;
}
.dict-primer-head{max-width:780px;margin:0 0 34px}
.dict-primer-head h2{
  margin:0 0 14px;
  color:var(--navy);
  font-family:var(--font-editorial);
  font-weight:400;
  font-size:clamp(28px,3vw,40px);
  letter-spacing:-.03em;
}
.dict-primer-head p{
  margin:0;
  color:var(--text);
  font-size:15px;
  line-height:1.7;
}
.primer-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,44px);
}
.primer-grid article{
  padding-top:20px;
  border-top:3px solid var(--blue);
}
.primer-number{
  display:block;
  margin:0 0 9px;
  color:var(--blue);
  font:800 11px/1 var(--font-ui);
  letter-spacing:.18em;
}
.primer-grid h3{
  margin:0 0 11px;
  color:var(--navy);
  font-family:var(--font-display);
  font-size:16px;
  line-height:1.3;
  letter-spacing:-.01em;
}
.primer-grid p{
  margin:0;
  color:var(--text);
  font-size:14px;
  line-height:1.75;
}

/* A, I, O. Three letters set apart from the sentence that introduces them,
   so the reader can see the vowel system rather than only read about it. */
.vowel-row{
  display:flex;
  gap:10px;
  margin:18px 0 0;
}
.vowel-row b{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--soft);
  color:var(--navy);
  font-family:var(--font-display);
  font-size:20px;
  font-weight:800;
}

@media(max-width:980px){
  .dict-primer{padding-top:52px}
  .primer-grid{grid-template-columns:1fr;gap:26px}
}


/* ------------------------------------------------------------------------
   What happens when you send a word.

   This block was on the homepage, where it ran 672px and carried no links at
   all. It is dictionary process — what a submission goes through before it is
   published — so it now sits with the dictionary it describes, beside the
   invitation to contribute.

   The archive-transcription block that sat next to it on the homepage did NOT
   come with it: check-dictionary.py and check-living-sambal.py both forbid
   archive mechanics ("printed index", "archive p.") on this page, and that is
   a deliberate decision about what a dictionary reader should be shown.
   ------------------------------------------------------------------------ */


/* ------------------------------------------------------- 07 · community --- */

.community{background:var(--navy-deep);color:var(--white);padding-block:var(--stage-pad)}
.community-inner{
  max-width:1560px;margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,80px);align-items:center;
}
.community h2{
  margin:0;font:400 clamp(30px,4.4vw,60px)/1.05 var(--font-editorial);
  letter-spacing:-.02em;max-width:15ch;
}
.community p{margin:20px 0 0;font:400 15.5px/1.65 var(--font-ui);color:rgba(255,255,255,.72);max-width:44ch}
/* One contribution shown properly, rather than a wall of faces. */
.thread{display:grid;gap:0}
.thread-step{
  display:grid;grid-template-columns:auto 1fr;gap:18px;
  padding-block:20px;
}
.thread-rail{display:grid;justify-items:center;gap:6px}
.thread-dot{
  width:11px;height:11px;border-radius:50%;background:var(--yellow);
  box-shadow:0 0 0 5px rgba(255,199,0,.14);
}
.thread-line{width:1px;flex:1;min-height:26px;background:rgba(255,255,255,.18)}
.thread-step:last-child .thread-line{display:none}
.thread-step h3{margin:0;font:600 14.5px/1.3 var(--font-ui);color:var(--white)}
.thread-step p{margin:7px 0 0;font:400 13.5px/1.55 var(--font-ui);color:rgba(255,255,255,.62);max-width:40ch}