/* page.css — the page under the header. Shared structure; every look-and-feel
 * difference between the three options is a knob set in option-*.css, so the
 * comparison is about feel and not about who wrote nicer markup.
 *
 * No hex codes. Status tints are color-mix() over a token, which keeps the
 * validated palette as the only source of hue.
 */

body { background: var(--surface); color: var(--ink); padding-bottom: 88px; }

.app-main { padding: var(--page-pad-y) var(--page-pad-x) var(--s-12); }
.page-inner { max-width: var(--page-max); margin: 0 auto; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between;
             gap: var(--s-6); margin-bottom: var(--s-6); }
.page-title { font-size: var(--title-size); font-weight: var(--title-weight);
              line-height: 1.15; font-family: var(--font-display); }
.page-sub { margin-top: 2px; font-size: var(--t-14); color: var(--ink-muted); }
.head-actions { display: flex; gap: var(--s-2); flex: none; }

.btn { display: inline-flex; align-items: center; gap: 6px;
       height: var(--btn-h); padding: 0 var(--btn-pad); border-radius: var(--radius-sm);
       border: 1px solid var(--border); background: var(--surface-raised);
       box-shadow: var(--elev);
       font-size: var(--t-13); font-weight: 550; line-height: 1;
       color: var(--ink); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--surface-sunken); }
.btn-primary { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg);
               color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }

/* Cards reflow 4 -> 3 -> 2 -> 1 and never go below a readable width. The live
   app's grid-4 divides by four at any size, then drops straight to one. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
            gap: var(--panel-gap); margin-bottom: var(--s-6); }

.card { position: relative; background: var(--surface-raised);
        border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--elev); }

.stat { padding: var(--card-pad); }
.stat-label { font-size: var(--t-12); font-weight: 550; color: var(--ink-muted);
              margin-bottom: var(--s-3); }
.stat-value { font-size: var(--stat-size); font-weight: var(--stat-weight);
              line-height: 1.08; letter-spacing: -0.026em;
              font-family: var(--font-display); }
.stat-value small { font-size: .58em; font-weight: 500; color: var(--ink-muted); }
.stat-foot { margin-top: 6px; font-size: var(--t-12); color: var(--ink-muted); }
.delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--good); }
.delta.down { color: var(--critical); }

.cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        gap: var(--panel-gap); align-items: start; }
/* The right column is ONE grid item holding two panels — two items would
   auto-place the second into column 1, under the table. */
.col-side { display: flex; flex-direction: column; gap: var(--panel-gap); min-width: 0; }

.panel { overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between;
              gap: var(--s-4); padding: var(--s-4) var(--card-pad-x);
              border-bottom: var(--panel-rule); }
.panel-title { font-size: var(--panel-title-size); font-weight: 600;
               letter-spacing: -0.011em; }
.panel-link { font-size: var(--t-13); font-weight: 500; color: var(--link-ink);
              text-decoration: none; }
.panel-link:hover { color: var(--ink); }
.panel-body { padding: var(--s-4) var(--card-pad-x) var(--s-5); }

table { width: 100%; border-collapse: collapse; }
thead th { padding: 10px var(--card-pad-x); text-align: left;
           font-size: var(--t-11); font-weight: 600;
           text-transform: uppercase; letter-spacing: .07em; color: var(--ink-muted);
           white-space: nowrap; background: var(--surface-sunken);
           border-bottom: 1px solid var(--border); }
/* One row height, one baseline. A cell that wraps to two lines breaks the
   rhythm of every row around it, so nothing wraps — long text ellipses. */
tbody td { padding: var(--row-pad) var(--card-pad-x); font-size: var(--cell-size);
           color: var(--ink-secondary); border-bottom: 1px solid var(--border);
           vertical-align: middle; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-sunken); }
td.strong { color: var(--ink); font-weight: 550; max-width: 300px; }
td.strong .cell-2 > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.num, th.num { text-align: right; font-family: var(--font-num);
                 font-size: var(--t-12); font-weight: 500; }
