/* ==========================================================================
   usepantree.com : shared stylesheet
   ==========================================================================

   ONE source of truth for tokens, typography, layout and the shared shell
   (masthead, footer, buttons, callouts). Page-specific composition stays in a
   small <style> block on the page that needs it.

   Direction A, "The Receipt" (design/site-directions.html, owner-picked
   2026-08-10): paper ground, thermal-print monospace for facts, and green used
   ONLY where the receipt becomes pantry, so the colour carries the argument.

   NOTE: extracted 2026-08-18 from six duplicated <style> blocks. The token
   VALUES had not drifted, but the components had. The brand mark was 38px on
   the landing page and 32px everywhere else. `.steps` meant a three-column
   feature grid on one page and a tinted ordered list on another. `.warn`
   hard-coded #8F3D14 instead of the token that already existed.

   IMPORTANT: this file is part of the Cloudflare Pages upload set (see
   site/README.md). A direct upload REPLACES the whole set, and every page now
   depends on this one file. Omitting it ships six unstyled pages, two of which
   are the legal documents App Review reads. Upload all of them, every time.

   No build step. No web fonts. No network requests except /logo.png.
   ========================================================================== */

:root{
  /* colour */
  --paper-bg:#F6F3EC;      /* warm newsprint, not cream-generic */
  --paper:#FFFDF8;         /* the receipt itself */
  --ink:#1B1815;           /* thermal black, warm */
  --dim:#655E53;           /* secondary text */
  /* NOTE: darkened 2026-08-18 for contrast. #948C7D measured 3.00:1 on the
     page ground, and this token carries 10.5px to 13.5px text (footer,
     microcopy, fineprint headings, the 404 slip header). Small text needs
     4.5:1, not the 3.0 that applies to large text and UI. Now 4.55:1. */
  --faint:#766E5F;         /* metadata, footer */
  --rule:#DFD8C9;          /* hairlines */
  --green:#2E7D32;         /* app light token: accent, links, focus */
  --on-green:#FFFFFF;
  --green-soft:#E7F0E5;
  --burnt:#8F3D14;         /* best-by urgency and caution */
  --burnt-soft:#F6E7DD;
  --shadow:rgba(60,45,20,.55);

  /* type */
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;

  /* spacing scale. One scale, used everywhere; anything off it needs a reason. */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* layout */
  --page-max:1080px;   /* wide pages (landing) */
  /* NOTE: the reading column IS the measure. Measured on the live privacy
     policy before this existed: 68 to 96 characters per line, averaging 79,
     against a comfortable 45 to 75. Capping only the paragraphs was the first
     attempt and it was wrong: headings and callouts kept the old width, so
     nothing shared a right edge any more. Narrowing the column instead keeps
     every element on one alignment. */
  --prose-max:624px;   /* reading pages (legal, support): about 67 characters */
  --gutter:24px;
  --radius:8px;
  --radius-sm:6px;
}

@media (prefers-color-scheme:dark){
  :root{
    /* A receipt under a lamp: warm-neutral dark, paper becomes a raised warm
       surface, ink becomes warm off-white. The accent matches the app's dark
       token (#7CC47F) so the site and the app agree. */
    --paper-bg:#15130F;
    --paper:#1E1B16;
    --ink:#F0EBE1;
    --dim:#ABA294;
    /* Same correction in dark: #7E7666 was 3.82:1 on the raised paper
       surface. Now 4.51:1 there and 4.87:1 on the ground. */
    --faint:#8A8272;
    --rule:#332E26;
    --green:#7CC47F;
    --on-green:#12210F;
    --green-soft:#1D2B1D;
    --burnt:#E8A87C;
    --burnt-soft:#332318;
    --shadow:rgba(0,0,0,.7);
  }
}

/* -- base ---------------------------------------------------------------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper-bg);
  color:var(--ink);
  font:16px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--green);}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px;}

/* Skip link: visible only on focus, and it must clear the masthead. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:10;
  background:var(--paper);color:var(--ink);
  padding:var(--s3) var(--s5);
  border:1px solid var(--rule);border-radius:0 0 var(--radius) 0;
}
.skip:focus{left:0;}

/* -- layout containers --------------------------------------------------- */
.inner{max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter);}
/* Reading pages run slightly larger than the landing page. Legal text is read
   carefully rather than scanned, and the extra pixel widens the average glyph,
   which pulls the line down to about 68 characters at the same column width.
   Measured: 79 characters per line before any of this, 68 after. */
.wrap{
  max-width:var(--prose-max);margin:0 auto;
  padding:var(--s5) var(--gutter) var(--s8);
  font-size:17px;line-height:1.65;
}

/* -- typography ---------------------------------------------------------- */
/* Roles, not sizes. A page has exactly one title; sections sit clearly below
   it; supporting text sits clearly below them. */
h1{
  font-size:clamp(28px,4.2vw,34px);
  line-height:1.14;font-weight:700;letter-spacing:-.028em;
  margin:0 0 var(--s2);text-wrap:balance;max-width:20ch;
}
h2{
  font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.015em;
  margin:var(--s7) 0 var(--s3);text-wrap:balance;
}
h3{
  font-size:16px;line-height:1.35;font-weight:700;letter-spacing:-.01em;
  margin:var(--s5) 0 var(--s2);
}
p{margin:0 0 var(--s3);}
ul,ol{margin:0 0 var(--s4);padding-left:22px;}
li{margin-bottom:var(--s2);}
strong{font-weight:600;}

