/* =========================================================================
   terms/terms.css — the ONLY stylesheet a Hustlin' Terms page gets.

   Same contract as blog/post.css, and for the same reason. Every term page
   links this file and carries NO inline <style> block: the moment one page
   defines its own colours, the section starts drifting into a second design
   system, which is exactly what happened to the blog before post.css existed.

   THE SURFACE RULE (inherited from post.css, unchanged)
   ----------------------------------------------------
   Term bodies render on the CREAM surface. Amber text is --amber-ink
   (#7A4E00), never --amber (#F0C030), which measures ~1.9:1 on cream and is
   unreadable at body size. White text is never used on the body at all.
   The hero is the one dark region and uses the dark-surface tokens.

   NO POST-LOCAL COLOUR VALUES. Every colour below is a styles.css token, so
   the section follows the palette instead of freezing a copy of it.

   WHY A SEPARATE FILE FROM post.css
   ---------------------------------
   A term page is a reference document, not an article: it is scanned, not
   read start to finish. It gets a sticky contents rail, a definition panel
   above the fold, a formula block and a related-terms grid — none of which a
   blog post has, and all of which would be dead weight on ten post pages.
   The two files share tokens, not rules.

   YMYL / E-E-A-T NOTE
   -------------------
   .gls-rev (the "reviewed" line) and .gls-src (sources) are not decoration. This
   is a money-topic glossary; a definition with no dated review and no primary
   source is the kind of page Google's quality raters are explicitly told to
   distrust. Every term page carries both.
   ========================================================================= */


/* ─── HERO ──────────────────────────────────────────────────────────────
   .nav is position:fixed at 108px and the shared .hero has no top offset of
   its own, so the stock 60px padding-top puts the breadcrumb behind the
   header. These are the nav's own breakpoints (108 / 76 / 64) plus air —
   the same values post.css uses. If the nav height ever moves, both files
   move with it or the clipping comes straight back. */
.gls-hero{
  min-height:0;
  padding:124px 40px 40px;
}
@media(max-width:900px){.gls-hero{padding:92px 24px 32px}}
@media(max-width:600px){.gls-hero{padding:92px 18px 28px}}
@media(max-width:480px){.gls-hero{padding:78px 18px 24px}}

.gls-hero .hero-wrap{grid-template-columns:minmax(0,1fr);max-width:1100px}

/* Swap the embossed Impact poster face for the clean display font, exactly
   as post.css does. A term name is a label, not a proposition. */
.gls-hero .hero-h1{
  font-family:var(--f-body);font-weight:800;letter-spacing:-.02em;
  -webkit-text-stroke:0;text-shadow:none;
  font-size:clamp(1.6rem,3vw,2.4rem);
  line-height:1.15;margin-bottom:10px;
}
.gls-hero .hero-h1 em{
  font-style:normal;color:var(--amber);
  -webkit-text-stroke:0;text-shadow:none;
}
/* The abbreviation after the full name — "Annual Percentage Rate (APR)".
   Dimmed so the searched-for string still reads as the primary label. */
.gls-hero .hero-h1 span{color:rgba(255,255,255,.42);font-weight:700}
.gls-hero .breadcrumb{margin-bottom:12px}
.gls-hero .hero-sub{font-size:.95rem;line-height:1.6;max-width:720px;margin-bottom:0}

/* Pronunciation / also-known-as strip under the subhead. */
.gls-aka{
  font-family:var(--f-mono,'Space Mono',monospace);
  font-size:.72rem;color:rgba(255,255,255,.38);
  margin-top:14px;letter-spacing:.02em;
}
.gls-aka b{color:rgba(255,255,255,.6);font-weight:700}


/* ─── SHELL: body column + sticky rail ──────────────────────────────────
   Two columns above 1040px, one below. The rail is the section's internal
   linking surface — contents, related terms, the calculator that matches
   the term — and it is in the markup on every page rather than injected,
   because a crawler never scrolls and never clicks. */
.gls-shell{
  max-width:1100px;margin:0 auto;padding:44px 24px 0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:48px;
  align-items:start;
}
@media(min-width:1041px){
  .gls-shell{grid-template-columns:minmax(0,1fr) 268px}
}
@media(max-width:600px){.gls-shell{padding:32px 18px 0;gap:36px}}

