:root{
    /* ---- Mockup dark-navy palette (skates_dashboard_mockup.html) ---- */
    --bg:#070b12; --panel:#0d1422; --panel2:#111a2b; --panel-3:#151f33; --border:#263449;
    --border-soft:#1b2638; --text:#e5edf8; --text-dim:#8290a6; --faint:#516078;
    --accent:#3b82f6; --cyan:#22d3ee;
    --green:#22c55e; --yellow:#f59e0b; --red:#ef4444; --purple:#a855f7;
    --sidebar:#070b12; --sidebar-active:#16203a;
    --shadow:0 20px 80px rgba(0,0,0,.35);

    /* ---- Legacy var names kept as aliases so existing rules below need no renaming ---- */
    --bg2:var(--panel); --bg3:var(--panel2);
    --accent-dim:#1c2f52; --red-bg:#3f1414;
    --row-h:32px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;}
  body{
    background:
      radial-gradient(circle at 20% 0%, rgba(59,130,246,.15), transparent 30%),
      radial-gradient(circle at 80% 10%, rgba(34,211,238,.08), transparent 25%),
      var(--bg);
    color:var(--text);
    font-family:-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
    font-size:13px;
    display:flex; flex-direction:column; height:100vh; overflow:hidden;
  }
  .mono{font-family:Consolas,"Courier New",monospace;}
  a{color:var(--accent); text-decoration:none;}
  a:hover{text-decoration:underline;}
  button, input, select, textarea{
    font-family:inherit; font-size:inherit; color:var(--text);
    background:var(--bg3); border:1px solid var(--border); border-radius:3px;
    padding:5px 8px;
  }
  button{cursor:pointer;}
  button:hover{border-color:var(--accent);}
  button.primary{background:var(--accent-dim); border-color:var(--accent); color:#e8fffb;}
  button.primary:hover{background:var(--accent); color:#04211d;}
  button.danger{border-color:var(--red);}
  input:focus, select:focus, textarea:focus, button:focus{outline:1px solid var(--accent);}

  /* ---- Token gate ---- */
  #tokenGate{
    position:fixed; inset:0; background:var(--bg); display:flex;
    align-items:center; justify-content:center; z-index:1000;
  }
  #tokenGate.hidden{display:none;}
  .gate-box{
    background:var(--bg2); border:1px solid var(--border-soft); border-radius:16px;
    padding:28px 32px; width:340px; text-align:center;
    box-shadow:var(--shadow);
  }
  .gate-box h1{font-size:16px; margin:0 0 4px;}
  .gate-box p{color:var(--text-dim); font-size:12px; margin:0 0 16px;}
  .gate-box input{width:100%; margin-bottom:10px;}
  .gate-box button{width:100%;}

  /* ---- App shell ---- */
  #app{flex:1; display:grid; grid-template-columns:230px 1fr; grid-template-rows:64px 1fr; height:100vh; overflow:hidden;}

  /* ---- Topbar ---- */
  #topbar{
    grid-column:1 / 3;
    display:grid;
    grid-template-columns:230px 1fr auto auto;
    align-items:center;
    border-bottom:1px solid var(--border-soft);
    background:rgba(8,13,23,.82);
    backdrop-filter:blur(18px);
    box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
    flex-shrink:0;
  }
  .brand{
    height:64px; display:flex; align-items:center; gap:12px; padding:0 20px;
    border-right:1px solid var(--border-soft);
  }
  .logo{
    width:34px; height:34px; border-radius:11px;
    background:linear-gradient(135deg,var(--accent),var(--cyan));
    box-shadow:0 0 24px rgba(59,130,246,.45);
    display:grid; place-items:center; font-weight:900; color:white;
  }
  .brand-title{line-height:1.05}
  .brand-title b{font-size:14px; letter-spacing:.04em}
  .brand-title span{display:block; color:var(--text-dim); font-size:11px; margin-top:3px}

  .search-wrap{padding:0 22px}
  .search{
    height:38px; max-width:520px; display:flex; align-items:center; gap:10px;
    color:var(--faint); background:#0b1220; border:1px solid var(--border-soft);
    border-radius:14px; padding:0 14px; box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
  }
  .search span{font-size:15px}
  .search input{width:100%; background:transparent; border:0; outline:0; color:var(--text); font:inherit; padding:0;}

  /* ---- Topbar strips ------------------------------------------------
     TWO strips, TWO shapes, on purpose (CLB-101). A team pill is a square:
     one of an interchangeable grid, and clicking it switches bookings. A
     service pill is a capsule: a named daemon on the box, and clicking it
     restarts that daemon. Giving them the same shape would have put a
     restart one mis-click away from a bookings switch. */
  .strip-group{display:flex; align-items:center; gap:14px; padding-right:18px; min-width:0;}
  .team-strip{display:flex; gap:8px; align-items:center;}
  .team-pill{
    width:28px; height:28px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:800; letter-spacing:.03em;
    border:1px solid var(--border); background:#101827; color:var(--text-dim);
    position:relative;
  }
  .team-pill.ok{color:var(--green); border-color:rgba(34,197,94,.45); background:rgba(34,197,94,.08)}
  .team-pill.warn{color:var(--yellow); border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.08)}
  .team-pill.bad{color:var(--red); border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.08)}
  .team-pill.off{color:#64748b}
  /* The pill is a <button> now (the bookings switch) -- keep it looking like
     the div it replaced, and make it obviously clickable. */
  .team-pill{cursor:pointer; font-family:inherit; padding:0; transition:box-shadow .12s, opacity .12s;}
  .team-pill:hover{box-shadow:0 0 0 2px rgba(148,163,184,.25)}
  .team-pill:disabled{opacity:.45; cursor:progress}
  /* OFF FROM BOOKINGS is a separate axis from health: the colour still says
     whether the team is running, this ring says the Booker will skip it. */
  .team-pill.nobook{
    border-color:rgba(148,163,184,.75); border-style:dashed;
    background:repeating-linear-gradient(135deg,
      rgba(148,163,184,.10) 0 4px, transparent 4px 8px);
  }
  .team-pill.nobook::after{
    content:""; position:absolute; right:-2px; bottom:-2px;
    width:8px; height:8px; border-radius:50%;
    background:var(--yellow, #f59e0b); border:1px solid #0b1220;
  }
  /* RESTRICTED TO ONE CLIENT is a third, independent axis (right-click to set
     or clear) -- a purple dot at top-left so it never collides with the
     bottom-right "off from bookings" dot. */
  .team-pill.restricted::before{
    content:""; position:absolute; left:-2px; top:-2px;
    width:8px; height:8px; border-radius:50%;
    background:#a78bfa; border:1px solid #0b1220;
  }

  .svc-strip{
    display:flex; gap:5px; align-items:center;
    padding-left:14px; border-left:1px solid var(--border-soft);
  }
  .svc-pill{
    height:28px; display:inline-flex; align-items:center; gap:6px;
    padding:0 9px; border-radius:999px;
    border:1px solid var(--border); background:#101827; color:var(--faint);
    font-family:Consolas,"Courier New",monospace;
    font-size:10px; font-weight:800; letter-spacing:.06em;
    cursor:pointer; white-space:nowrap;
    transition:box-shadow .12s, border-color .12s, color .12s;
  }
  .svc-pill::before{
    content:""; width:6px; height:6px; border-radius:50%; flex-shrink:0;
    background:currentColor; box-shadow:0 0 8px currentColor;
  }
  .svc-pill.up{color:var(--green); border-color:rgba(34,197,94,.38); background:rgba(34,197,94,.07);}
  .svc-pill.down{color:var(--red); border-color:rgba(239,68,68,.5); background:rgba(239,68,68,.10);}
  .svc-pill:hover{box-shadow:0 0 0 2px rgba(148,163,184,.25);}
  .svc-pill:disabled{opacity:.5; cursor:progress;}
  /* A pill that is DOWN spells its whole name out. That is the one moment the
     name matters, and it is the moment you are hunting for it. */
  .svc-pill .svc-full{display:none;}
  .svc-pill.down .svc-full{display:inline;}
  .svc-pill.down .svc-code{display:none;}
  .svc-pill.busy{animation:svcPulse 1s ease-in-out infinite;}
  @keyframes svcPulse{50%{opacity:.35}}
  @media(prefers-reduced-motion:reduce){ .svc-pill.busy{animation:none; opacity:.45;} }
  /* Narrow desktop: the codes go, the colours stay. A pill that goes down
     still spells itself out, so nothing is lost at the moment it matters. */
  @media(max-width:1460px){
    .svc-pill{padding:0 7px;}
    .svc-pill .svc-code{display:none;}
  }

  .admin{
    height:64px; min-width:150px; display:flex; align-items:center; gap:10px;
    padding:0 18px; border-left:1px solid var(--border-soft); cursor:pointer;
  }
  .avatar{
    width:32px; height:32px; border-radius:50%;
    background:linear-gradient(135deg,#1f2937,#334155); border:1px solid var(--border);
  }
  .admin small{display:block; color:var(--text-dim); font-size:11px}
  .admin #logoutLink{color:var(--text-dim); font-size:11px;}

  /* ---- Sidebar ---- */
  #nav{
    background:rgba(7,11,18,.72); border-right:1px solid var(--border-soft);
    padding:18px 12px; overflow:auto; display:flex; flex-direction:column;
  }
  .nav-section{margin-bottom:20px}
  .nav-label{
    padding:0 10px 8px; color:var(--faint); font-size:10px;
    text-transform:uppercase; letter-spacing:.12em;
  }
  #nav .navitem{
    height:38px; display:flex; align-items:center; gap:10px;
    padding:0 12px; border-radius:12px; color:var(--text-dim);
    margin-bottom:4px; font-size:13px; cursor:pointer; border-left:none;
  }
  #nav .navitem:hover{color:var(--text); background:var(--panel2);}
  #nav .navitem.active{
    color:var(--text);
    background:linear-gradient(90deg,rgba(59,130,246,.18),rgba(34,211,238,.06));
    border:1px solid rgba(59,130,246,.26);
    box-shadow:0 0 28px rgba(59,130,246,.06);
  }
  .nav-icon{width:18px; text-align:center;}

  /* ---- Content ---- */
  #content{flex:1; overflow:auto; padding:22px; position:relative;}

  h2.viewtitle{margin:0 0 10px; font-size:15px; color:var(--text);}

  .page-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px;}
  .page-title h1{margin:0; font-size:24px; letter-spacing:-.03em;}
  .page-title p{margin:5px 0 0; color:var(--text-dim);}
  .live-status{display:flex; align-items:center; gap:8px; color:var(--text-dim); font-size:12px;}
  .live-status.failed{color:var(--red);}
  .pulse{width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 16px var(--green);}
  .live-status.failed .pulse{background:var(--red); box-shadow:0 0 16px var(--red);}

  .toolbar{display:flex; gap:8px; align-items:center; margin-bottom:10px; flex-wrap:wrap;}
  .toolbar .spacer{flex:1;}

  .tablewrap{overflow-x:auto; border:1px solid var(--border); border-radius:4px;}
  table{border-collapse:collapse; width:100%; min-width:600px;}
  thead th{
    position:sticky; top:0; background:var(--bg3); color:var(--text-dim);
    text-align:left; padding:6px 10px; font-size:11px; text-transform:uppercase;
    letter-spacing:0.03em; border-bottom:1px solid var(--border); cursor:pointer;
    white-space:nowrap; user-select:none;
  }
  thead th:hover{color:var(--accent);}
  thead th.sorted::after{content:" \25BE"; color:var(--accent);}
  thead th.sorted-asc::after{content:" \25B4"; color:var(--accent);}
  tbody tr{height:var(--row-h); border-bottom:1px solid var(--border);}
  tbody tr:hover{background:var(--bg2);}
  tbody tr.clickable{cursor:pointer;}
  tbody td{padding:5px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px;}
  tbody td.wrap{white-space:normal;}
  .zero{color:var(--red); font-weight:700;}
  .bold{font-weight:700;}
  .dim{color:var(--text-dim);}

  .pager{display:flex; gap:8px; align-items:center; margin-top:8px; font-size:12px; color:var(--text-dim);}

  /* ---- Detail panel (slide-over) ---- */
  #detailOverlay{
    position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:200; display:none;
  }
  #detailOverlay.show{display:block;}
  #detailPanel{
    position:fixed; top:0; right:0; bottom:0; width:min(760px, 96vw);
    background:var(--bg2); border-left:1px solid var(--border); z-index:201;
    display:flex; flex-direction:column; transform:translateX(100%);
    transition:transform 0.15s ease-out;
  }
  #detailPanel.show{transform:translateX(0);}
  /* The account editor puts a character's name, type tags, service, role, trader
     and level on one line — 760px cannot hold that without wrapping. Scoped to
     that editor so every other slide-over keeps its reading width. */
  #detailPanel.wide{width:min(1280px, 98vw);}
  #detailHeader{
    display:flex; align-items:center; gap:10px; padding:12px 16px;
    border-bottom:1px solid var(--border); flex-shrink:0;
  }
  #detailHeader h3{margin:0; font-size:15px; flex:1;}
  #detailBody{flex:1; overflow-y:auto; padding:14px 16px;}

  .card{background:var(--bg3); border:1px solid var(--border); border-radius:4px; padding:12px; margin-bottom:14px;}
  .card h4{margin:0 0 10px; font-size:12px; text-transform:uppercase; color:var(--text-dim); letter-spacing:0.04em;}
  .fieldgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}
  .field label{display:block; font-size:11px; color:var(--text-dim); margin-bottom:3px;}
  .field input{width:100%;}
  .kvgrid{display:grid; grid-template-columns:180px 1fr; gap:6px 10px; align-items:center;}
  .kvgrid label{font-size:11px; color:var(--text-dim); font-family:Consolas,monospace;}
  .kvgrid input{width:100%;}

  /* ---- Accounts view ---- */
  .teamgroup{border:1px solid var(--border); border-radius:4px; margin-bottom:10px; overflow:hidden;}
  .teamgroup-header{
    display:flex; align-items:center; gap:10px; padding:8px 12px;
    background:var(--bg3); cursor:pointer; user-select:none;
  }
  .teamgroup-header:hover{color:var(--accent);}
  .teamgroup-header .twist{width:10px; display:inline-block; color:var(--text-dim);}
  .teamgroup-header .count{color:var(--text-dim); font-size:11px;}
  .teamgroup-header .spacer{flex:1;}
  .teamgroup.collapsed .teamgroup-body{display:none;}
  .realm-chips{display:flex; flex-wrap:wrap; gap:5px;}
  .chip.bobarb{border-color:var(--accent); color:var(--text); font-weight:700;}
  table.realmtable input[type=text]{width:100%;}
  td.realm-label{color:var(--text-dim); font-family:Consolas,monospace; font-size:12px;}
  .pw-field{display:flex; gap:6px; align-items:center;}
  .pw-field input{flex:1;}
  .field .caption{font-size:10px; color:var(--text-dim); margin-top:3px;}

  /* ---- Dashboard view (legacy stat pills, kept for any leftover callers) ---- */
  .statrow{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px;}
  .statpill{background:var(--panel2); border:1px solid var(--border); border-radius:6px; padding:10px 14px; min-width:110px;}
  .statpill .label{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.03em;}
  .statpill .value{font-size:14px; margin-top:2px;}
  .statpill.big .value{font-size:22px; font-weight:700; color:var(--accent);}
  .subhead{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.03em; margin:10px 0 6px;}
  .subhead:first-child{margin-top:0;}

  /* ---- Dashboard view (mockup KPI + panel layout) ---- */
  /* Quadratic KPI cards — same width and height, one wrapping row. */
  .kpi-grid{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px;}
  .kpi-card{
    position:relative; width:120px; height:120px; padding:12px;
    border:1px solid var(--border-soft); border-radius:18px;
    background:linear-gradient(180deg,rgba(255,255,255,.035),transparent), var(--panel);
    box-shadow:var(--shadow); overflow:hidden;
  }
  .kpi-card::after{
    content:""; position:absolute; inset:auto -25px -35px auto;
    width:80px; height:80px; border-radius:50%;
    background:rgba(59,130,246,.11); filter:blur(2px);
  }
  .kpi-card.primary::after{background:rgba(34,197,94,.12)}
  .kpi-label{color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; font-size:9px; font-weight:800;}
  .kpi-main{font-size:19px; line-height:1; margin-top:12px; font-weight:900; letter-spacing:-.04em;}
  .kpi-sub{color:var(--text-dim); margin-top:6px; font-size:11px;}
  .kpi-card.primary .kpi-main{font-size:30px; color:var(--green);}

  /* Row A only: Active Services beside Alerts. Both are driven by the SAME
     entries list, so they grow and shrink together and neither can run away
     from the other. */
  .dashboard-grid{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr); gap:16px; align-items:start;}
  /* Row B: the three feeds are a BAND across the page, not a rail down the
     side of it. Stacked in the right column they ran ~1,400px tall against a
     ~150px Active Services panel and left a void the height of a screen
     whenever nothing was running -- which is most of the time (CLB-101).
     NOT `.feed-row` -- jsp.js and p8.js already own that name for a single
     feed LINE (74px 1fr auto), and it silently won this grid. */
  .dash-feeds{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:16px;}
  .panel{
    border:1px solid var(--border-soft); background:rgba(13,20,34,.84);
    border-radius:20px; box-shadow:var(--shadow); overflow:hidden;
  }
  .panel-head{
    height:52px; display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; border-bottom:1px solid var(--border-soft);
  }
  .panel-head h2{margin:0; font-size:13px; text-transform:uppercase; letter-spacing:.1em;}
  .panel-head span{color:var(--text-dim); font-size:12px;}

  .service-list{padding:12px; display:grid; gap:10px;}
  .service-card{
    border:1px solid var(--border-soft); border-radius:16px;
    background:linear-gradient(90deg,rgba(34,197,94,.08),transparent 30%), #0b1220;
    overflow:hidden;
  }
  .service-card.degraded{background:linear-gradient(90deg,rgba(245,158,11,.08),transparent 30%), #0b1220;}
  .service-card.offline{background:linear-gradient(90deg,rgba(239,68,68,.08),transparent 30%), #0b1220;}
  .service-summary{
    display:grid; grid-template-columns:1.1fr .75fr .4fr .35fr .95fr .45fr 1fr .65fr .4fr .5fr .75fr 68px;
    align-items:center; gap:12px; padding:14px;
  }
  .customer b{display:block;}
  .customer span{display:block; color:var(--text-dim); font-size:12px; margin-top:3px;}
  .cell-label{display:block; color:var(--faint); font-size:10px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px;}
  .status{
    display:inline-flex; align-items:center; gap:7px; padding:5px 9px; border-radius:999px;
    font-size:12px; font-weight:800; border:1px solid rgba(34,197,94,.38);
    color:var(--green); background:rgba(34,197,94,.08);
  }
  .status::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 12px currentColor;}
  .status.warn{border-color:rgba(245,158,11,.38); color:var(--yellow); background:rgba(245,158,11,.08);}
  .status.bad{border-color:rgba(239,68,68,.38); color:var(--red); background:rgba(239,68,68,.08);}
  .open-btn{
    height:32px; border-radius:999px; border:1px solid rgba(59,130,246,.45);
    color:#bfdbfe; background:rgba(59,130,246,.12); font-weight:800;
  }
  .service-details{
    border-top:1px solid var(--border-soft); background:rgba(8,13,23,.58); padding:14px;
  }
  .service-details .toolbar{margin-bottom:10px;}

  .alert-list{padding:12px; display:grid; gap:10px;}
  .alert{display:flex; gap:10px; padding:12px; border:1px solid var(--border-soft); border-radius:16px; background:#0b1220;}
  .alert-icon{
    width:28px; height:28px; border-radius:10px; display:grid; place-items:center;
    background:rgba(245,158,11,.12); color:var(--yellow); border:1px solid rgba(245,158,11,.28);
  }
  .alert.ok .alert-icon{background:rgba(34,197,94,.1); color:var(--green); border-color:rgba(34,197,94,.28);}
  .alert.bad .alert-icon{background:rgba(239,68,68,.1); color:var(--red); border-color:rgba(239,68,68,.28);}
  .alert b{display:block;}
  .alert span{display:block; color:var(--text-dim); font-size:12px; margin-top:3px;}

  .pc-panel{margin-top:16px;}
  .pc-grid{padding:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
  .pc-card{
    display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px;
    padding:13px 14px; border-radius:16px; border:1px solid var(--border-soft); background:#0b1220;
  }
  .pc-name b{display:block;}
  .pc-name span{display:block; color:var(--text-dim); font-size:12px; margin-top:3px;}
  .pc-metric{text-align:right;}
  .pc-metric span{display:block; color:var(--faint); font-size:10px; text-transform:uppercase; letter-spacing:.08em;}
  .pc-metric b{font-size:16px;}
  .pc-metric b.good{color:var(--green);}
  .pc-metric b.bad{color:var(--red);}

  @media(max-width:1200px){
    .dashboard-grid{grid-template-columns:1fr}
    .dash-feeds{grid-template-columns:1fr}
    .service-summary{grid-template-columns:1fr 1fr 1fr}
    .pc-grid{grid-template-columns:repeat(2,1fr)}
  }

  /* ---- Active view ---- */
  .active-head{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:8px; font-size:13px;}
  .active-head .dim{color:var(--text-dim);}

  /* ---- Fleet view ---- */
  .fleetgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; margin-bottom:14px;}
  .badge{padding:2px 8px; border-radius:10px; font-size:11px; font-weight:700; white-space:nowrap;}
  .badge-online{background:#173a2a; color:#7ee6ac; border:1px solid #2fa869;}
  .badge-degraded{background:#3a2a10; color:#e8c97a; border:1px solid var(--yellow);}
  .badge-stale{background:var(--red-bg); color:#ffd8d8; border:1px solid var(--red);}
  .pccard-head{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
  .pccard-head .pcname{font-weight:700; flex:1;}
  .bookingline{font-size:12px; padding:3px 0; border-bottom:1px solid var(--border);}
  .bookingline:last-child{border-bottom:none;}
  #fleetUpdatedAt{font-size:11px; color:var(--text-dim); margin-left:8px;}

  /* ---- Services view ---- */
  .badge-unknown{background:var(--bg3); color:var(--text-dim); border:1px solid var(--border);}
  .card.svc-card.failed{border-left:3px solid var(--red);}
  .svc-logs{
    background:var(--bg); border:1px solid var(--border); border-radius:3px;
    padding:8px; font-size:11px; max-height:320px; overflow:auto; white-space:pre-wrap;
    margin:0;
  }

  details.jsonblock{margin-top:4px;}
  details.jsonblock summary{cursor:pointer; color:var(--accent); font-size:11px;}
  details.jsonblock pre{
    background:var(--bg); border:1px solid var(--border); border-radius:3px;
    padding:8px; font-size:11px; overflow-x:auto; margin:6px 0 0;
  }

  #configArea{
    width:100%; height:60vh; font-family:Consolas,monospace; font-size:12px;
    resize:vertical;
  }

  /* ---- Partners view ---- */
  .dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--text-dim);}
  .dot-on{background:#2fa869;}
  .codeblock{
    display:block; background:var(--bg); border:1px solid var(--border); border-radius:3px;
    padding:8px; font-size:12px; word-break:break-all; margin:0 0 8px;
  }

  /* ---- Toasts ---- */
  #toasts{
    position:fixed; bottom:16px; right:16px; z-index:500; display:flex;
    flex-direction:column; gap:8px; max-width:420px;
  }
  .toast{
    background:var(--red-bg); border:1px solid var(--red); color:#ffd8d8;
    padding:8px 12px; border-radius:4px; font-size:12px;
  }
  .toast.ok{background:#173a2a; border-color:#2fa869; color:#c6f0d9;}

  .empty{color:var(--text-dim); padding:30px; text-align:center;}

  /* ---- P8 Control view ---- */
  .session-select{display:flex; gap:10px; align-items:center; background:#0b1220; border:1px solid var(--border-soft); border-radius:14px; padding:8px 10px;}
  .session-select label{color:var(--text-dim); font-size:12px;}
  .session-select select{background:var(--panel2); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:7px 10px;}

  .hero{display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:16px;}
  .team-hero{padding:18px;}
  .team-top{display:grid; grid-template-columns:1fr auto; gap:18px; align-items:start;}
  .live-badge{
    display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px;
    color:var(--green); background:rgba(34,197,94,.09); border:1px solid rgba(34,197,94,.35);
    font-size:12px; font-weight:900;
  }
  .live-badge::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 14px currentColor;}
  .live-badge.offline{color:var(--red); background:rgba(239,68,68,.09); border-color:rgba(239,68,68,.35);}
  .team-name{font-size:36px; font-weight:950; letter-spacing:-.05em; margin:12px 0 6px;}
  .team-sub{color:var(--text-dim);}
  .game-box{
    background:linear-gradient(180deg,rgba(255,255,255,.035),transparent), #0b1220;
    border:1px solid var(--border-soft); border-radius:18px; padding:14px; min-width:270px;
  }
  .game-box .label{display:block; color:var(--faint); font-size:10px; text-transform:uppercase; letter-spacing:.1em; font-weight:900; margin-bottom:5px;}
  .game-name{font-size:24px; font-weight:900; letter-spacing:-.03em;}
  .copy-row{display:flex; gap:8px; margin-top:12px;}

  .metric-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px;}
  .metric{background:#0b1220; border:1px solid var(--border-soft); border-radius:16px; padding:13px;}
  .metric b{display:block; font-size:24px; line-height:1; letter-spacing:-.04em;}
  .metric span{display:block; color:var(--text-dim); font-size:12px; margin-top:8px;}

  .actions{padding:14px; display:grid; gap:10px;}
  .action-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .big-action{
    height:62px; border:1px solid var(--border); border-radius:16px; background:#0b1220;
    color:var(--text); font-weight:900; font-size:14px; text-align:left; padding:0 16px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .big-action.primary{background:linear-gradient(135deg,rgba(59,130,246,.24),rgba(34,211,238,.08)); border-color:rgba(59,130,246,.46);}
  .big-action.green{background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(34,197,94,.04)); border-color:rgba(34,197,94,.38);}
  .big-action.red{background:linear-gradient(135deg,rgba(239,68,68,.18),rgba(239,68,68,.04)); border-color:rgba(239,68,68,.38);}
  .big-action.purple{background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(168,85,247,.04)); border-color:rgba(168,85,247,.38);}
  .big-action span{color:var(--text-dim); font-size:12px; font-weight:700;}

  .members-panel{margin-bottom:16px;}
  .members-grid{padding:14px; display:grid; grid-template-columns:repeat(7,1fr); gap:10px;}
  .member{
    position:relative; min-height:190px;
    background:linear-gradient(180deg,rgba(255,255,255,.035),transparent), #0b1220;
    border:1px solid var(--border-soft); border-radius:18px; padding:13px; overflow:hidden;
  }
  .member-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .role{
    font-size:11px; font-weight:950; border-radius:999px; padding:5px 8px;
    border:1px solid rgba(245,158,11,.3); color:#fed7aa; background:rgba(245,158,11,.1);
  }
  .role.main{color:#bfdbfe; background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.38);}
  .role.leader{color:#d8b4fe; background:rgba(168,85,247,.14); border-color:rgba(168,85,247,.38);}
  .role.barb{color:#fecaca; background:rgba(239,68,68,.13); border-color:rgba(239,68,68,.36);}
  .role.chanter{color:#fde68a; background:rgba(245,158,11,.13); border-color:rgba(245,158,11,.36);}
  .p8-dot{width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 14px var(--green);}
  .p8-dot.warn{background:var(--yellow); box-shadow:0 0 14px var(--yellow);}
  .p8-dot.bad{background:var(--red); box-shadow:0 0 14px var(--red);}
  .char-icon{
    width:46px; height:46px; border-radius:16px; display:grid; place-items:center;
    background:linear-gradient(135deg,#182236,#0e1626); border:1px solid var(--border);
    font-size:22px; margin-bottom:10px;
  }
  .char-sprite{width:46px; height:46px; border-radius:16px; object-fit:cover; margin-bottom:10px; display:block;}
  .member h3{margin:0; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .member .acct{color:var(--text-dim); font-size:12px; margin-top:4px;}
  .stat-lines{margin-top:12px; display:grid; gap:7px;}
  .stat-line{display:flex; justify-content:space-between; gap:8px; color:var(--text-dim); font-size:12px;}
  .stat-line b{color:var(--text); font-weight:800;}
  .member-actions{position:relative; z-index:1; margin-top:12px; display:grid; gap:7px;}
  .member-actions button, .member-actions select{
    height:30px; border-radius:10px; border:1px solid var(--border); background:var(--panel2);
    color:var(--text); font-size:12px; font-weight:800; width:100%;
  }
  .action-menu{display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:10px; border:1px solid var(--border-soft); border-radius:16px; background:#0b1220;}
  .action-menu div{padding:8px 10px; border:1px solid var(--border-soft); border-radius:12px; color:var(--text-dim); font-size:12px; background:rgba(255,255,255,.02);}

  .lower{display:grid; grid-template-columns:1fr .8fr; gap:16px;}
  .feed{padding:12px; display:grid; gap:10px;}
  .feed-row{
    display:grid; grid-template-columns:74px 1fr auto; gap:10px; align-items:center;
    padding:10px 12px; border:1px solid var(--border-soft); background:#0b1220; border-radius:14px;
  }
  .feed-row time{color:var(--faint); font-size:12px;}
  .feed-row span{color:var(--text-dim);}
  .chat-box{padding:12px; display:grid; gap:9px;}
  .chat-line{padding:10px 12px; background:#0b1220; border:1px solid var(--border-soft); border-radius:14px;}
  .chat-line b{color:#bfdbfe;}
  .chat-line span{color:var(--text-dim);}

  .skeleton{opacity:.45; cursor:not-allowed;}

  @media(max-width:1300px){
    .hero,.lower{grid-template-columns:1fr;}
    .members-grid{grid-template-columns:repeat(3,1fr);}
  }

  /* ---- Mobile: off-canvas nav + single-column shell ----
     Activated by html.is-mobile, set from DEVICE detection (coarse pointer /
     mobile UA) at load — NOT window width. A phone is always mobile (even in
     landscape); a desktop is always desktop (even in a narrow window). */
  #navToggle{display:none;}
  #navBackdrop{display:none;}
  html.is-mobile body{height:100dvh;}
  html.is-mobile #app{grid-template-columns:1fr; grid-template-rows:56px 1fr; height:100dvh;}
  html.is-mobile #topbar{grid-column:1; grid-template-columns:auto auto 1fr auto;}
  html.is-mobile #navToggle{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; margin-left:10px; font-size:18px;
    background:var(--panel2); border:1px solid var(--border-soft); border-radius:10px;
    flex-shrink:0;
  }
  html.is-mobile .brand{height:56px; padding:0 10px; border-right:0;}
  html.is-mobile .brand-title{display:none;}
  html.is-mobile .strip-group{display:none;}
  html.is-mobile .search-wrap{padding:0 8px; min-width:0;}
  html.is-mobile .search{height:36px; border-radius:10px; padding:0 10px;}
  html.is-mobile .admin{height:56px; min-width:0; padding:0 10px; gap:8px;}
  html.is-mobile .admin b{display:none;}
  html.is-mobile #nav{
    position:fixed; top:56px; left:0; bottom:0; width:250px; z-index:60;
    background:var(--bg);
    transform:translateX(-105%); transition:transform .18s ease;
  }
  html.is-mobile #nav.open{transform:none; box-shadow:0 0 60px rgba(0,0,0,.6);}
  html.is-mobile #nav .navitem{padding:11px 12px;}
  html.is-mobile #navBackdrop.open{
    display:block; position:fixed; top:56px; left:0; right:0; bottom:0;
    background:rgba(0,0,0,.45); z-index:55;
  }
  html.is-mobile #content{padding:12px;}
  /* bigger tap targets inside views only (topbar/search keep their metrics) */
  html.is-mobile #content button, html.is-mobile #content select,
  html.is-mobile #content input, html.is-mobile #content textarea{
    padding:9px 12px; border-radius:6px;
  }
  html.is-mobile .gate-box{width:min(340px, calc(100vw - 32px));}
  /* single-column dashboard + full-width tables on mobile */
  html.is-mobile .dashboard-grid{grid-template-columns:1fr;}
  html.is-mobile .dash-feeds{grid-template-columns:1fr;}
  html.is-mobile .pc-grid{grid-template-columns:1fr 1fr;}

/* === SkateD2RCLB (S2R) additions === */
/* Ported verbatim from F:\SkateD2RCLB-wt-csmmenu\webui\index.html <style>
   lines 97-193 ("Runtypes view" through "Catalogue view"). .panel/.panel-head/
   .status and .mono already exist above (identical definitions) and are
   reused as-is -- not duplicated here. */

/* --- Runtypes view --- */
.rt-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px;}
.rt-card{
  border-radius:16px; padding:14px; border:1px solid var(--border-soft);
  background:var(--panel2);
}
.rt-card .rt-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.rt-card h3{margin:0; font-size:14px;}
.rt-card p{margin:6px 0 10px; color:var(--text-dim); font-size:12px;}
.rt-card button{
  width:100%; padding:8px; border-radius:10px; border:1px solid rgba(59,130,246,.4);
  background:rgba(59,130,246,.14); color:var(--text); cursor:pointer; font:inherit;
}
.rt-card button:hover{ background:rgba(59,130,246,.24); }
.rt-card.stub{
  border-style:dashed; border-color:var(--faint); background:rgba(21,31,51,.4);
  filter:saturate(.55); opacity:.82;
}
.rt-card.stub h3{color:var(--text-dim);}
.rt-card.stub ul{margin:0; padding-left:18px; color:var(--faint); font-size:12px;}
.rt-card.stub .needs-label{font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; margin-top:2px;}
.rt-card.selected{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }

/* --- Start wizard --- */
.wizard-step{ margin-bottom:26px; padding-bottom:24px; border-bottom:1px solid var(--border-soft); }
.wizard-step:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.step-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.step-num{
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(34,211,238,.12));
  border:1px solid rgba(59,130,246,.45); color:var(--cyan); font-size:11px; font-weight:700; flex:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 14px rgba(59,130,246,.12);
}
.step-head h3{ margin:0; font-size:13px; }
.step-sub{
  display:inline-flex; align-items:center; gap:6px; margin-left:auto;
  color:var(--cyan); font-size:11px; font-weight:600; letter-spacing:.02em;
  background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.24);
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}
table.acct.selectable th:first-child, table.acct.selectable td:first-child{ width:24px; }
.role-row{
  display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:12px;
  background:var(--panel2); border:1px solid var(--border-soft); margin-bottom:8px;
}
.role-row .acct-name{ min-width:160px; }
.role-row select{
  background:var(--panel-3); color:var(--text); border:1px solid var(--border-soft);
  border-radius:8px; padding:7px 10px; font:inherit; transition:border-color .15s;
}
.role-row select + select{ margin-left:4px; }
.role-row select:hover, .role-row select:focus{ border-color:var(--accent); outline:none; }

/* Session settings -- one grouped card (matches the app's own P8
   session-select / game-box treatment), not a bare label-over-input grid. */
.settings-bar{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent), #0b1220;
  border:1px solid var(--border-soft); border-radius:16px; padding:16px 18px;
}
.settings-field{ display:flex; flex-direction:column; gap:6px; min-width:150px; }
.settings-field label{
  font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.09em; font-weight:700;
}
.settings-bar select, .settings-bar input, .game-card select, .game-card input{
  background:var(--panel2); color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:9px 12px; font:inherit; min-width:150px;
  transition:border-color .15s, box-shadow .15s;
}
.settings-bar select:hover, .settings-bar input:hover,
.game-card select:hover, .game-card input:hover{ border-color:var(--accent); }
.settings-bar select:focus, .settings-bar input:focus,
.game-card select:focus, .game-card input:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,130,246,.16);
}

/* Session axes as radio groups. Every rule here has to OUT-SPECIFY two
   neighbours that would otherwise capture these elements: `.settings-bar input`
   above (which would give each radio dot 9px padding and a 150px min-width) and
   `.settings-field label` (10px uppercase faint -- correct for the axis title,
   unreadable on the options). Hence the `.settings-field` / `.settings-bar`
   prefixes rather than bare classes. */
.radio-group{ display:flex; flex-wrap:wrap; gap:6px; }
.settings-field .radio-opt{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 12px; border-radius:10px; cursor:pointer;
  background:var(--panel2); border:1px solid var(--border);
  font:inherit; font-size:13px; font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--text-dim);
  transition:border-color .15s, color .15s, background .15s;
  user-select:none;
}
.settings-field .radio-opt:hover{ border-color:var(--accent); color:var(--text); }
.settings-field .radio-opt.on{
  border-color:var(--accent); color:var(--text); background:rgba(59,130,246,.14);
}
.settings-bar .radio-group input[type=radio]{
  /* Reset of `.settings-bar input` -- otherwise the dot is a 150px-wide box. */
  min-width:0; width:13px; height:13px; margin:0; padding:0;
  border-radius:50%; accent-color:var(--accent); cursor:pointer;
  flex:0 0 auto; box-shadow:none;
}
.settings-bar .radio-group input[type=radio]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

#startBtn{
  margin-top:20px; padding:13px 22px; border-radius:12px; border:1px solid rgba(34,197,94,.4);
  background:rgba(34,197,94,.14); color:var(--text); font:inherit; font-weight:700; cursor:pointer;
  letter-spacing:.01em; transition:background .15s, transform .1s;
}
#startBtn:disabled{ opacity:.4; cursor:not-allowed; border-color:var(--border-soft); background:var(--panel2); }
#startBtn:not(:disabled):hover{ background:rgba(34,197,94,.24); }
#startBtn:not(:disabled):active{ transform:scale(.98); }
.start-summary{ margin-top:14px; padding:14px 16px; border-radius:12px; background:var(--panel-3); border:1px solid var(--border-soft); font-size:12px; }
.start-summary pre{ margin:8px 0 0; white-space:pre-wrap; }
.faint-note{ color:var(--faint); font-size:11px; margin-top:12px; line-height:1.5; }

