/* Component layer. Utilities do layout; these carry identity.

   Every colour, face, radius and shadow below comes from a custom property that
   tailwind.config.js emits into the generated stylesheet. Nothing here restates a
   token value, so the utilities and the components cannot drift — which they did,
   the last time the palette was written down in both places.
   engine/styles.test.mjs fails on a raw hex or a literal font stack in this file. */
html{ -webkit-text-size-adjust:100%; }
/* Paper. The ruling was loud enough to read as a grid over the text; it should
   read as the stock the sheet is printed on. So: the rules drop to a whisper,
   and the surface gets a little tooth. The grain is one inline SVG turbulence
   tile — no image file, no third-party request, and it stitches so the repeat
   has no seam. */
:root{
  --overlay:var(--readout);
  --grain-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.14'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.32'/%3E%3C/svg%3E");
}
body{
  background-color:var(--paper); color:var(--ink);
  font-family:var(--font-sans);
  background-image:var(--grain), linear-gradient(var(--rule-faint) 1px,transparent 1px);
  background-size:180px 180px, 100% 34px;
  background-position:0 0, 0 -1px;
}

@media (prefers-reduced-motion:no-preference){
  .rise{ animation:rise .32s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes rise{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
}

/* --- chit: the core surface. A ticket, not a rounded card. --- */
.chit{
  /* the same stock as the sheet, one shade brighter and a lighter tooth — set as
     longhand because the `background:` shorthand would wipe the image out */
  background-color:var(--paper-card); background-image:var(--grain-soft);
  border:1px solid var(--rule); border-radius:var(--radius-chit);
  box-shadow:var(--shadow-chit);
}
.chit-head{
  display:flex; align-items:baseline; gap:.6rem;
  padding:.65rem .9rem; border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg,var(--paper-card),var(--paper-head));
}
.chit-title{
  font-family:var(--font-sans); font-weight:600;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}
.chit-note{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-mute); margin-left:auto; }
.chit-body{ padding:.9rem; }

/* --- perforated edge: used once, on the plan ticket --- */
.perf{ position:relative; }
.perf::after{
  content:""; position:absolute; left:0; right:0; bottom:-9px; height:9px;
  background:radial-gradient(circle at 6px 0, transparent 5px, var(--paper-card) 5px) repeat-x;
  background-size:12px 9px;
  filter:drop-shadow(0 1px 0 var(--rule));
}

/* --- rows --- */
.row{ display:flex; gap:.75rem; align-items:baseline; padding:.5rem 0; border-bottom:1px dotted var(--rule); }
.row:last-child{ border-bottom:0; }
.row-name{ flex:1; min-width:0; }
.row-num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* --- the signature: jobs that land on the host get tape --- */
.tape{
  background:var(--tape); box-shadow:-.35rem 0 0 var(--tape), .35rem 0 0 var(--tape);
  font-weight:600;
}

/* --- badges --- */
.badge{
  display:inline-flex; align-items:center; gap:.3rem;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.12rem .4rem; border-radius:var(--radius-chit); border:1px solid transparent; white-space:nowrap;
}
.badge-blocker{ background:var(--short-soft); color:var(--short); border-color:var(--short-line); }
.badge-risk{ background:var(--watch-soft); color:var(--watch); border-color:var(--watch-line); }
.badge-ok{ background:var(--covered-soft); color:var(--covered); border-color:var(--covered-line); }
.badge-tier{ background:var(--paper-sunk); color:var(--ink-mute); border-color:var(--rule); }
.badge-tier.T0{ background:var(--carbon-soft); color:var(--carbon); border-color:var(--carbon-line); }

/* --- controls --- */
/* Wrapped in :where() so these carry no specificity at all. The pages reach for
   utilities on their controls — w-24, w-auto, py-1, text-[13px] — and a plain
   .field selector ties with them, so it won on load order (ui.css is linked
   after the generated stylesheet) and silently discarded every one. The
   assumption inputs were rendering 240px wide at 16px instead of 96px at 13px,
   which is why they looked centred: a full-width box with the value at its left
   edge and the unit off to the right.

   Element-qualified rather than a bare :where(), which lands one step too low:
   tailwind's preflight resets padding on input/select/textarea at element
   specificity, so a zero-specificity rule loses its padding to the reset. This
   sits exactly between the two — above the reset, below any utility. */
input:where(.field), select:where(.field), textarea:where(.field){
  width:100%; background:var(--paper-card); border:1px solid var(--rule-strong); border-radius:var(--radius-chit);
  padding:.6rem .7rem; font:inherit; color:var(--ink);
}
.field:focus{ outline:2px solid var(--carbon); outline-offset:1px; border-color:var(--carbon); }
.btn{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  font-family:var(--font-sans); font-weight:600; letter-spacing:.01em;
  padding:.6rem 1rem; border-radius:var(--radius-chit); border:1px solid var(--ink);
  background:var(--ink); color:var(--paper-card);
}
.btn:hover{ background:var(--ink-press); }
.btn:focus-visible{ outline:2px solid var(--carbon); outline-offset:2px; }
.btn-quiet{ background:var(--paper-card); color:var(--ink); border-color:var(--rule-strong); font-weight:600; padding:.3rem .55rem; font-size:.8rem; }
.btn-quiet:hover{ background:var(--paper-sunk); }
/* A summary styled as a button. The default disclosure triangle is suppressed and
   replaced with the same ▸ the nav panel uses, so the control says which way it
   goes — the answer used to appear and stay, with no way back. */
