/* Castlestar's system: black and ivory, one steel accent, expanded Archivo titles, Inter Tight text, Plex Mono labels. */
:root {
  --night: #09090a; --dusk: #0e0f10; --dusk2: #131416; --dusk3: rgba(233,230,224,.09);
  --sand: #e9e6e0; --sand2: rgba(233,230,224,.68); --haze: rgba(233,230,224,.46); --faint: rgba(233,230,224,.22);
  --line: rgba(233,230,224,.11); --line2: rgba(233,230,224,.2);
  --bulb: #8fa3b8; --bad: #e39a8c; --good: #9cc2a0; --amber: #d9b77a; --ink-max: #fff; --tint: rgba(143,163,184,.12);
  --c-wed: #8fa3b8; --c-corp: #c9c4bb; --c-party: #d9b77a; --c-light: #d9b77a; --c-av: #8fa3b8; --c-music: #9cc2a0;
  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Archivo", "Inter Tight", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --night: #ffffff; --dusk: #f4f4f5; --dusk2: #ebebed; --dusk3: rgba(20,21,23,.08);
  --sand: #141517; --sand2: rgba(20,21,23,.72); --haze: rgba(20,21,23,.52); --faint: rgba(20,21,23,.26);
  --line: rgba(20,21,23,.12); --line2: rgba(20,21,23,.22);
  --bulb: #4a6580; --bad: #a4523c; --good: #3f7a4a; --amber: #9a6a1c; --ink-max: #000; --tint: rgba(74,101,128,.1);
  --c-wed: #4a6580; --c-corp: #5d5a54; --c-party: #9a6a1c; --c-light: #9a6a1c; --c-av: #4a6580; --c-music: #3f7a4a;
  color-scheme: light;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --night: #ffffff; --dusk: #f4f4f5; --dusk2: #ebebed; --dusk3: rgba(20,21,23,.08);
  --sand: #141517; --sand2: rgba(20,21,23,.72); --haze: rgba(20,21,23,.52); --faint: rgba(20,21,23,.26);
  --line: rgba(20,21,23,.12); --line2: rgba(20,21,23,.22);
  --bulb: #4a6580; --bad: #a4523c; --good: #3f7a4a; --amber: #9a6a1c; --ink-max: #000; --tint: rgba(74,101,128,.1);
  --c-wed: #4a6580; --c-corp: #5d5a54; --c-party: #9a6a1c; --c-light: #9a6a1c; --c-av: #4a6580; --c-music: #3f7a4a;
  color-scheme: light; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overflow-y: scroll; }
body { margin: 0; background: var(--night); color: var(--sand); font: 15px/1.55 var(--font); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--bulb); outline-offset: 3px; }
::selection { background: var(--bulb); color: var(--night); }
.wrap { width: min(100% - 32px, 1240px); margin: 0 auto; padding-bottom: 110px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-stretch: 118%; font-weight: 300; letter-spacing: -.015em; line-height: 1.06; }
h1 { font-size: clamp(30px, 4.4vw, 50px); }
h2 { font-size: clamp(22px, 2.6vw, 30px); }
h3 { font-size: 18px; }
.k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--haze); font-weight: 400; }
.sub { color: var(--haze); font-size: 13.5px; }

.made { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--haze); }
.made b { color: var(--bulb); font-weight: 400; }
.made .grow { flex: 1; }
.made a { color: var(--sand2); text-decoration: none; } .made a:hover { color: var(--sand); }

header.top { display: flex; align-items: center; gap: 16px; height: 64px; border-bottom: 1px solid var(--line); }
.brand { font-family: var(--display); font-stretch: 125%; font-weight: 500; font-size: 13px; letter-spacing: .28em; white-space: nowrap; }
header.top .hq { font: 11px var(--mono); letter-spacing: .06em; color: var(--bulb); }
header.top .grow { flex: 1; }
.theme-btn { background: none; border: 0; padding: 0; color: var(--haze); display: inline-flex; align-items: center; gap: 7px; font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.theme-btn:hover { color: var(--sand); }
.theme-btn i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.switch { display: inline-flex; border: 1px solid var(--line2); }
.switch button { border: 0; background: none; padding: 8px 14px; color: var(--haze); font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.switch button + button { border-left: 1px solid var(--line2); }
.switch button[aria-pressed="true"] { background: var(--sand); color: var(--night); }

nav.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 30px; overflow-x: auto; scrollbar-width: none; }
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs button { border: 0; background: none; padding: 14px 16px 13px; color: var(--haze); font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid transparent; margin-bottom: -1px; white-space: nowrap; }
nav.tabs button:hover { color: var(--sand2); }
nav.tabs button[aria-current="page"] { color: var(--sand); border-bottom-color: var(--bulb); }
nav.tabs b { color: var(--bad); font-weight: 400; margin-left: 6px; }

.hello { display: flex; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.hello p { margin: 8px 0 0; color: var(--sand2); }
.hello .grow { flex: 1; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line); margin-bottom: 44px; }
.stat { padding: 18px 18px 18px 0; }
.stat + .stat { padding-left: 18px; border-left: 1px solid var(--line); }
.stat .v { font-family: var(--display); font-stretch: 118%; font-weight: 300; font-size: 34px; line-height: 1; margin: 10px 0 8px; font-variant-numeric: tabular-nums; }
.stat .v small { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--haze); margin-left: 6px; }
.stat .sub { font: 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.bad { color: var(--bad) !important; } .good { color: var(--good) !important; } .amb { color: var(--amber) !important; }
.meter { height: 3px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--bulb); transition: width .5s ease; }

