/* C-Lion U3, the Marketing studio floor.
   This is concept H2's shared base, promoted out of concepts/_base.css and made
   the system for every room after Celine ruled H2 on 16 Sep 2026. The concepts
   folder keeps its own copy untouched as the record of what she chose from.

   What lives here: the dark canvas tokens, the Home watermark, and the
   primitives every room is built from. The hairline card at 12, the tracked
   label, the big Forest numeral, the pastel icon badge, the pill, the section
   header with its own pastel edge, the post plate, and the sizing rule that
   lets an inline chart be bigger than an icon.

   Colour comes from palette.css and leads.css and nothing is added to it.
   L5d exactly: white ground, white card, hairline #ECE8E1, rail at rest
   #F4F0EA, active item and meter #EDE3D2, Forest #1B4332 for titles, the mark
   and numerals, Charcoal #4A4A4A for body, the three pastels as small marks.
   Text sitting on any pastel is Forest or Charcoal, never white, which is the
   Design Bible's own pastel_text_rule. Danger stays unset: nothing here is
   red, and a figure that fell prints in ordinary ink with a down arrow beside
   it rather than in a warning colour. */

/* ---------- one typeface, Comfortaa ----------
   Comfortaa Light for body, Comfortaa Bold for titles and every numeral, per
   the standing brand rule, with Raleway behind it. The shell leaves a second
   face wired for data and the switcher can still reach it; the default is one
   face everywhere. */
:root { --font-data:'Comfortaa','Raleway',system-ui,sans-serif; }
body[data-font="hanken"] { --font-data:'Hanken Grotesk','Raleway',system-ui,sans-serif; }

/* ---------- dark canvas ----------
   The page was #152219 and the card #1E3A2C, which measures 1.33 to 1: a card
   that barely exists. The page is darker now and the card lighter, 1.70 to 1,
   and the CARD EDGE carries the rest of the job at 3.00 to 1 against the card
   fill and 5.10 to 1 against the page, which is what WCAG 2.2 SC 1.4.11 asks
   of a component boundary.

   Stated plainly because it is a limit, not a preference: a literal 3 to 1
   between the card FILL and the page cannot be had inside this palette. The
   arithmetic puts the card at about #2D6C4E, which is Growth green, C-Lion's
   slogan colour, as the fill of every card on the page. That is a different
   product, not a contrast fix, so the boundary carries it instead. Every
   number above is computed, not judged.

   --border stays the quieter line for gridlines and dividers, --card-edge is
   the brighter one used only where a surface meets the page. */
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) {
    --bg:#0B120E; --surface:#1E4231; --surface-2:#26543F;
    --ink:#EDE7DC; --ink-strong:#F8F5F1; --ink-muted:#CCC2B7; --border:#3C7A5D;
    --card-edge:#4A9272;
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 10px 26px rgba(0,0,0,.55);
  }
}
html[data-mode="dark"] {
  --bg:#0B120E; --surface:#1E4231; --surface-2:#26543F;
  --ink:#EDE7DC; --ink-strong:#F8F5F1; --ink-muted:#CCC2B7; --border:#3C7A5D;
  --card-edge:#4A9272;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 10px 26px rgba(0,0,0,.55);
}
/* in light mode there is no separate edge: the hairline is the hairline */
.cx-card, .cl-body .cl-card { border-color:var(--card-edge, var(--border)); }

/* ---------- the slogan on a dark rail ----------
   The shipped shell rendered it in Growth green #2D6A4F, which measures
   1.73 to 1 on the Forest rail once dark mode inverts the chrome. The rendered
   sweep caught it. On a dark rail the slogan takes Mint, the pairing the
   Design Bible already rules for text on Forest. */
html[data-mode="dark"] .cl-tagline { color:#CDEBDD; }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .cl-tagline { color:#CDEBDD; }
}

/* ---------- the stage, and the one place the switcher fab could bite ----------
   The fab is fixed bottom right and the stage scrolls under it. On the phone
   layout it sat 70 to 114 pixels above the viewport floor while the stage
   stopped 88 pixels above the document floor, so at the end of every room the
   fab covered the bottom right corner of the last tile. Measured, then fixed
   by giving the stage enough floor that nothing rests under the fab: 92 on the
   desktop layout and 150 on the phone layout, where the bottom tab bar takes
   58 of it. The fab still floats over the page mid scroll, as any floating
   control does, but no card ever comes to rest beneath it. */
