/* ---------------------------------------------------------------------------
   Palette borrowed from a VFR sectional: chart paper, linework slate, and the
   airspace inks (Class B blue, Class C magenta, caution amber, terrain green).
   --------------------------------------------------------------------------- */
:root {
  --chart:    #E4E2D6;
  --chart-hi: #EFEDE3;
  --ink:      #16272D;
  --ink-2:    #4E6067;
  --rule:     #C5C2B3;
  --blue:     #2B5B87;
  --magenta:  #A22E62;
  --amber:    #B96E14;
  --terrain:  #3D6A49;

  --tab-amber:   #E0A93B;
  --tab-yellow:  #DFD152;
  --tab-orange:  #E08A4B;
  --tab-teal:    #6BBFC0;
  --tab-green:   #8CC06A;
  --tab-blue:    #79A9D6;
  --tab-magenta: #DE8AAE;

  --sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;

  --wrap: 62rem;
  --pad: clamp(1.1rem, 4vw, 2.5rem);

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }

html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 4rem); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--chart);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  /* faint chart-grid tick, not a gradient wash */
  background-image:
    linear-gradient(to right, rgba(22,39,45,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,39,45,.035) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
}

h1, h2, h3 { line-height: 1.12; margin: 0; font-weight: 600; letter-spacing: -.012em; }
p { margin: 0; }
a { color: var(--blue); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -999px;
  background: var(--ink); color: var(--chart); padding: .6rem 1rem; z-index: 20;
}
.skip:focus { left: .5rem; top: .5rem; }

:focus-visible { outline: 2.5px solid var(--magenta); outline-offset: 2px; }

/* ------------------------------------------------------------------- bar */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem var(--pad);
  padding-top: calc(.7rem + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--chart) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .95rem; letter-spacing: -.015em;
  color: var(--ink); text-decoration: none;
}
.bar-actions { display: flex; align-items: center; gap: .4rem; }
.bar-actions a {
  font-size: .9rem; text-decoration: none; color: var(--ink-2);
  padding: .45rem .6rem; border-radius: 3px;
}
.bar-actions a:hover { color: var(--ink); }

button { font: inherit; cursor: pointer; border-radius: 3px; }
.primary {
  background: var(--ink); color: var(--chart-hi); border: 1px solid var(--ink);
  padding: .6rem 1.05rem; font-weight: 600; font-size: .92rem;
}
.primary:hover { background: #0C1A1F; }
.ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--ink);
  padding: .45rem .85rem; font-weight: 500; font-size: .9rem;
}
.ghost:hover { background: rgba(22,39,45,.06); }
.back {
  background: none; border: 0; color: var(--ink-2); padding: .3rem 0;
  font-size: .88rem; font-weight: 500;
}
.back:hover { color: var(--ink); }

main { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad) 5rem; }

/* ------------------------------------------------------------------ hero */
.hero { padding: clamp(2.5rem, 8vw, 5rem) 0 0; }
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 8.5vw, 4.4rem);
  font-weight: 600;
  margin-bottom: .5rem;
}
.lede { color: var(--ink-2); font-size: clamp(1rem, 2.4vw, 1.14rem); max-width: 40ch; }

