/* Hexwork: near-black with a warm undertone, blood red for actions, brimstone only where it costs or ships (Publish,
   credits, prices, the go-live checklist). Warnings and things to do use the link pink; waiting states stay neutral. */
:root {
  color-scheme: dark;
  --blueprint: #FF4D6A;
  --blueprint-deep: #FF8197;
  --blood: #C8102E;
  --blood-deep: #9F1239;
  --ink: #F4EEF0;
  --graphite: #A99CA3;
  --paper: #09070A;
  --white: #131013;
  --raised: #1B161A;
  --rule: #2C2328;
  --rule-strong: #43363D;
  --tint: rgba(255, 77, 106, 0.12);
  --pencil: #FFB224;
  --pencil-deep: #E89A0C;
  --on-pencil: #1A0B00;
  --fault: #FF6B6B;
  --ok: #4ADE80;
  --display: "Syne", "Arial Black", sans-serif;
  --body: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--blueprint);
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1rem/1.55 var(--body); color: var(--ink); background: var(--paper); }
img, svg { max-width: 100%; }
a { color: var(--blueprint); text-underline-offset: 2px; }
a:hover { color: var(--blueprint-deep); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.05; letter-spacing: 0.005em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--white); padding: 8px 12px; z-index: 10; }
.skip:focus { top: 8px; }
.muted { color: var(--graphite); }
.small { font-size: 0.85rem; }
.fine { font-size: 0.9rem; color: var(--graphite); }
.lede { font-size: 1.15rem; max-width: 60ch; }
.inline { display: inline; }

/* Buttons */
[hidden] { display: none !important; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--blueprint); border-radius: 3px; background: var(--white); color: var(--blueprint); font: 600 1rem/1.2 var(--body); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--tint); color: var(--blueprint-deep); }
.btn-primary { background: var(--blood); border-color: var(--blood); color: #fff; }
.btn-primary:hover { background: var(--blood-deep); color: #fff; }
.btn-quiet { border-color: var(--rule); color: var(--ink); }
.btn-small { min-height: 36px; padding: 6px 12px; font-size: 0.92rem; }
.btn-publish { background: var(--pencil); border-color: var(--pencil-deep); color: var(--on-pencil); }
.btn-publish:hover { background: var(--pencil-deep); color: var(--on-pencil); }
.btn-danger { border-color: var(--fault); color: var(--fault); }
.btn-stop { border-color: var(--fault); color: var(--fault); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--blueprint); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link.danger { color: var(--fault); }

/* Forms */
label { display: block; font-weight: 600; margin: 14px 0 6px; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
input, select, textarea { width: 100%; font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--rule-strong); border-radius: 3px; padding: 10px 12px; min-height: 44px; }
input[type="checkbox"] { width: 20px; min-height: 20px; height: 20px; }
textarea { resize: vertical; }
input[aria-invalid="true"] { border-color: var(--fault); }
.hint { font-size: 0.88rem; color: var(--graphite); margin: 4px 0 0; }
.field-err { color: var(--fault); font-size: 0.92rem; margin: 6px 0 0; }
form .btn { margin-top: 16px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0 0 16px; }
.inline-form > div { flex: 1 1 200px; }
.inline-form label { margin-top: 0; }
.inline-form .btn { margin-top: 0; }
.addon-input { display: flex; align-items: stretch; }
.addon-input input { border-radius: 3px 0 0 3px; }
.addon-input span { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--rule-strong); border-left: 0; border-radius: 0 3px 3px 0; background: var(--paper); font-size: 0.9rem; white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }

/* Messages */
.flash { padding: 12px 14px; border-left: 4px solid var(--blueprint); background: var(--white); margin: 16px 0; }
.flash-error { border-color: var(--fault); }
.flash-ok { border-color: var(--ok); }
.notice { padding: 12px 14px; border: 1px solid rgba(255, 77, 106, 0.45); background: rgba(255, 77, 106, 0.08); margin: 0 0 16px; }

/* Top bar */
.topbar { background: var(--white); border-bottom: 1px solid var(--rule); }
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.topbar nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.topbar nav a { color: var(--ink); text-decoration: none; font-weight: 600; }
.topbar nav a[aria-current="page"] { color: var(--blueprint); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.topbar nav .btn { background: var(--blood); border-color: var(--blood); color: #fff; }
.topbar nav .btn:hover { background: var(--blood-deep); color: #fff; }
.wordmark { font-family: var(--display); font-weight: 800; font-size: 1.9rem; color: var(--ink); text-decoration: none; letter-spacing: 0.01em; line-height: 1; }
.wordmark.small { font-size: 1.5rem; }
.wordmark-sub { font-family: var(--body); font-size: 0.85rem; font-weight: 600; color: var(--graphite); }
.credit-pill { display: inline-block; padding: 4px 10px; border: 1px solid var(--pencil-deep); background: rgba(255, 178, 36, 0.1); border-radius: 3px; font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.viewing { display: flex; gap: 12px; justify-content: center; align-items: center; padding: 6px 16px; background: var(--blueprint); color: var(--paper); font-weight: 600; }
.viewing .link { color: var(--paper); }

/* Public pages */
.hero { background: var(--white); border-bottom: 1px solid var(--rule); padding: 48px 0 56px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.hero-copy h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 12px; }
.blueprint { margin: 0; background: var(--white); color: var(--ink); border-radius: 4px; padding: 18px; }
.blueprint figcaption { font-size: 0.88rem; color: var(--graphite); margin-top: 10px; }
.bp-prompt { display: flex; gap: 10px; align-items: baseline; font-size: 0.95rem; padding: 10px 12px; border: 1px dashed var(--rule-strong); margin-bottom: 14px; min-height: 3.4em; }
.bp-label { font-weight: 700; color: var(--blueprint); }
.bp-drawing { display: block; width: 100%; height: auto; }
.bp-grid line { stroke: #21181C; stroke-width: 0.5; }
.bp-lines rect, .bp-lines line { fill: none; stroke: var(--blueprint); stroke-width: 1.5; }
.bp-fill rect { fill: var(--blueprint); }
.bp-fill .field { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.bp-fill .go { fill: var(--blood); }
/* The one orchestrated moment: the prompt types, the page is drawn, then filled. */
@media (prefers-reduced-motion: no-preference) {
  .bp-typed { display: inline-block; clip-path: inset(0 100% 0 0); animation: type 1.8s steps(40, end) 0.2s forwards; }
  .bp-lines > * { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 0.9s ease-out forwards; }
  .bp-lines .d1 { animation-delay: 2.0s; } .bp-lines .d2 { animation-delay: 2.3s; } .bp-lines .d3 { animation-delay: 2.6s; } .bp-lines .d4 { animation-delay: 2.8s; }
  .bp-fill > * { opacity: 0; animation: fill 0.5s ease-out forwards; }
  .bp-fill .f1 { animation-delay: 3.3s; } .bp-fill .f2 { animation-delay: 3.5s; } .bp-fill .f3 { animation-delay: 3.7s; } .bp-fill .f4 { animation-delay: 3.9s; }
}
@keyframes type { to { clip-path: inset(0 0 0 0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fill { to { opacity: 1; } }

.band { padding: 56px 16px 8px; }
.narrowish { max-width: 880px; }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.steps li { counter-increment: step; padding: 18px 24px 8px 0; border-right: 1px solid var(--rule); margin-right: 24px; }
.steps li:last-child { border-right: 0; }
.steps li::before { content: counter(step); display: block; font-family: var(--display); font-weight: 800; font-size: 2.6rem; color: var(--blueprint); line-height: 1; margin-bottom: 8px; }
.steps p { max-width: 36ch; }

table { border-collapse: collapse; width: 100%; }
.table-scroll { width: 100%; overflow-x: auto; }
.plans { background: var(--white); border-top: 2px solid var(--ink); }
.plans caption { text-align: left; caption-side: bottom; padding-top: 10px; color: var(--graphite); font-size: 0.92rem; }
.plans th, .plans td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.plans thead th { font-size: 0.85rem; color: var(--graphite); font-weight: 600; }
.plans tbody th { font-family: var(--display); font-size: 1.4rem; font-weight: 800; }
.plans .per { color: var(--graphite); font-size: 0.85rem; }
.plan-top { background: rgba(255, 77, 106, 0.06); }

.foot { border-top: 1px solid var(--rule); margin-top: 64px; padding: 24px 0; background: var(--white); font-size: 0.92rem; color: var(--graphite); }
.foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-row p { margin: 0; }
.foot-row a { margin-left: 16px; }

.sheet { background: var(--white); border: 1px solid var(--rule); border-radius: 3px; padding: 24px; margin: 0 0 20px; }
.sheet.narrow { max-width: 460px; margin: 40px auto; }
.sheet.narrowish { max-width: 720px; }
.public .sheet.narrowish { margin: 40px auto; }
.prose li { margin-bottom: 6px; }

/* App pages */
.app-main { padding-top: 28px; padding-bottom: 48px; }
.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 6px; }
.meta-line { color: var(--graphite); }
.crumb { margin: 0 0 4px; font-size: 0.92rem; }
.new-site-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 16px; }
.new-site-grid label { margin-top: 0; }
.list { background: var(--white); border: 1px solid var(--rule); }
.list th, .list td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.list thead th { font-size: 0.85rem; color: var(--graphite); font-weight: 600; background: var(--paper); }
.list tbody th { font-weight: 600; }
.list .num { text-align: right; white-space: nowrap; }
.list .clip { max-width: 260px; }
.row-actions { white-space: nowrap; }
.row-actions > * + * { margin-left: 12px; }
.status { font-weight: 600; font-size: 0.9rem; }
.status-live { color: var(--ok); }
.status-draft { color: var(--graphite); }
.status-suspended { color: var(--fault); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0; }
.facts dt { color: var(--graphite); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.two-col.tight { gap: 0 16px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin: 0 0 20px; border-top: 2px solid var(--ink); background: var(--white); }
.stat-row div { padding: 14px 16px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat-row dt { font-size: 0.85rem; color: var(--graphite); }
.stat-row dd { margin: 4px 0 0; font-family: var(--display); font-weight: 800; font-size: 1.8rem; }
.stat-row dd .muted { font-family: var(--body); font-weight: 400; font-size: 0.8rem; }
.secret-key { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.06em; word-break: break-all; padding: 10px; background: var(--paper); }
details summary { cursor: pointer; color: var(--blueprint); }
.inline-details { display: inline-block; }
.inline-details form { margin-top: 8px; max-width: 280px; white-space: normal; }
.danger-zone { margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 14px; }
.danger-zone summary { color: var(--fault); }

/* Builder */
.builder-body { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.builder { flex: 1; min-height: 0; display: grid; grid-template-columns: 380px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: var(--white); border-bottom: 1px solid var(--rule); min-height: 52px; }
.bar-site { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bar-spacer { flex: 1; }
.bar-link { font-weight: 600; }
.tabs { display: none; }
.pane { min-height: 0; display: flex; flex-direction: column; }
.pane-chat { background: var(--white); border-right: 1px solid var(--rule); }
.chat { list-style: none; margin: 0; padding: 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 100%; }
.msg-who { display: block; font-size: 0.8rem; font-weight: 700; color: var(--graphite); margin-bottom: 2px; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-user .msg-body { background: var(--paper); border: 1px solid var(--rule); padding: 10px 12px; border-radius: 3px; }
.msg-system { color: var(--graphite); font-size: 0.88rem; border-top: 1px dashed var(--rule); padding-top: 8px; }
.msg-cost { display: block; font-size: 0.8rem; color: var(--graphite); margin-top: 4px; }
.msg-error .msg-body { color: var(--fault); }
.work { font-size: 0.9rem; color: var(--graphite); border-left: 2px solid var(--blueprint); padding-left: 10px; }
.work ul { list-style: none; margin: 4px 0 0; padding: 0; }
.work li { padding: 1px 0; }
.work-live::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--blueprint); }
@media (prefers-reduced-motion: no-preference) { .work-live::after { animation: blink 1s infinite; } }
@keyframes blink { 50% { opacity: 0.2; } }
.chat-empty { color: var(--graphite); }
.composer { border-top: 1px solid var(--rule); padding: 12px 16px 14px; }
.composer textarea { min-height: 76px; max-height: 40vh; }
.composer-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.composer-row .btn { margin-top: 0; }
.composer-row .file-btn { margin-right: auto; }
.file-btn { margin: 0; font-weight: 600; cursor: pointer; }
.file-btn:focus-within { box-shadow: var(--focus); }
.attach-list { display: flex; flex-wrap: wrap; gap: 6px; }
.attach-list:not(:empty) { margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 8px; border: 1px solid var(--rule); border-radius: 3px; font-size: 0.85rem; background: var(--paper); }
.chip button { border: 0; background: none; cursor: pointer; font: inherit; color: var(--graphite); min-width: 28px; min-height: 28px; }
.pane-preview { background: var(--paper); }
.preview-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--white); border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.preview-bar select { width: auto; min-height: 36px; padding: 4px 8px; max-width: 220px; }
.preview-bar .btn { margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.seg button { border: 0; background: var(--white); font: 600 0.88rem var(--body); padding: 0 12px; min-height: 36px; cursor: pointer; color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--blood); color: #fff; }
.publish-note { margin: 0; padding: 0 16px; font-size: 0.88rem; color: var(--graphite); }
.publish-note:not(:empty) { padding: 6px 16px; background: var(--white); border-bottom: 1px solid var(--rule); }
/* The drafting sheet the preview sits on. */
.sheet-frame { position: relative; flex: 1; min-height: 0; margin: 16px; background-color: #0D0A0C; background-image: linear-gradient(#1A1418 1px, transparent 1px), linear-gradient(90deg, #1A1418 1px, transparent 1px); background-size: 24px 24px; border: 1px solid var(--rule); display: flex; justify-content: center; padding: 14px; }
.sheet-frame iframe { width: 100%; height: 100%; border: 1px solid var(--rule-strong); background: var(--white); transition: width 0.2s; }
.sheet-frame.mobile iframe { width: 390px; max-width: 100%; }
.empty-preview { position: absolute; inset: 14px; display: grid; place-items: center; text-align: center; color: var(--graphite); padding: 24px; overflow: auto; background: var(--paper); }
.empty-preview[hidden] { display: none; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--rule); }
  .two-col, .new-site-grid { grid-template-columns: minmax(0, 1fr); }
  .builder { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .tabs { display: flex; grid-column: 1; background: var(--white); border-bottom: 1px solid var(--rule); }
  .tabs button { flex: 1; min-height: 44px; border: 0; background: none; font: 600 0.95rem var(--body); color: var(--graphite); border-bottom: 3px solid transparent; cursor: pointer; }
  .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--blueprint); }
  .pane[hidden] { display: none; }
  .pane-chat { border-right: 0; }
  .sheet-frame { margin: 8px; padding: 8px; }
  .bar .bar-site { display: none; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dd { margin-bottom: 8px; }
}
@media (max-width: 480px) {
  .sheet { padding: 18px 16px; }
  .topbar nav { gap: 12px; font-size: 0.95rem; }
  .composer-hint { display: none; }
  .row-actions { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Site list stacks into cards on phones. */
@media (max-width: 640px) {
  .list-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .list-stack, .list-stack tbody, .list-stack tr, .list-stack th, .list-stack td { display: block; width: 100%; }
  .list-stack tr { padding: 12px 14px; border-bottom: 1px solid var(--rule); }
  .list-stack th, .list-stack td { padding: 3px 0; border: 0; }
  .list-stack td[data-label]::before { content: attr(data-label) ": "; color: var(--graphite); font-size: 0.85rem; }
  .list-stack .row-actions { display: flex; gap: 18px; padding-top: 8px; }
}
@media (max-width: 640px) {
  .list-stack caption { display: block; text-align: left; }
  .list-stack td:empty { display: none; }
  .plans.list-stack th[scope="row"] { font-size: 1.4rem; }
  .plans.list-stack .plan-note { padding-top: 6px; }
}

/* Build / Plan / Chat modes */
.modes { display: flex; align-items: center; gap: 0; flex-wrap: wrap; border: 0; padding: 0; margin: 0 0 8px; }
.modes label { position: relative; margin: 0; }
.modes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.modes label span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--rule); margin-left: -1px; font: 600 0.88rem var(--body); color: var(--ink); background: var(--white); cursor: pointer; }
.modes label:first-of-type span { margin-left: 0; border-radius: 3px 0 0 3px; }
.modes label:nth-of-type(3) span { border-radius: 0 3px 3px 0; }
.modes input:checked + span { background: var(--blood); border-color: var(--blood); color: #fff; }
.modes input:focus-visible + span { box-shadow: var(--focus); position: relative; z-index: 1; }
.mode-note { flex: 1 1 160px; margin-left: 10px; font-size: 0.8rem; color: var(--graphite); }
.mode-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--rule); border-radius: 3px; font-size: 0.72rem; font-weight: 700; color: var(--blueprint); text-transform: uppercase; letter-spacing: 0.04em; }

/* Formatted replies */
.msg-rich { white-space: normal; }
.msg-rich p { margin: 0 0 8px; }
.msg-rich p:last-child { margin-bottom: 0; }
.msg-rich .msg-h { font-weight: 700; color: var(--ink); margin: 12px 0 4px; }
.msg-rich .msg-h:first-child { margin-top: 0; }
.msg-rich ul { margin: 0 0 8px; padding-left: 20px; }
.msg-rich li { margin: 2px 0; }
.build-plan { margin-top: 10px; }

/* Questions with tap-to-answer options */
.qcard { margin-top: 10px; border: 1px solid var(--rule); border-left: 3px solid var(--blueprint); border-radius: 3px; padding: 12px; background: var(--white); }
.qcard .q { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.qcard legend { font-weight: 700; color: var(--ink); padding: 0; margin-bottom: 8px; }
.q-options { display: flex; flex-direction: column; gap: 6px; }
.q-opt { position: relative; display: block; margin: 0; }
.q-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.q-opt span { display: block; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); cursor: pointer; }
.q-opt input:hover + span { border-color: var(--blueprint); }
.q-opt input:checked + span { border-color: var(--blueprint); background: var(--tint); color: var(--blueprint-deep); font-weight: 600; }
.q-opt input:focus-visible + span { box-shadow: var(--focus); }
.q-other { margin-top: 6px; min-height: 40px; }
.qcard .btn { margin: 0; }
.qcard-done { opacity: 0.7; }
.qcard-done .q-opt span, .qcard-done .q-opt input { cursor: default; }
.qcard-done .q-other { display: none; }

/* Empty preview: a page being sketched, and the stacking game */
.empty-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 340px; }
.sketch { width: 220px; height: auto; fill: none; stroke: var(--blueprint); stroke-width: 2; stroke-linecap: round; margin-bottom: 6px; }
.sketch .s4 { fill: rgba(255,77,106,0.0); }
.empty-title { margin: 0; font: 700 1.5rem/1.1 var(--display); color: var(--ink); }
.empty-sub { margin: 0; font-size: 0.92rem; min-height: 1.4em; }
.game { margin-top: 6px; }
.game canvas { display: block; width: 300px; max-width: 100%; height: auto; aspect-ratio: 1; border: 1px solid var(--rule); border-radius: 3px; touch-action: manipulation; cursor: pointer; }
.game canvas:focus-visible { box-shadow: var(--focus); outline: none; }
.game-score { margin: 6px 0 0; font-size: 0.85rem; }
#game-toggle { margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .sketch path, .sketch rect { stroke-dasharray: 400; stroke-dashoffset: 400; animation: sketch 7s ease-in-out infinite; }
  .sketch .s2 { animation-delay: 0.4s; }
  .sketch .s3 { animation-delay: 0.9s; }
  .sketch .s4 { animation-name: sketch, sketchfill; animation-delay: 1.4s; }
  .sketch .s5 { animation-delay: 1.8s; }
  .sketch .s6 { animation-delay: 2.3s; }
}
@keyframes sketch { 0% { stroke-dashoffset: 400; opacity: 1; } 40%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sketchfill { 0%, 35% { fill: rgba(255,77,106,0); } 50%, 85% { fill: rgba(255,77,106,1); } 100% { fill: rgba(255,77,106,0); } }
@media (max-height: 760px) { .sketch { width: 150px; } }
.work-bar { height: 6px; margin: 6px 0 4px; background: var(--rule); border-radius: 3px; overflow: hidden; max-width: 320px; }
.work-bar span { display: block; height: 100%; width: 0; background: var(--blueprint); border-radius: 3px; transition: width 0.25s linear; }
.work-meta { font-size: 0.78rem; color: var(--graphite); }
@media (prefers-reduced-motion: reduce) { .work-bar span { transition: none; } }
.composer.dropping { outline: 2px dashed var(--blueprint); outline-offset: -6px; background: var(--tint); }

/* More panel */
.more { position: relative; flex: 1; min-height: 0; display: flex; background: var(--paper); }
.more[hidden], .sheet-frame[hidden] { display: none !important; }
.more-nav { width: 168px; flex-shrink: 0; padding: 14px 10px; border-right: 1px solid var(--rule); background: var(--white); display: flex; flex-direction: column; gap: 2px; }
.more-nav button { text-align: left; border: 0; background: none; font: 600 0.92rem var(--body); color: var(--ink); padding: 9px 12px; border-radius: 3px; cursor: pointer; min-height: 38px; }
.more-nav button:hover { background: var(--paper); }
.more-nav button[aria-current="page"] { background: var(--tint); color: var(--blueprint-deep); box-shadow: inset 3px 0 0 var(--blueprint); }
.more-main { flex: 1; min-width: 0; overflow: auto; padding: 18px 24px 40px; }
.more-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.more-head h2 { margin: 0; font-size: 1.9rem; }
.more-head h2:focus { outline: none; }
.more-content { max-width: 1000px; display: flex; flex-direction: column; gap: 14px; }
.more-content > p { margin: 0; }
.more-card { background: var(--white); border: 1px solid var(--rule); border-radius: 3px; padding: 14px 16px; }
.more-card h3 { margin: 0 0 10px; font-size: 1.25rem; }
.more-card p { margin: 0 0 8px; }
.more-card p:last-child { margin-bottom: 0; }
.more-note { border-left: 3px solid var(--blueprint); }
.more-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.more-row p { margin: 0; }
.more-row.tight { justify-content: flex-start; flex-wrap: nowrap; }
.more-row .btn, .more-card .btn { margin: 0; }
.more-row.tight .btn { flex: none; white-space: nowrap; }
.more-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); background: var(--white); border: 1px solid var(--rule); border-radius: 3px; }
.more-stat { padding: 12px 14px; border-right: 1px solid var(--rule); }
.more-stat:last-child { border-right: 0; }
.more-stat .k { display: block; font-size: 0.82rem; color: var(--graphite); font-weight: 600; }
.more-stat .v { font: 800 1.8rem/1.1 var(--display); color: var(--ink); }
.more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.more-chart { width: 100%; height: auto; display: block; }
.more-chart rect { fill: var(--blueprint); }
.more-chart .grid { stroke: var(--rule); stroke-width: 1; }
.more-chart text { fill: var(--graphite); font: 11px var(--body); }
.more-bars { list-style: none; margin: 0; padding: 0; }
.more-bars li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; font-size: 0.9rem; z-index: 0; }
.more-bars .bar { position: absolute; left: 0; top: 2px; bottom: 2px; background: var(--tint); border-radius: 2px; z-index: -1; }
.more-bars .lbl { overflow-wrap: anywhere; }
.more-bars .val { font-weight: 700; }
.more-scroll { overflow-x: auto; background: var(--white); border: 1px solid var(--rule); border-radius: 3px; }
.more-card .more-scroll { border: 0; }
.more-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.more-table th, .more-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; max-width: 320px; overflow-wrap: anywhere; }
.more-table thead th { font-size: 0.78rem; color: var(--graphite); background: var(--paper); white-space: nowrap; }
.more-table tbody tr:last-child > * { border-bottom: 0; }
.more-table td.null { color: var(--graphite); font-style: italic; }
.more-table .acts { white-space: nowrap; }
.more-table .acts > * + * { margin-left: 12px; }
.more-form { display: flex; flex-direction: column; gap: 10px; }
.more-field { display: flex; flex-direction: column; gap: 4px; }
.more-field label { font-weight: 600; font-size: 0.9rem; margin: 0; }
.more-field .check { font-weight: 400; display: flex; gap: 6px; align-items: center; }
.more-field input, .more-field textarea { margin: 0; }
.more-flash:empty { display: none; }
.more-flash { margin: 0; padding: 8px 12px; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.35); border-radius: 3px; font-size: 0.9rem; }
.more-error { background: rgba(255, 107, 107, 0.1); border-color: rgba(255, 107, 107, 0.4); color: var(--fault); padding: 8px 12px; border: 1px solid rgba(255, 107, 107, 0.4); border-radius: 3px; margin: 0; }
.more-warn { background: rgba(255, 77, 106, 0.08); border-color: rgba(255, 77, 106, 0.45); }
.meter { height: 8px; background: var(--rule); border-radius: 4px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--blueprint); }
.mono { font-family: var(--mono); font-size: 0.85rem; }
.small { font-size: 0.82rem; }
.ok { color: var(--ok); font-weight: 600; }
.seo-title { font-weight: 700; color: var(--blueprint-deep); }
.seo-desc { color: var(--graphite); font-size: 0.9rem; }
.seo-issues { margin: 6px 0 0; padding-left: 18px; color: var(--blueprint-deep); font-size: 0.9rem; }
.danger-zone { border-color: rgba(255, 107, 107, 0.4); }
@media (max-width: 900px) {
  .more { flex-direction: column; }
  .more-nav { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--rule); padding: 6px 8px; }
  .more-nav button { white-space: nowrap; }
  .more-nav button[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--blueprint); }
  .more-main { padding: 14px 14px 30px; }
  .more-head h2 { font-size: 1.5rem; }
}

