/* Safeline workspace shell: top bar, left rail, status bar.
   Chrome tokens are sl- prefixed so page styles never collide. */
:root{
  --sl-paper:#ffffff; --sl-chrome:#fafbfd; --sl-ink:#17223a; --sl-soft:#5a6475; --sl-faint:#959cab;
  --sl-line:#e4e8ef; --sl-hair:#eef1f6;
  --sl-blue:#16418f; --sl-blue-deep:#0e2f6b; --sl-blue-tint:#f2f6fd;
  --sl-red:#b31f36; --sl-red-tint:#fdf3f4;
  --sl-ok:#136b43;
  --sl-sans:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sl-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
body.shell{
  margin:0;background:var(--sl-chrome);color:var(--sl-ink);font-family:var(--sl-sans);
  -webkit-text-size-adjust:100%;
  display:grid;grid-template-columns:232px minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto;
  height:100dvh;overflow:hidden;
}

.sl-keyline{grid-column:1/-1;height:3px;
  background:linear-gradient(90deg,var(--sl-red) 0 232px,var(--sl-blue) 232px 100%)}

.sl-top{grid-column:1/-1;display:flex;align-items:center;gap:14px;
  background:var(--sl-paper);border-bottom:1px solid var(--sl-line);padding:0 20px;height:54px}
.sl-brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--sl-ink)}
.sl-brand .name{font-weight:600;font-size:16px;letter-spacing:.04em;color:var(--sl-ink)}
.sl-brand .name b{color:var(--sl-red);font-weight:600}
.sl-brand .sub{color:var(--sl-soft);font-size:13px}
.sl-meta{margin-left:auto;display:flex;align-items:center;gap:16px;
  font-family:var(--sl-mono);font-size:12px;color:var(--sl-soft)}
.sl-conn{color:var(--sl-ok)} .sl-conn.down{color:var(--sl-red)}
@media (max-width:700px){.sl-brand .sub,.sl-clock{display:none}}

.sl-rail{background:var(--sl-paper);border-right:1px solid var(--sl-line);padding:18px 0 14px;
  display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0}
.sl-rail .head{font-family:var(--sl-mono);font-size:10.5px;letter-spacing:.14em;color:var(--sl-faint);
  text-transform:uppercase;padding:14px 20px 6px}
.sl-rail .head:first-child{padding-top:0}
.sl-rail a{display:block;padding:9px 20px 9px 17px;border-left:3px solid transparent;
  text-decoration:none;color:var(--sl-ink);font-size:14.5px}
.sl-rail a:hover{background:var(--sl-blue-tint);color:var(--sl-blue-deep)}
.sl-rail a.on{border-left-color:var(--sl-red);background:var(--sl-blue-tint);
  color:var(--sl-blue-deep);font-weight:600}
.sl-rail .foot{margin-top:auto;padding:14px 20px 4px;font-size:12.5px;color:var(--sl-soft);
  border-top:1px solid var(--sl-hair);line-height:1.5}
.sl-rail .foot b{color:var(--sl-red)}

.sl-main{grid-column:2;min-height:0;overflow-y:auto;overscroll-behavior:contain}

.sl-status{grid-column:1/-1;display:flex;gap:18px;align-items:center;
  background:var(--sl-paper);border-top:1px solid var(--sl-line);padding:0 20px;height:30px;
  font-family:var(--sl-mono);font-size:11px;color:var(--sl-faint);overflow:hidden;white-space:nowrap}
.sl-status .right{margin-left:auto}

@media (max-width:900px){
  body.shell{display:flex;flex-direction:column;height:auto;min-height:100dvh;overflow:auto}
  .sl-rail{flex-direction:row;align-items:center;overflow-x:auto;border-right:0;
    border-bottom:1px solid var(--sl-line);padding:0 8px;gap:0;flex:none}
  .sl-rail .head,.sl-rail .foot{display:none}
  .sl-rail a{border-left:0;border-bottom:3px solid transparent;padding:11px 13px;white-space:nowrap}
  .sl-rail a.on{border-bottom-color:var(--sl-red);background:none}
  .sl-main{overflow:visible;flex:1}
  .sl-status{margin-top:auto}
}