.sec { margin-bottom: 44px; }
.sechead { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line2); margin-bottom: 0; }
.sechead h2 { font-family: var(--mono); font-stretch: 100%; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sand); }
.sechead .sub { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sechead .grow { flex: 1; }
.split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line2); background: none; font-weight: 500; font-size: 13px; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: var(--sand2); }
.btn.go { background: var(--sand); border-color: var(--sand); color: var(--night); }
.btn.go:hover { background: var(--ink-max); }
.btn.sm { padding: 6px 10px; font-size: 12.5px; }

.list { border-top: 0; }
.item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); transition: opacity .35s, transform .35s; }
.item.gone { opacity: 0; transform: translateX(16px); }
.item .nm { font-weight: 500; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--haze); }
.t-Wedding { --c: var(--c-wed); } .t-Corporate { --c: var(--c-corp); } .t-Private { --c: var(--c-party); }
.space { font: 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--haze); }
.vend { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.vend .k { margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--line2); flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 9px 14px; color: var(--haze); font-size: 13.5px; }
.seg button + button { border-left: 1px solid var(--line2); }
.seg button[aria-pressed="true"] { background: var(--sand); color: var(--night); }
.sched { display: grid; gap: 0; margin-top: 12px; }
.sched .r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dot.t { background: var(--c); }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--haze); white-space: nowrap; background: none; padding: 0; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.t { color: var(--c); }
.chip.ok { color: var(--good); } .chip.no { color: var(--bad); } .chip.amb { color: var(--amber); }

.upnext { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--line); }
.ev { text-align: left; background: none; border: 0; border-left: 1px solid var(--line); padding: 18px; position: relative; color: var(--sand); }
.ev:first-child { border-left: 0; padding-left: 0; }
.ev:hover { background: linear-gradient(180deg, var(--tint), transparent 80%); }
.ev .when { font-family: var(--display); font-stretch: 118%; font-weight: 300; font-size: 26px; line-height: 1; margin: 12px 0 6px; }
.ev .row { display: grid; grid-template-columns: 74px 1fr 36px; gap: 8px; align-items: center; font: 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--haze); margin-top: 8px; }
.ev .row span:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 48px 10px 1fr; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--sand2); animation: in .5s ease; }
.feed .tm { color: var(--faint); font: 11px var(--mono); }
@keyframes in { from { opacity: 0; transform: translateY(-6px); background: var(--tint); } to { opacity: 1; transform: none; } }

.board { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.col h3 { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sand); display: flex; justify-content: space-between; gap: 8px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line2); }
.col h3 span { color: var(--haze); }
.card { display: block; width: 100%; text-align: left; background: var(--dusk); border: 1px solid var(--line); padding: 12px; margin-bottom: 8px; color: var(--sand); }
.card:hover { border-color: var(--line2); }
.card .nm { font-weight: 500; }
.card .bt { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.card .v { font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: 17px; }

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line2); border-left: 1px solid var(--line); }
.cal .dow { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--haze); padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.day { min-height: 92px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 7px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.day.out { opacity: .35; }
.day.today { box-shadow: inset 0 0 0 1px var(--bulb); }
.day .n { color: var(--haze); font: 11px var(--mono); }
.day .e { display: block; width: 100%; text-align: left; border: 0; border-left: 2px solid var(--c); padding: 3px 6px; background: var(--tint); color: var(--sand); font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--haze); padding: 12px 12px 10px 0; border-bottom: 1px solid var(--line2); white-space: nowrap; }
td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.n { text-align: right; font-variant-numeric: tabular-nums; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--tint); }
.tablewrap { overflow-x: auto; }