/* ---- Dark finish: atmosphere, depth and the sharper type ---- */
body { background: var(--paper); -webkit-font-smoothing: antialiased; }
body.public, body.app { background:
  radial-gradient(900px 520px at 85% -10%, rgba(200, 16, 46, 0.22), transparent 70%),
  radial-gradient(700px 480px at -10% 30%, rgba(159, 18, 57, 0.12), transparent 70%),
  var(--paper); background-attachment: fixed; }
::selection { background: var(--blood); color: #fff; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; }
h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
.hero-copy h1 { font-size: clamp(2.1rem, 5vw, 3.7rem); }
.hero-copy h1 em { font-style: normal; background: linear-gradient(100deg, #FF8197, #FF4D6A 45%, #C8102E); /* as the beta hero (beta.css) */ -webkit-background-clip: text; background-clip: text; color: transparent; }
.wordmark { font-size: 1.5rem; letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 10px; }
.wordmark.small { font-size: 1.25rem; }

/* Controls */
.btn { border-radius: 999px; border-color: var(--rule-strong); background: var(--raised); color: var(--ink); padding: 10px 20px; transition: background 0.15s, border-color 0.15s, box-shadow 0.2s, transform 0.15s; }
.btn:hover { background: #251D22; border-color: #5A4750; color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-primary, .topbar nav .btn { background: var(--blood); border-color: var(--blood); box-shadow: 0 0 0 1px rgba(255, 77, 106, 0.25), 0 8px 28px -8px rgba(200, 16, 46, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.btn-primary:hover, .topbar nav .btn:hover { background: var(--blood-deep); border-color: var(--blood-deep); box-shadow: 0 0 0 1px rgba(255, 77, 106, 0.4), 0 10px 34px -6px rgba(200, 16, 46, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
/* Keyboard focus on a red button: the glow above used to replace the app's focus ring (:focus-visible near the top). */
.btn-primary:focus-visible, .topbar nav .btn:focus-visible { box-shadow: var(--focus), 0 8px 28px -8px rgba(200, 16, 46, 0.7); }
.btn-publish { box-shadow: 0 8px 26px -10px rgba(255, 178, 36, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn-quiet { background: transparent; }
.btn-danger, .btn-stop { background: transparent; border-color: rgba(255, 107, 107, 0.55); color: var(--fault); }
.btn-danger:hover, .btn-stop:hover { background: rgba(255, 107, 107, 0.1); border-color: var(--fault); color: var(--fault); }
input, select, textarea { background: #0E0B0D; border-color: var(--rule-strong); border-radius: 8px; transition: border-color 0.15s, box-shadow 0.15s; }
input:hover, select:hover, textarea:hover { border-color: #5A4750; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blueprint); box-shadow: 0 0 0 3px rgba(255, 77, 106, 0.2); }
input::placeholder, textarea::placeholder { color: var(--graphite); opacity: 0.8; } /* about 5:1 on the field */
select option { background: var(--white); }
.addon-input span { background: var(--raised); border-color: var(--rule-strong); border-radius: 0 8px 8px 0; }
.addon-input input { border-radius: 8px 0 0 8px; }
.credit-pill { border-radius: 999px; border-color: rgba(255, 178, 36, 0.45); color: var(--pencil); padding: 4px 12px; }
.mode-tag { border-radius: 999px; border-color: rgba(255, 77, 106, 0.35); }

/* Surfaces */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(9, 7, 10, 0.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: rgba(255, 255, 255, 0.06); }
.topbar nav a { color: var(--graphite); transition: color 0.15s; }
.topbar nav a:hover { color: var(--ink); }
.topbar nav a[aria-current="page"] { color: var(--ink); text-decoration-color: var(--blueprint); }
.sheet, .list, .more-card, .more-stats, .more-scroll, .qcard, .plans, .stat-row { border-radius: var(--radius); border: 1px solid var(--rule); background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%), var(--white); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 48px -32px rgba(0, 0, 0, 0.9); }
.list, .plans, .more-scroll { overflow: hidden; }
.more-card .more-scroll { box-shadow: none; }
.plans, .stat-row { border-top: 1px solid var(--rule); }
.stat-row { overflow: hidden; }
.stat-row div, .more-stat { border-color: var(--rule); }
.stat-row dd, .more-stat .v { letter-spacing: -0.03em; }
.list thead th, .more-table thead th { background: rgba(255, 255, 255, 0.03); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; }
.list tbody tr, .more-table tbody tr { transition: background 0.12s; }
.list tbody tr:hover, .more-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.flash { background: var(--white); border-radius: var(--radius); border: 1px solid var(--rule); border-left: 3px solid var(--blueprint); }
.flash-error { border-left-color: var(--fault); }
.flash-ok { border-left-color: var(--ok); }
.notice { border-radius: var(--radius); border-color: rgba(255, 77, 106, 0.45); }
.foot { background: transparent; border-top-color: rgba(255, 255, 255, 0.06); }
.secret-key { background: var(--raised); border-radius: 8px; font-family: var(--mono); }
.status-live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); vertical-align: 1px; }

/* Public pages */
.hero { background: transparent; border-bottom: 0; padding: 72px 0 72px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 77, 106, 0.5), transparent); }
.lede { color: #CFC3C8; }
.blueprint { position: relative; border-radius: 16px; border: 1px solid var(--rule); padding: 20px; background: linear-gradient(180deg, #17121500, #0E0B0D), var(--white); box-shadow: 0 0 0 1px rgba(255, 77, 106, 0.08), 0 40px 120px -40px rgba(200, 16, 46, 0.55); }
.blueprint::before { content: ""; position: absolute; inset: -1px; border-radius: 16px; padding: 1px; background: linear-gradient(140deg, rgba(255, 77, 106, 0.6), transparent 35%, transparent 65%, rgba(200, 16, 46, 0.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.bp-prompt { border: 1px solid var(--rule-strong); border-radius: 10px; background: #0E0B0D; }
.bp-label { color: var(--blueprint); }
.bp-lines rect, .bp-lines line { stroke: rgba(255, 77, 106, 0.85); filter: drop-shadow(0 0 3px rgba(255, 77, 106, 0.6)); }
.bp-fill rect { fill: #3A2C33; }
.bp-fill .go { fill: var(--blood); }
.steps { border-top: 0; gap: 14px; }
.steps li { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 22px 10px; margin: 0; }
.steps li:last-child { border-right: 1px solid var(--rule); }
.steps li::before { font-size: 2.2rem; background: linear-gradient(180deg, #FF4D6A, #9F1239); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-top { background: linear-gradient(90deg, rgba(255, 77, 106, 0.1), transparent); }

/* Builder */
.builder-body { background: var(--paper); }
.bar { background: rgba(9, 7, 10, 0.85); border-bottom-color: rgba(255, 255, 255, 0.06); }
.pane-chat { background: var(--white); border-right-color: rgba(255, 255, 255, 0.06); }
.msg-who { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; }
.msg-assistant .msg-who, .msg-ai .msg-who { color: var(--blueprint); }
.msg-user .msg-body { background: var(--raised); border-color: var(--rule); border-radius: 14px 14px 4px 14px; }
.work { border-left-color: var(--blueprint); }
.work-live::after { box-shadow: 0 0 8px var(--blueprint); }
.composer { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.25)); border-top-color: rgba(255, 255, 255, 0.06); }
.composer textarea { border-radius: 14px; background: #0E0B0D; }
.chip { border-radius: 999px; background: var(--raised); }
.pane-preview { background: var(--paper); }
.preview-bar { background: var(--white); border-bottom-color: rgba(255, 255, 255, 0.06); }
.seg { border-radius: 999px; border-color: var(--rule-strong); }
.seg button { background: transparent; }
.modes label span { background: transparent; border-color: var(--rule-strong); }
.modes label:first-of-type span { border-radius: 999px 0 0 999px; }
.modes label:nth-of-type(3) span { border-radius: 0 999px 999px 0; }
.publish-note:not(:empty) { background: var(--white); border-bottom-color: var(--rule); }
.sheet-frame { border-radius: 14px; border-color: var(--rule); background-image: radial-gradient(circle at 50% 0%, rgba(200, 16, 46, 0.12), transparent 60%), linear-gradient(#1A1418 1px, transparent 1px), linear-gradient(90deg, #1A1418 1px, transparent 1px); background-size: auto, 24px 24px, 24px 24px; }
.sheet-frame iframe { border-radius: 8px; border-color: var(--rule-strong); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9); }
.empty-preview { background: transparent; border-radius: 10px; }
.sketch { stroke: var(--blueprint); filter: drop-shadow(0 0 6px rgba(255, 77, 106, 0.5)); }
.game canvas { border-color: var(--rule-strong); border-radius: 12px; }
.work-bar { background: var(--raised); border-radius: 999px; }
.work-bar span { background: linear-gradient(90deg, var(--blood), #FF4D6A, var(--blueprint-deep)); box-shadow: 0 0 10px rgba(255, 77, 106, 0.6); border-radius: 999px; }
.composer.dropping { background: var(--tint); }
.q-opt span { background: var(--raised); border-radius: 10px; }
.q-opt input:checked + span { color: var(--ink); }
.qcard { border-left: 1px solid var(--rule); box-shadow: inset 3px 0 0 var(--blueprint), 0 24px 48px -32px rgba(0, 0, 0, 0.9); }
.more { background: var(--paper); }
.more-nav { background: var(--white); border-right-color: rgba(255, 255, 255, 0.06); }
.more-nav button { border-radius: 8px; color: var(--graphite); }
.more-nav button:hover { background: var(--raised); color: var(--ink); }
.more-nav button[aria-current="page"] { color: var(--ink); }
.more-note { box-shadow: inset 3px 0 0 var(--blueprint), 0 24px 48px -32px rgba(0, 0, 0, 0.9); }
.more-bars .bar { background: var(--tint); }
.meter { background: var(--raised); }
.meter span { background: linear-gradient(90deg, var(--blood), var(--blueprint)); }
.more-flash, .more-error { border-radius: 8px; }
@media (max-width: 900px) {
  .tabs { background: var(--white); border-bottom-color: rgba(255, 255, 255, 0.06); }
  .steps { gap: 10px; }
  .steps li { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 640px) {
  .list-stack tr { border-bottom-color: var(--rule); }
  .hero { padding: 40px 0 48px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero .btn-primary { animation: ember 4s ease-in-out infinite; }
}
@keyframes ember { 50% { box-shadow: 0 0 0 1px rgba(255, 77, 106, 0.35), 0 10px 36px -6px rgba(200, 16, 46, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.18); } }
/* Later .btn rules above would otherwise flatten Publish. */
.btn-publish { background: linear-gradient(180deg, #FFC34D, var(--pencil)); border-color: var(--pencil); color: var(--on-pencil); }
.btn-publish:hover { background: linear-gradient(180deg, var(--pencil), var(--pencil-deep)); border-color: var(--pencil-deep); color: var(--on-pencil); }
.hero-copy h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.stat-row dd, .more-stat .v { font-family: var(--body); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
@media (max-width: 640px) {
  .topbar { position: static; }
  .bar { gap: 10px; padding: 8px 12px; }
  .bar .wordmark.small img { width: 32px; object-fit: cover; object-position: left center; } /* just the mark */
  .bar .bar-help { margin-right: 0; } /* the bar's gap is enough: Tour, Help, credits and Hosting fit at 375 */
}

/* Domain panel */
.dom-ok, .dom-wait { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
.dom-ok { color: var(--ok); }
.dom-wait { color: var(--graphite); }
.dom-ok::before, .dom-wait::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dom-ok::before { box-shadow: 0 0 8px var(--ok); }
.more-stat .dom-ok, .more-stat .dom-wait { font-size: 1.1rem; margin-top: 4px; }
.dom-val { overflow-wrap: anywhere; max-width: 46ch; }
@media (max-width: 640px) {
  .dom-records thead { display: none; }
  .dom-records table, .dom-records tbody, .dom-records tr, .dom-records td { display: block; width: 100%; }
  .dom-records tr { padding: 10px 12px; border-bottom: 1px solid var(--rule); }
  .dom-records td { border: 0; padding: 2px 0; max-width: none; }
  .dom-records td:first-child, .dom-records td:nth-child(2) { display: inline-block; width: auto; margin-right: 10px; }
  .dom-records .acts { padding-top: 8px; }
}
#edit-text[aria-pressed="true"] { background: var(--blood); border-color: var(--blood); color: #fff; }
.notice-sheet { border-color: rgba(200, 16, 46, 0.55); box-shadow: 0 0 0 1px rgba(200, 16, 46, 0.25), 0 0 40px rgba(200, 16, 46, 0.12); }
/* Inbox, brand, extras, payments, team (2026-10-17) */
.nav-count { display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 6px; border-radius: 999px; background: var(--blood); color: #fff; font: 700 0.72rem/1.5 var(--body); text-align: center; vertical-align: 1px; }
.more-row.tight.wrap { flex-wrap: wrap; }
.inbox-item { padding: 0; }
.inbox-item > summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.inbox-item > summary::-webkit-details-marker { display: none; }
.inbox-item > summary:focus-visible { outline: 2px solid var(--blueprint); outline-offset: -2px; }
.inbox-item[open] > summary { border-bottom: 1px solid var(--rule); }
.inbox-item > :not(summary) { margin: 12px 16px; }
.inbox-item.unread { border-color: rgba(255, 77, 106, 0.55); }
.inbox-item.unread > summary strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blueprint); margin-right: 8px; vertical-align: 1px; }
.inbox-when { margin-left: auto; }
.inbox-fields dd { white-space: pre-wrap; }
.brand-form .more-card { margin-bottom: 12px; }
.check-row { margin-bottom: 10px; }
.steps { margin: 0; padding-left: 20px; }
.steps li { margin-bottom: 6px; }
.pay-head, .pay-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.5fr) minmax(0, 2fr) auto; gap: 8px; align-items: center; }
.pay-head { font-size: 0.85rem; color: var(--graphite); margin-bottom: 6px; }
.pay-row { margin-bottom: 8px; }
.pay-row input { min-width: 0; }
@media (max-width: 700px) {
  .pay-head { display: none; }
  .pay-row { grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr); padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
  .pay-row input[type=url] { grid-column: 1 / -1; }
  .inbox-when { margin-left: 0; width: 100%; }
}
.more-nav { overflow-y: auto; }
/* Templates and remix */
.tpl-head { margin: 28px 0 4px; font-size: 1.3rem; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 12px; }
.tpl-card { background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius, 12px); overflow: hidden; display: flex; flex-direction: column; }
.tpl-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; border-bottom: 1px solid var(--rule); }
.tpl-thumb iframe { position: absolute; top: 0; left: 0; width: 400%; height: 400%; border: 0; transform: scale(0.25); transform-origin: 0 0; pointer-events: none; }
.tpl-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tpl-body h4 { margin: 0; font-size: 1.05rem; }
.tpl-body p { margin: 0; }
.tpl-cat { font-size: 0.78rem; color: var(--blueprint); font-weight: 600; }
.tpl-use { margin-top: auto; padding-top: 8px; display: flex; gap: 12px; align-items: center; }
.section-h { margin: 32px 0 12px; }
.remix-frame { margin-top: 20px; border: 1px solid var(--rule); border-radius: var(--radius, 12px); overflow: hidden; height: min(70vh, 720px); background: #fff; }
.remix-frame iframe { width: 100%; height: 100%; border: 0; }
.inline-details { display: inline-block; }
.inline-details summary { cursor: pointer; list-style: none; display: inline; }
.inline-details form { display: grid; gap: 6px; margin-top: 6px; min-width: 220px; }
.buy-list, .buy-orders { list-style: none; margin: 12px 0 0; padding: 0; }
.buy-list li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.buy-list li strong { flex: 1 1 180px; overflow-wrap: anywhere; }
.buy-list li.taken { opacity: 0.55; }
.buy-orders li { padding: 6px 0; }
#buy-q { flex: 1; min-width: 0; }

/* More menu groups */
.more-nav { gap: 0; }
.more-group { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; }
.more-group + .more-group { border-top: 1px solid var(--rule); padding-top: 10px; }
.more-group-h { margin: 0 0 2px; padding: 0 12px; font: 700 0.7rem var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite); }
.more-group-note { margin: 0; padding: 4px 12px; font-size: 0.8rem; color: var(--graphite); }
@media (max-width: 900px) {
  .more-group { flex-direction: row; align-items: center; padding: 0 6px 0 0; flex-shrink: 0; }
  .more-group + .more-group { border-top: 0; border-left: 1px solid var(--rule); padding: 0 6px 0 8px; }
  .more-group-h, .more-group-note { display: none; }
}
@media (min-width: 901px) { .more-group .more-nav button, .more-group button { min-height: 34px; padding: 7px 12px; } .more-group { padding-bottom: 8px; } .more-group + .more-group { padding-top: 8px; } }

/* Hexwork logo: the official lockup (hexwork_logo() in view.php), its mark about as tall as the old 30px icon */
.wordmark img { display: block; height: 36px; width: auto; max-width: none; }
.wordmark.small img { height: 32px; }
.wordmark .wordmark-sub { font-family: var(--body); letter-spacing: 0; }

/* Security check */
.sec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sec-item { background: var(--white); border: 1px solid var(--rule); border-left: 4px solid var(--rule); border-radius: 8px; padding: 12px 14px; }
.sec-item p { margin: 0 0 6px; }
.sec-high { border-left-color: var(--blood); }
.sec-medium { border-left-color: var(--blueprint); }
.sec-low { border-left-color: #7C7480; }
.sec-ignored { opacity: .7; }
.sec-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.sec-pill { font: 700 0.72rem var(--body); text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; background: var(--raised, #221C22); color: var(--ink); }
.sec-high .sec-pill { background: var(--blood); color: #fff; }
.sec-medium .sec-pill { background: rgba(255,77,106,.14); color: var(--blueprint-deep); }
.more-stat .v.sec-bad { color: var(--fault); }
.more-stat .v.sec-good { color: #4ADE80; }

/* Builder power picker (Charm, Jinx, Hex) */
.tier-select { width: auto; min-height: 34px; padding: 4px 30px 4px 12px; font: 600 0.85rem var(--body); border-radius: 999px; }

.sec-review { border-color: rgba(200, 16, 46, 0.45); }
.sec-running::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--blood); vertical-align: middle; animation: blink 1s infinite; }
.sec-ok { color: #4ADE80; font-weight: 600; }
.sec-review .sec-list { margin-top: 10px; }

/* Website or app picker on the dashboard */
.kind-pick { border: 0; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kind-pick legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.kind-pick label { position: relative; margin: 0; }
.kind-pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.kind-pick label > span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); cursor: pointer; }
.kind-pick small { color: var(--graphite); font-size: 0.82rem; }
.kind-pick input:checked + span { border-color: var(--blueprint); box-shadow: 0 0 0 1px var(--blueprint) inset; }
.kind-pick input:focus-visible + span { outline: 2px solid #FF4D6A; outline-offset: 2px; }
@media (max-width: 700px) { .kind-pick { grid-template-columns: minmax(0, 1fr); } }
.plan-actions { margin-top: 10px; }
.plan-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-buttons .build-plan { margin-top: 0; }
.plan-estimate { margin: 8px 0 0; font-size: .85rem; color: var(--graphite); }
.plan-hand { display: inline-block; margin: 4px 0 0; padding: 4px 0; min-height: 32px; background: none; border: 0; color: var(--blueprint); font: inherit; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.plan-hand:hover { color: #fff; }
.plan-hand:focus-visible { outline: 2px solid var(--blueprint); outline-offset: 2px; border-radius: 4px; }
.ok-line { color: var(--ok); }
/* Visual editor panel */
.vis-panel { position: absolute; top: 14px; right: 14px; width: 280px; max-height: calc(100% - 28px); overflow: auto; background: var(--raised); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.45); z-index: 5; display: grid; gap: 10px; }
.vis-panel[hidden] { display: none; }
.vis-head { display: flex; justify-content: space-between; align-items: center; }
.vis-snippet { margin: 0; font-size: .82rem; color: var(--graphite); overflow-wrap: anywhere; }
.vis-row { display: grid; gap: 4px; }
.vis-row > label { font-size: .78rem; color: var(--graphite); font-weight: 600; }
.vis-color { display: flex; gap: 8px; align-items: center; }
.vis-color input[type=color] { width: 44px; height: 30px; padding: 0; border: 1px solid var(--rule-strong); border-radius: 6px; background: none; }
.vis-range { display: flex; gap: 8px; align-items: center; }
.vis-range input { flex: 1; }
.vis-range output { min-width: 44px; font-size: .8rem; text-align: right; }
.vis-seg button { font-size: .8rem; }
.vis-actions { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--rule); padding-top: 10px; }
.vis-danger { color: var(--fault); }
.vis-link { display: grid; gap: 6px; border-top: 1px solid var(--rule); padding-top: 10px; }
.vis-check { font-size: .82rem; }
.btn-tiny { padding: 4px 8px; font-size: .75rem; }
@media (max-width: 700px) { .vis-panel { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 55%; } }
.vis-none { font-size: .78rem; color: var(--graphite); }
@media (min-width: 701px) { .sheet-frame.vis-open { padding-right: 308px; } }
/* Tool rail: always-visible site tools beside the preview */
.preview-body { flex: 1; min-height: 0; display: flex; }
.preview-body > .more, .preview-body > .sheet-frame { flex: 1; min-width: 0; }
.tool-rail { width: 76px; flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 6px; border-right: 1px solid var(--rule); background: var(--white); overflow-y: auto; scrollbar-width: thin; }
.tool-rail hr { border: 0; border-top: 1px solid var(--rule); margin: 6px 8px; flex-shrink: 0; }
.tool-rail button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 7px; border: 0; border-radius: 8px; background: none; color: var(--graphite); font: 600 0.68rem/1.1 var(--body); cursor: pointer; flex-shrink: 0; }
.tool-rail button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tool-rail button:hover { background: var(--raised); color: var(--ink); }
.tool-rail button[aria-current="page"] { background: var(--tint); color: var(--ink); box-shadow: inset 3px 0 0 var(--blueprint); }
.tool-rail button:focus-visible { outline: 2px solid var(--blueprint); outline-offset: -2px; }
.tool-rail .nav-count { position: absolute; top: 3px; right: 8px; margin: 0; min-width: 17px; padding: 0 4px; font-size: 0.64rem; }
.more-main { flex: 1; min-width: 0; }
@media (max-width: 700px) {
  .preview-body { flex-direction: column; }
  .tool-rail { width: auto; flex-direction: row; padding: 6px; border-right: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; overflow-y: hidden; }
  .tool-rail hr { border-top: 0; border-left: 1px solid var(--rule); margin: 6px 4px; }
  .tool-rail button { min-width: 64px; }
  .tool-rail button[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--blueprint); }
}
/* Launch checklist chip */
.preview-bar { position: relative; }
.launch-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px 4px 6px; border: 1px solid var(--pencil); border-radius: 999px; background: rgba(255, 178, 36, 0.1); color: var(--ink); font: 700 0.85rem var(--body); cursor: pointer; }
.launch-chip:hover, .launch-chip[aria-expanded="true"] { background: rgba(255, 178, 36, 0.2); }
.launch-chip[hidden] { display: none; }
.launch-ring { --p: 0; width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(var(--pencil) calc(var(--p) * 1%), var(--rule-strong) 0); display: inline-grid; place-items: center; }
.launch-ring::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--white); }
.launch-pop { position: absolute; top: calc(100% + 6px); left: 16px; width: min(380px, calc(100vw - 32px)); z-index: 30; background: var(--raised); border: 1px solid var(--rule-strong); border-radius: 12px; padding: 14px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); }
.launch-title { margin: 0 0 10px; font: 800 1rem var(--body); }
.launch-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.launch-step { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; }
.launch-step.next { background: var(--tint); }
.launch-mark { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--rule-strong); display: grid; place-items: center; font: 800 0.75rem var(--body); }
.launch-step.done .launch-mark { background: var(--ok); border-color: var(--ok); color: #06210f; }
.launch-step.done strong { color: var(--graphite); font-weight: 600; }
.launch-text { flex: 1; display: grid; gap: 2px; }
.launch-text strong { font-size: 0.9rem; }
.launch-text small { color: var(--graphite); font-size: 0.78rem; }
/* Builder power picker */
.power { position: relative; }
.power-btn { display: grid; text-align: left; gap: 1px; min-height: 40px; padding: 4px 12px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--white); color: var(--ink); cursor: pointer; font-family: var(--body); }
.power-btn:hover, .power-btn[aria-expanded="true"] { border-color: var(--blueprint); }
.power-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--graphite); }
.power-name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.9rem; }
.power-dots { color: var(--pencil); letter-spacing: 1px; font-size: 0.6rem; }
.power-pop { position: absolute; bottom: calc(100% + 8px); left: 0; width: min(340px, calc(100vw - 24px)); z-index: 40; background: var(--raised); border: 1px solid var(--rule-strong); border-radius: 12px; padding: 14px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); display: grid; gap: 8px; }
.power-pop[hidden] { display: none; }
.power-title { margin: 0; font: 800 1rem var(--body); }
.power-sub { margin: 0 0 4px; font-size: 0.82rem; color: var(--graphite); }
.power-card { border: 1px solid var(--rule-strong); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.power-card.on { border-color: var(--blueprint); background: var(--tint); }
.power-card.locked { opacity: 0.75; }
.power-card p { margin: 0; font-size: 0.82rem; color: var(--graphite); }
.power-top { display: flex; align-items: center; gap: 8px; }
.power-cost { margin-left: auto; font-size: 0.75rem; font-weight: 700; color: var(--pencil); }
.power-current { font-size: 0.78rem; font-weight: 700; color: var(--ok); }
.power-upgrade { font-size: 0.8rem; font-weight: 700; }
.power-card .btn { justify-self: start; }
/* Tour */
.bar-help { border: 1px solid var(--rule-strong); background: none; color: var(--ink); border-radius: 999px; padding: 6px 12px; font: 600 0.82rem var(--body); cursor: pointer; margin-right: 8px; }
.bar-help:hover { border-color: var(--blueprint); }
.tour { position: fixed; inset: 0; z-index: 1000; }
.tour-hole { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(5, 3, 6, 0.72); outline: 2px solid var(--blueprint); transition: all 0.25s ease; pointer-events: none; }
.tour-tip { position: fixed; background: var(--raised); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 12px; padding: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55); transition: top 0.25s ease, left 0.25s ease; }
.tour-tip h2 { margin: 2px 0 6px; font: 800 1.05rem var(--body); }
.tour-tip p { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.45; }
.tour-tip .tour-count { margin: 0; font-size: 0.72rem; font-weight: 700; color: var(--blueprint); text-transform: uppercase; letter-spacing: 0.06em; }
.tour-row { display: flex; gap: 8px; justify-content: flex-end; }
.tour-row .btn:first-child { margin-right: auto; }
/* Connections */
.conn-form { display: grid; gap: 6px; max-width: 520px; }
.conn-card.conn-on { border-color: rgba(74, 222, 128, 0.45); }
.conn-saved { border-top: 1px solid var(--rule); padding-top: 8px; margin-top: 4px; }
.conn-code { max-height: 220px; overflow: auto; font: 0.75rem/1.45 var(--mono); background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 10px; white-space: pre; }
.conn-help summary, .conn-card details summary { cursor: pointer; font-weight: 600; margin: 4px 0; }

/* ---- Home: sidebar of projects + one big prompt box ---- */
.home-body { min-height: 100vh; }
.home-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.side { background: #0C090B; border-right: 1px solid var(--rule); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px; }
.side-top .wordmark { font-size: 1.25rem; text-decoration: none; }
.side-toggle { display: none; background: none; border: 0; color: var(--ink); padding: 6px; border-radius: 8px; cursor: pointer; }
.side-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 12px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.side-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 0.92rem; font-weight: 500; }
.side-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--graphite); flex: none; }
.side-link:hover, .side-link[aria-current="page"] { background: var(--raised); color: var(--ink); }
.side-h { font-family: var(--body); font-size: 0.75rem; font-weight: 600; color: var(--graphite); letter-spacing: 0.02em; margin: 10px 10px 4px; }
.side-list { list-style: none; margin: 0 0 8px; padding: 0; }
.side-list a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 0.88rem; }
.side-list a:hover { background: var(--raised); }
.side-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--rule-strong); }
.dot-live { background: var(--ok); }
.dot-suspended { background: var(--fault); }
.side-foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.side-credits { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: linear-gradient(135deg, rgba(200, 16, 46, 0.22), rgba(255, 178, 36, 0.08)); color: var(--ink); text-decoration: none; font-size: 0.88rem; }
.side-credits span { color: var(--graphite); font-size: 0.78rem; }
.side-credits:hover { border-color: var(--rule-strong); color: var(--ink); }
.side-out { font-size: 0.82rem; color: var(--graphite); padding: 4px 12px; }
.home-main { position: relative; min-width: 0; padding: 16px 24px 48px; background:
  radial-gradient(60% 45% at 50% 100%, rgba(255, 106, 0, 0.55), transparent 70%),
  radial-gradient(70% 55% at 20% 85%, rgba(200, 16, 46, 0.75), transparent 70%),
  radial-gradient(70% 55% at 85% 80%, rgba(255, 46, 91, 0.7), transparent 70%),
  radial-gradient(55% 45% at 50% 40%, rgba(120, 20, 60, 0.55), transparent 75%),
  #0B080A;
  background-attachment: fixed; }
.home-main .flash, .home-notice { max-width: 760px; margin: 0 auto 12px; }
.hero-build { min-height: calc(100vh - 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 0; }
.hero-build h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 22px; }
.hb-box { width: 100%; max-width: 720px; background: rgba(19, 16, 19, 0.92); border: 1px solid var(--rule-strong); border-radius: 22px; padding: 16px 16px 12px 20px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); text-align: left; backdrop-filter: blur(6px); }
.hb-box:focus-within { border-color: #FF4D6A; }
.hb-box textarea { width: 100%; border: 0; background: transparent; color: var(--ink); font: 400 1.05rem/1.5 var(--body); resize: none; padding: 0; min-height: 3.2em; box-shadow: none; }
.hb-box textarea:focus { outline: none; box-shadow: none; }
.hb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.hb-hint { color: var(--graphite); font-size: 0.8rem; }
.hb-go { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--blood); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.hb-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hb-go:hover { background: var(--blood-deep); }
.hb-ideas { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 720px; }
.hb-ideas button { background: rgba(19, 16, 19, 0.7); border: 1px solid var(--rule-strong); color: var(--ink); border-radius: 999px; padding: 7px 14px; font: 500 0.85rem var(--body); cursor: pointer; }
.hb-ideas button:hover { border-color: #FF4D6A; }
.home-tpl { max-width: 1100px; margin: 0 auto; background: rgba(9, 7, 10, 0.88); border: 1px solid var(--rule); border-radius: 20px; padding: 22px 22px 26px; }
.home-tpl .tpl-head { margin-top: 0; }
.home-tpl .tpl-body h3 { margin: 0; font-size: 1.05rem; }
@media (max-width: 800px) {
  .home-shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: sticky; top: 0; height: auto; z-index: 20; border-right: 0; border-bottom: 1px solid var(--rule); }
  .side-top { padding: 10px 16px; }
  .side-toggle { display: block; }
  .side-body { display: none; max-height: calc(100vh - 56px); }
  .side.open .side-body { display: flex; }
  .home-main { padding: 12px 16px 40px; }
  .hero-build { min-height: calc(100vh - 120px); padding: 24px 0; }
  .hb-hint { display: none; }
  .home-tpl { padding: 16px; }
}
.ai-left { font-size: 1.4rem; margin-bottom: 4px; }
.ai-left.low strong { color: var(--fault); }
.row-tight { display: flex; gap: 8px; align-items: center; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: 12px 0; }
.free-row{display:flex;align-items:center;gap:.4rem}.free-row input{flex:1;min-width:0}

/* In-app confirm / prompt dialogs (dialog.js) */
.hx-dialog { border: 1px solid var(--rule-strong); border-radius: 14px; background: var(--raised); color: var(--ink); padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); animation: hx-dlg-in .14s ease-out; }
.hx-dialog::backdrop { background: rgba(5, 3, 5, 0.72); backdrop-filter: blur(3px); }
.hx-dialog.out { opacity: 0; transform: scale(.98); transition: opacity .12s, transform .12s; }
.hx-dlg-body { padding: 22px 22px 18px; margin: 0; }
.hx-dlg-title { font: 700 1.15rem/1.3 var(--display); margin: 0 0 8px; }
.hx-dlg-text { margin: 0 0 10px; color: var(--graphite); overflow-wrap: anywhere; }
.hx-dlg-input { width: 100%; margin-top: 4px; }
.hx-dlg-err { color: var(--fault); font-size: .875rem; margin: 6px 0 0; min-height: 1em; }
.hx-dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.btn-danger-solid { background: var(--blood); border-color: var(--blood); color: #fff; }
.btn-danger-solid:hover { background: var(--blood-deep); border-color: var(--blood-deep); }
@keyframes hx-dlg-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hx-dialog { animation: none; } .hx-dialog.out { transition: none; } }

/* Little "?" help icons with a hover/focus bubble */
.power { display: flex; align-items: center; gap: 6px; }
.hint-tip { position: relative; display: inline-flex; }
.hint-q { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--rule-strong); background: none; color: var(--graphite); font: 700 0.75rem/1 var(--body); cursor: help; display: grid; place-items: center; }
.hint-q:hover, .hint-q:focus-visible, .hint-tip.open .hint-q { color: var(--ink); border-color: var(--blueprint); }
.hint-bubble { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px); width: 260px; padding: 10px 12px; border-radius: 10px; background: var(--raised); border: 1px solid var(--rule-strong); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); color: var(--graphite); font-size: 0.82rem; line-height: 1.45; opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 45; pointer-events: none; }
.hint-bubble strong { color: var(--ink); }
.hint-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--rule-strong); }
.hint-tip:hover .hint-bubble, .hint-q:focus-visible + .hint-bubble, .hint-tip.open .hint-bubble { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (max-width: 700px) { .hint-bubble { left: auto; right: -8px; transform: translateY(4px); } .hint-tip:hover .hint-bubble, .hint-q:focus-visible + .hint-bubble, .hint-tip.open .hint-bubble { transform: none; } .hint-bubble::after { left: auto; right: 13px; } }

/* Email panel */
.mail-steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.mail-steps li { padding-left: 2px; }
.mini-select { font: inherit; font-size: 0.85rem; padding: 2px 4px; min-height: 0; width: auto; display: inline-block; }
.check-line { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.check-line input { width: auto; margin: 0; }
#mail-setup .seg { flex-wrap: wrap; align-self: flex-start; }
.more-table td.mail-acts { white-space: normal; }
.mail-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.more-table .mail-acts > * + * { margin-left: 0; }
.more-card .more-scroll + .more-form { margin-top: 12px; }
.billing-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px 32px; }
.billing-actions h2 { margin-top: 0; }
.plan-choose { text-align: right; white-space: nowrap; }
.plan-current { font-weight: 700; color: var(--graphite); }

.ref-row{display:flex;gap:8px;align-items:center;max-width:560px}.ref-row input{flex:1;min-width:0;margin:0}
.content-group{margin:18px 0 6px;padding:14px 16px;border:1px solid var(--rule);border-radius:12px}
.content-group h3{margin:0 0 10px;font-size:15px}
.content-field{margin:0 0 10px}.content-field label{display:block;margin:0 0 4px}
.content-field input,.content-field textarea{width:100%;margin:0}
.content-field .content-heading{font-weight:700}
.content-bar{position:sticky;bottom:0;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 0;background:var(--white);border-top:1px solid var(--rule);margin-top:12px}
.content-bar .more-flash{margin:0}
.help-fab{position:fixed;right:18px;bottom:18px;z-index:900;padding:10px 18px;border-radius:999px;border:1px solid var(--rule-strong);background:var(--raised);color:var(--ink);font:600 14px/1 var(--body);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.help-fab:hover{border-color:var(--blueprint)}
.help-box{position:fixed;right:18px;bottom:18px;z-index:901;width:380px;max-width:calc(100vw - 24px);height:520px;max-height:calc(100vh - 36px);display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule-strong);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden}
.help-box[hidden]{display:none}
.help-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--rule)}
.help-head h2{margin:0;font-size:17px}
.help-x{background:none;border:0;color:var(--graphite);font-size:24px;line-height:1;cursor:pointer;padding:4px 8px}
.help-log{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.help-msg{max-width:88%;padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.5;white-space:pre-wrap}
.help-assistant{align-self:flex-start;background:var(--raised)}
.help-user{align-self:flex-end;background:var(--tint);border:1px solid rgba(255,77,106,.3)}
.help-wait{color:var(--graphite)}.help-err{color:var(--fault)}
.help-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--rule);align-items:flex-end}
.help-form textarea{flex:1;margin:0;resize:none;min-height:42px}
.help-foot{margin:0;padding:0 16px 12px;font-size:13px;color:var(--graphite)}
@media (max-width:560px){.help-box{right:12px;bottom:12px;height:70vh}.help-fab{right:12px;bottom:12px}}

