/* Tutti (Option B): tokens and base pieces for HTML artifacts, pages and prototypes.
   Values come from the product code (Darkmatter-AI/tutti) app/globals.css and
   components/ui, components/flow, components/shell. No web font: the system sans.
   Light and dark follow the system; pin one with <html data-theme="light|dark">. */

:root {
  --t-background: #f2f2f7;
  --t-card: #ffffff;
  --t-popover: #ffffff;
  --t-foreground: #1c1c1e;
  --t-muted-foreground: #6c6c70;
  --t-primary: #1c1c1e;
  --t-primary-foreground: #ffffff;
  --t-secondary: #e5e5ea;
  --t-muted: #f2f2f7;
  --t-border: #e5e5ea;
  --t-band: #e5e5ea;
  --t-wire: #c7c7cc;
  --t-ring: #1c1c1e;
  --t-failed: #d70015;
  --t-attention: #b25000;
  --t-chart-1: #e5e5ea;
  --t-chart-2: #1c1c1e;
  --t-chart-3: #aeaeb2;
  --t-chart-4: #6c6c70;
  --t-chart-5: #3a3a3c;
  --t-shadow-md: 0 4px 16px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.04);
  --t-shadow-lg: 0 12px 40px rgb(0 0 0 / 0.14), 0 0 0 1px rgb(0 0 0 / 0.06);

  --t-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* Body is 16/22 on phones (iOS zooms into smaller fields), 14/20 from 768 px. */
  --t-fs-body: 16px;
  --t-lh-body: 22px;

  --t-radius-xs: 6px;
  --t-radius-sm: 8px;
  --t-radius-md: 10px;
  --t-radius-lg: 14px;
  --t-control: 44px;
  --t-ease: cubic-bezier(0, 0, 0.2, 1);

  /* A field is white on the grey ground and grey inside a card. */
  --t-field: var(--t-card);
  color-scheme: light;
}
@media (min-width: 768px) {
  :root { --t-fs-body: 14px; --t-lh-body: 20px; }
}
@media (min-width: 768px) and (pointer: fine) {
  :root { --t-control: 32px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t-background: #111113;
    --t-card: #232326;
    --t-popover: #2c2c2f;
    --t-foreground: #f2f2f7;
    --t-muted-foreground: #98989f;
    --t-primary: #f2f2f7;
    --t-primary-foreground: #111113;
    --t-secondary: #38383b;
    --t-muted: #2e2e31;
    --t-border: #333336;
    --t-band: #1a1a1d;
    --t-wire: #4e4e53;
    --t-ring: #f2f2f7;
    --t-failed: #ff6961;
    --t-attention: #ffb340;
    --t-chart-1: #38383b;
    --t-chart-2: #f2f2f7;
    --t-chart-3: #636366;
    --t-chart-4: #98989f;
    --t-chart-5: #c7c7cc;
    --t-shadow-md: 0 4px 16px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.06);
    --t-shadow-lg: 0 12px 40px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.08);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --t-background: #111113;
  --t-card: #232326;
  --t-popover: #2c2c2f;
  --t-foreground: #f2f2f7;
  --t-muted-foreground: #98989f;
  --t-primary: #f2f2f7;
  --t-primary-foreground: #111113;
  --t-secondary: #38383b;
  --t-muted: #2e2e31;
  --t-border: #333336;
  --t-band: #1a1a1d;
  --t-wire: #4e4e53;
  --t-ring: #f2f2f7;
  --t-failed: #ff6961;
  --t-attention: #ffb340;
  --t-chart-1: #38383b;
  --t-chart-2: #f2f2f7;
  --t-chart-3: #636366;
  --t-chart-4: #98989f;
  --t-chart-5: #c7c7cc;
  --t-shadow-md: 0 4px 16px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.06);
  --t-shadow-lg: 0 12px 40px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.08);
  color-scheme: dark;
}

/* ---------- base and the three text styles */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--t-background);
  color: var(--t-foreground);
  font: 400 var(--t-fs-body) / var(--t-lh-body) var(--t-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--t-ring); outline-offset: 2px; }