.cell-2 { display: flex; flex-direction: column; gap: 1px; }
.cell-sub { font-size: var(--t-12); color: var(--ink-muted); }

.pill { display: inline-flex; align-items: center; gap: 5px;
        height: 21px; padding: 0 9px; border-radius: 999px;
        font-size: var(--t-11); font-weight: 600; line-height: 1; white-space: nowrap; }
.pill::before { content: ''; width: 5px; height: 5px; border-radius: 999px;
                background: currentColor; flex: none; }
.pill-good { color: var(--good);
             background: color-mix(in oklab, var(--good) 13%, var(--surface-raised)); }
.pill-warn { color: var(--warning);
             background: color-mix(in oklab, var(--warning) 16%, var(--surface-raised)); }
.pill-bad  { color: var(--critical);
             background: color-mix(in oklab, var(--critical) 12%, var(--surface-raised)); }
.pill-idle { color: var(--ink-muted); background: var(--surface-sunken); }

.feed li { display: flex; gap: var(--s-3); padding: var(--row-pad) 0;
           border-bottom: 1px solid var(--border); }
.feed li:last-child { border-bottom: 0; padding-bottom: 0; }
.feed li:first-child { padding-top: 0; }
.feed-dot { width: 7px; height: 7px; border-radius: 999px; flex: none;
            margin-top: 7px; background: var(--ink-muted); }
.feed-dot.ok { background: var(--good); }
.feed-dot.err { background: var(--critical); }
/* The two lines are spans, so they need an explicit column — inline children
   butt straight up against each other and the words run together, which is the
   exact defect this whole exercise is about. */
.feed-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.feed-title, .feed-meta { display: block; }
.feed-title { font-size: var(--cell-size); font-weight: 550; color: var(--ink); }
.feed-meta { font-size: var(--t-12); color: var(--ink-muted); margin-top: 1px; }
.feed-time { font-family: var(--font-num); font-size: var(--t-11);
             color: var(--ink-muted); flex: none; padding-top: 2px; }

.bars li { display: grid; grid-template-columns: 104px minmax(0,1fr) 62px;
           align-items: center; gap: 10px; padding: 7px 0; }
.bar-name { font-size: var(--t-12); color: var(--ink-secondary);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 6px; border-radius: 999px; background: var(--surface-sunken); }
.bar-fill { display: block; height: 100%; border-radius: 999px;
            background: var(--brand-orange); opacity: .85; }
.bar-num { font-family: var(--font-num); font-size: var(--t-11); color: var(--ink-muted);
           text-align: right; font-variant-numeric: tabular-nums; }

/* ── the behaviours strip ────────────────────────────────────────────────── */

.behave { margin-top: var(--s-12); }
.behave-lede { max-width: 70ch; margin-bottom: var(--s-6); }
.behave-h { font-size: var(--t-20); font-weight: 620; font-family: var(--font-display);
            letter-spacing: -.015em; }
.behave-p { margin-top: 6px; font-size: var(--t-14); color: var(--ink-secondary);
            line-height: 1.6; }

.spec { margin-bottom: var(--s-8); }
.spec-label { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-3); }
.spec-n { font-family: var(--font-num); font-size: var(--t-11); color: var(--ink-muted); }
.spec-t { font-size: var(--t-14); font-weight: 600; }
.spec-d { font-size: var(--t-13); color: var(--ink-muted); }
.spec-frame { border: 1px solid var(--border); border-radius: var(--radius);
              overflow: hidden; background: var(--surface-sunken); }
.spec-frame.is-tall { min-height: 430px; }   /* Admin is ten items — do not clip it */
.spec-phone { width: 390px; max-width: 100%; margin: 0 auto; }
.spec-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
            gap: var(--panel-gap); }

@media (max-width: 1080px) { .cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px)  { .app-main { padding: var(--s-5) var(--s-4) var(--s-12); } }