/*
  ONE SHELL FOR THE WHOLE SITE — 24 Sep 2026.

  Owner, 24 Sep 2026: *"it feels like a separate UI,
  https://eudaimonialogistics.company/order add to the overall UI."*

  Until now every page carried its OWN copy of the palette, the header, the
  buttons and the footer in an inline <style> block: index.html had a cream
  sticky bar with a nav, and order.html, track.html and privacy.html each had a
  solid clay bar with a single "The site" link and their own idea of what a
  button looks like. Four copies of one design is four designs, and that is what
  /order felt like.

  🚨 THIS FILE IS THE ONLY PLACE THE SHELL IS DEFINED. Tokens, header, nav,
  buttons, cards, sections, rows and the footer live here and nowhere else. A
  page keeps ONLY what is genuinely its own (the order form, the tracking card,
  the privacy tables) in a short <style> block of its own.

  ⚠️ track.html is wrapped by the Android app (see ANDROID.md). Its address, its
  endpoint and what it remembers on the device are untouched by this file — but
  because its styles are now an external file, `/site.css` and `/site.js` had to
  be added to sw.js's precache SHELL, or a phone with no signal would draw the
  tracking screen unstyled. If you rename either file, change sw.js in the same
  commit and bump CACHE.

  Current page marking: the <body> carries data-page="home|order|track|privacy|account|careers"
  and the rules at the bottom of the header block light the matching nav link.
  It is done in CSS rather than in each page's markup ON PURPOSE — the header
  markup is byte-identical on every page, which is what stops the four copies
  coming back. site.js adds aria-current on top of it for screen readers.
*/

:root{
  --clay:#c08a6b;
  /* 3 Oct 2026 (mobile SEO audit): #a06c50 -> #8a583f. Lighthouse measured the
     old one at 4.1:1 on cream and 4.4:1 on white — under the 4.5:1 that small
     text needs, and it is the colour of every Burmese line (.my), every
     eyebrow and every link in prose. #8a583f is 5.5:1 on cream, 5.9:1 on white
     and 4.7:1 on sand. --clay (the brand's lighter tone) is unchanged and stays
     for borders, ticks and text on the dark bands, where it is 5.8:1. */
  --clay-deep:#8a583f;
  --bark:#3a2a20;
  --ink:#241a13;
  --cream:#faf6f2;
  --sand:#efe4da;
  --white:#fff;
  --body:#5b4638;
  --quiet:#6b584a;
  --bad:#8a3a2c;
  --line:#d8c6b8;
  /* --max is the shell's width (header, footer). --measure is the width of a
     page's own content, which a text page narrows for readability. The two are
     separate so a narrow page still wears the same full-width bar as home. */
  --max:1140px;
  --measure:1140px;
  --gutter:20px;
}
[data-page="order"]{--measure:900px}
[data-page="track"]{--measure:680px}
[data-page="privacy"]{--measure:760px}
[data-page="account"]{--measure:680px}
[data-page="careers"]{--measure:760px}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--cream);color:var(--ink);
  /* One family for the whole site. It carries Noto Sans Myanmar, which the
     home page did NOT have before this file: every Burmese line on index.html
     was falling back to whatever the system offered. */
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans Myanmar",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* The safe-area insets live on .wrap and on the bars, not on <body>: a padded
   body would pull the sticky header and the dark bands in from the edges, and
   a TWA with no browser chrome still needs the notch respected. */
.wrap{
  max-width:var(--max);margin:0 auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}
main.wrap{max-width:var(--measure)}
/* A page whose content starts with its title needs air under the bar. The home
   page does not: its first child is a full-bleed band that must touch it. */
main.wrap > h1{margin-top:34px}
main.wrap > .page-note:last-child{margin-bottom:0}

h1,h2,h3{line-height:1.2;margin:0;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(27px,3.2vw,38px)}
h2{font-size:clamp(23px,2.6vw,32px)}
h3{font-size:18px}
a{color:inherit}
/* A link in running prose is clay, everywhere. Anything with a class of its own
   — .btn, .choice, .tile, .pcard, the footer — paints itself. */
