/* ==========================================================================
   SHA LAB LIS — "Pro" skin
   The dark console the laboratory works in all day: a deep navy ground, the
   menu as a floating panel beside the work, and every surface lifted off the
   background rather than boxed in by borders.

   Nothing here changes structure or behaviour. It re-tunes the design tokens
   and restyles the shell, so `data-skin="classic"` returns the original look
   untouched. Logical properties throughout, so RTL still mirrors.
   ========================================================================== */

html[data-skin="pro"] {
  /* Brand shifts from SHA's teal to the blue the console is built around. */
  --brand-50:#0e1c33;  --brand-100:#122544; --brand-200:#16305a;
  --brand-300:#1d4488; --brand-400:#2563eb; --brand-500:#2f6df6;
  --brand-600:#1d4ed8; --brand-700:#1e40af; --brand-800:#1e3a8a; --brand-900:#172554;

  --accent-500:#22d3ee; --accent-600:#06b6d4;

  --bg:#050a14;
  --surface:#0b1424;
  --surface-2:#101d31;
  --surface-3:#16263e;
  /* Two inks the console is drawn with, named by the job they do rather than
     by their colour, so the light variant below only has to restate these:
     `sunk` is what a recessed surface (a field, a table head) is sunk into,
     `hair` is what a hairline is drawn with. Channels, not colours, so each
     use keeps its own alpha. */
  --pro-sunk: 2 8 20;
  --pro-hair: 148 180 232;
  --pro-panel-a: 20 38 68;   /* a floating panel's ground, top… */
  --pro-panel-b: 9 17 31;    /* …and bottom */
  --pro-lift: 255 255 255;   /* what raises a surface off a panel */
  --pro-face-a: 38 62 102;   /* a control's own face, a step above the panel */
  --pro-face-b: 18 32 55;
  --pro-on-wash: #ffffff;    /* text on a brand wash */

  --border:rgb(var(--pro-hair) / .13);
  --border-strong:rgb(var(--pro-hair) / .24);
  --text:#e9f0fb;
  --text-2:#9fb3d1;
  --text-3:#6b83a6;

  --ok-50:#052e21;  --warn-50:#2e2308; --dang-50:#2c0d10; --info-50:#0b1e3d;

  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 2px 6px rgba(0,0,0,.45);
  --shadow:0 10px 26px rgba(0,0,0,.5);
  --shadow-lg:0 20px 46px rgba(0,0,0,.55);
  --shadow-xl:0 32px 80px rgba(0,0,0,.6);

  --r:14px; --r-lg:18px;
  --sidebar-w:274px;
  --topbar-h:64px;
  --rail-w:60px;

  color-scheme: dark;
}

/* ---------------------------------------------------- pro, in daylight --- */
/* The same console under a window rather than at night. It is not the classic
   layout repainted: the floating panels, the blue identity and the spacing all
   stay — only the ground, the ink and the two roles above are restated. A
   laboratory with a bright bench needs this; one working in a dim room keeps
   the dark. The theme switch chooses between them, which is why it is no
   longer hidden while this skin is on. */
