/* Hugo Santos client portal. His own system, from hugosantos.vercel.app (site/site.css) and the brand guidelines:
   PP Neue Montreal Regular + Medium, Paper and Ink with the grey value, square buttons that swap on hover, no separator lines
   (structure comes from filled surfaces and gaps), sentence case only, whole-pixel spacing on one scale
   (4 8 12 16 20 24 32 40 48 64), fade in with a blur on every entrance, Material Symbols Outlined. */
@font-face { font-family: "PP Neue Montreal"; src: url(/fonts/PPNeueMontreal-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url(/fonts/PPNeueMontreal-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }

/* Site / Colour, dark first; surfaces 2 and 3 are the portal's fills for nested blocks and tags */
:root { --ink: #fff; --paper: #000; --surface: #141414; --surface-2: #1f1f1f; --surface-3: #2b2b2b; --mute: #969696; --value: #a0a0a0; --rule: #2b2b2b;
  --fade: 400ms; --blur: 12px; --side: 240px; --pad: 40px; color-scheme: dark; }
:root[data-theme="light"] { --ink: #000; --paper: #fff; --surface: #f2f2f2; --surface-2: #e8e8e8; --surface-3: #d6d6d6; --mute: #666666; --value: #5c5c5c; --rule: #d6d6d6; color-scheme: light; }
@media (max-width: 767px) { :root { --pad: 20px; --blur: 8px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); color: var(--ink); transition: background-color var(--fade); }
body { font: 400 14px/20px "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; }
a, button { color: inherit; font: inherit; text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; }
button:disabled { cursor: not-allowed; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
ul { list-style: none; }
input, textarea, select { font: inherit; color: var(--ink); background: var(--surface-2); border: 0; border-radius: 0; padding: 8px 12px; width: 100%; min-height: 40px; }   /* 24 line + 16 = 40, level with buttons */
textarea { resize: vertical; min-height: 80px; }
input::placeholder, textarea::placeholder { color: var(--mute); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--ink); flex: none; }
input[type="date"], input[type="time"] { min-width: 0; }
::selection { background: var(--ink); color: var(--paper); }

/* usability pass (memory design-usability-checks, Nov 6): every text pair passes WCAG AA on every surface it sits on, so the
   greys are darker than the site's in light mode (value #5c5c5c, mute #666666) and mute is #969696 in dark; reading text is
   16/24 with lines kept under about 70 characters; nothing is smaller than 12 px. UI labels and metadata stay 14/20. */
.msg p, .quote p, .answer, .empty, .note, .qcard > .t-label, input, textarea, select { font-size: 16px; line-height: 24px; }
.quote p, .note, .empty, .t-body, .qcard > .t-label { max-width: 70ch; }

/* type */
.t-title { font-size: clamp(24px, 1.67vw, 30px); line-height: 1.07; font-weight: 500; letter-spacing: 0; }
.t-big { font-size: clamp(32px, 3vw, 48px); line-height: 1.05; font-weight: 500; }
.t-h { font-size: 18px; line-height: 24px; font-weight: 500; }
.t-label { font-weight: 500; }
.t-body { font-size: 16px; line-height: 24px; }
.v { color: var(--value); }
.m { color: var(--mute); }
.ink { color: var(--ink); }
.num { }
.pair > :first-child { display: block; font-weight: 500; color: var(--ink); }
.pair > :last-child:not(:first-child) { display: block; color: var(--value); }
.nowrap { white-space: nowrap; }
.clip1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* icons: Material Symbols Outlined paths, recoloured by currentColor */
.i { width: 20px; height: 20px; flex: none; fill: currentColor; display: inline-block; vertical-align: -5px; }
.i.s { width: 16px; height: 16px; vertical-align: -3px; }
.i.l { width: 24px; height: 24px; }

/* entrance: fade in with a blur, CSS only, from .01 so it never holds up paint */
@keyframes fx-in { from { opacity: .01; filter: blur(var(--blur)); } }
.fx { animation: fx-in var(--fade) cubic-bezier(.2, .7, .2, 1) backwards; }
.fx-2 { animation-delay: 60ms; } .fx-3 { animation-delay: 120ms; }

/* buttons: Ink fill, Paper text, square; on hover the two swap */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; background: var(--ink); color: var(--paper); font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--ink); transition: background-color 200ms, color 200ms; white-space: nowrap; }
.btn:hover:not(:disabled), .btn:focus-visible { background: var(--paper); color: var(--ink); }
.btn:disabled { background: var(--surface-3); color: var(--value); box-shadow: none; }   /* inactive, still readable (AA) */
.btn.s { height: 32px; padding: 0 12px; }
.btn.full { width: 100%; justify-content: space-between; }
.btn-2 { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; background: var(--surface-2); color: var(--ink); font-weight: 500; transition: background-color 200ms; white-space: nowrap; }
.btn-2:hover:not(:disabled) { background: var(--surface-3); }
.btn-2.s { height: 32px; padding: 0 12px; }
.btn-2:disabled { background: var(--surface); color: var(--value); }
.btn-q { display: inline-flex; align-items: center; gap: 4px; color: var(--value); font-weight: 500; transition: color 150ms; }
.btn-q:hover { color: var(--ink); }
/* hover on links: a 1px underline fades in with a blur */
.u { position: relative; padding-bottom: 2px; }
.u::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: 0; filter: blur(2px); transition: opacity 250ms, filter 250ms; }
.u:hover::after, .u:focus-visible::after { opacity: 1; filter: none; }

/* tags: filled blocks, black and white only. strong = their move or mine now, fill = mine later, quiet = nothing to do */
.tag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; font-weight: 500; font-size: 13px; white-space: nowrap; background: var(--surface-3); color: var(--ink); }
.tag.strong { background: var(--ink); color: var(--paper); }
.tag.quiet { background: none; padding: 0; color: var(--value); font-weight: 400; }
.tag.done { background: none; padding: 0; color: var(--value); font-weight: 400; }
.bracket::before { content: "("; } .bracket::after { content: ")"; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 32px; padding: 24px 16px 16px; overflow: auto; scrollbar-width: none; }
.side::-webkit-scrollbar { display: none; }
.lockup { display: block; height: 18px; width: auto; color: var(--ink); }
.side .brand { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; min-height: 24px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .nav button { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 8px; color: var(--value); font-weight: 500; transition: color 150ms, background-color 150ms; width: 100%; }
.nav a:hover, .nav button:hover { color: var(--ink); }
.nav a.on { color: var(--ink); background: var(--surface); }
.nav .count { margin-left: auto; font-size: 12px; color: var(--paper); background: var(--ink); min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 6px; }
.nav-h { padding: 0 8px 8px; color: var(--mute); }
.tile { width: 24px; height: 24px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink); font-size: 12px; font-weight: 500; flex: none; }
.tile.l { width: 40px; height: 40px; font-size: 16px; }
.nav a.on .tile { background: var(--ink); color: var(--paper); }
.side .foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.main { min-width: 0; padding: 24px var(--pad) 64px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; margin-bottom: 32px; }
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--value); min-width: 0; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--mute); }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.head .t-title + .v, .head .t-big + .v { margin-top: 8px; }
.preview-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 16px; height: 40px; background: var(--ink); color: var(--paper); font-weight: 500; }
.preview-bar a { text-decoration: underline; text-underline-offset: 3px; }
.mobile-bar { display: none; }