.t-title { font-size: 17px; line-height: 22px; font-weight: 500; letter-spacing: -0.01em; }
.t-body { font-size: var(--t-fs-body); line-height: var(--t-lh-body); font-weight: 400; }
.t-caption { font-size: 12px; line-height: 16px; font-weight: 400; }
.t-muted { color: var(--t-muted-foreground); }
.t-failed { color: var(--t-failed); }
.t-attention { color: var(--t-attention); }
.t-mono { font-family: var(--t-mono); font-size: 13px; line-height: 20px; }
.t-num { font-variant-numeric: tabular-nums; }
/* Line icons (Lucide shapes): one 1.7 stroke, round caps, no fill, the text colour. */
.t-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.t-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.t-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons: every button is a capsule, 32 px (44 on phones and touch) */

.t-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  height: var(--t-control); padding: 0 14px; border: 0; border-radius: 9999px;
  background: var(--t-primary); color: var(--t-primary-foreground);
  font: 400 var(--t-fs-body) / 1 var(--t-font); white-space: nowrap; cursor: pointer;
  transition: background-color 150ms var(--t-ease), filter 150ms var(--t-ease), color 150ms var(--t-ease);
}
.t-btn:hover { background: color-mix(in srgb, var(--t-primary) 85%, transparent); }
.t-btn:disabled { opacity: 0.5; pointer-events: none; }
.t-btn--secondary { background: var(--t-secondary); color: var(--t-foreground); }
.t-btn--secondary:hover { background: var(--t-secondary); filter: brightness(0.95); }
.t-btn--card { background: var(--t-card); color: var(--t-foreground); }
.t-btn--card:hover { background: var(--t-card); filter: brightness(0.97); }
.t-btn--ghost { background: transparent; color: var(--t-foreground); }
.t-btn--ghost:hover { background: var(--t-secondary); }
.t-btn--destructive { background: transparent; color: var(--t-failed); }
.t-btn--destructive:hover { background: color-mix(in srgb, var(--t-failed) 10%, transparent); }
.t-btn--sm { height: max(28px, calc(var(--t-control) - 4px)); padding: 0 12px; }
.t-btn--lg { height: 44px; padding: 0 20px; }
.t-btn--icon { width: var(--t-control); padding: 0; }
.t-btn svg { width: 16px; height: 16px; }

/* ---------- fields: borderless, 8 px radius, white on the ground, grey in a card */

.t-field {
  display: block; width: 100%; min-width: 0; height: var(--t-control); padding: 4px 10px;
  border: 0; border-radius: var(--t-radius-sm); background: var(--t-field); color: var(--t-foreground);
  font: 400 var(--t-fs-body) / var(--t-lh-body) var(--t-font);
}
textarea.t-field { height: auto; min-height: 80px; padding: 8px 10px; resize: vertical; }
.t-field::placeholder { color: var(--t-muted-foreground); }
.t-field:focus-visible { outline: 2px solid var(--t-ring); outline-offset: 2px; }
.t-field[aria-invalid="true"] { outline: 2px solid var(--t-failed); }
.t-label { display: flex; flex-direction: column; gap: 6px; }

/* ---------- surfaces: cards have no border and no shadow; only floating things cast one */

.t-card { background: var(--t-card); border-radius: var(--t-radius-md); padding: 16px; display: flex; flex-direction: column; gap: 16px; --t-field: var(--t-muted); }
.t-popover { background: var(--t-popover); border-radius: var(--t-radius-md); box-shadow: var(--t-shadow-md); padding: 4px; --t-field: var(--t-muted); }
.t-sheet { background: var(--t-popover); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow-lg); --t-field: var(--t-muted); }
.t-menu-item { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 8px; border-radius: var(--t-radius-xs); }
.t-menu-item:hover { background: var(--t-secondary); }

/* ---------- grouped list, as in iOS Settings: a caption, a white card of rows, inset hairlines */

