/* tasteskill / app.css (design-taste-frontend v2, MIT), cut down to the dashboard fragments the site shows and
   scoped to [data-ui]. Style dealt: data-terminal (dark, cards darker than the ground, every selection one 1px
   mint line), with the site's palette and type kept. */

[data-ui] {
  --ground: light-dark(#fbfbfb, #101010);
  --card: light-dark(#ffffff, #0a0a0a);
  --raised: light-dark(#efefef, #1c1c1c);
  --border: light-dark(#d4d4d4, #2a2a2a);
  --rule: light-dark(#e4e4e4, #222222);
  --control: light-dark(#b8b8b8, #3d3d3d);
  --text: light-dark(#1a1a1a, #f2f2f2);
  --muted: light-dark(#575757, #a6a6a6);
  --faint: light-dark(#66686d, #8f9196);
  --line: light-dark(#14915a, #a1ffcb);
  --negative: light-dark(#c0263f, #ff8a98);
  --pill-positive-bg: light-dark(#d5f5e4, #18342b); --pill-positive-ink: light-dark(#0b6b40, #a1ffcb);
  --pill-negative-bg: light-dark(#fbe0e4, #3d1f26); --pill-negative-ink: light-dark(#a11d33, #ff9fab);
  --pill-neutral-bg: light-dark(#e6e6e6, #333333); --pill-neutral-ink: light-dark(#2a2a2a, #e8e8e8);
  --primary: light-dark(#1a1a1a, #f2f2f2); --primary-ink: light-dark(#ffffff, #1a1a1a);
  --radius-chip: 4px;
  --radius-control: 6px;
  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  background: var(--ground);
  color: var(--text);
  font: 400 14px/20px var(--font);
  letter-spacing: 0;
}
[data-ui] :where(p, ul, ol, dl, dd, figure, h3, h4) { margin: 0; }
[data-ui] :where(ul, ol) { padding: 0; list-style: none; }
[data-ui] :where(code, samp) { font-family: var(--font-code); font-size: 13px; letter-spacing: 0; }
[data-ui] .m { color: var(--muted); }
[data-ui] .f { color: var(--faint); }
[data-ui] .num { text-align: right; font-variant-numeric: tabular-nums; }

/* panel title row: noun title, the count or note in grey */
[data-ui] .ui-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; }
[data-ui] .ui-head h3, [data-ui] .ui-title { font: 600 14px/20px var(--font); }
[data-ui] .ui-head .f { font-size: 12px; }

/* tables: 12px grey sentence-case headers, 1px row rules, numbers right */
[data-ui] table { width: 100%; border-collapse: collapse; }
[data-ui] th { height: 32px; padding: 0 12px; text-align: left; font: 400 12px/16px var(--font); color: var(--faint); border-bottom: 1px solid var(--border); white-space: nowrap; }
[data-ui] td { padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: baseline; white-space: nowrap; }
[data-ui] tbody tr:last-child td { border-bottom: 0; }
[data-ui] th.num, [data-ui] td.num { text-align: right; }
[data-ui] td .sub { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }
/* the selected row: the one 1px mint line, on the row's left edge */
[data-ui] tr.is-selected td { background: var(--raised); }
[data-ui] tr.is-selected td:first-child { box-shadow: inset 1px 0 0 var(--line); }

/* status: an 8px dot and the word; red only on failed */
[data-ui] .st { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
[data-ui] .st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
[data-ui] .st--running::before { background: var(--text); }
[data-ui] .st--sleeping::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
[data-ui] .st--completed::before { background: var(--line); }
[data-ui] .st--failed { color: var(--negative); }
[data-ui] .st--failed::before { background: var(--negative); }

/* pills: a pale pair of one hue, never squeezed */
[data-ui] .pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--radius-chip); font: 500 12px/1 var(--font); background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); white-space: nowrap; flex: none; }
[data-ui] .pill.pos { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
[data-ui] .pill.neg { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
[data-ui] .redact { padding: 1px 5px; border-radius: 3px; background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); }

/* the run timeline: one spine, a dot per event, the sleep dashed */
[data-ui] .tl { position: relative; display: grid; gap: 0; }
[data-ui] .tl li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; padding: 0 0 7px; }
[data-ui] .tl li::before { content: ""; grid-row: 1 / span 2; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--text); }
[data-ui] .tl li::after { content: ""; position: absolute; left: 3px; top: 15px; bottom: -2px; border-left: 1px solid var(--control); }
[data-ui] .tl li:last-child::after { content: none; }
[data-ui] .tl li.sleep::after { border-left-style: dashed; }
[data-ui] .tl li.sleep::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text); }
[data-ui] .tl li.end::before { background: var(--line); }
[data-ui] .tl .ev { font-weight: 600; }
[data-ui] .tl .t { grid-column: 2; color: var(--faint); font-size: 12px; line-height: 16px; }
[data-ui] .tl .d { grid-column: 3; grid-row: 1; color: var(--muted); }

/* the horizontal strip of the same timeline */
[data-ui] .strip { display: grid; grid-template-columns: var(--cols); align-items: end; column-gap: 2px; }
[data-ui] .strip .seg { display: grid; gap: 6px; min-width: 0; }
[data-ui] .strip .bar { height: 6px; background: var(--control); }
[data-ui] .strip .seg.step .bar { background: var(--text); }
[data-ui] .strip .seg.sleep .bar { background: transparent; border-top: 2px dashed var(--muted); height: 2px; margin-top: 4px; }
[data-ui] .strip .seg.queue .bar { background: var(--faint); }
[data-ui] .strip .lab { font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ui] .strip .lab b { display: block; color: var(--text); font-weight: 600; }

/* outbound requests */
[data-ui] .req { font-weight: 600; }
[data-ui] .via { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }
[data-ui] .via b { color: var(--text); font-weight: 500; }
[data-ui] tr.bad .code-cell, [data-ui] .bad-text { color: var(--negative); }

/* logs */
[data-ui] .logs { display: grid; gap: 4px; padding: 10px 16px 14px; }
[data-ui] .logs > div { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
[data-ui] .logs .lv { color: var(--faint); font-size: 12px; }
[data-ui] .logs samp { white-space: pre-wrap; overflow-wrap: anywhere; }

/* controls inside fragments */
[data-ui] .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-control); border: 1px solid var(--control); background: transparent; color: var(--text); font: 500 13px/1 var(--font); white-space: nowrap; cursor: pointer; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
[data-ui] .btn.primary { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
[data-ui] .btn:disabled { cursor: not-allowed; background: var(--raised); color: var(--muted); border-color: var(--border); }
[data-ui] .btn:not(:disabled):active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  [data-ui] .btn:not(:disabled):not(.primary):hover { background: var(--raised); }
}
[data-ui] .perm { font-size: 12px; color: var(--faint); }
[data-ui] .tabs { display: flex; gap: 20px; padding: 0 16px; border-bottom: 1px solid var(--border); }
[data-ui] .tabs span { position: relative; padding: 10px 0; color: var(--muted); }
[data-ui] .tabs span[aria-current] { color: var(--text); }
[data-ui] .tabs span[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; border-bottom: 1px solid var(--line); }
[data-ui] .card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; }
[data-ui] .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; }
[data-ui] .kv dt { color: var(--faint); font-size: 12px; }
[data-ui] .kv dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-ui] .meter { height: 4px; background: var(--raised); }
[data-ui] .meter i { display: block; height: 100%; background: var(--text); }