/* Copyright (c) 2026 Brian Willard
   The admin console's additions to the artist portal's style.css, which the web
   phase copies in beside this file - one set of tokens for both sites. */

:root {
  --ok:#2C7A52; --ok-wash:#E7F2EB; --warn:#9A6A16; --warn-wash:#F7EFDC;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ok:#6FC89A; --ok-wash:#142A1D; --warn:#DCAE5A; --warn-wash:#2A2113; }
}
:root[data-theme="dark"] { --ok:#6FC89A; --ok-wash:#142A1D; --warn:#DCAE5A; --warn-wash:#2A2113; }

.lede { color:var(--ink-soft); max-width:34rem; margin:0 0 1.5rem; }

/* The console reads top-down; the artist page centres one card. */
/* The full window, not the artist page's centred column: these are tables, and a
   fleet or a timeline wants every column it can get. Prose inside keeps its own
   measure (section notes cap at 52rem), so only the data widens. */
main.console {
  align-content:start; gap:1.75rem; padding-top:clamp(1.5rem,4vw,2.5rem);
  max-width:none; padding-left:clamp(1.25rem,3vw,3rem); padding-right:clamp(1.25rem,3vw,3rem);
}
main.console h1 { font-size:clamp(2rem,6vw,3.25rem); }

.tabs { display:flex; gap:1.4rem; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line); }
.tabs::-webkit-scrollbar { display:none; }
.tabs a {
  font-size:.9rem; font-weight:500; color:var(--muted); text-decoration:none; white-space:nowrap;
  padding:.8rem 0; border-bottom:2px solid transparent;
}
.tabs a:hover { color:var(--ink); }
.tabs a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--accent); }

.panelhead { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.panelhead .when { font-size:.8rem; color:var(--muted); display:flex; gap:.9rem; align-items:center; }
.panelhead .when button { font-size:.85rem; padding:.45rem .9rem; }

section.block { display:grid; gap:.75rem; }
section.block h2 { margin:0; font-size:1rem; font-weight:600; }
section.block > p.note { margin:0; color:var(--muted); font-size:.85rem; max-width:52rem; }

.table { overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
table { border-collapse:collapse; width:100%; font-size:.86rem; font-variant-numeric:tabular-nums; }
th {
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:500; text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
td { padding:.6rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:0; }
td.num, th.num { text-align:right; white-space:nowrap; }
td .sub { display:block; color:var(--muted); font-size:.78rem; }
.mono { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.8rem; }
.dim { color:var(--muted); }

.pill {
  display:inline-flex; align-items:center; gap:.35rem; border-radius:999px; padding:.08rem .55rem;
  font-size:.75rem; font-weight:500; white-space:nowrap; background:var(--state-wash); color:var(--ink-soft);
}
.pill::before { content:""; width:.45em; height:.45em; border-radius:50%; background:currentColor; }
.pill.plain::before { display:none; }
.pill.ok   { background:var(--ok-wash);   color:var(--ok); }
.pill.warn { background:var(--warn-wash); color:var(--warn); }
.pill.bad  { background:var(--bad-wash);  color:var(--bad); }

.errors { display:grid; gap:.4rem; }
.errors .msg { font-size:.85rem; }

/* Quota meter: used against the limit, one hue; warn past 80%. */
.meter { display:grid; gap:.3rem; min-width:10rem; }
.meter .track { height:6px; border-radius:3px; background:var(--state-wash); overflow:hidden; }
.meter .fill { height:100%; border-radius:3px; background:var(--accent); }
.meter.warn .fill { background:var(--warn); }
.meter .val { font-size:.8rem; color:var(--ink-soft); }

.figures.wide { max-width:none; }

/* Daily spend: one series, so no legend - the heading names it. */
.bars { display:flex; align-items:flex-end; gap:2px; height:120px; padding:.75rem .9rem 0; position:relative; }
.bars .b { flex:1; min-width:4px; background:var(--accent); border-radius:4px 4px 0 0; position:relative; }
.bars .b:hover { filter:brightness(1.2); }
.bars .b:hover::after {
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--ground); font-size:.75rem; padding:.25rem .5rem; border-radius:6px;
  white-space:nowrap; pointer-events:none; z-index:2;
}
.bars-axis { display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted); padding:.35rem .9rem .75rem; }

/* Config: the file as a tree, each value with its note beside it. */
.cfg { display:grid; gap:0; }
.cfg .row { display:grid; grid-template-columns:minmax(10rem,16rem) 1fr; gap:.4rem 1.2rem; padding:.55rem .9rem; border-bottom:1px solid var(--line); }
.cfg .row:last-child { border-bottom:0; }
.cfg .key { font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--ink-soft); word-break:break-all; }
.cfg .val { font-size:.86rem; word-break:break-word; }
.cfg .val .note { display:block; color:var(--muted); font-size:.8rem; margin-top:.25rem; max-width:52rem; }
.cfg .head { padding:.7rem .9rem .3rem; font-weight:600; font-size:.9rem; border-bottom:1px solid var(--line); background:var(--ground); }
@media (max-width:40rem) { .cfg .row { grid-template-columns:1fr; } }

.controls { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.controls button.ghost { font-size:.82rem; padding:.4rem .8rem; }
.controls button[aria-pressed="true"] { border-color:var(--accent); color:var(--ink); }
input.filter {
  font:inherit; font-size:.85rem; padding:.45rem .7rem; border-radius:8px; border:1px solid var(--line-firm);
  background:var(--surface); color:var(--ink); min-width:12rem;
}

/* A grid item's min-width is auto, so a wide table would stretch its column -
   and the page - instead of scrolling inside .table. Pin every level to the
   viewport so only the table scrolls. */
main.console, #appView, #panel { grid-template-columns:minmax(0,1fr); }
main.console > *, #appView > *, #panel > *, section.block > * { min-width:0; }
@media (max-width:40rem) {
  .who #whoName { display:none; }
  .panelhead .when { width:100%; justify-content:space-between; }
}

/* The bar and footer share the console's gutter, so the mark, the tabs and every
   table start on one line. admin.css is only ever loaded by the admin site. */
.bar, footer { padding-left:clamp(1.25rem,3vw,3rem); padding-right:clamp(1.25rem,3vw,3rem); }