/* Admin: search, filter tabs and the Manage menu on long lists. */
.admin-find { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.admin-find input[type="search"] { flex: 1 1 280px; max-width: 460px; margin: 0; }
.admin-tabs { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.admin-tabs a { text-decoration: none; color: var(--graphite); font-weight: 600; }
.admin-tabs a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 10px; }
.admin-sites th[scope="row"] { min-width: 180px; }
.admin-sites td, .admin-sites th { overflow-wrap: anywhere; }
.admin-manage { width: 1%; text-align: right; white-space: nowrap; }
.act-menu { position: relative; display: inline-block; }
.act-menu > summary { list-style: none; cursor: pointer; }
.act-menu > summary::-webkit-details-marker { display: none; }
.act-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; display: grid; gap: 10px; padding: 12px 14px; text-align: left;
  background: var(--white); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6); }
.act-list form { margin: 0; }
.act-sub summary { cursor: pointer; color: var(--blueprint); text-decoration: underline; }
.act-sub form { display: grid; gap: 6px; margin-top: 8px; }
.tpl-edit { display: grid; grid-template-columns: minmax(90px, 0.6fr) minmax(140px, 1.4fr) auto; gap: 6px; align-items: center; }
.tpl-edit input { margin: 0; }
@media (max-width: 640px) {
  .admin-manage { width: auto; text-align: left; }
  .act-list { left: 0; right: auto; }
  .tpl-edit { grid-template-columns: 1fr; }
}