/* Uppercase mono metadata, the "thermal print" voice. Used for the dateline,
   eyebrows and footer. Letter-spacing is what makes small caps legible. */
.meta{
  color:var(--dim);
  font:12px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 var(--s6);
}

/* -- masthead ------------------------------------------------------------ */
/* NOTE: one definition. The landing page used 38px and every other page 32px,
   which read as two different sites when you navigated between them. */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;}
.brand img{
  width:36px;height:36px;display:block;border-radius:50%;
  background:#FAFBF8;flex:0 0 auto;
}
.brand span{font:700 18px/1 var(--mono);letter-spacing:-.02em;color:var(--green);}

/* Reading pages: the brand is the whole masthead, on its own line. */
.wrap > .brand{margin-bottom:var(--s6);}

/* Landing: brand plus nav, on a dashed rule. */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  max-width:var(--page-max);margin:0 auto;
  padding:var(--s3) var(--gutter);
  border-bottom:1px dashed var(--rule);
}
.nav{display:flex;gap:var(--s2);font:12px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;}
/* NOTE: padding, not height. These were 12px tall, which fails WCAG 2.2
   SC 2.5.8 (24 by 24 minimum for a standalone target) and is a poor thumb
   target besides. The visual size is unchanged; the hit area is not. */
.nav a{
  color:var(--dim);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s2);
  border-radius:var(--radius-sm);
}
.nav a:hover{color:var(--ink);}

/* -- buttons ------------------------------------------------------------- */
/* Two variants only: one primary action per view, everything else quiet. */
.btn,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 var(--s5);
  border-radius:var(--radius);
  font:600 15px/1 var(--sans);text-decoration:none;
  border:1px solid transparent;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background-color .15s ease;
}
.btn{background:var(--green);color:var(--on-green);border-color:var(--green);}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -12px var(--shadow);}
.btn:active{transform:translateY(0);box-shadow:none;}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule);font-weight:500;}
.btn-ghost:hover{border-color:var(--faint);}
.btn-ghost:active{background:var(--paper);}

/* -- callouts ------------------------------------------------------------ */
/* THREE roles, deliberately distinct, and each earns its tint:
     .callout : affirmative emphasis (green)
     .warn    : caution or consequence (burnt)
     .note    : quiet aside, no tint at all
   Two identical green boxes used to exist under different names (`.callout` on
   the policy, `.steps` on support). Same component, one name now.
   NOTE: use them sparingly. Five consecutive tinted boxes emphasise nothing. */
.callout,.warn{
  border-radius:0 var(--radius) var(--radius) 0;
  padding:var(--s3) var(--s4);
  margin:var(--s4) 0;
  font-size:15px;
}
.callout{border-left:3px solid var(--green);background:var(--green-soft);}
.warn{
  border:1px solid var(--rule);border-left:3px solid var(--burnt);
  background:var(--paper);color:var(--dim);
}
.warn strong{color:var(--ink);}
.callout ol,.callout ul{margin:0;padding-left:20px;}
/* Separator between clauses inside ONE bounded block. Four consecutive framed
   boxes read as four things to skip; one frame with hairlines reads as one
   thing to read. The emphasis is unchanged, the repetition is not. */
.callout hr,.warn hr{
  border:0;border-top:1px solid var(--rule);
  margin:var(--s3) 0;opacity:.7;
}
.callout li:last-child,.warn li:last-child{margin-bottom:0;}
.callout > :last-child,.warn > :last-child,.note > :last-child{margin-bottom:0;}

.note{
  background:var(--paper);border:1px dashed var(--rule);border-radius:10px;
  padding:var(--s4) var(--s5);
  color:var(--dim);font-size:15px;margin:var(--s5) 0;
}
.note em{color:var(--ink);font-style:italic;}

/* -- receipt idiom ------------------------------------------------------- */
/* Dotted leader between a label and a figure, the one visual joke the site
   makes. Shared by the landing receipt and the 404 page. */
.leader{flex:1;border-bottom:1px dotted var(--rule);margin:0 var(--s2) 5px;}
.amt{font-variant-numeric:tabular-nums;}

/* -- footer -------------------------------------------------------------- */
footer{
  margin-top:var(--s8);padding-top:var(--s5);
  border-top:1px dashed var(--rule);
  font:11.5px/1.9 var(--mono);color:var(--faint);
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
}
footer a{color:var(--dim);text-decoration:none;}
footer a:hover{color:var(--ink);text-decoration:underline;}
footer nav{display:flex;gap:var(--s3);flex-wrap:wrap;}
/* Footer links are standalone targets, so they get a real hit area too. */
footer nav a{display:inline-flex;align-items:center;min-height:32px;}

/* -- motion -------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .btn:hover{transform:none;}
}

/* -- narrow screens ------------------------------------------------------ */
@media (max-width:600px){
  :root{--gutter:20px;}
  h2{margin-top:var(--s6);}
  .wrap{padding-bottom:var(--s7);}
  /* Stack the footer so the two halves do not fight for one line. */
  footer{flex-direction:column;gap:var(--s2);}
}

/* Tables — added 2026-08-20 for the privacy policy's provider and retention
   lists. No other page uses tables, so this is additive. Scrolls horizontally
   on narrow screens rather than forcing the page body to scroll. */
.tablewrap { overflow-x: auto; margin: 18px 0; }
.tablewrap table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 0.95rem; }
.tablewrap th, .tablewrap td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.tablewrap th { font-weight: 650; white-space: nowrap; }
.tablewrap tr:last-child td { border-bottom: none; }