/* Body copy stays at ~1rem. Reference pages get scanned, but the paragraphs
   that do get read are the ones that decide whether the definition landed. */
.gls-body h2{
  font-family:var(--f-body);font-size:1.3rem;font-weight:800;
  color:var(--text-dark);margin:38px 0 12px;letter-spacing:-.01em;
  scroll-margin-top:132px;
}
.gls-body h2:first-child{margin-top:0}
.gls-body h3{
  font-family:var(--f-body);font-size:.98rem;font-weight:700;
  color:var(--amber-ink);margin:24px 0 8px;
  scroll-margin-top:132px;
}
.gls-body p{
  font-family:var(--f-body);font-size:1rem;line-height:1.78;
  color:var(--text-body);margin:0 0 16px;
}
.gls-body p strong,.gls-body p b{color:var(--text-dark);font-weight:700}
.gls-body a{color:var(--amber-ink);text-decoration:underline;text-underline-offset:2px}
.gls-body a:hover{color:var(--orange)}

.gls-body ul{list-style:none;padding:0;margin:0 0 18px}
.gls-body ul li{
  font-family:var(--f-body);font-size:.97rem;line-height:1.72;
  color:var(--text-body);padding:0 0 0 26px;margin-bottom:11px;position:relative;
}
.gls-body ul li:before{content:"\2192";position:absolute;left:0;color:var(--amber-ink);font-weight:700}
.gls-body ul li strong,.gls-body ul li b{color:var(--text-dark)}

.gls-body ol{padding-left:22px;margin:0 0 18px}
.gls-body ol li{
  font-family:var(--f-body);font-size:.97rem;line-height:1.72;
  color:var(--text-body);margin-bottom:12px;padding-left:6px;
}
.gls-body ol li::marker{color:var(--amber-ink);font-weight:700}
.gls-body ol li strong,.gls-body ol li b{color:var(--text-dark)}

/* The opening paragraph of the index page. One step up in size and full
   --text-dark rather than --text-body, so the page has a lead rather than
   starting flat. Deliberately NOT blog/post.css's .plead: term pages do not
   link post.css, so reusing that class would render it unstyled — the exact
   failure mode check-shared-css.mjs exists to catch. */
.gls-lead{font-size:1.06rem;line-height:1.72;color:var(--text-dark)}


/* ─── THE DEFINITION PANEL ──────────────────────────────────────────────
   The one-sentence answer, above everything else, in a box you cannot miss.
   This is the block a featured snippet is lifted from, so it is written to
   stand alone with no preceding context: it never opens with "It is" or
   "This means". */
.gls-def{
  background:var(--dark);border-radius:var(--r-md);
  padding:24px 26px;margin:0 0 26px;position:relative;overflow:hidden;
}
.gls-def:before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 90% 0%,rgba(240,192,48,.16) 0%,transparent 60%);
}
.gls-def .gls-lbl{
  position:relative;z-index:1;
  font-family:var(--f-body);font-size:.66rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber);
  display:block;margin-bottom:10px;
}
.gls-def p{
  position:relative;z-index:1;
  font-size:1.04rem;line-height:1.62;color:rgba(255,255,255,.9);margin:0;
}
.gls-def p strong{color:#fff;font-weight:800}
.gls-def p + p{margin-top:12px;font-size:.94rem;color:rgba(255,255,255,.66)}


/* ─── KEY TAKEAWAYS ─────────────────────────────────────────────────────
   Four to six lines, each one a complete claim. Not a summary of the
   headings — a reader who reads only this box should still leave with the
   right model of the term. */
.gls-key{
  border:1px solid rgba(179,129,15,.38);
  background:rgba(240,192,48,.12);
  border-radius:var(--r-md);padding:22px 24px;margin:0 0 30px;
}
.gls-key .gls-lbl{
  font-family:var(--f-body);font-size:.68rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--amber-ink);
  display:block;margin-bottom:12px;
}
.gls-key ul{margin:0}
.gls-key ul li:last-child{margin-bottom:0}


