/* =====================================================================
   BOARD (Nov 2026): white modules, hairlines, square corners, one violet.
   Overrides the zine rules above; new shell, tabs, tiles and timeline.
   ===================================================================== */
h1 { font: 650 1.5rem/1.15 var(--ui); letter-spacing: -0.01em; font-stretch: normal; }
h2 { font: 600 0.9375rem/1.3 var(--ui); letter-spacing: 0; font-stretch: normal; }
h3 { font: 600 0.875rem/1.3 var(--ui); }
.mono, code { font-family: var(--mono); }
.nowrap { white-space: nowrap; }

/* shell */
body.has-side { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--paper); border-right: 1px solid var(--rule); padding: 1.1rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
.logo { display: flex; align-items: center; gap: 0.55rem; font: 700 0.9375rem var(--ui); color: var(--ink); text-decoration: none; padding: 0 0.5rem 1.25rem; }
.logo i { width: 0.875rem; height: 0.875rem; background: var(--acc); display: block; }
.side-lab { font: 500 0.6875rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin: 0.9rem 0.5rem 0.35rem; }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.side-cr { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.5rem; color: var(--ink-2); text-decoration: none; font-size: 0.875rem; border-left: 2px solid transparent; min-height: 2.25rem; }
.side-cr img, .side-av { width: 1.5rem; height: 1.5rem; object-fit: cover; flex: none; }
.side-av { display: grid; place-items: center; background: var(--paper-2); color: var(--ink-3); font-weight: 600; font-size: 0.75rem; }
.side-cr .icon { width: 1.5rem; color: var(--ink-3); }
.side-cr:hover { background: var(--paper-2); color: var(--ink); }
.side-cr[aria-current="page"] { background: var(--paper-2); color: var(--ink); font-weight: 600; border-left-color: var(--acc); }
.side-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-n { font: 500 0.6875rem var(--mono); background: var(--acc); color: #fff; padding: 0.05rem 0.35rem; }
.side-cred { font: 500 0.75rem var(--mono); color: var(--ink-3); }
.side-foot { margin-top: auto; display: grid; gap: 0.5rem; padding-top: 1rem; }
.cred-card { display: block; border: 1px solid var(--rule); padding: 0.75rem; text-decoration: none; color: var(--ink); }
.cred-card:hover { border-color: var(--acc); color: var(--ink); }
.cred-card small { color: var(--ink-3); font-size: 0.75rem; display: block; }
.cred-card b { font: 700 1.25rem/1.2 var(--ui); display: block; margin: 0.1rem 0 0.5rem; }
.bar { display: block; height: 5px; background: #ececf0; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--acc); }
.who { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; padding: 0 0.25rem; }
.who .email { font-size: 0.75rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
main { max-width: 84rem; width: 100%; margin: 0; padding: 1.5rem 1.75rem 4rem; }
body:not(.has-side) main { margin: 0 auto; }
.mast { display: none; }

/* controls */
.btn { white-space: nowrap; border-radius: 0; border: 1px solid var(--rule-strong); min-height: 2.5rem; padding: 0.5rem 0.95rem; font: 600 0.875rem/1.1 var(--ui); background: var(--paper); transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.btn:hover { background: var(--paper-2); border-color: var(--ink-3); }
.btn:active { transform: none; }
.btn.ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.ink:hover { background: #2a2a31; color: #fff; }
.btn.next, .btn.on-blue { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn.next:hover, .btn.on-blue:hover { background: var(--acc-ink); border-color: var(--acc-ink); color: #fff; }
.btn.quiet { border-color: transparent; background: transparent; }
.btn.quiet:hover { background: var(--paper-2); border-color: transparent; }
.btn.small { min-height: 2.125rem; padding: 0.35rem 0.7rem; font-size: 0.8125rem; }
.btn.sq { width: 2.125rem; padding: 0; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=date], select, textarea { border-radius: 0; border: 1px solid var(--rule-strong); min-height: 2.5rem; background: var(--paper); }
input:focus, select:focus, textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
input[type=checkbox], input[type=radio] { accent-color: var(--acc); }
input[type=file] { border-radius: 0; border: 1px dashed var(--rule-strong); }
input[type=file]::file-selector-button { border-radius: 0; border: 1px solid var(--rule-strong); font: 600 0.8125rem var(--ui); }
label { font-weight: 600; font-size: 0.875rem; }
.flash li { border-radius: 0; border: 1px solid var(--rule); border-left: 3px solid var(--ink-3); box-shadow: none; }
.flash li.ok { background: var(--paper); border-left-color: var(--up); }
.flash li.error, .errors { background: #fff5f5; border-left: 3px solid var(--down); }
.errors { border-radius: 0; border: 1px solid #f1c9c9; }
.empty-note { border: 1px dashed var(--rule-strong); border-radius: 0; color: var(--ink-3); background: transparent; }
.trouble { border-radius: 0; border: 1px solid #f1c9c9; border-left: 3px solid var(--down); background: #fff8f8; }
.clip-trouble { text-decoration: none; color: var(--down); }
.advice { border-radius: 0; border: 1px solid var(--rule); background: var(--paper-2); }
.crumb { color: var(--ink-3); }

/* status: small square badges, word always printed */
.stamp, .badge { transform: none; box-shadow: none; border-radius: 0; font: 500 0.6875rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.28rem 0.45rem; border: 1px solid var(--ink-2); background: var(--paper); color: var(--ink); display: inline-flex; gap: 0.3rem; align-items: center; }
.stamp.solid { background: #e9f6ee; border-color: #9fd3b2; color: #0b6a30; }
.stamp.pending { background: var(--acc-soft); border: 1px solid #c9bdff; color: var(--acc-ink); }
.stamp.next { border-style: dashed; border-color: var(--ink-3); color: var(--ink-2); }
.stamp.struck { color: var(--down); border-color: #f1c9c9; background: #fff5f5; text-decoration: none; }
.badge.acc { background: var(--acc); border-color: var(--acc); color: #fff; }

/* lessons: flat chips */
.sticker, .sticker:nth-child(2n), .sticker:nth-child(3n) { transform: none; border-radius: 0; box-shadow: none; border: 1px solid var(--rule); border-left: 3px solid var(--acc); background: var(--paper); animation: none; }
.sticker.avoid { border-left-color: var(--ink-3); background: var(--paper); }
.sticker.low, .sticker.avoid.low { border-style: solid; border-left-style: dashed; background: var(--paper); box-shadow: none; }
.sticker .ratio { font: 700 0.9375rem/1.1 var(--ui); color: var(--acc-ink); }
.sticker .conf { color: var(--ink-3); font-weight: 500; }

/* modules: every legacy .module becomes a white box with a hairline header */
.module, fieldset.module { background: var(--paper); border: 1px solid var(--rule); padding: 0 1rem 1rem; }
.module + .module { margin-top: 1rem; }
.module-head { margin: 0 -1rem 0.875rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--rule); align-items: center; }
/* section headers: weight, size and the full-width hairline under them carry the hierarchy; no side stripe or accent mark */
.module-head h2, fieldset.module legend, .mod > h2 { display: flex; align-items: center; gap: 0.5rem; font: 650 0.9375rem/1.3 var(--ui); letter-spacing: -0.005em; color: var(--ink); }
.module-head h2 span { background: none; padding: 0; }
.module-head p { font-size: 0.8125rem; }
fieldset.module { padding-top: 0.75rem; }
fieldset.module legend { float: left; margin-bottom: 0.75rem; }
.rows > li.row-awaiting_approval { background: var(--acc-soft); }
table { font-size: 0.875rem; }
th { border-bottom: 1px solid var(--rule); font-weight: 500; }
details summary { color: var(--ink-2); }

/* dashboard spreads (All creators) */
.spread { background: var(--paper); border: 1px solid var(--rule); border-top: 1px solid var(--rule); padding: 1rem; }
.spread-title h2 { font: 650 1.125rem var(--ui); }
.strip { transform: none; box-shadow: none; border: 1px solid var(--rule); background: var(--paper); }
.frame, .frame:nth-child(2), .frame:nth-child(3) { background: var(--paper-2); }
.frame img, .frame:nth-child(2) img, .frame:nth-child(3) img { filter: none; mix-blend-mode: normal; transform: none; }
.frame::after { display: none; }
.frame.text { color: var(--ink-2); background-image: none; }
.strip figcaption { color: var(--ink-2); }
.big { display: block; margin-left: 0 !important; font: 700 clamp(2.5rem, 8vw, 3.5rem)/1 var(--ui); letter-spacing: -0.02em; }
.big .reg { display: none; }
.big .key { color: var(--ink); mix-blend-mode: normal; }
.big-empty { margin-left: 0; transform: none; border: 1px dashed var(--rule-strong); font: 600 1rem/1.3 var(--ui); background: var(--paper); }
.meter { border-radius: 0; border: 0; height: 6px; background: #ececf0; }
.meter-fill { background: var(--acc); background-image: none; }
progress.meter-fill { color: var(--acc); } progress.meter-fill::-webkit-progress-value { background: var(--acc); } progress.meter-fill::-moz-progress-bar { background: var(--acc); }
.post { border: 1px solid var(--rule); } .post .views { background: var(--acc-soft); color: var(--acc-ink); font: 700 0.9375rem var(--ui); }
.post:first-child .views { background: var(--acc); color: #fff; }

/* the ticket: next action as a white module with a violet top edge */
.ticket { -webkit-mask: none; mask: none; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--acc); border-radius: 0; animation: none; }
.ticket .stub { background: none; height: auto; padding: 0.7rem 1rem; border-bottom: 1px solid var(--rule); border-radius: 0; align-items: center; }
.ticket .stub::after { display: none; }
.ticket h2, .ticket h3 { color: var(--ink); }
.ticket .no { font: 500 0.75rem var(--mono); margin: 0; color: var(--ink-3); }
.ticket .ticket-body { background: none; padding: 0.875rem 1rem 1rem; border-radius: 0; }
.ticket.torn .ticket-body { transform: none; }
.ticket a { color: var(--acc-ink); text-decoration-color: currentColor; }
.ticket a.btn { color: #fff; }
.ticket li { border-bottom: 1px solid var(--rule); }
.ticket .note { color: var(--ink-3); }
.script { background: var(--paper-2); border-radius: 0; }

/* creator head + tabs */
.c-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 1rem; align-items: center; background: var(--paper); border: 1px solid var(--rule);
  margin: -1.5rem -1.75rem 1.25rem; padding: 1rem 1.75rem 0; border-width: 0 0 1px; }
.c-id { display: flex; gap: 0.875rem; align-items: center; min-width: 0; }
.c-av { width: 3rem; height: 3rem; object-fit: cover; flex: none; }
.c-av.blank { display: grid; place-items: center; background: var(--paper-2); color: var(--ink-3); font-weight: 650; font-size: 1.25rem; }
.c-head .sub { color: var(--ink-3); font-size: 0.875rem; margin-top: 0.15rem; }
.c-actions { display: flex; gap: 0.375rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tabs { grid-column: 1 / -1; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; margin-top: 0.25rem; }
.tabs a { padding: 0.65rem 1rem; color: var(--ink-3); text-decoration: none; font-weight: 500; font-size: 0.875rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--acc); }
.src-note { color: var(--ink-3); font-size: 0.8125rem; margin-bottom: 0.75rem; }
.studio-note { margin-bottom: 1rem; padding: 0.6rem 0.8rem; background: var(--paper); border: 1px solid var(--rule); }

/* the board grid */
.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.75rem; align-items: start; }
.board > * { grid-column: span 12; min-width: 0; }
.span-12 { grid-column: span 12; }
@media (min-width: 1000px) { .board > .span-5 { grid-column: span 5; } .board > .span-7 { grid-column: span 7; } .board > .tile { grid-column: span 2; } }
@media (min-width: 600px) and (max-width: 999px) { .board > .tile { grid-column: span 4; } }
@media (max-width: 599px) { .board > .tile { grid-column: span 6; } }
.tile { background: var(--paper); border: 1px solid var(--rule); }
.tile h3 { display: flex; align-items: center; gap: 0.45rem; font: 500 0.75rem/1.2 var(--ui); color: var(--ink-2); padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--rule); }
.tile b { display: block; font: 700 1.5rem/1.15 var(--ui); letter-spacing: -0.01em; padding: 0.6rem 0.75rem 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile b .of { font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); }
.tile em, .tile small { display: block; padding: 0 0.75rem 0.65rem; font-style: normal; font-size: 0.75rem; color: var(--ink-3); }
.tile em.up { color: var(--up); font-weight: 600; } .tile em.down { color: var(--down); font-weight: 600; }
.tile .bar { margin: 0.35rem 0.75rem 0.35rem; }
.mod { background: var(--paper); border: 1px solid var(--rule); }
.mod > h2 { padding: 0.6rem 0.875rem; border-bottom: 1px solid var(--rule); }
.mod > h2 .aside { margin-left: auto; font-weight: 400; font-size: 0.75rem; color: var(--ink-3); }
.mod > .empty-note, .mod > .lesson, .mod > p { margin: 0.875rem; }
.mod .lesson { padding: 0.75rem 0.875rem; margin: 0; border-top: 1px solid var(--rule); }
.mod .lesson:first-of-type { border-top: 0; }
.ptable td, .ptable th { padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.ptable tr:last-child td { border-bottom: 0; }
.ptable th { background: #fafafb; color: var(--ink-3); font-size: 0.75rem; }
.ptable td.n { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.ptable td.rank { width: 2rem; color: var(--ink-3); font-family: var(--mono); }
.ptable a { text-decoration: none; } .ptable a:hover { text-decoration: underline; }
.vbar { display: block; height: 4px; background: #ececf0; margin-top: 0.3rem; min-width: 5rem; }
.vbar i { display: block; height: 100%; background: var(--acc); }
.ptable tr:not(:first-child) .vbar i { background: #b9b9c4; }

/* the timeline */
.tl-body { padding: 0.875rem; overflow-x: auto; }
.track { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; min-width: 56rem; align-items: stretch; }
.clip { flex: 1 1 0; min-width: 4.75rem; display: grid; grid-template-rows: auto 6.5rem auto; gap: 0.3rem; }
.clip-day { font: 500 0.6875rem var(--mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.clip-face { display: flex; flex-direction: column; justify-content: space-between; gap: 0.25rem; padding: 0.4rem; background: #ececf0; color: var(--ink); text-decoration: none; overflow: hidden; }
a.clip-face:hover { background: var(--acc-soft); color: var(--ink); }
.clip:has(.clip-v) .clip-face { border-top: 3px solid var(--acc); }
.clip-v { font: 500 0.75rem var(--mono); background: var(--ink); color: #fff; padding: 0.1rem 0.35rem; align-self: flex-start; }
.clip.fresh .clip-v { background: var(--acc); }
.clip-t { font-size: 0.75rem; line-height: 1.25; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clip-w { display: block; height: 5px; background: #ececf0; }
.clip-w i { display: block; height: 100%; background: #9a9aa6; }
.clip.empty { flex: 3; display: block; color: var(--ink-3); padding: 2rem 0; font-size: 0.875rem; }
.tl-today { flex: none; width: 2px; background: var(--acc); position: relative; margin: 0 0.5rem; }
.tl-today span { position: absolute; top: 0; left: 0; transform: translateX(-50%); background: var(--acc); color: #fff; font: 600 0.625rem var(--mono); text-transform: uppercase; padding: 0.1rem 0.35rem; }
.ahead { flex: 2.4 1 0; min-width: 16rem; display: grid; grid-template-rows: auto 1fr; gap: 0.4rem; position: relative; padding-top: 1.15rem;
  background: repeating-linear-gradient(135deg, transparent 0 7px, rgb(106 75 255 / 0.06) 7px 14px); border: 1px dashed #c9c9d2; }
.next-card { margin: 0 0.5rem; background: var(--paper); border: 1px solid var(--acc); border-top-width: 3px; padding: 0.6rem 0.75rem; display: grid; gap: 0.4rem; justify-items: start; }
.ghosts { list-style: none; margin: 0; padding: 0 0.5rem 0.5rem; display: flex; gap: 3px; align-items: end; }
.ghosts li { flex: 1; min-width: 0; display: grid; gap: 0.2rem; }
.ghosts .ghost-t { font-size: 0.6875rem; line-height: 1.2; color: var(--ink-3); background: var(--paper); border: 1px dashed #c9c9d2; padding: 0.3rem; height: 3.2rem; overflow: hidden; }

/* Create: launcher, then the tools */
.launch { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.launch a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0.1rem 0.75rem; padding: 0.9rem; background: var(--paper); border: 1px solid var(--rule); text-decoration: none; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s; }
.launch a:hover { border-color: var(--acc); box-shadow: inset 0 -3px 0 var(--acc); color: var(--ink); }
.launch .l-ic { grid-row: span 2; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; background: var(--acc-soft); color: var(--acc-ink); }
.launch b { font-size: 0.9375rem; } .launch small { color: var(--ink-3); font-size: 0.8125rem; }
.panel > .module, .panel > .review { margin-top: 0.75rem; }
html.tabbed .panel[hidden] { display: none; }

/* motion: quiet, one curve */
@media (prefers-reduced-motion: no-preference) {
  html.tabbed .panel:not([hidden]) { animation: fade 0.22s var(--pop); }
  .clip-face, .tile { animation: fade 0.3s var(--pop) backwards; }
}
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }

/* phones: the sidebar becomes a two-row top bar. Row 1: logo, credits, account. Row 2: every destination in one strip
   that scrolls sideways; portal.js fades the edge that has more behind it and brings the current page into view. */
@media (max-width: 859px) {
  body.has-side { display: block; }
  .side { position: sticky; top: 0; z-index: 20; height: auto; overflow: visible; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "logo . foot" "nav nav nav";
          align-items: center; gap: 0.25rem 0.5rem; padding: 0.4rem 0.75rem 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .logo { grid-area: logo; padding: 0 0.25rem; font-size: 0; gap: 0; } .logo i { width: 1rem; height: 1rem; }
  .side-nav { grid-area: nav; display: flex; align-items: stretch; gap: 0.25rem; margin: 0 -0.75rem; padding: 0 0.75rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: 2.5rem; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav[data-more~="right"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
  .side-nav[data-more~="left"] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); }
  .side-nav[data-more~="left"][data-more~="right"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
  .side-lab, .side-foot .who, .cred-card .bar { display: none; }
  .cred-card small, .side-add .side-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* read out, not shown */
  .side-list { display: flex; gap: 0.25rem; flex: none; }
  .side-list + .side-lab + .side-list { border-left: 1px solid var(--rule); padding-left: 0.25rem; }
  .side-cr { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; padding: 0.5rem 0.5rem 0.45rem; min-height: 2.75rem; }
  .side-cr[aria-current="page"] { border-bottom-color: var(--acc); background: none; }
  .side-cr:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
  .side-cr .icon { display: none; }
  .side-name { overflow: visible; }
  .side-foot { grid-area: foot; margin: 0; padding: 0; }
  .cred-card { padding: 0.3rem 0.5rem; white-space: nowrap; } .cred-card b { font-size: 0.8125rem; margin: 0; }
  .side-cred { display: none; }
  main { padding: 1rem 1rem 3rem; }
  .c-head { margin: -1rem -1rem 1rem; padding: 0.875rem 1rem 0; grid-template-columns: 1fr; }
  .c-actions { justify-content: flex-start; }
  h1 { font-size: 1.25rem; }
}

.board > .tile { align-self: stretch; }
input, select, textarea { font-weight: 400; }
select { border: 1px solid var(--rule-strong) !important; }
.ptable td.mono { font-size: 0.75rem; width: 1%; color: var(--ink-2); }
.ghosts .ghost-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: auto; min-height: 3.2rem; }

/* All creators: one card per creator */
.cards { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.card { background: var(--paper); border: 1px solid var(--rule); display: grid; grid-template-rows: auto auto 1fr auto; }
.card-head { display: flex; gap: 0.75rem; align-items: center; padding: 0.875rem; border-bottom: 1px solid var(--rule); }
.card-head img, .card-head .c-av { width: 2.75rem; height: 2.75rem; object-fit: cover; }
.card-head h2 { font: 650 1rem var(--ui); } .card-head h2 a { text-decoration: none; }
.card-head p { color: var(--ink-3); font-size: 0.8125rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.card-head .badge { margin-left: auto; flex: none; }
.card-nums { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--rule); }
.card-nums div { padding: 0.65rem 0.875rem; border-left: 1px solid var(--rule); }
.card-nums div:first-child { border-left: 0; }
.card-nums dt { font-size: 0.6875rem; color: var(--ink-3); } .card-nums dd { margin: 0; font: 700 1.125rem var(--ui); }
.card-best { padding: 0.75rem 0.875rem; font-size: 0.8125rem; color: var(--ink-2); }
.card-best b { color: var(--ink); }
.card-foot { display: flex; gap: 0.5rem; align-items: center; padding: 0.75rem 0.875rem; border-top: 1px solid var(--rule); }
.card-foot .btn:last-child { margin-left: auto; }

.ink-dot { display: none; }
.plan-card { border: 1px solid var(--rule) !important; background: var(--paper); }
.plan-card.on { border-color: var(--acc) !important; box-shadow: inset 0 3px 0 var(--acc); }
.facts li::before { background: var(--acc); }
.module > h2:first-child { display: flex; align-items: center; gap: 0.5rem; margin: 0 -1rem 0.875rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--rule); font: 650 0.9375rem/1.3 var(--ui); letter-spacing: -0.005em; }
@media (max-width: 599px) {
  .launch { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .launch a { grid-template-columns: 1fr; padding: 0.75rem; gap: 0.4rem; }
  .launch .l-ic { grid-row: auto; } .launch small { display: none; } .launch b { font-size: 0.875rem; }
}

/* start from a handle */
.import-start { margin-bottom: 1rem; }
.import-start > h2 { padding: 0.6rem 0.875rem; border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 0.5rem; }
.import-start.wide > h2 { font-size: 1rem; }
.import-start .ir-body, .import-read .ir-body { display: flex; gap: 0.5rem; padding: 0.875rem 0.875rem 0; align-items: center; }
.import-start input { max-width: 22rem; }
.ir-hint { padding: 0.5rem 0.875rem 0.875rem; color: var(--ink-3); font-size: 0.8125rem; margin: 0; max-width: 70ch; }
.import-start.wide .ir-hint:first-of-type { padding-bottom: 0; color: var(--ink-2); font-size: 0.875rem; }
.or-line { color: var(--ink-3); font-size: 0.8125rem; margin: 1.25rem 0 0.75rem; display: flex; align-items: center; gap: 0.75rem; }
.or-line::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.import-read { margin-bottom: 1rem; }
.import-read .ir-body { align-items: flex-start; padding-bottom: 0.875rem; gap: 0.875rem; }
.import-read .ig-ring { width: 4rem; height: 4rem; }
/* the profile photo, round like Instagram's and like the PDF: a violet ring, the photo or the initials inside; never a broken image */
.ig-ring { display: grid; flex: none; border-radius: 50%; border: 2px solid var(--acc); padding: 3px; box-sizing: border-box; }
.ig-ring img, .ig-ring .ig-ini { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; }
.ig-ini { background: var(--acc-soft); color: var(--acc-ink); font-weight: 650; font-size: 1.35rem; letter-spacing: -0.02em; }
.import-wait { max-width: 40rem; }
.iw-body { padding: 0.875rem; display: flex; gap: 0.75rem; align-items: center; }

/* baseline report */
.subnav { display: flex; gap: 0.25rem; margin: -0.5rem 0 1rem; }
.subnav a { padding: 0.35rem 0.7rem; font-size: 0.8125rem; color: var(--ink-3); text-decoration: none; border: 1px solid transparent; }
.subnav a[aria-current="page"] { color: var(--ink); background: var(--paper); border-color: var(--rule); font-weight: 600; }
.report { display: grid; gap: 0.75rem; }
.rep-head { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem 1rem; align-items: center; padding: 1rem; }
.rep-head .ig-ring { width: 4.5rem; height: 4.5rem; }
.rep-kicker { font: 500 0.6875rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--acc-ink); }
.rep-actions { display: flex; gap: 0.375rem; }
.rep-summary { grid-column: 1 / -1; font-size: 1rem; line-height: 1.55; color: var(--ink-2); padding-top: 0.75rem; border-top: 1px solid var(--rule); margin-top: 0.25rem; max-width: 80ch; }
.rep-note { padding: 0 0.875rem 0.875rem; }
.wk { list-style: none; margin: 0; padding: 1rem 0.875rem 0.75rem; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.4rem; height: 12rem; }
.wk li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.2rem; min-width: 0; }
.wk-col { height: 7rem; width: 100%; display: flex; align-items: flex-end; }
.wk-bar { width: 100%; background: var(--acc); min-height: 2px; display: block; }
.wk li:nth-last-child(n+5) .wk-bar { background: #b9b9c4; }
.wk-er { font: 500 0.6875rem var(--mono); color: var(--acc-ink); }
.wk-n { font: 600 0.75rem var(--ui); } .wk-d { font: 500 0.625rem var(--mono); color: var(--ink-3); }
.days { list-style: none; margin: 0; padding: 0.75rem 0.875rem; display: grid; gap: 0.45rem; }
.days li { display: grid; grid-template-columns: 2.5rem 1fr 7rem; gap: 0.5rem; align-items: center; font-size: 0.8125rem; }
.days .vbar { margin: 0; height: 8px; } .days .mono { text-align: right; color: var(--ink-3); }
.rep-posts { list-style: none; margin: 0; padding: 0.875rem; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
.rep-posts img, .rp-blank { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-3); font-size: 0.75rem; }
.rep-posts li:first-child img { outline: 3px solid var(--acc); outline-offset: -3px; }
.rep-posts p { margin-top: 0.3rem; }
.rp-cap { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rep-list { margin: 0; padding: 0.75rem 0.875rem 0.875rem 2rem; display: grid; gap: 0.45rem; font-size: 0.875rem; }
.rep-next .rep-list { font-size: 0.9375rem; }
.rep-goal { margin: 0 0.875rem 0.875rem; padding: 0.6rem 0.75rem; background: var(--acc-soft); }
@media (max-width: 599px) { .rep-head { grid-template-columns: auto 1fr; } .rep-actions { grid-column: 1 / -1; } .wk { height: 9rem; gap: 0.2rem; } .wk-er { display: none; } }
@media print {
  @page { size: A4; margin: 12mm; }
  html, body, main, .report { width: auto !important; max-width: none !important; }
  .report { padding: 0 3px; } .board { gap: 0.5rem; }
  body.has-side { display: block; background: #fff; }
  .side, .no-print, .c-head, .subnav, .flash, .skip { display: none !important; }
  main { padding: 0; max-width: none; }
  .mod, .tile { break-inside: avoid; }
  .board > .tile { grid-column: span 4; }
  .board > .span-5, .board > .span-7 { grid-column: span 12; }
  * { animation: none !important; }
}
.choice-art { display: none; }
@media (min-width: 640px) { .choice.main { grid-template-columns: minmax(0, 1fr); } }
.crumb-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .crumb-row .crumb { margin: 0; }

/* profile score */
.score { display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr; }
.score-big { padding: 1rem; border-right: 1px solid var(--rule); display: grid; align-content: center; gap: 0.25rem; }
.score-n { display: flex; align-items: baseline; gap: 0.2rem; } .score-n b { font: 700 3.5rem/1 var(--ui); letter-spacing: -0.03em; color: var(--acc-ink); } .score-n span { color: var(--ink-3); }
.score-g { font-weight: 600; }
.score-parts td { padding: 0.55rem 0.875rem; } .score-parts td.n { width: 9rem; }
@media (max-width: 599px) { .score { grid-template-columns: 1fr; } .score-big { border-right: 0; border-bottom: 1px solid var(--rule); } }

.base-body { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; padding: 0.75rem 0.875rem; }
.base-score b { font: 700 2.25rem/1 var(--ui); color: var(--acc-ink); letter-spacing: -0.02em; } .base-score span { color: var(--ink-3); font-size: 0.875rem; margin-left: 0.2rem; }
.base-nums { display: flex; gap: 1.5rem; margin: 0; } .base-nums dt { font-size: 0.6875rem; color: var(--ink-3); } .base-nums dd { margin: 0; font: 650 1.0625rem var(--ui); }
.base-next { flex: 1 1 18rem; font-size: 0.875rem; color: var(--ink-2); }

/* plan & script (AI content advisor) */
.adv-intro { color: var(--ink-2); font-size: 0.9375rem; margin: 0 0 1rem; max-width: 75ch; }
.adv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.adv-grid .span-wide { grid-column: 1 / -1; }
.adv-form { padding: 0.875rem; }
.adv-form .field { margin-bottom: 0.75rem; }
.adv-form textarea { width: 100%; }
.adv-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.adv-row .field { margin: 0; }
.adv-tool > .working, .adv-tool > .trouble { margin: 0 0.875rem 0.875rem; }
.adv-sec { margin: 0 0 0.5rem; color: var(--ink-3); font: 500 0.6875rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.adv-card { margin-bottom: 1rem; }
.adv-card > h2 .aside { display: flex; align-items: center; gap: 0.5rem; }
.adv-body { padding: 0.875rem; display: grid; gap: 0.5rem; max-width: 80ch; }
.adv-body h3 { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.adv-body h3:first-of-type { margin-top: 0.25rem; }
.adv-in { color: var(--ink-3); font-size: 0.875rem; }
.adv-hooks, .adv-list { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.adv-ost, .adv-show { display: block; color: var(--ink-3); font-size: 0.8125rem; }
.adv-beats, .adv-week { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.adv-beats li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.adv-t, .adv-day { font: 500 0.75rem var(--mono); color: var(--acc-ink); padding-top: 0.15rem; }
.adv-week li { display: grid; grid-template-columns: 3rem 1fr auto; gap: 0.75rem; align-items: start; padding: 0.65rem 0; border-bottom: 1px solid var(--rule); }
.adv-week li p + p { margin-top: 0.2rem; }
.adv-cap { white-space: pre-line; }
.adv-tags { color: var(--ink-2); font: 500 0.8125rem var(--mono); }
.adv-saved ul { list-style: none; margin: 0; padding: 0; }
.adv-saved li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.55rem 0.875rem; border-top: 1px solid var(--rule); }
.adv-saved li:first-child { border-top: 0; }
.adv-saved li a { flex: 1 1 14rem; }
[data-copy-of].copied { border-color: var(--up); color: var(--up); }
@media (max-width: 599px) {
  .adv-grid { grid-template-columns: 1fr; }
  .adv-week li { grid-template-columns: 2.5rem 1fr; } .adv-week li > .btn { grid-column: 2; justify-self: start; }
  .adv-beats li { grid-template-columns: 4.25rem 1fr; }
}
/* phones: the topics table becomes stacked rows so "Why" never pushes the page sideways */
@media (max-width: 560px) {
  .ptable.topics thead { display: none; }
  .ptable.topics tr { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.25rem 0.625rem; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--rule); }
  .ptable.topics tr:last-child { border-bottom: 0; }
  .ptable.topics td { padding: 0; border: 0; }
  .ptable.topics td.small { grid-column: 1 / -1; color: var(--ink-2); }
}
/* carousel style picker */
.lookpick { border: 0; padding: 0; margin: 0.25rem 0 0; min-width: 0; flex-basis: 100%; }
.lookpick legend { font-weight: 600; font-size: 0.8125rem; margin-bottom: 0.4rem; }
.lk-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; }
.lk-chip { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.6rem; align-items: center; padding: 0.5rem; border: 1px solid var(--rule); background: #fff; cursor: pointer; font-weight: 400; }
.lk-chip input { position: absolute; opacity: 0; pointer-events: none; }
.lk-chip b { font-size: 0.8125rem; font-weight: 600; line-height: 1.2; }
.lk-chip small { grid-column: 2; font-size: 0.6875rem; color: var(--ink-3); line-height: 1.3; }
.lk-sw { grid-row: span 2; width: 2.25rem; height: 2.8rem; border: 1px solid rgba(0,0,0,.08); display: grid; place-items: center; background: #eee; }
.lk-any { background: conic-gradient(#ff7a59, #ffd54a, #c6ff3d, #3dd6ff, #6a4bff, #ff3d7f, #ff7a59); }
.lk-ai { background: linear-gradient(160deg, #efebff, #ffe7dc); color: var(--acc); }
.lk-chip:hover { border-color: var(--ink-3); }
.lk-chip:has(input:checked) { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); background: var(--acc-soft); }
.lk-chip:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.lk-more { display: none; margin-top: 0.6rem; gap: 0.4rem 0.75rem; align-items: center; }
.lookpick:has(input[value=custom]:checked) .lk-custom { display: grid; grid-template-columns: auto 3rem auto 3rem; justify-content: start; }
.lookpick:has(input[value=photo]:checked) .lk-photo { display: grid; }
.lookpick .lk-photo input[type=text] { width: 100%; max-width: none; min-width: 0; }
.lk-custom input[type=color] { width: 3rem; height: 2.25rem; padding: 2px; border: 1px solid var(--rule); background: #fff; }
.lookpick .lk-default, .car-style .lk-default { display: flex; flex-direction: row; gap: 0.5rem; align-items: center; margin-top: 0.6rem; font-size: 0.8125rem; font-weight: 400; }
.car-style[open] { flex-basis: 100%; }
@media (max-width: 560px) { .lk-chips { grid-template-columns: 1fr 1fr; } .lk-chip small { display: none; } }
.car-style .stack { max-width: none; }
/* carousel editor */
.car-ed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.car-stage { min-width: 0; }
@media (min-width: 1000px) { .car-ed { grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem); } .car-stage { position: sticky; top: 1rem; } }
.car-view { position: relative; width: 100%; max-width: 34rem; margin: 0 auto; overflow: hidden; background: #e9e9ee; border: 1px solid var(--rule); aspect-ratio: 4 / 5; }
.car-view iframe { position: absolute; left: 0; top: 0; width: 1080px; height: 1350px; border: 0; transform-origin: 0 0; }
.car-nav { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 0.75rem 0; font-family: var(--mono); font-size: 0.8125rem; }
.car-nav .flip .icon { transform: scaleX(-1); }
.car-thumbs { list-style: none; margin: 0 auto 0.5rem; padding: 0; display: flex; gap: 0.4rem; overflow-x: auto; max-width: 34rem; }
.car-thumbs button { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; display: block; }
.car-thumbs button[aria-current] { border-color: var(--acc); }
.car-thumbs img { display: block; width: 3.6rem; height: auto; }
.car-stage > .small { text-align: center; }
.car-side { display: grid; gap: 1rem; min-width: 0; }
.car-side .mod { padding: 0 0 0.875rem; }
.car-side .mod > h2 { font-size: 0.875rem; margin-bottom: 0.875rem; }
.car-side .mod > *:not(h2) { margin-left: 0.875rem; margin-right: 0.875rem; }
.car-side .mod > .lookpick:first-child { margin-top: 0.875rem; }
.car-fields { display: grid; gap: 0.75rem; }
.car-field { display: grid; gap: 0.3rem; }
.car-field label { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.car-field input, .car-field textarea, .car-side textarea { width: 100%; max-width: none; font: inherit; }
.car-side .lk-chips { grid-template-columns: 1fr 1fr; }
.car-side .lk-chip small { display: none; }
.car-save { display: flex; gap: 0.5rem; position: sticky; bottom: 0; background: var(--bg, #f4f4f6); padding: 0.75rem 0; }
.car-side .mod > textarea { display: block; width: calc(100% - 1.75rem); }
.lk-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.25rem; }
.lk-upload .btn { cursor: pointer; }
.lk-upload input[type=file]:focus-visible + span, .lk-upload label:has(+ input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.lk-or { margin: 0.4rem 0 0; }
.lk-adjust { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--rule); }
.lk-adjust label { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.lk-adjust output { font-family: var(--mono); font-weight: 500; color: var(--ink-3); }
.lk-adjust input[type=range] { width: 100%; accent-color: var(--acc); margin: 0 0 0.35rem; }
.lk-adjust select { justify-self: start; }
/* downloads */
.dl-list { list-style: none; margin: 0; padding: 0; }
.dl-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.625rem 0; border-top: 1px solid var(--rule); }
.dl-row:first-child { border-top: 0; }
.dl-name { display: grid; } .dl-name small { color: var(--ink-3); font-size: 0.75rem; }
.dl-shape { justify-self: center; border: 2px solid var(--ink-2); background: var(--acc-soft); }
.dl-9x16 { width: 1.125rem; height: 2rem; } .dl-4x5 { width: 1.6rem; height: 2rem; } .dl-1x1 { width: 1.75rem; height: 1.75rem; } .dl-16x9 { width: 2.25rem; height: 1.27rem; }
.dl-row form { margin: 0; }
.dl-link { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.4rem; font-size: 0.8125rem; font-weight: 600; } .dl-link .icon { width: 1rem; height: 1rem; }
.car-dl { text-align: center; margin: 0.25rem 0 0; }
/* focus pages (the editors): on tablets and phones the workspace sidebar steps aside, like a creative app; the crumb goes back */
@media (max-width: 1399px) {
  body.has-side.focus { display: block; }
  body.focus .side { display: none; }
}
/* installed as an app (home screen): keep clear of the notch and the home indicator */
@media (display-mode: standalone) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .side { padding-top: max(0.5rem, env(safe-area-inset-top)); }
  main { padding-bottom: env(safe-area-inset-bottom); }
}
.lk-upload { position: relative; } .lk-upload input.sr { left: 0; top: 0; }
/* stock browser (Pexels): a sheet on phones, a centred panel on bigger screens */
.stock-dlg { width: min(60rem, 100vw - 2rem); max-height: min(52rem, 100dvh - 2rem); padding: 0; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); overflow: hidden; display: none; }
.stock-dlg[open] { display: flex; flex-direction: column; }
.stock-dlg::backdrop { background: rgb(20 18 30 / 0.45); }
.stock-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.5rem 0.75rem; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--rule); }
.stock-top h2 { font-size: 1rem; margin: 0; }
.stock-top input[type=search] { width: 100%; min-width: 0; }
.stock-or { display: flex; gap: 0.25rem; }
.stock-or label { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; font-weight: 500; padding: 0.35rem 0.55rem; border: 1px solid var(--rule); cursor: pointer; }
.stock-or label:has(input:checked) { border-color: var(--acc); background: var(--acc-soft); }
.stock-or input { position: absolute; opacity: 0; pointer-events: none; }
.stock-st { padding: 0.5rem 1rem 0; margin: 0; }
.stock-grid { flex: 1; overflow-y: auto; padding: 0.75rem 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.75rem; align-content: start; }
.stock-it { margin: 0; position: relative; display: grid; gap: 0.35rem; }
.stock-it video, .stock-it img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #eee; display: block; cursor: pointer; }
.stock-it.wide video, .stock-it.wide img { aspect-ratio: 16 / 9; } .stock-it.sq video, .stock-it.sq img { aspect-ratio: 1; }
.stock-dur { position: absolute; top: 0.35rem; left: 0.35rem; background: rgb(0 0 0 / 0.65); color: #fff; font: 500 0.6875rem/1 var(--mono); padding: 0.2rem 0.35rem; }
.stock-it figcaption { display: flex; justify-content: space-between; align-items: center; gap: 0.35rem; min-width: 0; }
.stock-it figcaption .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-more { text-align: center; padding: 0 1rem 0.5rem; }
.stock-credit { padding: 0.5rem 1rem 0.75rem; margin: 0; border-top: 1px solid var(--rule); }
.stock-open { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.5rem 0 0; }
@media (max-width: 599px) {
  .stock-dlg { width: 100vw; max-width: 100vw; height: 92dvh; max-height: 92dvh; margin: auto 0 0; border-width: 1px 0 0; }
  .stock-top { grid-template-columns: minmax(0, 1fr) auto; } .stock-top h2 { grid-column: 1; } .stock-x { grid-column: 2; grid-row: 1; }
  .stock-top input[type=search], .stock-or { grid-column: 1 / -1; }
  .stock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; padding: 0.5rem; }
  .stock-grid .btn { padding-inline: 0.55rem; }
}
.dl-h3 { font-size: 0.875rem; margin: 1rem 0 0.4rem; }
.lz-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.4rem 0; }
.lz-form label { font-size: 0.8125rem; font-weight: 600; }
.vo-write { margin: 0.5rem 0 0; } .vo-write > summary { list-style: none; display: inline-flex; cursor: pointer; } .vo-write > summary::-webkit-details-marker { display: none; }
.vo-write .stack { display: grid; gap: 0.35rem; margin-top: 0.5rem; } .vo-write textarea { width: 100%; }
/* Uprocket brand in the shell */
.logo img { display: block; height: auto; }
.logo .logo-mark { display: none; }
.cover-brand { margin: 0 0 1rem; } .cover-brand img { display: block; width: min(214px, 70vw); height: auto; }
@media (max-width: 859px) { .logo .logo-full { display: none; } .logo .logo-mark { display: block; width: 1.5rem; height: 1.5rem; } }
.plan-card.choose { border-color: var(--acc); box-shadow: inset 0 3px var(--acc); } .plan-card form { margin-top: 0.75rem; } .gap-bottom { margin-bottom: 1rem; }