html[data-skin="pro"][data-theme="light"] {
  /* Brand keeps the console's blue, but the pale end has to be pale again:
     these tints are backgrounds here, not the dark fills they are at night. */
  --brand-50:#eaf1ff;  --brand-100:#d7e5ff; --brand-200:#b9d0fb;
  --brand-300:#8ab0f6; --brand-400:#4b86ef;

  /* Cyan reads as light on a dark ground and as nothing on a white one, so in
     daylight the accent drops to a depth that can hold its own. */
  --accent-500:#0e7490; --accent-600:#155e75;

  --pro-sunk: 210 223 244;   /* a recess is a cool tint, not a hole */
  --pro-hair: 20 44 84;      /* hairlines are drawn with ink, not with light */
  --pro-panel-a: 255 255 255;
  --pro-panel-b: 240 245 252;
  --pro-lift: 20 44 84;      /* on a pale panel a surface is lifted by ink */
  --pro-face-a: 255 255 255;
  --pro-face-b: 236 242 250;
  --pro-on-wash: #16357c;    /* the same wash is pale here, so the text is deep */

  --bg:#e9eff9;
  --surface:#ffffff;
  --surface-2:#f4f7fd;
  --surface-3:#e7eefb;
  --text:#0c1728;
  --text-2:#43587a;
  --text-3:#64748b;

  --ok-50:#ecfdf5; --warn-50:#fffbeb; --dang-50:#fef2f2; --info-50:#eff6ff;

  /* Shadows tinted with the ground's own navy: black on a light surface reads
     as dirt rather than depth. */
  --shadow-xs:0 1px 2px rgb(20 44 84 / .06);
  --shadow-sm:0 2px 6px rgb(20 44 84 / .08);
  --shadow:0 10px 26px rgb(20 44 84 / .10);
  --shadow-lg:0 20px 46px rgb(20 44 84 / .13);
  --shadow-xl:0 32px 80px rgb(20 44 84 / .16);

  color-scheme: light;
}

/* The ground is not flat: two soft lights sit behind the work, one under the
   menu and one under the header, the way the reference console is lit. */