/* ─── CALLOUTS ──────────────────────────────────────────────────────────
   .gls-box is neutral. .gls-warn is for the ones that cost money if ignored —
   orange, not red. Red stays reserved for genuinely dangerous, or it stops
   meaning anything by the twentieth term page. */
.gls-box{
  border:1px solid var(--border);background:var(--cream);
  border-radius:var(--r-md);padding:20px 22px;margin:0 0 22px;
}
.gls-box .gls-lbl{
  font-family:var(--f-body);font-size:.68rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--amber-ink);
  display:block;margin-bottom:9px;
}
.gls-box p{margin:0 0 10px;color:var(--text-body);font-size:.94rem;line-height:1.7}
.gls-box p:last-child{margin:0}
.gls-box p strong,.gls-box p b{color:var(--text-dark);font-weight:700}
.gls-box ul,.gls-box ol{margin-bottom:0}

.gls-warn{border-color:rgba(138,58,0,.38);background:rgba(232,114,14,.10)}
.gls-warn .gls-lbl{color:#8A3A00}


/* ─── FORMULA ───────────────────────────────────────────────────────────
   Mono, dark, and deliberately large. A formula rendered in body text at
   body weight gets skimmed past; the whole reason someone lands on a term
   page is often to copy this one line. */
.gls-formula{
  background:var(--dark);border-radius:var(--r-md);
  padding:22px 24px;margin:0 0 20px;overflow-x:auto;
}
.gls-formula .gls-lbl{
  font-family:var(--f-body);font-size:.66rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber);
  display:block;margin-bottom:12px;
}
.gls-formula code{
  font-family:var(--f-mono,'Space Mono',monospace);
  font-size:.95rem;line-height:1.9;color:#fff;
  display:block;white-space:pre;
}
.gls-formula code em{font-style:normal;color:var(--amber)}
.gls-formula .gls-where{
  font-family:var(--f-body);font-size:.82rem;line-height:1.7;
  color:rgba(255,255,255,.55);margin:14px 0 0;
}
.gls-formula .gls-where b{color:rgba(255,255,255,.85);font-weight:700}


/* ─── WORKED EXAMPLE ────────────────────────────────────────────────────
   Real numbers, every time. An example with placeholder values teaches the
   shape of the arithmetic and none of the feel of it, and the feel is the
   entire reason this site exists. */
.gls-eg{
  border:1px solid var(--border);border-left:4px solid var(--amber-mid);
  background:var(--white);box-shadow:var(--sh-sm);
  border-radius:var(--r-sm);padding:22px 24px;margin:0 0 24px;
}
.gls-eg .gls-lbl{
  font-family:var(--f-body);font-size:.68rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--amber-ink);
  display:block;margin-bottom:12px;
}
.gls-eg p{font-size:.95rem;line-height:1.75;color:var(--text-body);margin:0 0 12px}
.gls-eg p:last-child{margin:0}
.gls-eg .gls-result{
  font-family:var(--f-mono,'Space Mono',monospace);
  font-size:.9rem;line-height:1.8;color:var(--text-dark);
  background:var(--cream);border-radius:var(--r-sm);
  padding:14px 16px;margin:14px 0;white-space:pre-wrap;
}


/* ─── TABLES ────────────────────────────────────────────────────────────
   Same shape as post.css's .ptab so a reader moving between a blog post and
   a term page does not feel two products. */
/* Comparison tables run to four columns, which does not fit a 390px phone at
   this font size no matter how the cells wrap — the "APR vs interest rate vs
   APY" table pushed the document 120px wider than the viewport before this
   existed. The answer is a scroll container rather than a smaller font: the
   table IS the answer on a page like this, and shrinking it to fit is how it
   becomes unreadable instead of merely wide.
   tabindex + role make the scroll region reachable from a keyboard, which an
   overflow container is not by default. */
.gls-tabwrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:0 0 22px;border-radius:var(--r-sm);
}
.gls-tabwrap:focus-visible{outline:2px solid var(--amber-mid);outline-offset:2px}
.gls-tabwrap table.gls-tab{margin:0;min-width:520px}

