/* ============================================================================
   Yamate — shared "premium" layer for the SEO pages (tools, guides, trades).
   Loaded AFTER each page's inline <style>, so it overrides the plain defaults
   with a consistent high-end design system. Plain CSS, no framework.
   Research basis: warm layered shadows, fluid type, 8pt rhythm, real buttons.
   ============================================================================ */

:root{
  --ym-ink:#2d2823; --ym-ink-soft:#5c554c; --ym-line:#e7ddcf;
  --ym-terra:#c2693f; --ym-terra-d:#a8542f; --ym-gold:#b08842;
  --ym-cream:#f7f2ea; --ym-shadow:28deg 35% 22%;        /* WARM shadow hue, not grey */
  --ym-e1:0 1px 2px hsl(var(--ym-shadow)/.06), 0 2px 4px hsl(var(--ym-shadow)/.05);
  --ym-e2:0 1px 2px hsl(var(--ym-shadow)/.05), 0 4px 8px hsl(var(--ym-shadow)/.06), 0 8px 16px hsl(var(--ym-shadow)/.05);
  --ym-e3:0 2px 4px hsl(var(--ym-shadow)/.05), 0 10px 20px hsl(var(--ym-shadow)/.08), 0 18px 34px hsl(var(--ym-shadow)/.06);
}

/* ---- Body & subtle warm depth ------------------------------------------- */
body{
  color:var(--ym-ink);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);   /* 16 -> ~17px fluid */
  line-height:1.65;
  background:radial-gradient(80% 50% at 50% -5%, #fdf8f0 0%, var(--ym-cream) 60%) no-repeat, var(--ym-cream);
  text-rendering:optimizeLegibility;
}
::selection{background:hsl(28 60% 55% / .25); color:var(--ym-ink);}

/* ---- Typography: confident scale, tight headings ------------------------ */
h1{font-size:clamp(1.95rem,1.5rem + 2vw,2.75rem) !important; line-height:1.12 !important; letter-spacing:-.022em; text-wrap:balance;}
h2{line-height:1.18 !important; letter-spacing:-.015em; text-wrap:balance;}
h3{line-height:1.25 !important; letter-spacing:-.01em;}
article p, .content p, .lede{text-wrap:pretty;}

/* ---- Byline / freshness (E-E-A-T trust signal) -------------------------- */
/* NO FLEX HERE. A .byline is a PROSE PARAGRAPH, and every one of the 67 pages that carries one
   writes it as running text with inline <b> and <a> inside. display:flex turns each of those inline
   children into a FLEX ITEM, so the sentence stops being a sentence: with flex-wrap:nowrap the items
   are squeezed into narrow side-by-side columns. Measured live 2026-09-03 on
   getting-a-trade-business-found-online.html, whose guest byline carries three links and a <b> — it
   rendered as nine ragged columns with the words stacked inside them, on the page that credits an
   outside author by name. Short bylines (By <b>Yamate</b> · Last updated ...) survived only because
   three items still fit on one line, so nothing announced it for the fortnight this rule shipped —
   and even those were spacing wrong, the 7px gap standing in for the collapsed space around the name.
   The rule bought nothing that normal inline flow does not already give a paragraph. */
.byline{color:var(--ym-ink-soft); font-size:.83em; margin:-2px 0 18px;}
.byline b{color:var(--ym-ink); font-weight:700;}
a{text-underline-offset:3px; text-decoration-thickness:1px;}