.chart { width: 100%; height: 220px; display: block; margin-top: 14px; }
.chart text { font: 10px var(--mono); letter-spacing: .05em; fill: var(--haze); text-transform: uppercase; }
.chart .b { fill: var(--bulb); opacity: .45; } .chart .b.cur { opacity: 1; } .chart .g { stroke: var(--line); }
.hb { display: grid; grid-template-columns: 130px 1fr 84px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.hb .tr { height: 8px; background: var(--line); overflow: hidden; }
.hb .tr i { display: block; height: 100%; background: var(--c, var(--bulb)); }
.hb .n { font: 11px var(--mono); }

/* detail pages: an event, reviews, partners */
.page { max-width: 760px; }
.back { display: inline-flex; gap: 8px; margin: 0 0 22px; color: var(--haze); font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.back:hover { color: var(--bulb); }
.page dl { display: grid; grid-template-columns: 110px 1fr; gap: 10px 14px; margin: 22px 0; font-size: 14.5px; }
.page dt { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--haze); padding-top: 3px; }
.page dd { margin: 0; }
.page .acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 24px; }
.prog { display: grid; gap: 10px; margin: 18px 0; }
.prog .row { display: grid; grid-template-columns: 110px 1fr 40px; gap: 10px; align-items: center; font: 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--haze); }
.prog .row span:last-child { text-align: right; }