.builder-toasts { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); display: grid; gap: 8px; }
.builder-toasts .flash { margin: 0; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7); display: flex; gap: 12px; justify-content: space-between; align-items: baseline; }
.addon-card { margin-bottom: 12px; }
.addon-card.addon-on { border-color: var(--ok); }
.addon-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.addon-head h3 { margin: 0; }
.addon-price { font-weight: 700; white-space: nowrap; }
.addon-card textarea, .addon-card input { width: 100%; }
.addon-card .more-row input { width: auto; flex: 1 1 160px; }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 10px 0; }
.logo-option { margin: 0; border: 1px solid var(--rule); border-radius: 6px; padding: 10px; background: repeating-conic-gradient(#2a2a2e 0% 25%, #1e1e22 0% 50%) 50% / 16px 16px; }
.logo-option img { width: 100%; height: auto; display: block; aspect-ratio: 1; object-fit: contain; }
.logo-option figcaption { margin-top: 8px; flex-wrap: wrap; }
.list.admin-sites { overflow: visible; }
.act-menu.up .act-list { top: auto; bottom: calc(100% + 6px); }

.home-page { max-width: 980px; margin: 0 auto; padding-top: 12px; }
.connect-sheet { min-height: 320px; }
.checkout-sheet { max-width: 720px; margin: 0 auto; background: #fff; border-radius: 12px; padding: 12px; min-height: 420px; }

.credit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; margin-bottom: 8px; border: 1px solid rgba(255, 178, 36, 0.45); border-radius: 10px; background: rgba(255, 178, 36, 0.08); font-size: 0.9rem; }
.credit-bar-text { font-weight: 600; }
.buy-card { margin-top: 10px; }
.buy-compact { margin-top: 0; }
.plan-actions .buy-compact { margin-top: 8px; }
.buy-note { margin: 0 0 8px; color: var(--graphite); font-size: 0.9rem; }
.buy-row { display: flex; flex-wrap: wrap; gap: 8px; }
.buy-form { margin: 0; }
/* Velox switch inside the Hex spell card */
.velox-row { border-top: 1px solid var(--rule-strong); padding-top: 8px; display: grid; gap: 4px; }
.velox-row p { margin: 0; font-size: 0.8rem; color: var(--graphite); }
.velox-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.velox-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.velox-track { width: 34px; height: 20px; border-radius: 999px; background: var(--rule-strong); position: relative; flex: none; transition: background .15s; }
.velox-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.velox-switch input:checked + .velox-track { background: var(--blueprint); }
.velox-switch input:checked + .velox-track::after { transform: translateX(14px); }
.velox-switch input:focus-visible + .velox-track { outline: 2px solid var(--blueprint); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .velox-track, .velox-track::after { transition: none; } }
/* Composer row: Send always stays on the same row as the spell picker. */
.composer-row { flex-wrap: nowrap; container-type: inline-size; }
.composer-row .file-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.composer-row .power { min-width: 0; flex: 0 1 auto; display: flex; align-items: center; gap: 6px; }
.composer-row .power-btn { min-width: 0; max-width: 100%; }
.composer-row .power-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer-row #send, .composer-row #stop { flex: none; }
@container (max-width: 400px) {
  .composer-row .file-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .composer-row .file-btn { padding-left: 10px; padding-right: 10px; }
}
/* The attach button is always just a paperclip; its words are for screen readers. */
.composer-row .file-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.composer-row .file-btn { padding-left: 10px; padding-right: 10px; }
/* Modes fill the composer's width as three equal tabs, with a one-line note under them that never wraps. */
.composer .modes { display: grid; grid-template-columns: repeat(3, 1fr); flex-wrap: nowrap; }
.composer .modes label span { display: flex; justify-content: center; width: 100%; box-sizing: border-box; }
.composer .modes label:not(:first-of-type) span { margin-left: -1px; width: calc(100% + 1px); }
.composer .mode-note { grid-column: 1 / -1; display: block; margin: 6px 0 0; min-height: 1.3em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
/* Spell picker sits centred between the paperclip and Send, and shrinks evenly when space is tight. */
.composer-row .file-btn { margin-right: 0; }
.composer-row .power { flex: 1 1 0; justify-content: center; }
.composer-row .power-btn { text-align: center; justify-items: center; }
.composer-row .power::before { content: ""; width: 22px; flex: none; } /* balances the "?" so the spell button itself is centred */
/* Checkout pop-up */
.hx-dialog.hx-checkout { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; padding: 0 0 12px; }
.hx-co-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 4px; position: sticky; top: 0; background: var(--raised); z-index: 1; }
.hx-co-head h2 { margin: 0; font-size: 1.15rem; }
.hx-co-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule-strong); background: none; color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.hx-co-close:hover, .hx-co-close:focus-visible { border-color: var(--blueprint); }
.hx-co-note { margin: 0 16px 10px; font-size: 0.82rem; color: var(--graphite); }
.hx-checkout .checkout-sheet { margin: 0 12px; min-height: 200px; }
.hx-co-wait { color: #555; padding: 16px; margin: 0; } /* on Stripe's white sheet (.checkout-sheet), so a dark grey */
/* Bookings tool */
.bk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bk-item { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; border: 1px solid var(--rule-strong); border-radius: 10px; padding: 10px 12px; }
.bk-item.bk-pending { border-color: var(--blueprint); }
.bk-item.bk-blocked { opacity: 0.8; border-style: dashed; }
.bk-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bk-tag { font-size: 0.75rem; font-weight: 700; color: var(--graphite); }
.bk-pending .bk-tag { color: var(--blueprint-deep); }
.bk-block { margin-top: 10px; }
.bk-block summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; }
.bk-svcs { display: grid; gap: 6px; }
.bk-svc { display: grid; grid-template-columns: minmax(0, 2.2fr) 74px minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 6px; align-items: center; }
.bk-svc input { margin: 0; min-width: 0; }
.bk-head span { font-size: 0.78rem; font-weight: 700; color: var(--graphite); }
.bk-hours { display: grid; gap: 6px; }
.bk-hour { display: grid; grid-template-columns: 130px 1fr auto 1fr; gap: 8px; align-items: center; }
.bk-hour input[type=time] { margin: 0; }
.bk-hour input:disabled { opacity: 0.4; }
.bk-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 10px; }
.bk-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 0.85rem; }
.bk-chip button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 1rem; width: 24px; height: 24px; border-radius: 50%; }
.bk-chip button:hover, .bk-chip button:focus-visible { background: var(--tint); }
@media (max-width: 520px) { .bk-svc { grid-template-columns: 1fr 64px; } .bk-head { display: none; } .bk-hour { grid-template-columns: 1fr 1fr auto 1fr; } .bk-item { flex-direction: column; } }
/* Tool panels: cards flow into columns on wide screens instead of one long column.
   Anything that isn't a card (messages, intros, forms) and cards holding tables, lists or wide editors span the full width. */
