/* ============================================================================
   ljlr-skin-ljlr.css — the LJLR skin · v0.1.0 · 2026-10-13 · Owner: JW Dimock
   JW, 2026-10-13: "let's make it skinnable and build a 'TrueNAS' skin and
   keep the BDAW Console skin as well - call this LJLR Skin and make it the
   default - light and dark modes please".

   Loaded AFTER ljlr.css (NEST rc.52, ljlr.look). ljlr.css is unchanged - it is
   the BDAW Console skin and the structure; this file restyles the same closed
   set of classes and adds none. A storage-appliance console: a slate ground,
   cards with soft corners, one blue, sentence case in the face everyone
   reads (IBM Plex Sans), mono only where the content is code - a hostname,
   a version, a hash. No brackets, no frame, no caps labels.

   Modes: <html data-mode="dark|light|system">. Dark is :root; light is
   html[data-mode="light"], and the same values under prefers-color-scheme
   for html[data-mode="system"]. Every color below is a token; the
   components read tokens, so a mode is a token block and nothing else.

   THE ACCENT RULE holds: blue is what you can act on or where you are.
   STATUS is the traffic light and is not this skin's: the hues are fixed
   (green good · yellow needs you · red broken · gray off); light mode sets
   their lightness for a white ground, never their hue.

   Contrast (WCAG 2.2): body and muted ink 4.5:1 or more on every surface;
   white on the filled blue 5:1 or more, both modes.
   ========================================================================= */

/* == 1 · TOKENS · dark ===================================================== */
:root {
  color-scheme: dark;
  --dim: 1;  --glow-k: 0;

  --c-bg:        #16191D;   /* the ground */
  --c-surface:   #1F2328;   /* a card */
  --c-surface-2: #262B31;   /* raised, hover */
  --c-surface-3: #2F353C;   /* a track, a well */

  --c-ink:   #E8EAED;       /* content */
  --c-ink-2: #BCC3CA;       /* body */
  --c-ink-3: #8F98A2;       /* muted - 5.2:1 on a card */
  --c-ink-on-accent: #FFFFFF;

  --c-accent:       #3AA8E8;   /* links, where you are - 5.9:1 on a card */
  --c-accent-hover: #74C3F0;
  --c-focus:        #3AA8E8;

  --c-line:        #2F353C;
  --c-line-strong: #414952;
  --c-bracket:     transparent;
  --c-accent-soft: rgba(58, 168, 232, .12);
  --c-accent-dim:  #2A7FB0;

  /* status - the base's hues, as they were */
  --c-good: #34D399;  --c-good-soft: rgba(52, 211, 153, .12);
  --c-warn: #FDE047;  --c-warn-soft: rgba(253, 224, 71, .10);
  --c-bad:  #F85149;  --c-bad-soft:  rgba(248, 81, 73, .10);
  --c-ok: var(--c-good);  --c-ok-soft: var(--c-good-soft);
  --c-unknown: #8F98A2;

  --r-sm: 3px;  --r-md: 4px;  --r-lg: 6px;  --r-pill: 999px;
  --shadow: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35);
  --band-h: 56px;
  --rail-w: 232px;

  /* the skin's own */
  --k-band:       #111417;   /* the top bar */
  --k-rail:       #181B1F;   /* the menu */
  --k-head:       #1B1F23;   /* a table's head */
  --k-row-hover:  #252A30;
  --k-current:    rgba(58, 168, 232, .14);   /* the menu item you are on */
  --k-field:      #14171A;   /* an input */
  --k-btn:        #262B31;   /* a button */
  --k-fill:       #0B72AE;   /* the primary - white on it 5.3:1 */
  --k-fill-hover: #0A86CC;
  --k-ring:       rgba(58, 168, 232, .35);
  --k-pop:        0 12px 32px rgba(0, 0, 0, .55);
  --k-mark:       #FFFFFF;
}

