/* ===========================================================
   Verbi — visual direction: Italian enamel street signage.
   Deep vitreous blue and bone white, with conjugation colour
   carrying real information (green = regular, red = irregular).
   =========================================================== */

:root{
  --ink:        #12263F;
  --ink-2:      #3D5A7A;
  --ink-3:      #7C8FA6;
  --bone:       #E9EBE4;
  --card:       #FCFCF9;
  --line:       #C9CEC6;
  --regular:    #1D6B4F;
  --irregular:  #A8382A;
  --gold:       #B8892F;

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --pad: clamp(1rem, 4vw, 2.5rem);
  --radius: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  /* faint vitreous sheen, not a gradient hero */
  background-image:radial-gradient(120% 60% at 50% -10%, #F2F3EE 0%, var(--bone) 60%);
  background-attachment:fixed;
}

/* ---------- top bar ---------- */

.topbar{
  position:sticky; top:0; z-index:20;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"mark search" "filters filters";
  gap:.75rem var(--pad);
  align-items:center;
  padding:.75rem var(--pad);
  background:var(--ink);
  color:var(--bone);
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}

.wordmark{
  grid-area:mark;
  display:flex; align-items:baseline; gap:.5rem;
  text-decoration:none; color:inherit;
}
.wordmark__n{
  font-family:var(--mono);
  font-size:1.05rem; font-weight:700;
  letter-spacing:.06em;
  padding:.15rem .45rem;
  border:1.5px solid var(--bone);
  border-radius:2px;
  line-height:1;
}
.wordmark__t{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  opacity:.85;
}

.search{ grid-area:search; position:relative; display:flex; }
#q{
  width:100%;
  font:inherit;
  padding:.55rem .75rem;
  color:var(--ink);
  background:var(--card);
  border:none;
  border-radius:var(--radius);
  outline-offset:2px;
}
#q::placeholder{ color:var(--ink-3); }
.search__hint{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:.7rem;
  color:var(--ink-3);
  border:1px solid var(--line); border-radius:3px;
  padding:0 .3rem;
  pointer-events:none;
}

.filters{ grid-area:filters; display:flex; gap:.4rem; flex-wrap:wrap; }
.chip{
  font:inherit; font-size:.8rem;
  letter-spacing:.02em;
  padding:.25rem .7rem;
  color:var(--bone);
  background:transparent;
  border:1px solid rgba(233,235,228,.35);
  border-radius:100px;
  cursor:pointer;
}
.chip:hover{ border-color:rgba(233,235,228,.8); }
.chip[aria-pressed="true"]{ background:var(--bone); color:var(--ink); border-color:var(--bone); }

@media (min-width:720px){
  .topbar{
    grid-template-columns:auto minmax(12rem,26rem) 1fr;
    grid-template-areas:"mark search filters";
  }
  .filters{ justify-content:flex-end; }
}

/* ---------- list ---------- */

.view{ padding:var(--pad); max-width:76rem; margin:0 auto; }

.count{
  margin:0 0 1rem;
  font-family:var(--mono); font-size:.75rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2);
}

.grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.5rem;
  grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr));
}

