/* Weddings That Don't Suck - shared hub styles */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Figtree:wght@400;500;600;700&display=swap');
:root{
  --ink:#2b2b33; --soft:#6b6b78; --line:#e7e3dd; --paper:#fbf9f6;
  --card:#ffffff; --accent:#b08d57; --accent-dark:#8a6d3f;
  --fill:#f3ede2; --good:#2e7d52; --bad:#b9543f;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Figtree',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{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;}
.wrap{max-width:800px;margin:0 auto;padding:24px 22px 90px;}

/* top nav */
nav.hub{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:8px;}
nav.hub .brand{font-weight:700;font-size:15px;letter-spacing:.02em;text-decoration:none;color:var(--ink);}
nav.hub .brand span{color:var(--accent-dark);}
nav.hub a.back{font-size:14px;color:var(--accent-dark);text-decoration:none;font-weight:600;}
nav.hub a.back:hover{text-decoration:underline;}

header.top{text-align:center;padding:26px 0 8px;}
.kicker{letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--accent-dark);font-weight:700;}
h1{font-family:var(--serif);font-weight:600;font-size:37px;margin:14px 0 10px;line-height:1.1;letter-spacing:-0.015em;}
.byline{color:var(--soft);font-size:17px;line-height:1.55;max-width:640px;margin:0 auto;}
h2{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dark);
  margin:46px 0 16px;border-bottom:1px solid var(--line);padding-bottom:9px;}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:14px 0;}
button.btn{border:1px solid var(--accent);background:#fff;color:var(--accent-dark);
  font-weight:600;font-size:13px;padding:8px 16px;border-radius:8px;cursor:pointer;font-family:inherit;}
button.btn:hover{background:var(--accent);color:#fff;}
button.btn.done{border-color:var(--good);color:var(--good);}
input,textarea{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:14px;
  font-family:inherit;background:var(--paper);color:var(--ink);}
input:focus,textarea:focus{outline:none;border-color:var(--accent);background:#fff;}

/* login gate */
.gate{max-width:420px;margin:8vh auto 0;text-align:center;}
.gate .card{padding:28px 26px;}
.gate input{width:100%;font-size:16px;text-align:center;margin:14px 0 6px;}

/* 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:5px;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-dark);}
.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:11px;}
.gate .help{font-size:13px;color:var(--soft);margin-top:16px;}

/* dashboard tiles */
.zonenote{color:var(--soft);font-size:15px;line-height:1.5;max-width:640px;margin:-6px 0 16px;}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
/* The quiet zone: the planning suite sits below the entertainment tiles and stays visually
   secondary. That hierarchy is a hard rule and giving the two zones equal billing is the
   documented failure mode, so this block is deliberate. Do not delete it.

   Revised August 14, 2026. It used to be a transparent tile with a DASHED border, which
   Chuck read as unfinished rather than secondary, and he was right: dashed says "not built
   yet", which is a different message from "this matters less". It now sits in the fill tone
   with a solid border and a smaller heading, so it is still obviously the quieter zone
   without looking broken. It also runs full width, because it is the only tile in its row
   and a half-width tile next to empty space reads as a gap. */
.tiles.quiet{grid-template-columns:1fr;}
.tiles.quiet a.tile{background:var(--fill);border-color:var(--line);}
.tiles.quiet a.tile h3{font-size:17px;}
.tiles.quiet a.tile:hover{border-color:var(--accent);box-shadow:none;}
a.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;text-decoration:none;color:var(--ink);transition:border-color .15s, box-shadow .15s;}
a.tile:hover{border-color:var(--accent);box-shadow:0 6px 20px rgba(0,0,0,.05);}
.tile h3{margin:0 0 5px;font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:-0.01em;}
.tile p{margin:0;color:var(--soft);font-size:14.5px;line-height:1.5;}
.tile .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:20px;padding:2px 10px;margin-bottom:8px;}
.tile .tag.live{background:var(--fill);color:var(--accent-dark);}
.tile .tag.soon{background:#eee;color:var(--soft);}
.tile.soon{opacity:.65;cursor:default;pointer-events:none;}
.tile .prog{font-size:12px;color:var(--good);font-weight:600;margin-top:8px;}

/* 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 Figtree 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. */
.art{text-align:center;margin:18px 0;}
.art img{max-width:340px;width:70%;border-radius:10px;}

footer{text-align:center;color:var(--soft);font-size:13px;margin-top:50px;}
@media (max-width:640px){.tiles{grid-template-columns:1fr}h1{font-size:25px}}