summary.btn{ list-style:none; }
summary.btn::-webkit-details-marker{ display:none; }
summary.btn::after{ content:"\25B8"; margin-left:.1rem; color:var(--ink-mute); }
details[open] > summary.btn::after{ content:"\25BE"; }
summary.btn:focus-visible{ outline:2px solid var(--carbon); outline-offset:2px; }

/* --- tool harness rows ---
   One line per tool: the name, how many arguments it takes, and a button that fires
   it with what it already holds. The description and every input live behind the row.
   Rendering all of them at once made eleven tools read as a page of blank form, and
   the two boolean selects showed only "—", naming neither argument. */
.toolrow{ border:1px solid var(--rule); border-radius:var(--radius-chit); background:var(--paper-card); }
.toolsum{
  display:flex; align-items:center; gap:.6rem; cursor:pointer;
  padding:.5rem .6rem; list-style:none;
}
.toolsum::-webkit-details-marker{ display:none; }
/* A stroked chevron reads as disclosure at small sizes; the old solid triangle
   collapsed into a bullet beside dense tool names. */
.toolsum::before{
  width:.4rem; height:.4rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  color:var(--ink-mute); content:""; transform:rotate(-45deg); transition:transform 140ms ease-out;
}
details[open] > .toolsum::before{ transform:rotate(45deg); }
.toolsum:hover{ background:var(--paper-sunk); }
.toolsum:focus-visible{ outline:2px solid var(--carbon); outline-offset:-2px; }
.toolsum-note{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-mute); }
.toolbody{ padding:.1rem .6rem .7rem; border-top:1px solid var(--rule); }
/* the exception is worth marking; on a tool where every field is optional,
   saying so on each one is noise that reads as a demand */
.required{ color:var(--short); letter-spacing:0; }

/* --- data readout --- */
.readout{
  background:var(--readout); color:var(--readout-ink); border-radius:var(--radius-chit); padding:.75rem;
  font-family:var(--font-mono); font-size:.72rem; line-height:1.55;
  overflow:auto; max-height:22rem; white-space:pre-wrap; word-break:break-word; margin:0;
}
.rule-strike{ text-decoration:line-through; text-decoration-color:var(--short); text-decoration-thickness:2px; }
a{ color:var(--carbon); }

/* small screens: keep rows readable when badges wrap */
@media (max-width:480px){
  .row{ flex-wrap:wrap; }
  .row-num{ margin-left:auto; }
  .badge{ margin-left:0; margin-right:.35rem; }
  .chit-body{ padding:.75rem; }
}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* A run finishes in well under a frame. Flash the line that reports it, so a click
   is visibly acknowledged rather than appearing to do nothing. */
@keyframes runflash { from { background:var(--tape-soft); } to { background:transparent; } }
.flash{ animation:runflash 1.1s ease-out 1; border-radius:var(--radius-chit); }
@media (prefers-reduced-motion: reduce){ .flash{ animation:none; } }

/* The plan on screen no longer matches the text in the box. */
.chit.stale{ opacity:.55; }
.chit.stale .chit-note{ color:var(--short); }

/* --- sheet head: a page opens the way a chit does ------------------------------
   The big bold headline over a paragraph is the shape of every landing page ever
   built, so it says nothing about what this is. A page here opens like the head
   of a work order instead: the sheet name and its facts on one ruled line — the
   same grammar as .chit-head, at page scale — then a plain sentence saying what
   the page does. The rule is closed with the carbon tick that runs across the
   masthead, which is the only colour the head needs.

   The title is set at reading size on purpose. Nothing here is being sold; it is
   being labelled, and a label that shouts is harder to read, not easier. */
