/* C-Lion U3, the rooms, all nine built in the Marketing studio system.
   Celine ruled H2 on 16 Sep 2026, so the shapes that were H2's alone are now
   the shapes every room uses: the tall tile with its own kind of graphic, the
   section header with a pastel edge, the icon badge card, the segmented ring,
   two bars on one shared scale, the seven by four heat grid, the seven day rail
   with nodes, and the chat bubble with its evidence beside it.

   Two H2 rulings she saw and kept, and they are not undone here: H1's hero area
   chart is NOT on Home, and H3's mosaic is NOT on Home.

   Nothing in this file sets a colour that is not already a token in
   palette.css, leads.css or studio.css. */

/* ================= Home, H2 exactly ================= */

/* Three read only figures and one thing to act on. The row used to be four
   identical rectangles, which is repetition without relief, so the one
   actionable tile is wider, carries a lemon wash and a lemon top edge, and
   ends in a button. The three stats keep the plain card. */
/* Two rows. Three read only figures across the top, then the two things a
   client can act on, wider and carrying their own pastel wash and top edge.
   One row of four identical rectangles was repetition without relief. */
.h2-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
.h2-tiles-act { grid-template-columns:repeat(2,1fr); margin-bottom:24px; }
.h2-tile { padding:20px; display:flex; flex-direction:column; gap:16px; min-height:250px; }
.h2-tile-act, .h2-tile-ask { border-top:3px solid var(--p-lemon); }
.h2-tile-ask { border-top-color:var(--p-mint); }
.h2-tile-act { background:linear-gradient(180deg, rgba(251,240,196,.46), rgba(251,240,196,.12)); }
.h2-tile-ask { background:linear-gradient(180deg, rgba(205,235,221,.42), rgba(205,235,221,.10)); }
html[data-mode="dark"] .h2-tile-act { background:linear-gradient(180deg, rgba(251,240,196,.13), rgba(251,240,196,.04)); }
html[data-mode="dark"] .h2-tile-ask { background:linear-gradient(180deg, rgba(205,235,221,.13), rgba(205,235,221,.04)); }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .h2-tile-act { background:linear-gradient(180deg, rgba(251,240,196,.13), rgba(251,240,196,.04)); }
  html:not([data-mode="light"]) .h2-tile-ask { background:linear-gradient(180deg, rgba(205,235,221,.13), rgba(205,235,221,.04)); }
}
.h2-tile-act .cl-btn { margin-top:4px; }
.h2-tile-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.h2-tile-num { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.h2-tile-graphic { margin-top:auto; }
.h2-tile-cap { font-size:var(--t-2); color:var(--ink-muted); }

/* the little clock face on the next post tile, reading the hour the fixture
   actually names rather than a decorative clock stuck at ten past ten */
.h2-clock { width:58px; height:58px; }
.cl-body .h2-clock svg { width:58px; height:58px; }
.h2-clock circle { fill:none; stroke:var(--p-blue); stroke-width:6; }
.h2-clock .h2-clock-dot { fill:#1B4332; stroke:none; }
.h2-clock line { stroke:#1B4332; stroke-linecap:round; }
html[data-mode="dark"] .h2-clock line { stroke:#CDEBDD; }
html[data-mode="dark"] .h2-clock .h2-clock-dot { fill:#CDEBDD; }
html[data-mode="dark"] .h2-clock circle { stroke:rgba(214,228,238,.45); }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .h2-clock line { stroke:#CDEBDD; }
  html:not([data-mode="light"]) .h2-clock .h2-clock-dot { fill:#CDEBDD; }
  html:not([data-mode="light"]) .h2-clock circle { stroke:rgba(214,228,238,.45); }
}

.h2-ring-row { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.h2-ring-list { display:flex; flex-direction:column; gap:8px; min-width:150px; }
.h2-ring-item { display:flex; align-items:center; gap:8px; font-size:var(--t-2); color:var(--ink); }
.h2-ring-key { width:11px; height:11px; border-radius:3px; flex:none; }
.cl-body .h2-ring-item svg { width:16px; height:16px; color:var(--ink-strong); }

/* the mix bars, plan against published, both drawn on the same scale */
.h2-mix { display:flex; flex-direction:column; gap:16px; }
.h2-mix-row { display:flex; flex-direction:column; gap:8px; }
.h2-mix-head { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.h2-mix-total { font-family:var(--font-data); font-weight:700; color:var(--ink-strong); font-size:var(--t-3); }
.h2-mix .cx-segbar { height:22px; }
.h2-mix-legend { display:flex; flex-wrap:wrap; gap:16px; margin-top:4px; }

/* the seven day rail */
.h2-rail { position:relative; padding-top:6px; }
.h2-rail-line { position:absolute; left:0; right:0; top:44px; height:1px; background:var(--border); }
.h2-rail-days { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; position:relative; }
.h2-rail-day { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.h2-rail-name { font-size:var(--t-1); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); font-weight:700; }
.h2-rail-node { width:15px; height:15px; border-radius:50%; background:var(--surface);
  border:2px solid var(--border); }
.h2-rail-node-on { background:var(--p-blue); border-color:#1B4332; width:19px; height:19px; }
html[data-mode="dark"] .h2-rail-node-on { border-color:#CDEBDD; background:rgba(214,228,238,.5); }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .h2-rail-node-on { border-color:#CDEBDD; background:rgba(214,228,238,.5); }
}
.h2-rail-empty { font-size:var(--t-1); color:var(--ink-muted); line-height:1.35; }

.h2-next { display:flex; gap:16px; align-items:center; margin-top:24px;
  padding-top:20px; border-top:1px solid var(--border); flex-wrap:wrap; }
.h2-next .cx-plate { width:120px; aspect-ratio:4/5; height:auto; flex:none; }
.h2-next-copy { min-width:0; flex:1; }

/* Flora's panel on Home: her line, her three chips, and the figures it was read
   from printed beside it, so a suggestion never arrives as an opinion */
.h2-flora { display:flex; gap:16px; align-items:flex-start; }
.h2-flora-av { width:48px; height:48px; border-radius:50%; background:var(--p-mint);
  display:flex; align-items:center; justify-content:center; color:#1B4332; flex:none; }
.cl-body .h2-flora-av svg { width:29px; height:29px; }
html[data-mode="dark"] .h2-flora-av { background:rgba(205,235,221,.26); color:#F8F5F1; }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .h2-flora-av { background:rgba(205,235,221,.26); color:#F8F5F1; }
}
/* her mark breathes three times and stops. It used to loop indefinitely beside
   live content, which WCAG 2.2 SC 2.2.2 does not allow past five seconds
   without a way to pause it. Three cycles is under sixteen seconds and then it
   is still. */
.h2-flora-av svg { animation:cx-breathe 5.2s var(--ease) 3; transform-origin:center; }
@keyframes cx-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .h2-flora-av svg { animation:none; } }

.h2-bubble { background:var(--surface-2); border:1px solid var(--border);
  border-radius:16px 16px 16px 4px; padding:16px 18px; max-width:62ch; }
.h2-bubble-name { font-size:var(--t-1); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:700; margin-bottom:8px; }
.h2-flora-ev { margin-left:auto; display:flex; flex-direction:column; gap:8px;
  align-items:flex-start; padding-left:24px; border-left:1px solid var(--border); }
.h2-replies { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.h2-reply { border:1px solid var(--border); background:var(--surface); border-radius:999px;
  padding:9px 14px; font:inherit; font-size:var(--t-2); font-weight:700; color:var(--ink-strong);
  cursor:pointer; min-height:36px;
  transition:background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
.h2-reply:hover { background:var(--surface-2); transform:translateY(-1px); }

/* ================= Your brand ================= */

.br-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.br-card { padding:20px; display:flex; flex-direction:column; gap:12px; }
.br-card-top { display:flex; align-items:center; gap:12px; }
/* two lines, per the brief, so six cards read as one shelf rather than six
   different heights. The whole line lives in the file behind it, never here. */
.br-card-body { font-size:var(--t-2); color:var(--ink); line-height:1.55; flex:1; min-height:44px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.br-card-acts { display:flex; gap:8px; margin-top:auto; padding-top:6px; }
.br-src { font-size:var(--t-1); color:var(--ink-muted); }

/* the hero's third column: the positioning line at reading size */
.br-hero { align-items:flex-start; }
.br-hero-line { flex:1; min-width:260px; display:flex; flex-direction:column; gap:8px;
  padding-left:24px; border-left:1px solid var(--border); }
.br-hero-quote { font-size:var(--t-3); line-height:1.5; color:var(--ink-strong); margin:0; }
@media (max-width:900px) {
  .br-hero-line { padding-left:0; padding-top:16px; border-left:0; border-top:1px solid var(--border); width:100%; }
  .br-hero-quote { font-size:var(--t-3); }
}

/* the visual identity card: the eleven ruled roles as real swatches, and the
   logo floor drawn to scale rather than stated as a number.
   The columns were 148 wide and a three word role name wrapped into the row
   below it. 210 holds every one of the eleven names on two lines. */
.br-swatches { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px 16px;
  align-items:start; }
.br-swatch { display:flex; align-items:flex-start; gap:12px; font-size:var(--t-2); color:var(--ink);
  line-height:1.35; }
.br-chip { width:34px; height:34px; border-radius:8px; border:1px solid var(--border); flex:none; }
.br-hex { font-family:var(--font-data); font-size:var(--t-1); color:var(--ink-muted); display:block; }
.br-chip-sm { width:26px; height:26px; border-radius:6px; }
/* the one swatch that measures under 3 to 1 on a white card, fill and keyline
   both, gets a keyline of its own rather than the shared hairline */
.br-chip-faint { border-color:var(--ink-muted); }
.br-link { background:none; border:0; padding:0; font:inherit; font-size:var(--t-2); font-weight:700;
  color:var(--good); cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  text-decoration:underline; text-underline-offset:3px; }
.cl-body .br-link svg { width:15px; height:15px; }
html[data-mode="dark"] .br-link { color:#CDEBDD; }
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .br-link { color:#CDEBDD; } }
.br-card-acts { align-items:center; gap:16px; }

/* the measurements, folded away. A client reading their own brand page does
   not need eleven hex codes and a pixel floor; whoever does can open this. */
.br-measured { margin-top:24px; border-top:1px solid var(--border); padding-top:14px; }
.br-measured > summary { cursor:pointer; font-size:var(--t-2); font-weight:700; color:var(--ink-strong);
  list-style:none; display:inline-flex; align-items:center; gap:8px; min-height:32px; }
.br-measured > summary::-webkit-details-marker { display:none; }
.br-measured > summary::before { content:""; width:0; height:0; flex:none;
  border-left:6px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent;
  transition:transform var(--d-fast) var(--ease); }
.br-measured[open] > summary::before { transform:rotate(90deg); }
.br-measured-body { padding-top:16px; }
.br-logo-diagram { display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.br-canvas, .br-zoom {
  border:1px dashed var(--border); border-radius:8px;
  position:relative; background:var(--surface-2); flex:none; overflow:hidden;
}
.br-zoom { border-style:solid; }
.br-canvas img, .br-zoom img { position:absolute; width:auto; }
.cl-body .br-canvas img, .cl-body .br-zoom img { width:auto; }
.br-canvas-lab { position:absolute; left:8px; top:7px; font-size:var(--t-1); color:var(--ink-muted);
  text-transform:uppercase; letter-spacing:.07em; font-weight:700; line-height:1.2; }
/* the part of the frame the box beside it magnifies */
.br-crop-mark { position:absolute; right:0; bottom:0; border-left:1px solid var(--p-blue);
  border-top:1px solid var(--p-blue); background:rgba(214,228,238,.22); }
html[data-mode="dark"] .br-crop-mark { background:rgba(214,228,238,.12); }
/* the dimension line: a bar the exact height of the floor, with end ticks */
.br-dim { position:absolute; left:16px; width:1px; background:var(--ink-strong); }
.br-dim::before, .br-dim::after { content:""; position:absolute; left:-4px; width:9px; height:1px;
  background:var(--ink-strong); }
.br-dim::before { top:0; }
.br-dim::after { bottom:0; }
/* a sibling of the bar, not a child of it: as a child its backdrop was the
   bar's own one pixel of Forest and it measured 1 to 1 */
.br-dim-txt { position:absolute; left:30px; font-family:var(--font-data); font-size:var(--t-1);
  font-weight:700; color:var(--ink-strong); white-space:nowrap; }
.br-floor-rule { display:flex; flex-direction:column; gap:8px; flex:1; min-width:240px; }

/* ================= Your content ================= */

.gen-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.gen-card {
  padding:16px; display:flex; flex-direction:column; gap:12px; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  font:inherit; color:var(--ink); cursor:pointer; min-height:132px;
  transition:box-shadow var(--d-fast) var(--ease), transform var(--d-fast) var(--ease),
             border-color var(--d-fast) var(--ease);
}
.gen-card:hover:not([disabled]) { box-shadow:0 10px 28px rgba(27,67,50,.10); transform:translateY(-2px); }
html[data-mode="dark"] .gen-card:hover:not([disabled]) { box-shadow:0 10px 28px rgba(0,0,0,.42); }
.gen-card[disabled] { opacity:.5; cursor:not-allowed; }
.gen-card strong { font-size:var(--t-2); color:var(--ink-strong); }
.gen-card span { font-size:var(--t-2); color:var(--ink-muted); line-height:1.4; }
.gen-topic { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.gen-topic .cl-input { flex:1; min-width:200px; }
.gen-out { margin-top:16px; display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
  border-top:1px solid var(--border); padding-top:18px; }
.gen-slot { width:130px; height:162px; border-radius:10px; border:1px solid var(--border);
  flex:none; position:relative; overflow:hidden; background:var(--surface-2); }
.gen-slot-progress { position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; flex-direction:column; gap:12px; padding:0 8px; text-align:center; }
.gen-ring { width:28px; height:28px; border-radius:50%; border:3px solid var(--border);
  border-top-color:#1B4332; animation:cx-spin 900ms linear infinite; }
html[data-mode="dark"] .gen-ring { border-top-color:#CDEBDD; }
@keyframes cx-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gen-ring { animation-duration:2.4s; } }
.gen-text { flex:1; min-width:220px; }

.po-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
/* the column count is set inline from the number of cards actually shown, so a
   shelf of three never ends in a bare fourth column */
.po-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.po-card { display:flex; flex-direction:column; overflow:hidden; }
/* 4 by 5, which is the shape a real post is, not a short landscape band. The
   band cropped the one real photograph to a slice of forehead: a portrait
   photograph in a wide short box scales to cover by width and shows almost
   none of its height. */
.po-plate { aspect-ratio:4/5; height:auto; border-radius:0; border:0; border-bottom:1px solid #ECE8E1; }
.po-body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.po-meta { display:flex; align-items:center; gap:8px; font-size:var(--t-1); color:var(--ink-muted); flex-wrap:wrap; }
.cl-body .po-meta svg { width:15px; height:15px; color:var(--ink-strong); }
.po-cap { font-size:var(--t-2); color:var(--ink); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.po-foot { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:6px; flex-wrap:wrap; }
.po-empty { padding:40px 26px; text-align:center; }

.st-chip { display:inline-flex; align-items:center; gap:4px; font-size:var(--t-1); font-weight:700;
  padding:4px 10px; border-radius:999px; color:#1B4332; white-space:nowrap; }
.st-review { background:var(--p-lemon); }
.st-approved { background:var(--p-mint); }
.st-scheduled { background:var(--surface-2); color:var(--ink-strong); border:1px solid var(--border); }
/* danger is unset by ruling, so "changes requested" is a cream chip with its
   own word, never a red one */
.st-changes { background:#EDE3D2; }
html[data-mode="dark"] .st-review { background:rgba(251,240,196,.22); color:#F8F5F1; }
html[data-mode="dark"] .st-approved { background:rgba(205,235,221,.24); color:#F8F5F1; }
html[data-mode="dark"] .st-changes { background:rgba(237,227,210,.20); color:#F8F5F1; }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .st-review { background:rgba(251,240,196,.22); color:#F8F5F1; }
  html:not([data-mode="light"]) .st-approved { background:rgba(205,235,221,.24); color:#F8F5F1; }
  html:not([data-mode="light"]) .st-changes { background:rgba(237,227,210,.20); color:#F8F5F1; }
}

/* the review sheet */
.rv-scrim { position:fixed; inset:0; background:rgba(27,67,50,.45); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:24px;
  animation:cx-fade var(--d-med) var(--ease) forwards; }
.rv-sheet { background:var(--surface); border:1px solid var(--border); border-radius:14px;
  max-width:920px; width:100%; max-height:90vh; overflow:auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  animation:rv-in var(--d-med) var(--ease) both; }
@keyframes rv-in { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .rv-sheet { animation:cx-fade var(--d-fast) linear both; } }
.rv-left { background:var(--surface-2); padding:26px; display:flex; align-items:center; justify-content:center; }
.rv-left .cx-plate { width:100%; aspect-ratio:4/5; height:auto; max-height:52vh; }
.rv-right { padding:26px; display:flex; flex-direction:column; gap:16px; min-width:0; }
.rv-edit { border:1px solid var(--border); border-radius:10px; padding:12px; min-height:88px;
  font:inherit; font-size:var(--t-2); line-height:1.55; color:var(--ink); background:var(--surface);
  transition:border-color var(--d-fast) var(--ease); }
.rv-edit:focus { outline:3px solid var(--ink-strong); outline-offset:2px; }
.rv-gate { display:flex; align-items:flex-start; gap:12px; background:var(--surface-2);
  border:1px solid var(--border); border-left:4px solid var(--p-mint); border-radius:10px;
  padding:12px 14px; font-size:var(--t-2); color:var(--ink); }
.cl-body .rv-gate svg { width:16px; height:16px; color:var(--ink-strong); flex:none; margin-top:1px; }
.rv-acts { display:flex; gap:8px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:14px; }
.rv-nav { display:flex; gap:8px; margin-top:auto; padding-top:8px; }

/* ================= Your calendar ================= */

.ca-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.ca-week { display:grid; grid-template-columns:repeat(7,1fr); gap:12px; }
.ca-day { min-height:160px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.ca-day-head { display:flex; align-items:baseline; gap:8px; }
.ca-day-name { font-size:var(--t-1); text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-muted); font-weight:700; }
.ca-day-num { font-family:var(--font-data); font-weight:700; font-size:var(--t-3); color:var(--ink-strong); }
.ca-today { border-color:#1B4332; }
html[data-mode="dark"] .ca-today { border-color:#CDEBDD; }
.ca-today-pill { margin-left:auto; }
.ca-item { padding:8px 10px; border-radius:9px; background:var(--surface-2);
  border:1px solid var(--border); border-left:3px solid var(--p-blue);
  font-size:var(--t-1); cursor:grab; display:flex; flex-direction:column; gap:4px;
  transition:transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); }
.ca-item:hover { transform:translateY(-1px); box-shadow:var(--shadow-1); }
.ca-item:active { cursor:grabbing; }
.ca-item-mint { border-left-color:var(--p-mint); }
.ca-item-lemon { border-left-color:var(--p-lemon); }
.ca-item-top { display:flex; align-items:center; gap:4px; font-weight:700; color:var(--ink-strong); }
.cl-body .ca-item svg { width:13px; height:13px; }
.ca-item-cap { color:var(--ink-muted); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ca-dragging { opacity:.4; }
.ca-dragover { outline:2px dashed var(--p-blue); outline-offset:-3px; background:var(--surface-2); }
.ca-month { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.ca-cell { min-height:92px; padding:8px; display:flex; flex-direction:column; gap:4px; }
.ca-cell-out { opacity:.42; }
.ca-dot-row { display:flex; gap:4px; flex-wrap:wrap; margin-top:auto; }
/* a bare pastel dot on a white cell was almost invisible in the capture, so it
   carries a hairline of its own ink */
.ca-dot { width:10px; height:10px; border-radius:50%; background:var(--p-blue);
  box-shadow:inset 0 0 0 1.5px rgba(27,67,50,.4); }
html[data-mode="dark"] .ca-dot { background:rgba(214,228,238,.55); box-shadow:inset 0 0 0 1.5px rgba(248,245,241,.45); }
.ca-cell .ca-today-pill { font-size:var(--t-1); padding:2px 7px; }
.ca-cell .ca-day-head { justify-content:space-between; }
.ca-empty-note { font-size:var(--t-1); color:var(--ink-muted); }

/* ================= Your results ================= */

.re-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
.re-best { display:flex; gap:16px; align-items:center; }
.re-best .cx-plate { width:96px; height:120px; flex:none; }
.re-gap { display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  justify-content:center; min-height:190px; }
/* printed only when the chart library genuinely did not arrive, and then as
   one quiet line under the chart, never a banner above it */
.re-fallback { font-size:var(--t-1); color:var(--ink-muted); margin:10px 0 0; }

/* ================= Flora ================= */

.fl-wrap { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:16px; }
.fl-chat { display:flex; flex-direction:column; height:560px; }
.fl-log { flex:1; overflow-y:auto; padding:22px; display:flex; flex-direction:column; gap:16px; }
.fl-turn { display:flex; gap:12px; align-items:flex-start; max-width:86%; }
.fl-turn-you { align-self:flex-end; flex-direction:row-reverse; }
.fl-av { width:38px; height:38px; border-radius:50%; background:var(--p-mint);
  display:flex; align-items:center; justify-content:center; color:#1B4332; flex:none; }
.cl-body .fl-av svg { width:23px; height:23px; }
html[data-mode="dark"] .fl-av { background:rgba(205,235,221,.26); color:#F8F5F1; }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .fl-av { background:rgba(205,235,221,.26); color:#F8F5F1; }
}
.fl-av-idle svg { animation:cx-breathe 5.2s var(--ease) infinite; transform-origin:center; }
@media (prefers-reduced-motion: reduce) { .fl-av-idle svg { animation:none; } }
.fl-bubble { background:var(--surface-2); border:1px solid var(--border);
  border-radius:16px 16px 16px 4px; padding:14px 16px; font-size:var(--t-2); line-height:1.55;
  color:var(--ink); animation:fl-in var(--d-med) var(--ease) both; }
.fl-bubble-you { background:var(--p-blue); color:#1B4332; border-color:transparent;
  border-radius:16px 16px 4px 16px; }
html[data-mode="dark"] .fl-bubble-you { background:rgba(214,228,238,.24); color:#F8F5F1; }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .fl-bubble-you { background:rgba(214,228,238,.24); color:#F8F5F1; }
}
@keyframes fl-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .fl-bubble { animation:cx-fade var(--d-fast) linear both; } }
.fl-typing { display:flex; gap:4px; padding:6px 2px; }
.fl-typing span { width:6px; height:6px; border-radius:50%; background:var(--ink-muted);
  animation:fl-dot 1.1s ease-in-out infinite; }
.fl-typing span:nth-child(2) { animation-delay:.15s; }
.fl-typing span:nth-child(3) { animation-delay:.3s; }
@keyframes fl-dot { 0%,60%,100% { transform:translateY(0); opacity:.4; } 30% { transform:translateY(-4px); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .fl-typing span { animation:none; opacity:.6; } }
.fl-caret { display:inline-block; width:2px; height:1em; background:var(--ink-strong);
  vertical-align:-2px; margin-left:1px; animation:fl-blink .9s steps(1) infinite; }
@keyframes fl-blink { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .fl-caret { animation:none; } }
.fl-input { display:flex; gap:12px; padding:16px; border-top:1px solid var(--border); }
.fl-chips { display:flex; gap:8px; flex-wrap:wrap; padding:0 22px 16px; }

/* ================= Requests ================= */

.rq-table { width:100%; border-collapse:collapse; font-size:var(--t-2); }
.rq-table th { text-align:left; font-size:var(--t-1); text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-muted); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--border); }
.rq-table td { padding:12px; border-bottom:1px solid var(--border); color:var(--ink); vertical-align:top; }
.rq-table tr:last-child td { border-bottom:0; }
.rq-title { font-weight:700; color:var(--ink-strong); }
.rq-scroll { overflow-x:auto; max-width:100%; }
.rq-table { min-width:520px; }

/* ================= Settings ================= */

/* start aligned, so a short card stops stretching to match a tall neighbour
   and leaving a field of empty white under its own content */
.se-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:start; }
.se-row { display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--border); flex-wrap:wrap; }
.se-row:last-child { border-bottom:0; }
.se-row-label { font-size:var(--t-2); color:var(--ink); flex:1; min-width:140px; }
.se-row-sub { font-size:var(--t-1); color:var(--ink-muted); display:block; margin-top:4px; }
.se-meter { height:10px; border-radius:5px; background:var(--surface-2);
  border:1px solid var(--border); overflow:hidden; }
.se-meter span { display:block; height:100%; background:#EDE3D2; width:0;
  transition:width var(--d-slow) var(--ease); }
html[data-mode="dark"] .se-meter span { background:rgba(237,227,210,.5); }

/* ================= Owner view ================= */
/* Denser on purpose, and only here. Density is an opt in, never the default
   client experience (#445 Density modes, Material Design 2). Every control
   keeps a 36 pixel or larger hit area even at this density (#587 Target size
   and hit area, WCAG 2.2 SC 2.5.8). */

.ow-switch-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.ow-client-btn {
  border:1px solid var(--border); background:var(--surface); border-radius:999px;
  padding:0 16px; min-height:38px; font:inherit; font-size:var(--t-2); font-weight:700;
  color:var(--ink-strong); cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.ow-client-btn:hover { background:var(--surface-2); transform:translateY(-1px); }
.ow-client-btn[aria-pressed="true"] { background:#EDE3D2; color:#1B4332; border-color:transparent; }
html[data-mode="dark"] .ow-client-btn[aria-pressed="true"] { background:rgba(237,227,210,.26); color:#F8F5F1; }
.ow-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.ow-tile { padding:14px; display:flex; flex-direction:column; gap:8px; }
.ow-table { width:100%; border-collapse:collapse; font-size:var(--t-2); }
.ow-table th { text-align:left; font-size:var(--t-1); text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-muted); font-weight:700; padding:8px 10px; border-bottom:1px solid var(--border);
  white-space:nowrap; }
.ow-table td { padding:8px 10px; border-bottom:1px solid var(--border); color:var(--ink); }
.ow-table tr:last-child td { border-bottom:0; }
.ow-table .ow-name { font-weight:700; color:var(--ink-strong); white-space:nowrap; }
/* numbers right aligned so the digits line up and do the comparing, in the one
   room built for scanning many clients at speed */
.ow-table th.ow-n, .ow-table td.ow-n { text-align:right; }
.ow-table td.ow-n .ow-bar { display:inline-block; vertical-align:middle; margin-left:8px; }
.ow-num { font-family:var(--font-data); font-weight:700; color:var(--ink-strong);
  font-variant-numeric:tabular-nums; }
.ow-bar { height:7px; border-radius:4px; background:var(--surface-2); border:1px solid var(--border);
  overflow:hidden; min-width:70px; }
.ow-bar span { display:block; height:100%; background:#EDE3D2; }
html[data-mode="dark"] .ow-bar span { background:rgba(237,227,210,.5); }
.ow-scroll { overflow-x:auto; max-width:100%; }
.ow-table { min-width:640px; }

/* ================= the welcome splash ================= */

.we-card { display:flex; flex-direction:column; align-items:center; gap:16px;
  text-align:center; max-width:52ch; }
/* the three promises, on the splash and again in Settings. A tick, then the
   line, never a bullet: a promise is a thing that is kept, not an item. */
.we-promise, .se-terms { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:12px; text-align:left; }
.we-promise li, .se-terms li { display:flex; align-items:flex-start; gap:12px;
  font-size:var(--t-2); line-height:1.55; color:var(--ink); }
.cl-body .we-promise svg, .cl-body .se-terms svg { width:18px; height:18px; flex:none;
  color:var(--ink-strong); margin-top:4px; }
/* one line under the review buttons, the first promise where it matters most */
.rv-promise { font-size:var(--t-2); color:var(--ink-muted); margin:0; }

/* ================= four fixes to the shipped shell =================
   Each of these was a token that was right on a light canvas and wrong once
   dark mode inverted it. They are here rather than in app.css so app.css stays
   the record of what phase 1 shipped. */

/* 1. The toast took --ink-strong as its ground and white as its ink. In dark
      mode --ink-strong is cream, so it rendered white on cream. It now carries
      its own ground in both modes. */
.cl-body .cl-toast { background:#1B4332; color:#F8F5F1; }
.cl-body .cl-toast svg { color:#CDEBDD; }
html[data-mode="dark"] .cl-body .cl-toast { background:#234331; border:1px solid rgba(248,245,241,.2); }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .cl-body .cl-toast { background:#234331; border:1px solid rgba(248,245,241,.2); }
}

/* 2. The switcher button, same fault, a white glyph on a cream disc in dark
      mode. Forest on light, Mint on dark, so it reads on either ground. */
.cl-body .cl-switcher-fab { background:#1B4332; color:#F8F5F1; }
html[data-mode="dark"] .cl-body .cl-switcher-fab { background:#CDEBDD; color:#1B4332; }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .cl-body .cl-switcher-fab { background:#CDEBDD; color:#1B4332; }
}

/* 3. The bottom tabs marked the current room in Powder blue, which measures
      about 1.2 to 1 on a white rail. They take the rail's own ink tokens now,
      with the pastel carried by a small bar above the label instead. */
.cl-body .cl-bottom-tabs a { color:var(--chrome-muted); position:relative; }
.cl-body .cl-bottom-tabs a[aria-current="page"] { color:var(--chrome-ink); font-weight:700; }
.cl-body .cl-bottom-tabs a[aria-current="page"]::before {
  content:""; position:absolute; top:0; left:26%; right:26%; height:3px;
  border-radius:0 0 3px 3px; background:var(--p-blue);
}

/* 4. A field's placeholder had no colour of its own and inherited the input's,
      so it read as filled in text. */
.cl-body .cl-input::placeholder { color:var(--ink-muted); opacity:1; }
.cl-body .cl-input { color:var(--ink); }

/* Flora's own turn and the client's turn take different avatars: her rose on
   Mint, the client's initials on Powder blue, both with Forest ink. */
.fl-turn-you .fl-av { background:var(--p-blue); font-weight:700; font-size:var(--t-2); color:#1B4332; }
html[data-mode="dark"] .fl-turn-you .fl-av { background:rgba(214,228,238,.26); color:#F8F5F1; }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .fl-turn-you .fl-av { background:rgba(214,228,238,.26); color:#F8F5F1; }
}

/* 5. A segmented control's buttons had no display of their own, so a button
      carrying an icon and a word stacked them one above the other: Back and
      Next each rendered as a chevron with its label underneath. */
.cl-body .cl-seg button { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.cl-body .cl-seg button svg { width:15px; height:15px; }

/* 6. The credits meter is ruled pastel cream on a cream track, which is right
      by the Design Bible and unreadable as a meter: the filled part and the
      empty part measured almost the same lightness. The fill keeps its ruled
      colour and gains a hairline, so where it ends is visible. */
.cl-body .cl-credits-bar span, .cl-body .se-meter span, .cl-body .ow-bar span {
  box-shadow:inset 0 0 0 1px rgba(27,67,50,.22);
}
html[data-mode="dark"] .cl-body .cl-credits-bar span,
html[data-mode="dark"] .cl-body .se-meter span,
html[data-mode="dark"] .cl-body .ow-bar span { box-shadow:inset 0 0 0 1px rgba(248,245,241,.26); }

/* the one line under the plan meter, quiet and readable on the rail */
.cl-body .cl-plan-line { font-size:var(--t-1); line-height:1.45; color:var(--chrome-muted); margin-top:8px; }

/* 7. The topbar carried an h1 and every room carries its own, so every screen
      had two. It is a paragraph styled as the room label now. */
.cl-body .cl-topbar-title { font-size:var(--t-4); font-weight:700; color:var(--ink-strong); margin:0; }

/* a small plate, for the best post card: the head row and the long hook did
   not fit a 96 by 120 frame and the foot text ran over the hook */
.cx-plate-sm { padding:9px; }
.cx-plate-sm .cx-plate-head { display:none; }
.cx-plate-sm .cx-plate-hook { font-size:var(--t-1); line-height:1.3; -webkit-line-clamp:4; }
.cx-plate-sm .cx-plate-foot span { display:none; }
.cl-body .cx-plate-sm .cx-plate-foot svg { display:none; }
.cl-body .cx-plate-sm img.cx-plate-mark { height:15px; }
.cx-plate-sm.cx-plate-photo .cx-plate-band { padding:8px 32px 8px 8px; }

/* the room itself slides in, 250ms, one easing, and the cards inside it rise
   staggered behind that. Nothing moves under the reader once it has landed. */
.cl-body .cl-room { animation:cx-room-in var(--d-med) var(--ease) both; }
@keyframes cx-room-in { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .cl-body .cl-room { animation:cx-fade var(--d-fast) linear both; }
}

/* ================= responsive ================= */

@media (max-width:1320px) {
  .gen-grid { grid-template-columns:repeat(3,1fr); }
  .po-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1180px) {
  .h2-tiles { grid-template-columns:repeat(2,1fr); }
  .br-grid { grid-template-columns:repeat(2,1fr); }
  .re-grid { grid-template-columns:1fr; }
  .fl-wrap { grid-template-columns:1fr; }
  .fl-chat { height:460px; }
  .ow-tiles { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1024px) {
  .po-grid { grid-template-columns:repeat(2,1fr); }
  .gen-grid { grid-template-columns:repeat(2,1fr); }
  .se-grid { grid-template-columns:1fr; }
  .rv-sheet { grid-template-columns:1fr; }
  .rv-left .cx-plate { height:220px; }
}
@media (max-width:720px) {
  .h2-tiles { grid-template-columns:1fr; gap:12px; }
  .h2-tile { min-height:0; }
  .h2-rail-days { grid-template-columns:repeat(3,1fr); gap:12px; }
  .h2-rail-line { display:none; }
  /* Flora's row is a flex line that cannot wrap, so its minimum content, the
     avatar plus the bubble plus the evidence column, measured 457 and pushed
     the whole page to 480 inside a 400 viewport. Measured with a probe, not
     guessed. Below 720 the evidence sits underneath. */
  .h2-flora { flex-wrap:wrap; }
  .h2-flora-ev { margin-left:0; padding-left:0; padding-top:14px; width:100%;
    border-left:0; border-top:1px solid var(--border); flex-direction:row; flex-wrap:wrap;
    align-items:center; }
  .h2-next { flex-wrap:wrap; }
  .br-grid { grid-template-columns:1fr; }
  .gen-grid { grid-template-columns:1fr; }
  .gen-card { min-height:0; }
  .po-grid { grid-template-columns:1fr; }
  .ca-week { grid-template-columns:1fr; }
  .ca-day { min-height:0; }
  .ca-month { gap:4px; }
  .ca-cell { min-height:62px; padding:5px; }
  .ow-tiles { grid-template-columns:1fr; }
  .rv-scrim { padding:12px; }
  .rv-left, .rv-right { padding:18px; }
  .fl-log { padding:16px; }
  .fl-chips { padding:0 16px 14px; }
  .fl-turn { max-width:100%; }
  /* a six column table inside a 400 viewport is a scroller nobody scrolls, so
     Requests stacks into one block per request, each field labelled by the
     header it came from */
  .rq-table, .rq-table tbody, .rq-table tr, .rq-table td { display:block; width:100%; }
  .rq-table { min-width:0; }
  .rq-table thead { display:none; }
  .rq-table tr { border-bottom:1px solid var(--border); padding:14px 0; }
  .rq-table tr:last-child { border-bottom:0; }
  .rq-table td { border-bottom:0; padding:2px 0; }
  .rq-table td:first-child { padding-bottom:6px; }

  /* The switcher button cleared the bottom tab bar by 11 pixels, measured, so
     it did not technically overlap; it sat in the last tab's column with its
     shadow on it and read as sitting on Your results. Everything is now
     derived from one height, so the button, the panel above it and the floor
     the stage leaves cannot drift apart again. */
  .cl-body { --tabs-h:59px; --tabs-safe:calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px)); }
  .cl-body .cl-switcher-fab { left:auto; right:12px; bottom:calc(var(--tabs-safe) + 24px); }
  .cl-body .cl-switcher { left:8px; right:8px; width:auto; bottom:calc(var(--tabs-safe) + 78px); }
  .cl-body .cl-toast-wrap { right:12px; bottom:calc(var(--tabs-safe) + 78px); left:12px; max-width:none; }
  .cl-stage { padding-bottom:calc(var(--tabs-safe) + 108px); }
}