.cl-stage { padding:26px 30px 92px; max-width:1500px; }
@media (max-width:720px) { .cl-stage { padding:16px 16px 150px; } }

/* A grid item's default minimum is its own min content width, so one wide
   table inside a card pushed the whole page wider than the viewport: Requests
   measured 500 and Owner view 678 inside a 400 viewport, and the probe named
   the bottom tab bar as the widest thing on the page, which was only the
   symptom. Measured, not guessed. Every link in the chain down to the scroller
   is allowed to be narrower than its content, so the table scrolls inside its
   own card instead of stretching the document. */
.cl-shell > div { min-width:0; }
.cl-stage, .cl-room { min-width:0; }

/* ---------- the Home watermark ----------
   The lioness mark, large and faint, behind the Home room only. Carried here
   from theme-a.css so it survives the five style directions being retired.
   Decorative, so it never intercepts input and never sits over type. */
.cl-stage { position:relative; }
.cl-stage.cl-stage-home::before {
  content:""; position:absolute; top:18px; right:0; width:420px; height:420px;
  background:var(--cl-mark-url) no-repeat center/contain; opacity:.05;
  pointer-events:none; z-index:0;
}
html[data-mode="dark"] .cl-stage.cl-stage-home::before {
  background:var(--cl-mark-cream-url) no-repeat center/contain; opacity:.06;
}
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .cl-stage.cl-stage-home::before {
    background:var(--cl-mark-cream-url) no-repeat center/contain; opacity:.06;
  }
}
.cl-room { position:relative; z-index:1; }
@media (max-width:900px) { .cl-stage.cl-stage-home::before { width:240px; height:240px; opacity:.04; } }

/* ---------- the sizing rule ----------
   app.css sets every inline svg to 20 by 20 so an unsized icon cannot blow up.
   A chart is an inline svg too, so it needs its own say, and every rule below
   carries .cl-body because a bare class selector loses to app.css and renders
   silently at 20 by 20. */
.cl-body .cx-ic { width:22px; height:22px; }
.cl-body .cx-fig { display:block; width:100%; height:100%; }

/* ---------- surfaces ---------- */
.cx-card {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  position:relative; overflow:hidden;
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease);
}
.cx-card-lift:hover { box-shadow:0 10px 28px rgba(27,67,50,.10); transform:translateY(-2px); }
html[data-mode="dark"] .cx-card-lift:hover { box-shadow:0 10px 28px rgba(0,0,0,.42); }
.cx-pad { padding:20px; }
.cx-pad-lg { padding:26px; }

/* ---------- type ---------- */
.cx-lab {
  font-size:var(--t-1); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-muted); margin:0;
}
.cx-num {
  font-family:var(--font-data); font-weight:700; color:var(--ink-strong);
  font-size:var(--t-8); line-height:1; letter-spacing:-.01em; font-variant-numeric:proportional-nums;
}
.cx-num-xl { font-size:var(--t-9); }
.cx-num-sm { font-size:var(--t-6); }
.cx-h1 { font-size:var(--t-7); line-height:1.16; font-weight:700; color:var(--ink-strong); margin:0; }
.cx-h2 { font-size:var(--t-4); font-weight:700; color:var(--ink-strong); margin:0; }
.cx-h3 { font-size:var(--t-3); font-weight:700; color:var(--ink-strong); margin:0; }
.cx-note { font-size:var(--t-2); color:var(--ink-muted); margin:0; line-height:1.5; }
.cx-body { font-size:var(--t-2); color:var(--ink); margin:0; line-height:1.55; }
.cx-clamp2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cx-clamp3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:720px) { .cx-h1 { font-size:var(--t-6); } .cx-num { font-size:var(--t-7); } .cx-num-xl { font-size:var(--t-8); } }

