/* Twain OS components. Load tokens.css first. When to use what: DESIGN.md. Every state live: library.html.
Every class starts with .t-, so this file never collides with styles.css. States use ARIA where there is
one (aria-current, aria-pressed, aria-selected, aria-expanded, aria-busy) and .is-* otherwise. */
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--bg-gradient), var(--bg);
background-attachment: fixed;
color: var(--ink);
font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
-webkit-font-smoothing: antialiased;
/* Som app på telefonen: hold innholdet unna hjem-streken og hakket når telefonen ligger. 0 ellers. */
padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
[data-phase]:not(:root) { background: var(--bg-gradient), var(--bg); color: var(--ink); } /* a phase preview */
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--dotted); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
.t-phase-fade, .t-phase-fade * { /* sun.js adds this for ~2 s when the phase changes */
transition: background-color 1.8s var(--ease-in-out), color 1.8s var(--ease-in-out), fill 1.8s var(--ease-in-out),
stroke 1.8s var(--ease-in-out), box-shadow 1.8s var(--ease-in-out) !important;
}
/* Lucide icons from icons.svg: */
.t-icon {
width: 18px; height: 18px; flex: none; vertical-align: middle;
fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.t-icon--sm { width: 15px; height: 15px; }
.t-icon--lg { width: 22px; height: 22px; }
/* ---------- type ---------- */
.t-display { margin: 0; font-size: var(--fs-display); font-weight: var(--fw-light); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.t-h1 { margin: 0; font-size: var(--fs-h1); font-weight: var(--fw-light); line-height: var(--lh-tight); letter-spacing: -0.01em; }
.t-h2 { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-snug); }
.t-h3 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: var(--lh-snug); }
.t-label { color: var(--muted); font-size: var(--fs-xs); line-height: 1.3; }
.t-muted { color: var(--muted); }
.t-small { font-size: var(--fs-sm); }
.t-num { font-variant-numeric: tabular-nums lining-nums; }
.t-mono { font-family: var(--font-mono); font-size: 0.9em; }
.t-kpi-num { font-size: var(--fs-kpi); font-weight: var(--fw-thin); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.t-hair { margin: 0; border: 0; border-top: 1px solid var(--hairline); }
.t-dotted { margin: 0; border: 0; border-top: 2px dotted var(--dotted); }
/* ---------- surfaces: layers of tone, no borders; only what floats has a shadow ---------- */
.t-shell { border-radius: var(--r-shell); background: var(--shell); box-shadow: var(--shell-edge); } /* glass: the glow shows through */
.t-tray { padding: var(--sp-5); border-radius: var(--r-panel); background: var(--tray); }
.t-card { min-width: 0; padding: var(--sp-6); border-radius: var(--r-card); background: var(--surface); }
.t-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-5); }
.t-card__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: var(--lh-snug); }
.t-card__meta { color: var(--muted); font-size: var(--fs-sm); }
.t-card__tools { display: flex; align-items: center; gap: var(--sp-2); }
.t-card--dark { background: var(--matrix-bg); color: var(--matrix-ink); }
.t-card--dark :is(.t-label, .t-muted, .t-card__meta, .t-legend) { color: var(--matrix-muted); }
.t-tile { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: var(--r-tile); background: var(--surface-2); }
.t-tile__label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-xs); }
.t-tile__label .t-icon { width: 15px; height: 15px; }
.t-tile__value { overflow: hidden; margin: 0; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
/* ---------- app frame: glass shell, wordmark, side nav of pills, page head ---------- */
.t-frame {
display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: var(--sp-7); align-items: start;
min-height: calc(100vh - 2 * var(--sp-4)); margin: var(--sp-4); padding: var(--sp-5) var(--sp-7) var(--sp-8) var(--sp-5);
}
.t-side {
position: sticky; top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-6);
max-height: calc(100vh - 2 * var(--sp-5) - 2 * var(--sp-4)); min-width: 0;
}
.t-side__foot { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: auto; }
.t-wordmark {
display: inline-flex; align-items: center; align-self: flex-start; flex: none; height: 44px; padding: 0 20px;
border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink);
font-size: 20px; font-weight: var(--fw-light); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
}
.t-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); align-content: start; min-width: 0; }
.t-pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.t-pagehead__title { flex: 1 1 auto; min-width: 0; margin: 0; }
.t-pagehead__sub { display: block; margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-regular); letter-spacing: 0; }
.t-pagehead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
@media (max-width: 760px) {
.t-frame { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); min-height: 100vh; margin: 0; padding: var(--sp-4); border-radius: 0; }
.t-side { position: static; flex-direction: row; align-items: center; gap: var(--sp-3); max-height: none; margin-inline: calc(-1 * var(--sp-4)); padding-inline: var(--sp-4); overflow-x: auto; scrollbar-width: none; }
.t-side__foot { display: none; }
.t-side .t-nav--side { flex-direction: row; }
.t-avatar-pill__name { display: none; }
.t-pagehead .t-display { font-size: var(--fs-h1); }
.t-tray { padding: var(--sp-3); border-radius: var(--r-card); }
:is(.t-card, .t-kpi) { padding: var(--sp-4); }
}
/* ---------- navigation pills, also used as a segmented control ---------- */
.t-nav {
display: inline-flex; align-items: center; justify-self: start; gap: 2px; max-width: 100%; padding: 4px;
overflow-x: auto; scrollbar-width: none; border-radius: var(--r-pill); background: var(--surface-raised); box-shadow: var(--shadow-xs);
}
.t-nav__item {
display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; height: 36px; padding: 0 16px;
border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink); cursor: pointer;
font-size: var(--fs-sm); line-height: 1; text-decoration: none; white-space: nowrap;
transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.t-nav__item:hover { background: var(--hover); }
.t-nav__item:is(.is-active, [aria-current="page"], [aria-current="true"], [aria-pressed="true"]) { background: var(--primary-bg); color: var(--primary-fg); }
.t-nav--sm .t-nav__item { height: 30px; padding: 0 12px; font-size: var(--fs-xs); }
.t-nav--side { flex-direction: column; align-items: stretch; gap: 2px; padding: 0; background: none; box-shadow: none; overflow: visible; }
.t-nav--side .t-nav__item { height: 40px; padding: 0 12px 0 14px; }
.t-nav--side .t-count { margin-left: auto; }
.t-count {
display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--r-pill);
background: var(--surface-2); color: var(--ink); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; line-height: 1;
}
.t-count--wait { background: var(--butter); color: var(--butter-ink); } /* something waits for you */
.t-count--dark { background: var(--primary-bg); color: var(--primary-fg); }
.t-nav__item:is(.is-active, [aria-current="page"], [aria-current="true"]) .t-count:not(.t-count--wait) { background: color-mix(in srgb, var(--primary-fg) 18%, transparent); color: inherit; }
/* ---------- tabs with counters: the active tab flows into the board below ---------- */
.t-tabs { display: flex; align-items: flex-end; gap: 2px; padding-right: 20px; overflow-x: auto; scrollbar-width: none; }
.t-tab {
position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 14px 0 9px;
border: 0; border-radius: var(--r-card) var(--r-card) 0 0; background: transparent; color: var(--muted); cursor: pointer;
font-size: var(--fs-body); transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.t-tab:hover { color: var(--ink); }
.t-tab__icon {
width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-raised); color: var(--ink);
transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.t-tab[aria-selected="true"] { z-index: 1; background: var(--tray); color: var(--ink); }
.t-tab[aria-selected="true"] .t-tab__icon { background: var(--primary-bg); color: var(--primary-fg); }
.t-tab[aria-selected="true"] .t-count { background: var(--butter); color: var(--butter-ink); }
.t-tab[aria-selected="true"]::before, .t-tab[aria-selected="true"]::after { content: ""; position: absolute; bottom: 0; width: 20px; height: 20px; pointer-events: none; }
.t-tab[aria-selected="true"]::before { right: 100%; background: radial-gradient(circle at 0 0, transparent 19.5px, var(--tray) 20px); }
.t-tab[aria-selected="true"]::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent 19.5px, var(--tray) 20px); }
.t-tabs > .t-tab[aria-selected="true"]:first-child::before { display: none; }
.t-tabpanel { padding: var(--sp-6); border-radius: var(--r-panel); background: var(--tray); }
.t-tabs:has(> .t-tab[aria-selected="true"]:first-child) + .t-tabpanel { border-top-left-radius: 0; }
.t-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: var(--sp-4); }
@media (max-width: 760px) {
.t-tab { gap: var(--sp-2); height: 48px; font-size: var(--fs-sm); }
.t-tab__icon { width: 30px; height: 30px; }
.t-tabpanel { padding: var(--sp-4); }
}
/* ---------- action card: one thing that waits for you (reference 06) ---------- */
.t-action {
display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px; border-radius: var(--r-card); background: var(--surface);
transition: opacity var(--dur) var(--ease-out), scale var(--dur) var(--ease-out);
}
.t-action.is-resolved { opacity: 0; scale: 0.97; }
.t-action__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.t-action__src { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--fs-sm); white-space: nowrap; }
.t-action__src > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.t-action__src .t-muted::before { content: "· "; }
.t-action__avatar { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--primary-bg); color: var(--primary-fg); }
.t-action__avatar .t-icon { width: 15px; height: 15px; }
.t-action__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.t-action__tiles dd { margin: 0; }
.t-action__title {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; /* two lines, so side-by-side cards line up */
margin: 2px 0 0; font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: var(--lh-snug);
}
.t-action__text {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
min-height: 3em; margin: -6px 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5;
}
.t-action__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; } /* always at the bottom: «Se detaljer» left, the main action right */
/* Plankort (WP8): en deloppgave som korte punkter, med connectorene, kommentar og «Vis mer» i foten */
.t-action__points { display: grid; gap: 4px; margin: -6px 0 0; padding-left: 1.15em; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; }
.t-action__points li::marker { color: var(--faint); }
.t-action__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.t-action__foot-btns { display: flex; align-items: center; gap: 6px; }
.t-action__note { display: grid; gap: 8px; }
.t-action__note .t-action__btns { margin-top: 0; }
/* Priority: high is butter, medium lilac, low grey. Never red. */
.t-flag {
display: inline-flex; align-items: center; gap: 6px; flex: none; height: 26px; padding: 0 10px; border-radius: var(--r-pill);
background: var(--st-idle-bg); color: var(--st-idle-fg); box-shadow: inset 0 0 0 1px var(--dotted);
font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.t-flag .t-icon { width: 13px; height: 13px; }
.t-flag--high { background: var(--butter-soft); color: var(--butter-text); box-shadow: inset 0 0 0 1px var(--butter); }
.t-flag--mid { background: var(--mid-bg); color: var(--mid); box-shadow: inset 0 0 0 1px var(--lilac); }
/* ---------- toast: top right, gone after 4.2 s ---------- */
.t-toast-region {
position: fixed; top: calc(var(--sp-6) + env(safe-area-inset-top, 0px)); right: var(--sp-6); z-index: 50;
display: grid; justify-items: end; gap: 10px; pointer-events: none;
}
.t-toast {
display: flex; align-items: center; gap: 14px; min-width: 260px; max-width: min(380px, calc(100vw - 2 * var(--sp-4)));
padding: 12px 22px 12px 12px; border-radius: var(--r-card); background: var(--surface-raised); box-shadow: var(--shadow-md);
pointer-events: auto; animation: t-toast-in var(--dur-slow) var(--ease-out);
transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
}
.t-toast.is-leaving { opacity: 0; translate: 0 -8px; }
.t-toast__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--st-ok-dot); color: #FFFFFF; }
.t-toast__title { display: block; color: var(--st-ok-fg); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.t-toast__text { display: block; color: var(--muted); font-size: var(--fs-xs); }
.t-toast--info .t-toast__icon { background: var(--primary-bg); color: var(--primary-fg); }
.t-toast--info .t-toast__title { color: var(--ink); }
.t-toast--fail .t-toast__icon { background: var(--st-fail-dot); }
.t-toast--fail .t-toast__title { color: var(--st-fail-fg); }
@media (max-width: 480px) { .t-toast-region { left: var(--sp-4); right: var(--sp-4); justify-items: stretch; } }
/* ---------- KPI, quota segments, estimates ---------- */
.t-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--sp-4); }
.t-kpi { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: var(--sp-6); border-radius: var(--r-card); background: var(--surface); }
.t-kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; color: var(--muted); font-size: var(--fs-sm); }
.t-kpi__unit { margin-left: 6px; color: var(--muted); font-size: var(--fs-h3); font-weight: var(--fw-light); letter-spacing: 0; }
.t-kpi__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-xs); }
.t-delta { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.t-delta--good { background: var(--st-ok-bg); color: var(--st-ok-fg); } /* only when the direction is good news */
.t-progress { display: grid; gap: 8px; }
.t-progress__labels, .t-progress__bar { display: flex; gap: 4px; }
.t-progress__labels > span { min-width: 0; overflow: hidden; color: var(--muted); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.t-seg {
display: flex; align-items: center; min-width: 0; height: 34px; padding: 0 12px; overflow: hidden; border-radius: var(--r-pill);
font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.t-seg--solid { background: var(--primary-bg); color: var(--primary-fg); }
.t-seg--butter { background: var(--butter); color: var(--butter-ink); }
.t-seg--hatch { background: repeating-linear-gradient(-55deg, var(--dotted) 0 1.5px, transparent 1.5px 9px); color: var(--ink); } /* estimate */
.t-seg--outline { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.t-progress--sm .t-seg { height: 12px; padding: 0; font-size: 0; }
/* Dashed, dotted and hatched always mean estimate (anslag). */
.t-est {
display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border: 1px dashed var(--dotted); border-radius: var(--r-pill);
color: var(--muted); font-size: var(--fs-xs); letter-spacing: 0.01em; white-space: nowrap; vertical-align: middle;
}
.t-est::before { content: "≈"; }
.t-est-val { text-decoration: underline dotted var(--muted); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
/* ---------- charts (charts.js) ---------- */
.t-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: var(--fs-xs); }
.t-legend > * { display: inline-flex; align-items: center; gap: 6px; }
.t-legend i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--series-1); }
.t-legend i.s2 { background: var(--series-2); }
.t-legend i.s3 { background: var(--series-3); }
.t-legend--lg { gap: 10px 28px; color: var(--ink); font-size: var(--fs-body); }
.t-legend--lg b { font-weight: var(--fw-light); font-variant-numeric: tabular-nums; }
.t-chart-host { position: relative; touch-action: pan-y; border-radius: var(--r-tile); }
.t-chart { display: block; overflow: visible; }
.t-chart text { fill: var(--muted); font-family: var(--font-sans); font-size: var(--fs-xs); }
.t-chart text.is-on { fill: var(--ink); }
.t-chart text.is-skip:not(.is-on) { display: none; }
.t-chart__pill { fill: var(--surface-2); transition: x var(--dur) var(--ease-out); }
.t-chart__cursor { stroke: var(--ink); stroke-width: 1.2; transition: x1 var(--dur) var(--ease-out), x2 var(--dur) var(--ease-out); }
.t-chart__line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.t-chart__line.s1 { stroke: var(--series-1-line); }
.t-chart__line.s2 { stroke: var(--series-2); }
.t-chart__line.s3 { stroke: var(--series-3); }
.t-chart__line.is-dotted { stroke-width: 2.6; stroke-dasharray: 0.1 6; }
.t-chart__dot { stroke: var(--surface); stroke-width: 2; transition: cx var(--dur) var(--ease-out), cy var(--dur) var(--ease-out); }
.t-chart__dot.s1 { fill: var(--series-1-line); }
.t-chart__dot.s2 { fill: var(--series-2); }
.t-chart__dot.s3 { fill: var(--series-3); }
.t-chart-tip {
position: absolute; top: 0; translate: -50% 0; display: grid; gap: 3px; padding: 8px 12px; border-radius: 14px;
background: var(--primary-bg); color: var(--primary-fg); box-shadow: var(--shadow-md);
font-size: var(--fs-xs); line-height: 1.25; white-space: nowrap; pointer-events: none; transition: left var(--dur) var(--ease-out);
}
.t-chart-tip > span { display: flex; align-items: center; gap: 6px; }
.t-chart-tip i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--series-1); }
.t-chart-tip i.s2 { background: none; box-shadow: inset 0 0 0 1.5px var(--primary-fg); }
.t-chart-tip b { margin-left: auto; padding-left: 12px; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.t-donut { position: relative; flex: none; margin-inline: auto; }
.t-donut__ring { display: block; rotate: -90deg; }
.t-donut__ring circle { fill: none; stroke-linecap: round; }
.t-donut__ring .s1 { stroke: var(--series-1); }
.t-donut__ring .s2 { stroke: var(--series-2); }
.t-donut__ring .s3 { stroke: var(--series-3); }
.t-donut__mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.t-donut__mid b { font-weight: var(--fw-thin); line-height: 1; letter-spacing: -0.02em; }
.t-donut__mid span { margin-top: 6px; color: var(--muted); font-size: var(--fs-xs); }
.t-matrix { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.t-matrix .t-chart text { fill: var(--matrix-muted); }
.t-matrix .l0, .t-legend i.l0 { fill: var(--matrix-off); background: var(--matrix-off); }
.t-matrix .l1, .t-legend i.l1 { fill: color-mix(in srgb, var(--matrix-on) 40%, var(--matrix-off)); background: color-mix(in srgb, var(--matrix-on) 40%, var(--matrix-off)); }
.t-matrix .l2, .t-legend i.l2 { fill: color-mix(in srgb, var(--matrix-on) 70%, var(--matrix-off)); background: color-mix(in srgb, var(--matrix-on) 70%, var(--matrix-off)); }
.t-matrix .l3, .t-legend i.l3 { fill: var(--matrix-on); background: var(--matrix-on); }
/* ---------- table (Claude Code) on Claude Design's flat card ---------- */
.t-table-wrap { overflow-x: auto; margin-inline: calc(-1 * var(--sp-2)); padding-inline: var(--sp-2); }
.t-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0 4px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.t-table th {
padding: 8px 12px 14px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-regular); text-align: left; white-space: nowrap;
background: radial-gradient(circle at 1.5px 1.5px, var(--dotted) 1.2px, transparent 1.7px) left bottom / 7px 3px repeat-x;
}
.t-table td { padding: 10px 12px; vertical-align: middle; white-space: nowrap; transition: background-color var(--dur) var(--ease-out); }
.t-table td:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.t-table td:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.t-table :is(th, td).t-col-check { width: 44px; padding-right: 0; padding-left: 16px; }
.t-table :is(th, td).t-col-num { text-align: right; }
.t-table tbody tr:hover td { background: var(--surface-2); }
.t-table tbody tr.is-selected td { background: var(--butter); color: var(--butter-ink); }
.t-table tr.is-selected :is(.t-muted, .t-cell__sub) { color: var(--butter-ink); }
.t-table tr.is-selected :is(.t-badge--wait, .t-badge--auth) { background: var(--surface-raised); }
.t-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; }
.t-sort .t-icon { width: 14px; height: 14px; opacity: 0.55; transition: opacity var(--dur) var(--ease-out); }
th[aria-sort] .t-sort { color: var(--ink); }
th[aria-sort] .t-sort .t-icon { opacity: 1; }
.t-cell { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.t-cell__name { display: block; }
.t-cell__sub { display: block; color: var(--muted); font-size: var(--fs-xs); }
/* ---------- buttons: coal primary, soft default ---------- */
.t-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--ctl-h); padding: 0 20px;
border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); cursor: pointer;
font-size: var(--fs-sm); line-height: 1; text-decoration: none; white-space: nowrap;
transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), scale var(--dur) var(--ease-out);
}
.t-btn:where(:not(:disabled)):hover { background: color-mix(in srgb, var(--surface-2), var(--ink) 8%); }
.t-btn:where(:not(:disabled)):active { scale: 0.98; }
.t-btn--primary { background: var(--primary-bg); color: var(--primary-fg); }
.t-btn--primary:where(:not(:disabled)):hover { background: var(--primary-hover); }
.t-btn--butter { background: var(--butter); color: var(--butter-ink); } /* answers something that waits for you */
.t-btn--butter:where(:not(:disabled)):hover { background: var(--butter-strong); }
.t-btn--ghost { background: transparent; }
.t-btn--ghost:where(:not(:disabled)):hover { background: var(--hover); }
.t-btn--outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.t-btn--outline:where(:not(:disabled)):hover { background: var(--hover); }
.t-btn--sm { height: var(--ctl-h-sm); padding: 0 14px; font-size: var(--fs-xs); }
.t-btn--lg { height: var(--ctl-h-lg); padding: 0 26px; font-size: var(--fs-body); }
.t-btn--block { width: 100%; }
.t-btn:disabled, .t-iconbtn:disabled { opacity: 0.45; cursor: default; }
.t-btn[aria-busy="true"], .t-iconbtn[aria-busy="true"] { cursor: progress; opacity: 1; }
.t-btn[aria-busy="true"] .t-icon, .t-iconbtn[aria-busy="true"] .t-icon { display: none; }
.t-btn[aria-busy="true"]::before, .t-iconbtn[aria-busy="true"]::after, .t-spinner {
content: ""; display: inline-block; width: 15px; height: 15px; flex: none; border: 2px solid currentColor; border-right-color: transparent;
border-radius: 50%; animation: t-spin 0.8s linear infinite;
}
.t-spinner { border-color: var(--series-track); border-top-color: var(--ink); }
.t-iconbtn {
position: relative; display: inline-grid; place-items: center; flex: none; width: var(--ctl-h); height: var(--ctl-h); padding: 0;
border: 0; border-radius: 50%; background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-xs); cursor: pointer;
text-decoration: none; transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), scale var(--dur) var(--ease-out);
}
.t-iconbtn:where(:not(:disabled)):hover { background: var(--surface-2); }
.t-iconbtn:where(:not(:disabled)):active { scale: 0.94; }
.t-iconbtn--soft { background: var(--surface-2); box-shadow: none; }
.t-iconbtn--soft:where(:not(:disabled)):hover { background: color-mix(in srgb, var(--surface-2), var(--ink) 8%); }
.t-iconbtn--ghost { background: transparent; box-shadow: none; color: var(--muted); }
.t-iconbtn--ghost:where(:not(:disabled)):hover { background: var(--hover); color: var(--ink); }
.t-iconbtn--dark { background: var(--primary-bg); color: var(--primary-fg); box-shadow: none; }
.t-iconbtn--dark:where(:not(:disabled)):hover { background: var(--primary-hover); }
.t-iconbtn--sm { width: var(--ctl-h-sm); height: var(--ctl-h-sm); }
.t-iconbtn--lg { width: var(--ctl-h-lg); height: var(--ctl-h-lg); }
.t-iconbtn__dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--butter); box-shadow: 0 0 0 2px var(--surface-raised); }
.t-iconbtn > .t-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-shadow: 0 0 0 2px var(--surface-raised); }
/* Tooltip on hover and keyboard focus, from data-tip. ::before is taken, so ::after stays free for dots. */
[data-tip] { position: relative; }
[data-tip]::before {
content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); z-index: 20; translate: -50% -4px;
padding: 7px 12px; border-radius: var(--r-pill); background: var(--primary-bg); color: var(--primary-fg); box-shadow: var(--shadow-md);
font: var(--fs-xs)/1.2 var(--font-sans); letter-spacing: 0; white-space: nowrap; opacity: 0; pointer-events: none;
transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
}
[data-tip]:hover::before, [data-tip]:focus-visible::before { opacity: 1; translate: -50% 0; }
[data-tip-side="right"]::before { left: calc(100% + 10px); top: 50%; translate: 4px -50%; }
[data-tip-side="right"]:hover::before, [data-tip-side="right"]:focus-visible::before { translate: 0 -50%; }
/* Card tools sit on the right edge, so their tips open leftwards and don't stretch the page */
.t-card__tools [data-tip]::before { left: auto; right: 0; translate: 0 -4px; }
.t-card__tools [data-tip]:hover::before, .t-card__tools [data-tip]:focus-visible::before { translate: 0 0; }
@media (hover: none) { [data-tip]::before { display: none; } }
.t-tooltip {
display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: var(--r-pill);
background: var(--primary-bg); color: var(--primary-fg); box-shadow: var(--shadow-md); font-size: var(--fs-xs); white-space: nowrap;
}
/* ---------- search, chips, dropdown pill, menu ---------- */
.t-search {
display: flex; align-items: center; gap: 10px; height: var(--ctl-h); min-width: 0; padding: 0 6px 0 16px; border-radius: var(--r-pill);
background: var(--surface-raised); color: var(--muted); box-shadow: var(--shadow-xs); transition: box-shadow var(--dur) var(--ease-out);
}
.t-search:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.t-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: var(--fs-sm); }
.t-search input::placeholder { color: var(--faint); }
.t-kbd { padding: 3px 8px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--muted); font: var(--fs-xs)/1.4 var(--font-sans); white-space: nowrap; }
.t-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.t-chip, .t-select {
display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: var(--r-pill);
background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-xs); cursor: pointer;
font-size: var(--fs-xs); line-height: 1; text-decoration: none; white-space: nowrap;
transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.t-select { height: var(--ctl-h); padding: 0 12px 0 18px; font-size: var(--fs-sm); }
.t-chip:hover, .t-select:hover { background: var(--surface-2); }
.t-chip:is(.is-on, [aria-pressed="true"]) { background: var(--primary-bg); color: var(--primary-fg); }
:is(.t-chip, .t-select)[aria-expanded="true"] { box-shadow: 0 0 0 1.5px var(--ink); }
:is(.t-chip, .t-select) .t-icon { width: 14px; height: 14px; transition: rotate var(--dur) var(--ease-out); }
:is(.t-chip, .t-select)[aria-expanded="true"] .t-icon:last-child { rotate: 180deg; }
.t-menu-anchor { position: relative; display: inline-flex; }
.t-menu {
position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; display: grid; gap: 2px; min-width: 240px; padding: 6px;
border-radius: 20px; background: var(--surface-raised); box-shadow: var(--shadow-md);
}
.t-menu__item {
display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border: 0; border-radius: var(--r-pill);
background: transparent; color: var(--ink); cursor: pointer; font-size: var(--fs-sm); text-align: left; white-space: nowrap;
transition: background-color var(--dur) var(--ease-out);
}
.t-menu__item:hover { background: var(--hover); }
.t-menu__item[aria-checked="true"] { background: var(--surface-2); }
.t-menu__item .t-muted { margin-left: auto; font-size: var(--fs-xs); }
.t-menu__sep { height: 1px; margin: 4px 8px; background: var(--hairline); }
/* ---------- checkbox (Claude Code): also half-filled when only some rows are chosen ---------- */
.t-check {
appearance: none; width: 18px; height: 18px; flex: none; display: inline-grid; place-content: center; margin: 0;
border-radius: var(--r-xs); background: var(--surface-raised); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent);
cursor: pointer; transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.t-check::before {
content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid var(--primary-fg); border-width: 0 2px 2px 0;
rotate: 45deg; scale: 0; transition: scale var(--dur) var(--ease-out);
}
.t-check:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.t-check:checked, .t-check:indeterminate { background: var(--primary-bg); box-shadow: none; }
.t-check:checked::before { scale: 1; }
.t-check:indeterminate::before { width: 8px; height: 0; margin: 0; border-width: 0 0 2px; rotate: 0deg; scale: 1; }
.t-check:disabled { opacity: 0.45; cursor: default; }
.t-check-label { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); cursor: pointer; }
/* ---------- status pills: butter means it waits for you ---------- */
.t-badge {
display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px 0 10px; border-radius: var(--r-pill);
background: var(--st-idle-bg); color: var(--st-idle-fg); font-size: var(--fs-xs); white-space: nowrap;
}
.t-badge::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--st-idle-dot); }
.t-badge--run { background: var(--st-run-bg); color: var(--st-run-fg); }
.t-badge--run::before { background: var(--st-run-dot); animation: t-pulse var(--dur-loop) var(--ease-in-out) infinite; }
.t-badge--wait { background: var(--st-wait-bg); color: var(--st-wait-fg); }
.t-badge--wait::before { background: var(--st-wait-dot); }
.t-badge--ok { background: var(--st-ok-bg); color: var(--st-ok-fg); }
.t-badge--ok::before { background: var(--st-ok-dot); }
.t-badge--fail { background: var(--st-fail-bg); color: var(--st-fail-fg); }
.t-badge--fail::before { background: var(--st-fail-dot); }
.t-badge--auth { background: transparent; color: var(--st-fail-fg); box-shadow: inset 0 0 0 1px var(--st-fail-dot); } /* an error you fix by logging in */
.t-badge--auth::before { background: var(--st-fail-dot); }
/* ---------- health chips, tags, avatar ---------- */
.t-health {
display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--r-pill);
background: var(--surface-raised); box-shadow: var(--shadow-xs); color: var(--muted); font-size: var(--fs-xs); white-space: nowrap;
}
.t-health::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--st-ok-dot); }
.t-health strong { color: var(--ink); font-weight: var(--fw-medium); }
.t-health--wait::before { background: var(--butter); box-shadow: 0 0 0 1px var(--butter-text); }
.t-health--wait strong { color: var(--butter-text); }
.t-health--fail::before { background: var(--st-fail-dot); }
.t-health--fail strong { color: var(--st-fail-fg); }
.t-health--off::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }
.t-health--offline { background: transparent; box-shadow: none; outline: 1px dashed var(--dotted); outline-offset: -1px; }
.t-health--offline::before { background: var(--st-fail-dot); }
.t-tag {
display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--r-xs);
background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); white-space: nowrap;
}
.t-tag--mono { color: var(--ink); font-family: var(--font-mono); font-size: 11.5px; }
/* Connector (WP8): merkelogo fra logos.svg eller bokstavmerke. Fakta og ikke en knapp, så liten radius. Kontoen står i data-tip */
.t-conns { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.t-conn { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1; }
.t-conn svg { width: 15px; height: 15px; fill: currentColor; }
.t-tag--t1 { color: var(--t1); }
.t-tag--t2 { color: var(--t2); }
.t-tag--t3 { color: var(--t3); }
.t-tag--off { background: transparent; box-shadow: inset 0 0 0 1px var(--dotted); text-decoration: line-through; }
.t-avatar {
width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%;
background: var(--primary-bg); color: var(--primary-fg); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0.02em;
}
.t-avatar--emoji { background: var(--surface-2); font-size: 18px; letter-spacing: 0; }
.t-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.t-avatar--sm.t-avatar--emoji { font-size: 15px; }
.t-avatar-pill {
display: inline-flex; align-items: center; gap: 8px; height: var(--ctl-h); padding: 0 12px 0 4px; border: 0; border-radius: var(--r-pill);
background: var(--surface-raised); box-shadow: var(--shadow-xs); color: var(--ink); cursor: pointer; font-size: var(--fs-sm);
transition: background-color var(--dur) var(--ease-out);
}
.t-avatar-pill:hover { background: var(--surface-2); }
.t-avatar-pill .t-avatar { width: 32px; height: 32px; }
/* Agent figures (agents/NN.webp, design/agents/README.md). scripts/agent_avatar.py puts every figure on the same
400 x 560 canvas with the head centred, so one crop fits them all: the head is the square x 60-340, y 28-308. */
.t-avatar--agent { position: relative; background: var(--surface-2); }
.t-avatar--agent img { position: absolute; top: -10%; left: -21.43%; width: 142.86%; max-width: none; height: auto; }
.t-agent {
display: grid; justify-items: center; align-content: start; gap: var(--sp-3); min-width: 0; margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-5);
border-radius: var(--r-card); background: radial-gradient(56% 44% at 50% 40%, var(--surface-raised), transparent), var(--surface); text-align: center;
}
.t-agent img { display: block; width: 100%; max-width: 168px; height: auto; }
.t-agent figcaption { display: grid; justify-items: center; gap: 4px; }
.t-agent figcaption > span:not(.t-tag) { color: var(--muted); font-size: var(--fs-sm); }
/* ---------- task rows with subtasks, job rows with a streak ---------- */
.t-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.t-row {
display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3) var(--sp-4);
min-height: 60px; padding: 10px 14px 10px 20px; border-radius: var(--r-tile); background: var(--surface);
transition: background-color var(--dur) var(--ease-out);
}
.t-row:hover { background: var(--surface-raised); }
.t-row__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
.t-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: var(--fs-xs); }
.t-row__meta > * + *::before { content: "·"; margin-right: 10px; }
.t-row__act { display: flex; justify-content: flex-end; min-width: 96px; }
.t-row--sub { grid-template-columns: auto minmax(0, 1fr) auto auto; min-height: 50px; margin-left: 28px; padding-left: 10px; background: transparent; }
.t-row--sub::before { content: ""; width: 14px; height: 14px; margin-top: -12px; border-left: 1.5px solid var(--dotted); border-bottom: 1.5px solid var(--dotted); border-bottom-left-radius: 8px; }
.t-row--sub:hover { background: var(--hover); }
.t-row--sub .t-row__title { font-size: var(--fs-sm); }
.t-job {
display: grid; grid-template-columns: 36px minmax(0, 1.5fr) minmax(0, 1fr) 90px 136px 116px; align-items: center; gap: var(--sp-3) var(--sp-4);
padding: 10px 14px 10px 12px; border-radius: var(--r-tile); background: var(--surface); transition: background-color var(--dur) var(--ease-out);
}
.t-job:hover { background: var(--surface-raised); }
.t-job__name, .t-job__last { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
.t-job__name > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-job__sched, .t-job__last > :first-child { color: var(--muted); font-size: var(--fs-xs); }
.t-job__last > :last-child { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.t-job > :last-child { justify-self: end; }
.t-streak { display: inline-flex; align-items: center; gap: 3px; }
.t-streak > i { width: 6px; height: 18px; border-radius: 3px; background: var(--st-ok-dot); }
.t-streak > i.fail { background: var(--st-fail-dot); }
.t-streak > i.skip { background: var(--series-track); }
@media (max-width: 760px) {
.t-row { grid-template-columns: minmax(0, 1fr) auto; padding-left: 16px; }
.t-row__act { grid-column: 1 / -1; justify-content: flex-start; min-width: 0; }
.t-row__act:empty { display: none; }
.t-row--sub { grid-template-columns: auto minmax(0, 1fr) auto; margin-left: 12px; }
.t-row--sub .t-row__act { grid-column: 2 / -1; }
.t-job { grid-template-columns: 36px minmax(0, 1fr) auto; }
.t-job__last { display: none; }
.t-job .t-streak { grid-column: 2; grid-row: 2; }
.t-job > :last-child { grid-column: 3; grid-row: 2; justify-self: end; }
}
/* ---------- command field (composer): floats, so it has a shadow ---------- */
.t-composer {
display: flex; align-items: flex-end; gap: 4px; padding: 8px; border-radius: 28px; background: var(--surface-raised);
box-shadow: var(--shadow-md); transition: box-shadow var(--dur) var(--ease-out);
}
.t-composer:focus-within { box-shadow: var(--shadow-md), 0 0 0 2px color-mix(in srgb, var(--ink) 22%, transparent); }
.t-composer textarea {
flex: 1; min-width: 0; min-height: 40px; max-height: 200px; padding: 10px 6px; border: 0; outline: 0; resize: none;
background: transparent; color: var(--ink); font-size: var(--fs-body); line-height: 1.45; field-sizing: content;
}
.t-composer textarea::placeholder { color: var(--faint); }
.t-composer.is-error { box-shadow: var(--shadow-md), 0 0 0 1.5px var(--st-fail-dot); }
.t-model-pick {
display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 8px 0 12px; border: 0; border-radius: var(--r-pill);
background: transparent; color: var(--muted); cursor: pointer; font-size: var(--fs-sm); white-space: nowrap;
transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.t-model-pick:hover { background: var(--hover); color: var(--ink); }
.t-model-pick .t-icon { width: 16px; height: 16px; }
.t-rec-time { display: none; align-self: center; padding-inline: 4px; color: var(--butter-text); font: var(--fs-sm) var(--font-mono); font-variant-numeric: tabular-nums; }
.t-composer.is-recording .t-rec-time { display: inline; }
.t-composer.is-recording .t-mic { background: var(--butter); color: var(--butter-ink); animation: t-ring var(--dur-loop) ease-out infinite; }
.t-composer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 12px; padding-inline: 8px; color: var(--muted); font-size: var(--fs-sm); }
.t-field-error { display: flex; align-items: center; gap: 6px; margin: 8px 16px 0; color: var(--st-fail-fg); font-size: var(--fs-sm); }
.t-field-error .t-icon { width: 16px; height: 16px; }
/* ---------- loading, empty, error, alerts ---------- */
.t-skel {
display: block; height: 12px; border-radius: var(--r-pill);
background: linear-gradient(90deg, var(--surface-2) 35%, color-mix(in srgb, var(--surface-2), var(--surface) 75%) 50%, var(--surface-2) 65%) 0 0 / 300% 100%;
animation: t-shimmer var(--dur-loop) linear infinite;
}
.t-skel--block { height: 56px; border-radius: var(--r-tile); }
.t-skel--round { width: 28px; height: 28px; flex: none; border-radius: 50%; }
.t-line-loader { position: relative; height: 3px; overflow: hidden; border-radius: var(--r-pill); background: var(--series-track); }
.t-line-loader::after {
content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit;
background: linear-gradient(90deg, transparent, var(--ink), transparent); animation: t-slide var(--dur-loop) var(--ease-in-out) infinite;
}
.t-shimmer-text {
background: linear-gradient(90deg, var(--muted) 40%, var(--ink) 50%, var(--muted) 60%) 0 0 / 300% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent; animation: t-shimmer var(--dur-loop) linear infinite;
}
.t-thinking { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-sm); }
.t-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: var(--sp-8) var(--sp-5); text-align: center; }
.t-state__icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 6px; border-radius: 50%; background: var(--surface-2); color: var(--ink); }
.t-state__title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-light); line-height: var(--lh-snug); }
.t-state__text { max-width: 40ch; margin: 0 0 6px; color: var(--muted); font-size: var(--fs-sm); text-wrap: pretty; }
.t-state__skel { display: grid; justify-items: center; gap: 8px; width: 100%; max-width: 280px; margin-top: 4px; }
.t-state--error .t-state__icon { background: var(--st-fail-bg); color: var(--st-fail-fg); }
.t-alert { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-tile); background: var(--surface-2); font-size: var(--fs-sm); }
.t-alert > .t-icon { margin-top: 1px; color: var(--muted); }
.t-alert__body { flex: 1 1 220px; display: grid; gap: 2px; min-width: 0; }
.t-alert__title { font-weight: var(--fw-medium); }
.t-alert__text { color: var(--muted); }
.t-alert__body > .t-btn { justify-self: start; margin-top: var(--sp-2); } /* one action under the text */
.t-alert--wait { background: var(--butter-soft); }
.t-alert--wait > .t-icon { color: var(--butter-text); }
.t-alert--fail { background: var(--st-fail-bg); }
.t-alert--fail > .t-icon, .t-alert--fail .t-alert__title { color: var(--st-fail-fg); }
/* ---------- the sun's day: phases as a strip, each part painted by its own phase ---------- */
.t-sunstrip { display: flex; height: 44px; overflow: hidden; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--hairline); }
.t-sunstrip > [data-phase] { position: relative; min-width: 2px; border: 0; padding: 0; background: var(--sky); cursor: pointer; transition: filter var(--dur) var(--ease-out); }
.t-sunstrip > [data-phase]:hover { filter: brightness(0.96) saturate(1.2); }
.t-sunstrip__now { position: absolute; top: 6px; bottom: 6px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); pointer-events: none; }
/* ---------- labelled field: dialogs and the solution plan's question / context forms ---------- */
.t-field { display: grid; gap: 6px; }
.t-field__label { color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.t-field__hint { color: var(--muted); font-size: var(--fs-xs); }
.t-field__control {
width: 100%; min-height: var(--ctl-h); padding: 10px 14px; border: 0; border-radius: var(--r-tile);
background: var(--surface-2); color: var(--ink); font: var(--fw-regular) var(--fs-sm)/1.45 var(--font-sans);
transition: box-shadow var(--dur) var(--ease-out);
}
textarea.t-field__control { min-height: 96px; resize: vertical; }
.t-field__control::placeholder { color: var(--faint); }
.t-field__control:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--ink); }
.t-field__control:disabled { opacity: 0.5; cursor: default; }
.t-field--error .t-field__control { box-shadow: 0 0 0 1.5px var(--st-fail-dot); }
/* ---------- dialog: a native