/* == 1b · TOKENS · light =================================================== */
html[data-mode="light"] {
  color-scheme: light;
  --c-bg: #F1F3F5;  --c-surface: #FFFFFF;  --c-surface-2: #F5F7F9;  --c-surface-3: #E6EAEE;
  --c-ink: #1A1F24;  --c-ink-2: #3D4751;  --c-ink-3: #5C6873;  --c-ink-on-accent: #FFFFFF;
  --c-accent: #0068A6;  --c-accent-hover: #004E7D;  --c-focus: #0068A6;
  --c-line: #DDE2E7;  --c-line-strong: #C3CAD2;
  --c-accent-soft: rgba(0, 104, 166, .08);  --c-accent-dim: #3F8FC0;
  --c-good: #15803D;  --c-good-soft: rgba(21, 128, 61, .10);
  --c-warn: #A16207;  --c-warn-soft: rgba(202, 138, 4, .12);
  --c-bad:  #C62828;  --c-bad-soft:  rgba(198, 40, 40, .08);
  --c-unknown: #6B7682;
  --c-s4: #5B6470;  --c-s6: #A855C9;
  --shadow: 0 8px 24px rgba(16, 24, 32, .12);
  --shadow-card: 0 1px 2px rgba(16, 24, 32, .06);
  --k-band: #FFFFFF;  --k-rail: #FFFFFF;  --k-head: #F7F9FA;  --k-row-hover: #F2F5F8;
  --k-current: rgba(0, 104, 166, .09);  --k-field: #FFFFFF;  --k-btn: #FFFFFF;
  --k-fill: #0068A6;  --k-fill-hover: #00578C;  --k-ring: rgba(0, 104, 166, .25);
  --k-pop: 0 12px 32px rgba(16, 24, 32, .16);  --k-mark: #0B1520;
}
@media (prefers-color-scheme: light) {
  html[data-mode="system"] {
    color-scheme: light;
    --c-bg: #F1F3F5;  --c-surface: #FFFFFF;  --c-surface-2: #F5F7F9;  --c-surface-3: #E6EAEE;
    --c-ink: #1A1F24;  --c-ink-2: #3D4751;  --c-ink-3: #5C6873;  --c-ink-on-accent: #FFFFFF;
    --c-accent: #0068A6;  --c-accent-hover: #004E7D;  --c-focus: #0068A6;
    --c-line: #DDE2E7;  --c-line-strong: #C3CAD2;
    --c-accent-soft: rgba(0, 104, 166, .08);  --c-accent-dim: #3F8FC0;
    --c-good: #15803D;  --c-good-soft: rgba(21, 128, 61, .10);
    --c-warn: #A16207;  --c-warn-soft: rgba(202, 138, 4, .12);
    --c-bad:  #C62828;  --c-bad-soft:  rgba(198, 40, 40, .08);
    --c-unknown: #6B7682;
    --c-s4: #5B6470;  --c-s6: #A855C9;
    --shadow: 0 8px 24px rgba(16, 24, 32, .12);
    --shadow-card: 0 1px 2px rgba(16, 24, 32, .06);
    --k-band: #FFFFFF;  --k-rail: #FFFFFF;  --k-head: #F7F9FA;  --k-row-hover: #F2F5F8;
    --k-current: rgba(0, 104, 166, .09);  --k-field: #FFFFFF;  --k-btn: #FFFFFF;
    --k-fill: #0068A6;  --k-fill-hover: #00578C;  --k-ring: rgba(0, 104, 166, .25);
    --k-pop: 0 12px 32px rgba(16, 24, 32, .16);  --k-mark: #0B1520;
  }
}

/* == 2 · BASE ============================================================== */
body { font: 400 14px/1.5 var(--f-ui); background: var(--c-bg); color: var(--c-ink-2); }
h1, h2, h3, h4 { color: var(--c-ink); font-family: var(--f-ui); letter-spacing: 0; text-transform: none; }
h1 { font-size: 22px; font-weight: 500; line-height: 1.25; }
h2 { font-size: 18px; font-weight: 500; }
h3 { font-size: 16px; font-weight: 500; }
.page-head em, .lede em { font-family: inherit; font-style: normal; font-weight: 500; color: var(--c-accent); }
code { background: var(--c-surface-2); border-color: var(--c-line); border-radius: var(--r-sm); }
pre, #idlog { background: var(--k-field); border-radius: var(--r-md); }
.lbl, .tick { font-family: var(--f-ui); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--c-ink-3); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* no brackets, no frame */
.frame { display: none; }
.panel, .btn:not(.quiet):not(.sm):not(.xs):not(.tstep), dialog { background-image: none; }

/* == 3 · THE TOP BAR ======================================================= */
.band { height: var(--band-h); background: var(--k-band); backdrop-filter: none; border-bottom: 1px solid var(--c-line);
        padding: 0 20px; gap: 16px; font-family: var(--f-ui); font-size: 13px; letter-spacing: 0;
        text-transform: none; color: var(--c-ink-3); }