/* ---------- the section header with its own pastel edge, the studio signature ---------- */
.cx-sec { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.cx-sec-edge { width:5px; height:26px; border-radius:3px; background:var(--p-mint); flex:none; }
/* The heading takes the remaining width and wraps its OWN text, so the pastel
   edge always sits beside the first line of it. The basis has to be 0, not
   auto: a wrapping flex container breaks lines on the hypothetical main size
   and only shrinks afterwards, so with basis auto a long title moved to its
   own line and left the edge marooned above it. Measured at 400, where the
   heading reported a width of 314 in a 314 wide row, which is what a wrapped
   line looks like. */
.cx-sec > h2, .cx-sec > h3 { flex:1 1 0; min-width:0; }
/* and at phone width whatever sits on the right of a section header takes its
   own line rather than squeezing the title into a column */
@media (max-width:720px) {
  .cx-sec-right { margin-left:0; flex-basis:100%; }
}
.cx-sec-edge-blue { background:var(--p-blue); }
.cx-sec-edge-lemon { background:var(--p-lemon); }
.cx-sec-edge-cream { background:#EDE3D2; }
.cx-sec-right { margin-left:auto; display:flex; align-items:center; gap:8px; }

/* ---------- the pastel icon badge, one shape used everywhere ---------- */
.cx-badge {
  width:44px; height:44px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  color:#1B4332; background:var(--p-mint);
}
.cx-badge-sm { width:32px; height:32px; }
.cx-badge-lg { width:56px; height:56px; }
.cl-body .cx-badge .cx-ic, .cl-body .cx-badge svg { width:22px; height:22px; }
.cl-body .cx-badge-sm .cx-ic, .cl-body .cx-badge-sm svg { width:17px; height:17px; }
.cl-body .cx-badge-lg .cx-ic, .cl-body .cx-badge-lg svg { width:26px; height:26px; }
.cx-b-mint { background:var(--p-mint); }
.cx-b-blue { background:var(--p-blue); }
.cx-b-lemon { background:var(--p-lemon); }
.cx-b-cream { background:#EDE3D2; }
/* on a dark canvas the pastels drop to a wash over the card, with cream ink,
   the same treatment palette.css uses for chips. A SOLID pastel keeps Forest
   ink in both modes; only a wash takes cream. */
html[data-mode="dark"] .cx-badge { color:#F8F5F1; }
html[data-mode="dark"] .cx-b-mint { background:rgba(205,235,221,.24); }
html[data-mode="dark"] .cx-b-blue { background:rgba(214,228,238,.24); }
html[data-mode="dark"] .cx-b-lemon { background:rgba(251,240,196,.22); }
html[data-mode="dark"] .cx-b-cream { background:rgba(237,227,210,.20); }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .cx-badge { color:#F8F5F1; }
  html:not([data-mode="light"]) .cx-b-mint { background:rgba(205,235,221,.24); }
  html:not([data-mode="light"]) .cx-b-blue { background:rgba(214,228,238,.24); }
  html:not([data-mode="light"]) .cx-b-lemon { background:rgba(251,240,196,.22); }
  html:not([data-mode="light"]) .cx-b-cream { background:rgba(237,227,210,.20); }
}

/* ---------- pills and chips ---------- */
.cx-pill {
  display:inline-flex; align-items:center; gap:4px; border-radius:999px;
  padding:4px 11px; font-size:var(--t-2); font-weight:700; color:#1B4332; background:var(--p-mint);
  white-space:nowrap;
}
.cl-body .cx-pill svg, .cl-body .cx-pill .cx-ic { width:14px; height:14px; }
.cx-pill-blue { background:var(--p-blue); }
.cx-pill-lemon { background:var(--p-lemon); }
.cx-pill-cream { background:#EDE3D2; }
.cx-pill-quiet { background:var(--surface-2); color:var(--ink-strong); border:1px solid var(--border); }
/* a pill carrying a sentence rather than a label: it wraps instead of running
   off the row */
.cx-pill-wide { white-space:normal; max-width:46ch; line-height:1.4; padding:7px 14px; text-align:left; }
/* A pill sitting ON a post plate never inverts, because the plate never
   inverts: a plate stands in for the client's own content, so it stays white
   in dark mode and a cream pill label on it would be invisible. */
.cx-pill-light { background:var(--p-blue); color:#1B4332; }
html[data-mode="dark"] .cx-pill.cx-pill-light { background:var(--p-blue); color:#1B4332; }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .cx-pill.cx-pill-light { background:var(--p-blue); color:#1B4332; }
}
.cx-pill-light-mint, html[data-mode="dark"] .cx-pill.cx-pill-light-mint { background:var(--p-mint); color:#1B4332; }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .cx-pill.cx-pill-light-mint { background:var(--p-mint); color:#1B4332; }
}
html[data-mode="dark"] .cx-pill { background:rgba(205,235,221,.24); color:#F8F5F1; }
html[data-mode="dark"] .cx-pill-blue { background:rgba(214,228,238,.24); }
html[data-mode="dark"] .cx-pill-lemon { background:rgba(251,240,196,.22); }
html[data-mode="dark"] .cx-pill-cream { background:rgba(237,227,210,.20); }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .cx-pill { background:rgba(205,235,221,.24); color:#F8F5F1; }
  html:not([data-mode="light"]) .cx-pill-blue { background:rgba(214,228,238,.24); }
  html:not([data-mode="light"]) .cx-pill-lemon { background:rgba(251,240,196,.22); }
  html:not([data-mode="light"]) .cx-pill-cream { background:rgba(237,227,210,.20); }
}

/* ---------- the sample data banner, as in U2 ---------- */
.cx-sample {
  display:flex; align-items:center; gap:12px; border:1px solid var(--border);
  background:var(--surface-2); border-radius:10px; padding:9px 14px;
  font-size:var(--t-2); color:var(--ink-muted); margin-bottom:24px;
}
.cl-body .cx-sample svg, .cl-body .cx-sample .cx-ic { width:16px; height:16px; color:var(--ink-strong); flex:none; }

/* ---------- post plate, full bleed, live text, no photograph invented ----------
   A plate stands in for the client's own content, so it never repaints with the
   interface palette. Forest type on white or on the whisper cream ground, the
   hook set as live text across the whole plate, one small pastel mark for the
   platform. No image model draws anything here and nothing pretends to be a
   photograph, per the Visual Production Law. */
.cx-plate {
  position:relative; overflow:hidden; border-radius:10px;
  background:#FFFFFF; border:1px solid #ECE8E1; color:#1B4332;
  display:flex; flex-direction:column; justify-content:space-between; padding:12px;
}
/* a placeholder reads like the post it stands in for: the platform marks at the
   top, the hook and the mark at the foot, the empty middle where the picture
   will go. Centring the hook in a tall 4 by 5 frame left it floating. */
.cx-plate-alt { background:#FBF9F5; }
.cx-plate-alt .cx-plate-head { margin-bottom:auto; }
.cx-plate-hook {
  font-size:var(--t-2); font-weight:700; line-height:1.3; color:#1B4332;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.cx-plate-foot { display:flex; align-items:center; gap:8px; font-size:var(--t-1); color:#4A4A4A; }
.cx-plate-head { display:flex; align-items:center; gap:8px; font-size:var(--t-1); color:#4A4A4A; }
/* the mark sits directly on the plate, no chip and no plate behind it, and it
   is deliberately larger than the first instinct: on a plate about 130 wide
   this is close to 15 percent of the frame, comfortably above the 90 pixel
   floor on a 1080 canvas that C-Lion's own Design Bible sets */
.cx-plate-mark { height:19px; width:auto; margin-left:auto; }
.cl-body .cx-plate svg, .cl-body .cx-plate .cx-ic { width:14px; height:14px; color:#1B4332; }
.cl-body .cx-plate img.cx-plate-mark { width:auto; height:19px; }
/* ---------- a post that has a real photograph ----------
   Full bleed: the picture fills the frame, per the Design Bible's
   full_bleed_required. The hook is LIVE TEXT over it, never painted in. The
   band under the hook carries a real background colour rather than only a
   gradient, so what a person reads and what a contrast sweep measures are the
   same thing; the veil above it feathers that band into the picture.
   The mark is 9 per cent of the frame height, above the Design Bible's own
   floor of 90 pixels on a 1080 canvas, which is 8.34 per cent, at every size
   this plate is used. Cream mark, because it sits on the dark band. */
.cx-plate-photo { padding:0; background:#1B4332; border-color:#1B4332; justify-content:flex-start; }
/* 45 per cent down puts the eyes in frame at every aspect the plate is used
   at, which is where a face wants to sit. Checked against a rendered capture,
   not chosen from the number. */
.cx-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 45%; display:block; }
.cl-body .cx-photo { width:100%; height:100%; }
/* darkened at both ends: the bottom carries the hook, and the top carries the
   platform marks, which were cream over a bright photograph with nothing
   behind them */
.cx-photo-veil { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(27,67,50,.6) 0%, rgba(27,67,50,0) 20%,
    rgba(27,67,50,0) 44%, rgba(27,67,50,.45) 68%, rgba(27,67,50,.88) 100%); }
.cx-plate-photo .cx-plate-head { position:relative; z-index:2; padding:12px 12px 0; }
.cx-on-photo { color:#F8F5F1; }
.cl-body .cx-plate-photo .cx-on-photo svg { color:#F8F5F1; }
.cx-plate-band { position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:12px 58px 12px 12px; background:rgba(27,67,50,.88); }
.cx-plate-photo .cx-plate-hook { color:#F8F5F1; -webkit-line-clamp:3; }
.cx-mark-on-photo { position:absolute; right:12px; bottom:12px; z-index:3; margin:0; }
.cl-body img.cx-mark-on-photo { height:9%; width:auto; min-height:16px; }

.cx-plate-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; color:#1B4332;
}
.cl-body .cx-plate-empty svg { width:30px; height:30px; opacity:.4; }
.cx-plate-empty span { font-size:var(--t-1); opacity:.6; }

/* ---------- motion, named by purpose ----------
   One easing curve and the 150 / 250 / 400 scale from app.css. Everything
   settles into its final state, so a still screenshot reads exactly as the
   finished screen. Nothing animates a property other than transform, opacity,
   width or stroke-dashoffset. */
.cx-rise { opacity:0; transform:translateY(10px); animation:cx-rise var(--d-slow) var(--ease) forwards; }
@keyframes cx-rise { to { opacity:1; transform:none; } }
.cx-draw { stroke-dasharray:1400; stroke-dashoffset:1400; animation:cx-draw 1100ms var(--ease) forwards; }
@keyframes cx-draw { to { stroke-dashoffset:0; } }
.cx-grow { transform:scaleY(0); transform-origin:bottom; animation:cx-grow var(--d-slow) var(--ease) forwards; }
@keyframes cx-grow { to { transform:scaleY(1); } }
.cx-fade { opacity:0; animation:cx-fade var(--d-slow) var(--ease) forwards; }
@keyframes cx-fade { to { opacity:1; } }
/* a ring draws itself in by unwinding its own dash offset. The dash LENGTH is
   a presentation attribute set by the chart, and nothing in CSS may touch it,
   because a stylesheet beats a presentation attribute and would erase the
   value the chart just computed. Only the offset is animated, from the arc
   length held in --dash to zero. */
.cx-ring-draw { animation:cx-ring-draw 1100ms var(--ease) forwards; }
@keyframes cx-ring-draw { from { stroke-dashoffset:var(--dash,0); } to { stroke-dashoffset:0; } }
.cx-pop { animation:cx-pop var(--d-slow) var(--ease) both; }
@keyframes cx-pop { from { opacity:0; transform:scale(.9) rotate(-8deg); } to { opacity:1; transform:none; } }
.cx-skel { background:var(--surface-2); border-radius:10px; position:relative; overflow:hidden; }
.cx-skel::after {
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation:cx-shimmer 1.3s var(--ease) infinite;
}
@keyframes cx-shimmer { to { transform:translateX(100%); } }
/* the approve card leaving for the calendar: a short slide and fade, 250ms,
   the same duration as the room change, so the two read as one system */
.cx-leaving { animation:cx-leave var(--d-med) var(--ease) forwards; }
@keyframes cx-leave { to { opacity:0; transform:translateY(-10px) scale(.94); } }
@media (prefers-reduced-motion: reduce) {
  .cx-rise, .cx-draw, .cx-grow, .cx-fade, .cx-ring-draw, .cx-pop {
    animation:none; opacity:1; transform:none; stroke-dashoffset:0;
  }
  .cx-skel::after { animation:none; }
  .cx-leaving { animation:none; opacity:0; }
}

/* ---------- chart furniture, shared ---------- */
.cx-axis { font-size:var(--t-1); fill:var(--ink-muted); font-family:var(--font-data); }
.cx-grid-line { stroke:var(--border); stroke-width:1; }
.cx-series { stroke:#1B4332; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
html[data-mode="dark"] .cx-series { stroke:#CDEBDD; }
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .cx-series { stroke:#CDEBDD; } }

/* ---------- layout helpers ---------- */
.cx-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.cx-col { display:flex; flex-direction:column; gap:16px; }
.cx-pair { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:16px;
  margin-bottom:24px; align-items:start; }
.cx-pair-wide { grid-template-columns:minmax(0,6fr) minmax(0,6fr); }
.cx-pair-narrow { grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.cx-stack { display:grid; gap:16px; margin-bottom:24px; }
@media (max-width:1180px) {
  .cx-pair, .cx-pair-wide, .cx-pair-narrow { grid-template-columns:1fr; }
}

/* ---------- the room head, one shape every room ---------- */
.cx-head { display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:24px; }
.cx-head-right { margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
@media (max-width:720px) { .cx-head-right { margin-left:0; width:100%; } }