/* ---- Cards / panels / calculators: warm layered shadow + hover lift ----- */
.calc, .panel, .card, .lcard, #invoice{
  box-shadow:var(--ym-e2) !important;
  border-color:var(--ym-line) !important;
}
.lcard{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.lcard:hover{transform:translateY(-3px); box-shadow:var(--ym-e3) !important; border-color:var(--ym-terra) !important;}

/* ---- The "answer" / result boxes become the visual anchor --------------- */
.answer{box-shadow:var(--ym-e1); background:linear-gradient(180deg,#fffdfa,#fdf8f1) !important;}
.out .big{background:linear-gradient(180deg,#eef4ec,#e6efe3) !important;}
.out .big b{letter-spacing:-.02em;}

/* ---- Buttons / CTAs: gradient + layered shadow + tactile states --------- */
.cta, .btn:not(.ghost):not(.btn-secondary), .printbtn{
  background:linear-gradient(180deg,#d07a4f 0%, var(--ym-terra) 100%) !important;
  box-shadow:0 1px 2px hsl(var(--ym-shadow)/.20), 0 6px 16px hsl(var(--ym-shadow)/.20), inset 0 1px 0 hsl(0 0% 100% / .18) !important;
  border:0 !important;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.cta:hover, .btn:not(.ghost):not(.btn-secondary):hover, .printbtn:hover{
  background:linear-gradient(180deg,#c2693f 0%, var(--ym-terra-d) 100%) !important;
  box-shadow:0 2px 5px hsl(var(--ym-shadow)/.24), 0 12px 26px hsl(var(--ym-shadow)/.24), inset 0 1px 0 hsl(0 0% 100% / .18) !important;
  transform:translateY(-1px); text-decoration:none;
}
.cta:active, .btn:active, .printbtn:active{transform:translateY(1px) scale(.99);}

/* ---- Inputs: clearer focus --------------------------------------------- */
input:focus, textarea:focus, select:focus{box-shadow:0 0 0 3px hsl(28 60% 55% / .18);}

/* ---- Tables: kill the spreadsheet look --------------------------------- */
table{border:1px solid var(--ym-line) !important; border-radius:11px; overflow:hidden; box-shadow:var(--ym-e1);}
thead th, table tr:first-child th{
  text-transform:uppercase; letter-spacing:.04em; font-size:.8em; color:var(--ym-ink-soft);
}
tbody tr:nth-child(even) td, table tr:nth-child(even) td{background:#faf5ee;}
/* a card table (CARD-TABLES, each row its own card on a phone) drops the stripe and the outer frame there,
   or every other card shows a beige block inside it and the stack sits in a box */
@media(max-width:560px){
  table.cardtbl{border:0 !important; border-radius:0; overflow:visible; box-shadow:none;}
  table.cardtbl tr:nth-child(even) td{background:transparent;}
}

/* ---- Pills / tool links: subtle lift ----------------------------------- */
.tools a{transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.tools a{min-height:44px; display:inline-flex; align-items:center;}
.tools a:hover{transform:translateY(-1px); box-shadow:var(--ym-e1); border-color:var(--ym-terra); text-decoration:none;}

/* ---- Accessibility: real focus ring + reduced motion -------------------- */
:focus-visible{outline:2px solid var(--ym-terra); outline-offset:3px; border-radius:5px;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* ---- Sticky mobile CTA (injected by pages.js) -------------------------- */
.ym-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:hsl(36 40% 97% / .94); backdrop-filter:saturate(140%) blur(8px);
  border-top:1px solid var(--ym-line); box-shadow:0 -3px 14px hsl(var(--ym-shadow)/.10);
  display:flex;
}
.ym-sticky a{
  flex:1; text-align:center; color:#fff; font-weight:800; font-size:15px;
  padding:13px; border-radius:11px; text-decoration:none;
  background:linear-gradient(180deg,#d07a4f,var(--ym-terra));
  box-shadow:0 2px 10px hsl(var(--ym-shadow)/.22), inset 0 1px 0 hsl(0 0% 100% / .18);
}
.ym-sticky small{display:block; font-weight:600; font-size:11px; opacity:.92; margin-top:1px;}
/* off while a form control sits under it (pages.js), so the bar never covers a box or button */
.ym-sticky{transition:transform .18s ease;}
.ym-sticky.ym-off{transform:translateY(110%); pointer-events:none;}
body.ym-haspad{padding-bottom:84px;}
@media (min-width:760px){ .ym-sticky{display:none !important;} body.ym-haspad{padding-bottom:0;} }

/* ---- Print: never carry the screen chrome onto a printed/saved PDF ------ */
@media print{
  .ym-sticky{display:none !important;}
  #invoice{box-shadow:none !important; border:none !important;}
  body{background:#fff !important;}
}

/* ---- Gentle reveal on scroll (progressive enhancement; content visible if JS off) */
@media (prefers-reduced-motion: no-preference){
  .ym-reveal{opacity:0; transform:translateY(10px); animation:ym-rise .55s ease forwards;}
  @keyframes ym-rise{to{opacity:1; transform:none;}}
}

/* ============================================================================
   THE QUOTE BUILDER — used by the eight <trade>-quote-template.html pages.
   Lives here rather than in eight inline <style> blocks for the same reason
   assets/quote-builder.js does: eight mirrored copies is CLAUDE.md §A-25 drift,
   and a spacing fix applied to seven of them reddens nothing.
   ONLY --ym-* tokens are used, all declared in this file's own :root above, so
   this block cannot orphan a token on a page that forgets to declare one
   (static-invariants FIX-SOFT-TOKEN).
   ========================================================================= */
.qbwrap{background:#fff; border:1px solid var(--ym-line); border-radius:18px;
  box-shadow:var(--ym-e2); padding:20px; margin:0 0 28px;}
.qbhead{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:.78em; text-transform:uppercase; letter-spacing:.05em; font-weight:800;
  color:var(--ym-ink-soft); padding-bottom:9px; border-bottom:1px solid var(--ym-line);}

.qbrow{padding:11px 0; border-bottom:1px dashed var(--ym-line);}
.qbrow:last-child{border-bottom:0;}
.qbrow input{width:100%; border:1.5px solid var(--ym-line); border-radius:9px;
  padding:10px 11px; min-height:44px; font-size:15px; font-weight:600; color:var(--ym-ink); background:#fff;}
.qbrow input:focus{outline:none; border-color:var(--ym-terra);}
.qbd{font-weight:700 !important;}
.qbnum{display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:7px;}
.qbnum .qbq{width:64px; text-align:center; flex:none;}
.qbnum .qbr{width:88px; text-align:right; flex:none;}
.qbu{font-size:12.5px; font-weight:700; color:var(--ym-ink-soft); min-width:34px;}
.qblt{margin-left:auto; font-size:15.5px; font-weight:800; white-space:nowrap;}
.qbx{flex:none; width:44px; height:44px; border:1px solid var(--ym-line); background:#fff;
  border-radius:9px; color:var(--ym-ink-soft); font-size:19px; line-height:1; cursor:pointer;}
.qbx:hover{border-color:var(--ym-terra); color:var(--ym-terra);}
/* a phone keeps qty, unit, rate, line total and the 44px delete on one line */
@media (max-width:440px){
  .qbwrap{padding:16px 14px;}
  .qbnum{flex-wrap:nowrap; gap:5px;}
  .qbnum .qbq{width:50px; padding:10px 4px;}
  .qbnum .qbr{width:76px; padding:10px 7px;}
  .qbu{min-width:0; font-size:12px;}
  .qblt{font-size:15px;}
}

.qbadd{display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  margin:12px 0 4px; padding:11px 16px; border:1.5px dashed var(--ym-line); background:#fff;
  border-radius:11px; font-weight:700; font-size:14px; color:var(--ym-ink); cursor:pointer;}
.qbadd:hover{border-color:var(--ym-terra); color:var(--ym-terra);}

.qbopts{display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center;
  margin:14px 0 4px; padding-top:14px; border-top:1px solid var(--ym-line); font-size:14px;}
.qbopts label{display:flex; align-items:center; gap:8px; font-weight:700; margin:0; min-height:44px;}
.qbopts input[type=checkbox]{width:20px; height:20px; accent-color:var(--ym-terra);}
.qbopts input[type=text]{width:62px; min-height:44px; text-align:center; padding:8px; font-weight:700;
  border:1.5px solid var(--ym-line); border-radius:8px;}

.qbout{margin-top:16px; display:grid; gap:1px; background:var(--ym-line);
  border-radius:12px; overflow:hidden;}
.qbout div{background:#fff; display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:12px 15px; font-size:15px;}
.qbout div b{font-weight:800; white-space:nowrap;}
.qbout div[hidden]{display:none;}
.qbout .qbbig{background:linear-gradient(180deg,#eef4ec,#e6efe3);}
.qbout .qbbig b{font-size:21px; color:#46703f; letter-spacing:-.02em;}

.qbacts{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.qbacts button{flex:1 1 160px; min-height:44px; padding:13px; border-radius:11px;
  font-weight:800; font-size:14.5px; cursor:pointer; border:1.5px solid var(--ym-line);
  background:#fff; color:var(--ym-ink);}
.qbacts button:hover{border-color:var(--ym-terra); color:var(--ym-terra);}
.qbstatus{min-height:20px; margin-top:9px; font-size:13px; font-weight:700;}
.qbstatus.good{color:#46703f;}
.qbstatus.bad{color:#a5562f;}
.qbtext{width:100%; min-height:120px; margin-top:10px; padding:11px; font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; line-height:1.5;
  border:1.5px solid var(--ym-line); border-radius:11px; background:var(--ym-cream);
  color:var(--ym-ink); resize:vertical;}

@media print{
  .qbacts,.qbadd,.qbx,.qbstatus,.qbtext,.qbopts{display:none !important;}
  .qbwrap{box-shadow:none !important; border:1px solid #ccc !important;}
}

/* ============================================================================
   GOVERNMENT-REGISTRY LOOKUP (assets/gov-lookup.js) — SEO_IMPLEMENTATION_PLAN
   TECH-04. One presentation for registry data across every page that shows it,
   so the source line, the date and the limitation cannot drift page to page.
   Only --ym-* tokens, all declared in this file's own :root.
   ========================================================================= */
.gv{background:#fff; border:1px solid var(--ym-line); border-radius:16px;
  padding:18px; margin:0 0 22px; box-shadow:var(--ym-e2);}
.gv-lab{display:block; font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
  font-weight:800; font-size:16px; margin:0 0 3px; color:var(--ym-ink);}
.gv-hint{color:var(--ym-ink-soft); font-size:13.5px; margin:0 0 12px; line-height:1.5;}
.gv-row{display:flex; gap:9px; flex-wrap:wrap;}
.gv-row input{flex:1 1 190px; min-width:0; font-family:inherit; padding:12px 13px; font-size:16px; font-weight:600;
  border:1.5px solid var(--ym-line); border-radius:11px; background:#fff; color:var(--ym-ink);}
.gv-row input:focus{outline:none; border-color:var(--ym-terra);}
.gv-row button{flex:0 0 auto; min-height:46px; padding:12px 22px; border:0; border-radius:11px;
  font-family:inherit; font-weight:800; font-size:15px; color:#fff; cursor:pointer;
  background:linear-gradient(180deg,#d07a4f,var(--ym-terra));
  box-shadow:0 2px 10px hsl(var(--ym-shadow)/.20), inset 0 1px 0 hsl(0 0% 100% / .18);}
.gv-row button:hover{background:linear-gradient(180deg,var(--ym-terra),var(--ym-terra-d));}

.gv-status{min-height:19px; margin:10px 0 0; font-size:13.5px; font-weight:700; color:var(--ym-ink-soft);}
.gv-status.gv-warn{color:#a5562f;}

.gv-list{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px;}
.gv-list button{width:100%; text-align:left; background:#fff; border:1.5px solid var(--ym-line);
  border-radius:11px; padding:11px 13px; cursor:pointer; min-height:46px; color:var(--ym-ink);}
.gv-list button:hover{border-color:var(--ym-terra);}
.gv-list b{display:block; font-size:14.5px; font-weight:800; line-height:1.35;}
.gv-list span{display:block; font-size:12.5px; color:var(--ym-ink-soft); margin-top:2px;}

.gv-card{margin-top:13px; border:1.5px solid var(--ym-line); border-radius:13px; padding:15px; background:#fdfbf8;}
.gv-name{font-family:'Plus Jakarta Sans',-apple-system,sans-serif; font-weight:800;
  font-size:17px; line-height:1.3; margin-bottom:10px;}
.gv-dl{margin:0; display:grid; gap:1px; background:var(--ym-line); border-radius:10px; overflow:hidden;}
.gv-dl > div{background:#fff; display:flex; justify-content:space-between; gap:12px; padding:9px 12px; font-size:14px;}
.gv-dl dt{margin:0; font-weight:700; color:var(--ym-ink-soft);}
.gv-dl dd{margin:0; font-weight:700; text-align:right;}
.gv-yes{color:#46703f;}
.gv-no{color:var(--ym-ink-soft);}
.gv-bn{font-size:13px; margin:10px 0 0; line-height:1.55; color:var(--ym-ink-soft);}
.gv-more{color:var(--ym-ink-soft);}
.gv-use{margin-top:13px; width:100%; min-height:46px; padding:12px; border:0; border-radius:11px;
  font-weight:800; font-size:15px; color:#fff; cursor:pointer;
  background:linear-gradient(180deg,#d07a4f,var(--ym-terra));}
.gv-use.gv-done{background:#46703f; cursor:default;}
.gv-src{font-size:12px; color:var(--ym-ink-soft); margin:12px 0 0; line-height:1.5;}

@media print{ .gv{display:none !important;} }


/* ============================================================================
   THE HANDOFF CARD (GO-1, 2026-08-18) — the seam between a free public tool and
   the app doing the same job for you.

   WHY IT LOOKS LIKE A RESULT AND NOT AN AD. It sits directly under the answer a
   visitor just got, and it names THAT answer. A generic "sign up" banner in the
   same slot reads as a toll and gets ignored; this reads as the next step of the
   thing they were already doing, which is the whole point of the two-tier design
   in docs/specs/spec-seo-tool-auth-tiers.md.

   It is a LINK. No edge function is opened and no credential is called from a
   public page — the visitor lands in the app, signs in there if they need to, and
   the app makes the call as it already does.
   ========================================================================= */
.ymgo{border:1.5px solid var(--ym-terra);border-radius:15px;padding:17px 19px;margin:22px 0;
  background:linear-gradient(180deg,#fffdfa,#fdf5ee);box-shadow:var(--ym-e2);}
.ymgo h3{margin:0 0 5px;font-size:17px;line-height:1.3;}
.ymgo p{margin:0 0 13px;font-size:14.5px;line-height:1.55;color:var(--ym-ink);}
.ymgo .ymgo-a{display:flex;align-items:center;justify-content:center;min-height:46px;
  padding:13px 17px;border-radius:12px;font-weight:800;font-size:15px;text-align:center;
  color:#fff !important;text-decoration:none;
  background:linear-gradient(180deg,#d07a4f,var(--ym-terra));
  box-shadow:0 2px 10px hsl(var(--ym-shadow)/.22), inset 0 1px 0 hsl(0 0% 100% / .18);}
.ymgo .ymgo-a:hover{text-decoration:none;transform:translateY(-1px);}
.ymgo .ymgo-sub{display:block;margin-top:9px;font-size:12.5px;color:var(--ym-ink-soft);text-align:center;}
.ymgo ul{margin:0 0 13px 20px;font-size:14.5px;}
.ymgo li{margin-bottom:5px;}
@media print{.ymgo{display:none !important;}}

/* ---- Thumb-sized footer and breadcrumb links on phones (TAP-44, 2026-09-30) ----
   Site audit 2026-09-29 D-7: footer links measured 15-22px tall and breadcrumbs 16-18px on phones,
   under the 44px §B asks of anything a thumb taps. Each link becomes a 44px-tall inline box up to
   720px; the words, their order and the separators are unchanged, and wider screens are untouched.
   This file reaches the SEO families; pages that load only chrome.css are listed in the audit
   hand-back rather than patched page by page. */
@media (max-width:720px){
  footer a, .crumbs a{display:inline-flex;align-items:center;min-height:44px;}
}