.t-group { display: flex; flex-direction: column; min-width: 0; }
.t-group__caption { display: flex; align-items: baseline; gap: 8px; padding: 0 14px 6px; font-size: 12px; line-height: 16px; color: var(--t-muted-foreground); }
.t-group__caption > :first-child { flex: 1; min-width: 0; font-weight: 400; font-size: inherit; }
.t-group__footer { padding: 6px 14px 0; font-size: 12px; line-height: 16px; color: var(--t-muted-foreground); }
.t-list { list-style: none; margin: 0; padding: 0; background: var(--t-card); border-radius: var(--t-radius-md); overflow: hidden; --t-field: var(--t-muted); }
.t-list > li { position: relative; }
.t-list > li + li::before { content: ""; position: absolute; top: 0; right: 0; left: 14px; height: 1px; background: var(--t-border); }
.t-list > li.has-tile + li::before, .t-list > li + li.has-tile::before { left: 54px; }
.t-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 14px; text-align: left; color: inherit; background: none; border: 0; font: inherit; transition: background-color 150ms var(--t-ease); }
a.t-row:hover, button.t-row:hover { background: color-mix(in srgb, var(--t-secondary) 50%, transparent); }
.t-row[aria-current="true"], .t-row.is-selected { background: var(--t-secondary); }
.t-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.t-row__text > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-row__text > .t-caption { color: var(--t-muted-foreground); }
.t-row__text > .t-failed, .t-row__text > .t-status--failed { color: var(--t-failed); }
.t-row__text > .t-attention, .t-row__text > .t-status--attention { color: var(--t-attention); }
.t-row__value { flex: none; color: var(--t-muted-foreground); }
.t-chevron { flex: none; width: 16px; height: 16px; color: var(--t-muted-foreground); }
.t-tile { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--t-radius-xs); background: var(--t-muted); color: var(--t-foreground); }
.t-tile svg { width: 16px; height: 16px; }
.t-tile--failed { color: var(--t-failed); }
@media (max-width: 767px) {
  .t-row { min-height: 48px; padding: 8px 16px; }
  .t-group__caption, .t-group__footer { padding-left: 16px; padding-right: 16px; }
}

/* ---------- badges and status */

.t-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 9999px; border: 1px solid transparent; font-size: 12px; line-height: 16px; white-space: nowrap; background: var(--t-primary); color: var(--t-primary-foreground); }
.t-badge--secondary { background: var(--t-secondary); color: var(--t-foreground); }
.t-badge--outline { background: transparent; border-color: var(--t-border); color: var(--t-foreground); }
.t-badge--failed { background: var(--t-failed); color: #fff; }

/* A status is a dot and a word. Running: a pulsing ring. Waiting: a grey ring.
   Failed: a red dot and red word. Attention: an amber dot and word. Done: just the time. */
.t-status { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.t-status::before { content: ""; flex: none; }
.t-status--running::before { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--t-foreground); animation: t-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.t-status--waiting { color: var(--t-muted-foreground); }
.t-status--waiting::before { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--t-muted-foreground); }
.t-status--failed { color: var(--t-failed); }
.t-status--failed::before { width: 8px; height: 8px; border-radius: 50%; background: var(--t-failed); }
.t-status--attention { color: var(--t-attention); }
.t-status--attention::before { width: 8px; height: 8px; border-radius: 50%; background: var(--t-attention); }
.t-status--off { color: var(--t-muted-foreground); }
@keyframes t-pulse { 50% { opacity: 0.5; } }

.t-progress { height: 3px; border-radius: 9999px; background: var(--t-band); overflow: hidden; }
.t-progress > span { display: block; height: 100%; background: var(--t-foreground); border-radius: inherit; }

/* ---------- the flow: steps top to bottom, joined by 1 px wires */

.t-flow { display: flex; flex-direction: column; align-items: center; width: max-content; margin: 0 auto; }
.t-step { position: relative; display: flex; align-items: center; gap: 10px; width: 248px; height: 40px; padding: 0 12px 0 6px; border-radius: var(--t-radius-md); background: var(--t-card); color: var(--t-foreground); }
.t-step__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-step__value { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; color: var(--t-muted-foreground); }
.t-step--selected { box-shadow: 0 0 0 2px var(--t-ring); }
.t-step--running { box-shadow: 0 0 0 1px var(--t-foreground); }
.t-step--failed { box-shadow: inset 0 0 0 1px var(--t-failed); }
.t-step--failed .t-step__name, .t-step--failed .t-step__value { color: var(--t-failed); }
.t-step--faded > * { opacity: 0.5; }
.t-step__need { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--t-failed); box-shadow: 0 0 0 2px var(--t-background); }
.t-wire { width: 1px; height: 16px; background: var(--t-wire); flex: none; }
.t-band { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 8px 8px; border-radius: var(--t-radius-lg); background: var(--t-band); }
.t-band__caption { align-self: stretch; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px; font-size: 12px; line-height: 16px; color: var(--t-muted-foreground); }
.t-lanes { display: flex; gap: 16px; align-items: stretch; position: relative; padding-top: 16px; padding-bottom: 16px; }
.t-lanes::before, .t-lanes::after { content: ""; position: absolute; left: 124px; right: 124px; height: 1px; background: var(--t-wire); }
.t-lanes::before { top: 0; }
.t-lanes::after { bottom: 0; }
.t-lane { display: flex; flex-direction: column; align-items: center; position: relative; }
.t-lane::before, .t-lane::after { content: ""; width: 1px; flex: 1 0 16px; background: var(--t-wire); }
.t-lane::before { flex: 0 0 16px; margin-top: -16px; }
.t-lane::after { margin-bottom: -16px; }
.t-lane__caption { position: absolute; top: -16px; left: calc(50% + 8px); font-size: 12px; line-height: 16px; color: var(--t-muted-foreground); white-space: nowrap; }
/* Phones: lanes one under the other, each a captioned band. */
@media (max-width: 767px) {
  .t-lanes { flex-direction: column; gap: 16px; padding: 0; }
  .t-lanes::before, .t-lanes::after, .t-lane::before, .t-lane::after { display: none; }
  .t-lane { padding: 0 8px 8px; border-radius: var(--t-radius-lg); background: var(--t-band); }
  .t-lane > .t-wire { height: 8px; }
  .t-lane__caption { position: static; align-self: stretch; display: flex; align-items: center; height: 24px; padding: 0 6px; }
}
.t-slot { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--t-wire); background: var(--t-card); color: var(--t-foreground); font: 400 14px/1 var(--t-font); padding: 0; cursor: pointer; }
.t-slot:hover { border-color: var(--t-foreground); }