.band .mark { font: 600 17px/1 var(--f-ui); letter-spacing: .06em; text-transform: none; color: var(--k-mark); }
.band .mark:hover { color: var(--c-accent); }
.band .where { font-family: var(--f-ui); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--c-ink-2); }
.band .where::before { content: "/"; color: var(--c-line-strong); margin-right: 14px; }
.band .live { font-size: 12.5px; }
.band .stamp { font-family: var(--f-ui); font-size: 12.5px; letter-spacing: 0; }
.band .stamp b { font-family: var(--f-mono); font-weight: 500; }
.band .menu > summary { font-family: var(--f-ui); font-size: 13.5px; letter-spacing: 0; text-transform: none;
                        border-radius: var(--r-md); min-height: 36px; padding: 6px 12px; color: var(--c-ink-2); }
.band .menu > .pop, .hmenu > .pop { border-radius: var(--r-lg); border: 1px solid var(--c-line); background: var(--c-surface);
                                    box-shadow: var(--k-pop); padding: 6px; }
.band .menu > .pop .item, .hmenu > .pop .item { border-radius: var(--r-md); font: 500 13.5px/1.3 var(--f-ui); letter-spacing: 0;
                                                text-transform: none; padding: 8px 12px; }
.band .menu > .pop .who { padding: 4px 12px 6px; }

/* == 4 · THE MENU ========================================================== */
.rail { background: var(--k-rail); border-right: 1px solid var(--c-line); }
.railtop { background: var(--k-rail); border-bottom: 1px solid var(--c-line); padding: 8px; }
.railbtn { font: 500 12px/1 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--c-ink-3);
           border-radius: var(--r-md); padding: 7px 8px; }
.railbtn:hover { color: var(--c-accent); border-color: var(--c-line); background: var(--c-surface-2); }
.railbtn.ico { font-size: 14px; }
.rail .group, details.grp > summary { font: 600 11px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
                                      color: var(--c-ink-3); padding: 18px 16px 8px 20px; }
details.grp { border-bottom: 0; }
details.grp[open] { padding-bottom: 4px; }
.rail a, .rail .off { font: 400 14px/1.3 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--c-ink-2);
                      min-height: 40px; padding: 9px 16px 9px 17px; gap: 12px; border-left: 3px solid transparent; }
.rail a::before, .rail .off::before { display: none; }
.rail a:hover { color: var(--c-ink); background: var(--c-surface-2); }
.rail a[aria-current="page"] { color: var(--c-ink); font-weight: 500; background: var(--k-current);
                               border-left: 3px solid var(--c-accent); }
.rail > .acts { background: var(--k-rail); box-shadow: none; border-top: 1px solid var(--c-line); }
.acts { border-top-color: var(--c-line); }
.acts-hd { font: 600 11px/1 var(--f-ui); letter-spacing: .08em; }
.acts .none { font: 400 12.5px/1.4 var(--f-ui); letter-spacing: 0; }
.act, .rail a.act { border-radius: var(--r-md); background: var(--c-surface); }
.act-n { font: 500 13px/1.3 var(--f-ui); }
.act-s { font: 500 11.5px/1.2 var(--f-ui); letter-spacing: 0; text-transform: none; }
.act-m { font: 400 12px/1.35 var(--f-ui); }
@media (max-width: 900px) {
  .rail a, .rail .off { border-left: 0; border-bottom: 3px solid transparent; min-height: 44px; padding: 11px 12px; }
  .rail a[aria-current="page"] { border-left: 0; border-bottom-color: var(--c-accent); background: none; }
  details.grp > summary { padding: 0 8px; }
}

/* == 5 · THE PAGE ========================================================== */
.main { padding: 24px; color: var(--c-ink-2); }
.page-head { margin-bottom: 20px; }
.page-head h1 { font: 500 22px/1.25 var(--f-ui); letter-spacing: 0; color: var(--c-ink); }
.page-head p { color: var(--c-ink-3); }
.crumbs { font: 400 13px/1.4 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--c-ink-3); }
.crumbs a { color: var(--c-accent); }
.crumbs span { padding: 0 6px; color: var(--c-line-strong); }
.group-title { font: 600 11px/1.2 var(--f-ui); letter-spacing: .08em; }

/* == 6 · CARDS ============================================================= */
.panel { background-color: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
         box-shadow: var(--shadow-card); }