.portal { width: 100%; }
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
@media (max-width: 860px) { .pgrid { grid-template-columns: 1fr; } }
.hero { padding: 8px 0 30px; margin-bottom: 0; }
.hero h1 { margin: 12px 0 8px; }
.count { display: flex; margin-top: 22px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.count div { padding: 14px 22px 0 0; margin-right: 22px; border-right: 1px solid var(--line); }
.count div:last-child { border-right: 0; }
.count b { display: block; font-family: var(--display); font-stretch: 118%; font-weight: 300; font-size: 30px; line-height: 1; }
.count span { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--haze); }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.step { padding: 14px 12px 14px 0; font: 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--haze); }
.step + .step { padding-left: 12px; border-left: 1px solid var(--line); }
.step i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line2); font-style: normal; font-size: 11px; margin-bottom: 8px; }
.step.done { color: var(--sand); } .step.done i { background: var(--good); border-color: var(--good); color: var(--night); }
.step.now { color: var(--sand); } .step.now i { border-color: var(--bulb); color: var(--bulb); }
.panel { border-top: 1px solid var(--line2); padding: 24px 0 30px; }
.panel h2 { margin-bottom: 4px; }
.panel > p.sub { margin: 0 0 18px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label.f { display: grid; gap: 6px; font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--haze); }
.in { width: 100%; padding: 10px 12px; border: 1px solid var(--line2); background: var(--night); color: var(--sand); font: 15px var(--font); letter-spacing: 0; text-transform: none; }
.in:focus { outline: none; border-color: var(--bulb); }
.songs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 8px; }
.song { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border: 1px solid var(--line2); font-size: 13px; }
.song button { border: 0; background: none; color: var(--haze); width: 20px; height: 20px; }
.song button:hover { color: var(--sand); }
.addrow { display: flex; gap: 8px; margin-top: 8px; }
.tl { display: grid; gap: 6px; }
.tl .r { display: grid; grid-template-columns: 26px 138px 1fr 30px; gap: 8px; align-items: center; background: var(--night); }
.tl .grip { display: grid; place-items: center; height: 40px; cursor: grab; touch-action: none; color: var(--haze); }
.tl .grip:hover { color: var(--sand); }
.tl .grip svg { width: 12px; height: 18px; fill: currentColor; }
.tl .r.drag { position: relative; z-index: 2; box-shadow: 0 10px 28px rgba(0,0,0,.18); outline: 1px solid var(--line2); }
.tl .r.drag .grip { cursor: grabbing; color: var(--bulb); }
.tl.dragging { user-select: none; }
.tl .r button { border: 0; background: none; color: var(--haze); }
.adds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.add { text-align: left; border: 1px solid var(--line2); background: var(--night); padding: 14px; position: relative; color: var(--sand); }
.add[aria-pressed="true"] { border-color: var(--bulb); background: var(--tint); }
.add .p { font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: 18px; margin-top: 8px; }
.add .tick { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border: 1px solid var(--line2); display: grid; place-items: center; font-size: 11px; color: transparent; }
.add[aria-pressed="true"] .tick { background: var(--bulb); border-color: var(--bulb); color: var(--night); }
.total { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 24px 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.total .big { font-family: var(--display); font-stretch: 118%; font-weight: 300; font-size: 32px; }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 18px); opacity: 0; pointer-events: none; background: var(--sand); color: var(--night); padding: 10px 16px; font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; z-index: 40; transition: all .25s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.cta { margin-top: 70px; padding: 32px; background: var(--dusk); border: 1px solid var(--line2); display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; }
.cta p { margin: 8px 0 0; color: var(--sand2); max-width: 62ch; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 10px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .upnext { grid-template-columns: 1fr; }
  .ev { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .ev:first-child { border-top: 0; }
  .steps { grid-template-columns: repeat(5, minmax(110px, 1fr)); overflow-x: auto; }
  .adds { grid-template-columns: 1fr; }
  .cta { grid-template-columns: 1fr; }
  .day { min-height: 64px; }
}
@media (max-width: 600px) {
  .vend { grid-template-columns: 1fr auto; } .vend .k { grid-column: 1 / -1; }
  header.top { height: auto; padding: 12px 0; flex-wrap: wrap; }
  header.top .grow { display: none; }
  .switch { order: 5; width: 100%; } .switch button { flex: 1; }
  .theme-btn span { display: none; }
  .fields { grid-template-columns: 1fr; }
  .item { grid-template-columns: 10px minmax(0, 1fr); }
  .item .btn { grid-column: 2; justify-self: start; }
  .stat .v { font-size: 27px; }
  .day { padding: 4px; min-height: 54px; } .day .e { font-size: 0; height: 6px; padding: 0; }
  .hero { padding: 4px 0 24px; }
  .tl .r { grid-template-columns: 18px 124px minmax(0, 1fr) 20px; gap: 6px; }
  .tl .in[type=time] { padding-left: 8px; padding-right: 6px; }
  .hb { grid-template-columns: 96px 1fr 60px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.smap { position: relative; height: 340px; margin: -6px 0 0; border-top: 1px solid var(--line); overflow: hidden; }
.smap canvas { display: block; }
.smap-cap { position: absolute; left: 0; bottom: 10px; color: var(--haze); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.smap-card { position: absolute; left: 0; top: 0; z-index: 2; display: grid; gap: 3px; min-width: 150px; padding: 9px 11px; background: var(--dusk); border: 1px solid var(--line2); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; pointer-events: none; }
.smap-card b { font-weight: 500; color: var(--sand); text-transform: uppercase; }
.smap-card span { color: var(--sand2); font-family: var(--font); font-size: 13px; letter-spacing: 0; }
.smap-card i { font-style: normal; color: var(--bulb); text-transform: uppercase; }
@media (max-width: 700px) { .smap { height: 280px; } }
.mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline; width: 100%; text-align: left; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--sand); font: inherit; cursor: pointer; }
.mrow:hover .nm { color: var(--bulb); }
.mrow .sub { margin-top: 3px; }
.mrow .v { font: 12px var(--mono); color: var(--sand2); }
.mhead { margin: 26px 0 4px; font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--haze); }

/* ---- the real HQ: forms, empty states, sign-in, errors ---- */
.form { display: grid; gap: 16px; max-width: 760px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
textarea.in { min-height: 90px; resize: vertical; line-height: 1.5; }
select.in { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--haze) 50%), linear-gradient(135deg, var(--haze) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.err { color: var(--bad); font-size: 13.5px; min-height: 1em; margin: 0; }
.empty { padding: 28px 0; color: var(--haze); border-bottom: 1px solid var(--line); }
.empty b { color: var(--sand); font-weight: 500; }
.addon-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 120px minmax(0, 1.6fr) 30px; gap: 8px; align-items: center; }
.addon-row button { border: 0; background: none; color: var(--haze); }
.pays .r { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto 30px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pays .r button { border: 0; background: none; color: var(--haze); }
.logl li { grid-template-columns: 72px 10px 1fr; }
.center { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.center .box { max-width: 420px; }
.center p { color: var(--sand2); }
.stagebar { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; }
.stagebar button { border: 1px solid var(--line2); background: none; padding: 6px 10px; font: 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--haze); }
.stagebar button[aria-pressed="true"] { background: var(--sand); border-color: var(--sand); color: var(--night); }
.stagebar button:disabled { opacity: .5; cursor: default; }
.sitepick { background: none; border: 1px solid var(--line2); padding: 6px 10px; font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sand2); }
.demo-note { color: var(--bulb); }
@media (max-width: 600px) { .form .row2, .form .row3 { grid-template-columns: 1fr; } .addon-row { grid-template-columns: 1fr 90px 30px; } .addon-row .in:nth-child(3) { grid-column: 1 / 3; } .pays .r { grid-template-columns: 1fr auto 24px; } .pays .r .sub + .sub { display: none; } }
.day .n { text-align: left; }
.printonly { display: none; }
@media print {
  .made, header.top, nav.tabs, .cta, .toast, .noprint, .back, .acts { display: none !important; }
  .printonly { display: block; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .wrap { width: 100%; padding: 0; }
}