/* Continuum Console — the Care Daily visual identity.
 *
 * Why
 *   The console looked like a competent admin tool and nothing like Care Daily. These are the
 *   actual values from the marketing site (workspace/web/public), not an interpretation of them,
 *   so the two read as one product rather than two teams.
 *
 * How
 *   Dark is the ground, not a variant. The site's dark sections are its most characteristic
 *   surface, and an operations console is looked at for hours in rooms with the lights off.
 *   Light is a deliberate override for people who want it, and gets the same care.
 *
 *   Semantic state is mint / amber / coral — the site's own — never the accent. A person must
 *   never wonder whether violet means "brand" or "warning".
 */

:root {
  /* ---- Care Daily, from the source ---- */
  --cd-ink:      #070018;
  --cd-indigo:   #3F3BF2;
  --cd-violet:   #895BF5;
  --cd-peri:     #9590ED;
  --cd-lilac:    #EEEAFF;
  --cd-magenta:  #E20074;
  --cd-slate:    #655B77;
  --cd-mint:     #12B981;
  --cd-amber:    #E8912B;
  --cd-coral:    #FF6B5C;

  /* ---- dark, the default ---- */
  --bg:         var(--cd-ink);
  --bg-grad:    linear-gradient(180deg, #0a0126, #0c0330);
  --surface:    #140b38;
  --surface-2:  #20104c;
  --sunken:     #0c0330;
  --border:     rgba(137, 91, 245, .20);
  --border-soft:rgba(137, 91, 245, .11);
  --text:       #EDE9FB;
  --text-dim:   #c3b8e6;
  --text-faint: #8b7fb8;

  --brand-primary:   var(--cd-violet);
  --brand-secondary: var(--cd-indigo);
  --brand-accent:    var(--cd-magenta);
  --brand-on:        #ffffff;

  --ok:    var(--cd-mint);
  --warn:  var(--cd-amber);
  --alert: var(--cd-coral);

  --radius: 16px;
  --radius-sm: 10px;
  --gap: 18px;

  /* Depth comes from glow rather than drop shadow: on a near-black ground a shadow is
     invisible, and a faint violet bloom is what the site does. */
  --shadow: 0 0 0 1px rgba(137,91,245,.07), 0 10px 40px rgba(7,0,24,.55);
  --glow:   0 0 24px rgba(137,91,245,.18);

  --font: 'Be Vietnam Pro', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
}

/* Light, for anyone who prefers it, and only when they say so. */
:root[data-theme="light"] {
  --bg:         #F6F4FF;
  --bg-grad:    none;
  --surface:    #ffffff;
  --surface-2:  #EEEAFF;
  --sunken:     #F6F4FF;
  --border:     #E9E4F5;
  --border-soft:#F1EDFB;
  --text:       #070018;
  --text-dim:   #655B77;
  --text-faint: #9590ED;
  --shadow: 0 1px 2px rgba(7,0,24,.04), 0 8px 28px rgba(7,0,24,.06);
  --glow:   none;
}

/* An explicit dark choice restates the defaults, so the toggle wins in both directions. */
:root[data-theme="dark"] {
  --bg:         var(--cd-ink);
  --bg-grad:    linear-gradient(180deg, #0a0126, #0c0330);
  --surface:    #140b38;
  --surface-2:  #20104c;
  --sunken:     #0c0330;
  --border:     rgba(137, 91, 245, .20);
  --border-soft:rgba(137, 91, 245, .11);
  --text:       #EDE9FB;
  --text-dim:   #c3b8e6;
  --text-faint: #8b7fb8;
  --shadow: 0 0 0 1px rgba(137,91,245,.07), 0 10px 40px rgba(7,0,24,.55);
  --glow:   0 0 24px rgba(137,91,245,.18);
}

/* ------------------------------------------------------------------ ground */

body {
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
}

/* A single wash of violet behind everything, so the page has depth without decoration. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 44% at 14% -6%, rgba(137,91,245,.13), transparent 70%),
    radial-gradient(48% 38% at 92% 4%, rgba(63,59,242,.10), transparent 70%);
  z-index: 0;
}
:root[data-theme="light"] body::before { opacity: .5; }
.topbar, main, .signin-wrap { position: relative; z-index: 1; }

/* -------------------------------------------------------------- structure */

.topbar {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--border);
}

.card {
  background: linear-gradient(160deg, var(--surface), var(--sunken));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.card > header h2 { letter-spacing: -.012em; }

.stat {
  background: linear-gradient(160deg, var(--surface), var(--sunken));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
/* A hairline of light along the top edge. One detail, repeated, is what makes a set of cards
   read as designed rather than assembled. */
.stat::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(137,91,245,.5), transparent);
}

/* The headline number is the point of a stat, so let it carry the brand gradient. */
.stat .v {
  background: linear-gradient(92deg, var(--text), var(--cd-peri) 60%, var(--cd-violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat.tone-alert .v, .stat.tone-warn .v, .stat.tone-ok .v {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
}
.stat.tone-ok .v    { color: var(--ok); }
.stat.tone-warn .v  { color: var(--warn); }
.stat.tone-alert .v { color: var(--alert); }

.view-head h1 {
  font-size: 30px; font-weight: 680; letter-spacing: -.03em;
  background: linear-gradient(92deg, var(--text), var(--cd-peri) 62%, var(--cd-violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Magenta is the sharp accent, used once or twice a page and never for state. */
.btn.primary {
  background: linear-gradient(120deg, var(--cd-indigo), var(--cd-violet));
  border-color: transparent; color: #fff;
  box-shadow: var(--glow);
}
.btn.primary:hover { filter: brightness(1.12) saturate(1.1); }
.linky { color: var(--cd-peri); }
.linky:hover { color: var(--cd-magenta); }

.pill { background: color-mix(in srgb, var(--brand-primary) 12%, transparent); }
tbody tr:hover { background: color-mix(in srgb, var(--brand-primary) 7%, transparent); }
.place-row:hover, .pub:hover, .lrow:hover { background: color-mix(in srgb, var(--brand-primary) 8%, transparent); }

/* The switch reads as energised when on, which is the whole point of looking at it. */
.sw.on { background: color-mix(in srgb, var(--ok) 26%, transparent); border-color: var(--ok);
         box-shadow: 0 0 16px color-mix(in srgb, var(--ok) 30%, transparent); }
.ctl-level input[type=range] { accent-color: var(--cd-violet); }

.signin { background: linear-gradient(160deg, var(--surface), var(--sunken));
          border: 1px solid var(--border); box-shadow: var(--shadow); }
#ask-dialog, #welcome-dialog {
  background: linear-gradient(160deg, var(--surface), var(--sunken));
  border: 1px solid var(--border);
}
#ask-dialog::backdrop, #welcome-dialog::backdrop {
  background: rgba(7,0,24,.66); backdrop-filter: blur(3px);
}

/* ------------------------------------------------------------------- logo
 * One lockup, ever. The swap is keyed on data-theme, not on the OS preference, because the page
 * chooses its own theme now -- and specific enough to beat `.topbar .wordmark img`, which was
 * setting display on both and showing two logos at once.
 */
:root[data-theme="dark"]  .logo-light,
:root[data-theme="light"] .logo-dark { display: none !important; }
:root[data-theme="dark"]  .logo-dark,
:root[data-theme="light"] .logo-light { display: block !important; }

/* Something to read while a model thinks. The step above is the truth; this is the company. */
.working-murmur { font-size: 12.5px; color: var(--cd-peri); margin-top: 5px; min-height: 1.3em;
                  transition: opacity .22s ease; }
@media (prefers-reduced-motion: reduce) { .working-murmur { transition: none; } }

/* ---------------------------------------------------------------- switch
 * Geometry stated once, in one place, so the knob cannot leave the track. It was escaping
 * because the travel distance was hard-coded independently of the sizes.
 */
.sw {
  --sw-w: 46px; --sw-h: 26px; --sw-pad: 3px;
  width: var(--sw-w); height: var(--sw-h);
  min-width: var(--sw-w); flex: none;
  border-radius: 999px; padding: 0; position: relative;
  box-sizing: border-box; overflow: hidden;   /* belt and braces: it cannot escape */
  cursor: pointer; border: 1px solid var(--border); background: var(--surface-2);
  transition: background .16s ease, border-color .16s ease;
}
.sw .knob {
  position: absolute; top: var(--sw-pad); left: var(--sw-pad);
  width: calc(var(--sw-h) - (var(--sw-pad) * 2) - 2px);
  height: calc(var(--sw-h) - (var(--sw-pad) * 2) - 2px);
  border-radius: 50%; background: var(--text-faint);
  transition: transform .16s ease, background .16s ease;
}
/* Travel is derived from the sizes, so changing one cannot break the other. */
.sw.on .knob {
  transform: translateX(calc(var(--sw-w) - var(--sw-h)));
  background: #fff;
}
.ctl-toggle { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.ctl-asking { font-family: var(--mono); font-size: 11px; color: var(--cd-peri);
              white-space: nowrap; }
.ctl-error { font-size: 11.5px; color: var(--alert); max-width: 220px; }

/* ------------------------------------------------------- controls, immovable
 * A control that moves while you are aiming at it is a broken control. Status text used to sit
 * beside the switch and push it left as soon as it appeared -- so the target moved in response
 * to being pressed, which is the one thing it must never do.
 *
 * The row is a fixed grid. The switch owns its column, the status owns another, and neither can
 * resize the other. This is a general rule for anything operable, not a patch for this widget.
 */
.ctl {
  grid-template-columns: minmax(0, 1fr) 46px;
  column-gap: 16px;
  align-items: center;
}
.ctl-toggle {
  grid-column: 2;
  display: block;
  width: 46px;
  justify-self: end;
}
/* Status lives on its own row, full width, and reserves its height whether or not it has text —
   so appearing and disappearing shifts nothing. */
.ctl-status {
  grid-column: 1 / -1;
  min-height: 1.15em;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cd-peri);
  text-align: right;
}
.ctl-status.bad { color: var(--alert); font-family: var(--font); font-size: 11.5px; }
.ctl-level { grid-column: 1 / -1; }


/* ================================================================ presentation
 *
 * Why
 *   A person asked for something "dramatic and dark" and got the default card grid. The palette
 *   was the easy half; the hard half is that a View had no way to say how it should LOOK. So the
 *   generator had no lever to pull even when it understood the request perfectly.
 *
 * What
 *   Four moods, three densities, one accent, and a per-panel emphasis. All of it declared as data
 *   in the View and applied here, so the renderer stays the only place that knows about pixels.
 *
 * How
 *   `data-mood` and `data-density` on the root element; `--span` and `.hero` / `.quiet` on each
 *   panel. Moods differ in ways that change what you notice first -- ornament, type scale, and
 *   whether cards exist at all -- not just in hue. A mood that only tinted things would be a
 *   setting nobody could tell they had chosen.
 */

/* ---- accents. A closed list: the model names one, it never writes CSS. ---- */
:root[data-accent="indigo"]  { --brand-primary: var(--cd-indigo);  --accent-soft: rgba(63,59,242,.16); }
:root[data-accent="violet"]  { --brand-primary: var(--cd-violet);  --accent-soft: rgba(137,91,245,.16); }
:root[data-accent="magenta"] { --brand-primary: var(--cd-magenta); --accent-soft: rgba(226,0,116,.14); }
:root[data-accent="mint"]    { --brand-primary: var(--cd-mint);    --accent-soft: rgba(18,185,129,.14); }
:root[data-accent="amber"]   { --brand-primary: var(--cd-amber);   --accent-soft: rgba(232,145,43,.14); }
:root[data-accent="coral"]   { --brand-primary: var(--cd-coral);   --accent-soft: rgba(255,107,92,.14); }
:root { --accent-soft: rgba(137,91,245,.16); }

/* ---- density. Air is the cheapest way to change how a page feels. ---- */
:root[data-density="spacious"]    { --gap: 26px; }
:root[data-density="comfortable"] { --gap: 18px; }
:root[data-density="compact"]     { --gap: 11px; }
:root[data-density="compact"] .card .body   { padding: 11px 13px 13px; }
:root[data-density="compact"] .card > header { padding: 11px 13px 9px; }
:root[data-density="spacious"] .card .body  { padding: 22px 26px 26px; }

/* ---- span. Set by the renderer from the panel's own emphasis. ---- */
.grid > * { grid-column: span var(--span, 12); }

/* ---- hero. One panel that answers the question, at the size of the question. ---- */
.card.hero > header h2 { font-size: 20px; letter-spacing: -.02em; }
.card.hero {
  border-color: color-mix(in srgb, var(--brand-primary) 34%, transparent);
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
.card.hero .body { padding-top: 18px; }
.card.quiet { background: none; border-color: var(--border-soft); box-shadow: none; }
.card.quiet > header h2 { font-size: 13.5px; color: var(--text-dim); font-weight: 600; }

/* ================================ dramatic
 * The mood for a wall display or a page someone wants to be impressed by. A bloom of accent
 * behind the hero, numbers set large, headers spaced out like a title sequence.
 */
:root[data-mood="dramatic"] { --radius: 20px; }
:root[data-mood="dramatic"] body::before {
  background:
    radial-gradient(70% 52% at 18% -10%, var(--accent-soft), transparent 68%),
    radial-gradient(56% 44% at 94% 2%, rgba(63,59,242,.16), transparent 70%),
    radial-gradient(40% 34% at 50% 108%, rgba(226,0,116,.09), transparent 72%);
}
:root[data-mood="dramatic"] .card > header h2 {
  text-transform: uppercase; letter-spacing: .085em; font-size: 11.5px;
  color: var(--text-dim); font-weight: 700;
}
:root[data-mood="dramatic"] .card.hero > header h2 { font-size: 13px; color: var(--text); }
:root[data-mood="dramatic"] .stat .v { font-size: clamp(34px, 4.6vw, 58px); font-weight: 600; }
:root[data-mood="dramatic"] .card.hero {
  background:
    radial-gradient(120% 150% at 8% -20%, var(--accent-soft), transparent 62%),
    linear-gradient(160deg, var(--surface), var(--sunken));
}
:root[data-mood="dramatic"] .view-head h1 { font-size: clamp(30px, 3.6vw, 46px); }

/* ================================ minimal
 * No cards at all. Rules and whitespace, type doing the work. The right answer when someone
 * says they want to see less, and the hardest one to fake with a colour change.
 */
:root[data-mood="minimal"] .card {
  background: none; border: none; box-shadow: none;
  border-top: 1px solid var(--border-soft); border-radius: 0;
}
:root[data-mood="minimal"] .card > header { padding-left: 0; padding-right: 0; }
:root[data-mood="minimal"] .card .body { padding-left: 0; padding-right: 0; }
:root[data-mood="minimal"] .card > header h2 { font-weight: 600; font-size: 14px; }
:root[data-mood="minimal"] .stat { background: none; border: none; box-shadow: none; }
:root[data-mood="minimal"] .stat::before { display: none; }
:root[data-mood="minimal"] body::before { opacity: .35; }
:root[data-mood="minimal"] .card.hero { border-top-color: var(--brand-primary); }

/* ================================ technical
 * For someone reading numbers for a living. Mono everywhere it helps, hairlines, tabular digits
 * so columns line up, and no gradient on a value that is meant to be compared.
 */
:root[data-mood="technical"] { --radius: 6px; --radius-sm: 4px; }
:root[data-mood="technical"] .card { background: var(--surface); box-shadow: none; }
:root[data-mood="technical"] .card > header h2 {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0;
}
:root[data-mood="technical"] td, :root[data-mood="technical"] th,
:root[data-mood="technical"] .stat .v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
:root[data-mood="technical"] .stat .v {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--text); font-size: 27px;
}
:root[data-mood="technical"] .view-head h1 {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--text); font-size: 24px;
}
:root[data-mood="technical"] body::before { opacity: .3; }

/* ================================ calm
 * Nothing shouts. The default, stated explicitly so the model can choose it on purpose.
 */
:root[data-mood="calm"] .card { border-color: var(--border-soft); }
:root[data-mood="calm"] .card > header h2 { font-weight: 600; }
:root[data-mood="calm"] body::before { opacity: .6; }