.panel > .hd { padding: 14px 18px; border-bottom: 1px solid var(--c-line); }
.panel > .hd h3 { font: 500 15px/1.3 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--c-ink); }
.panel > .hd .sub { font: 400 12.5px/1.3 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--c-ink-3); }
.panel > .bd { padding: 16px 18px 18px; }
.panel > .bd.flush { padding: 0; }
.panel > .bd.flush :is(table.data, .table-wrap > table) :is(th, td):first-child { padding-left: 18px; }
.panel > .bd.flush :is(table.data, .table-wrap > table) :is(th, td):last-child { padding-right: 18px; }
.panel > .ft { background: var(--c-surface-2); border-top: 1px solid var(--c-line); padding: 10px 18px; }
.stat .label, .tile .label, .chart-hd .label { font: 500 12.5px/1.3 var(--f-ui); letter-spacing: 0; text-transform: none;
                                              color: var(--c-ink-3); }
.stat .value, .tile .value { font-family: var(--f-ui); font-weight: 500; letter-spacing: 0; }
.chart-card .now { font-family: var(--f-ui); font-weight: 500; text-shadow: none; }
.chart-y { font-family: var(--f-ui); font-size: 10.5px; }
.tile .tile-b { border-left-width: 3px; }
.facts dt { font: 400 13px/1.4 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--c-ink-3);
            border-bottom: 1px solid var(--c-line); }
.facts dd { font-family: var(--f-ui); font-size: 13.5px; color: var(--c-ink); border-bottom: 1px solid var(--c-line); }
.facts dd .mono, .facts dd code { font-family: var(--f-mono); font-size: 13px; }
.hudframe { border-radius: var(--r-lg); }
.hudframe > .k { display: none; }

/* == 7 · TABLES ============================================================ */
:is(table.data, .table-wrap > table) { font-size: 13.5px; }
:is(table.data, .table-wrap > table) th, :is(table.data, .table-wrap > table) td { border-bottom: 1px solid var(--c-line);
                                                                                   padding: 10px 14px; }
:is(table.data, .table-wrap > table) thead th { background: var(--k-head); color: var(--c-ink-3);
        font: 500 12.5px/1.3 var(--f-ui); letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--c-line-strong); }
:is(table.data, .table-wrap > table) tbody tr:hover { background: var(--k-row-hover); }
:is(table.data, .table-wrap > table) tbody tr[aria-selected="true"] { background: var(--k-current);
                                                                    box-shadow: inset 3px 0 0 var(--c-accent); }
:is(table.data, .table-wrap > table) td.mono { font-size: 13px; }
table.sortable thead tr.filters input { font-family: var(--f-ui); font-size: 12.5px; }
.pager { font: 400 12.5px/1.4 var(--f-ui); letter-spacing: 0; color: var(--c-ink-3); }

/* == 8 · FORMS AND BUTTONS ================================================= */
.field > label, label.lab { font: 500 13px/1.3 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--c-ink-2); }
.field label .suffix { color: var(--c-ink-3); }
.field .help { font-size: 12.5px; color: var(--c-ink-3); }
input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="datetime-local"], input[type="url"],
input[type="tel"], select, textarea { background-color: var(--k-field); border: 1px solid var(--c-line-strong);
                                      border-radius: var(--r-md); color: var(--c-ink); min-height: 36px; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line-strong)); }
input:focus, select:focus, textarea:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--k-ring); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--c-bad); box-shadow: 0 0 0 3px var(--c-bad-soft); }
input[type="file"]::file-selector-button { font: 500 13px/1 var(--f-ui); letter-spacing: 0; text-transform: none;
        background: var(--k-btn); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); color: var(--c-ink); }

.btn { border-radius: var(--r-md); font: 500 13.5px/1 var(--f-ui); letter-spacing: 0; text-transform: none;
       color: var(--c-ink); background-color: var(--k-btn); border: 1px solid var(--c-line-strong);
       padding: 9px 16px; min-height: 36px; }
