/* Weddings That Don't Suck - shared hub styles

   Redesigned August 26, 2026. The old look was cream paper, Fraunces headings and a gold
   accent. Chuck recognised that exact combination in unrelated projects, so the whole thing
   moved to a blue palette with a grotesque display face. No copy changed, only the look.

   Two typefaces only, and that is still a hard rule. They are now:
     display  Bricolage Grotesque   headings, tile titles, big numbers
     body     Inter                 everything else, 16.5px / 1.55 / letter-spacing 0

   The token --serif is kept as an alias for --disp so the thirty odd page-level rules that
   still say var(--serif) keep working. New rules should say var(--disp). */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#101833; --soft:#5A6484; --line:#DDE3F3; --paper:#EFF2FA;
  --card:#ffffff; --accent:#3F5AE0; --accent-dark:#2A3FB5;
  --fill:#E6EBFD; --good:#0E8A5F; --good-bg:#DFF5EA; --bad:#C0392B;
  --disp:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:var(--disp);   /* deprecated alias, see note at the top of this file */
}
*{box-sizing:border-box}

/* The hidden attribute has to beat every display rule in this file and in the pages.
   It works by setting display:none in the browser's own stylesheet, which any author rule
   like display:flex silently overrides. That bit twice and both were live on the internet
   for the first hour of August 14, 2026: the save code fallback box on all eight pages
   carrying the button, and the checklist's add-a-row form. Both showed permanently.
   Keep this rule at the top and do not remove the !important. */
[hidden]{display:none !important;}

body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;line-height:1.55;letter-spacing:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}

/* The wash behind the top of the page. Fixed so it does not scroll away, and pointer-events
   off so it never eats a click. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 480px at 50% -8%, rgba(63,90,224,.13), transparent 70%);}

.wrap{position:relative;z-index:1;max-width:800px;margin:0 auto;padding:0 22px 90px;}
/* the dashboard runs wider than the tool pages because it is a grid of tiles, not a form */
.wrap.home{max-width:940px;}

/* top nav */
nav.hub{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 0 16px;margin-bottom:4px;}
nav.hub .brand{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.022em;
  line-height:1.15;text-decoration:none;color:var(--ink);}
nav.hub .brand span{display:block;font-family:var(--sans);font-weight:600;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:5px;}
nav.hub.home .brand{font-size:clamp(20px,5.4vw,26px);}
nav.hub.home .brand span{font-size:12px;margin-top:6px;}
nav.hub.solo{justify-content:center;text-align:center;position:relative}
nav.hub.solo a.back{position:absolute;right:0;top:50%;transform:translateY(-50%)}
@media (max-width:560px){
  nav.hub.solo{flex-direction:column;gap:10px}
  nav.hub.solo a.back{position:static;transform:none}
}
nav.hub a.back{font-size:14px;color:var(--accent);text-decoration:none;font-weight:600;}
nav.hub a.back:hover{text-decoration:underline;}

/* page head. Left aligned everywhere except inside the login gate, which stays centred. */
header.top{text-align:left;padding:30px 0 8px;}
.kicker{letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:var(--accent);font-weight:700;}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(32px,7.4vw,46px);
  margin:12px 0 14px;line-height:1.03;letter-spacing:-.035em;}
.wrap.home h1{font-size:clamp(34px,8.2vw,56px);}
.byline{color:var(--soft);font-size:17px;line-height:1.55;margin:0;}

h2{font-family:var(--sans);font-size:13.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent-dark);margin:48px 0 4px;}
/* the second half of a dashboard section head, e.g. "The Boring Stuff · Everything Else" */
h2 b{color:var(--soft);font-weight:500;}

.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px;
  margin:14px 0;box-shadow:0 1px 2px rgba(16,24,51,.05);}

button.btn{border:1px solid var(--accent);background:var(--accent);color:#fff;
  font-weight:600;font-size:13.5px;padding:10px 18px;border-radius:99px;cursor:pointer;font-family:inherit;}
button.btn:hover{filter:brightness(1.1);}
button.btn.ghost{background:transparent;color:var(--accent);}
button.btn.done{border-color:var(--good);background:var(--good);color:#fff;}

input,textarea{padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:14px;
  font-family:inherit;background:var(--card);color:var(--ink);}
input:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(63,90,224,.14);}

/* login gate */
.gate{max-width:430px;margin:7vh auto 0;text-align:center;}
.gate header.top{text-align:center;padding:0 0 8px;}
.gate h1{font-size:clamp(28px,7vw,34px);margin:0 0 8px;}
.gate .byline{font-size:15.5px;}
.gate .card{padding:24px 22px;margin-top:20px;text-align:left;}
.gate input{width:100%;font-size:16px;text-align:center;margin:14px 0 6px;background:var(--paper);}

/* Show-the-password eye, added August 14, 2026. People paste this out of an email.
   The button only flips the input type. Nothing is stored and nothing is sent. */
.gate .pwrow{position:relative;margin:14px 0 6px;}
.gate .pwrow input{margin:0;padding-right:42px;}
/* width:auto matters. The gate sets `button{width:100%}` for the big Open my dashboard
   button, and without this the eye stretches the full width of the field and its icon
   ends up sitting on the left. */
.gate .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:auto;border:0;background:none;padding:7px;cursor:pointer;line-height:0;
  color:var(--soft);border-radius:8px;}