.sheethead{ margin-bottom:1.6rem; }
.sheethead-band{
  position:relative; display:flex; align-items:baseline; gap:1rem;
  padding-bottom:.45rem; margin-bottom:.85rem; border-bottom:1px solid var(--rule);
}
.sheethead-band::after{
  content:""; position:absolute; left:0; bottom:-1px; width:2.75rem; height:2px;
  background:var(--carbon);
}
.kicker{
  margin:0; font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
/* sheets come in a run and are numbered, the way a docket numbers its pages */
.kicker-no{ color:var(--carbon); margin-right:.6rem; }
/* the facts about this sheet, stamped where a chit stamps its count */
.sheethead-meta{
  margin-left:auto; text-align:right; font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.1em; color:var(--ink-mute);
}
.sheethead h1{
  margin:0;
  /* The serif appears exactly once on a page: here. It is the title face, not a
     second UI face — labels, buttons and the wordmark stay in the sans, or the
     page reads as two designs arguing. Nothing else may set this family, which
     is why there is no utility class for it. */
  font-family:var(--font-title);
  font-variation-settings:'opsz' 144,'wght' 500,'SOFT' 24,'WONK' 1;
  font-size:clamp(1.6rem,4.4vw,2.15rem); line-height:1.16; letter-spacing:-.005em;
  /* A measure, not a shrink-wrap: 40rem still sits inside the 48rem column, so a
     title only breaks when it genuinely runs out of room. `balance` was here and
     is the reason these wrapped early — it equalises line lengths, which means
     pulling every line short. On a phone that left the title using 77% of the
     width while the paragraph under it used 96%. `pretty` keeps the orphan
     avoidance and drops the shortening. */
  max-width:40rem; text-wrap:pretty;
}
/* the home page is the same head, one step up — not a different animal */
.sheethead-hero h1{ font-size:clamp(1.85rem,5.6vw,2.7rem); }
.lede{ margin:.7rem 0 0; max-width:34rem; font-size:1rem; line-height:1.6; color:var(--ink-soft); }
.lede-note{ margin:.6rem 0 0; max-width:34rem; font-size:.875rem; line-height:1.55; color:var(--ink-mute); }
@media (max-width:480px){
  .sheethead{ margin-bottom:1.25rem; }
  .lede-note{ font-size:.82rem; }
}

/* --- masthead: the top of the docket, not a website navbar --------------------
   The rest of the page is a worksheet: ruled paper, tickets, mono for anything
   measured. The header should read the same way — a carbon rule struck across
   the top of the sheet, the mark set as a filing code, and separation that only
   appears once there is something underneath it. */
/* The pages mount the header into a wrapper div. A sticky element is confined to
   its own containing block, so the wrapper would let the bar scroll away the moment
   its box left the viewport: take the wrapper out of the box tree so `sticky` is
   measured against the page. */
/* The masthead is injected by a module script, which is deferred — so the page is
   laid out once without it and again with it, and every page's content was sitting
   55px too high until the second layout. That is a jump on every load, and on a
   phone (where the script, the fonts and the vendor JSON all land later) it is a
   window in which the browser positions the viewport against a layout that is
   about to change.
   So the wrapper reserves the height before the header exists, and carries the
   sticky itself: no `display: contents` to be honoured, and the second layout is
   identical to the first. */
#siteHeader{
  position:sticky; top:0; z-index:20;
  /* border-box, so the rules have to be added back or the reserve is 3px short */
  min-height:calc(3.25rem + 3px);     /* .masthead-inner, plus the 2px and 1px rules */
  background:var(--paper-card);
  border-top:2px solid var(--carbon);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .18s ease;
}
@media (prefers-reduced-motion:reduce){ #siteHeader{ transition:none; } }
#siteHeader.lifted{ box-shadow:var(--shadow-lift); }
.masthead-inner{
  display:flex; align-items:center; gap:1rem;
  max-width:48rem; margin:0 auto; padding:0 1.25rem; height:3.25rem;
}

/* The mark pairs the display face with the mono one, the way the pages do:
   the name is set, the protocol is stamped. */
.mark{ display:inline-flex; align-items:baseline; gap:.12rem; text-decoration:none; white-space:nowrap; }
.mark-name{
  font-family:var(--font-sans); font-weight:600;
  font-size:.9rem; letter-spacing:.04em; color:var(--ink);
}
.mark-dot{ color:var(--carbon); font-weight:800; }
.mark-code{
  font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; color:var(--ink-soft); transform:translateY(-1px);
}
.mark:hover .mark-code{ color:var(--carbon); }

/* Where you are, stamped in mono. Fills the gap the nav leaves on a phone. */
.masthead-where{
  margin-left:auto; font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
  /* a long name wraps on a narrow phone; set it flush right and tight so the
     two lines read as one stamp rather than as a broken line */
  text-align:right; line-height:1.25;
}

.navlink{
  font-size:.82rem; color:var(--ink-mute); text-decoration:none;
  padding-bottom:.15rem; border-bottom:2px solid transparent;
}
.navlink:hover{ color:var(--ink); }
.navlink[aria-current="page"]{ color:var(--ink); font-weight:600; border-bottom-color:var(--carbon); }

/* A word, not a hamburger: the system speaks in labels everywhere else. */
.menu-btn{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--rule-strong); border-radius:var(--radius-chit);
  padding:.28rem .5rem; background:var(--paper-card); cursor:pointer;
}
.menu-btn:hover{ border-color:var(--carbon); color:var(--carbon); }
.menu-btn:focus-visible{ outline:2px solid var(--carbon); outline-offset:1px; }

.navpanel{ border-top:1px solid var(--rule); background:var(--paper-card); }
.navpanel a{
  display:block; padding:.6rem 1.25rem; text-decoration:none; color:var(--ink-soft);
  border-bottom:1px dotted var(--rule); font-size:.95rem;
}
.navpanel a:last-child{ border-bottom:0; }
.navpanel a[aria-current="page"]{ color:var(--ink); font-weight:600; }
.navpanel a[aria-current="page"]::before{ content:"▸ "; color:var(--carbon); }