.searchbox {
  display: flex; align-items: center; gap: .5rem;
  margin: 2rem 0 .7rem;
  background: var(--chart-hi);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(22,39,45,.16);
  padding: .3rem .3rem .3rem .85rem;
}
.searchbox:focus-within { box-shadow: 3px 3px 0 var(--magenta); }
.searchbox .mag { width: 20px; height: 20px; color: var(--ink-2); flex: none; }
.searchbox input {
  flex: 1; min-width: 0; border: 0; background: none; padding: .8rem .2rem;
  font: 500 1.05rem/1.3 var(--sans); color: var(--ink);
}
.searchbox input:focus { outline: none; }
.searchbox input::placeholder { color: #8A948F; font-weight: 400; }
.searchbox button {
  flex: none; background: var(--ink); color: var(--chart-hi); border: 0;
  padding: .72rem 1.1rem; font-weight: 600; font-size: .92rem; border-radius: 2px;
}
.corpus-note { font-size: .84rem; color: var(--ink-2); }

/* ------------------------------------------------- the tab rail (the hero) */
.rail-wrap { margin-top: clamp(2.5rem, 7vw, 4rem); }
.rail-title {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  margin-bottom: .2rem;
}
.rail-sub { font-size: .85rem; color: var(--ink-2); margin-bottom: 1.4rem; }
.rail {
  display: flex; flex-wrap: wrap; gap: .45rem .4rem;
  padding-left: .9rem;
  border-left: 3px solid var(--ink);   /* the book's spine */
}
.tab {
  position: relative;
  display: block; text-align: left;
  border: 1px solid rgba(22,39,45,.35); border-left-width: 5px;
  background: var(--tab-yellow);
  padding: .5rem .8rem .55rem .7rem;
  min-width: 8.5rem; flex: 1 1 8.5rem; max-width: 13rem;
  box-shadow: 1px 1px 0 rgba(22,39,45,.2);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tab:hover, .tab:focus-visible {
  transform: translateX(3px);
  box-shadow: 3px 2px 0 rgba(22,39,45,.28);
}
.tab .n {
  display: block; font-weight: 700; font-size: .92rem;
  letter-spacing: -.01em; color: #12201C;
}
.tab .l {
  display: block; font-size: .78rem; line-height: 1.25; margin-top: .1rem;
  color: rgba(18,32,28,.78);
}
.tab[data-c="amber"]   { background: var(--tab-amber); }
.tab[data-c="yellow"]  { background: var(--tab-yellow); }
.tab[data-c="orange"]  { background: var(--tab-orange); }
.tab[data-c="teal"]    { background: var(--tab-teal); }
.tab[data-c="green"]   { background: var(--tab-green); }
.tab[data-c="blue"]    { background: var(--tab-blue); }
.tab[data-c="magenta"] { background: var(--tab-magenta); }

/* --------------------------------------------------------------- results */
.results { padding-top: 2rem; }
.results-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: .7rem; border-bottom: 1.5px solid var(--ink);
}
#results-count { font-size: .86rem; color: var(--ink-2); }
#results-list { list-style: none; margin: 0; padding: 0; }
#results-list li { border-bottom: 1px solid var(--rule); }

.hit {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-left: 4px solid transparent;
  padding: 1.05rem .9rem 1.1rem; border-radius: 0;
}
.hit:hover { background: rgba(255,255,255,.4); border-left-color: var(--blue); }
.hit[data-src="AIM"]:hover { border-left-color: var(--magenta); }
.hit .top {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .22rem;
}
.hit .cite {
  font-weight: 700; font-size: .88rem; color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.hit[data-src="AIM"] .cite { color: var(--magenta); }
.hit .where { font-size: .76rem; color: var(--ink-2); }
.hit h3 {
  font-family: var(--serif); font-size: 1.16rem; font-weight: 600;
  margin-bottom: .3rem;
}
.hit p {
  font-family: var(--serif); font-size: .95rem; line-height: 1.55;
  color: var(--ink-2); max-width: 70ch;
}
.hit mark { background: rgba(224,169,59,.5); color: inherit; padding: 0 .1em; }
.empty { padding: 3rem 0; color: var(--ink-2); font-size: 1rem; max-width: 48ch; }

/* ---------------------------------------------------------------- reader */
.reader { padding-top: 2rem; max-width: 42rem; }
.reader .cite {
  margin-top: 1.4rem; font-weight: 700; font-size: .95rem; color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.reader[data-src="AIM"] .cite { color: var(--magenta); }
.reader h1 {
  font-family: var(--serif); font-size: clamp(1.8rem, 5vw, 2.5rem);
  margin: .2rem 0 .5rem;
}
.breadcrumb {
  font-size: .82rem; color: var(--ink-2);
  padding-bottom: 1.2rem; border-bottom: 1.5px solid var(--ink); margin-bottom: 1.6rem;
}
.regtext {
  font-family: var(--serif); font-size: 1.06rem; line-height: 1.68;
}
.regtext p { margin: 0 0 1.05rem; max-width: 68ch; }
.regtext p.indent { padding-left: 1.6rem; }
.regtext.clipped {
  max-height: 16rem; overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.gate {
  border: 1.5px solid var(--ink); border-left-width: 5px;
  background: var(--chart-hi); padding: 1.3rem 1.4rem; margin: 0 0 2rem;
}
.gate h3 { font-family: var(--serif); font-size: 1.25rem; margin-bottom: .35rem; }
.gate p { font-size: .93rem; color: var(--ink-2); margin-bottom: 1rem; max-width: 46ch; }

.readernav {
  display: flex; gap: .6rem; flex-wrap: wrap;
  padding-top: 1.4rem; border-top: 1px solid var(--rule);
}
.readernav button {
  flex: 1 1 14rem; text-align: left; background: var(--chart-hi);
  border: 1px solid var(--rule); padding: .7rem .85rem;
}
.readernav button:hover { border-color: var(--ink); }
.readernav .dir { display: block; font-size: .74rem; color: var(--ink-2); }
.readernav .to { display: block; font-size: .9rem; font-weight: 600; margin-top: .1rem; }
.srcnote { margin-top: 1.6rem; font-size: .8rem; color: var(--ink-2); }

/* ----------------------------------------------------------------- plans */
.plans { padding-top: 2.5rem; }
.plans h1 { font-family: var(--serif); font-size: clamp(2rem, 6vw, 3rem); margin-bottom: .4rem; }
.plan-grid {
  display: grid; gap: 1rem; margin: 2.4rem 0 3.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.plan {
  border: 1px solid var(--rule); background: var(--chart-hi);
  padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column;
}
.plan.featured { border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 rgba(22,39,45,.18); }
.plan h2 { font-size: 1rem; font-weight: 600; color: var(--ink-2); }
.price {
  font-family: var(--serif); font-size: 2.6rem; font-weight: 600;
  margin: .35rem 0 1rem; line-height: 1;
}
.price span { font-family: var(--sans); font-size: .95rem; font-weight: 400; color: var(--ink-2); }
.plan ul { list-style: none; margin: 0 0 1.5rem; padding: 0; flex: 1; }
.plan li {
  font-size: .92rem; padding: .34rem 0 .34rem 1.2rem; position: relative; color: var(--ink-2);
}
.plan li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: .5rem; height: .5rem; border-left: 1.5px solid var(--terrain);
  border-bottom: 1.5px solid var(--terrain); transform: rotate(-45deg) translateY(-2px);
}
.plan button { width: 100%; }

.signin-block {
  border-top: 1.5px solid var(--ink); padding-top: 2rem; max-width: 34rem;
}
.signin-block h2 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: .3rem; }
.signin-block p { font-size: .93rem; color: var(--ink-2); margin-bottom: 1.1rem; }
#signin-form { display: flex; gap: .5rem; flex-wrap: wrap; }
#signin-form input {
  flex: 1 1 15rem; border: 1.5px solid var(--ink); background: var(--chart-hi);
  padding: .68rem .8rem; font: 400 1rem var(--sans); color: var(--ink);
}
.formnote { margin-top: .8rem; font-size: .88rem; color: var(--terrain); min-height: 1.3em; }
.formnote[data-bad="1"] { color: var(--magenta); }

/* ---------------------------------------------------------------- footer */
footer {
  border-top: 1px solid var(--rule); padding: 2rem var(--pad) 3rem;
  max-width: var(--wrap); margin: 0 auto;
  font-size: .82rem; color: var(--ink-2); display: grid; gap: .6rem;
}

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


/* ------------------------------------------------------- saved tabs */
.tab-wrap { position: relative; flex: 1 1 8.5rem; max-width: 13rem; display: flex; }
.tab-wrap .tab { flex: 1; min-width: 0; }
.tab .note {
  display: block; font-size: .72rem; line-height: 1.3; margin-top: .3rem;
  padding-top: .3rem; border-top: 1px solid rgba(18,32,28,.25);
  color: rgba(18,32,28,.72); font-style: italic;
}
.tab-drop {
  position: absolute; top: .2rem; right: .2rem;
  width: 1.35rem; height: 1.35rem; line-height: 1;
  border: 0; background: rgba(255,255,255,.55); color: #12201C;
  font-size: 1rem; border-radius: 2px; opacity: 0; padding: 0;
}
.tab-wrap:hover .tab-drop, .tab-drop:focus-visible { opacity: 1; }
.tab-drop:hover { background: #fff; }

.tabbar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 1.6rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--rule);
}
.savetab[aria-pressed="true"] { background: var(--ink); color: var(--chart-hi); }
.swatches { display: flex; gap: .3rem; }
.swatches button {
  width: 1.5rem; height: 1.5rem; border: 1.5px solid rgba(22,39,45,.4); padding: 0;
}
.swatches button[aria-pressed="true"] { border-color: var(--ink); border-width: 3px; }
.notewrap { flex: 1 1 14rem; display: flex; }
.notewrap input {
  flex: 1; min-width: 0; border: 1px solid var(--rule); background: var(--chart-hi);
  padding: .5rem .6rem; font: 400 .9rem var(--sans); color: var(--ink);
}
.notewrap input:focus { border-color: var(--ink); outline: none; }

.flag {
  font-size: .78rem; font-weight: 600; color: var(--terrain); margin-bottom: .3rem;
}
.freenote {
  font-size: .9rem; color: var(--ink-2); max-width: 52ch; margin: -1.6rem 0 3rem;
}
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: var(--chart-hi); padding: .7rem 1.1rem;
  font-size: .9rem; z-index: 30; border-radius: 3px; max-width: 90vw;
}