main a:not([class]){color:var(--clay-deep)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
img{max-width:100%}

.eyebrow{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--clay-deep);font-weight:700;margin-bottom:12px}
.lead{font-size:17px;color:var(--body);max-width:52em;margin:16px 0 0}
.muted{color:var(--quiet)}
.small{font-size:13.5px}
.crit{color:var(--bad)}
/* The Burmese half of a bilingual heading: smaller, quieter, its own line.
   Never under 13px (3 Oct 2026): .66em of a 15px note drew Myanmar script at
   9.9px on /order, and its stacked vowels and medials are the first thing to
   blur on a phone. */
.my{display:block;font-weight:400;font-size:max(.66em,13px);color:var(--clay-deep);margin-top:4px;letter-spacing:0;line-height:1.4}

/* ══════════════ header and nav ══════════════
   Cream, sticky, with the mark, six links and the quote button — the home
   page's bar, now worn by every page. The markup is byte-identical everywhere;
   check-one-shell.mjs fails the build if it drifts. */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(250,246,242,.93);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--sand);
  padding-top:env(safe-area-inset-top);
}
.bar{display:flex;align-items:center;gap:20px;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;min-width:0}
.brand-mark{width:36px;height:36px;flex:none;border-radius:9px;display:block}
.brand-name b{display:block;font-size:14.5px;letter-spacing:.14em;font-weight:700;white-space:nowrap}
.brand-name span{display:block;font-size:12px;letter-spacing:.2em;color:var(--clay-deep);text-transform:uppercase;white-space:nowrap}

nav{display:flex;gap:20px;font-size:14.5px;align-items:center}
nav a{text-decoration:none;color:var(--bark);opacity:.82;white-space:nowrap;border-bottom:2px solid transparent}
nav a:hover{opacity:1;color:var(--clay-deep)}
nav a:focus-visible{outline:2px solid var(--clay-deep);outline-offset:3px}

/* Current page. The body's data-page decides, so the header markup stays the
   same bytes on all four pages. Home has no marked link by design — the brand
   is the way home, and marking it would make the mark look pressable. */