.gate .eye:hover{color:var(--accent);}
.gate .eye:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.gate .eye svg{width:20px;height:20px;display:block;}
.gate .err{color:var(--bad);font-size:14px;min-height:20px;margin:4px 0 10px;}
.gate button{width:100%;font-size:15px;padding:12px;}
.gate .help{font-size:13px;color:var(--soft);margin-top:16px;}

/* dashboard tiles */
.zonenote{color:var(--soft);font-size:15px;line-height:1.5;margin:8px 0 16px;}
.tiles{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px;}

/* The quiet zone: the planning suite sits below the entertainment tiles and stays secondary.
   That hierarchy is a hard rule.

   Revised August 26, 2026. It used to be a duller card in the fill tone. Chuck asked for it
   to be the same white card as the rest, so the hierarchy is now carried by three other
   things: it sits below the entertainment tiles, its heading is 19px against their 23px,
   and the zone note above it says out loud that it is not the fun part. It also runs full
   width, because it is the only tile in its row and a half tile next to empty space reads
   as a gap. Do not give it a second column. */
.tiles.quiet{grid-template-columns:1fr;}
.tiles.quiet a.tile h3{font-size:19px;}

a.tile{position:relative;display:block;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:20px 20px 22px;text-decoration:none;color:var(--ink);
  box-shadow:0 1px 2px rgba(16,24,51,.05);
  transition:transform .18s ease, border-color .18s, box-shadow .18s;}
a.tile:hover{transform:translateY(-3px);border-color:var(--accent);
  box-shadow:0 12px 28px rgba(16,24,51,.10);}
a.tile::after{content:"\2192";position:absolute;right:20px;top:20px;color:var(--soft);
  font-size:18px;line-height:1;transition:transform .18s, color .18s;}
a.tile:hover::after{transform:translateX(4px);color:var(--accent);}
.tile h3{margin:0 0 7px;padding-right:34px;font-family:var(--disp);font-weight:700;
  font-size:23px;line-height:1.15;letter-spacing:-.02em;}
.tile p{margin:0;color:var(--soft);font-size:14.5px;line-height:1.5;}
.tile .tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;border-radius:99px;padding:4px 11px;margin-bottom:12px;}
.tile .tag.live{background:var(--fill);color:var(--accent-dark);}
.tile .tag.soon{background:#E8EAF0;color:var(--soft);}
.tile.soon{opacity:.6;cursor:default;pointer-events:none;}
.tile .prog{display:block;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--good);}
/* a tile that has been started reads In progress, so it gets the green pill to match */
.tile .tag.on{background:var(--good-bg);color:var(--good);}

/* progress bar */
.pbar{background:var(--fill);border-radius:20px;height:10px;overflow:hidden;margin:8px 0 4px;}
.pbar>div{background:var(--accent);height:100%;width:0%;transition:width .3s;}
.pmeta{font-size:13px;color:var(--soft);}

/* save code: hub.js fills any element carrying data-savecode. The box only shows when the
   clipboard is unavailable, and it sets in the body face because two fonts only is a hard rule. */
.savecode{margin:12px 0 0;}
.savecode .sc-line{font-size:14px;color:var(--soft);}
.savecode .sc-btn{margin-left:6px;vertical-align:baseline;}
.savecode .sc-msg{font-size:13px;color:var(--soft);margin-left:8px;}
.savecode .sc-box{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 0;}
.savecode .sc-box input{flex:1 1 260px;min-width:0;font-size:12.5px;}

/* art slots: stick-figure accents. If the image is missing the slot hides itself. */
/* ---------------------------------------------------------------------------
   THE ART SLOTS ARE GONE ON PURPOSE. September 1, 2026. Chuck's call.

   Eight pages used to carry <div class="art"><img src="assets/art/*-hero.png">.
   Those eight image files were never made. They have never existed in this
   project or on the live server, and assets/art/ has never been a real folder.
   Nothing ever looked broken, because the guard in hub.js hid every slot whose
   image failed to load, which is exactly why this kept getting re-discovered
   and re-asked about. It has now been settled: the eight dead lines were
   deleted from the HTML.

   The rules below are kept, dormant, so art is a one-line paste when the
   branding pass happens. To put a slot back: make the image, drop it in
   assets/art/, and add the div back to that page. Do not add the div first.

   The guard in hub.js stays too. It costs nothing and it is the safety net.
   --------------------------------------------------------------------------- */
.art{text-align:center;margin:18px 0;}
.art img{max-width:340px;width:70%;border-radius:14px;}

footer{text-align:center;color:var(--soft);font-size:13px;margin-top:54px;line-height:1.7;}

@media (min-width:720px){
  .tiles{grid-template-columns:1fr 1fr;gap:14px;}
  .tiles a.tile.wide{grid-column:1 / -1;}
  .tiles.quiet{grid-template-columns:1fr;}
  header.top{padding:46px 0 8px;}
  .byline{font-size:18px;}
}

/* the money question in Dance Floor Insurance, deliberately louder than body copy */
.sec p.bigq{font-size:21px;line-height:1.3;font-weight:700;color:var(--ink);margin:24px 0 8px}

/* Print. Seven pages here are meant to come out on paper and get handed to somebody.
   The wash behind the top of the page is position:fixed, and a fixed element can repeat on
   every printed sheet, so it gets switched off here. Added with the August 26 redesign. */
@media print{
  body::before{display:none !important;}
  body{background:#fff;}
  .card,a.tile{box-shadow:none !important;}
}