/* Game & start -- same card treatment as the settings bar, so the whole
   wizard reads as one consistent control surface. */
.game-card{
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent), #0b1220;
  border:1px solid var(--border-soft); border-radius:16px; padding:16px 18px;
}
.game-line-sep{ color:var(--faint); padding-bottom:10px; font-size:16px; }

/* --- Accounts view --- */
.banner{
  display:flex; align-items:center; gap:10px; padding:10px 14px; margin-bottom:14px;
  border-radius:12px; border:1px solid var(--border-soft); background:var(--panel2);
  font-size:12px; color:var(--text-dim);
}
table.acct{ width:100%; border-collapse:collapse; font-size:12px; }
table.acct th, table.acct td{
  padding:8px 10px; text-align:left; border-bottom:1px solid var(--border-soft);
  white-space:nowrap;
}
table.acct th{ color:var(--faint); font-weight:600; text-transform:uppercase; font-size:10px; letter-spacing:.05em; }
.acct-wrap{overflow-x:auto;}
.ladder-badge{display:inline-flex; gap:6px; color:var(--text-dim);}
.ladder-badge b{color:var(--text);}

/* --- Empty states --- */
.empty-state{ padding:60px 20px; text-align:center; color:var(--text-dim); }
.empty-state h3{ color:var(--text); margin-bottom:8px; }
textarea.mono{
  width:100%; min-height:160px; margin-top:16px; padding:10px;
  background:var(--panel-3); color:var(--text); border:1px solid var(--border-soft);
  border-radius:12px; resize:vertical;
}