[data-page="order"] nav .nav-order,
[data-page="track"] nav .nav-track,
[data-page="careers"] nav .nav-careers{opacity:1;color:var(--clay-deep);font-weight:700;border-bottom-color:var(--clay)}
[data-page="privacy"] .fbar .nav-privacy{color:#fff;font-weight:700}

/* Hidden until site.js adds .js to <html>: without the script it would be a
   button that does nothing, which is worse than a plain header. */
.menu-toggle{
  display:none;margin-left:6px;padding:0;border:0;border-radius:9px;min-height:0;
  /* 44 x 44, the size of a thumb (3 Oct 2026): it measured 40 x 20 before —
     line-height 0 left only the bars' own height to press. */
  width:44px;height:44px;align-items:center;justify-content:center;
  background:none;color:var(--bark);cursor:pointer;line-height:0;
}
.menu-toggle:hover{color:var(--clay-deep);background:var(--sand)}
.menu-toggle .bars{position:relative;display:block;width:22px;height:2px}
.menu-toggle .bars,
.menu-toggle .bars::before,
.menu-toggle .bars::after{background:currentColor;border-radius:2px;transition:transform .18s,background .18s}
.menu-toggle .bars::before,
.menu-toggle .bars::after{content:"";position:absolute;left:0;width:22px;height:2px}
.menu-toggle .bars::before{top:-7px}
.menu-toggle .bars::after{top:7px}
.menu-toggle[aria-expanded="true"] .bars{background:transparent}
.menu-toggle[aria-expanded="true"] .bars::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars::after{transform:translateY(-7px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){
  .menu-toggle .bars,.menu-toggle .bars::before,.menu-toggle .bars::after{transition:none}
}

/* Only ever shown in the mobile panel, where the bar's CTA has been dropped
   for space. Descendant selector, because .btn below sets display and would
   otherwise win on source order and show the CTA twice. */
nav .nav-cta{display:none}

/* 980, not the old 860: the nav carries six links now (Home and Send a parcel
   joined it so that /order and /track have somewhere to go BACK to, which was
   the whole complaint). Measured at 980: brand 200 + six links 300 + gaps 120
   + CTA 135 + gutters 40 = 795, with 185px spare. */
@media(max-width:980px){
  .js .menu-toggle{display:flex}
  /* The folded panel is a .js thing (8 Oct 2026). It used to fold for everyone,
     so with JavaScript off a phone had no hamburger AND no links: the header
     was a logo and nothing else — /privacy, which Google Play reads, among
     them. Without the script the links now sit under the bar, wrapped. */
  .js nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;align-items:stretch;background:var(--cream);
    border-bottom:1px solid var(--sand);padding:4px 24px 18px;
    box-shadow:0 10px 24px rgba(36,26,19,.07);
  }
  .js nav.open{display:flex}
  .js nav a{padding:15px 2px;border-bottom:1px solid var(--sand);font-size:16px;opacity:1}
  .js nav a:last-child{border-bottom:0}
  html:not(.js) .bar{flex-wrap:wrap;height:auto;min-height:72px;row-gap:4px;padding-top:10px;padding-bottom:10px}
  html:not(.js) nav{flex-wrap:wrap;gap:4px 16px;width:100%;font-size:15px}
  html:not(.js) nav a{padding:6px 0}
  html:not(.js) nav .nav-cta{margin-top:0}
}
/* 327px of usable bar at phone width, and the brand plus the CTA already want
   328 of it. Below 560 the CTA moves into the panel so the hamburger has
   somewhere to sit. 🚨 The thumb bar on the home page is gated on this SAME
   560 — the two must move together, or the header button and the thumb bar
   both show on one screen. */
@media(max-width:560px){
  .bar > .bar-cta{display:none}
  nav .nav-cta{display:block;margin-top:16px;text-align:center;border-bottom:0}
  .brand-name b{font-size:13px;letter-spacing:.1em}
}

/* ══════════════ buttons ══════════════
   The home page's pill, everywhere. /order and /track used to draw a square
   bark-coloured button; that difference was most of why they read as another
   product. */
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:14.5px;font-weight:600;letter-spacing:.03em;
  padding:12px 24px;min-height:48px;border:0;border-radius:999px;
  background:var(--clay-deep);color:#fff;text-decoration:none;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
/* 3 Oct 2026: the fill is --clay-deep, not --clay. White on --clay is 3.0:1,
   which fails for a 14.5px label (Lighthouse, /track's "Track" button); white
   on --clay-deep is 5.9:1. Hover goes one step darker, to bark. */
button:hover,.btn:hover{background:var(--bark);color:#fff}
button[disabled],.btn[disabled]{opacity:.6;cursor:default}
button:focus-visible,.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--clay-deep);outline-offset:2px;
}
.btn.dark,button.dark{background:var(--bark)}
.btn.dark:hover,button.dark:hover{background:var(--ink)}
.btn.ghost{background:transparent;color:var(--bark);border:1px solid var(--line)}
.btn.ghost:hover{background:#fff;color:var(--clay-deep)}
.btn.outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn.outline:hover{background:rgba(255,255,255,.12);color:#fff}
/* The small outline chip /order and /track use for secondary actions. Lower
   specificity than .btn.ghost on purpose, so `class="btn ghost"` stays big. */
.ghost{
  background:transparent;color:var(--bark);border:1px solid var(--sand);
  font-weight:500;padding:8px 14px;min-height:40px;font-size:14px;
}
.ghost:hover{background:#fff;color:var(--clay-deep)}

/* ══════════════ sections, cards, lists ══════════════ */
section{padding:72px 0}
section.block{padding:0;margin-top:38px}
.grid{display:grid;gap:22px;margin-top:40px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g3,.g4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--sand);border-radius:12px;padding:24px}
.card h3{margin-bottom:10px}
.card p{margin:0;color:var(--body);font-size:15px}
.card .ico{
  width:42px;height:42px;border-radius:9px;background:var(--sand);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--clay-deep);
}
.card .ico svg{width:22px;height:22px}

ul.ticks{list-style:none;padding:0;margin:26px 0 0}
ul.ticks li{padding:11px 0 11px 30px;position:relative;border-bottom:1px solid var(--sand);color:var(--body)}
ul.ticks li::before{content:"";position:absolute;left:2px;top:19px;width:13px;height:7px;border-left:2px solid var(--clay);border-bottom:2px solid var(--clay);transform:rotate(-45deg)}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.state{display:inline-block;border-radius:999px;padding:4px 12px;font-size:13.5px;font-weight:600;background:var(--sand);color:var(--bark)}
.state.moving{background:#e8f0e6;color:#2f5d33}
.state.done{background:#e6eef6;color:#26506f}
.state.off{background:#f6e7e4;color:var(--bad)}

/* A label/value row. One definition for the home page's contact card, /order's
   order view and /track's consignment card, which had three. */
.row{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--sand);font-size:15px}
.row:last-child{border-bottom:0}
.row b{flex:0 0 118px;color:var(--clay-deep);font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;padding-top:3px}
/* The VALUE side must be allowed to shrink and to break. A flex item defaults
   to min-width:auto, and "eudaimonialogistics.company" offers no break
   opportunity — that is what gave the whole page a horizontal scrollbar at
   320px on 21 Aug 2026. Keep this AND the stack below. */
.row > :not(b){min-width:0;overflow-wrap:anywhere}
@media(max-width:560px){
  .row{flex-direction:column;gap:3px}
  .row b{flex:none;padding-top:0}
}

/* ══════════════ dark band ══════════════ */
.band{background:var(--bark);color:#fff}
.band .lead{color:rgba(255,255,255,.78)}
.band .eyebrow{color:var(--clay)}
.band a{color:#fff}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:34px}}
.panel{background:var(--sand);border-radius:14px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--clay-deep);text-align:center;padding:28px;font-size:14px}

.contact{background:#fff;border:1px solid var(--sand);border-radius:14px;padding:32px}
@media(max-width:560px){.contact{padding:22px}}

/* ══════════════ forms ══════════════ */
input[type=text],input[type=tel],input[type=email],input[type=search],input[type=url],input[type=number],textarea,select{
  font:inherit;padding:11px 12px;border:1px solid var(--sand);border-radius:9px;
  background:var(--white);color:var(--ink);width:100%;
}
input:focus,textarea:focus{border-color:var(--clay)}
label{min-width:0}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-size:14px;padding:0;margin-bottom:6px}

/* ══════════════ a page's own closing note ══════════════
   /order, /track and /privacy each end with a paragraph or two of their own
   ("Not what you expected? Ring the office…"). That is page content; it sits
   here, above the shared footer, instead of pretending to be one. */
.page-note{margin:38px 0 8px;font-size:14px;color:var(--quiet)}
.page-note a{color:var(--clay-deep);display:inline-block;padding:9px 0}
.page-note p{margin:0 0 4px}

/* ══════════════ the group hero's compact strip ══════════════
   4 Oct 2026, owner: "Connect my hero section on all webpages." The home page
   carries the group hero as its carousel; /track and /privacy carry the same
   list, from group-hero.json, as this row of cards above the footer. No motion,
   so nothing to pause. Not on /order: that is the checkout. */
.gh-strip{margin:40px 0 8px;padding-top:24px;border-top:1px solid var(--line)}
.gh-strip-h{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin:0 0 14px;font-weight:600}
.gh-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.gh-card{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:14px}
.gh-icon{flex:none;width:56px;height:56px;border-radius:12px;object-fit:cover}
.gh-body{min-width:0}
.gh-title{margin:0 0 4px;font-weight:700;color:var(--ink);line-height:1.3}
.gh-stage{display:inline-block;margin-left:4px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--clay-deep);background:var(--sand);border-radius:999px;padding:2px 8px;vertical-align:1px}
.gh-note{margin:0 0 6px;font-size:14px;color:var(--body);line-height:1.5}
.gh-cta{display:inline-block;padding:9px 0;font-size:14px;font-weight:600;color:var(--clay-deep)}
.gh-cta:focus-visible{outline:2px solid var(--clay-deep);outline-offset:2px;border-radius:4px}

/* ══════════════ footer ══════════════ */
.site-footer{
  background:var(--bark);color:rgba(255,255,255,.62);font-size:14px;
  padding:40px 0 calc(40px + env(safe-area-inset-bottom,0px));margin-top:56px;
}
main + .site-footer{margin-top:0}
.fbar{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.fbar .brand{margin-right:0}
.fbar .brand-name b{color:#fff}
.fbar .brand-name span{color:var(--clay)}
.site-footer a{color:rgba(255,255,255,.82);display:inline-block;padding:10px 0}
.site-footer a:hover{color:#fff}
/* ⚠️ display AND padding. The rule above turns every <a> in the footer into an
   inline-block for its tap target, and the brand is an <a> — without this it
   loses its flex and the mark stacks on top of the name. */
.fbar .brand{display:flex;padding:0}
.fbar .tagline{font-style:italic;color:var(--clay)}
.fbar{gap:4px 20px}
/* No margin-left:auto pushing the facts right: with nine items the row wraps,
   and the push then leaves a hole in the middle of the first line. */
@media(max-width:560px){.fbar{gap:2px 18px}}

/* ══════════════ the apps hero — moved, 3 Oct 2026 ══════════════
   The apps section became the home page's one hero, copied from BamBite's
   (owner: "like in bambite"). Its rules are in index.html's own <style> block
   under "THE HERO", because only the home page has it. The .apps-hero,
   .appgrid and .appcard rules that lived here are gone with the markup they
   styled; sw.js's CACHE was bumped in the same commit so an installed copy
   drops them too. */

/* ══════════════ cookie choice (consent.js, 1 Oct 2026) ══════════════
   "Cookie settings" sits in the shared footer. It is a <button> (it opens
   something, it goes nowhere), dressed as the footer's links; the global
   button rule above would otherwise make it a clay pill. Served `hidden`:
   consent.js shows it only when there is a choice to make. */
.site-footer .cookie-settings{
  background:none;border:0;border-radius:0;min-height:0;padding:10px 0;
  font:inherit;font-size:inherit;font-weight:400;letter-spacing:0;
  color:rgba(255,255,255,.82);cursor:pointer;text-decoration:none;
}
.site-footer .cookie-settings:hover{background:none;color:#fff;text-decoration:underline}
.site-footer .cookie-settings[hidden]{display:none}

/* The banner. Not a modal: the page stays usable behind it, and nothing is
   loaded until a button is pressed. Accept and Reject are the SAME .btn —
   refusing must look exactly as easy as accepting. */
.consent{
  position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:2147483000;
  max-width:440px;background:var(--white);color:var(--body);
  border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;
  box-shadow:0 10px 30px rgba(36,26,19,.18);font-size:14.5px;line-height:1.55;
}
.consent h2{font-size:17px;color:var(--ink);margin:0 0 6px;line-height:1.3}
.consent p{margin:0 0 14px}
.consent p a{color:var(--clay-deep)}
.consent-actions{display:flex;gap:10px;flex-wrap:wrap}
.consent-actions .btn{flex:1 1 140px;flex-direction:column;gap:0;padding:10px 18px;line-height:1.25}
.consent-actions .btn span{font-size:.82em;font-weight:400;letter-spacing:0}
@media(max-width:560px){
  /* Above the support widget's round button (bottom right, ~64px), which
     otherwise sits on top of Reject and makes it the harder button to press. */
  .consent{left:12px;right:12px;max-width:none;bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}