.btn:hover { border-color: var(--c-accent); color: var(--c-accent); background-color: var(--c-surface-2); transform: none; }
.btn.primary { background-color: var(--k-fill); border-color: var(--k-fill); color: #FFFFFF; }
.btn.primary:hover { background-color: var(--k-fill-hover); border-color: var(--k-fill-hover); color: #FFFFFF; }
.btn.go { background-color: var(--c-good-soft); border-color: var(--c-good); color: var(--c-good); }
.btn.go:hover { background-color: color-mix(in srgb, var(--c-good) 20%, transparent); color: var(--c-good); }
.btn.danger { background-color: transparent; border-color: var(--c-bad); color: var(--c-bad); }
.btn.danger:hover { background-color: var(--c-bad-soft); border-color: var(--c-bad); color: var(--c-bad); }
.btn.warn { background-color: transparent; border-color: var(--c-warn); color: var(--c-warn); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--c-accent); }
.btn.quiet:hover { background: var(--c-accent-soft); border-color: transparent; }
.btn.sm { min-height: 30px; padding: 6px 12px; font-size: 12.5px; }
.btn.xs { min-height: 24px; padding: 3px 8px; font-size: 11.5px; }
.btn.done, .btn.done[disabled] { background-color: var(--c-good-soft); border-color: var(--c-good); color: var(--c-good); }
.btn.tstep .tstep-s { font-family: var(--f-ui); }
.btn-group .btn, .btn-group .btn:first-child, .btn-group .btn:last-child { border-radius: 0; }
.btn-group .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.btn-group .btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
@media (pointer: coarse) { .btn { min-height: 44px; } }
.swatch { border-radius: var(--r-md); }
details.adv > summary { font: 500 12.5px/1.3 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--c-accent); }
.cfline .lab, .zcount-w { font-family: var(--f-ui); font-size: 12px; letter-spacing: 0; text-transform: none; }
.zcount-n { font-family: var(--f-ui); font-weight: 500; }

/* == 9 · TABS, BADGES, ALERTS, DIALOGS ===================================== */
.tabs { border-bottom: 1px solid var(--c-line); }
.tabs a, .tabs button { font: 500 13.5px/1.4 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--c-ink-3);
                        padding: 10px 14px; border-bottom-width: 2px; }
.tabs a:hover, .tabs button:hover { color: var(--c-ink); }
.tabs [aria-current="true"], .tabs [aria-selected="true"] { color: var(--c-accent); border-bottom-color: var(--c-accent); }

.badge { border-radius: var(--r-pill); font: 500 12px/1 var(--f-ui); letter-spacing: 0; text-transform: none; padding: 4px 10px; }
.steps .step { border-radius: var(--r-pill); font-family: var(--f-ui); letter-spacing: 0; font-size: 12.5px; }
.steps .step i { border-radius: 50%; font-family: var(--f-ui); }

.alert { border: 1px solid var(--c-line); border-left: 3px solid var(--c-line-strong); border-radius: var(--r-lg);
         background: var(--c-surface); color: var(--c-ink); }

dialog, dialog.confirm { border-radius: 8px; border: 1px solid var(--c-line); background-color: var(--c-surface);
                         box-shadow: var(--k-pop); }
dialog .hd h3 { font: 500 15px/1.3 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--c-ink); }
details.disclose { border-radius: var(--r-lg); }
ol.pipe li { border-radius: var(--r-md); }
.bar, .gauge-bar, .gauge-bar i { border-radius: 3px; }

/* the Assume bar: yellow, needs you - the same yellow in both modes */
.assume { background: #FDE047; color: #1A1A14; }
.assume .assume-t { font-family: var(--f-ui); font-size: 12.5px; letter-spacing: 0; text-transform: none; }

@media print {
  .panel { border-radius: 0; box-shadow: none; }
}

/* a select says it is one: the arrow (ljlr.css's `background` shorthand on
   fields drops the one section 7 draws) */
select { background-image: linear-gradient(45deg, transparent 50%, var(--c-ink-3) 50%),
                           linear-gradient(135deg, var(--c-ink-3) 50%, transparent 50%);
         background-position: right 16px center, right 11px center;
         background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }

/* cards one after another in the page keep apart (in a grid or a stack the
   container's gap does it) */
.main > .panel + .panel { margin-top: 16px; }

/* The menu on a phone (rc.52): one line that scrolls sideways, every group's
   items in it. ljlr.css set the groups to display: contents, which Chrome
   does not give a <details>, so each group stood as a column. */
@media (max-width: 900px) {
  .rail { display: block; white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
  details.grp { display: inline-block; vertical-align: middle; }
  details.grp::details-content { content-visibility: visible; display: contents; }
  details.grp > summary { display: inline-flex; vertical-align: middle; }
  .rail a, .rail .off, details.grp:not([open]) > a, details.grp:not([open]) > .off { display: inline-flex; vertical-align: middle; }
}