/* EventReady workspace: one compact operations sheet from brief to handoff. */
.event-shell{ max-width:68rem; margin:0 auto; padding:2.25rem 1.25rem 4rem; }
.event-hero{ padding:1.5rem 0 2.5rem; border-bottom:1px solid var(--rule); margin-bottom:1.5rem; }
.event-hero h1{ max-width:48rem; margin:.65rem 0 0; font-family:var(--font-title); font-size:clamp(2.25rem,6vw,4.6rem); line-height:1; letter-spacing:-.03em; }
.hero-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:1.4rem; }
.hero-hint{ color:var(--ink-mute); font-family:var(--font-mono); font-size:.75rem; }
.event-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(18rem,.85fr); gap:1rem; align-items:start; }
.event-brief,.readiness-card{ min-width:0; }
.brief-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.brief-grid label,.control-label{ display:block; color:var(--ink-soft); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
.brief-grid .field{ margin-top:.3rem; font-family:var(--font-sans); font-size:.88rem; text-transform:none; letter-spacing:0; }
.brief-grid label:first-child,.brief-wide{ grid-column:span 2; }
.readiness-gauge{ display:flex; align-items:baseline; gap:.65rem; padding-bottom:.75rem; border-bottom:1px dotted var(--rule); }
.readiness-gauge strong{ font-family:var(--font-title); font-size:3rem; line-height:1; }
.readiness-gauge span{ color:var(--ink-mute); font-size:.8rem; }
.readiness-message{ color:var(--ink-soft); font-size:.88rem; line-height:1.45; }
.domain-list{ display:flex; flex-direction:column; gap:.35rem; }
.domain-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.8rem; padding:.3rem 0; border-bottom:1px dotted var(--rule); }
.workspace{ margin-top:3rem; scroll-margin-top:5rem; }
.section-heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.section-heading h2{ margin:.3rem 0 0; font-family:var(--font-title); font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.1; }
.finding-stack{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.finding{ display:grid; grid-template-columns:7rem 1fr; gap:.75rem; padding:.7rem .9rem; border:1px solid var(--rule); background:var(--paper-card); font-size:.85rem; }
.finding strong{ font-family:var(--font-mono); text-transform:uppercase; font-size:.7rem; letter-spacing:.1em; }
.finding-blocker strong{ color:var(--short); }.finding-owner strong{ color:var(--watch); }
.option-list,.responsibility-list{ display:flex; flex-direction:column; gap:.5rem; }
.option{ width:100%; text-align:left; padding:.7rem; border:1px solid var(--rule); background:var(--paper-card); color:var(--ink); cursor:pointer; border-radius:var(--radius-chit); }
.option:hover,.option-selected{ border-color:var(--carbon); background:var(--carbon-soft); }
.option span{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }.option em{ color:var(--carbon); font-family:var(--font-mono); font-size:.65rem; text-transform:uppercase; font-style:normal; }.option small{ display:block; color:var(--ink-mute); margin-top:.25rem; line-height:1.35; }
.control-note{ margin:.4rem 0 1rem; color:var(--ink-mute); font-size:.75rem; }
.responsibility{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.55rem 0; border-bottom:1px dotted var(--rule); }.responsibility small{ display:block; color:var(--ink-mute); font-family:var(--font-mono); font-size:.67rem; margin-top:.15rem; }.all-owned{ color:var(--covered); font-size:.85rem; }
.delta-note{ margin:1rem 0; padding:.65rem .8rem; border-left:3px solid var(--carbon); background:var(--carbon-soft); font-size:.8rem; }
.run-card{ margin-top:1rem; }.artifact-actions{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }.artifact-actions p{ color:var(--ink-soft); font-size:.85rem; }
.run-table{ margin-top:.5rem; border-top:1px solid var(--rule-strong); }.run-row{ display:grid; grid-template-columns:8rem 1.5fr 1fr .7fr; gap:.75rem; padding:.55rem 0; border-bottom:1px dotted var(--rule); font-size:.78rem; }.run-head{ font-family:var(--font-mono); color:var(--ink-mute); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; }
.proof-strip{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:2rem; padding-top:1rem; border-top:1px solid var(--rule); font-size:.8rem; color:var(--ink-soft); }.proof-strip p{ margin:0; max-width:45rem; }.proof-strip a{ white-space:nowrap; font-weight:600; }
@media(max-width:760px){.event-grid{grid-template-columns:1fr}.brief-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brief-grid label:first-child{grid-column:span 2}.run-row{grid-template-columns:5.5rem 1fr}.run-row span:nth-child(3),.run-row span:nth-child(4){font-size:.7rem;color:var(--ink-mute)}.run-head span:nth-child(3),.run-head span:nth-child(4){display:none}.proof-strip{align-items:flex-start;flex-direction:column}}
@media(max-width:460px){.brief-grid{grid-template-columns:1fr}.brief-grid label:first-child,.brief-wide{grid-column:span 1}.artifact-actions{align-items:flex-start;flex-direction:column}.run-row{grid-template-columns:1fr}.run-head{display:none}}
@media print{#siteHeader,.event-hero,.event-grid,.section-heading,.finding-stack,.delta-note,.proof-strip,.artifact-actions div{display:none!important}.event-shell{max-width:none;padding:0}.workspace,.run-card{display:block!important;margin:0;border:0;box-shadow:none}.run-row{break-inside:avoid}}

/* Consumer product shell --------------------------------------------------- */
.product-body{ background:var(--paper-sunk); background-image:none; }
.product-body #siteHeader{ background:var(--paper-card); border-top:0; min-height:4rem; }
.product-header{ height:4rem; max-width:86rem; margin:auto; padding:0 1.5rem; display:flex; align-items:center; justify-content:space-between; }
.product-brand{ color:var(--ink); font-size:1.1rem; font-weight:600; text-decoration:none; letter-spacing:-.02em; }.product-brand span{ color:var(--covered); font-size:.55rem; margin-left:.25rem; }
.product-header nav{ display:flex; align-items:center; gap:1.4rem; }.product-header nav a{ color:var(--ink-soft); font-size:.85rem; text-decoration:none; }.header-action{ border:0; background:var(--ink); color:var(--paper-card); border-radius:2rem; padding:.55rem .9rem; font-weight:600; cursor:pointer; }.avatar{ width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; background:var(--carbon-soft); color:var(--carbon); font-size:.7rem; font-weight:600; }
.product-shell{ max-width:86rem; margin:auto; padding:2rem 1.5rem 4rem; }.event-titlebar{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; }.back-link{ font-size:.75rem; color:var(--ink-mute); text-decoration:none; }.event-titleline{ display:flex; align-items:center; gap:.75rem; margin-top:.55rem; }.event-titleline h1{ font-family:var(--font-title); font-size:clamp(1.8rem,4vw,2.6rem); line-height:1; margin:0; }.event-state{ background:var(--watch-soft); color:var(--watch); border-radius:2rem; padding:.25rem .55rem; font-size:.68rem; font-weight:600; }.event-titlebar p{ color:var(--ink-mute); margin:.55rem 0 0; font-size:.88rem; }.countdown{ display:flex; align-items:baseline; gap:.5rem; text-align:right; }.countdown strong{ font-family:var(--font-title); font-size:2.8rem; line-height:1; }.countdown span{ color:var(--ink-mute); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.workspace-tabs{ display:flex; gap:1.5rem; margin-top:2rem; border-bottom:1px solid var(--rule); overflow:auto; }.workspace-tab{ padding:.8rem 0; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--ink-mute); cursor:pointer; white-space:nowrap; font-size:.84rem; }.workspace-tab span{ margin-left:.25rem; padding:.1rem .35rem; background:var(--paper-head); border-radius:1rem; font-size:.65rem; }.workspace-tab.active{ color:var(--ink); border-bottom-color:var(--covered); font-weight:600; }
.workspace-layout{ display:grid; grid-template-columns:minmax(0,1fr) 21rem; gap:1.25rem; margin-top:1.25rem; align-items:start; }.workspace-main{ min-width:0; }.workspace-view{ display:none; }.workspace-view.active{ display:block; }.status-hero{ min-height:14rem; padding:2rem; border-radius:1.25rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; overflow:hidden; position:relative; }.status-hero.needs-attention{ background:linear-gradient(135deg,var(--watch-soft),var(--paper-card)); border:1px solid var(--watch-line); }.status-hero.is-ready{ background:linear-gradient(135deg,var(--covered-soft),var(--paper-card)); border:1px solid var(--covered-line); }.status-copy{ position:relative; z-index:1; max-width:34rem; }.eyebrow{ display:block; font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-mute); }.status-copy h2,.view-heading h2,.section-title h2{ font-family:var(--font-title); font-size:clamp(1.45rem,3vw,2.15rem); line-height:1.08; margin:.4rem 0; }.status-copy p,.view-heading p{ color:var(--ink-soft); line-height:1.5; margin:.4rem 0 1rem; }.primary-action,.secondary-action{ border:0; border-radius:.65rem; padding:.65rem .95rem; font-weight:600; cursor:pointer; }.primary-action{ background:var(--ink); color:var(--paper-card); }.secondary-action{ background:var(--paper-card); color:var(--ink); border:1px solid var(--rule-strong); }.status-orbit{ flex:0 0 9rem; width:9rem; height:9rem; border-radius:50%; background:var(--paper-card); box-shadow:var(--shadow-lift); display:flex; align-items:center; justify-content:center; gap:.45rem; }.status-orbit strong{ font-family:var(--font-title); font-size:3.4rem; line-height:1; }.status-orbit span{ color:var(--ink-mute); font-size:.68rem; line-height:1.2; text-transform:uppercase; letter-spacing:.06em; }
.overview-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(16rem,.75fr); gap:1.25rem; margin-top:1.5rem; }.section-title,.view-heading{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:.85rem; }.section-title h2{ font-size:1.4rem; }.text-action{ border:0; background:transparent; color:var(--covered); cursor:pointer; font-size:.78rem; }.action-stack{ display:flex; flex-direction:column; gap:.65rem; }.next-action,.ready-card{ display:grid; grid-template-columns:2.5rem 1fr auto; align-items:center; gap:.8rem; padding:1rem; background:var(--paper-card); border:1px solid var(--rule); border-radius:.8rem; }.action-icon{ width:2.5rem; height:2.5rem; border-radius:.65rem; display:grid; place-items:center; background:var(--paper-head); }.next-action span{ color:var(--ink-mute); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; }.next-action h3,.ready-card h3{ margin:.12rem 0; font-size:.9rem; }.next-action p,.ready-card p{ margin:0; color:var(--ink-mute); font-size:.73rem; }.next-action button,.ready-card button{ border:1px solid var(--rule-strong); background:var(--paper-card); padding:.4rem .65rem; border-radius:.5rem; cursor:pointer; font-size:.72rem; }.ready-card>span{ width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:50%; background:var(--covered-soft); color:var(--covered); }
.snapshot-card{ display:grid; grid-template-columns:1fr 1fr; background:var(--paper-card); border:1px solid var(--rule); border-radius:.8rem; overflow:hidden; }.snapshot-card div{ padding:.8rem; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }.snapshot-card div:nth-child(even){ border-right:0; }.snapshot-card div:nth-last-child(-n+2){ border-bottom:0; }.snapshot-card span{ display:block; color:var(--ink-mute); font-size:.65rem; margin-bottom:.2rem; }.snapshot-card strong{ font-size:.9rem; }.mini-timeline{ margin-top:.75rem; padding:1rem; background:var(--paper-card); border:1px solid var(--rule); border-radius:.8rem; }.mini-timeline>div{ display:flex; gap:.7rem; min-height:3rem; position:relative; }.mini-timeline i{ width:.65rem; height:.65rem; margin-top:.2rem; border:2px solid var(--rule-strong); border-radius:50%; z-index:1; background:var(--paper-card); }.mini-timeline>div:not(:last-child)::after{ content:""; position:absolute; left:.28rem; top:.85rem; bottom:.1rem; border-left:1px solid var(--rule); }.mini-timeline .timeline-done i{ background:var(--covered); border-color:var(--covered); }.mini-timeline strong,.mini-timeline small{ display:block; font-size:.75rem; }.mini-timeline small{ color:var(--ink-mute); margin-top:.15rem; }
.view-heading{ padding:.5rem 0; }.view-heading h2{ margin:.3rem 0; }.view-heading p{ margin:0; font-size:.85rem; }.category-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }.category-card{ display:grid; grid-template-columns:2.6rem 1fr auto auto; gap:.75rem; align-items:center; background:var(--paper-card); border:1px solid var(--rule); border-radius:.8rem; padding:1rem; }.category-icon{ width:2.6rem; height:2.6rem; display:grid; place-items:center; border-radius:.65rem; background:var(--paper-head); }.category-card h3{ margin:0; font-size:.88rem; }.category-card p{ margin:.2rem 0 0; color:var(--ink-mute); font-size:.7rem; line-height:1.35; }.category-status{ font-size:.65rem; color:var(--watch); white-space:nowrap; }.category-status.complete{ color:var(--covered); }.category-card>button{ border:0; background:transparent; color:var(--ink-mute); cursor:pointer; }
.metric-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }.metric-row>div,.content-card,.budget-hero{ background:var(--paper-card); border:1px solid var(--rule); border-radius:.8rem; padding:1rem; }.metric-row span{ display:block; color:var(--ink-mute); font-size:.68rem; }.metric-row strong{ display:block; font-family:var(--font-title); font-size:1.8rem; margin-top:.25rem; }.content-card{ margin-top:.75rem; }.card-heading{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--rule); padding-bottom:.7rem; }.card-heading h3{ margin:0; }.card-heading span{ color:var(--ink-mute); font-size:.7rem; }.guest-needs{ display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; padding-top:.8rem; }.guest-needs div{ background:var(--paper-head); border-radius:.6rem; padding:.75rem; }.guest-needs span,.guest-needs strong{ display:block; }.guest-needs span{ color:var(--ink-mute); font-size:.68rem; }.guest-needs strong{ margin-top:.25rem; }
.vendor-list{ display:flex; flex-direction:column; gap:.65rem; }.vendor-list article{ display:grid; grid-template-columns:2.8rem 1fr auto 5rem; gap:.8rem; align-items:center; background:var(--paper-card); border:1px solid var(--rule); border-radius:.8rem; padding:1rem; }.vendor-mark{ width:2.8rem; height:2.8rem; border-radius:.7rem; display:grid; place-items:center; font-weight:600; font-size:.72rem; }.vendor-mark.green{ background:var(--covered-soft);color:var(--covered) }.vendor-mark.orange{background:var(--watch-soft);color:var(--watch)}.vendor-mark.purple{background:var(--carbon-soft);color:var(--carbon)}.vendor-mark.blue{background:var(--paper-head);color:var(--ink-soft)}.vendor-list h3{ margin:0; font-size:.9rem; }.vendor-list p{ margin:.2rem 0 0; color:var(--ink-mute); font-size:.72rem; }.vendor-list article>strong{ text-align:right; font-size:.82rem; }.vendor-status{ border-radius:2rem; padding:.25rem .5rem; font-size:.63rem; }.vendor-status.confirmed{ background:var(--covered-soft);color:var(--covered) }.vendor-status.action{background:var(--watch-soft);color:var(--watch)}
.budget-hero{ margin-bottom:.75rem; }.budget-hero>div:first-child{ display:flex; align-items:baseline; gap:.5rem; }.budget-hero span,.budget-hero small{ color:var(--ink-mute); font-size:.7rem; }.budget-hero strong{ font-family:var(--font-title); font-size:2rem; }.budget-bar{ height:.55rem; background:var(--paper-head); border-radius:1rem; overflow:hidden; margin-top:1rem; }.budget-bar i{ display:block; width:26%; height:100%; background:var(--covered); }.budget-hero p{ margin:.45rem 0 0; color:var(--ink-mute); font-size:.68rem; }.budget-line{ display:flex; justify-content:space-between; padding:.7rem 0; border-bottom:1px solid var(--rule); font-size:.8rem; }.budget-line:last-child{ border-bottom:0; }
.team-list{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }.team-card{ background:var(--paper-card); border:1px solid var(--rule); border-radius:.8rem; overflow:hidden; }.team-card header{ display:grid; grid-template-columns:2.4rem 1fr auto; align-items:center; gap:.7rem; padding:.8rem; background:var(--paper-head); }.team-avatar{ width:2.4rem;height:2.4rem;border-radius:50%;background:var(--carbon-soft);color:var(--carbon);display:grid;place-items:center;font-size:.65rem;font-weight:600}.team-card h3{ margin:0;font-size:.82rem}.team-card header p{margin:.1rem 0 0;color:var(--ink-mute);font-size:.65rem}.team-card header>span{font-size:.65rem;color:var(--ink-mute)}.team-card>div{padding:.4rem .8rem}.team-card>div p{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.5rem;margin:0;padding:.55rem 0;border-bottom:1px solid var(--rule);font-size:.74rem}.team-card>div p:last-child{border-bottom:0}.team-card small{color:var(--ink-mute)}.team-card button{border:0;background:transparent;color:var(--carbon);font-size:.65rem;cursor:pointer}.team-card i{color:var(--covered);font-style:normal}.empty-team{color:var(--ink-mute)}
.dayof-banner{ display:flex; align-items:center; gap:.8rem; padding:.8rem 1rem; border:1px solid var(--watch-line); background:var(--watch-soft); border-radius:.7rem; }.dayof-banner.ready{ border-color:var(--covered-line); background:var(--covered-soft); }.dayof-banner span{ font-weight:600; font-size:.72rem; text-transform:uppercase; }.dayof-banner p{ margin:0; color:var(--ink-soft); font-size:.75rem; }.dayof-timeline{ background:var(--paper-card); border:1px solid var(--rule); border-radius:.8rem; margin-top:.75rem; padding:1rem; }.dayof-timeline article{ display:grid; grid-template-columns:7rem 1rem 1fr; gap:.75rem; min-height:4rem; position:relative; }.dayof-timeline time{ color:var(--ink-mute); font-family:var(--font-mono); font-size:.68rem; text-align:right; padding-top:.15rem; }.dayof-timeline i{ width:.7rem;height:.7rem;border-radius:50%;background:var(--covered);margin-top:.1rem;z-index:1}.dayof-timeline article:not(:last-child)::after{content:"";position:absolute;left:7.58rem;top:.8rem;bottom:0;border-left:1px solid var(--rule)}.dayof-timeline h3{margin:0;font-size:.8rem}.dayof-timeline p{margin:.2rem 0 0;color:var(--ink-mute);font-size:.68rem}
.assistant-panel{ position:sticky; top:5.25rem; height:calc(100vh - 6.5rem); min-height:34rem; background:var(--paper-card); border:1px solid var(--rule); border-radius:1rem; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-chit); }.assistant-panel>header{ display:grid; grid-template-columns:2.4rem 1fr auto; align-items:center; gap:.65rem; padding:1rem; border-bottom:1px solid var(--rule); }.assistant-icon{ width:2.4rem;height:2.4rem;border-radius:.7rem;background:var(--ink);color:var(--paper-card);display:grid;place-items:center}.assistant-panel header strong,.assistant-panel header span{display:block}.assistant-panel header strong{font-size:.78rem}.assistant-panel header span{color:var(--ink-mute);font-size:.63rem;margin-top:.15rem}.assistant-panel header button,.modal-card header button{border:0;background:transparent;color:var(--ink-mute);font-size:1.2rem;cursor:pointer}.assistant-messages{ padding:1rem; flex:1; overflow:auto; }.assistant-message{ background:var(--paper-head); border-radius:.75rem .75rem .75rem .15rem; padding:.8rem; font-size:.77rem; line-height:1.5; }.assistant-message p{ margin:0 0 .6rem; }.assistant-message p:last-child{margin:0}.assistant-message.success span{color:var(--covered);font-weight:600}.assistant-cta{ width:100%; border:0; background:var(--ink); color:var(--paper-card); padding:.65rem; border-radius:.6rem; margin-top:.65rem; cursor:pointer;font-weight:600}.user-message{margin:.7rem 0 .7rem 2rem;background:var(--carbon-soft);padding:.65rem;border-radius:.7rem .7rem .15rem .7rem;font-size:.75rem}.assistant-composer{display:flex;gap:.4rem;padding:.75rem;border-top:1px solid var(--rule)}.assistant-composer input{min-width:0;flex:1;border:1px solid var(--rule);background:var(--paper-head);border-radius:.6rem;padding:.65rem;font-size:.74rem}.assistant-composer button{width:2.2rem;border:0;border-radius:.6rem;background:var(--ink);color:var(--paper-card);cursor:pointer}.assistant-panel.collapsed{display:none}.assistant-panel.collapsed+.workspace-main{grid-column:1/-1}
.product-modal{ position:fixed; inset:0; z-index:50; background:var(--overlay); display:grid; place-items:center; padding:1rem; }.product-modal[hidden]{display:none}.modal-card{ width:min(34rem,100%); max-height:90vh; overflow:auto; background:var(--paper-card); border-radius:1rem; box-shadow:var(--shadow-lift); padding:1.25rem; }.modal-card>header{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center}.modal-card h2{font-family:var(--font-title);font-size:1.7rem;margin:.2rem 0}.modal-card>p{color:var(--ink-soft);line-height:1.5;font-size:.82rem}.proposal-list{border:1px solid var(--rule);border-radius:.7rem;overflow:hidden}.proposal-list div{display:flex;justify-content:space-between;gap:1rem;padding:.75rem;border-bottom:1px solid var(--rule);font-size:.76rem}.proposal-list div:last-child{border-bottom:0}.proposal-list strong{color:var(--covered);font-size:.68rem}.proposal-result{display:flex;justify-content:space-between;background:var(--covered-soft);padding:.8rem;border-radius:.6rem;margin-top:.75rem;font-size:.76rem}.modal-card footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}.event-prompt{width:100%;min-height:8rem;border:1px solid var(--rule);border-radius:.7rem;padding:.8rem;resize:vertical}.template-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}.template-row button{border:1px solid var(--rule);background:var(--paper-head);border-radius:2rem;padding:.4rem .65rem;cursor:pointer;font-size:.7rem}.new-event-card>header{grid-template-columns:1fr auto}
.product-footer{max-width:86rem;margin:auto;padding:1.5rem;display:flex;justify-content:space-between;gap:1rem;color:var(--ink-mute);font-size:.7rem;border-top:1px solid var(--rule)}
@media(max-width:1050px){.workspace-layout{grid-template-columns:1fr}.assistant-panel{position:relative;top:auto;height:auto;min-height:0}.assistant-messages{min-height:12rem}.overview-grid{grid-template-columns:1fr}.assistant-panel.collapsed{display:flex}}
@media(max-width:720px){.product-header nav>a{display:none}.product-shell{padding:1.25rem .85rem 3rem}.event-titlebar{align-items:flex-start}.countdown{display:none}.event-titleline{align-items:flex-start;flex-direction:column}.workspace-tabs{gap:1.15rem}.status-hero{padding:1.25rem;min-height:0;align-items:flex-start}.status-orbit{flex-basis:6rem;width:6rem;height:6rem}.status-orbit strong{font-size:2.3rem}.category-grid,.team-list{grid-template-columns:1fr}.metric-row,.guest-needs{grid-template-columns:1fr 1fr}.vendor-list article{grid-template-columns:2.8rem 1fr auto}.vendor-list article>strong{display:none}.view-heading{align-items:flex-start;flex-direction:column}.product-footer{flex-direction:column}}
@media(max-width:460px){.product-header{padding:0 .85rem}.product-header nav{gap:.6rem}.avatar{display:none}.status-hero{flex-direction:column}.status-orbit{width:100%;height:auto;border-radius:.75rem;padding:.75rem;justify-content:flex-start}.status-orbit span br{display:none}.next-action,.ready-card{grid-template-columns:2.5rem 1fr}.next-action button,.ready-card button{grid-column:2}.metric-row,.guest-needs{grid-template-columns:1fr 1fr}.dayof-timeline article{grid-template-columns:1fr 1rem 3fr}.dayof-timeline article:not(:last-child)::after{left:calc(25% + .3rem)}.proposal-list div{flex-direction:column;gap:.2rem}}
@media print{.product-header,.workspace-tabs,.assistant-panel,.product-footer,.view-heading button{display:none!important}.workspace-view{display:none!important}.workspace-view[data-view="dayof"]{display:block!important}.workspace-layout{display:block}.product-shell{max-width:none;padding:0}.dayof-timeline{border:0}}