/* sub-tabs inside a client */
.tabs { display: flex; gap: 2px; margin-bottom: 32px; overflow-x: auto; scrollbar-width: none; }
.tabs a { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: var(--surface); color: var(--value); font-weight: 500; white-space: nowrap; transition: color 150ms; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { background: var(--ink); color: var(--paper); }

/* ---------- blocks ---------- */
.grid { display: grid; gap: 2px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.cols.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.box { background: var(--surface); padding: 20px; }
.box.tight { padding: 16px; }
.box.flush { padding: 0; }
.box > .t-h:first-child, .box > .bh:first-child { margin-bottom: 16px; }
.bh { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.section { margin-top: 40px; }
.section > .bh { margin-bottom: 12px; }
.stack { display: flex; flex-direction: column; gap: 2px; }
.stack.g8 { gap: 8px; } .stack.g12 { gap: 12px; } .stack.g16 { gap: 16px; } .stack.g24 { gap: 24px; }
.row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.row.g8 { gap: 8px; } .row.g16 { gap: 16px; } .row.g24 { gap: 24px; }
.row.top { align-items: flex-start; }
.row .grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.empty { padding: 32px 20px; color: var(--value); background: var(--surface); }
.empty .t-h { color: var(--ink); margin-bottom: 4px; }
.note { padding: 12px 16px; background: var(--surface-2); color: var(--value); }
.note b { color: var(--ink); font-weight: 500; }

/* stats: one big number each */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px; }
.stat { background: var(--surface); padding: 20px; display: flex; flex-direction: column; gap: 24px; min-height: 136px; justify-content: space-between; }
.stat .n { font-size: 40px; line-height: 40px; font-weight: 500; }
.stat.strong { background: var(--ink); color: var(--paper); }
.stat.strong .v { color: var(--paper); opacity: .7; }

/* list rows: separate filled blocks with 2px of paper between, never lines */
.list { display: flex; flex-direction: column; gap: 2px; }
.li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; background: var(--surface); transition: background-color 150ms; min-width: 0; }
a.li:hover, button.li:hover, .li.click:hover { background: var(--surface-2); }
.li .grow { flex: 1; min-width: 0; }
.li .t { font-weight: 500; color: var(--ink); }
.li .s:not(.btn):not(.btn-2) { color: var(--value); }   /* .s on a button means small, not secondary */
.li.on { background: var(--surface-2); }
.li .end { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
.li .chev { color: var(--mute); }
.link-gap { display: flex; align-items: center; gap: 8px; padding: 4px 16px 4px 44px; color: var(--mute); font-size: 12px; line-height: 16px; background: none; }

/* phase tabs */
.phases { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 2px; margin-bottom: 24px; }
.phase { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--surface); min-height: 112px; text-align: left; transition: background-color 150ms; min-width: 0; }
.phase:hover { background: var(--surface-2); }
.phase.on { background: var(--ink); color: var(--paper); }
.phase.on .v, .phase.on .m { color: var(--paper); opacity: .72; }
.phase .t-label { margin-top: auto; }
.phase .bar { display: flex; gap: 2px; height: 4px; margin-top: 8px; }
.phase .bar i { flex: 1; background: var(--surface-3); }
.phase .bar i.f { background: var(--ink); }
.phase.on .bar i { background: var(--paper); opacity: .3; }
.phase.on .bar i.f { opacity: 1; }

/* sign-offs */
.signoffs { display: grid; gap: 2px; margin-bottom: 24px; }
.so { background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 4px; min-height: 96px; }
.so .row { justify-content: space-between; }
.so.done .i { color: var(--ink); }
.so.now { background: var(--ink); color: var(--paper); }
.so.now .v { color: var(--paper); opacity: .72; }

/* progress across phases (Home) */
.prog { display: flex; gap: 2px; height: 4px; width: 100%; }
.prog i { flex: 1; background: var(--surface-3); }
.prog i.f { background: var(--ink); }
.prog i.h { background: linear-gradient(90deg, var(--ink) 50%, var(--surface-3) 50%); }

/* chat */
.chat { display: flex; flex-direction: column; background: var(--surface); height: calc(100vh - 160px); min-height: 480px; position: sticky; top: 24px; }
.chat .bh { padding: 12px 16px; }
.chat .msgs { flex: 1; overflow: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 16px; }
.msg .who { display: flex; gap: 8px; align-items: baseline; }
.msg .who b { font-weight: 500; }
.msg p { color: var(--value); margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.me p { color: var(--ink); }
.chat form { display: flex; gap: 2px; padding: 16px; }
.chat textarea { min-height: 40px; height: 40px; resize: none; }
.seg { display: inline-flex; gap: 2px; }
.seg button { height: 28px; padding: 0 10px; background: var(--surface-2); color: var(--value); font-weight: 500; font-size: 13px; }
.seg button.on { background: var(--ink); color: var(--paper); }

/* drawer (step panel) + modal */
#layer:empty { display: none; }
.scrim { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .6); animation: fade-in 200ms ease-out backwards; }
@keyframes fade-in { from { opacity: 0; } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; width: min(640px, 100vw); background: var(--paper); overflow: auto; padding: 24px 32px 48px; animation: fx-in var(--fade) cubic-bezier(.2, .7, .2, 1) backwards; box-shadow: -1px 0 0 var(--surface); }
.drawer .bh.top { position: sticky; top: -24px; margin: -24px -32px 24px; padding: 16px 32px; background: var(--paper); z-index: 2; }
.modal { position: fixed; z-index: 101; left: 50%; top: 8vh; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); max-height: 84vh; overflow: auto; background: var(--paper); padding: 24px; animation: fx-in var(--fade) cubic-bezier(.2, .7, .2, 1) backwards; box-shadow: 0 0 0 1px var(--surface-3); }
.modal.wide { width: min(880px, calc(100vw - 32px)); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { font-weight: 500; }
.field > small, small { color: var(--value); font-size: 12px; line-height: 16px; }
.fields { display: grid; gap: 16px; }
.fields.two { grid-template-columns: 1fr 1fr; }
.fields.three { grid-template-columns: 1fr 1fr 1fr; }
.check { display: flex; align-items: center; gap: 8px; color: var(--value); cursor: pointer; }
.check:hover { color: var(--ink); }
.quote { padding: 16px; background: var(--surface); }
.quote .row { margin-bottom: 8px; }
.quote p { white-space: pre-wrap; }
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 16px; }
.kv dt { color: var(--value); }
.kv dd { color: var(--ink); }