table.gls-tab{
  width:100%;border-collapse:collapse;margin:0 0 22px;
  font-family:var(--f-body);font-size:.9rem;
  background:var(--white);border-radius:var(--r-sm);overflow:hidden;
  box-shadow:var(--sh-sm);
}
table.gls-tab th{
  text-align:left;padding:11px 13px;color:var(--amber-ink);
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;
  background:rgba(240,192,48,.14);
  border-bottom:1px solid var(--border);
}
table.gls-tab td{
  padding:12px 13px;color:var(--text-body);
  border-bottom:1px solid var(--border);line-height:1.55;
}
table.gls-tab tr:last-child td{border-bottom:0}
table.gls-tab td strong{color:var(--text-dark)}
table.gls-tab td em{color:var(--text-muted);font-style:normal}


/* ─── FAQ ───────────────────────────────────────────────────────────────
   Open text, never <details>. The FAQPage JSON-LD has to have a visible
   answer behind it or the structured data is a claim the page does not
   support — and a collapsed answer is one more thing between a reader and
   the sentence they came for. */
.gls-faq{border-top:1px solid var(--border);margin-top:44px;padding-top:28px}
.gls-faq h2{margin-top:0}
.gls-faq h3{
  font-family:var(--f-body);font-size:1rem;font-weight:800;
  color:var(--text-dark);margin:22px 0 7px;
}
.gls-faq h3:first-of-type{margin-top:14px}
.gls-faq p{font-size:.95rem;line-height:1.75}


/* ─── RELATED TERMS ─────────────────────────────────────────────────────
   The whole point of a glossary is that it is a graph, not a list. Every
   page names the terms a reader is one question away from wanting, and the
   links are two-way: if A lists B, B lists A. */
.gls-rel{border-top:1px solid var(--border);margin-top:40px;padding-top:26px}
.gls-rel h2{margin-top:0;margin-bottom:14px}
.gls-rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.gls-rel-grid a{
  display:block;background:var(--cream);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:12px 14px;transition:all .18s;
  text-decoration:none;
}
.gls-rel-grid a:hover{border-color:var(--amber-mid);background:var(--white);transform:translateY(-1px);box-shadow:var(--sh-sm)}
.gls-rel-grid b{
  display:block;font-family:var(--f-body);font-size:.9rem;font-weight:700;
  color:var(--text-dark);margin-bottom:2px;
}
.gls-rel-grid span{
  display:block;font-family:var(--f-body);font-size:.78rem;line-height:1.5;
  color:var(--text-muted);
}


/* ─── WHERE TO GO NEXT ──────────────────────────────────────────────────
   Same rule the blog runs on: a page that dead-ends is a page wasted. Every
   term routes to at least one calculator and one course stage, because the
   course lessons sit behind an authenticated Edge Function and cannot be
   crawled — these links are how the glossary passes the authority it earns
   to the pages that need it. */
.gls-next{border-top:1px solid var(--border);margin-top:40px;padding-top:26px}
.gls-next h2{margin-top:0}
.gls-next ul{margin-bottom:0}


/* ─── SOURCES, REVIEW LINE, DISCLAIMER ──────────────────────────────── */
.gls-src{border-top:1px solid var(--border);margin-top:40px;padding-top:22px}
.gls-src .gls-lbl{
  font-family:var(--f-body);font-size:.68rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--amber-ink);
  display:block;margin-bottom:12px;
}
.gls-src ol{padding-left:20px;margin:0}
.gls-src ol li{
  font-family:var(--f-body);font-size:.83rem;line-height:1.6;
  color:var(--text-muted);margin-bottom:8px;
}
.gls-src ol li a{color:var(--amber-ink)}

.gls-rev{
  font-family:var(--f-mono,'Space Mono',monospace);
  font-size:.72rem;color:var(--text-muted);
  margin:0 0 24px;padding-bottom:18px;border-bottom:1px solid var(--border);
}
.gls-rev b{color:var(--text-dark);font-weight:700}

.gls-disc{
  font-size:.8rem;line-height:1.65;color:var(--text-muted);
  margin-top:32px;padding:18px 0 60px;border-top:1px solid var(--border);
}