/* ---------- the shell: a grey sidebar on the grey ground, the selected row a white card */

.t-shell { display: flex; min-height: 100vh; }
.t-sidebar { flex: none; width: 232px; display: flex; flex-direction: column; gap: 14px; padding: 14px 12px 12px; background: var(--t-background); }
.t-nav { display: flex; flex-direction: column; gap: 2px; }
.t-nav a { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--t-radius-sm); color: var(--t-foreground); }
.t-nav a:hover { background: color-mix(in srgb, var(--t-card) 60%, transparent); }
.t-nav a[aria-current="page"] { background: var(--t-card); }
.t-nav svg { width: 18px; height: 18px; flex: none; }
.t-main { flex: 1; min-width: 0; padding: 20px 24px 40px; }
.t-column { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.t-column--form { max-width: 896px; }
.t-column--table { max-width: 1440px; }
.t-page-header { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.t-page-header > div:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.t-nav .t-sub { height: 28px; padding-left: 38px; color: var(--t-muted-foreground); }
.t-nav .t-sub[aria-current="page"] { color: var(--t-foreground); }

/* Phones: a 44 px top bar with the place's name centred, and a tab bar of five places on white. */
.t-topbar { display: none; }
.t-tabbar { display: none; }
@media (max-width: 767px) {
  .t-shell { flex-direction: column; }
  .t-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 6px; background: var(--t-background); }
  .t-topbar > :first-child, .t-topbar > :last-child { flex: 1 1 0; min-width: 0; display: flex; }
  .t-topbar > :last-child { justify-content: flex-end; }
  .t-topbar__title { max-width: 55%; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 17px; line-height: 22px; font-weight: 500; letter-spacing: -0.01em; }
  .t-tabbar { position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 0 max(env(safe-area-inset-bottom), 8px); background: var(--t-card); box-shadow: 0 -1px 0 var(--t-border); }
  .t-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; font-size: 12px; line-height: 16px; color: var(--t-muted-foreground); }
  .t-tabbar a[aria-current="page"] { color: var(--t-foreground); }
  .t-tabbar .t-icon { width: 22px; height: 22px; }
}
@media (max-width: 767px) {
  .t-sidebar { display: none; }
  .t-main { padding: 12px 16px 96px; }
  .t-page-header > div:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}