html[data-skin="pro"] body {
  background:
    radial-gradient(900px 520px at 100% 0%, rgba(37,99,235,.16), transparent 62%),
    radial-gradient(760px 460px at 12% 4%, rgba(34,211,238,.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
/* In daylight the same two lights have to be barely there: an alpha that reads
   as a glow against near-black reads as a colour cast against white. */
html[data-skin="pro"][data-theme="light"] body {
  background:
    radial-gradient(900px 520px at 100% 0%, rgba(37,99,235,.07), transparent 62%),
    radial-gradient(760px 460px at 12% 4%, rgba(14,116,144,.05), transparent 60%),
    var(--bg);
}

/* ------------------------------------------------------------- shell ----- */
html[data-skin="pro"] .app { gap:0; }

/* The menu floats: inset from the edges, rounded, with its own light. */
html[data-skin="pro"] .sidebar {
  background:linear-gradient(180deg, rgb(var(--pro-panel-a) / .92), rgb(var(--pro-panel-b) / .94));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  margin:10px;
  margin-inline-end:10px;
  block-size:calc(100vh - 20px);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px);
  overflow:hidden;
}

html[data-skin="pro"] .sidebar__brand {
  position:relative;
  padding:14px 14px 12px;
  border-block-end:1px solid var(--border);
  background:linear-gradient(180deg, rgba(47,109,246,.12), transparent);
}
html[data-skin="pro"] .sidebar__logo {
  background:linear-gradient(135deg,var(--brand-500),var(--accent-600));
  color:#fff;
  box-shadow:0 6px 18px rgba(47,109,246,.4);
}
html[data-skin="pro"] .sidebar__title { letter-spacing:.01em; }
html[data-skin="pro"][data-theme="light"] .sidebar__title { color:var(--text); }
html[data-skin="pro"] .sidebar__sub { color:var(--text-3); font-size:.7rem; }

/* The steady green dot that says the station is connected. */
html[data-skin="pro"] .sidebar__live {
  position:absolute; inset-block-start:16px; inset-inline-end:14px;
  inline-size:8px; block-size:8px; border-radius:50%;
  background:var(--ok-500);
  box-shadow:0 0 0 3px rgba(16,185,129,.16);
}

/* Who is signed in, always in view. */
html[data-skin="pro"] .sidebar__user {
  display:flex; align-items:center; gap:10px;
  margin:10px; padding:9px 11px;
  background:linear-gradient(90deg, rgba(47,109,246,.16), rgba(47,109,246,.03));
  border:1px solid var(--border);
  border-radius:var(--r);
}
html[data-skin="pro"] .sidebar__user-text { min-inline-size:0; flex:1; }
html[data-skin="pro"] .sidebar__user-name {
  font-weight:700; font-size:.86rem; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html[data-skin="pro"] .sidebar__user-role {
  font-size:.7rem; color:var(--text-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html[data-skin="pro"] .sidebar__user-icon { color:var(--accent-500); opacity:.8; }

html[data-skin="pro"] .sidebar__filter {
  position:relative; margin:0 10px 8px;
}
html[data-skin="pro"] .sidebar__filter .input {
  padding-inline-start:34px;
  background:rgb(var(--pro-sunk) / .55);
  border-color:var(--border);
  font-size:.82rem;
}
html[data-skin="pro"] .sidebar__filter .search-box__icon {
  position:absolute; inset-block-start:50%; inset-inline-start:11px;
  transform:translateY(-50%); color:var(--text-3); pointer-events:none;
}

/* Group headings read as small type-set labels, not buttons. */
html[data-skin="pro"] .nav-group__label {
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3); padding-block:10px 6px;
}
html[data-skin="pro"] .nav-item {
  border-radius:10px;
  margin-inline:8px;
  font-size:.86rem;
  color:var(--text-2);
}
html[data-skin="pro"] .nav-item:hover { background:rgb(var(--pro-lift) / .045); color:var(--text); }
/* The page you are on is lit from its leading edge. */
html[data-skin="pro"] .nav-item.is-active {
  background:linear-gradient(90deg, rgba(47,109,246,.26), rgba(47,109,246,.05));
  color:var(--pro-on-wash);
  box-shadow:inset 3px 0 0 var(--brand-500);
}
html[dir="rtl"][data-skin="pro"] .nav-item.is-active { box-shadow:inset -3px 0 0 var(--brand-500); }

/* ------------------------------------------------------------ topbar ----- */
html[data-skin="pro"] .topbar {
  background:linear-gradient(180deg, rgb(var(--pro-panel-a) / .9), rgb(var(--pro-panel-b) / .86));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  margin:10px 10px 0 0;
  margin-inline-start:0;
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}
html[data-skin="pro"] .topbar .input {
  background:rgb(var(--pro-sunk) / .5);
  border-color:var(--border);
}

html[data-skin="pro"] .topbar__live {
  display:flex; align-items:center; gap:9px;
  padding:5px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-full);
  background:rgb(var(--pro-sunk) / .45);
  white-space:nowrap;
}
html[data-skin="pro"] .topbar__live-clock {
  font-family:var(--font-mono); font-size:.74rem; color:var(--text-3);
}
html[data-skin="pro"] .topbar__live-text { display:grid; line-height:1.15; }
html[data-skin="pro"] .topbar__live-tag {
  font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-500);
}
html[data-skin="pro"] .topbar__live-name { font-size:.8rem; font-weight:700; color:var(--text); }
/* It is a link home now, so it must not read as body copy. */
html[data-skin="pro"] .topbar__live { text-decoration:none; color:inherit; transition:border-color var(--t), background var(--t); }
html[data-skin="pro"] .topbar__live:hover {
  border-color:var(--brand-400);
  background:rgba(37,99,235,.14);
  text-decoration:none;
}
html[data-skin="pro"][data-theme="light"] .topbar__live:hover { background:rgba(37,99,235,.08); }
html[data-skin="pro"][data-theme="light"] .topbar__home.is-active { background:rgba(37,99,235,.10); }
/* On the dark console the mark sits against a deep ground, so the trace is the
   cyan accent and the ring the console blue — both already tokens, so this only
   lifts the glow that a dark background swallows. */
html[data-skin="pro"] .sha-mark__halo { opacity:.20; }
html[data-skin="pro"] .sha-mark__core { opacity:.28; }
html[data-skin="pro"][data-theme="light"] .sha-mark__halo { opacity:.13; }
html[data-skin="pro"][data-theme="light"] .sha-mark__core { opacity:.12; }

html[data-skin="pro"] .topbar__home.is-active {
  background:rgba(37,99,235,.18); color:var(--text);
}
/* On a narrow screen the middle block is the first thing to go. */
@media (max-width:1100px){ html[data-skin="pro"] .topbar__live { display:none; } }

/* ------------------------------------------------------------- cards ----- */
html[data-skin="pro"] .card {
  position:relative;
  background:linear-gradient(180deg, rgb(var(--pro-panel-a) / .5), rgb(var(--pro-panel-b) / .6));
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
/* A short accent stroke on the leading edge of every card's head. */
html[data-skin="pro"] .card__head::before {
  content:""; position:absolute; inset-block-start:0; inset-inline-start:0;
  inline-size:64px; block-size:2px;
  background:linear-gradient(90deg, var(--brand-500), transparent);
}
html[dir="rtl"][data-skin="pro"] .card__head::before {
  background:linear-gradient(270deg, var(--brand-500), transparent);
}
html[data-skin="pro"] .card__head { border-block-end-color:var(--border); }

/* ------------------------------------------------------- page heading ---- */
html[data-skin="pro"] .page-head__text h1 {
  font-size:1.9rem; font-weight:800; letter-spacing:-.01em;
  background:linear-gradient(180deg,#ffffff,#a9c6f2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* The same idea inverted: in daylight the heading runs from ink to the brand
   rather than from white to a tint, or it would not be there at all. */
html[data-skin="pro"][data-theme="light"] .page-head__text h1 {
  /* background-image, not the `background` shorthand: the shorthand would reset
     background-clip back to border-box and paint the heading as a solid block. */
  background-image:linear-gradient(180deg,#0b1730,#1d4ed8);
}
html[data-skin="pro"] .page-head__text p { color:var(--text-3); }

/* ------------------------------------------------------------ tables ----- */
html[data-skin="pro"] .table thead th {
  background:rgb(var(--pro-sunk) / .5);
  color:var(--text-3);
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  border-block-end:1px solid var(--border);
}
html[data-skin="pro"] .table tbody tr { border-block-end:1px solid rgb(var(--pro-hair) / .07); }
html[data-skin="pro"] .table tbody tr:nth-child(even){ background:rgb(var(--pro-hair) / .035); }
html[data-skin="pro"] .table tbody tr:hover { background:rgba(47,109,246,.09); }

/* ----------------------------------------------------------- controls ---- */
html[data-skin="pro"] .btn {
  border-color:var(--border);
  background:linear-gradient(180deg, rgb(var(--pro-face-a) / .6), rgb(var(--pro-face-b) / .6));
  color:var(--text);
}
html[data-skin="pro"] .btn:hover { border-color:var(--border-strong); }
html[data-skin="pro"] .btn--primary,
html[data-skin="pro"] .page-actions .btn:not(.btn--ghost):not(.btn--soft):not(.btn--danger) {
  background:linear-gradient(180deg, var(--brand-500), var(--brand-600));
  border-color:transparent; color:#fff;
  box-shadow:0 6px 18px rgba(47,109,246,.35);
}
html[data-skin="pro"] .btn--ghost { background:transparent; }
html[data-skin="pro"] .input, html[data-skin="pro"] .select, html[data-skin="pro"] .textarea {
  background:rgb(var(--pro-sunk) / .5);
  border-color:var(--border);
  color:var(--text);
}
html[data-skin="pro"] .input::placeholder, html[data-skin="pro"] .textarea::placeholder { color:var(--text-3); }
html[data-skin="pro"] .badge { border-color:var(--border); }


/* Phones get the flat layout back: floating panels waste the little space. */
@media (max-width:820px){
  html[data-skin="pro"] .sidebar { margin:0; border-radius:0; block-size:100vh; }
  html[data-skin="pro"] .topbar { margin:0; border-radius:0; border-inline:0; }
}

/* The tagline is a caption, not a paragraph: one line, then it gives way. */
html[data-skin="pro"] .sidebar__brand > div { min-inline-size:0; }
html[data-skin="pro"] .sidebar__title,
html[data-skin="pro"] .sidebar__sub {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* --------------------------------------------------------------- rail ---- */
/* Fixed to the leading edge, clear of the floating menu and header. It is a
   shortcut, never the only way to anywhere — every entry is in the menu too. */
.rail { display:none; }
html[data-skin="pro"] .rail {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  /* Opposite the menu: the menu takes the inline start, the rail the end. */
  position:fixed; inset-block-start:50%; inset-inline-end:14px;
  transform:translateY(-50%);
  padding:12px 8px;
  background:linear-gradient(180deg, rgb(var(--pro-panel-a) / .72), rgb(var(--pro-panel-b) / .78));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px);
  z-index:40;
}
html[data-skin="pro"] .rail__label {
  font-size:.52rem; letter-spacing:.24em; color:var(--text-3);
  margin-block-end:2px;
}
html[data-skin="pro"] .rail__btn {
  display:grid; place-items:center;
  inline-size:36px; block-size:36px;
  border-radius:11px;
  color:var(--text-2);
  background:rgb(var(--pro-lift) / .04);
  border:1px solid transparent;
  transition:transform var(--t-fast), background var(--t-fast), color var(--t-fast);
}
html[data-skin="pro"] .rail__btn:hover { transform:translateY(-2px); color:var(--pro-on-wash); }
html[data-skin="pro"] .rail__btn--brand{ background:var(--brand-500); color:#fff; }
html[data-skin="pro"] .rail__btn--dang { background:var(--dang-600); color:#fff; }
html[data-skin="pro"] .rail__btn--ok   { background:var(--ok-600);   color:#fff; }
html[data-skin="pro"] .rail__btn--info { background:var(--info-600); color:#fff; }
html[data-skin="pro"] .rail__btn--warn { background:var(--warn-600); color:#fff; }
/* A tinted rail button already stands on a solid colour, so hovering it must
   not pull the text down to the ink meant for a pale wash. */
html[data-skin="pro"] .rail__btn--brand:hover, html[data-skin="pro"] .rail__btn--dang:hover,
html[data-skin="pro"] .rail__btn--ok:hover,    html[data-skin="pro"] .rail__btn--info:hover,
html[data-skin="pro"] .rail__btn--warn:hover { color:#fff; }
html[data-skin="pro"] .rail__btn.is-active { outline:2px solid var(--accent-500); outline-offset:2px; }

/* The content clears the rail rather than sliding under it. */
html[data-skin="pro"] .content { padding-inline-end:78px; }

/* Below a laptop the rail would crowd the work, so it stands down. */
@media (max-width:1024px){
  html[data-skin="pro"] .rail { display:none; }
  html[data-skin="pro"] .content { padding-inline-end:16px; }
}

/* ------------------------------------------------------- folded menu ----- */
html[data-skin="pro"] .sidebar.is-collapsed { inline-size:74px; flex-basis:74px; }
html[data-skin="pro"] .sidebar.is-collapsed .nav-item {
  margin-inline:8px; justify-content:center;
}
html[data-skin="pro"] .sidebar.is-collapsed .nav-group + .nav-group {
  border-block-start:1px solid var(--border); margin-block-start:6px; padding-block-start:6px;
}

/* --------------------------------------------------- the extras group ---- */
/* Everything SHA can do that this laboratory has not put in its own menu.
   Marked apart so it reads as a drawer of extras, not another section. */
html[data-skin="pro"] .nav-group--more {
  margin-block-start:10px;
  padding-block-start:8px;
  border-block-start:1px dashed var(--border-strong);
}
html[data-skin="pro"] .nav-group--more .nav-group__label { color:var(--accent-500); }
html[data-skin="pro"] .nav-group__count {
  background:rgba(34,211,238,.16); color:var(--accent-500);
}
html[data-skin="pro"][data-theme="light"] .nav-group__count {
  background:rgba(14,116,144,.10);
}

/* The list ends clear of the panel's edge, so the last entry is never clipped. */
html[data-skin="pro"] .sidebar__nav { padding-block-end:18px; }

/* A Latin tagline inside an RTL panel truncates from the wrong end unless it
   is told which way it reads. */
html[data-skin="pro"] .sidebar__sub { direction:ltr; text-align:start; }
html[dir="rtl"][data-skin="pro"] .sidebar__sub { text-align:end; }

/* The extras heading carries its own weight, so its count sits quietly. */
html[data-skin="pro"] .nav-group--more .nav-group__label { font-weight:700; }

/* ==========================================================================
   Menu rhythm
   A nav row is 240px wide; huddling its icon and label into one corner left a
   third of every row empty and made the column look ragged. The label takes
   the start of the row and the icon the end, which gives the menu two clean
   edges — a column of words and a column of icons — the way the reference
   console reads.
   ========================================================================== */
html[data-skin="pro"] .nav-item {
  gap:12px;
  padding:9px 12px;
  min-block-size:38px;
  font-size:.9rem;
}
html[data-skin="pro"] .nav-item__icon {
  order:2;                      /* markup keeps the icon first for screen readers */
  margin-inline-start:auto;
  opacity:.62;
  transition:opacity var(--t-fast);
}
html[data-skin="pro"] .nav-item:hover .nav-item__icon,
html[data-skin="pro"] .nav-item.is-active .nav-item__icon { opacity:1; }
html[data-skin="pro"] .nav-item > span:not(.nav-item__icon) {
  min-inline-size:0; overflow:hidden; text-overflow:ellipsis;
}
html[data-skin="pro"] .nav-item__badge { order:1; margin-inline-start:0; }

/* Folded to icons there is no label to balance against, so the icon centres. */
html[data-skin="pro"] .sidebar.is-collapsed .nav-item__icon { margin-inline-start:0; }

/* Headings: readable, spaced, and separated from the group above. */
html[data-skin="pro"] .nav-group + .nav-group {
  margin-block-start:4px;
  padding-block-start:8px;
  border-block-start:1px solid rgb(var(--pro-hair) / .08);
}
html[data-skin="pro"] .nav-group__label {
  padding:6px 12px;
  font-size:.7rem;
  letter-spacing:.13em;
  color:var(--text-3);
}
html[data-skin="pro"] .nav-group__label:hover { color:var(--text-2); }
html[data-skin="pro"] .nav-group__chev { inline-size:12px; block-size:12px; opacity:.45; }

/* The extras group already has its own dashed rule; it does not need a second. */
html[data-skin="pro"] .nav-group--more { border-block-start-style:dashed; }
html[data-skin="pro"] .nav-group + .nav-group--more { border-block-start-color:var(--border-strong); }

/* A heading is a short word on a wide row. Rather than leave the rest of the
   row empty with a lone chevron floating at the far end, a hairline carries
   the eye across to it — the rule the reference console draws. */
html[data-skin="pro"] .nav-group__label > span { flex:0 1 auto; order:0; }
html[data-skin="pro"] .nav-group__count { order:0; }
html[data-skin="pro"] .nav-group__label::after {
  content:""; order:1; flex:1 1 auto;
  block-size:1px; min-inline-size:12px;
  background:linear-gradient(90deg, rgb(var(--pro-hair) / .28), transparent);
}
html[dir="rtl"][data-skin="pro"] .nav-group__label::after {
  background:linear-gradient(270deg, rgb(var(--pro-hair) / .28), transparent);
}
html[data-skin="pro"] .nav-group__chev { order:2; }
/* Folded to icons the headings are gone, so the rule has nothing to carry. */
html[data-skin="pro"] .sidebar.is-collapsed .nav-group__label::after { display:none; }

/* ==========================================================================
   Header menu
   The panel dropped straight onto the page with no edge of its own, and its
   groups ran from one item to thirty-four, so the columns read as a broken
   grid rather than a menu. It becomes a floating sheet, and each group a tile
   with its own heading, so uneven lengths look deliberate.
   ========================================================================== */
html[data-skin="pro"] .mega {
  inset-inline:10px;
  inset-block-start:calc(var(--topbar-h) + 14px);
  padding:16px;
  background:linear-gradient(180deg, rgb(var(--pro-panel-a) / .97), rgb(var(--pro-panel-b) / .98));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl);
  backdrop-filter:blur(16px);
  max-block-size:calc(100vh - var(--topbar-h) - 28px);
}
html[data-skin="pro"] .mega-scrim { background:rgba(2,6,14,.55); }
html[data-skin="pro"] .mega__search .input { background:rgb(var(--pro-sunk) / .6); }

html[data-skin="pro"] .mega__cols {
  gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
}
html[data-skin="pro"] .mega__col {
  padding:10px 8px 8px;
  background:rgb(var(--pro-lift) / .022);
  border:1px solid var(--border);
  border-radius:var(--r);
}
html[data-skin="pro"] .mega__heading {
  font-size:.7rem; letter-spacing:.13em; color:var(--text-3);
  padding:2px 8px 8px; margin-block-end:6px;
  border-block-end:1px solid var(--border);
}

/* Same rhythm as the side menu: the word leads, the icon closes the row. */
html[data-skin="pro"] .mega__link { padding:8px 10px; font-size:.86rem; color:var(--text-2); }
html[data-skin="pro"] .mega__icon { order:2; margin-inline-start:auto; opacity:.6; }
html[data-skin="pro"] .mega__link:hover {
  background:rgba(47,109,246,.16); color:var(--pro-on-wash);
}
html[data-skin="pro"] .mega__link:hover .mega__icon { opacity:1; }
html[data-skin="pro"] .mega__link.is-active {
  background:linear-gradient(90deg, rgba(47,109,246,.32), rgba(47,109,246,.08));
  color:var(--pro-on-wash);
}

/* The drawer of extras is far longer than any section; it spans the sheet and
   scrolls inside itself rather than stretching the whole panel. */
html[data-skin="pro"] .mega__col--more {
  grid-column:1 / -1;
  border-style:dashed;
  border-color:var(--border-strong);
}
html[data-skin="pro"] .mega__col--more .mega__heading { color:var(--accent-500); }
html[data-skin="pro"] .mega__col--more > .mega__link { display:inline-flex; inline-size:auto; }
/* Its links wrap across the full width instead of forming one tall column. */
html[data-skin="pro"] .mega__col--more {
  display:flex; flex-wrap:wrap; gap:4px;
}
html[data-skin="pro"] .mega__col--more .mega__heading {
  flex:1 0 100%; margin-block-end:2px;
}

/* Wrapped into a row, an extras entry needs an edge of its own to read as
   something you can click. */
html[data-skin="pro"] .mega__col--more .mega__link {
  border:1px solid var(--border);
  background:rgb(var(--pro-sunk) / .35);
}
html[data-skin="pro"] .mega__col--more .mega__link:hover { border-color:var(--brand-500); }

/* A section heading is a label, not a control: the laboratory's own sections
   always stand open, so there is nothing for it to toggle. Only the drawer of
   extras at the foot keeps a chevron. */
html[data-skin="pro"] .nav-group__label--static { cursor:default; }
html[data-skin="pro"] .nav-group__label--static:hover { color:var(--text-3); }

/* ------------------------------------------------------- live alerts ----- */
html[data-skin="pro"] .alert-card {
  background:linear-gradient(180deg, rgb(var(--pro-face-a) / .97), rgb(var(--pro-face-b) / .97));
  border-color:var(--border);
  backdrop-filter:blur(14px);
}
html[data-skin="pro"] .alert-card__icon { background:rgba(47,109,246,.16); color:var(--accent-500); }
html[data-skin="pro"] .alert-card--success .alert-card__icon { background:rgba(16,185,129,.16); color:#34d399; }
html[data-skin="pro"] .alert-card--warn .alert-card__icon { background:rgba(245,158,11,.16); color:#fbbf24; }
html[data-skin="pro"] .alert-card--critical {
  border-color:rgba(239,68,68,.5);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(239,68,68,.25);
}
html[data-skin="pro"] .alert-card--critical .alert-card__icon { background:rgba(239,68,68,.18); color:#f87171; }
html[data-skin="pro"] .alert-card--critical .alert-card__title { color:#fca5a5; }
/* Clear of the quick rail, which sits on the same side on a wide screen. */
@media (min-width:1025px){ html[data-skin="pro"] .alerts { inset-inline-end:auto; inset-inline-start:90px; } }