/* ─── STICKY RAIL ───────────────────────────────────────────────────────
   Contents, the matching calculator, and the section's own front door.
   Hidden below 1041px rather than stacked: on a phone it would be 300px of
   duplicate links between the reader and the definition, and the same links
   already appear in the body and the related-terms grid. */
.gls-rail{position:sticky;top:132px;display:none}
@media(min-width:1041px){.gls-rail{display:block}}

.gls-toc{
  background:var(--cream);border:1px solid var(--border);
  border-radius:var(--r-md);padding:18px 20px;margin-bottom:16px;
}
.gls-toc .gls-lbl{
  font-family:var(--f-body);font-size:.64rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber-ink);
  display:block;margin-bottom:11px;
}
.gls-toc ol{list-style:none;padding:0;margin:0;counter-reset:toc}
.gls-toc ol li{margin-bottom:8px;line-height:1.45}
.gls-toc ol li:last-child{margin-bottom:0}
.gls-toc a{
  font-family:var(--f-body);font-size:.82rem;color:var(--text-body);
  text-decoration:none;border-left:2px solid transparent;padding-left:10px;
  display:block;transition:all .18s;
}
.gls-toc a:hover{color:var(--amber-ink);border-left-color:var(--amber-mid)}

.gls-tool{
  background:var(--dark);border-radius:var(--r-md);padding:20px;
}
.gls-tool .gls-lbl{
  font-family:var(--f-body);font-size:.64rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber);
  display:block;margin-bottom:9px;
}
.gls-tool p{
  font-family:var(--f-body);font-size:.82rem;line-height:1.6;
  color:rgba(255,255,255,.62);margin:0 0 14px;
}
.gls-tool .gls-cta{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--amber);color:var(--dark);
  font-family:var(--f-body);font-size:.82rem;font-weight:800;
  padding:10px 18px;border-radius:var(--r-sm);text-decoration:none;
  transition:all .2s;
}
.gls-tool .gls-cta:hover{background:var(--amber-lt);transform:translateY(-1px)}


/* ─── THE INDEX PAGE (terms.html) ───────────────────────────────────────
   Rows and letter groups, not a card grid. Same reasoning as the blog
   index: a uniform grid is fine at ten entries and unusable at three
   hundred, and the gloss under each term is what earns the click. */
.gls-idx{max-width:1100px;margin:0 auto;padding:44px 24px 0}
.gls-idx-jump{
  display:flex;flex-wrap:wrap;gap:6px;margin:0 0 34px;
  padding-bottom:26px;border-bottom:1px solid var(--border);
}
.gls-idx-jump a{
  font-family:var(--f-mono,'Space Mono',monospace);font-size:.82rem;font-weight:700;
  min-width:34px;text-align:center;padding:7px 9px;border-radius:var(--r-sm);
  background:var(--cream);border:1px solid var(--border);color:var(--amber-ink);
  text-decoration:none;transition:all .18s;
}
.gls-idx-jump a:hover{background:var(--amber);border-color:var(--amber);color:var(--dark)}
.gls-idx-jump a.is-empty{opacity:.32;pointer-events:none}

.gls-idx-group{margin-bottom:38px}
.gls-idx-letter{
  font-family:var(--f-display);font-size:1.9rem;color:var(--amber-ink);
  letter-spacing:.02em;margin:0 0 12px;padding-bottom:8px;
  border-bottom:2px solid var(--border);scroll-margin-top:132px;
}
.gls-idx-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px}
.gls-idx-rows a{
  display:block;padding:13px 14px;border-radius:var(--r-sm);
  text-decoration:none;transition:background .16s;
}
.gls-idx-rows a:hover{background:var(--cream)}
.gls-idx-rows b{
  display:block;font-family:var(--f-body);font-size:.95rem;font-weight:700;
  color:var(--text-dark);margin-bottom:2px;
}
.gls-idx-rows span{
  display:block;font-family:var(--f-body);font-size:.82rem;line-height:1.5;
  color:var(--text-muted);
}
@media(max-width:600px){
  .gls-idx{padding:32px 18px 0}
  .gls-idx-rows{grid-template-columns:minmax(0,1fr)}
}