/* Launch My Firm — AI team office.
   A dark room with a lit campus in the middle of it. Bricolage Grotesque for the interface, Instrument Serif for the big numbers.
   Each department keeps one muted colour; red is the brand and anything live. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%;
  src: url("/fonts/bricolage-grotesque-latin-ext-standard-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%;
  src: url("/fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --page: #0C0C0E;
  --panel: #141417;
  --raise: #1B1B1F;
  --line: #27272C;
  --line-2: #37373D;
  --text: #F3F1EC;
  --soft: #C9C5BC;
  --muted: #8F8B83;
  --faint: #5F5C56;
  --red: #FB1B39;
  --red-dim: #C4142C;
  --red-wash: #2B1218;
  --ok: #3DC07F;
  --warn: #E0A33A;
  --warn-wash: #2A2113;
  --font: "Inter", -apple-system, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --brand-font: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino", Georgia, serif;
  --bar-h: 56px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.45; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; overflow: hidden; }
button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- top bar */
.bar { height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 14px; border-bottom: 1px solid var(--line); background: var(--page); }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand-logo { height: 44px; width: auto; display: block; }
.brand-what { color: var(--muted); font-size: 15px; padding-left: 12px; border-left: 2px solid var(--red); line-height: 1; }
.bar-right { display: flex; align-items: center; gap: 18px; font-size: 13.5px; }
.bar-gaps { background: var(--panel); border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 13px; color: var(--soft); }
.bar-gaps b { color: var(--red); }
.bar-gaps:hover { border-color: var(--red); color: var(--text); }
.bar-gaps b { color: var(--red); font-weight: 700; }
.bar-plan { display: flex; align-items: center; gap: 16px; }
.gauge { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.gauge-bar { width: 54px; height: 3px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.gauge-bar i { display: block; height: 100%; background: var(--text); border-radius: 2px; transition: width 0.6s ease; }
.gauge.is-high .gauge-bar i { background: var(--warn); }
.gauge.is-full .gauge-bar i { background: var(--red); }
.gauge b { font-family: var(--serif); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.bar-claude { color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.bar-claude::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.bar-claude.is-off { color: var(--warn); }
.bar-claude.is-off::before { background: var(--warn); }

/* ---------- layout */
.office { height: calc(100vh - var(--bar-h)); display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 29vw, 440px); }
.room { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 12px 18px 16px; gap: 12px; }
.floor-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; container-type: size; overflow: hidden; border-radius: 16px; }
.floor-wrap.is-zoomed { cursor: grab; }
.floor-wrap.is-dragging { cursor: grabbing; user-select: none; }
.floor { position: relative; aspect-ratio: 1200 / 780; width: min(100cqw, calc(100cqh * 1200 / 780)); container-type: inline-size; --u: calc(100cqw / 1200); user-select: none; transform-origin: 50% 50%; transition: transform 0.25s ease; }
.is-dragging .floor { transition: none; }
.plan { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.spots { position: absolute; inset: 0; }

/* ---------- things on the floor */
.spot, .plane, .card { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); }
.spot { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; color: var(--text); transition: opacity 0.18s ease; }
.spot.is-dim { opacity: 0.22; }
.spot:focus-visible { outline: none; }

/* name tags over the desks */
.tag { position: relative; display: grid; justify-items: center; gap: 0; width: max-content; max-width: calc(170 * var(--u)); background: rgba(18, 18, 21, 0.94); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; padding: calc(3 * var(--u)) calc(10 * var(--u)) calc(3.5 * var(--u)); box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.45); transition: translate 0.16s ease, border-color 0.16s ease, box-shadow 0.3s ease, border-radius 0.2s ease; }
.tag-name { white-space: nowrap; font-weight: 650; font-stretch: 90%; font-size: max(10px, calc(12.5 * var(--u))); line-height: 1.2; letter-spacing: 0.01em; color: var(--text); }
.tag-name::before { content: ""; display: inline-block; vertical-align: middle; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--role, var(--faint)); margin: 0 calc(6 * var(--u)) calc(1.5 * var(--u)) 0; }
.tag-line { display: none; max-width: calc(170 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: max(9.5px, calc(11 * var(--u))); line-height: 1.25; }
.spot:hover .tag, .spot:focus-visible .tag, .spot.is-working .tag, .spot.is-selected .tag { border-radius: calc(10 * var(--u)); padding: calc(4 * var(--u)) calc(11 * var(--u)) calc(5 * var(--u)); }
.spot:hover .tag-line, .spot:focus-visible .tag-line, .spot.is-working .tag-line, .spot.is-selected .tag-line { display: block; }
.spot:hover .tag, .spot:focus-visible .tag { translate: 0 calc(-2 * var(--u)); border-color: rgba(255, 255, 255, 0.5); }
.spot:focus-visible .tag { outline: 2px solid var(--red); outline-offset: 2px; }
.spot.is-selected .tag { border-color: var(--red); box-shadow: 0 0 0 calc(2 * var(--u)) rgba(251, 27, 57, 0.25), 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.45); }
.spot.is-working .tag { border-color: var(--role); background: rgba(24, 24, 28, 0.97); box-shadow: 0 0 calc(18 * var(--u)) color-mix(in srgb, var(--role) 35%, transparent), 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.45); }
.spot.is-working .tag-line { color: var(--text); }
.spot.is-working .tag-name::before { background: var(--red); animation: breathe 1.3s ease-in-out infinite; }
.spot.is-done .tag-name::before { background: var(--ok); }
.spot.is-blocked .tag-name::before { background: var(--warn); }
.spot.is-crowded .tag { padding: calc(2 * var(--u)) calc(8 * var(--u)) calc(2.5 * var(--u)); }
.spot.is-crowded .tag-name { font-size: max(9px, calc(10.5 * var(--u))); }
.spot.is-crowded .tag-line { font-size: max(9px, calc(10 * var(--u))); }
.label-spot .tag-name { text-transform: uppercase; letter-spacing: 0.08em; font-size: max(9px, calc(11 * var(--u))); }