/* timeline (gantt) */
.gantt { background: var(--surface); overflow-x: auto; position: relative; scrollbar-width: thin; }
.gantt .inner { position: relative; }
.gantt .days { display: flex; height: 48px; position: sticky; top: 0; z-index: 1; background: var(--surface); }
.gantt .day { flex: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 8px; color: var(--mute); font-size: 12px; line-height: 16px; }
.gantt .day.mon { color: var(--value); }
.gantt .day.first { color: var(--ink); font-weight: 500; }
.gantt .off { position: absolute; top: 48px; bottom: 0; background: var(--surface-2); }
.gantt .rowg { position: relative; height: 44px; }
.gantt .lab { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; height: 44px; padding: 0 16px; width: max-content; max-width: 220px; background: linear-gradient(90deg, var(--surface) 80%, transparent); font-weight: 500; }
.gantt .bar { position: absolute; top: 12px; height: 20px; background: var(--surface-3); display: flex; align-items: center; padding: 0 8px; font-size: 12px; font-weight: 500; overflow: hidden; white-space: nowrap; }
.gantt .bar.done { background: var(--value); color: var(--paper); }
.gantt .bar.now { background: var(--ink); color: var(--paper); }
.gantt .mk { position: absolute; top: 14px; width: 16px; height: 16px; margin-left: -8px; display: grid; place-items: center; color: var(--ink); }
.gantt .mk .i { width: 16px; height: 16px; }
.gantt .today { position: absolute; top: 40px; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); z-index: 1; }
.gantt .today::before { content: "Today"; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 500; color: var(--ink); background: var(--surface); padding: 0 4px; }