.card{
  position:relative;
  display:block; width:100%; text-align:left;
  font:inherit; color:inherit;
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--regular);
  border-radius:var(--radius);
  padding:.7rem .85rem .7rem 3.2rem;
  cursor:pointer;
}
.card--irregular{ border-left-color:var(--irregular); }
.card:hover{ border-color:var(--ink-2); }
.card:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* the enamel number plaque */
.card__n{
  position:absolute; left:.85rem; top:.7rem;
  font-family:var(--mono); font-size:.7rem; font-weight:700;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.card__inf{
  display:block;
  font-family:var(--serif);
  font-size:1.15rem;
  line-height:1.2;
}
.card__en{ display:block; font-size:.82rem; color:var(--ink-2); }
.card__star{
  position:absolute; right:.6rem; top:.55rem;
  color:var(--gold); font-size:.75rem;
}

.empty{ color:var(--ink-2); max-width:34rem; }
.empty em{ font-family:var(--serif); }

/* ---------- detail ---------- */

.back{
  font:inherit; font-size:.85rem;
  background:none; border:none; padding:0;
  color:var(--ink-2); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.back:hover{ color:var(--ink); }

.verbhead{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem 1rem;
  margin:1rem 0 .35rem;
}
.verbhead__inf{
  font-family:var(--serif);
  font-size:clamp(2.1rem, 7vw, 3.4rem);
  font-weight:400;
  line-height:1;
  margin:0;
  letter-spacing:-.01em;
}
.verbhead__plate{
  font-family:var(--mono); font-size:.85rem; font-weight:700;
  color:var(--bone); background:var(--ink);
  padding:.2rem .5rem; border-radius:2px;
  font-variant-numeric:tabular-nums;
}
.verbhead__en{
  font-size:1.05rem; color:var(--ink-2);
  margin:0 0 1rem;
}

.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.5rem; padding:0; list-style:none; }
.tag{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:2px;
  border:1px solid currentColor;
}
.tag--regular{ color:var(--regular); }
.tag--irregular{ color:var(--irregular); }
.tag--essential{ color:var(--gold); }
.tag--plain{ color:var(--ink-2); }

.principal{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  margin:0 0 2rem; padding:.85rem 1rem;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
}
.principal div{ min-width:8rem; }
.principal dt{
  font-family:var(--mono); font-size:.65rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
}
.principal dd{ margin:.1rem 0 0; font-family:var(--serif); font-size:1.05rem; }

/* speak button */
.speak{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.8rem; height:1.8rem; flex:0 0 auto;
  padding:0; margin-left:.4rem;
  vertical-align:middle;
  background:transparent;
  border:1px solid var(--line); border-radius:100px;
  color:var(--ink-2); cursor:pointer;
}
.speak:hover{ color:var(--ink); border-color:var(--ink-2); }
.speak:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.speak[aria-pressed="true"]{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.speak svg{ width:.85rem; height:.85rem; fill:currentColor; }

/* section headings */
.sec{ margin:0 0 .75rem; }
.sec__t{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2);
  margin:0 0 .1rem;
}
.sec__rule{ height:1px; background:var(--line); margin:0 0 1rem; border:0; }

/* usage block */
.usage{ margin:0 0 2.5rem; }
.example{
  background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--ink); border-radius:var(--radius);
  padding:.85rem 1rem; margin:0;
}
.example__it{ font-family:var(--serif); font-size:1.15rem; margin:0; }
.example__en{ color:var(--ink-2); font-size:.9rem; margin:.25rem 0 0; }

.sayings{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.5rem; }
.saying{
  display:grid; grid-template-columns:auto 1fr; gap:.15rem .7rem;
  align-items:baseline;
  padding:.6rem 0; border-top:1px dotted var(--line);
}
.saying__kind{
  font-family:var(--mono); font-size:.6rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold);
  grid-row:span 2;
  padding-top:.25rem;
}
.saying__it{ font-family:var(--serif); font-size:1.02rem; }
.saying__en{ color:var(--ink-2); font-size:.85rem; }

/* ---------- the tense grid: signature element ---------- */

.tensegrid{
  display:grid; gap:.5rem;
  grid-template-columns:repeat(auto-fill, minmax(16.5rem, 1fr));
  margin:0 0 1.5rem; padding:0; list-style:none;
}
.tense{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.65rem .8rem .75rem;
}
.tense__head{
  display:flex; align-items:baseline; gap:.5rem;
  margin:0 0 .5rem;
}
.tense__n{
  font-family:var(--mono); font-size:.7rem; font-weight:700;
  color:var(--bone); background:var(--ink-2);
  min-width:1.35rem; text-align:center;
  padding:.1rem .25rem; border-radius:2px;
  font-variant-numeric:tabular-nums;
}
.tense__name{ font-family:var(--serif); font-size:1rem; }
.tense__en{ font-size:.72rem; color:var(--ink-3); margin-left:auto; text-align:right; }

.forms{
  margin:0; padding:0;
  display:grid; grid-template-columns:auto 1fr auto 1fr;
  gap:.15rem .5rem;
  font-size:.92rem;
  align-items:baseline;
}
.forms dt{
  font-family:var(--mono); font-size:.65rem;
  color:var(--ink-3); text-align:right;
  font-variant-numeric:tabular-nums;
}
.forms dd{ margin:0; }

.simple-compound{
  display:flex; align-items:center; gap:.6rem;
  margin:2rem 0 1rem;
}

/* audio availability note */
.audionote{
  font-size:.8rem; color:var(--ink-2);
  background:var(--card); border:1px dashed var(--line);
  border-radius:var(--radius); padding:.6rem .8rem; margin:0 0 1.5rem;
}
.audionote code{ font-family:var(--mono); font-size:.75rem; }

/* ---------- footer ---------- */

.foot{
  max-width:76rem; margin:0 auto; padding:2rem var(--pad) 3rem;
  border-top:1px solid var(--line);
  color:var(--ink-3); font-size:.78rem;
}
.foot p{ max-width:44rem; margin:0; }
.foot em{ font-family:var(--serif); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}