.more-content { max-width: 1400px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); align-items: start; gap: 14px; }
.more-content > :not(.more-card), .more-content > .more-card.wide,
.more-content > .more-card:has(.more-scroll, table, .logo-grid, .bk-list, .bk-svcs, .pay-rows, .inbox-item, .more-table) { grid-column: 1 / -1; }
.more-content > .more-flash:empty, .more-content > p:empty { display: none; }
.more-content .addon-card, .brand-form .more-card { margin-bottom: 0; }
.brand-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 14px; align-items: start; }
.brand-form > :not(.more-card) { grid-column: 1 / -1; }
/* Pop-ups inside tool tabs */
.hx-dialog.hx-modal { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; padding: 0 0 16px; }
.hx-modal-body { padding: 4px 16px 0; display: grid; gap: 12px; }
.hx-modal-body .more-flash:empty { display: none; }
.hx-modal-body form { display: grid; gap: 10px; }
.hx-modal-body input { width: 100%; }
.hx-modal-body input[type=checkbox], .hx-modal-body input[type=radio] { width: auto; }
/* Connect: tiles that open a pop-up */
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.conn-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 10px 12px; align-items: start; text-align: left; padding: 14px; border: 1px solid var(--rule-strong); border-radius: 14px; background: var(--white); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .15s, transform .15s; }
.conn-tile:hover, .conn-tile:focus-visible { border-color: var(--blood); transform: translateY(-1px); }
.conn-tile.on { border-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.conn-tile-text { display: grid; gap: 3px; }
.conn-tile-text strong { font-size: 0.98rem; }
.conn-tile-text span { font-size: 0.8rem; color: var(--graphite); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.conn-pill { grid-column: 2; justify-self: start; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--rule-strong); color: var(--ink); }
.conn-pill.ok { border-color: var(--ok); color: var(--ok); }
.conn-pill.bad { border-color: var(--blueprint); color: var(--blueprint-deep); }
.conn-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); flex: none; }
.conn-ico svg { width: 22px; height: 22px; }
.conn-modal-top { display: flex; gap: 12px; align-items: flex-start; }
.conn-modal-top p { margin: 0; color: var(--graphite); }
.conn-saved { border: 1px solid var(--rule-strong); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .conn-tile { transition: none; } .conn-tile:hover { transform: none; } }
/* Content tab: page sections flow into columns too. */
.more-content > .content-group { grid-column: auto; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; margin: 0; }
.more-content > .content-bar { grid-column: 1 / -1; }
/* Empty states ("comes with hosting", "no messages yet"): a centred, on-brand panel instead of a small box in the corner. */
.more-content > .more-card.more-note:only-child, .more-content > .more-note.more-empty {
  grid-column: 1 / -1; justify-self: center; width: min(100%, 620px); margin-top: 6vh; text-align: center; padding: 40px 32px 34px;
  border: 1px solid var(--rule-strong); border-radius: 18px; box-shadow: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(200, 16, 46, 0.18), transparent 60%), radial-gradient(80% 60% at 50% 120%, rgba(255, 77, 106, 0.08), transparent 70%), var(--white);
}
.more-content > .more-card.more-note:only-child::before, .more-content > .more-note.more-empty::before {
  content: ""; display: block; width: 54px; height: 54px; margin: 0 auto 16px; background: linear-gradient(135deg, #FF4D6A, #C8102E 55%, #9F1239);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}
.more-content > .more-card.more-note:only-child p, .more-content > .more-note.more-empty p { font-size: 1rem; line-height: 1.6; color: var(--ink); max-width: 46ch; margin: 0 auto; }
.more-content > .more-card.more-note:only-child .btn, .more-content > .more-note.more-empty .btn { margin-top: 16px; }

/* Google sign-in */
.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:600}
.google-btn:hover{background:#f8f9fa;color:#1f1f1f}
.or-line{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted,#888);font-size:.85rem}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:currentColor;opacity:.3}
.google-terms{text-align:center;margin:-8px 0 4px}

/* Connections: real logos, search and categories */
.conn-ico.conn-logo { background: #fff; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.conn-ico.conn-logo img { width: 26px; height: 26px; object-fit: contain; display: block; }
.conn-bar { display: grid; gap: 10px; }
.conn-search { width: 100%; max-width: 420px; }
.conn-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.conn-cat { font: inherit; font-size: 0.8rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); cursor: pointer; }
.conn-cat:hover { border-color: var(--blood); }
.conn-cat[aria-pressed="true"] { background: var(--blood); border-color: var(--blood); color: #fff; }
.conn-tile[hidden], .conn-none[hidden] { display: none; }
.conn-howto { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--blood) 7%, transparent); color: var(--ink); line-height: 1.5; }

/* Tool tabs use the whole area; only plain paragraphs keep a readable line length. */
.more-content { max-width: none; }
.more-content > p { max-width: 90ch; }
.hx-modal.connect-modal { width: min(760px, calc(100vw - 32px)); }
.connect-modal .connect-form { min-height: 120px; }

/* While building, Send turns into a round Stop button with a square in it, in the same place. */
.composer-row #stop:not([hidden]) ~ #send { display: none; }
.btn-stop-sq { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--blood); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(200, 16, 46, .35); }
.btn-stop-sq span { width: 12px; height: 12px; border-radius: 2px; background: #fff; }
.btn-stop-sq:hover { filter: brightness(1.12); }
.btn-stop-sq:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.spell-suggest { border: 1px solid rgba(255, 77, 106, 0.45); background: rgba(255, 77, 106, 0.08); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; justify-items: start; margin-bottom: 10px; }
.spell-suggest p { margin: 0; }
.spell-suggest-t { font-weight: 700; color: var(--blueprint-deep); }
.spell-suggest-t::before { content: "\2726\2726\2726  "; letter-spacing: -1px; }
/* Enquiries CRM (2026-10-18) */
.crm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 14px; }
.crm-stats > div { background: var(--white); border: 1px solid var(--rule); border-radius: 3px; padding: 12px 14px; display: flex; flex-direction: column; }
.crm-stats strong { font: 700 1.35rem/1.2 var(--display); }
.crm-stats span { color: var(--graphite); font-size: 0.85rem; }
.crm-stats .due { border-color: var(--blueprint); }
.crm-stats .due strong { color: var(--blueprint-deep); }
.crm-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.crm-row { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: var(--white); border: 1px solid var(--rule); border-radius: 3px; padding: 11px 14px; color: var(--ink); font: inherit; cursor: pointer; }
.crm-row:hover { border-color: var(--rule-strong); background: var(--raised); }
.crm-row:focus-visible, .crm-card:focus-visible { outline: none; box-shadow: var(--focus); }
.crm-row-main { flex: 1; min-width: 0; }
.crm-preview { display: block; color: var(--graphite); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-row-side { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: 50%; }
.crm-row.unread, .crm-card.unread { border-color: rgba(255, 77, 106, 0.55); }
.crm-row.unread strong::before, .crm-card.unread strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blueprint); margin-right: 8px; vertical-align: 1px; }
.crm-pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font: 600 0.75rem/1.6 var(--body); border: 1px solid var(--rule-strong); white-space: nowrap; }
.crm-new { background: var(--tint); border-color: rgba(255, 77, 106, 0.5); color: var(--blueprint-deep); }
.crm-contacted { background: rgba(255, 255, 255, 0.04); border-color: var(--rule-strong); color: var(--ink); } /* under way: neutral, the label says which */
.crm-quoted { background: rgba(255, 255, 255, 0.04); border-color: var(--rule-strong); color: var(--ink); }
.crm-won { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.5); color: var(--ok); }
.crm-lost { color: var(--graphite); }
.crm-follow { font-size: 0.78rem; color: var(--graphite); white-space: nowrap; }
.crm-follow.due { color: var(--blueprint-deep); font-weight: 600; }
.crm-board { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.crm-col { background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; padding: 10px; min-height: 120px; display: flex; flex-direction: column; gap: 8px; }
.crm-col.drop { border-color: var(--blueprint); background: var(--tint); }
.crm-col h3 { margin: 0 0 2px; font-size: 0.9rem; }
.crm-card { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--white); border: 1px solid var(--rule); border-radius: 3px; padding: 10px 12px; color: var(--ink); font: inherit; cursor: grab; }
.crm-card:hover { border-color: var(--rule-strong); }
.crm-card-foot { display: flex; gap: 8px; justify-content: space-between; font-size: 0.85rem; }
.hx-modal.crm-modal { width: min(720px, calc(100vw - 32px)); }
.crm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.crm-fields .more-field:last-child { grid-column: 1 / -1; }
.crm-notes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.crm-note { background: var(--raised); border-radius: 3px; padding: 8px 12px; }
.crm-note p { margin: 0 0 2px; white-space: pre-wrap; }
.crm-link { background: none; border: 0; padding: 0; color: var(--blueprint); cursor: pointer; text-decoration: underline; font: inherit; }
.crm-modal textarea { width: 100%; box-sizing: border-box; }
.crm-danger { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rule); }
@media (max-width: 640px) {
  .crm-stats { grid-template-columns: 1fr; }
  .crm-row { flex-direction: column; align-items: stretch; }
  .crm-row-side { max-width: none; justify-content: flex-start; }
  .crm-fields { grid-template-columns: 1fr; }
}
.crm-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.crm-bar .conn-search { flex: 1 1 260px; margin: 0; }
.crm-col h3 { font-family: var(--body); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.crm-board { grid-template-columns: repeat(5, minmax(160px, 1fr)); }
.crm-card-foot { flex-wrap: wrap; }
/* Community builds and template modal (2026-10-18) */
.hb-tpl-link { margin-top: 14px; background: none; border: 0; color: var(--ink); font: 600 0.92rem var(--body); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 77, 106, 0.6); cursor: pointer; padding: 6px 8px; }
.hb-tpl-link:hover { color: var(--blueprint-deep); }
.hb-tpl-link:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
.hx-modal.tpl-modal { width: min(1100px, calc(100vw - 32px)); }
.home-gallery { max-width: 1400px; margin: 0 auto; background: rgba(9, 7, 10, 0.92); border: 1px solid var(--rule); border-radius: 20px; padding: 16px 20px 24px; }
.hg-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.hg-tabs, .hg-sort { display: flex; gap: 4px; flex-wrap: wrap; }
.hg-tabs button, .hg-sort button { background: none; border: 1px solid transparent; color: var(--graphite); font: 600 0.88rem var(--body); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.hg-tabs button[aria-selected="true"], .hg-sort button[aria-pressed="true"] { background: var(--raised); border-color: var(--rule-strong); color: var(--ink); }
.hg-tabs button:focus-visible, .hg-sort button:focus-visible, .hg-card:focus-visible { outline: none; box-shadow: var(--focus); }
.hg-note { margin: 2px 0 12px; }
.hg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.hg-card { display: flex; flex-direction: column; gap: 8px; text-align: left; background: none; border: 0; padding: 0; color: var(--ink); font: inherit; cursor: pointer; text-decoration: none; }
.hg-card .tpl-thumb { border: 1px solid var(--rule); border-radius: 10px; transition: border-color .15s, transform .15s; }
.hg-card:hover .tpl-thumb { border-color: var(--blueprint); transform: translateY(-2px); }
.hg-meta { display: flex; flex-direction: column; gap: 1px; padding: 0 2px; }
.hg-meta strong { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-more { text-align: center; margin: 18px 0 0; }
.hx-modal.summon-modal { width: min(1100px, calc(100vw - 32px)); }
.summon-frame { position: relative; height: min(62vh, 640px); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: #fff; margin-bottom: 14px; }
.summon-frame iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .home-gallery { padding: 12px; border-radius: 14px; } .hg-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .hg-card .tpl-thumb { transition: none; } .hg-card:hover .tpl-thumb { transform: none; } }
#summon-form { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
#summon-form .btn { flex: 0 0 auto; width: auto; }
#summon-form .muted { flex: 1 1 260px; }
/* Legal pages and footer (2026-10-18) */
.legal h2 { margin-top: 2em; }
.legal li { margin-bottom: 0.4em; }
.foot-legal { color: var(--graphite); font-size: 0.82rem; margin-top: 4px; }
.foot-links { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---- Template gallery (/templates and /templates/{slug}) ---- */
.tg-hero { position: relative; text-align: center; padding: 72px 0 40px; overflow: hidden; }
.tg-hero::before { content: ""; position: absolute; inset: -40% -10% auto; height: 120%; background: radial-gradient(50% 50% at 50% 50%, rgba(200, 16, 46, 0.28), transparent 70%), radial-gradient(30% 40% at 70% 30%, rgba(255, 77, 106, 0.12), transparent 70%); pointer-events: none; }
.tg-hero .wrap { position: relative; }
.tg-label { display: inline-block; margin: 0 0 14px; padding: 4px 12px; border: 1px solid var(--rule-strong); border-radius: 999px; font: 600 0.78rem/1.4 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); }
.tg-hero h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); margin-bottom: 16px; }
.tg-hero h1 span { color: var(--blueprint); }
.tg-sub { max-width: 600px; margin: 0 auto 28px; color: var(--graphite); font-size: 1.08rem; }
.tg-search { position: relative; max-width: 620px; margin: 0 auto; }
.tg-search svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: var(--graphite); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.tg-search input { width: 100%; min-height: 56px; padding: 14px 18px 14px 50px; border: 1px solid var(--rule-strong); border-radius: 999px; background: rgba(27, 22, 26, 0.85); color: var(--ink); font: 400 1.05rem/1.4 var(--body); box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.9); }
.tg-search input:focus { outline: none; border-color: var(--blueprint); box-shadow: var(--focus); }
.tg-search input::placeholder { color: var(--graphite); opacity: 0.8; }
.tg-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 24px; }
.tg-filters { position: sticky; top: 88px; }
.tg-fh { font: 600 0.78rem/1.4 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); margin: 0 0 10px; }
.tg-types { display: grid; gap: 2px; margin-bottom: 26px; }
.tg-types button, .tg-cat { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 0.95rem/1.3 var(--body); text-align: left; cursor: pointer; }
.tg-types button span, .tg-cat span { color: var(--graphite); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.tg-types button:hover, .tg-cat:hover { background: var(--raised); }
.tg-types button[aria-checked="true"] { background: var(--tint); color: #fff; box-shadow: inset 2px 0 0 var(--blood); }
.tg-cats { display: grid; gap: 1px; }
.tg-cat { justify-content: flex-start; margin: 0; }
.tg-cat span { margin-left: auto; }
.tg-cat input { width: 16px; height: 16px; margin: 0; accent-color: var(--blood); flex: none; }
.tg-cat[hidden] { display: none; }
.tg-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tg-results-head h2 { font-size: 1.4rem; margin: 0; }
.tg-n { color: var(--graphite); font: 500 1rem var(--body); }
.tg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 22px; }
.tg-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tg-card[hidden] { display: none; }
.tg-card a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "thumb thumb" "meta kind"; gap: 12px 10px; color: var(--ink); text-decoration: none; border-radius: 14px; }
.tg-thumb { grid-area: thumb; position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; border: 1px solid var(--rule); background: var(--raised); transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.tg-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 0.6s; }
.tg-card a:hover .tg-thumb, .tg-card a:focus-visible .tg-thumb { border-color: rgba(255, 77, 106, 0.55); box-shadow: 0 0 0 1px rgba(255, 77, 106, 0.25), 0 22px 50px -22px rgba(200, 16, 46, 0.7); transform: translateY(-3px); }
.tg-card a:hover .tg-thumb img { transform: scale(1.025); }
.tg-card a:focus-visible { box-shadow: none; }
.tg-meta { grid-area: meta; display: grid; gap: 2px; min-width: 0; }
.tg-title { font-weight: 600; font-size: 1rem; }
.tg-tag { color: var(--graphite); font-size: 0.88rem; line-height: 1.4; }
.tg-price { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(9, 7, 10, 0.82); color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.75rem; font-weight: 600; backdrop-filter: blur(6px); }
.tg-free { margin-bottom: 18px; }
.tg-price-free { background: var(--pencil); color: var(--on-pencil); border-color: var(--pencil); }
/* Templates built with React: a small pill in the thumbnail's top right corner. */
.tg-react { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(9, 7, 10, 0.82); color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; backdrop-filter: blur(6px); }
.tg-react::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--link, #FF4D6A); box-sizing: border-box; }
.tg-react-inline { position: static; vertical-align: middle; }
/* The game a template is for (Gaming & communities, gaming.php): a pill in the thumbnail's bottom left corner. */
.tg-game { position: absolute; left: 10px; bottom: 10px; display: inline-block; box-sizing: border-box; max-width: calc(100% - 20px); line-height: 1.35; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(9, 7, 10, 0.82); color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(6px); }
.tg-game::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 1px; vertical-align: middle; border-radius: 2px; background: var(--blood); transform: rotate(45deg); }
.tg-game-inline { position: static; vertical-align: middle; max-width: 100%; }
.tp-pills .tg-react-inline + .tg-game-inline { margin-left: 6px; }
.tp-pills { margin: -4px 0 12px; }
.tg-kind { grid-area: kind; align-self: start; padding: 3px 10px; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: var(--graphite); white-space: nowrap; }
.tg-empty { text-align: center; padding: 56px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--white); }
.tg-empty p { color: var(--graphite); max-width: 460px; margin: 0 auto 18px; }
.tg-cta { margin-top: 72px; text-align: center; }
.tg-cta .wrap { padding-top: 48px; padding-bottom: 48px; border-top: 1px solid var(--rule); }
.tg-cta p { color: var(--graphite); max-width: 520px; margin: 0 auto 20px; }
@media (max-width: 1000px) { .tg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tg-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .tg-hero { padding: 48px 0 24px; }
  .tg-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tg-filters { position: static; display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 8px; scrollbar-width: none; }
  .tg-filters::-webkit-scrollbar { display: none; }
  .tg-fh { display: none; }
  .tg-types, .tg-cats { display: flex; gap: 8px; margin: 0; }
  .tg-types button, .tg-cat { width: auto; white-space: nowrap; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 6px 14px; }
  .tg-types button[aria-checked="true"] { box-shadow: none; border-color: var(--blood); }
  .tg-cat input { display: none; }
  .tg-cat:has(input:checked) { background: var(--tint); border-color: var(--blood); }
  .tg-cat span { margin-left: 4px; }
}
@media (max-width: 520px) {
  .tg-grid, .tg-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .tg-card a { grid-template-areas: "thumb" "meta" "kind"; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tg-title { font-size: 0.92rem; }
  .tg-tag { display: none; }
  .tg-kind { justify-self: start; padding: 1px 8px; font-size: 0.7rem; }
  .tg-price { top: 6px; left: 6px; padding: 2px 8px; font-size: 0.7rem; }
  .tg-react { top: 6px; right: 6px; padding: 2px 8px 2px 6px; font-size: 0.7rem; }
  .tg-game { left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 8px 2px 6px; font-size: 0.7rem; }
}

.tp-head { position: relative; padding: 40px 0 28px; }
.tp-head::before { content: ""; position: absolute; inset: 0 0 auto; height: 360px; background: radial-gradient(40% 60% at 20% 0%, rgba(200, 16, 46, 0.22), transparent 70%); pointer-events: none; }
.tp-head-row { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr); gap: 48px; align-items: end; }
.tp-crumb { font-size: 0.9rem; color: var(--graphite); margin-bottom: 14px; }
.tp-crumb a { color: var(--graphite); text-decoration: none; }
.tp-crumb a:hover { color: var(--ink); }
.tp-head h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 10px; }
.tp-tagline { font-size: 1.15rem; color: var(--ink); margin-bottom: 10px; }
.tp-desc { color: var(--graphite); max-width: 620px; }
.tp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 10px; }
.tp-more { max-width: 560px; margin: 4px 0 6px; }
.tp-more summary { cursor: pointer; color: var(--blueprint); font-weight: 600; font-size: 0.95rem; padding: 6px 0; }
.tp-more textarea { width: 100%; margin: 8px 0 6px; padding: 12px 14px; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--raised); color: var(--ink); font: inherit; resize: vertical; }
.tp-free { margin: 6px 0 0; }
.tp-facts { margin: 0; padding: 18px 20px; border: 1px solid var(--rule); border-radius: 14px; background: rgba(19, 16, 19, 0.8); display: grid; gap: 12px; }
.tp-facts div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; font-size: 0.92rem; }
.tp-facts dt { color: var(--graphite); }
.tp-facts dd { margin: 0; }
.tp-swatches { display: flex; gap: 6px; }
.tp-swatches span { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); }
.tp-stage { margin-top: 8px; }
.tp-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--rule); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--raised); }
.tp-dots { display: flex; gap: 6px; }
.tp-dots i { width: 11px; height: 11px; border-radius: 50%; background: #3A2F35; }
.tp-dots i:first-child { background: var(--blood); }
.tp-url { flex: 1; min-width: 0; max-width: 420px; margin: 0 auto; padding: 5px 14px; border-radius: 999px; background: var(--paper); color: var(--graphite); font: 400 0.82rem var(--mono); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-devices { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--rule-strong); border-radius: 999px; }
.tp-devices button { min-height: 30px; padding: 4px 12px; border: 0; border-radius: 999px; background: none; color: var(--graphite); font: 600 0.82rem var(--body); cursor: pointer; }
.tp-devices button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tp-frame { display: flex; justify-content: center; height: min(82vh, 920px); border: 1px solid var(--rule); border-radius: 0 0 14px 14px; overflow: hidden; background-color: #0D0A0C; background-image: linear-gradient(#1A1418 1px, transparent 1px), linear-gradient(90deg, #1A1418 1px, transparent 1px); background-size: 24px 24px; }
.tp-frame iframe { width: 100%; height: 100%; border: 0; background: #fff; transition: width 0.3s; }
.tp-frame.phone { padding: 18px 0; }
.tp-frame.phone iframe { width: 390px; max-width: 100%; border-radius: 22px; box-shadow: 0 0 0 8px #1F181C, 0 30px 70px -20px rgba(0, 0, 0, 0.9); }
.tp-more-list { margin-top: 56px; }
.tp-more-list .tg-results-head a { font-weight: 600; text-decoration: none; }
@media (max-width: 860px) {
  .tp-head-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tp-url { display: none; }
  .tp-bar { justify-content: space-between; }
  .tp-frame { height: 70vh; }
}

/* Dashboard: Templates tab and the template picker */
.hg-tcard .tpl-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hg-tcard .hg-meta .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-browse { font-weight: 600; text-decoration: none; font-size: 0.95rem; }
.hg-browse[hidden] { display: none; }
.hx-modal.tpk { width: min(1180px, calc(100vw - 32px)); height: min(880px, calc(100vh - 32px)); flex-direction: column; }
.hx-modal.tpk[open] { display: flex; }
.tpk .hx-modal-body { flex: 1; overflow: auto; padding: 4px 20px 8px; }
.tpk-list[hidden], .tpk-detail[hidden] { display: none; }
.tpk-tools { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 0 12px; background: var(--white); }
.tpk-tools input[type=search] { flex: 1 1 260px; width: auto; min-height: 42px; padding: 8px 14px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--raised); color: var(--ink); font: inherit; }
.tpk-tools select { width: auto; flex: 0 0 auto; min-width: 200px; min-height: 42px; padding: 8px 12px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--raised); color: var(--ink); font: inherit; }
.tpk-types { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--rule-strong); border-radius: 999px; }
.tpk-types button { min-height: 34px; padding: 4px 14px; border: 0; border-radius: 999px; background: none; color: var(--graphite); font: 600 0.88rem var(--body); cursor: pointer; }
.tpk-types button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.tpk-note { margin: 0 0 14px; }
.tpk-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.tpk-cats[hidden], .tpk-grid[hidden], .tpk-crumb[hidden], .tpk-more[hidden] { display: none; }
.tpk-cats button { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "thumb thumb" "name count"; align-items: center; gap: 0 8px; width: 100%; padding: 0 0 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--raised); color: var(--ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.tpk-cats button:hover, .tpk-cats button:focus-visible { border-color: rgba(255, 77, 106, 0.55); transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(200, 16, 46, 0.7); }
.tpk-cthumb { grid-area: thumb; display: block; aspect-ratio: 16 / 8; overflow: hidden; margin-bottom: 10px; border-bottom: 1px solid var(--rule); }
.tpk-cthumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tpk-cname { grid-area: name; padding-left: 14px; font-weight: 700; line-height: 1.25; min-width: 0; }
.tpk-ccount { grid-area: count; margin-right: 12px; padding: 2px 9px; border-radius: 999px; background: var(--tint, rgba(255, 77, 106, 0.12)); color: var(--graphite); font-size: 0.78rem; font-weight: 600; }
.tpk-crumb { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.tpk-crumb h3 { margin: 0; font-size: 1.15rem; }
.tpk-more { display: block; margin: 24px auto 8px; }
.tpk-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px 18px; }
.tpk-grid .tg-card button { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "thumb thumb" "meta kind"; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tpk-grid .tg-card button:hover .tg-thumb, .tpk-grid .tg-card button:focus-visible .tg-thumb { border-color: rgba(255, 77, 106, 0.55); transform: translateY(-2px); }
.tpk-grid .tg-card button:focus-visible { box-shadow: none; }
.tpk-detail { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.tpk-dhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tpk-dtitle { flex: 1; min-width: 0; }
.tpk-dtitle h3 { margin: 0; font-size: 1.25rem; }
.tpk-dtitle p { margin: 2px 0 0; }
.tpk-frame { flex: 1; min-height: 360px; height: auto; border-radius: 12px; }
.hx-modal-body form.tpk-use { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 4px; }

/* Template gallery: the admins-only note, and Admin > Templates */
.tg-admin { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 0 0 16px; padding: 8px 14px; border: 1px solid rgba(255, 77, 106, 0.45); border-radius: var(--radius); background: rgba(255, 77, 106, 0.08); color: var(--ink); font-size: 0.9rem; }
.tg-admin a { color: var(--blueprint); font-weight: 600; }
.at-head { display: flex; gap: 16px 24px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.at-head h2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 0; }
.at-head p { max-width: 62ch; margin: 0; }
.at-state { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--rule-strong); color: var(--ink); font: 600 0.75rem/1.6 var(--body); letter-spacing: 0.06em; text-transform: uppercase; }
.at-state.on { border-color: rgba(70, 200, 120, 0.5); color: var(--ok); }
.at-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.at-grid li { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--white); display: flex; flex-direction: column; }
.at-thumb { display: block; aspect-ratio: 8 / 5; overflow: hidden; border-bottom: 1px solid var(--rule); }
.at-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.at-thumb:hover img { transform: scale(1.03); }
.at-meta { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.at-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) { .at-thumb img { transition: none; } }

/* Plan cards (home, /pricing, Billing) */
.pl { container-type: inline-size; }
.pl-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@container (min-width: 540px) { .pl-grid { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 1000px) { .pl-grid { grid-template-columns: repeat(4, 1fr); } }
.pl-card { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; border: 1px solid var(--rule); border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%), var(--white); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 48px -32px rgba(0, 0, 0, 0.9); }
.pl-pop { border-color: rgba(255, 77, 106, 0.55); box-shadow: 0 0 0 1px rgba(255, 77, 106, 0.25), 0 30px 70px -36px rgba(200, 16, 46, 0.75); background: radial-gradient(120% 60% at 50% 0%, rgba(200, 16, 46, 0.16), transparent 70%), var(--white); }
.pl-cur { border-color: rgba(74, 222, 128, 0.45); }
.pl-flag { position: absolute; top: -11px; left: 22px; padding: 3px 11px; border-radius: 999px; background: var(--blood); color: #fff; font: 600 0.72rem/1.5 var(--body); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 6px 18px -6px rgba(200, 16, 46, 0.8); }
.pl-flag-cur { background: #12301E; color: var(--ok); border: 1px solid rgba(74, 222, 128, 0.45); box-shadow: none; }
.pl-name { margin: 0 0 4px; font-size: 1.5rem; }
.pl-blurb { margin: 0 0 18px; color: var(--graphite); font-size: 0.92rem; line-height: 1.5; min-height: 3em; }
.pl-price { margin: 0 0 18px; display: flex; align-items: baseline; gap: 2px; }
.pl-amt { font: 800 2.5rem/1 var(--display); letter-spacing: -0.02em; }
.pl-per { color: var(--graphite); font-size: 0.92rem; }
.pl-cta { margin-bottom: 20px; }
.pl-cta form { margin: 0; }
.pl-cta form .btn { margin-top: 0; }
.pl-btn { display: block; width: 100%; text-align: center; margin: 0; padding: 11px 20px; font: 600 0.98rem/1.4 var(--body); text-decoration: none; }
.pl-btn[aria-disabled="true"] { opacity: 0.7; cursor: default; }
.pl-here { background: transparent; border-color: rgba(74, 222, 128, 0.4); color: var(--ok); opacity: 1 !important; }
.pl-here:hover { background: transparent; border-color: rgba(74, 222, 128, 0.4); color: var(--ok); }
.pl-feat { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 9px; font-size: 0.92rem; }
.pl-feat li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; line-height: 1.4; }
.pl-feat svg { width: 16px; height: 16px; margin-top: 2px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-feat .yes svg { stroke: var(--blueprint); }
.pl-feat .no { color: var(--graphite); }
.pl-feat .no svg { stroke: var(--graphite); }
.pl-trial { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-top: 18px; padding: 18px 22px; border: 1px dashed var(--rule-strong); border-radius: 14px; }
.pl-trial h3 { margin: 0 0 4px; font-size: 1.15rem; }
.pl-trial p { margin: 0; color: var(--graphite); }
.pl-all { margin: 18px 0 8px; color: #CFC3C8; }
.pl-all strong { color: var(--ink); }
/* Yearly plans (feature_annual, _plans_annual.php and plans.js): Monthly / Yearly above the cards, the chosen side red.
   Each card carries both prices and both buttons; data-pay on .pl-annual says which side shows. */
.pl-pay { display: flex; width: max-content; max-width: 100%; margin: 0 auto 30px; padding: 4px; gap: 4px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--white); box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.9); }
.pl-pay-opt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 22px; border-radius: 999px; color: var(--graphite); font: 600 0.95rem/1.2 var(--body); text-decoration: none; white-space: nowrap; transition: background-color 0.15s, color 0.15s; }
.pl-pay-opt:hover { color: var(--ink); }
.pl-pay-opt:focus-visible { border-radius: 999px; }
.pl-pay-opt[aria-checked="true"] { background: var(--blood); color: #fff; box-shadow: 0 8px 20px -10px rgba(200, 16, 46, 0.95); }
.pl-pay-opt[aria-checked="true"]:hover { color: #fff; }
.pl-pay-free { display: inline-flex; align-items: center; gap: 5px; color: var(--blueprint); font-size: 0.78rem; font-weight: 600; }
.pl-pay-free::before { content: ""; width: 9px; height: 8px; background: currentColor; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.pl-pay-opt[aria-checked="true"] .pl-pay-free { color: rgba(255, 255, 255, 0.88); }
@media (max-width: 480px) { .pl-pay { width: 100%; } .pl-pay-opt { flex: 1 1 0; padding: 8px 10px; } }
.pl-annual[data-pay="month"] .pl-y, .pl-annual[data-pay="year"] .pl-m { display: none; }
.pl-annual[data-pay="month"] .pl-cur-m, .pl-annual[data-pay="year"] .pl-cur-y { border-color: rgba(74, 222, 128, 0.45); }
.pl-annual .pl-price { margin-bottom: 6px; flex-wrap: wrap; }
.pl-annual .pl-owed { border-style: dashed; color: var(--graphite); }
.pl-annual .pl-per { white-space: nowrap; }
/* A year's price is longer (£1,000): sized to the card so it stays on one line with "a year", and the same on every card. */
.pl-annual .pl-card { container-type: inline-size; }
.pl-annual .pl-y .pl-amt { font-size: clamp(1.6rem, calc((100cqi - 56px) / 4.9), 2.5rem); }
.pl-sub { margin: 0 0 18px; color: var(--graphite); font-size: 0.86rem; line-height: 1.4; }
.pl-flag-save { left: auto; right: 22px; padding: 3px 15px; border-radius: 0; background: color-mix(in srgb, var(--blueprint) 18%, var(--paper)); color: var(--blueprint-deep); box-shadow: none; clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%); }
/* Cards too narrow for "Most popular" (or "Your plan") and "Save £X" side by side on the top edge, with room between
   (four across below about 1160px): every card's saving moves under its price instead, the same on each card. A saving
   of £100 or more on the popular card (fewer months paid for) doesn't fit at any four-across width. */
.pl-save-in { display: none; width: max-content; margin-top: 8px; padding: 2px 13px; background: color-mix(in srgb, var(--blueprint) 18%, var(--paper)); color: var(--blueprint-deep); font: 600 0.72rem/1.5 var(--body); letter-spacing: 0.08em; text-transform: uppercase; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
@container (max-width: 222px) { .pl-annual .pl-flag-save { display: none; } .pl-annual .pl-save-in { display: block; } }
@container (max-width: 239px) { .pl-annual .pl-save-long .pl-flag-save { display: none; } .pl-annual .pl-save-long .pl-save-in { display: block; } }
/* The change a yearly customer has booked: shown, not offered again. */
.pl-annual .pl-booked, .pl-annual .pl-booked:hover { background: transparent; border-style: dashed; border-color: rgba(255, 77, 106, 0.5); color: var(--blueprint); opacity: 1; }
/* Billing: a change booked for the end of a yearly plan's year, with Undo. */
.pending-sheet { border-color: rgba(255, 77, 106, 0.4); box-shadow: none; }
.pending-sheet h2 { display: flex; align-items: flex-start; gap: 10px; }
.pending-sheet h2::before { content: ""; flex: none; width: 14px; height: 13px; margin-top: calc(0.55em - 7px); background: var(--blueprint); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.pending-sheet form { margin: 0 0 10px; }
/* Admin customer page: the 14-day refund sum. */
.refund-box { margin: 12px 0 16px; padding: 12px 14px; border: 1px solid var(--rule-strong); border-left: 3px solid var(--blueprint); border-radius: var(--radius); background: var(--raised); }
.refund-box p { margin: 0 0 6px; }
.refund-box p:last-child { margin: 0; }
/* /pricing extras */
.pr-head { max-width: 720px; }
.pr-addons { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pr-addons li { padding: 16px 18px; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); }
.pr-addons h3 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin: 0 0 6px; font: 600 1rem/1.3 var(--body); letter-spacing: 0; }
.pr-addons h3 span { color: var(--ink); font-weight: 600; white-space: nowrap; }
.pr-addons p { margin: 0; color: var(--graphite); font-size: 0.9rem; }
.pr-faq > * { max-width: 780px; }
.pr-faq details { border-bottom: 1px solid var(--rule); }
.pr-faq summary { cursor: pointer; padding: 16px 32px 16px 0; font-weight: 600; color: var(--ink); list-style: none; position: relative; }
.pr-faq summary:hover { color: var(--blueprint-deep); }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 400 1.4rem/1 var(--body); color: var(--blueprint); transition: transform 0.2s; }
.pr-faq details[open] summary::after { transform: rotate(45deg); }
.pr-faq details p { margin: 0 0 16px; color: #CFC3C8; max-width: 68ch; }
@media (prefers-reduced-motion: reduce) { .pr-faq summary::after { transition: none; } }

/* Review booster (Add-ons) */
.rv-modal .more-card { margin-bottom: 14px; }
.rv-send { display: grid; gap: 0 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.rv-stats { font-weight: 600; margin: 0 0 10px; }
.rv-list { list-style: none; margin: 0; padding: 0; }
.rv-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.rv-item:first-child { border-top: 0; }
.rv-item .hint { grid-column: 1; margin: 0; }
.rv-st { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .85rem; color: var(--ok); text-align: right; }
.rv-skip .rv-st { color: var(--graphite); }
.rv-modal textarea[aria-label="Suggested reply"] { width: 100%; margin-top: 10px; }
.rv-modal #rv-stars { width: auto; margin: 0; flex: 0 1 auto; min-width: 0; }
.rv-item strong { overflow-wrap: anywhere; }
.ch-intro { margin: 0 0 14px; color: var(--graphite); }
.ch-list { list-style: none; margin: 0 0 10px; padding: 0; }
.ch-list > li { border-top: 1px solid var(--rule); }
.ch-list > li:first-child { border-top: 0; }
.ch-item summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; cursor: pointer; list-style: none; }
.ch-item summary::-webkit-details-marker { display: none; }
.ch-item summary .hint { grid-column: 1; margin: 0; }
.ch-first { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ch-lead { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .85rem; color: var(--ok); }
.ch-talk { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 14px; }
.ch-b { max-width: 85%; margin: 0; padding: 8px 12px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; }
.ch-u { align-self: flex-end; background: var(--blood); color: #fff; border-bottom-right-radius: 4px; }
.ch-a { align-self: flex-start; background: var(--raised); border: 1px solid var(--rule); border-bottom-left-radius: 4px; }

/* Admin > Work in progress */
.wk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.wk-pulse { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 6px 12px; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: 0.85rem; color: var(--graphite); }
.wk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); animation: wk-pulse 2s infinite; }
.wk-pulse.stale .wk-dot { background: var(--blueprint); animation: none; }
@keyframes wk-pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
@media (prefers-reduced-motion: reduce) { .wk-dot { animation: none; } .wk-bar span { transition: none; } }
.wk-headline { font-family: var(--display); font-size: 1.15rem; margin: 0 0 16px; }
.wk-sec h2 { font-size: 1.3rem; margin: 0 0 14px; }
.wk-todo-sec { border-color: rgba(200, 16, 46, 0.45); }
.wk-todo-intro { margin: -6px 0 12px; }
.wk-todos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wk-todo label { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 9px 12px; border-radius: var(--radius); font-weight: 500; cursor: pointer; }
.wk-todo small { font-weight: 400; font-size: 0.82rem; }
.wk-todo label:hover { background: var(--raised); }
.wk-todo input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blood); cursor: pointer; }
.wk-todo input:focus-visible { outline: none; box-shadow: var(--focus); }
.wk-todo-text { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.wk-todo.is-done .wk-todo-text > span:first-child { text-decoration: line-through; color: var(--graphite); }
.wk-todo-done { margin-top: 10px; border-top: 1px solid var(--rule); padding-top: 10px; }
.wk-todo-done summary { cursor: pointer; color: var(--graphite); font-size: 0.9rem; padding: 4px 0; }
.wk-todo-err { margin: 0 12px 8px 42px; color: var(--fault); }
.wk-sec h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--graphite); margin: 22px 0 10px; }
.wk-tasks, .wk-grid, .wk-chips, .wk-fin { list-style: none; margin: 0; padding: 0; }
.wk-tasks { display: grid; gap: 10px; }
.wk-task, .wk-card { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; background: var(--raised); }
.wk-task p, .wk-card p { margin: 4px 0 0; }
.wk-trow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wk-state { flex: none; font-size: 0.75rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--rule-strong); color: var(--graphite); }
.wk-doing .wk-state { color: var(--paper); background: var(--blueprint); border-color: var(--blueprint); }
.wk-waiting .wk-state { color: #fff; background: var(--blood); border-color: var(--blood); }
.wk-done .wk-state { color: var(--ok); border-color: rgba(74, 222, 128, 0.4); }
.wk-task.wk-done { opacity: 0.7; }
.wk-bar { position: relative; height: 8px; margin-top: 10px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.wk-bar span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--blood), var(--blueprint)); transition: width 0.6s ease; }
.wk-bar.wk-full span { background: var(--ok); }
.wk-bar-big { height: 14px; }
.wk-total p { margin: 0; font-size: 1.05rem; }
.wk-total strong { font-family: var(--display); font-size: 1.6rem; margin-right: 4px; }
.wk-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.wk-pct { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--blueprint-deep); }
.wk-stage { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 0.82rem; margin-top: 8px !important; }
.wk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-chips li { font-size: 0.82rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rule-strong); color: var(--graphite); }
.wk-fin li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule); }
.wk-fin li:first-child { border-top: 0; }
.at-pricing { margin: 4px 0 20px; padding: 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--raised); }
.at-price-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 24px; margin-bottom: 12px; }
.at-price-row input[type=number] { max-width: 140px; }
.at-price-row fieldset { border: 0; margin: 0; padding: 0; }
.at-price-row legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.at-plans { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.at-plans input { width: auto; }
.at-price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.at-price label { font-size: .85rem; color: var(--graphite); }
.at-price input { width: 120px; padding: 6px 10px; }
@media (max-width: 700px) { .at-price-row { grid-template-columns: minmax(0, 1fr); } }
.at-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.at-acts form { margin: 0; }
.at-acts .btn { margin: 0; }
.at-del { color: var(--fault); }
.at-hidden .at-thumb img { opacity: 0.4; filter: grayscale(0.6); }
.at-meta .at-state { align-self: flex-start; margin-top: 4px; }
/* Space around the logo, also when the admin menu wraps onto a second line */
.topbar-row { padding-block: 10px; row-gap: 8px; }
/* Quotes and invoices (2026-10-18) */
.qt-pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font: 600 0.75rem/1.6 var(--body); border: 1px solid var(--rule-strong); white-space: nowrap; color: var(--graphite); }
.qt-sent, .qt-viewed { background: rgba(255, 255, 255, 0.04); border-color: var(--rule-strong); color: var(--ink); }
.qt-accepted { background: rgba(255, 255, 255, 0.04); border-color: var(--rule-strong); color: var(--ink); }
.qt-paid { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.5); color: var(--ok); }
.qt-declined, .qt-void { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.35); }
.qt-pill.qt-due { background: rgba(255, 77, 106, 0.12); border-color: var(--blueprint); color: var(--blueprint-deep); }
.qt-linked h3 { margin: 0 0 6px; font-size: 0.95rem; }
.qt-linked .crm-row { margin-bottom: 6px; }
.hx-dialog.hx-modal.qt-modal { width: min(760px, calc(100vw - 24px)); }
.qt-msg:empty { display: none; }
.qt-msg { margin: 0; color: var(--blueprint-deep); }
.qt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qt-grid > [hidden] { display: none; }
.qt-asked { margin: 0; padding: 10px 12px; background: var(--raised); border-left: 3px solid var(--blueprint); border-radius: 3px; white-space: pre-wrap; font-size: 0.92rem; }
.qt-lines { display: grid; gap: 8px; }
.qt-line { display: grid; grid-template-columns: minmax(0, 1fr) 70px 104px 92px 40px; gap: 8px; align-items: start; }
.qt-line textarea { min-height: 44px; resize: vertical; }
.qt-line input { text-align: right; font-variant-numeric: tabular-nums; }
.qt-line .btn { min-height: 44px; width: 40px; padding: 0; font-size: 1.2rem; }
.qt-head { margin-bottom: -4px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--graphite); }
.qt-head span:nth-child(n+2) { text-align: right; }
.qt-amt { align-self: center; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.qt-totals { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; color: var(--graphite); }
.qt-totals strong { color: var(--ink); margin-left: 6px; }
.qt-totals span:empty { display: none; }
.qt-total { font-size: 1.15rem; color: var(--ink); }
.qt-total strong { font-family: var(--display); }
.qt-sum { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.qt-sum strong { font: 700 1.5rem/1.2 var(--display); }
.qt-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.qt-items li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.qt-items li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.qt-items li span:last-child { white-space: nowrap; }
.qt-steps { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--rule-strong); display: grid; gap: 6px; }
.qt-steps li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; position: relative; }
.qt-steps li::before { content: ""; position: absolute; left: -19px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--blueprint); }
@media (max-width: 640px) {
  .qt-grid { grid-template-columns: 1fr; }
  .qt-head { display: none; }
  .qt-line { grid-template-columns: 1fr 1fr 40px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
  .qt-line textarea { grid-column: 1 / -1; }
  .qt-line .qt-amt { grid-column: 1 / 3; text-align: left; }
  .qt-line .qt-amt:empty { display: none; }
  .qt-line .btn { grid-row: 2; grid-column: 3; }
}
.qt-msg.qt-ok { color: var(--ok); }
/* Admin funnel and customer filters (2026-10-18) */
.fn-intro { max-width: 760px; margin: -6px 0 16px; }
.fn-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fn-bars li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 120px 170px; gap: 14px; align-items: center; }
.fn-label { font-weight: 600; }
.fn-track { height: 26px; background: var(--raised); border-radius: 3px; overflow: hidden; }
.fn-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--blood), #FF4D6A); border-radius: 3px; }
.fn-bars li:last-child .fn-fill { background: linear-gradient(90deg, var(--blood-deep), var(--blood)); }
.fn-num { font-variant-numeric: tabular-nums; color: var(--graphite); }
.fn-num strong { color: var(--ink); font-family: var(--display); font-size: 1.15rem; margin-right: 4px; }
.fn-table td .small { margin-left: 4px; }
.fn-empty td, .fn-empty th { color: var(--graphite); }
.fn-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fn-head h2 { margin: 0; }
.fn-head form { margin: 0; }
.fn-neg { color: var(--fault, #FF6B6B); font-weight: 600; }
.cu-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.cu-filters a { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 0.9rem; }
.cu-filters a span { color: var(--graphite); font-variant-numeric: tabular-nums; }
.cu-filters a:hover { border-color: var(--blueprint); }
.cu-filters a[aria-current="page"] { background: var(--blood); border-color: var(--blood); color: #fff; }
.cu-filters a[aria-current="page"] span { color: rgba(255, 255, 255, 0.8); }
.cu-filters a:focus-visible, .cu-pages a:focus-visible { outline: none; box-shadow: var(--focus); }
.cu-pages { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 16px 0; color: var(--graphite); }
@media (max-width: 720px) {
  .fn-bars li { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .fn-track { grid-column: 1 / -1; grid-row: 2; }
  .fn-step { grid-column: 1 / -1; }
}
.page-head:has(> .btn) { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.stat-row dd .fn-sub { display: block; margin-top: 4px; line-height: 1.35; }

/* Email campaigns (Inbox tab) */
.cm-review, .cm-scheduled, .cm-c-pending { background: rgba(255, 255, 255, 0.04); border-color: var(--rule-strong); color: var(--ink); }
.cm-sending { background: rgba(255, 255, 255, 0.04); border-color: var(--rule-strong); color: var(--ink); }
.cm-sent, .cm-c-subscribed { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.5); color: var(--ok); }
.cm-paused, .cm-c-bounced, .cm-c-complained { background: rgba(255, 107, 107, 0.12); border-color: rgba(255, 107, 107, 0.5); color: var(--fault); }
.cm-preview { display: block; width: 100%; height: 460px; border: 1px solid var(--rule); border-radius: 6px; background: #F4F2F0; }
.cm-when { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.cm-when input[type="datetime-local"] { width: auto; min-height: 40px; }
.cm-people { display: grid; gap: 6px; max-height: 360px; overflow: auto; }
.cm-person { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; background: var(--white); border: 1px solid var(--rule); border-radius: 3px; }
.cm-person-main { min-width: 0; overflow-wrap: anywhere; }
.cm-why { display: block; }
.cm-modal input[type="search"] { flex: 1; min-width: 200px; }
.cm-paused-list { list-style: none; margin: 0; padding: 0; }
.cm-paused-list li { padding: 10px 0; border-top: 1px solid var(--rule); }
@media (max-width: 640px) {
  .cm-person { grid-template-columns: minmax(0, 1fr) auto; }
  .cm-person .more-row { grid-column: 1 / -1; }
  .cm-preview { height: 380px; }
}

/* Admin > Discord */
.dc-warn { padding: 12px 16px; border: 1px solid rgba(200, 16, 46, 0.5); border-radius: var(--radius); background: rgba(200, 16, 46, 0.1); }
.dc-err { color: #FF4D6A; margin-top: 8px !important; }
.dc-name { font-size: 1.3rem !important; overflow-wrap: anywhere; }
.dc-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dc-compose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.dc-compose form textarea { min-height: 12em; }
.dc-preview { position: sticky; top: 16px; padding: 16px; border-radius: 10px; background: #313338; color: #DBDEE1; font: 400 0.95rem/1.4 var(--body); }
.dc-preview-label { margin: 0 0 12px; color: #B5BAC1; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.dc-msg { display: flex; gap: 14px; align-items: flex-start; }
.dc-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.dc-body { min-width: 0; flex: 1; }
.dc-who { margin: 0 0 6px; color: #F2F3F5; }
.dc-app { margin-left: 4px; padding: 1px 5px; border-radius: 4px; background: #5865F2; color: #fff; font-size: 0.65rem; font-weight: 600; vertical-align: 1px; }
.dc-embed { max-width: 520px; padding: 10px 16px 12px 12px; border-left: 4px solid #C8102E; border-radius: 4px; background: #2B2D31; }
.dc-embed-title { margin: 2px 0 8px; color: #F2F3F5; font-weight: 600; overflow-wrap: anywhere; }
.dc-embed-title.dc-link { color: #00A8FC; }
.dc-embed-text { font-size: 0.9rem; overflow-wrap: anywhere; }
.dc-embed-text .dc-li { display: block; padding-left: 16px; position: relative; }
.dc-embed-text .dc-li::before { content: '•'; position: absolute; left: 3px; }
.dc-embed-foot { margin: 10px 0 0; color: #B5BAC1; font-size: 0.75rem; }
.dc-button { display: inline-block; margin-top: 8px; padding: 6px 14px; border-radius: 6px; background: #4E5058; color: #fff; font-size: 0.85rem; font-weight: 500; }
@media (max-width: 860px) { .dc-compose { grid-template-columns: 1fr; } .dc-preview { position: static; } }
/* Admin > Discord, Logs: a switch per channel (admin.css's toggle rows), its state underneath, then the tools */
.dl-list { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; border-bottom: 1px solid var(--rule); }
.dl-list[disabled] { opacity: 0.6; }
.dl-list .dl-row { padding-left: 0; padding-right: 0; column-gap: 16px; }
.dl-chan { font-weight: 600; overflow-wrap: anywhere; }
.dl-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px !important; }
.dl-save { margin-top: 14px; }
.dl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.dl-tools form { margin: 0; }
.dl-test { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.dl-test label { margin: 0; font-weight: 500; }
.dl-test select { width: auto; max-width: 100%; margin: 0; }
.dl-foot { margin: 16px 0 0; max-width: 70ch; }

/* Blog autopilot */
.bl-when { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.bl-publish { border: 0; padding: 0; margin: 4px 0 8px; }
.bl-publish legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.bl-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; }
.bl-choice:has(input:checked) { border-color: rgba(255, 77, 106, 0.6); background: rgba(200, 16, 46, 0.08); }
.bl-choice input { margin-top: 3px; }
.bl-choice > span { display: grid; gap: 2px; }
.bl-choice .hint { margin: 0; }
.bl-list { list-style: none; margin: 0; padding: 0; }
.bl-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.bl-item:first-child { border-top: 0; }
.bl-item > a, .bl-item > strong { overflow-wrap: anywhere; }
.bl-item .hint { grid-column: 1; margin: 0; }
.bl-st { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .85rem; text-align: right; color: var(--graphite); }
.bl-live .bl-st { color: var(--ok); }
.bl-ready .bl-st { color: var(--blueprint-deep); }
.bl-failed .bl-st { color: #FF4D6A; }
.bl-note { grid-column: 1 / -1 !important; }
@media (max-width: 520px) { .bl-when { grid-template-columns: 1fr; } }

/* Shop tool */
.sh-orders, .sh-prods { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sh-order { border: 1px solid var(--rule-strong); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.sh-order.sh-paid { border-color: var(--blueprint); }
.sh-order.sh-cancelled, .sh-order.sh-done { opacity: 0.75; }
.sh-top { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.sh-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-tag { font-size: 0.75rem; font-weight: 700; color: var(--graphite); }
.sh-paid .sh-tag { color: var(--blueprint-deep); }
.sh-test { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 1px 8px; }
.sh-when { margin-left: auto; }
.sh-more summary { cursor: pointer; font-size: 0.9rem; }
.sh-more > * + * { margin-top: 6px; }
.sh-items { margin: 6px 0 0; padding-left: 18px; font-size: 0.9rem; }
.sh-addr { white-space: pre-line; font-size: 0.9rem; margin: 0; }
.sh-note { font-style: italic; margin: 0; }
.sh-prod { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--rule-strong); border-radius: 10px; padding: 8px 10px; }
.sh-prod.sh-hidden { border-style: dashed; opacity: 0.75; }
.sh-thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; display: block; background: var(--tint); }
.sh-nopic { display: grid; place-items: center; color: var(--graphite); font-size: 0.85rem; text-align: center; }
.sh-pname { display: grid; min-width: 0; }
.sh-pname strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-pacts { display: flex; gap: 4px; align-items: center; }
.sh-move { min-width: 34px; padding-inline: 0; }
.sh-dels { display: grid; gap: 6px; }
.sh-del { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 6px; align-items: center; }
.sh-del input { margin: 0; min-width: 0; }
.sh-modal { width: min(760px, calc(100vw - 32px)); }
.sh-form { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.sh-photo { display: grid; gap: 8px; }
.sh-pic { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--tint); border: 1px solid var(--rule-strong); display: grid; place-items: center; }
.sh-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-fields { display: grid; gap: 2px; }
.sh-fields textarea { resize: vertical; }
.sh-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
.sh-photo label.btn { cursor: pointer; }
.sh-photo input[type=file]:focus-visible + label.btn { box-shadow: var(--focus); }
@media (max-width: 640px) {
  .sh-form { grid-template-columns: 1fr; }
  .sh-pic { aspect-ratio: 16 / 10; }
  .sh-two { grid-template-columns: 1fr; gap: 0; }
  .sh-when { margin-left: 0; width: 100%; }
  .sh-del { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; }
  .sh-del input[data-f=name] { grid-column: 1 / -1; }
  .sh-del.bk-head { display: none; }
}

@media (max-width: 640px) {
  .tpk .hx-modal-body { padding: 4px 14px 8px; }
  .tpk-note { display: none; }
  .tpk-tools { gap: 8px; padding-bottom: 10px; }
  .tpk-tools input[type=search] { flex-basis: 100%; }
  .tpk-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tpk-cats button { grid-template-areas: "thumb" "name" "count"; grid-template-columns: minmax(0, 1fr); gap: 4px; padding-bottom: 10px; }
  .tpk-cthumb { margin-bottom: 6px; }
  .tpk-cname { padding: 0 10px; font-size: 0.9rem; }
  .tpk-ccount { justify-self: start; margin: 0 10px; background: none; padding: 0; font-weight: 500; }
  .tpk-ccount::after { content: " templates"; }
  .tpk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .tpk-grid .tg-card button { grid-template-areas: "thumb" "meta" "kind"; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tpk-grid .tg-title { font-size: 0.92rem; }
  .tpk-grid .tg-tag { display: none; }
  .tpk-grid .tg-kind { justify-self: start; padding: 1px 8px; font-size: 0.7rem; }
  .tpk-grid .tg-kind:not(.tg-kind-app) { display: none; }
  .tpk-crumb { gap: 10px; }
  .tpk-crumb .btn { white-space: nowrap; flex: 0 0 auto; }
  .tpk .tpk-crumb h3 { font-size: 1.05rem; min-width: 0; }
  .tpk-grid .tg-price { top: 6px; left: 6px; padding: 2px 8px; font-size: 0.7rem; }
}

/* Fix it: a slim bar over the preview when the page reports an error (self-checks) */
.fixit { position: absolute; top: 24px; left: 24px; right: 24px; max-width: 780px; margin: 0 auto; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; background: var(--raised); border: 1px solid var(--rule-strong); border-left: 3px solid var(--blood); border-radius: 10px; box-shadow: 0 14px 44px -10px rgba(0, 0, 0, 0.8); font-size: 0.9rem; line-height: 1.35; }
.fixit-ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(200, 16, 46, 0.2); color: var(--blueprint); font: 800 0.9rem/1 var(--display); }
.fixit-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fixit-text strong { color: var(--ink); font-weight: 600; }
.fixit-err { min-width: 0; color: var(--graphite); font: 400 0.8rem/1.4 var(--mono); overflow-wrap: anywhere; }
.fixit-loc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font: 400 0.8rem/1.4 var(--mono); }
.fixit-where { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.fixit-more { flex: none; padding: 0 6px; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--graphite); font-family: var(--body); font-size: 0.75rem; }
.fixit-where:empty, .fixit-more:empty, .fixit-note:empty { display: none; }
.fixit-note { color: var(--blueprint-deep); }
.fixit .fixit-go { flex: none; }
.fixit .fixit-go[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.fixit-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--graphite); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.fixit-x:hover { background: var(--tint); color: var(--ink); }
@media (min-width: 701px) { .sheet-frame.vis-open .fixit { right: 322px; } }
@media (max-width: 900px) { .fixit { top: 14px; left: 14px; right: 14px; } }
@media (max-width: 700px) {
  .fixit { flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; padding: 10px 6px 10px 10px; }
  .fixit-text { flex-basis: calc(100% - 80px); padding-right: 22px; }
  .fixit .fixit-go { margin-left: 36px; order: 3; }
  .fixit-x { position: absolute; top: 4px; right: 4px; }
}
/* Live preview while building (live_preview): the live view sits over the preview, the same size, and each new draft
   fades in over the last. The tag sits on the frame's top edge, mostly off the site, so it never hides a site's menu;
   it is dark glass so it reads over any site. */
.live-layer { position: absolute; inset: 14px; z-index: 4; display: flex; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.live-layer.shown { opacity: 1; pointer-events: auto; }
.live-layer.live-out { opacity: 0; pointer-events: none; }
.live-stage { position: relative; width: 100%; height: 100%; transition: width 0.2s; }
.sheet-frame.mobile .live-stage { width: 390px; max-width: 100%; }
.sheet-frame .live-buf { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.2s ease; }
.sheet-frame .live-buf.on { opacity: 1; z-index: 1; }
.sheet-frame .live-buf.in { opacity: 1; z-index: 2; }
.live-layer.live-kbd .live-stage { outline: 2px solid #FF4D6A; outline-offset: 3px; border-radius: 8px; }
#edit-text[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.live-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 11px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(9, 7, 10, 0.86); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.55); color: #F4EEF0; font: 600 0.78rem/1.2 var(--body); letter-spacing: 0.02em; white-space: nowrap; pointer-events: none; }
.live-dot, .tabs button.tab-live::after { width: 8px; height: 8px; border-radius: 50%; background: #C8102E; box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.7); animation: live-pulse 1.6s ease-out infinite; }
.live-dot { flex: none; }
.tabs button.tab-live::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; vertical-align: 1px; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.7); } 70% { box-shadow: 0 0 0 7px rgba(200, 16, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); } }
.sheet-frame.live-on .fixit { display: none; }
@media (max-width: 900px) { .live-layer { inset: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .live-layer, .live-stage, .sheet-frame .live-buf { transition: none; }
  .live-dot, .tabs button.tab-live::after { animation: none; }
}
/* AI in the customer's site (builder tool, feature_site_ai) */
.ai-off { margin: 0 0 10px; padding: 8px 12px; border: 1px solid rgba(255, 77, 106, 0.45); background: rgba(255, 77, 106, 0.08); color: var(--blueprint-deep); border-radius: 8px; font-size: 0.9rem; }
.ai-stats { margin: 4px 0 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-stats .v { font-variant-numeric: tabular-nums; }
.ai-meter { height: 8px; border-radius: 999px; background: var(--raised); border: 1px solid var(--rule); overflow: hidden; margin-bottom: 12px; }
.ai-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--blood), var(--blueprint)); border-radius: 999px; }
.ai-cap { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ai-cap .more-field { width: 180px; }
.ai-cap input { margin: 0; }
.ai-tasks, .ai-recent { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.ai-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--rule-strong); border-radius: 10px; padding: 10px 12px; }
.ai-tname { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.ai-tname .hint { flex-basis: 100%; margin: 0; }
.ai-tacts { display: flex; gap: 6px; }
.more-card code, .ai-modal code { font: 0.82rem var(--mono); color: var(--blueprint-deep); background: var(--tint); border-radius: 4px; padding: 1px 6px; overflow-wrap: anywhere; }
.ai-recent li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 0.9rem; }
.ai-recent li:last-child { border-bottom: 0; }
.ai-when { margin: 0; min-width: 7.5em; }
.ai-ex { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.ai-modal { width: min(680px, calc(100vw - 24px)); }
.ai-modal textarea { resize: vertical; }
.ai-modal .btn { margin: 0; }
.more-row.ai-row { flex-wrap: wrap; }
.ai-modal .more-error:empty { display: none; }
.ai-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ai-out { display: grid; gap: 8px; max-height: 320px; overflow: auto; }
.ai-out:empty { display: none; }
.ai-bubble { padding: 10px 12px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.95rem; }
.ai-bubble pre { margin: 0; white-space: pre-wrap; font: 0.85rem var(--mono); }
.ai-user { justify-self: end; max-width: 85%; background: var(--raised); border: 1px solid var(--rule-strong); }
.ai-ai { background: var(--tint); border: 1px solid rgba(255, 77, 106, 0.35); }
@media (max-width: 640px) {
  .ai-task { grid-template-columns: 1fr; }
  .ai-two { grid-template-columns: 1fr; gap: 0; }
  .ai-cap .more-field { width: 100%; }
  .ai-stats .more-stat { padding: 10px; }
  .ai-stats .v { font-size: 1.4rem; }
}

/* Add-on offers under the builder's replies (offers.js): the spell card's shape, hex red, the price in brimstone.
   At most 560px wide, so in a wide chat column the price stays near the title and the reason reads in short lines. */
.offer-card { max-width: 560px; margin-top: 10px; display: grid; gap: 6px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--blueprint) 45%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--blood) 9%, transparent); }
.offer-card p { margin: 0; }
.offer-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.offer-t { font-weight: 700; color: var(--ink); }
.offer-t::before { content: ""; display: inline-block; width: 12px; height: 11px; margin-right: 8px; background: var(--blueprint); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.offer-kind { margin-left: 4px; color: var(--graphite); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.offer-price { color: var(--pencil); font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
.offer-why { overflow-wrap: anywhere; }
.offer-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.offer-msg { font-size: 0.85rem; color: var(--graphite); }
.offer-msg:empty { display: none; }
.offer-card.offer-added { border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: color-mix(in srgb, var(--ok) 6%, transparent); }
.offer-added .offer-t::before { content: "\2713"; width: auto; height: auto; background: none; clip-path: none; color: var(--ok); }
.offer-hidden { max-width: 560px; margin: 10px 0 0; font-size: 0.85rem; color: var(--graphite); }
.offer-hidden::before { content: ""; display: inline-block; width: 10px; height: 9px; margin-right: 8px; background: var(--rule-strong); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
/* Templates the builder named under its reply (builder.js templateCards): the picture beside the name, the price in
   brimstone. Stacks on narrow chat columns. */
.ct-cards { max-width: 560px; margin-top: 10px; display: grid; gap: 8px; }
.ct-card { display: grid; grid-template-columns: 112px 1fr; gap: 10px 12px; align-items: start; padding: 10px; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--raised); }
.ct-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; border: 1px solid var(--rule); background: #fff; }
.ct-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ct-info { display: grid; gap: 4px; min-width: 0; }
.ct-info p { margin: 0; }
.ct-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.ct-name { font-weight: 700; color: var(--ink); }
.ct-kind { color: var(--graphite); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.ct-game { display: inline-block; box-sizing: border-box; max-width: 100%; line-height: 1.5; padding: 1px 8px 1px 7px; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink); font-size: 0.72rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-game::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 1px; vertical-align: middle; border-radius: 1px; background: var(--blood); transform: rotate(45deg); }
.ct-line { color: var(--graphite); font-size: 0.9rem; overflow-wrap: anywhere; }
.ct-foot { grid-column: 1 / -1; display: grid; gap: 6px; }
.ct-foot p { margin: 0; }
.ct-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-cost { font-size: 0.8rem; color: var(--graphite); }
.ct-price { color: var(--pencil); font-weight: 700; }
.ct-free { color: var(--ok); font-weight: 700; }
@media (max-width: 420px) { .ct-card { grid-template-columns: 1fr; } .ct-pic { max-width: 220px; } }
/* A plan's Build it and Edit plan are its next step: a rule sets them apart from the add-ons above. */
:is(.offer-deck, .offer-card, .ct-cards) + .plan-actions { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
/* Several add-ons in one reply: a deck. Only the front card shows (the card going back stays while it slides off), and
   the deck takes its height, easing to the next card's when they page. The other cards' edges peek out below and the
   names underneath list everything on offer. */
.offer-deck { max-width: 560px; margin-top: 10px; }
.offer-deck .offer-card { max-width: none; }
.offer-stage { position: relative; display: grid; align-items: start; overflow: clip; overflow-clip-margin: 16px; transition: height 180ms ease-out; }
.offer-stage > .offer-card { grid-area: 1 / 1; margin: 0; }
.offer-deck .offer-stage > .offer-card:not(.is-front):not(.is-leaving) { display: none; }
.offer-stage > .offer-card.is-leaving { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.offer-deck:not(.is-single) .offer-stage { touch-action: pan-y; }
.offer-deck:not(.is-single) .offer-card.is-front { box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.7); }
.offer-stage > .offer-card.is-settling { transition: transform 160ms ease-out; }
.offer-stage > .offer-card:focus-visible { box-shadow: none; outline: 2px solid var(--blueprint); outline-offset: -2px; border-radius: 12px; }
/* The price keeps to the top right however a long name wraps, so it doesn't jump about while paging. */
.offer-deck .offer-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; }
.offer-nav { display: none; }
.offer-deck:not(.is-single) .offer-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px -8px -2px 0; }
.offer-count { color: var(--graphite); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.offer-steps { display: inline-flex; gap: 4px; }
.offer-step { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--rule-strong); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.offer-step svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.offer-step:disabled { opacity: 0.35; cursor: default; }
.offer-step:focus-visible { border-radius: 50%; }
.offer-edges { display: grid; align-content: start; }
.offer-edges-1 { height: 8px; }
.offer-edges-2 { height: 16px; }
.offer-edge { position: relative; height: 8px; margin: 0 10px; border: 1px solid color-mix(in srgb, var(--blueprint) 55%, transparent); border-top: 0; border-radius: 0 0 10px 10px; background: color-mix(in srgb, var(--blood) 12%, var(--white)); cursor: pointer; }
.offer-edge::before { content: ""; position: absolute; inset: -4px 0 -6px; } /* a bigger target than the 8px edge */
.offer-edge:has(+ .offer-edge)::before { bottom: 0; } /* two edges: their targets meet, never overlap */
.offer-edge + .offer-edge::before { top: 0; }
.offer-edge + .offer-edge { margin: 0 20px; opacity: 0.7; }
.offer-edge.is-added { border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: color-mix(in srgb, var(--ok) 8%, var(--white)); }
/* The names: each one's dot sits in the gap before it, so a name that starts a line takes its dot past the list's left
   edge, where it's clipped: a dot never hangs at the end of a line. offers.js keeps them to two lines ("+3 more"). */
.offer-names { display: none; }
.offer-deck:not(.is-single) .offer-names { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; overflow-x: clip; }
.offer-names li { position: relative; display: inline-flex; align-items: center; margin-left: -8px; padding-left: 8px; }
.offer-names li[hidden] { display: none; }
.offer-names li::before { content: "\00B7" / ""; position: absolute; left: 0; width: 8px; color: var(--rule-strong); font-weight: 700; text-align: center; }
.offer-names li.offer-names-more { margin-left: 0; padding-left: 4px; }
.offer-names li.offer-names-more::before { content: none; }
.offer-name { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 4px; border: 0; border-radius: 4px; background: none; color: var(--graphite); font: 500 0.8rem/1.3 var(--body); text-align: left; cursor: pointer; }
.offer-more { min-height: 24px; padding: 2px 9px; border: 1px solid var(--rule-strong); border-radius: 999px; background: none; color: var(--ink); font: 600 0.75rem/1.2 var(--body); cursor: pointer; }
/* Ticked names it hides: a red hex on the pill, as on the names. */
.offer-more.has-ticked { display: inline-flex; align-items: center; gap: 5px; }
.offer-more.has-ticked::before { content: ""; flex: none; width: 9px; height: 8px; background: var(--blood); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.offer-name.is-front { color: var(--ink); text-decoration: underline 2px var(--blueprint); text-underline-offset: 4px; }
.offer-name.is-ticked { color: var(--ink); }
.offer-name.is-ticked::before { content: ""; flex: none; width: 9px; height: 8px; background: var(--blood); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.offer-name.is-added::before { content: "\2713"; width: auto; height: auto; background: none; clip-path: none; color: var(--ok); font-size: 0.75rem; line-height: 1; }
.offer-name:focus-visible { box-shadow: none; outline: 2px solid var(--blueprint); outline-offset: -2px; border-radius: 4px; } /* inside, so the list's clipped edge never cuts it */
.offer-more:focus-visible { border-radius: 999px; }
.offer-foot:empty { display: none; }
@media (hover: hover) {
  .offer-step:hover:not(:disabled) { border-color: var(--blueprint); background: var(--tint); color: var(--blueprint); }
  .offer-edge:hover { border-color: var(--blueprint); background: color-mix(in srgb, var(--blood) 24%, var(--white)); opacity: 1; }
  .offer-name:hover { color: var(--ink); text-decoration: underline 2px var(--rule-strong); text-underline-offset: 4px; }
  .offer-name.is-front:hover { text-decoration-color: var(--blueprint); }
  .offer-more:hover { border-color: var(--blueprint); background: var(--tint); }
}
/* Paging: the card going back slides off the way it's going (from where a swipe left it), the new one rises out of
   the stack, and the edges fade in again. With reduced motion the rule at the top of this file stops all of it (and
   offers.js doesn't drag the card), so the card just changes. */
@keyframes offer-in-next { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes offer-in-prev { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes offer-out-next { to { opacity: 0; transform: translateX(var(--out, -24px)); } }
@keyframes offer-out-prev { to { opacity: 0; transform: translateX(var(--out, 24px)); } }
@keyframes offer-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .offer-stage > .offer-in-next, .offer-stage > .offer-in-prev { animation: offer-in-next 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .offer-stage > .offer-in-prev { animation-name: offer-in-prev; }
  .offer-stage > .offer-out-next { animation: offer-out-next 160ms ease-in forwards; }
  .offer-stage > .offer-out-prev { animation: offer-out-prev 160ms ease-in forwards; }
  .offer-edges.is-moving .offer-edge { animation: offer-fade-in 120ms ease-out; }
}
/* The basket (offers.js): in a deck, each add-on the owner can buy here gets a tick in place of Add it, a checkbox drawn
   as a hex that fills red. Once something is ticked, the bar under the names counts them up (the price as the cards show
   theirs, the amount in Syne) and one Buy pays for them all; until then a one-line hint, on the latest deck that still has
   something to tick (.can-tick). The bar stays on one row, Buy on the right, down to a 300px column: two short lines of
   words, "2 add-ons · £14 a month" (the price under the count, without its dot, when they don't fit side by side) and the
   names on one line ("Members area + 1 more" on a narrow deck). */
.offer-deck { container-type: inline-size; }
.offer-basket-hint { margin: 4px 0 0; font-size: 0.8rem; color: var(--graphite); }
.msg:has(~ .msg .offer-deck.can-tick) .offer-basket-hint { display: none; }
.offer-alone { font-size: 0.8rem; }
.offer-tick { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin: 0; padding: 6px 16px 6px 11px; border: 1px solid var(--rule-strong); border-radius: 999px; background: transparent; color: var(--ink); font: 600 0.92rem/1.2 var(--body); cursor: pointer; user-select: none; transition: background 0.15s, border-color 0.15s; }
.offer-tick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.offer-tick:has(input:focus-visible) { box-shadow: var(--focus); }
.offer-tick-hex { flex: none; width: 20px; height: 18px; }
.offer-tick-hex polygon { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-linejoin: round; transition: fill 0.15s, stroke 0.15s; }
.offer-tick-hex path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.offer-tick.is-on { border-color: var(--blood); background: color-mix(in srgb, var(--blood) 22%, transparent); }
.offer-tick.is-on .offer-tick-hex polygon { fill: var(--blood); stroke: var(--blueprint); }
.offer-tick.is-on .offer-tick-hex path { opacity: 1; }
.offer-basket { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin-top: 10px; padding: 10px 10px 10px 12px; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--raised); }
.offer-basket p { margin: 0; }
.offer-basket-hex { position: relative; display: grid; place-items: center; width: 34px; height: 31px; }
.offer-basket-shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.offer-basket-shape polygon { fill: var(--blood); stroke: var(--blueprint); stroke-width: 0.8; stroke-linejoin: round; }
.offer-basket-shape path { display: none; }
.offer-basket-n { position: relative; color: var(--ink); font: 700 0.9rem/1 var(--body); font-variant-numeric: tabular-nums; }
.offer-basket-words { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; } /* a column no wider than its room, so a long names line is cut, not run under Buy */
.offer-basket-sum { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; overflow-x: clip; color: var(--ink); font: 600 0.9rem/1.35 var(--body); }
.offer-basket-count { white-space: nowrap; }
/* Its dot sits in the gap before it (as the names under the deck do): moved under the count, the dot goes past the edge. */
.offer-basket-price { position: relative; margin-left: -14px; padding-left: 14px; white-space: nowrap; }
.offer-basket-price::before { content: "\00B7" / ""; position: absolute; left: 0; width: 14px; color: var(--graphite); font-weight: 700; text-align: center; }
.offer-basket-amt { color: var(--pencil); font: 700 0.95rem/1.35 var(--display); }
.offer-basket-per { color: var(--pencil); font: 700 0.9rem/1.35 var(--body); }
.offer-basket-names { color: var(--graphite); font-size: 0.82rem; line-height: 1.35; overflow-wrap: anywhere; }
.offer-basket-all { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* screen readers, at any width */
.offer-basket-short { display: flex; min-width: 0; white-space: nowrap; }
.offer-basket-first { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.offer-basket-more { flex: none; padding-left: 0.35em; }
@container (min-width: 480px) {
  .offer-basket-all { position: static; display: block; width: auto; height: auto; clip-path: none; text-overflow: ellipsis; }
  .offer-basket-short { display: none; }
}
.offer-buy { min-width: 84px; min-height: 40px; }
.offer-card .btn[aria-disabled="true"], .offer-buy[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.offer-basket-msg { grid-column: 1 / -1; font-size: 0.85rem; }
.offer-basket-msg:empty { display: none; }
.offer-basket.is-done { border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: color-mix(in srgb, var(--ok) 6%, transparent); }
.offer-basket.is-done .offer-basket-shape polygon { fill: none; stroke: var(--ok); stroke-width: 1.4; }
.offer-basket.is-done .offer-basket-shape path { display: block; fill: none; stroke: var(--ok); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .offer-tick:hover { border-color: var(--graphite); background: var(--tint); }
  .offer-tick.is-on:hover { border-color: var(--blueprint); background: color-mix(in srgb, var(--blood) 30%, transparent); }
}
/* Phones and tablets: arrows, names and Buy big enough to tap beside each other. */
@media (pointer: coarse) {
  .offer-step { width: 44px; height: 44px; }
  .offer-steps { gap: 8px; }
  .offer-deck:not(.is-single) .offer-nav { margin: -10px -10px -4px 0; }
  .offer-name { min-height: 36px; padding: 6px; }
  .offer-more { min-height: 36px; padding: 6px 12px; }
  .offer-buy { min-height: 44px; }
}
@container (max-width: 300px) {
  .offer-basket { grid-template-columns: auto minmax(0, 1fr); padding: 10px 12px 12px; }
  .offer-buy { grid-column: 1 / -1; width: 100%; margin-top: 8px; }
}

/* Beta: the "Beta tester" tag (billing and Admin; the rest of the beta's styles are in beta.css). */
.beta-tag { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border: 1px solid rgba(255, 77, 106, 0.55); border-radius: 999px; background: var(--tint); color: var(--blueprint-deep); font: 600 0.78rem/1.2 var(--body); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; vertical-align: middle; white-space: nowrap; }
.beta-tag::before { content: ""; width: 9px; height: 10px; background: var(--blueprint); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
a.beta-tag:hover { color: #fff; border-color: var(--blueprint); }
.beta-tag-small { padding: 1px 7px 1px 6px; gap: 5px; font-size: 0.66rem; }
.beta-tag-small::before { width: 7px; height: 8px; }
/* Team: office roles in the staff admin (panel.js officeRoles, staffroles.php). The confirmation sits in the card. */
.or-state { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 0.82rem/1.2 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite); }
.or-dot { width: 9px; height: 10px; background: var(--rule-strong); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.or-dot.on { background: var(--ok); }
.or-card .or-text { color: var(--ink); max-width: 66ch; }
.or-roles { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.or-roles li { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; max-width: 100%; padding: 4px 12px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--raised); color: var(--ink); font-size: 0.9rem; line-height: 1.4; overflow-wrap: anywhere; }
.or-roles li span { min-width: 0; }
.or-roles small { color: var(--blueprint-deep); font-size: 0.76rem; }
.or-ask { margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(200, 16, 46, 0.55); border-radius: 8px; background: rgba(200, 16, 46, 0.08); }
.or-ask strong { display: block; font: 700 1.02rem/1.3 var(--display); color: var(--ink); }
.or-ask p { margin: 6px 0 12px; max-width: 66ch; font-size: 0.92rem; color: var(--graphite); }
.or-ask-acts, .or-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.or-acts { margin-top: 14px; }
.or-card .more-flash { margin-top: 12px; }
.or-card .more-flash:focus { box-shadow: none; }
@media (max-width: 520px) { .or-ask-acts .btn, .or-acts .btn { flex: 1 1 auto; } }

/* Printing Hexwork's pages (terms, privacy, plans, the app's own pages): black on white with the logo for light
   backgrounds (the official file, hexwork-logo-light.svg), and no menus, buttons, forms or floating widgets. */
@media print {
  :root { color-scheme: light; }
  html, body { background: #fff !important; }
  body, body * { color: #09070A !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; }
  body::before, body::after, .hero::after, .blueprint::before { display: none !important; }
  .topbar { position: static; border: 0; padding: 0 0 12pt; }
  .wordmark img { content: url("hexwork-logo-light.svg"); height: 28px; width: auto; object-fit: contain; }
  .topbar nav, .skip, .viewing, .foot-links, .help-fab, .help-box, .builder-toasts, .adm-side, .adm-savebar, form, button, .btn, .hero-actions, .tool-rail { display: none !important; }
  a { text-decoration: underline; }
  .sheet, .pl-card, .card, .offer-card, details { border-color: #C9C2C6 !important; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}