/* month calendar */
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.month .dh { padding: 8px; color: var(--value); font-weight: 500; }
.month .d { background: var(--surface); min-height: 112px; padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.month .d.out { background: transparent; }
.month .d.out .dn { color: var(--mute); }
.month .d.off { background: var(--surface-2); }
.month .d .dn { display: flex; justify-content: space-between; gap: 4px; color: var(--value); font-size: 12px; }
.month .d.today .dn b { background: var(--ink); color: var(--paper); padding: 0 6px; font-weight: 500; }
.month .ev { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; padding: 2px 4px; background: var(--surface-3); min-width: 0; }
.month .ev.strong { background: var(--ink); color: var(--paper); }
.month .ev.quiet { background: none; color: var(--value); padding: 0 4px; }
.month .ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* document viewer */
.viewer { background: var(--surface); aspect-ratio: 16 / 10; width: 100%; position: relative; }
.viewer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--surface); }
.viewer .empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 8px; }

/* invoice paper: white like the PDF, whatever the theme */
.paper { background: #fff; color: #000; padding: 48px; aspect-ratio: 210 / 297; display: flex; flex-direction: column; gap: 32px; font-size: 12px; line-height: 16px; --pv: #6b6b6b; --pf: #f2f2f2; }
.paper .lockup { color: #000; height: 16px; }
.paper .pv { color: var(--pv); }
.paper .ph { font-size: 24px; line-height: 28px; font-weight: 500; }
.paper .pairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.paper .pairs b { display: block; font-weight: 500; }
.paper .pairs span { display: block; color: var(--pv); white-space: pre-line; overflow-wrap: anywhere; }
.paper table { width: 100%; border-collapse: separate; border-spacing: 0 2px; }
.paper th { text-align: left; font-weight: 500; padding: 0 8px 4px; }
.paper td { background: var(--pf); padding: 8px; vertical-align: top; }
.paper .r { text-align: right; }
.paper .tot { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; margin-left: auto; min-width: 240px; }
.paper .tot .big { font-size: 16px; font-weight: 500; }
.paper .foot { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.paper .stamp { display: inline-block; background: #000; color: #fff; padding: 2px 8px; font-weight: 500; }

/* email card (outbox and "see the email"): white, like a mail client */
.mail { background: #fff; color: #000; padding: 32px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; line-height: 20px; }
.mail .lockup { color: #000; height: 14px; }
.mail h3 { font-size: 20px; line-height: 24px; font-weight: 500; }
.mail p { color: #333; white-space: pre-wrap; }
.mail .cta { align-self: flex-start; background: #000; color: #fff; padding: 10px 16px; font-weight: 500; }
.mail .sig { color: #6b6b6b; }
.mail-meta { display: grid; grid-template-columns: 64px 1fr; gap: 4px 12px; padding: 12px 16px; background: var(--surface); }
.mail-meta dt { color: var(--value); }

/* discovery cards */
.qcard { background: var(--surface); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.qcard .qn { color: var(--mute); }
.picks { display: flex; flex-wrap: wrap; gap: 2px; }
.pick { height: 36px; padding: 0 12px; background: var(--surface-2); color: var(--value); font-weight: 500; transition: background-color 150ms, color 150ms; }
.pick:hover { color: var(--ink); }
.pick.on { background: var(--ink); color: var(--paper); }
.scale { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.scale .dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.scale .dots button { height: 36px; background: var(--surface-2); }
.scale .dots button.on { background: var(--ink); }
.answer { padding: 12px 16px; background: var(--surface-2); }
.answer .who { color: var(--value); margin-bottom: 4px; }

/* choice cards */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.choice { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 20px; min-height: 136px; background: var(--surface); transition: background-color 150ms; text-align: left; }
.choice:hover { background: var(--surface-2); }
.choice.on { background: var(--ink); color: var(--paper); }
.choice .t-big { font-size: 32px; line-height: 32px; }

/* sign-in */
.signin { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.signin .pane { padding: 32px var(--pad); display: flex; flex-direction: column; }
.signin .pane.form { justify-content: center; max-width: 480px; width: 100%; margin: 0 auto; gap: 24px; }
.signin .art { background: var(--surface); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; }
.signin .art .t-big { max-width: 12em; }
.dev { padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }

/* toast */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); z-index: 300; background: var(--ink); color: var(--paper); padding: 10px 16px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity 200ms, transform 200ms; max-width: calc(100vw - 32px); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }



/* ---------- media: any file, shown where the browser can, downloaded where it can't ---------- */
.checker { background-color: #f2f2f2; background-image: conic-gradient(#e0e0e0 25%, transparent 0 50%, #e0e0e0 0 75%, transparent 0); background-size: 16px 16px; }   /* transparent logos stay visible */
.mcard .thumb img.checker { object-fit: contain; }
.viewer.media { display: grid; place-items: center; background: var(--surface); }
.viewer.media img, .viewer.media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.viewer.audio { aspect-ratio: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
.viewer.audio audio { width: 100%; }
.viewer .empty { padding: 24px; }
.viewer .empty .i.l { margin: 0 auto 8px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px; }
.mcard { background: var(--surface); display: flex; flex-direction: column; min-width: 0; }
.mcard .thumb { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; width: 100%; }
.mcard .thumb img, .mcard .thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mcard .thumb .play { position: absolute; color: #fff; filter: drop-shadow(0 0 8px rgba(0, 0, 0, .6)); }
.thumb-icon { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--value); }
.mmeta { padding: 12px 12px 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mmeta .t { font-weight: 500; }
.mact { padding: 8px 12px 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.atts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.att { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; background: var(--surface-2); color: var(--ink); max-width: 240px; font-size: 14px; }
.att.img { height: auto; padding: 0; width: 120px; aspect-ratio: 4 / 3; overflow: hidden; }
.att.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; padding: 24px; background: var(--surface); color: var(--value); text-align: center; outline: 1px dashed var(--surface-3); outline-offset: -8px; transition: background-color 150ms; }
.drop.over { background: var(--surface-2); color: var(--ink); }
.drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bar-p { height: 4px; background: var(--surface-3); width: 100%; }
.bar-p i { display: block; height: 100%; background: var(--ink); width: 0; transition: width 200ms; }
.attach { position: relative; }
.attach.on { background: var(--ink); color: var(--paper); }
.attach input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; min-height: 0; cursor: pointer; }
.pending-atts { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 16px; }

/* the access key: big enough to read out on a call */
.key-show { display: flex; align-items: center; min-height: 48px; padding: 0 16px; background: var(--surface-2); font-size: 20px; line-height: 28px; font-weight: 500; overflow-wrap: anywhere; }

/* ---------- services: one client, several things to deliver ---------- */
.svcbar { display: flex; gap: 2px; margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.tick { display: grid; place-items: center; flex: none; cursor: pointer; }
.svc { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 176px; min-height: 56px; padding: 8px 16px; background: var(--surface); transition: background-color 150ms; }
.svc:hover { background: var(--surface-2); }
.svc.on { background: var(--ink); color: var(--paper); }
.svc.on .v { color: var(--paper); opacity: .72; }
.svc.add { flex-direction: row; align-items: center; gap: 8px; min-width: max-content; flex: none; color: var(--value); font-weight: 500; }
.svc.add:hover { color: var(--ink); }
.signoffs { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }


/* ---------- touch: every target at least 44 px (WCAG 2.5.5, Apple HIG) ---------- */
.agenda { display: none; }
.cols.proc { grid-template-columns: 280px minmax(0, 1fr); }
.choice:disabled { cursor: default; opacity: 1; }
summary { list-style: none; } summary::-webkit-details-marker { display: none; }
@media (pointer: coarse) {
  .btn-q { min-height: 44px; padding: 0 4px; }
  .btn-q:has(> .i:only-child), button.btn-q[aria-label] { min-width: 44px; justify-content: center; }
  .btn.s, .btn-2.s { height: 40px; }
  .seg button, .seg a { height: 40px; padding: 0 14px; }
  summary { min-height: 44px; display: flex; align-items: center; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  .check { min-height: 44px; }
  .side .brand a, .mobile-bar > a { display: flex; align-items: center; min-height: 44px; }
  .gantt .lab a { display: flex; align-items: center; min-height: 44px; }
  .stack > .bh > a.row, a.row.g8 { min-height: 44px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 4px; }
  .tabs a { height: 44px; }
  .tick { min-width: 44px; min-height: 44px; margin: -12px -8px -12px -14px; }
  .quote + .stack a.btn-q, .row > a.btn-q { min-height: 44px; }
}
@media (max-width: 1100px) { .cols.proc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .month { display: none; }
  .agenda { display: flex; flex-direction: column; gap: 16px; }
  .mgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .linkrow { flex-wrap: wrap; }
  .linkrow > input { flex: 1 1 100%; max-width: none !important; }
  .linkrow > .btn { flex: 1 1 auto; }
}
@media (max-width: 600px) {
  .li { flex-wrap: wrap; row-gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  .li > .grow { flex: 1 1 calc(100% - 44px); }
  .li > .end { margin-left: 32px; flex-wrap: wrap; }
  .li > .tile + .grow + .end, .li > .tile.l + .grow + .end { margin-left: 52px; }
  .head .t-h { max-width: none !important; }
}

/* ---------- small screens ---------- */
@media (max-width: 1100px) { .cols { grid-template-columns: minmax(0, 1fr); } .chat { position: static; height: 560px; } }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 120; left: 0; top: 0; width: 280px; background: var(--paper); transform: translateX(-100%); transition: transform 250ms; box-shadow: 1px 0 0 var(--surface); }
  .shell.menu .side { transform: none; }
  .mobile-bar { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--pad); position: sticky; top: 0; z-index: 60; background: var(--paper); }
  .main { padding-top: 8px; }
  .phases { grid-template-columns: repeat(var(--n, 5), minmax(140px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .signoffs { grid-template-columns: minmax(0, 1fr); }
  .cols.even, .fields.two, .fields.three, .choices { grid-template-columns: minmax(0, 1fr); }
  .signin { grid-template-columns: minmax(0, 1fr); }
  .signin .art { display: none; }
  .paper { padding: 24px; aspect-ratio: auto; }
  .paper .pairs { grid-template-columns: 1fr 1fr; }
  .month .d { min-height: 72px; }
  .month .ev span { display: none; }
  .drawer { padding: 20px; }
  .drawer .bh.top { margin: -20px -20px 20px; padding: 12px 20px; }
}
@media (max-width: 600px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .kv dd { margin-bottom: 8px; } .li { flex-wrap: wrap; } .li .end { margin-left: 0; } }

@media print {
  body * { visibility: hidden; }
  .paper, .paper * { visibility: visible; }
  .paper { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: auto; min-height: 100vh; padding: 16mm; }
}