/* --- Catalogue view --- */
.sprite-grid{ display:grid; grid-template-columns:repeat(auto-fill,98px); gap:0; }
.sprite-cell{
  width:98px; height:98px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-soft); background:var(--panel-3); cursor:pointer;
}
.sprite-cell:hover{ border-color:var(--accent); }
.sprite-cell img{ max-width:88px; max-height:88px; image-rendering:pixelated; }
#tooltipBox{
  position:fixed; z-index:50; display:none; padding:10px 14px; border-radius:10px;
  border:1px solid var(--border-soft); background:rgba(7,11,18,.96); min-width:180px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
#tooltipBox .line{ font-size:12px; line-height:1.5; white-space:nowrap; }

/* ===================== RE Board — Dictionary sub-view =====================
   Protocol dictionary rendered inside the RE Board. Everything is scoped under
   #reDictRoot so it cannot collide with the rest of the CSM cascade. Colours
   come from the existing token set only — no new palette. */
  #reDictRoot .rd-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0 12px;}
  #reDictRoot .rd-search{flex:1 1 260px;min-width:200px;background:var(--panel);
    border:1px solid var(--border);color:var(--text);border-radius:4px;padding:8px 11px;
    font:13px/1.4 ui-monospace,Consolas,monospace;}
  #reDictRoot .rd-search:focus{outline:none;border-color:var(--accent);}
  #reDictRoot .rd-count{font:11px/1 ui-monospace,Consolas,monospace;color:var(--text-dim);}
  #reDictRoot .rd-jump{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
  #reDictRoot .rd-jump button{background:var(--panel);border:1px solid var(--border);
    color:var(--text-dim);border-radius:999px;padding:4px 11px;cursor:pointer;
    font:11px/1.5 ui-monospace,Consolas,monospace;}
  #reDictRoot .rd-jump button:hover{color:var(--cyan);border-color:var(--accent);}
  #reDictRoot .rd-sec{margin-bottom:22px;}
  #reDictRoot .rd-sec > h3{font:600 13px/1.3 ui-monospace,Consolas,monospace;color:var(--text);
    margin:0 0 6px;padding-bottom:7px;border-bottom:1px solid var(--border);letter-spacing:.02em;}
  #reDictRoot .rd-sec > p.rd-lede{color:var(--text-dim);font-size:12.5px;margin:8px 0 10px;max-width:80ch;}
  #reDictRoot .rd-ent{background:var(--panel);border:1px solid var(--border-soft);
    border-left:3px solid var(--faint);border-radius:4px;padding:11px 13px;margin:9px 0;}
  #reDictRoot .rd-ent.p{border-left-color:var(--green);}
  #reDictRoot .rd-ent.h{border-left-color:var(--yellow);}
  #reDictRoot .rd-ent.o{border-left-color:var(--faint);}
  #reDictRoot .rd-ent-h{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline;margin-bottom:5px;}
  #reDictRoot .rd-ent-h .nm{font:600 13px/1.3 ui-monospace,Consolas,monospace;color:var(--text);}
  #reDictRoot .rd-ent-h .sb{font:11.5px/1.3 ui-monospace,Consolas,monospace;color:var(--text-dim);}
  #reDictRoot .rd-chip{display:inline-flex;align-items:center;gap:5px;border-radius:3px;
    padding:1px 7px;font:10px/1.7 ui-monospace,Consolas,monospace;letter-spacing:.07em;
    text-transform:uppercase;white-space:nowrap;}
  #reDictRoot .rd-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;}
  #reDictRoot .rd-chip.p{color:var(--green);background:rgba(34,197,94,.12);}
  #reDictRoot .rd-chip.h{color:var(--yellow);background:rgba(245,158,11,.13);}
  #reDictRoot .rd-chip.o{color:var(--text-dim);background:rgba(130,144,166,.14);}
  #reDictRoot pre.rd-pre{background:var(--bg);border:1px solid var(--border);border-radius:4px;
    padding:10px 12px;overflow-x:auto;margin:8px 0;
    font:12px/1.6 ui-monospace,Consolas,monospace;color:var(--text);white-space:pre;}
  #reDictRoot .rd-ev{border-top:1px dashed var(--border);margin-top:10px;padding-top:8px;
    font-size:12px;color:var(--text-dim);}
  #reDictRoot .rd-ev b{color:var(--text);font-weight:600;}
  #reDictRoot table.rd-tbl{width:100%;min-width:0;border-collapse:collapse;font-size:12.5px;
    font-variant-numeric:tabular-nums;margin:6px 0;}
  #reDictRoot table.rd-tbl th{text-align:left;font:600 10px/1.6 ui-monospace,Consolas,monospace;
    letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);
    border-bottom:1px solid var(--border);padding:6px 12px 6px 0;white-space:nowrap;}
  #reDictRoot table.rd-tbl td{border-bottom:1px solid var(--border-soft);padding:6px 12px 6px 0;
    vertical-align:top;color:var(--text);}
  #reDictRoot table.rd-tbl td.f{font-family:ui-monospace,Consolas,monospace;color:var(--cyan);white-space:nowrap;}
  #reDictRoot table.rd-tbl td.n{font-family:ui-monospace,Consolas,monospace;color:var(--text-dim);white-space:nowrap;}
  #reDictRoot .rd-wrap{overflow-x:auto;}
  #reDictRoot .rd-note{border:1px solid var(--border);border-top:2px solid var(--accent);
    background:var(--panel-3);border-radius:4px;padding:11px 13px;margin:10px 0;}
  #reDictRoot .rd-note .t{font:10.5px/1.6 ui-monospace,Consolas,monospace;letter-spacing:.1em;
    text-transform:uppercase;color:var(--cyan);margin-bottom:6px;}
  #reDictRoot .rd-note p{margin:0;font-size:12.5px;color:var(--text);max-width:78ch;}
  #reDictRoot .rd-hide{display:none !important;}
  #reDictRoot .rd-tabs{display:flex;gap:6px;margin:0 0 12px;}
  #reDictRoot .rd-tabs button{background:var(--panel);border:1px solid var(--border);
    color:var(--text-dim);border-radius:4px;padding:6px 14px;cursor:pointer;font-size:12.5px;}
  #reDictRoot .rd-tabs button.on{background:var(--sidebar-active);color:var(--text);border-color:var(--accent);}

/* Dictionary: the derivations disclosure. Prose sits behind this, closed, so
   the opcode index is the first and only thing on screen by default. */
  #reDictRoot details.rd-notes{margin-top:18px;border:1px solid var(--border);
    border-radius:4px;background:var(--panel);}
  #reDictRoot details.rd-notes > summary{cursor:pointer;padding:10px 13px;
    font:12.5px/1.4 ui-monospace,Consolas,monospace;color:var(--text-dim);list-style:none;}
  #reDictRoot details.rd-notes > summary::-webkit-details-marker{display:none;}
  #reDictRoot details.rd-notes > summary::before{content:"\25B8 ";color:var(--cyan);}
  #reDictRoot details.rd-notes[open] > summary::before{content:"\25BE ";}
  #reDictRoot details.rd-notes > summary:hover{color:var(--text);}
  #reDictRoot details.rd-notes > div{padding:4px 13px 13px;}