/* binders: the title shows when you point at one */
.binder-spot { overflow: visible; }
.tip { position: absolute; bottom: 100%; left: 50%; translate: -50% calc(-4 * var(--u)); white-space: nowrap; background: var(--text); color: var(--page); border-radius: 7px; padding: 4px 9px; font-size: 12.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.14s ease; z-index: 3; }
.binder-spot:hover .tip, .binder-spot:focus-visible .tip { opacity: 1; }
.binder-spot:focus-visible { outline: 2px solid var(--red); outline-offset: 0; border-radius: 4px; }
.binder { transition: translate 0.16s ease; }
.binder.is-hover { translate: 0 -4px; }
.binder .flag { opacity: 0; }
.binder.has-gaps .flag { opacity: 1; }

/* the drawing */
.walk-line { stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 9; opacity: 0; }
.walk.is-live .walk-line { opacity: 0.9; animation: march 0.8s linear infinite; }
.walk, .island, .furn { transition: opacity 0.2s ease, filter 0.3s ease; }
.walk.is-dim, .island.is-dim { opacity: 0.35; }
.furn.is-dim { opacity: 0.35; }
.dotted path { stroke-width: 1.2; stroke-dasharray: 1 6; stroke-linecap: round; opacity: 0.45; transition: opacity 0.3s ease, stroke 0.3s ease; }
.dotted.is-live path { opacity: 0.9; stroke: var(--red); }
.particle { display: none; filter: drop-shadow(0 0 4px currentColor); }
.walk.is-live .particle, .dotted.is-live .particle { display: block; }
@media (prefers-reduced-motion: reduce) { .particle { display: none !important; } }
.island .inner { opacity: 0.55; }
.island .edge { opacity: 0.55; transition: opacity 0.3s ease; }
.island.is-live .edge { opacity: 1; animation: breathe 1.6s ease-in-out infinite; }
.island.is-hover > .top { filter: brightness(1.03); }
.route { stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 9; opacity: 0.9; }
.furn .pool { opacity: 0; transition: opacity 0.4s ease; }
.furn.is-working .pool { opacity: 0.22; animation: pool 2.2s ease-in-out infinite; }
.furn.is-pulse .pool { animation: arrive 0.9s ease-out 1; }
.furn .screen-head, .furn .screen-lines { opacity: 0; transition: opacity 0.35s ease; }
.furn.is-working .screen-head, .furn.is-working .screen-lines { opacity: 1; }
.furn .ln { stroke-width: 1.3; stroke-linecap: round; fill: none; stroke-dasharray: 20; }
.furn.is-working .ln { animation: write 2.4s ease-out infinite; }
.furn.is-working .ln-1 { animation-delay: 0.3s; }
.furn.is-working .ln-2 { animation-delay: 0.6s; }
.furn.is-working .cursor { animation: blink 1s steps(1, end) infinite; }
.furn.is-done .screen-head { opacity: 1; }
.furn .dots { opacity: 0; transition: opacity 0.25s ease; }
.furn.is-working .dots { opacity: 1; }
.furn.is-working .dot-0 { animation: hop 1.2s ease-in-out infinite; }
.furn.is-working .dot-1 { animation: hop 1.2s ease-in-out 0.2s infinite; }
.furn.is-working .dot-2 { animation: hop 1.2s ease-in-out 0.4s infinite; }
.furn.is-hover { filter: brightness(1.06) drop-shadow(0 0 6px rgba(255, 255, 255, 0.25)); }
.furn.is-selected { filter: drop-shadow(0 0 5px rgba(251, 27, 57, 0.55)); }
@keyframes breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes pool { 0%, 100% { opacity: 0.16; } 50% { opacity: 0.3; } }
@keyframes arrive { 0% { opacity: 0.5; } 100% { opacity: 0; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes hop { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
@keyframes march { to { stroke-dashoffset: -11; } }
@keyframes write { 0% { stroke-dashoffset: 20; } 55%, 100% { stroke-dashoffset: 0; } }

.plane { width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin: calc(-16 * var(--u)) 0 0 calc(-16 * var(--u)); rotate: var(--r, 0rad); pointer-events: none; filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(251, 27, 57, 0.7)); will-change: left, top; z-index: 4; }
.plane svg { width: 100%; height: 100%; display: block; }

/* ---------- the department cards */
.card { width: calc(var(--w) * var(--u)); background: rgba(18, 18, 21, 0.93); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: calc(14 * var(--u)); color: var(--text); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.5); text-align: left; display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(4 * var(--u)); padding: calc(10 * var(--u)) calc(13 * var(--u)) calc(9 * var(--u)); transition: translate 0.16s ease, border-color 0.16s ease, box-shadow 0.3s ease, opacity 0.2s ease; z-index: 2; }
button.card:hover, button.card:focus-visible { translate: 0 calc(-2 * var(--u)); border-color: rgba(255, 255, 255, 0.45); }
button.card:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.card.is-dim { opacity: 0.3; }
.card.is-selected { border-color: var(--red); box-shadow: 0 0 0 calc(2 * var(--u)) rgba(251, 27, 57, 0.25), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.5); }
.card.is-live { border-color: var(--red); animation: cardglow 1.8s ease-in-out infinite; }
@keyframes cardglow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 0%, transparent), 0 0 calc(18 * var(--u)) color-mix(in srgb, var(--red) 25%, transparent), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.5); } 50% { box-shadow: 0 0 0 calc(5 * var(--u)) color-mix(in srgb, var(--red) 14%, transparent), 0 0 calc(34 * var(--u)) color-mix(in srgb, var(--red) 45%, transparent), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.5); } }
@media (prefers-reduced-motion: reduce) { .card.is-live { animation: none; box-shadow: 0 0 calc(24 * var(--u)) color-mix(in srgb, var(--red) 35%, transparent), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.5); } }
.card-head { display: flex; align-items: center; gap: calc(7 * var(--u)); }
.tag-icon { flex: none; width: max(9px, calc(13 * var(--u))); height: max(9px, calc(13 * var(--u))); color: var(--role, var(--muted)); }
.card-name { flex: 1 1 auto; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 650; font-size: max(9px, calc(11 * var(--u))); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-live { flex: none; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--red); opacity: 0; }
.card.is-live .card-live { opacity: 1; animation: breathe 1.3s ease-in-out infinite; }
.card.is-waiting:not(.is-live) .card-live { opacity: 1; background: var(--warn); }
.card-big { display: flex; align-items: baseline; gap: calc(7 * var(--u)); padding: calc(2 * var(--u)) 0 calc(4 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.card-big .num { font-family: var(--serif); font-weight: 400; font-size: max(20px, calc(33 * var(--u))); line-height: 0.9; letter-spacing: -0.02em; }
.card-unit { text-transform: uppercase; letter-spacing: 0.12em; font-size: max(9px, calc(10.5 * var(--u))); color: var(--muted); }
.card-rows { display: grid; gap: calc(1 * var(--u)); }
.card-row { display: flex; justify-content: space-between; align-items: baseline; gap: calc(10 * var(--u)); }
.card-row .k, .card-cell .k { text-transform: uppercase; letter-spacing: 0.06em; font-size: max(8px, calc(9.2 * var(--u))); color: var(--muted); white-space: nowrap; }
.card .v { font-family: var(--serif); font-weight: 400; font-size: max(13px, calc(18 * var(--u))); line-height: 1; font-variant-numeric: tabular-nums; }
.card .v.is-red { color: var(--red); }
.card-foot { display: flex; justify-content: space-between; gap: max(6px, calc(6 * var(--u))); min-width: 0; padding-top: calc(5 * var(--u)); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.card-cell { display: flex; align-items: baseline; gap: calc(4 * var(--u)); min-width: 0; }
.card-cell .v { font-size: max(12px, calc(16 * var(--u))); }
.card.is-live .card-cell:first-child .v { color: var(--red); }
.card.is-waiting .card-cell:nth-child(2) .v { color: var(--warn); }
.v.is-tick { animation: tick 1.3s ease-out 1; }
@keyframes tick { 0% { color: var(--red); scale: 1.3; } 55% { color: var(--red); scale: 1; } 100% { color: inherit; } }

/* the clock card: the time, the date and where the office is */
.clock { display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u)); cursor: default; }
.clock-time { flex: none; display: flex; align-items: baseline; font-family: var(--serif); font-size: max(18px, calc(40 * var(--u))); line-height: 0.95; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.clock-colon { color: var(--red); margin: 0 0.04em; animation: colon 2s steps(1, end) infinite; }
.clock-ampm { font-family: var(--font); font-size: 0.3em; font-weight: 650; letter-spacing: 0.1em; margin-left: 0.5em; color: var(--muted); text-transform: uppercase; }
.clock-side { min-width: 0; display: grid; gap: calc(3 * var(--u)); padding-left: calc(16 * var(--u)); border-left: 1px solid rgba(255, 255, 255, 0.12); }
.clock-date { font-size: max(10.5px, calc(14 * var(--u))); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.clock-date-short { display: none; }
.clock-place { display: flex; align-items: center; gap: calc(5 * var(--u)); color: var(--muted); font-size: max(10px, calc(12.5 * var(--u))); line-height: 1.2; white-space: nowrap; }
.clock-place svg { flex: none; width: max(8px, calc(10 * var(--u))); height: auto; }
@keyframes colon { 0% { opacity: 1; } 50% { opacity: 0.3; } }

/* zoom buttons */
.zoom { position: absolute; left: 10px; bottom: 10px; display: grid; gap: 6px; z-index: 5; }
.zoom-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font-size: 17px; line-height: 1; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
.zoom-btn:hover { border-color: rgba(255, 255, 255, 0.5); }

/* a small window: keep the floor readable */
/* a small window: the cards keep their names and drop their numbers. The floor decides this from the room it has (floor.js), not from its own width, so the layout cannot flip back and forth. */
.floor.is-tight .card-rows, .floor.is-tight .card-foot { display: none; }

/* ---------- the sign-in page, when the office has a password */
.login-page { overflow: auto; display: grid; place-items: center; min-height: 100%; padding: 24px; }
.login { width: min(380px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 34px 30px 30px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
.login-logo { height: 56px; width: auto; }
.login h1 { margin: 4px 0 0; font-size: 20px; font-weight: 750; font-stretch: 86%; letter-spacing: -0.01em; }
.login-lede { margin: 0; color: var(--muted); font-size: 14px; }
.login form { display: grid; gap: 10px; width: 100%; margin-top: 8px; }
.login input { width: 100%; background: var(--raise); border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 12px; font-size: 15px; color: var(--text); }
.login input:focus { outline: none; border-color: var(--red); }
.login .send { width: 100%; }
.login .msg { margin: 0; color: var(--warn); font-size: 14px; }

/* ---------- your desk: where a job is written */
.composer { flex: none; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px 9px; display: grid; gap: 7px; }
.composer-to { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); min-height: 24px; }
.to-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--red-wash); color: var(--text); border: 1px solid #5C1420; border-radius: 999px; padding: 2px 4px 2px 11px; font-weight: 600; }
.to-chip button { background: none; border: 0; color: var(--soft); width: 22px; height: 22px; border-radius: 50%; line-height: 1; font-size: 16px; }
.to-chip button:hover { background: #3A141B; color: #fff; }
.composer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: stretch; }
textarea { width: 100%; resize: none; max-height: 140px; background: var(--raise); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; line-height: 1.4; color: var(--text); }
textarea::placeholder { color: var(--faint); }
textarea:focus { outline: none; border-color: var(--red); background: var(--page); }
.send { background: var(--red); color: #fff; border: 0; border-radius: 10px; padding: 0 20px; font-weight: 700; font-size: 15px; min-height: 44px; }
.send:hover { background: var(--red-dim); }
.send:disabled { background: #3A2A2D; color: #9A8F91; cursor: default; }
.flows { display: flex; flex-wrap: wrap; gap: 7px; }
.flow { background: var(--panel); border: 1px solid var(--line-2); color: var(--soft); border-radius: 999px; padding: 4px 12px; font-size: 13.5px; }
.flow:hover { border-color: #6A6A6A; color: var(--text); }
.flow[aria-pressed="true"] { background: var(--text); color: var(--page); border-color: var(--text); font-weight: 650; }
.composer-help { margin: 0; color: var(--muted); font-size: 12.5px; min-height: 1.45em; max-width: 92ch; }
.composer-help.is-error { color: var(--warn); }

/* ---------- the reading pane */
.pane { min-height: 0; border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; }
.pane-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.pane-title { font-family: var(--serif); font-size: 24px; line-height: 1; margin: 0; font-weight: 400; letter-spacing: 0.01em; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--ok); color: var(--ok); border-radius: 999px; padding: 3px 10px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.live-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: breathe 1.6s ease-in-out infinite; }
.live-pill.is-off { border-color: var(--warn); color: var(--warn); }
.chips-row { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 20px 12px; border-bottom: 1px solid var(--line); }
.chip { background: none; border: 1px solid var(--line-2); color: var(--muted); border-radius: 999px; padding: 4px 11px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.chip b { font-weight: 600; font-size: 11px; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--text); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--page); }
.chip[aria-pressed="true"] b { color: var(--page); }
.chip.c-waiting[aria-pressed="false"] b { color: var(--warn); }
.chip.c-rejected[aria-pressed="false"] b { color: var(--red); }
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.task { width: 100%; text-align: left; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: start; background: var(--raise); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px 10px; color: var(--text); transition: border-color 0.15s ease, translate 0.15s ease; }
.task:hover { border-color: var(--line-2); translate: 0 -1px; }
.task-pill { grid-row: 1 / span 2; align-self: start; margin-top: 1px; min-width: 42px; text-align: center; border: 1.5px solid var(--line-2); border-radius: 999px; padding: 2px 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--soft); font-variant-numeric: tabular-nums; }
.task.is-running .task-pill { border-color: var(--text); color: var(--text); }
.task.is-completed .task-pill { border-color: var(--ok); color: var(--ok); font-size: 9.5px; letter-spacing: 0.1em; }
.task.is-rejected .task-pill { border-color: var(--red); color: var(--red); font-size: 9.5px; letter-spacing: 0.1em; }
.task.is-waiting .task-pill { border-color: var(--warn); color: var(--warn); font-size: 9.5px; letter-spacing: 0.1em; }
.task.is-queued .task-pill, .task.is-stopped .task-pill { font-size: 9.5px; letter-spacing: 0.1em; color: var(--muted); }
.task-title { font-weight: 600; font-size: 14.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.task.is-completed .task-title { text-decoration: line-through; text-decoration-color: var(--ok); text-decoration-thickness: 1.5px; color: var(--soft); }
.task-when { color: var(--muted); font-size: 11.5px; white-space: nowrap; margin-top: 2px; }
.task-meta { grid-column: 2 / span 2; color: var(--muted); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.task-meta .sep { color: var(--line-2); }
.task-meta .ok { color: var(--ok); } .task-meta .bad { color: var(--red); } .task-meta .warn { color: var(--warn); }
.task-bar { grid-column: 2 / span 2; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.task-bar i { display: block; height: 100%; width: 0; background: var(--text); border-radius: 2px; transition: width 0.9s cubic-bezier(.2,.7,.2,1); }
.task.is-completed .task-bar i { background: var(--ok); } .task.is-rejected .task-bar i { background: var(--red); } .task.is-waiting .task-bar i { background: var(--warn); }
.task-trail { grid-column: 2 / span 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11.5px; color: var(--muted); }
.task-trail .arrow { color: var(--line-2); }
.rejection { border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); border-left-width: 3px; border-radius: 10px; padding: 10px 12px; margin-top: 14px; background: color-mix(in srgb, var(--red) 6%, transparent); }
.rejection h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--red); font-weight: 700; letter-spacing: 0.02em; }
.rejection ol { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--soft); }
.rejection ol li + li { margin-top: 3px; }
.rejection .after { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.cost-line { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.tabs { flex: none; display: flex; gap: 22px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.tab { background: none; border: 0; padding: 15px 0 12px; color: var(--muted); font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--red); }
.tab .count { color: var(--muted); font-weight: 500; margin-left: 5px; }
.pane-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px 26px; scrollbar-color: var(--line-2) transparent; }
.pane-foot { flex: none; border-top: 1px solid var(--line); padding: 12px 20px 16px; display: grid; gap: 8px; background: var(--raise); }
.pane h2 { font-family: var(--serif); font-size: 26px; line-height: 1.1; margin: 0 0 6px; font-weight: 400; letter-spacing: 0; }
.pane h3 { font-size: 13.5px; font-weight: 600; color: var(--muted); margin: 22px 0 8px; }
.back { background: none; border: 0; padding: 0; color: var(--muted); font-size: 13.5px; margin-bottom: 12px; }
.back:hover { color: var(--text); }
.lede { color: var(--soft); margin: 0 0 4px; max-width: 60ch; }
.quiet { color: var(--muted); font-size: 13.5px; margin: 0; }
.pane-body > .quiet + .files, .pane-body > .lede + .files { margin-top: 14px; }
.pane-body > .files + .quiet { margin-top: 14px; }
.pane-body > .lede + .quiet { margin-top: 8px; }
.pane-body > .lede + .quick, .pane-body > .status + .quick { margin-top: 14px; }
.empty { color: var(--soft); max-width: 44ch; margin: 28px 0 0; }
.empty strong { display: block; font-size: 19px; font-stretch: 88%; color: var(--text); margin-bottom: 6px; }

.status { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--soft); margin: 2px 0 0; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; }
.is-running .dot { background: var(--red); animation: breathe 1.6s ease-in-out infinite; }
.is-done .dot { background: var(--ok); }
.is-asking .dot, .is-queued .dot { background: var(--warn); }
.is-error .dot, .is-stopped .dot { background: var(--faint); }
.alert { border-left: 3px solid var(--warn); background: var(--warn-wash); padding: 9px 12px; border-radius: 0 8px 8px 0; color: #F1DCAE; font-size: 14px; margin: 12px 0 0; }

.jobs { list-style: none; margin: 0; padding: 0; }
.job { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 11px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 12px 0; }
.job:hover .job-title { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.job .dot { align-self: center; }
.job-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-meta { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.job-when { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

.steps { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line-2); }
.step { position: relative; padding: 0 0 14px 16px; }
.step:last-child { padding-bottom: 2px; }
.step::before { content: ""; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--panel); border: 2px solid var(--faint); }
.step.is-working::before { border-color: var(--red); background: var(--red); animation: breathe 1.6s ease-in-out infinite; }
.step.is-done::before { border-color: var(--ok); background: var(--ok); }
.step.is-blocked::before, .step.is-stopped::before { border-color: var(--warn); }
.step-desk { font-weight: 700; font-stretch: 88%; }
.step-desk button { background: none; border: 0; padding: 0; font-weight: inherit; font-stretch: inherit; }
.step-desk button:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.step-label { color: var(--soft); font-size: 14px; }
.step-note { color: var(--muted); font-size: 13px; }
.step details { margin-top: 4px; }
.step summary { color: var(--muted); font-size: 13px; cursor: pointer; }
.step summary:hover { color: var(--text); }
.step .report { margin: 6px 0 0; max-height: 300px; overflow: auto; border-left: 2px solid var(--line-2); padding-left: 10px; scrollbar-color: var(--line-2) transparent; }
.pane .step .report .md { font-size: 13.5px; color: var(--soft); }

.verdict { display: inline-flex; align-items: baseline; gap: 8px; border: 1.5px solid currentColor; border-radius: 8px; padding: 6px 12px; font-weight: 700; font-stretch: 88%; margin-top: 14px; rotate: -1.2deg; background: var(--panel); }
.verdict small { font-weight: 500; font-size: 12.5px; opacity: 0.85; }
.verdict.v-ready { color: var(--ok); }
.verdict.v-fixes { color: var(--warn); }
.verdict.v-not { color: var(--red); }

.files { list-style: none; margin: 0; padding: 0; }
.file { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 9px 0; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.file:hover .file-name { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.file-meta { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.file-gaps { color: var(--red); font-weight: 650; }
.area-name { text-transform: capitalize; }

.turn { margin: 18px 0 0; }
.turn.first { margin-top: 14px; }
.turn-who { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.turn.you .turn-text { background: var(--raise); border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; padding: 9px 12px; white-space: pre-wrap; color: var(--soft); max-height: 190px; overflow: auto; }
.live { color: var(--soft); border-left: 2px solid var(--red); padding-left: 12px; white-space: pre-wrap; font-size: 14.5px; margin-top: 16px; }
.denied { color: var(--warn); font-size: 13.5px; margin: 12px 0 0; }
.gate { border: 1px solid #4A3C1C; background: var(--warn-wash); border-radius: 10px; padding: 10px 12px; margin: 14px 0 0; display: grid; gap: 9px; }
.gate p { margin: 0; color: #F1DCAE; font-size: 14px; }
.gate .linkish { color: #fff; }
.gate .ghost { border-color: #8A6F2B; color: #fff; background: none; }
.gate .ghost:hover { border-color: var(--warn); }

.reply-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.reply-row textarea { background: var(--page); color: var(--text); caret-color: var(--text); }   /* the answer box: light text on a dark box, like the one under the floor */
.btn { background: var(--text); color: var(--page); border: 0; border-radius: 10px; padding: 0 16px; font-weight: 700; min-height: 40px; }
.btn:hover { background: #FFFFFF; }
.btn:disabled { background: #2B2B2B; color: #777; cursor: default; }
.ghost { background: var(--panel); border: 1px solid var(--line-2); color: var(--soft); border-radius: 999px; padding: 5px 13px; font-size: 13.5px; }
.ghost:hover { border-color: #6A6A6A; color: var(--text); }
.quick { display: flex; flex-wrap: wrap; gap: 7px; }
.linkish { background: none; border: 0; padding: 0; color: var(--soft); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.linkish:hover { color: var(--text); text-decoration-color: var(--red); }
.facts { margin: 0; padding: 0; list-style: none; }
.facts li { padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--soft); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dept-agents { list-style: none; margin: 0; padding: 0; }
.dept-agent { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); padding: 9px 0; }
.dept-agent .linkish { font-weight: 600; text-decoration: none; text-align: left; }
.dept-agent .linkish:hover { text-decoration: underline; }
.dept-agent small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.dept-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 0; }
.dept-numbers > div { background: var(--raise); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; min-width: 0; }
.dept-numbers b { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1; }
.dept-numbers span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }

/* ---------- rendered text (team replies in the pane, files on the sheet) */
.md { overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md p { margin: 0.6em 0; max-width: 72ch; }
.md h1, .md h2, .md h3, .md h4 { font-stretch: 88%; letter-spacing: -0.01em; line-height: 1.2; margin: 1.3em 0 0.45em; color: inherit; font-weight: 750; }
.md h1 { font-size: 1.5em; } .md h2 { font-size: 1.25em; } .md h3 { font-size: 1.08em; } .md h4 { font-size: 1em; }
.md ul, .md ol { margin: 0.5em 0; padding-left: 1.3em; max-width: 72ch; }
.md li { margin: 0.22em 0; }
.md li.in1 { margin-left: 1.3em; } .md li.in2 { margin-left: 2.6em; }
.md code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; background: rgba(127, 127, 127, 0.18); padding: 0.08em 0.36em; border-radius: 4px; }
.md pre { background: rgba(127, 127, 127, 0.14); padding: 11px 13px; border-radius: 8px; overflow: auto; font-size: 0.86em; line-height: 1.45; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: 0.7em 0; padding: 0.1em 0 0.1em 14px; border-left: 3px solid var(--red); opacity: 0.92; }
.md hr { border: 0; border-top: 1px solid var(--line-2); margin: 1.2em 0; }
.md a { color: inherit; text-decoration-color: var(--red); text-underline-offset: 3px; }
.md .table-scroll { overflow-x: auto; margin: 0.8em 0; scrollbar-color: var(--line-2) transparent; padding-bottom: 4px; }
.md table { border-collapse: collapse; font-size: 0.92em; min-width: 100%; overflow-wrap: normal; word-break: normal; }
.md th, .md td { text-align: left; vertical-align: top; padding: 7px 14px 7px 0; border-bottom: 1px solid var(--line); min-width: 5.5em; max-width: 32ch; }
.md th:last-child, .md td:last-child { padding-right: 0; }
.md th { font-weight: 700; border-bottom-width: 2px; border-color: var(--line-2); white-space: nowrap; }
.md mark.gap { background: none; color: var(--red); border: 1px solid currentColor; border-radius: 5px; padding: 0 5px; font-weight: 600; font-size: 0.93em; }
.pane .md { font-size: 14.5px; color: var(--text); }

/* ---------- the sheet: a file, read on paper */
.sheet-wrap { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72); display: grid; place-items: center; padding: 28px; z-index: 10; }
.sheet { background: #FAF9F6; color: #151515; width: min(900px, 100%); max-height: 100%; border-radius: 10px; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(40, 30, 10, 0.3); }
.sheet-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding: 22px 30px 14px; border-bottom: 1px solid #DEDAD2; }
.sheet-head h2 { margin: 0; font-size: 24px; font-weight: 800; font-stretch: 86%; letter-spacing: -0.012em; line-height: 1.15; }
.sheet-path { margin: 4px 0 0; color: #6B665E; font-size: 13px; }
.sheet-actions { display: flex; gap: 8px; flex: none; }
.ghost-dark { background: none; border: 1px solid #C9C4BA; color: #2A2826; border-radius: 999px; padding: 5px 13px; font-size: 13.5px; }
.ghost-dark:hover { border-color: #151515; }
a.ghost-dark { display: inline-block; text-decoration: none; line-height: 1.3; }
.sheet-body { padding: 20px 30px 34px; overflow-y: auto; font-size: 15.5px; line-height: 1.55; }
.sheet .md { color: #151515; }
.sheet .md mark.gap { color: var(--red-dim); }
.sheet .md th, .sheet .md td { border-color: #DEDAD2; }
.sheet-body img, .sheet-body video { max-width: 100%; max-height: 72vh; display: block; margin: 0 auto; border-radius: 4px; }

@media (max-width: 980px) {
  body { overflow: auto; }
  .office { grid-template-columns: minmax(0, 1fr); height: auto; }
  .floor-wrap { container-type: inline-size; }
  .floor { width: 100cqw; }
  .pane { border-left: 0; border-top: 1px solid var(--line); min-height: 60vh; }
  .composer-row { grid-template-columns: minmax(0, 1fr); }
  .send { min-height: 44px; }
  .brand-what { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.sheet-body img.design { display: block; max-width: 100%; height: auto; margin: 0 auto; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sheet-body img.design.page { max-height: none; margin-bottom: 14px; }
.sheet-body iframe.pdf { display: block; width: 100%; height: 72vh; border: 0; background: #fff; }
a.ghost { display: inline-block; text-decoration: none; }
.quick.take { margin: 10px 0 4px; }
.pane-body p.where { margin: 10px 0 0; font-size: 13px; line-height: 1.45; }
.card.is-compact .card-big { display: none; }
.card.is-compact .card-foot { flex-wrap: wrap; row-gap: calc(3 * var(--u)); }   /* on a small window the third figure drops to its own line instead of colliding */
.card.is-compact .card-name { letter-spacing: 0.07em; }

.card-row .k.is-usage, .card-cell .k { white-space: nowrap; }

/* clients: a status word beside each client's name */
.client-status { font-weight: 650; color: var(--soft); }
.client-status.is-active { color: #6FBF8E; }
.client-status.is-onboarding { color: var(--warn); }
.client-status.is-paused, .client-status.is-ended { color: var(--muted); }
.pane-body > .client-add { margin-top: 12px; }
.pane-body h3 > .linkish { font: inherit; color: inherit; text-decoration-color: var(--line-2); }

/* handing files to the team */
.attach { display: grid; gap: 6px; min-width: 0; }
.attach[hidden] { display: none; }
.composer-row .attach-btn { border-radius: 10px; padding: 0 14px; white-space: nowrap; }
.attach-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 30px; }
.attach-btn { display: inline-flex; align-items: center; gap: 6px; }
.attach-btn .clip { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid currentColor; font-size: 12px; line-height: 1; }
.attach-who { color: var(--muted); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.attach-who[hidden] { display: none; }
.attach-for { font: inherit; font-size: 13px; color: var(--text); background: var(--raise); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 8px; max-width: 240px; }
.attach-msg { color: var(--muted); font-size: 12.5px; min-width: 0; flex: 1 1 200px; }
.attach-msg.is-error { color: var(--warn); }
.attach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.attach-list[hidden] { display: none; }
.attach-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; background: var(--raise); border: 1px solid var(--line-2); border-radius: 9px; padding: 4px 6px 4px 10px; font-size: 13px; }
.attach-file.is-logo { border-color: var(--warn); }
.attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; font-weight: 550; }
.attach-size { color: var(--muted); font-size: 12px; white-space: nowrap; }
.attach-logo { display: inline-flex; align-items: center; gap: 5px; color: var(--soft); font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.attach-logo input { accent-color: var(--red); margin: 0; }
.attach-x { background: none; border: 0; color: var(--muted); font-size: 16px; line-height: 1; padding: 2px 5px; border-radius: 6px; }
.attach-x:hover { color: var(--text); background: var(--line); }
.pane-foot .attach-file, .pane-foot .attach-for { background: var(--page); }