/* =====================================================================
   Peter & Blaire — shared design tokens.
   Linked by BOTH index.html and budget.html. Change colours HERE and
   nowhere else; this file exists so the two pages can never drift.
   ===================================================================== */
:root{
  --wash:#F3F1F2;        /* page + room background (neutral) */
  --panel:#ffffff; --ink:#382E2B; --muted:#A2989A;
  --line:#E7E2E3; --line2:#F1EDEE;      /* neutral to suit the grey wash */
  --divider:#C9C3C4;     /* the line down the middle of the room */

  --soft:#EFD8D4;        /* Powder Pink — soft fills, balance bar */
  --soft-b:#E19C9F;      /* its border = accent */

  --accent:#E19C9F;      /* main accent */
  --accent-d:#9C5A5E;    /* deepened, legible as text on white */
  --accent-on:#FFFFFF;   /* text on the accent */

  /* confirmed pill — solid accent, white text */
  --conf:#E19C9F; --conf-b:#E19C9F; --conf-on:#FFFFFF;

  --tint:#FCEFF0; --tint-b:#F2DCDD;     /* follows the accent hue */
  --grey:#948E90; --grey-l:#F6F4F5; --grey-b:#E5E0E1;

  --gap:12px;          /* the single vertical rhythm between sections */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --script:"Segoe Script","Snell Roundhand","Brush Script MT",cursive;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* status colours are shared across the seating planner and the budget:
   solid accent = settled, tint = expected, grey = maybe */
.st-paid{background:var(--conf);border-color:var(--conf-b);color:var(--conf-on)}
.st-est{background:var(--tint);border-color:var(--tint-b);color:var(--accent-d)}
.st-opt{background:var(--grey-l);border-color:var(--grey-b);color:var(--grey)}

/* =====================================================================
   SHARED SHELL — the header and nav are identical on every page, so they
   live here rather than being copy-pasted into each one. The mobile nav
   used to hide every link except the active page, which left no way to
   get from Seating to Budget on a phone. Only the "coming soon"
   placeholders are ever hidden.
   ===================================================================== */
.site-head{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-head-in{max-width:1680px;margin:0 auto;padding:13px 22px;display:flex;align-items:center;gap:24px}
.brand{font-family:var(--serif);font-size:20px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.brand i{font-family:var(--script);text-transform:none;letter-spacing:0;color:var(--accent-d);font-style:normal;font-size:22px;padding:0 3px}
.brand small{display:block;font-size:9.5px;letter-spacing:.24em;color:var(--muted);margin-top:3px;font-family:var(--sans)}
.site-nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.site-nav a{padding:7px 12px;border-radius:999px;text-decoration:none;color:var(--muted);font-size:11px;
            letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;border:1px solid transparent}
.site-nav a.soon{opacity:.5;cursor:not-allowed}
.site-nav a.soon:hover::after{content:"coming soon";position:absolute;left:50%;transform:translateX(-50%);top:100%;
  background:var(--ink);color:#fff;font-size:10px;letter-spacing:.04em;text-transform:none;padding:3px 7px;
  border-radius:5px;white-space:nowrap;margin-top:4px}
.site-nav a.on{background:var(--tint);color:var(--accent-d)}
.site-nav a:not(.soon):not(.on):hover{color:var(--accent-d);border-color:var(--line)}

@media(max-width:820px){
  .site-head-in{padding:9px 12px;gap:10px}
  .brand{font-size:13px;letter-spacing:.09em}
  .brand i{font-size:15px}
  .brand small{font-size:7.5px;letter-spacing:.14em}
  .site-nav{gap:5px}
  .site-nav a.soon{display:none}          /* placeholders only - real pages always stay reachable */
  .site-nav a{padding:7px 11px;font-size:10px;letter-spacing:.1em;border-color:var(--line)}
  .site-nav a.on{border-color:var(--accent);background:var(--tint);color:var(--accent-d);font-weight:600}
}
@media(max-width:380px){
  .brand{font-size:11.5px}
  .brand small{display:none}
  .site-nav a{padding:6px 9px;letter-spacing:.06em}
}