/* ============================================================
   opnOS shell v0.3.0 — opnf.sh design system
   Tokens mirror the site theme + terminal plugin:
   #0a0a0a page · #0d0d0d surface · #111 header · #131313 card
   #222 border (#333 hover) · d4d4d4/888/555 text ramp
   #f16b22 accent · Space Grotesk UI · JetBrains Mono terminal
   ============================================================ */
:root {
  --cell: 32px;                 /* every taskbar icon occupies exactly this. No exceptions. */
  --cell-gap: 6px;
  --bg:          #0a0a0a;   /* desktop */
  --surface:     #0d0d0d;   /* window body (terminal body) */
  --header:      #111111;   /* titlebars (terminal header) */
  --card:        #131313;
  --card-hover:  #1a1a1a;
  --border:      #222222;
  --border-hov:  #333333;
  --text:        #d4d4d4;
  --dim:         #888888;
  --muted:       #555555;
  --white:       #e8e8e8;
  --accent:      #f16b22;
  --accent-hov:  #ff8a47;
  --accent-ink:  #0a0a0a;
  --green:       #22c55e;
  --blue:        #3b82f6;
  --red:         #ef4444;
  --purple:      #a855f7;
  --danger:      var(--red);
  --shadow:      0 12px 40px rgba(0,0,0,.6);
  --cell-w: 92px;   /* fixed icon cells — labels can never shift the grid */
  --cell-h: 94px;
  --bar-h: 44px;
  --radius: 6px;
  --radius-lg: 10px;
  --font-ui:   "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- desktop ---------- */
#desktop { position: fixed; inset: 0 0 var(--bar-h) 0; overflow: hidden; }
#watermark {
  position: absolute; right: 14px; bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--muted);
  user-select: none; pointer-events: none;
  text-align: right; line-height: 1.5;
}

/* icon strip: vertical-first column wrap, like a real desktop */
#icons {
  position: absolute; inset: 10px;
  display: flex; flex-flow: column wrap;
  align-content: flex-start;
  gap: 2px;
}
.icon {
  width: var(--cell-w); height: var(--cell-h);
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: 6px;
  padding-top: 10px;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--text);
}
.icon:hover  { background: rgba(255,255,255,.04); border-color: var(--border); }
.icon:active { background: rgba(255,255,255,.07); }
.icon svg { width: 38px; height: 38px; flex: 0 0 auto; }
.icon span {
  font-size: 12px; line-height: 1.25; text-align: center;
  max-height: 2.5em; overflow: hidden;      /* two-line clamp */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  word-break: break-word;
}

/* ---------- windows (terminal-plugin chrome) ---------- */
.win {
  position: absolute;
  min-width: 280px; min-height: 180px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.win.focused { border-color: var(--border-hov); }
.win.minimized { display: none; }
.win-title {
  height: 40px; flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--header);
  border-bottom: 1px solid var(--border);
  padding: 0 6px 0 14px;
  user-select: none; touch-action: none;
}
.win-title .t {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win.focused .win-title .t { color: var(--accent); }
.win-title .ctx {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
  white-space: nowrap; padding-right: 4px;
}

/* window controls: 26px bordered squares, mono glyphs, close filled red */
.win-btn {
  width: 26px; height: 26px; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: 4px;
  background: transparent; color: var(--dim);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1;
  padding: 0;
  transition: color .15s, background .15s, border-color .15s;
}
.win-btn:hover {
  color: var(--white);
  border-color: var(--dim);
  background: rgba(255,255,255,.05);
}
.win-btn.close {
  background: var(--red); border-color: var(--red); color: #fff;
}
.win-btn.close:hover { filter: brightness(1.12); }
.win-drawerbtn { display: none; }              /* phone-only hamburger */

.win-body { flex: 1; display: flex; min-height: 0; position: relative; }
.win-side {
  flex: 0 0 168px; min-height: 0;
  background: var(--header); border-right: 1px solid var(--border);
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px;
}
.win-content {
  flex: 1;
  min-width: 0; min-height: 0;             /* the scroll fix: a flex child's default
                                              min-height:auto makes it grow instead of scroll */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
}
.win-content::-webkit-scrollbar, .win-side::-webkit-scrollbar { width: 8px; }
.win-content::-webkit-scrollbar-track, .win-side::-webkit-scrollbar-track { background: transparent; }
.win-content::-webkit-scrollbar-thumb, .win-side::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 3px; }
.win-content::-webkit-scrollbar-thumb:hover, .win-side::-webkit-scrollbar-thumb:hover { background: var(--dim); }
.win-scrim { display: none; }

.win-resize {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
  cursor: nwse-resize; touch-action: none;
}
.win-resize::after {
  content: ""; position: absolute; right: 4px; bottom: 4px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--border-hov);
  border-bottom: 2px solid var(--border-hov);
}

/* ---------- taskbar ---------- */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--bar-h);
  background: var(--bg); color: var(--dim);
  display: flex; align-items: stretch; gap: 6px;
  padding: 5px 8px;
  border-top: 1px solid var(--border);
  z-index: 5000;
}
#startbtn {
  border: 1px solid transparent; border-radius: var(--radius); padding: 0 12px;
  background: transparent; color: var(--dim);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .3px;
  transition: color .15s, background .15s, border-color .15s;
}
#startbtn:hover, #startbtn[aria-expanded="true"] {
  background: rgba(255,255,255,.05); color: var(--white); border-color: var(--border);
}
#startbtn svg { width: 17px; height: 17px; }
#tasks { flex: 1; display: flex; gap: var(--cell-gap); overflow: hidden; }
/* A TASKBAR SHOWS ICONS. A row of word-buttons was the one thing on this desktop
   that still looked like a web page rather than a machine. The window title lives in
   the tooltip and the accessible name, which is where it distinguishes two sessions
   of the same app. */
.taskbtn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: var(--cell); flex: 0 0 40px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: transparent; color: var(--dim);
  transition: color .15s, background .15s, border-color .15s;
}
.taskbtn .tb-i { display: flex; }
.taskbtn .tb-i svg { width: 19px; height: 19px; display: block; }
/* the running-window underline, which is the other half of how a taskbar reads */
.taskbtn::after {
  content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 2px; border-radius: 1px;
  background: var(--dim); opacity: .5; transition: width .15s, background .15s, opacity .15s;
}
.taskbtn.active::after { width: 22px; background: var(--accent); opacity: 1; }
.taskbtn:hover { background: rgba(255,255,255,.05); color: var(--white); border-color: var(--dim); }
.taskbtn.active { background: var(--card); color: var(--white); border-color: var(--accent); }
#clock {
  align-self: center; padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 12.5px; color: var(--dim);
}

/* start menu */
#startmenu {
  position: fixed; left: 8px; bottom: calc(var(--bar-h) + 8px);
  min-width: 230px; z-index: 6000;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 6px;
  display: none;
}
#startmenu.open { display: block; }
#startmenu .head {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--muted);
  letter-spacing: .5px;
  padding: 6px 10px 8px;
}
#startmenu button.item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--text);
  padding: 8px 10px; font-size: 13.5px; text-align: left;
}
#startmenu button.item:hover { background: var(--card-hover); }
#startmenu button.item svg { width: 20px; height: 20px; }
#startmenu .none {
  font-size: 12.5px; color: var(--muted); padding: 4px 10px 8px;
}

/* ---------- shell services: toasts + confirm ---------- */
#toasts {
  position: fixed; right: 12px; bottom: calc(var(--bar-h) + 12px);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 7000; pointer-events: none;
}
.toast {
  min-width: 220px; max-width: 320px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-left: 3px solid var(--blue);
  border-radius: var(--radius); padding: 10px 12px;
  font-size: 13px; box-shadow: var(--shadow);
}
.toast.success { border-left-color: var(--green); }
.toast.error   { border-left-color: var(--red); }

#modal-root:empty { display: none; }
.modal-scrim {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  width: min(380px, 100%);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 18px;
}
.modal p { font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
.modal .row { display: flex; gap: 8px; justify-content: flex-end; }
.btn {
  border: 1px solid var(--accent); border-radius: var(--radius); padding: 7px 14px;
  background: var(--accent); color: var(--accent-ink); font-size: 13.5px; font-weight: 500;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--accent-hov); border-color: var(--accent-hov); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn.ghost:hover { background: rgba(255,255,255,.05); border-color: var(--dim); }

/* ---------- app-side primitives (for the consoles to come) ---------- */
.field { display: flex; gap: 8px; margin-bottom: 12px; }
.field input {
  flex: 1; font: inherit; font-size: 13.5px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--text);
}
.field input:focus-visible { outline: none; border-color: var(--accent); }
.list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.list li {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); font-size: 13.5px;
  display: flex; justify-content: space-between; gap: 10px;
}
.list li:hover { background: var(--card-hover); }
.list li time { color: var(--dim); font-size: 11.5px; font-family: var(--font-mono); flex: 0 0 auto; }
.empty { color: var(--dim); font-size: 13px; padding: 8px 2px; }
.mono { font-family: var(--font-mono); }

/* ---------- context menu ---------- */
.ctxmenu {
  position: fixed; z-index: 8500;
  min-width: 180px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 4px;
}
.ctxmenu button {
  display: block; width: 100%; text-align: left;
  border: 0; border-radius: 4px; background: transparent;
  padding: 7px 10px; font-size: 13px; color: var(--text);
}
.ctxmenu button:hover:not(:disabled) { background: var(--card-hover); }
.ctxmenu button:disabled { color: var(--muted); cursor: default; }
.ctxmenu button.danger { color: var(--red); }
.ctxmenu button.danger:hover:not(:disabled) { background: rgba(239,68,68,.12); }
.ctxmenu .sep { height: 1px; background: var(--border); margin: 4px 6px; }

/* ---------- dialogs: free-floating desktop windows ---------- */
.dlg {
  position: absolute; z-index: 4000;
  width: min(500px, calc(100vw - 24px));
  max-height: calc(100% - 24px);
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dlg.top { border-color: var(--border-hov); }
/* a dialog is part of its program. Minimise the program, or send it to the tray, and the
   dialog goes with it — it does not hang in the air over an app that is no longer there. */
.dlg.minimized, .dlg.hidden-tray { display: none; }
.dlg-title {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 6px 0 14px;
  background: var(--header);
  border-bottom: 1px solid var(--border);
  cursor: grab; user-select: none; touch-action: none;
}
.dlg-title:active { cursor: grabbing; }
.dlg-title .t {
  flex: 1;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlg.top .dlg-title .t { color: var(--accent); }
.dlg-body { flex: 1; overflow: auto; padding: 14px; font-size: 13.5px; }
.dlg-body::-webkit-scrollbar { width: 8px; }
.dlg-body::-webkit-scrollbar-track { background: transparent; }
.dlg-body::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 3px; }
.dlg-row {
  flex: 0 0 auto;
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--header);
}
.btn.dangerbtn { background: var(--red); border-color: var(--red); color: #fff; }
.btn.dangerbtn:hover { filter: brightness(1.1); }

#startmenu button.item.sys { color: var(--dim); font-size: 12.5px; }

/* ============================================================
   PHONE MODE (≤640px) — the proven spec, verbatim:
   4-across home grid · every window forced fullscreen with
   !important so it beats WinMgr's inline geometry (crossing the
   breakpoint mid-session snaps windows fullscreen, no JS listener)
   · minimize/maximize removed · sidebars become off-canvas drawers
   · taskbar remains as the app switcher.
   ============================================================ */
@media (max-width: 640px) {
  #icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: var(--cell-h);
    align-content: start;
    justify-items: center;
  }
  .win {
    /* #desktop already stops above the taskbar, so 100% is correct. */
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    border-radius: 0; border: 0; box-shadow: none;
  }
  /* the MINIMISE button stays on a phone. Without it, the only way back to the desktop is
     the X — and closing a tray app hides it somewhere a phone has no easy way to reach.
     Maximise and resize genuinely have no meaning here; minimise very much does. */
  .win-btn.max, .win-resize, .win-title .ctx { display: none; }
  .win-drawerbtn { display: inline-flex; }
  .win-side {
    position: absolute; z-index: 30; inset: 0 auto 0 0;
    width: min(78%, 300px);
    transform: translateX(-102%);
    transition: transform .18s ease;
    box-shadow: 6px 0 24px rgba(0,0,0,.6);
  }
  .win.drawer-open .win-side { transform: translateX(0); }
  .win-scrim {
    display: none; position: absolute; inset: 0; z-index: 20;
    background: rgba(0,0,0,.4); border: 0;
  }
  .win.drawer-open .win-scrim { display: block; }

  /* Apps with their own internal scroll regions (list panes, tables) manage
     their own overflow — the window content must not add a second scroll
     container around them, or the inner one never receives the touch. */
  .win-content { overflow: hidden; }
  .win-content > .svc,
  .win-content > .aduc { height: 100%; }

  /* dialogs are fullscreen sheets on a phone, like every other window */
  .dlg {
    left: 0 !important; top: 0 !important;
    width: 100% !important; max-height: 100%; height: 100%;
    border: 0; border-radius: 0;
  }
  .dlg-title { cursor: default; }
}

/* ============================================================
   App: Active Directory Users and Computers
   ============================================================ */
.aduc { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: -14px; }

.aduc-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--header);
  flex-wrap: wrap;
}
.aduc-client { display: flex; align-items: center; gap: 6px; }
.aduc-client span {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
}
.aduc-orgpick, .aduc-find {
  font: inherit; font-size: 12.5px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 5px 8px;
}
.aduc-orgpick:focus-visible, .aduc-find:focus-visible { outline: none; border-color: var(--accent); }
.aduc-find { width: 150px; }
.aduc-tb {
  font-size: 12.5px;
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 5px 10px;
  transition: color .15s, background .15s, border-color .15s;
}
.aduc-tb:hover { background: rgba(255,255,255,.05); border-color: var(--dim); color: var(--white); }
.aduc-sep { width: 1px; height: 20px; background: var(--border); }
.aduc-spacer { flex: 1; }

.aduc-cols, .aduc-row {
  display: grid;
  grid-template-columns: minmax(0,1.9fr) minmax(0,1fr) minmax(0,1.5fr) minmax(0,1.4fr) minmax(0,.85fr);
  gap: 10px; align-items: center;
  padding: 7px 12px;
}
.aduc-row .c-mail {
  font-size: 11.5px; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aduc-row .c-desc {
  font-size: 12px; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 980px) {
  .aduc-cols, .aduc-row { grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1.4fr) minmax(0,.9fr); }
  .aduc-cols span:nth-child(3), .aduc-row .c-mail { display: none; }
}
@media (max-width: 720px) {
  .aduc-cols, .aduc-row { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
  .aduc-cols span:nth-child(2), .aduc-cols span:nth-child(4),
  .aduc-row .c-desc, .aduc-row .c-type { display: none; }
}
.aduc-cols {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.aduc-list {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.aduc-row {
  border-bottom: 1px solid rgba(255,255,255,.03);
  font-size: 13.5px; cursor: default;
}
.aduc-row:hover { background: var(--card-hover); }
.aduc-row .c-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.aduc-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aduc-row .sam { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.aduc-row .ico { font-size: 14px; filter: grayscale(1) brightness(1.6); flex: 0 0 auto; }
.aduc-row .c-type { font-size: 12px; color: var(--dim); }
.aduc-row.is-ou { cursor: pointer; }
.aduc-row[draggable="true"] { cursor: grab; }

.pill {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 2px 7px; border-radius: 10px;
  border: 1px solid var(--border); color: var(--dim);
}
.pill.good { color: var(--green); border-color: rgba(34,197,94,.35); }
.pill.warn { color: var(--accent); border-color: rgba(241,107,34,.4); }
.pill.bad  { color: var(--red); border-color: rgba(239,68,68,.35); }

.aduc-status {
  padding: 7px 12px;
  border-top: 1px solid var(--border);
  background: var(--header);
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
.aduc-empty { padding: 22px 12px; color: var(--dim); font-size: 13px; }

/* OU tree in the sidebar (drawer on phones, free) */
.aduc-node {
  display: flex; align-items: center; gap: 7px;
  width: 100%; text-align: left;
  border: 0; border-left: 2px solid transparent; background: transparent;
  color: var(--text); font-size: 13px;
  padding: 7px 8px;
}
.aduc-node:hover { background: rgba(255,255,255,.04); }
.aduc-node.on { background: rgba(241,107,34,.08); color: var(--accent); border-left-color: var(--accent); }
.aduc-node.over { background: rgba(241,107,34,.16); border-left-color: var(--accent); }
.aduc-node .ico { color: var(--muted); font-size: 11px; }
.aduc-node.on .ico { color: var(--accent); }
.aduc-node .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* dialog internals */
.dlg-row2 { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.dlg-row2 label { font-size: 12px; color: var(--dim); }
.dlg-in {
  font: inherit; font-size: 13.5px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 7px 10px; width: 100%;
}
.dlg-in.mono { font-family: var(--font-mono); }
.dlg-in:focus-visible { outline: none; border-color: var(--accent); }
.dlg-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.dlg-note { font-size: 12px; color: var(--dim); line-height: 1.6; margin-top: 10px; }
.dlg-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.dlg-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; }
.dlg-pick {
  text-align: left; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--text); padding: 8px 10px; font-size: 13px;
}
.dlg-pick:hover:not(:disabled) { background: var(--card-hover); border-color: var(--dim); }
.dlg-pick:disabled { color: var(--muted); cursor: default; }
.dlg-pick.on { border-color: var(--accent); color: var(--accent); }
.dlg-dl { display: grid; grid-template-columns: minmax(0,120px) 1fr; gap: 8px 14px; font-size: 13px; }
.dlg-dl dt { color: var(--dim); }
.dlg-dl dd { color: var(--text); }
.dlg-dl dd.mono, .mono { font-family: var(--font-mono); font-size: 12px; }
.dlg-mem { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dlg-mem li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); padding: 7px 10px; font-size: 13px;
}
.dlg-kind {
  font-family: var(--font-mono); font-size: 10px; font-style: normal;
  color: var(--muted); margin-left: 8px;
}

/* deeper dialog primitives */
.dlg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 640px) { .dlg-grid { grid-template-columns: 1fr; } }
.dlg-in:disabled { color: var(--muted); background: var(--surface); }
.dlg-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aduc-node.builtin .nm { color: var(--dim); }

/* ============================================================
   ADUC property sheet — modeled on the real console
   ============================================================ */
.adp { display: flex; flex-direction: column; gap: 0; margin: -14px; }

/* wrapping multi-row tab strip, like the real sheet */
.adp-tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 8px 10px 0;
  background: var(--header);
  border-bottom: 1px solid var(--border);
}
.adp-tab {
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: var(--card); color: var(--dim);
  font-size: 11.5px; padding: 5px 9px;
  margin-bottom: -1px;
  transition: color .15s, background .15s;
}
.adp-tab:hover { color: var(--text); background: var(--card-hover); }
.adp-tab.on {
  background: var(--surface); color: var(--accent);
  border-color: var(--border); border-bottom-color: var(--surface);
  font-weight: 500;
}
.adp-panes { padding: 16px 14px; }
.adp-pane[hidden] { display: none; }

.adp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.adp-avatar {
  width: 40px; height: 40px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--border);
  font-size: 20px; filter: grayscale(1) brightness(1.5);
}
.adp-headname { font-size: 15px; color: var(--text); }
.adp-hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }

/* label-left field rows, like a Windows property page */
.adp-f {
  display: grid; grid-template-columns: 150px 1fr auto;
  align-items: center; gap: 8px; margin-bottom: 9px;
}
.adp-f > label { font-size: 12.5px; color: var(--dim); }
.adp-f > label.adp-sub { text-align: right; font-size: 12px; }
.adp-in {
  font: inherit; font-size: 13px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 8px; width: 100%; min-width: 0;
}
.adp-in:focus-visible { outline: none; border-color: var(--accent); }
.adp-in:disabled { color: var(--muted); background: var(--surface); }
.adp-in.mono { font-family: var(--font-mono); font-size: 12px; }
.adp-narrow { max-width: 70px; }
.adp-date { max-width: 150px; }
.adp-suffix, .adp-prefix {
  font-size: 12px; color: var(--dim);
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); white-space: nowrap;
}
.adp-static { font-size: 13px; color: var(--text); }
.adp-label {
  font-size: 12px; color: var(--dim);
  margin: 14px 0 6px;
}
.adp-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text);
}
.adp-check input { accent-color: var(--accent); }
.adp-check input:disabled + * { color: var(--muted); }

/* account options / expiry boxes — scrollable, like the real control */
.adp-optbox {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--card);
  padding: 10px;
  max-height: 110px; overflow: auto;
}
.adp-optbox.tight { max-height: none; }

/* list boxes (Member Of, direct reports) */
.adp-listbox {
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--card);
  max-height: 180px; overflow: auto;
}
.adp-listbox.short { max-height: 110px; }
.adp-lhead, .adp-lrow {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr);
  gap: 10px; padding: 6px 10px; font-size: 12.5px;
}
.adp-lhead {
  position: sticky; top: 0;
  background: var(--header); color: var(--muted);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .8px; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.adp-lrow { cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.03); }
.adp-lrow:hover { background: var(--card-hover); }
.adp-lrow.sel { background: rgba(241,107,34,.14); color: var(--accent); }
.adp-lrow.inherited { cursor: default; opacity: .72; }
.adp-lfolder { color: var(--muted); font-size: 11.5px; }
.adp-lempty { padding: 14px 10px; color: var(--muted); font-size: 12.5px; }

/* attribute editor — scrollable, <not set> dimmed */
.adp-attrbox {
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--card);
  overflow: hidden;
}
.adp-ahead {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
  gap: 10px; padding: 6px 10px;
  background: var(--header); color: var(--muted);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .8px; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.adp-ascroll { max-height: 260px; overflow: auto; }
.adp-ascroll::-webkit-scrollbar { width: 8px; }
.adp-ascroll::-webkit-scrollbar-track { background: transparent; }
.adp-ascroll::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 3px; }
.adp-arow {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
  gap: 10px; padding: 5px 10px; font-size: 11.5px;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.adp-arow .k { color: var(--accent); }
.adp-arow .v { color: var(--text); word-break: break-word; }
.adp-arow .v.unset { color: var(--muted); }

.adp-btns { display: flex; gap: 8px; margin-top: 10px; }
.adp-dl {
  display: grid; grid-template-columns: minmax(0,150px) 1fr;
  gap: 7px 10px; font-size: 12.5px;
}
.adp-dl dt { color: var(--dim); }
.adp-note { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin-top: 10px; }

@media (max-width: 640px) {
  .adp-f { grid-template-columns: 1fr; }
  .adp-f > label.adp-sub { text-align: left; }
}

/* attribute editor: editable rows */
.adp-ahead, .adp-arow {
  grid-template-columns: minmax(0,1.2fr) minmax(0,1.4fr) 18px;
}
.adp-arow.editable { cursor: text; }
.adp-arow.editable:hover { background: var(--card-hover); }
.adp-arow.locked { cursor: not-allowed; }
.adp-arow.locked:hover { background: rgba(239,68,68,.06); }
.adp-arow .lock { font-size: 9px; opacity: .5; filter: grayscale(1); }
.adp-arow.locked .k { color: var(--muted); }
.attr-edit {
  width: 100%; font-size: 11.5px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--accent); border-radius: 3px;
  padding: 2px 5px;
}
.attr-edit:focus-visible { outline: none; }

/* ============================================================
   App: Services
   ============================================================ */
.svc { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: -14px; }

.svc-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--header);
  flex-wrap: wrap;
}
.svc-pick { display: flex; align-items: center; gap: 6px; }
.svc-pick span {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
}
.svc-machine, .svc-find {
  font: inherit; font-size: 12.5px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 5px 8px;
}
.svc-machine:focus-visible, .svc-find:focus-visible { outline: none; border-color: var(--accent); }
.svc-find { width: 160px; }
.svc-tb {
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 10px; font-size: 12px;
  transition: color .15s, background .15s, border-color .15s;
}
.svc-tb:hover:not(:disabled) { background: rgba(255,255,255,.05); border-color: var(--dim); color: var(--accent); }
.svc-tb:disabled { color: var(--muted); opacity: .5; }
.svc-sep { width: 1px; height: 20px; background: var(--border); }
.svc-spacer { flex: 1; }

.svc-main {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);      /* without this the row sizes to content */
}
.svc-desc {
  border-right: 1px solid var(--border);
  padding: 14px 12px;
  min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(255,255,255,.012);
}
.svc-hint { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.svc-dname { font-size: 13.5px; color: var(--text); margin-bottom: 8px; line-height: 1.4; }
.svc-dacts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.svc-link {
  border: 0; background: transparent; padding: 0;
  color: var(--accent); font-size: 12.5px; text-decoration: underline;
  text-underline-offset: 2px;
}
.svc-link:hover { filter: brightness(1.2); }
.svc-dlabel {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  margin: 12px 0 6px;
}
.svc-dtext { font-size: 12px; color: var(--dim); line-height: 1.65; }
.svc-dlist { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.svc-dlist li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--text);
}

.svc-table { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.svc-cols, .svc-row {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,2.2fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,1fr);
  gap: 10px; align-items: center;
  padding: 7px 12px;
}
.svc-cols {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.svc-list {
  flex: 1; min-height: 0;                  /* a flex child defaults to min-height:auto
                                              and will refuse to scroll without this */
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.svc-row {
  border-bottom: 1px solid rgba(255,255,255,.03);
  font-size: 13px; cursor: default;
}
.svc-row:hover { background: var(--card-hover); }
.svc-row.on { background: rgba(241,107,34,.1); }
.svc-row.on .nm { color: var(--accent); }
.svc-row .c-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.svc-row .ico { color: var(--muted); font-size: 12px; }
.svc-row .nm, .svc-row .c-desc, .svc-row .c-logon {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.svc-row .c-desc { font-size: 12px; color: var(--dim); }
.svc-row .c-startup { font-size: 12px; color: var(--text); }
.svc-row .c-startup.dim { color: var(--muted); }
.svc-row .c-logon { font-size: 12px; color: var(--dim); }
.svc-row .flag { color: var(--accent); font-size: 11px; }
.svc-empty { padding: 22px 12px; color: var(--dim); font-size: 13px; }

.svc-status {
  padding: 7px 12px;
  border-top: 1px solid var(--border);
  background: var(--header);
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
.svc-node {
  display: flex; align-items: center; gap: 7px;
  width: 100%; text-align: left;
  border: 0; border-left: 2px solid var(--accent); background: rgba(241,107,34,.08);
  color: var(--accent); font-size: 13px;
  padding: 8px;
}
.svc-warn {
  margin: 10px 8px; padding: 9px 10px;
  border: 1px solid rgba(239,68,68,.35); border-radius: var(--radius);
  background: rgba(239,68,68,.08);
  font-size: 11.5px; color: var(--red); line-height: 1.55;
}
.svc-transport { display: flex; gap: 8px; margin-top: 10px; }
.adp-area { min-height: 56px; resize: none; line-height: 1.55; }
.adp-note.warn {
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: 9px;
}

@media (max-width: 860px) {
  .svc-main { grid-template-columns: minmax(0, 1fr); }
  .svc-desc { display: none; }
  .svc-cols, .svc-row { grid-template-columns: minmax(0,1.6fr) minmax(0,.9fr) minmax(0,1fr); }
  .svc-cols span:nth-child(2), .svc-cols span:nth-child(5),
  .svc-row .c-desc, .svc-row .c-logon { display: none; }
}

.svc-local {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text);
}
.svc-local span {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
}
.svc-local strong { font-weight: 500; color: var(--accent); }

/* a console whose backing service is down says so, and stops pretending */
.aduc.offline .aduc-list,
.aduc.offline .aduc-cols { opacity: .5; }
.aduc.offline .aduc-row { pointer-events: none; }

/* ============================================================
   App: Event Viewer
   ============================================================ */
.ev { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: -14px; }

.ev-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--header);
}
.ev-title { font-size: 13px; color: var(--text); font-weight: 500; }
.ev-count { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.ev-spacer { flex: 1; }
.ev-find {
  font: inherit; font-size: 12.5px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 5px 8px; width: 180px;
}
.ev-find:focus-visible { outline: none; border-color: var(--accent); }

.ev-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0,1fr) 168px;
  grid-template-rows: minmax(0,1fr);
}
.ev-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.ev-cols, .ev-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.5fr) minmax(0,1.7fr) minmax(0,.7fr) minmax(0,1.5fr);
  gap: 10px; align-items: center;
  padding: 6px 12px;
}
.ev-cols {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.ev-list {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.ev-row {
  border-bottom: 1px solid rgba(255,255,255,.03);
  font-size: 12.5px; cursor: default;
}
.ev-row:hover { background: var(--card-hover); }
.ev-row.on { background: rgba(241,107,34,.12); }
.ev-row .c-level { display: flex; align-items: center; gap: 6px; }
.ev-row .c-level .g { color: var(--muted); font-size: 12px; }
.ev-row.warn .c-level .g { color: var(--accent); }
.ev-row.err  .c-level .g { color: var(--red); }
.ev-row.err  .c-level .t { color: var(--red); }
.ev-row .c-time, .ev-row .c-source, .ev-row .c-task {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--dim);
}
.ev-row .c-id { color: var(--text); font-size: 12px; }
.ev-empty { padding: 22px 12px; color: var(--dim); font-size: 13px; line-height: 1.6; }

/* the detail pane, docked below the list like the real one */
.ev-detail {
  flex: 0 0 auto; max-height: 42%;
  min-height: 0; overflow-y: auto;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.012);
  -webkit-overflow-scrolling: touch;
}
.ev-hint { padding: 14px 12px; font-size: 12.5px; color: var(--muted); }
.ev-dhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--accent);
  font-family: var(--font-mono);
}
.ev-dclose {
  border: 0; background: transparent; color: var(--muted);
  font-size: 16px; line-height: 1; padding: 0 4px;
}
.ev-dclose:hover { color: var(--red); }
.ev-dtabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--border); }
.ev-dtab {
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: var(--card); color: var(--dim);
  font-size: 11.5px; padding: 5px 10px; margin-bottom: -1px;
}
.ev-dtab.on { background: var(--surface); color: var(--accent); border-bottom-color: var(--surface); }
.ev-dpane { padding: 12px; }
.ev-msg {
  font-size: 12.5px; color: var(--text); line-height: 1.65;
  padding: 10px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card);
}
.ev-dl {
  display: grid; grid-template-columns: minmax(0,110px) minmax(0,1fr) minmax(0,110px) minmax(0,1fr);
  gap: 6px 10px; font-size: 12px;
}
.ev-dl dt { color: var(--muted); }
.ev-dl dd { color: var(--text); }
.ev-xml {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
  color: var(--dim); white-space: pre; overflow-x: auto;
  padding: 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg);
}

/* the Actions rail */
.ev-actions {
  border-left: 1px solid var(--border);
  background: var(--header);
  padding: 8px; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
}
.ev-alabel {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  padding: 6px 6px 4px;
}
.ev-alabel.sel { margin-top: 10px; border-top: 1px solid var(--border); }
.ev-act {
  text-align: left; border: 0; border-radius: 4px;
  background: transparent; color: var(--text);
  font-size: 12px; padding: 6px 8px;
}
.ev-act:hover:not(:disabled) { background: var(--card-hover); color: var(--accent); }
.ev-act:disabled { color: var(--muted); }
.ev-act.danger { color: var(--red); }
.ev-act.danger:hover { background: rgba(239,68,68,.12); }

/* the log tree */
.ev-root {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--dim); padding: 7px 8px;
}
.ev-root .ico { color: var(--muted); font-size: 10px; }
.ev-group {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  padding: 8px 8px 4px 20px;
}
.ev-node {
  display: flex; align-items: center; gap: 7px;
  width: 100%; text-align: left;
  border: 0; border-left: 2px solid transparent; background: transparent;
  color: var(--text); font-size: 13px;
  padding: 7px 8px 7px 22px;
}
.ev-node:hover { background: rgba(255,255,255,.04); }
.ev-node.on { background: rgba(241,107,34,.08); color: var(--accent); border-left-color: var(--accent); }
.ev-node .ico { color: var(--muted); font-size: 11px; }
.ev-node.on .ico { color: var(--accent); }
.ev-node .nm { flex: 1; }
.ev-node .n {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
}
.ev-node .n.warn { color: var(--accent); }
.ev-node .n.bad  { color: var(--red); }

@media (max-width: 900px) {
  .ev-body { grid-template-columns: minmax(0,1fr); }
  .ev-actions { display: none; }
  .ev-cols, .ev-row { grid-template-columns: minmax(0,1fr) minmax(0,1.5fr) minmax(0,.6fr); }
  .ev-cols span:nth-child(3), .ev-cols span:nth-child(5),
  .ev-row .c-source, .ev-row .c-task { display: none; }
  .ev-dl { grid-template-columns: minmax(0,110px) minmax(0,1fr); }
  .ev-detail { max-height: 50%; }
}

/* ============================================================
   App: Remote Desktop + the session window
   ============================================================ */
.rdp { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: -14px; }
.rdp-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--header);
}
.rdp-title {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
}
.rdp-spacer { flex: 1; }
.rdp-list {
  flex: 1; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px;
}
.rdp-empty { padding: 8px 4px; }
.rdp-e1 { font-size: 14px; color: var(--text); margin-bottom: 10px; }
.rdp-e2 { font-size: 12.5px; color: var(--dim); line-height: 1.65; margin-bottom: 10px; }
.rdp-e3 {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 12px;
}
.rdp-e3 li {
  font-size: 12.5px; color: var(--dim); line-height: 1.6;
  border-left: 2px solid var(--border); padding-left: 12px;
}
.rdp-e3 strong { color: var(--text); font-weight: 500; }

.rdp-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card);
  margin-bottom: 8px;
}
.rdp-card:hover { border-color: var(--dim); }
.rdp-card.live { border-color: rgba(34,197,94,.4); }
.rdp-cmain { flex: 1; min-width: 0; }
.rdp-cname { font-size: 13.5px; color: var(--text); }
.rdp-chost { font-size: 11.5px; color: var(--accent); margin: 2px 0; }
.rdp-cauth { font-size: 11.5px; color: var(--muted); }
.rdp-card.live .rdp-cauth { color: var(--green); }

/* connect-time fact chips — each traces to a machine fact; a card with no quirks shows
   none. disabled boxes are dimmed, because a connection to them will be refused. */
.rdp-cfacts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.rdp-chip {
  font-size: 10.5px; line-height: 1.4;
  padding: 1px 7px; border-radius: 10px;
  border: 1px solid var(--border); cursor: help;
}
.rdp-chip.warn { color: var(--amber, #e0a800); border-color: rgba(224,168,0,.4); background: rgba(224,168,0,.08); }
.rdp-chip.bad  { color: var(--red, #ef4444);   border-color: rgba(239,68,68,.4);  background: rgba(239,68,68,.08); }
.rdp-card.disabled { opacity: .72; }
.rdp-card.disabled .rdp-chost { color: var(--muted); }
.rdp-cacts { display: flex; gap: 6px; flex-wrap: wrap; }

/* the session */
.sess { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: -14px; }
.sess-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--header);
}
.sess-host { font-size: 12.5px; color: var(--accent); }
.sess-role { font-size: 11.5px; color: var(--muted); }
.sess-who { font-size: 11.5px; color: var(--dim); }
.sess-desk {
  flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(241,107,34,.05), transparent 60%),
    var(--bg);
}

/* ═══════════════ THE NESTED DESKTOP — a machine's screen, inside a window ═══════════
   You are looking THROUGH the RDP window at another machine's desktop. That desktop has
   its own screen area (where its app windows live) and its own taskbar strip. Both are
   contained: a window opened on this machine mounts inside .sess-desk-nested and its
   button joins .sess-tb-tasks — it never reaches the host desktop or the host taskbar. */
.sess-screen {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
}
.sess-desk-nested {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  padding: 20px 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(241,107,34,.05), transparent 60%),
    var(--bg);
}
/* the machine's own app windows are absolutely positioned WITHIN its screen, not the
   page — so a maximized console fills the remote desktop, not the browser tab */
.sess-desk-nested > .win { position: absolute; }
.sess-taskbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; min-height: 40px;
  border-top: 1px solid var(--border);
  background: var(--header);
}
.sess-tb-host { font-size: 11px; color: var(--muted); flex: 0 0 auto; }
.sess-tb-tasks { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; }
.sess-tb-tasks .taskbtn { flex: 0 0 auto; }

/* THE START BUTTON — a launcher for the machine's real installed tools, reachable from one
   place. Not a Windows orb: it carries the machine name and opens only what the machine has. */
.sess-start {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 4px 10px 4px 8px; border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: var(--muted); cursor: pointer; font: inherit;
  transition: background .12s, border-color .12s;
}
.sess-start:hover, .sess-start:focus-visible {
  background: rgba(255,255,255,.06); border-color: var(--border); color: var(--text); outline: none;
}
.sess-start-g { font-size: 13px; line-height: 1; opacity: .8; }

/* THE CLOCK — reads the world's own time, the same clock the cache-age facts read. */
.sess-clock { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); padding-left: 4px; }

/* ============ THE MACHINE DESKTOP — icons on a surface, not a summary ============
   The nested desktop shows what you would see standing on the machine: its drives and
   installed consoles as ICONS on the surface, and a faint watermark naming the box. An
   empty desktop (a workstation with only C:) is honest — it looks like an empty desktop,
   not a card that says the desktop is empty. */
.sess-icons {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px 4px; align-content: start;
  padding: 8px;
}
.sess-icon {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--text);
  font-size: 11px; text-align: center; line-height: 1.3; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.sess-icon:hover, .sess-icon:focus-visible {
  background: rgba(255,255,255,.06); border-color: var(--border); outline: none;
}
.sess-icon-g { font-size: 30px; line-height: 1; }
.sess-icon-l { display: block; overflow-wrap: anywhere; }
.sess-icon-s { display: block; font-size: 9.5px; color: var(--muted); overflow-wrap: anywhere; }
.sess-icon.soon { opacity: .5; }
.sess-icon.soon .sess-icon-g { filter: grayscale(1); }
.sess-icon.dim { opacity: .7; }

/* the watermark: whose machine this is, pinned to the corner, behind the icons and
   non-interactive — chrome, not content */
.sess-wm {
  position: absolute; right: 14px; bottom: 12px; z-index: 0;
  text-align: right; pointer-events: none; user-select: none;
}
.sess-wm-os   { font-size: 13px; color: var(--dim); }
.sess-wm-host { font-size: 11.5px; color: var(--muted); }
.sess-wm-who  { font-size: 11px; color: var(--muted); opacity: .8; }
.sess-wm-lock { font-size: 10.5px; color: var(--muted); opacity: .7; margin-top: 3px; }
.sess-gone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 8px; text-align: center; padding: 20px;
}
.sess-glyph { font-size: 32px; color: var(--accent); }
.sess-gone p { font-size: 13px; color: var(--text); }
.sess-gone .dim { color: var(--muted); font-size: 12px; }

/* ============================================================
   App: opnConnect
   ============================================================ */
.vpn { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: -14px; }

.vpn-panel {
  flex: 1; min-height: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 22px 20px;
}
.vpn-badge {
  position: relative;
  flex: 0 0 auto;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border);
  background: var(--card);
}
.vpn-badge .lock { font-size: 22px; filter: grayscale(1) brightness(1.4); }
.vpn-badge.up    { border-color: var(--green); }
.vpn-badge.up .lock { filter: none; }
.vpn-badge.down  { border-color: var(--dim); }
.vpn-badge.connecting { border-color: var(--accent); }
.vpn-badge .warn {
  position: absolute; right: -2px; bottom: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #0d0d0d;
  font-size: 11px; font-weight: 700;
  border: 2px solid var(--surface);
}
.vpn-badge .spin {
  position: absolute; inset: -2px;
  border: 2px solid transparent; border-top-color: var(--accent);
  border-radius: 50%;
  animation: vpn-spin .8s linear infinite;
}
@keyframes vpn-spin { to { transform: rotate(360deg); } }
.vpn-badge.small { width: 40px; height: 40px; }
.vpn-badge.small .lock { font-size: 16px; }

.vpn-main { flex: 1; min-width: 0; }
.vpn-h { font-size: 14px; color: var(--text); font-weight: 500; margin-bottom: 2px; }
.vpn-status { font-size: 12.5px; color: var(--dim); margin-bottom: 12px; }
.vpn-row { display: flex; gap: 8px; }
.vpn-addr {
  flex: 1; min-width: 0;
  font: inherit; font-size: 12.5px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 9px;
}
.vpn-addr:focus-visible { outline: none; border-color: var(--accent); }
.vpn-addr:disabled { color: var(--muted); }

.vpn-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--header);
}
.vpn-ok { font-size: 12px; color: var(--green); }
.vpn-as { font-size: 11.5px; color: var(--muted); }
.vpn-idle { font-size: 11.5px; color: var(--muted); line-height: 1.6; }

.vpn-dlg { display: flex; gap: 14px; align-items: flex-start; }
.vpn-dfields { flex: 1; min-width: 0; }
.vpn-dfields .adp-f { grid-template-columns: 90px 1fr; }

/* ============================================================
   App: Browser
   ============================================================ */
.br { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: -14px; }

.br-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--header);
}
.br-nav {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text);
  transition: background .12s, color .12s;
}
.br-nav svg { width: 19px; height: 19px; display: block; }
.br-nav:hover:not(:disabled) { background: var(--card-hover); color: var(--accent); }
.br-nav:active:not(:disabled) { background: rgba(241,107,34,.16); }
.br-nav:disabled { color: var(--muted); opacity: .35; }
/* a real tap target on a phone — 28px of thin text arrow is not one */
@media (max-width: 640px) {
  .br-nav { width: 40px; height: 40px; }
  .br-nav svg { width: 22px; height: 22px; }
  .br-bar { gap: 2px; padding: 8px 8px; }
}

.br-omni {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 7px;
  background: var(--card);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 5px 12px;
}
.br-omni:focus-within { border-color: var(--accent); }
.br-lock { flex: 0 0 auto; font-size: 11px; line-height: 1; }
.br-lock .ok  { filter: none; }
.br-lock .bad { color: var(--accent); }
.br-url {
  flex: 1; min-width: 0;
  border: 0; background: transparent; color: var(--text);
  font-size: 12.5px; padding: 0;
}
.br-url:focus-visible { outline: none; }

.br-view {
  flex: 1; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg);
}
.br-status {
  flex: 0 0 auto; min-height: 0;
  padding: 0 12px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
}
.br-status:not(:empty) { padding: 5px 12px; border-top: 1px solid var(--border); }

/* the home page */
.br-home {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100%; padding: 32px 24px; text-align: center;
}
.br-hlogo {
  font-size: 30px; font-weight: 600; letter-spacing: -1px;
  color: var(--text); margin-bottom: 16px;
}
.br-hlogo span { color: var(--accent); }
.br-hlead { font-size: 14px; color: var(--text); margin-bottom: 10px; }
.br-hnote {
  font-size: 12.5px; color: var(--muted); line-height: 1.7;
  max-width: 460px;
}

/* the error pages — the actual product of this app */
.br-err {
  max-width: 560px; margin: 0 auto; padding: 44px 24px;
}
.br-eglyph { font-size: 40px; margin-bottom: 16px; filter: grayscale(1) brightness(1.6); }
.br-err.warn .br-eglyph, .br-err.bad .br-eglyph { filter: none; }
.br-etitle { font-size: 20px; color: var(--text); font-weight: 500; margin-bottom: 10px; }
.br-elead { font-size: 13.5px; color: var(--dim); line-height: 1.7; margin-bottom: 18px; }
.br-elead strong { color: var(--text); font-weight: 500; }

.br-ecode {
  border: 1px solid var(--border); border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card);
  padding: 12px 14px; margin-bottom: 16px;
}
.br-ecode-h {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}
.br-ecode p { font-size: 12.5px; color: var(--text); line-height: 1.65; }

.br-echeck {
  font-size: 12.5px; color: var(--muted); line-height: 1.7;
  margin-bottom: 18px;
}
.br-echeck em { color: var(--dim); font-style: italic; }

/* THE PAGE GETS THE WHOLE FRAME.
 *
 * .br-page used to have `padding: 28px 24px` and no height — a DOCUMENT box, not a viewport.
 * Two things followed, and both were visible in a screenshot:
 *
 *   - a black border all the way round every site, which no browser has ever had. A page
 *     starts at the edge of the window. The chrome is the chrome and the page is the page.
 *
 *   - the page STOPPED WHERE ITS CONTENT STOPPED. `.ms { min-height: 100% }` resolves
 *     against its parent's height, and its parent had none, so a short page (Quarantine with
 *     four rows) simply ended halfway down and the desktop's background showed through
 *     underneath. Real pages do not trail off. The body fills the viewport and the
 *     background goes all the way to the bottom, however little there is to say.
 *
 * So the page box IS the viewport: no padding, full height, and whatever is mounted into it
 * stretches to fill. */
.br-page {
  padding: 0;
  min-height: 100%;
  display: flex; flex-direction: column;
}
.br-page > * { flex: 1 1 auto; min-height: 0; }

/* the browser's OWN messages still need room to breathe — they are the browser talking,
   not a page, and they are the only thing in here entitled to a margin */
.br-missing { padding: 28px 24px; }
.br-missing h1 { font-size: 20px; color: var(--text); margin-bottom: 8px; }
.br-missing .dim { font-size: 13px; color: var(--muted); }

@media (max-width: 640px) {
  .br-err { padding: 28px 16px; }
  .br-etitle { font-size: 17px; }
}

/* ============================================================
   App: Mail
   ============================================================ */
.ml { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: -14px; }
.ml-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--header);
}
.ml-spacer { flex: 1; }
.ml-find {
  font: inherit; font-size: 12.5px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 5px 8px; width: 170px;
}
.ml-find:focus-visible { outline: none; border-color: var(--accent); }

.ml-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.ml-list {
  min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-right: 1px solid var(--border);
}
.ml-empty { padding: 22px 14px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

.ml-row {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  border-left: 2px solid transparent;
  cursor: default;
}
.ml-row:hover { background: var(--card-hover); }
.ml-row.on { background: rgba(241,107,34,.10); border-left-color: var(--accent); }
.ml-row.unread { border-left-color: var(--accent); }
.ml-row.ndr .ml-subj { color: var(--red); }
.ml-r1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ml-from {
  font-size: 12.5px; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ml-row.unread .ml-from { color: var(--text); font-weight: 500; }
.ml-when {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
}
.ml-subj {
  font-size: 13px; color: var(--text); margin: 3px 0 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ml-row.unread .ml-subj { font-weight: 500; }
.ml-prev {
  font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ml-read {
  min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 20px 22px;
}
.ml-hint { font-size: 12.5px; color: var(--muted); }
.ml-rhead { border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 16px; }
.ml-rsubj { font-size: 17px; color: var(--text); font-weight: 500; margin-bottom: 10px; }
.ml-rmeta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ml-rwho { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ml-rname { font-size: 13px; color: var(--text); }
.ml-raddr { font-size: 11.5px; color: var(--muted); }
.ml-rwhen { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); }
.ml-ndr {
  margin-top: 12px; padding: 8px 10px;
  border: 1px solid rgba(239,68,68,.35); border-radius: var(--radius);
  background: rgba(239,68,68,.08);
  font-size: 11.5px; color: var(--red); line-height: 1.55;
}
.ml-rbody {
  font-size: 13.5px; color: var(--dim); line-height: 1.75;
  white-space: pre-wrap; margin-bottom: 22px;
}
.ml-racts { display: flex; gap: 6px; flex-wrap: wrap; }

.ml-compose {
  width: 100%; resize: vertical;
  font: inherit; font-size: 12.5px; line-height: 1.65;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; margin-bottom: 10px;
}
.ml-compose:focus-visible { outline: none; border-color: var(--accent); }

/* the account header + folders */
.ml-acct { padding: 10px 10px 12px; border-bottom: 1px solid var(--border); }
.ml-acct .nm { display: block; font-size: 12px; color: var(--text); }
.ml-acct .sub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.ml-folder {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  border: 0; border-left: 2px solid transparent; background: transparent;
  color: var(--text); font-size: 13px;
  padding: 8px 10px;
}
.ml-folder:hover { background: rgba(255,255,255,.04); }
.ml-folder.on { background: rgba(241,107,34,.08); color: var(--accent); border-left-color: var(--accent); }
.ml-folder .ico { color: var(--muted); font-size: 12px; }
.ml-folder.on .ico { color: var(--accent); }
.ml-folder .nm { flex: 1; }
.ml-folder .n { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.ml-folder .n.unread {
  background: var(--accent); color: #0d0d0d;
  border-radius: 9px; padding: 1px 6px; font-weight: 600;
}

/* the back button only exists on narrow screens, where the message replaces
   the list. On a wide screen both panes are visible and it would be nonsense. */
.ml-back {
  display: none;
  border: 0; background: transparent; color: var(--accent);
  font-size: 12.5px; padding: 0 0 14px;
}
@media (max-width: 760px) {
  .ml-body { grid-template-columns: minmax(0, 1fr); }
  .ml-list { border-right: 0; }
  /* one pane at a time: the list, or the message you chose from it */
  .ml-read { display: none; }
  .ml.reading .ml-list { display: none; }
  .ml.reading .ml-read { display: block; grid-column: 1; }
  .ml-back { display: block; }
  .ml-read { padding: 16px; }
  .ml-racts .btn { flex: 1 1 auto; }
}

/* the account switcher — a menu of mailboxes that live in different places */
.ml-acct {
  display: grid; grid-template-columns: 1fr auto;
  gap: 2px 8px; align-items: center;
  width: 100%; text-align: left;
  padding: 10px; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; color: var(--text);
}
.ml-acct:hover { background: var(--card-hover); }
.ml-acct.blocked .ml-anm { color: var(--muted); }
.ml-anm { font-size: 12.5px; grid-column: 1; }
.ml-aad { font-size: 10.5px; color: var(--muted); grid-column: 1; }
.ml-acar { grid-column: 2; grid-row: 1 / span 2; color: var(--muted); font-size: 10px; }
.ml-acct:hover .ml-acar { color: var(--accent); }
.ml-note {
  padding: 8px 10px; margin: 8px;
  border-left: 2px solid var(--accent);
  background: var(--card);
  font-size: 11px; color: var(--muted); line-height: 1.55;
}

/* a console that cannot see its client says so — an empty room is a worse lie */
.aduc-empty { padding: 26px 16px; max-width: 520px; }
.aduc-empty .e1 { font-size: 13px; color: var(--text); line-height: 1.65; margin-bottom: 10px; }
.aduc-empty .e2 { font-size: 12.5px; color: var(--accent); line-height: 1.6; }

/* ============================================================
   App: DNS Manager
   ============================================================ */
.dz { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: -14px; }
.dz-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--header);
}
.dz-title { font-size: 13px; color: var(--text); }
.dz-spacer { flex: 1; }

.dz-cols, .dz-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.6fr) minmax(0,1.6fr) minmax(0,1.4fr);
  gap: 10px; align-items: center;
  padding: 7px 12px;
}
.dz-cols {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.dz-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dz-row {
  border-bottom: 1px solid rgba(255,255,255,.03);
  font-size: 12.5px; cursor: default;
}
.dz-row:hover { background: var(--card-hover); }
.dz-row.on { background: rgba(241,107,34,.12); }
.dz-row.locked { opacity: .6; }
.dz-row .c-name { color: var(--text); }
.dz-row .c-type { color: var(--accent); font-family: var(--font-mono); font-size: 11px; }
.dz-row .c-data, .dz-row .c-note {
  color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dz-row .c-note { color: var(--muted); font-size: 11.5px; }
.dz-empty { padding: 24px 14px; font-size: 12.5px; color: var(--muted); line-height: 1.65; max-width: 520px; }
.dz-status {
  padding: 6px 12px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
}

.dz-root {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--dim); padding: 7px 8px;
}
.dz-root .ico { color: var(--muted); font-size: 10px; }
.dz-group {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  padding: 8px 8px 4px 20px;
}
.dz-node {
  display: flex; align-items: center; gap: 7px;
  width: 100%; text-align: left;
  border: 0; border-left: 2px solid transparent; background: transparent;
  color: var(--text); font-size: 13px;
  padding: 7px 8px 7px 22px;
}
.dz-node.on { background: rgba(241,107,34,.08); color: var(--accent); border-left-color: var(--accent); }
.dz-node .ico { color: var(--accent); font-size: 11px; }

.dz-soa {
  margin: 12px 8px; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card);
}
.dz-soa .h {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  margin-bottom: 8px;
}
.dz-soa dl {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 8px;
  font-size: 11.5px; margin-bottom: 8px;
}
.dz-soa dt { color: var(--muted); }
.dz-soa dd { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.dz-soa .n { font-size: 11px; color: var(--muted); line-height: 1.55; }

@media (max-width: 760px) {
  .dz-cols, .dz-row { grid-template-columns: minmax(0,1fr) minmax(0,.5fr) minmax(0,1.4fr); }
  .dz-cols span:nth-child(4), .dz-row .c-note { display: none; }
}

/* ============================================================
   Site: Microsoft Entra admin center
   A PAGE, not an app. It lives inside the browser's viewport.
   ============================================================ */
.ez { display: flex; flex-direction: column; min-height: 100%; background: #f5f5f5; color: #1b1b1b; }
.ez-chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: #0f1b2d; color: #fff;
}
.ez-brand { font-size: 13px; letter-spacing: .2px; }
.ez-brand b { font-weight: 600; }
.ez-sp { flex: 1; }
.ez-who { font-size: 11px; opacity: .75; }
.ez-out { border: 0; background: transparent; color: #8ab4f8; font-size: 12px; }

.ez-signin { display: flex; justify-content: center; padding: 40px 16px; }
.ez-card {
  background: #fff; border: 1px solid #ddd; border-radius: 4px;
  padding: 26px; max-width: 400px; width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.ez-card h1 { font-size: 22px; font-weight: 600; margin-bottom: 2px; }
.ez-sub { font-size: 13px; color: #555; margin-bottom: 18px; }
.ez-card label { display: block; font-size: 12px; color: #444; margin: 12px 0 4px; }
.ez-in {
  width: 100%; font: inherit; font-size: 13px;
  padding: 8px; border: 0; border-bottom: 1.5px solid #666;
  background: transparent; color: #1b1b1b;
}
.ez-in:focus-visible { outline: none; border-bottom-color: #0067b8; }
.ez-go { margin-top: 20px; width: 100%; justify-content: center; }
.ez-note {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid #eee;
  font-size: 11.5px; color: #666; line-height: 1.6;
}

.ez-body { flex: 1; display: grid; grid-template-columns: 180px minmax(0,1fr); min-height: 0; }
.ez-nav { background: #fff; border-right: 1px solid #ddd; padding: 12px 0; }
.ez-nav button {
  display: block; width: 100%; text-align: left;
  border: 0; border-left: 3px solid transparent; background: transparent;
  color: #333; font-size: 13px; padding: 9px 16px;
}
.ez-nav button:hover { background: #f0f0f0; }
.ez-nav button.on { border-left-color: #0067b8; color: #0067b8; background: #f0f6fc; font-weight: 500; }

.ez-main { min-height: 0; padding: 20px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ez-head { margin-bottom: 16px; }
.ez-head h2 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.ez-hint { font-size: 12.5px; color: #555; line-height: 1.6; max-width: 640px; }

.ez-cols, .ez-row {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1.6fr) minmax(0,.7fr) minmax(0,1fr) minmax(0,.5fr);
  gap: 10px; align-items: center; padding: 9px 10px;
}
.ez-cols {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: #666; border-bottom: 1px solid #ddd; background: #fafafa;
}
.ez-row {
  background: #fff; border-bottom: 1px solid #eee;
  font-size: 12.5px; cursor: default;
}
.ez-row:hover { background: #f6f9fd; }
.ez-row.on { background: #eaf3fb; }
.ez-row.off .n { color: #999; }
.ez-row .upn { font-size: 11.5px; color: #555; overflow: hidden; text-overflow: ellipsis; }
.ez-row .st.ok { color: #107c10; }
.ez-row .st.bad { color: #a4262c; }
.ez-row .mf.ok { color: #107c10; }
.ez-row .mf.warn { color: #a4262c; }
.ez-row .li.waste { color: #a4262c; font-weight: 500; }

.ez-detail {
  margin-top: 18px; padding: 16px;
  background: #fff; border: 1px solid #ddd; border-radius: 4px;
}
.ez-detail h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.ez-detail dl {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
  font-size: 12.5px; margin-bottom: 12px;
}
.ez-detail dt { color: #666; }
.ez-detail dd { color: #1b1b1b; }
.ez-desc { font-size: 12px; color: #555; margin-bottom: 12px; }
.ez-warn {
  padding: 10px; margin-bottom: 12px;
  background: #fdf3f4; border-left: 3px solid #a4262c;
  font-size: 12px; color: #6b1f24; line-height: 1.6;
}
.ez-acts { display: flex; gap: 6px; flex-wrap: wrap; }

.ez-group {
  background: #fff; border: 1px solid #ddd; border-radius: 4px;
  padding: 12px; margin-bottom: 8px;
}
.ez-group.grants { border-left: 3px solid #0067b8; }
.ez-group .g1 { display: flex; align-items: baseline; gap: 8px; }
.ez-group .gn { font-size: 13.5px; font-weight: 500; }
.ez-group .gt { font-size: 11px; color: #666; }
.ez-group .gd { font-size: 12px; color: #555; margin: 3px 0 6px; }
.ez-group .gm { font-size: 11.5px; color: #777; }

.ez-lic {
  background: #fff; border: 1px solid #ddd; border-radius: 4px;
  padding: 14px; margin-bottom: 10px;
}
.ez-lic.full { border-left: 3px solid #a4262c; }
.ez-lic .l1 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ez-lic .ln { font-size: 13.5px; font-weight: 500; }
.ez-lic .lc { font-size: 12px; color: #555; }
.ez-lic .bar { height: 6px; background: #eee; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.ez-lic .bar span { display: block; height: 100%; background: #0067b8; }
.ez-lic.full .bar span { background: #a4262c; }
.ez-lic .lf { font-size: 11.5px; color: #666; }

.ez-waste {
  margin-top: 16px; padding: 14px;
  background: #fdf3f4; border: 1px solid #f0d0d3; border-radius: 4px;
}
.ez-waste h3 { font-size: 13.5px; font-weight: 600; color: #6b1f24; margin-bottom: 6px; }
.ez-waste p { font-size: 12px; color: #6b1f24; line-height: 1.6; margin-bottom: 8px; }
.ez-waste ul { list-style: none; }
.ez-waste li {
  font-size: 12px; color: #6b1f24; padding: 4px 0 4px 12px;
  border-left: 2px solid #a4262c; margin-bottom: 4px;
}

@media (max-width: 760px) {
  .ez-body { grid-template-columns: minmax(0,1fr); }
  .ez-nav { display: flex; border-right: 0; border-bottom: 1px solid #ddd; padding: 0; }
  .ez-nav button { border-left: 0; border-bottom: 3px solid transparent; text-align: center; }
  .ez-nav button.on { border-left: 0; border-bottom-color: #0067b8; }
  .ez-cols, .ez-row { grid-template-columns: minmax(0,1fr) minmax(0,.6fr) minmax(0,.5fr); }
  .ez-cols span:nth-child(2), .ez-row .upn,
  .ez-cols span:nth-child(4), .ez-row .li { display: none; }
  .ez-main { padding: 14px; }
}

/* ============================================================
   Credential Vault — deliberately unglamorous. It is a list.
   ============================================================ */
.vt { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.vt-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.vt-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.vt-tab {
  border: 1px solid var(--line); background: transparent; color: var(--dim);
  font-size: 11.5px; padding: 4px 10px; border-radius: 3px;
}
.vt-tab:hover { color: var(--text); border-color: var(--dim); }
.vt-tab.on { color: var(--accent); border-color: var(--accent); background: rgba(241,107,34,.08); }
.vt-count { font-size: 11px; }

.vt-note {
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  font-size: 11.5px; color: var(--dim); line-height: 1.6; flex-shrink: 0;
}
.vt-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; }
.vt-empty { padding: 20px; font-size: 12px; text-align: center; }

.vt-card {
  border: 1px solid var(--line); border-radius: 4px;
  padding: 12px; margin-bottom: 10px; background: rgba(255,255,255,.015);
}
.vt-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.vt-kind {
  font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  padding: 2px 6px; border-radius: 3px; border: 1px solid var(--line); color: var(--dim);
}
.vt-kind.k-vpn { color: var(--accent); border-color: var(--accent); }
.vt-kind.k-cloud { color: var(--blue); border-color: var(--blue); }
.vt-label { font-size: 13px; }
.vt-client { font-size: 11px; }

.vt-f {
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: 5px 14px;
  font-size: 12px; margin-bottom: 8px;
}
.vt-f dt { color: var(--dim); }
.vt-f dd { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.vt-f dd.p { display: flex; align-items: center; gap: 8px; }
.vt-f .pw { letter-spacing: .5px; color: var(--dim); }
.vt-f .pw.shown { color: var(--green); letter-spacing: 0; }
.vt-eye {
  border: 1px solid var(--line); background: transparent; color: var(--dim);
  font-size: 10.5px; padding: 2px 7px; border-radius: 3px; flex-shrink: 0;
}
.vt-eye:hover { color: var(--text); border-color: var(--dim); }

/* CLICK TO COPY. The value IS the button — because a value you can copy and a value you can
   only read should not look identical, and the target used to look like a link and do
   nothing at all. */
.vt-copy {
  border: 0; background: transparent; padding: 1px 5px; margin-left: -5px;
  font: inherit; color: var(--text); text-align: left;
  border-radius: 3px; border-bottom: 1px dashed transparent;
  max-width: 100%; overflow-wrap: anywhere;
}
.vt-copy:hover { background: rgba(241,107,34,.10); border-bottom-color: var(--accent); }
.vt-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* it says what happened, and it does not say the wrong one */
.vt-copy.won  { color: var(--green); border-bottom-color: transparent; }
.vt-copy.lost { color: var(--red);   border-bottom-color: transparent; }

/* the password is a copy button too, masked or not — you do not need to SEE a credential
   to paste it, and not seeing it is better */
.vt-copy.pw { flex: 1; min-width: 0; }
.vt-copy.pw.shown { color: var(--accent); }

@media (max-width: 640px) {
  /* a fat target for a thumb: this is the app most likely to be used standing up */
  .vt-copy { padding: 6px 6px; }
}

.vt-notes { font-size: 11.5px; color: var(--dim); line-height: 1.6; }

@media (max-width: 560px) {
  .vt-f { grid-template-columns: minmax(0,1fr); gap: 2px; }
  .vt-f dt { margin-top: 6px; }
}

/* ---------------- The notification area ---------------- */
#tray {
  display: flex; align-items: center; gap: var(--cell-gap);
  padding: 0 var(--cell-gap) 0 10px; margin-left: auto;
  border-left: 1px solid var(--line);
}
.trayicon {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: var(--cell); height: var(--cell); flex: 0 0 var(--cell);
  border: 0; background: transparent; border-radius: 3px;
}
.trayicon:hover { background: rgba(255,255,255,.06); }
.trayicon .ti-i { font-size: 13px; line-height: 1; }
.trayicon .ti-dot {
  position: absolute; right: 2px; bottom: 1px;
  width: 6px; height: 6px; border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--bg);
  box-sizing: content-box;
}
/* no status = no dot. A badge that is always there is furniture, not a signal. */
.trayicon .ti-dot.s-ok  { background: var(--green); box-shadow: 0 0 4px var(--green); }
.trayicon .ti-dot.s-busy{ background: var(--accent); }

/* a window living in the tray is not on screen and not on the taskbar */
.win.hidden-tray { display: none !important; }

/* ---------------- opnConnect: progress in the status line ----------------
   The handshake used to REPLACE the window, and when a step failed it stayed there —
   no address field, no button, no way out. Fail once and the application was locked.
   No VPN client does that. Progress belongs in the status line; the window stays yours. */
.vpn-status.bad { color: var(--red); }

.vpn-prog { display: none; gap: 3px; margin: 7px 0 2px; }
.vpn-prog.on { display: flex; }
.vpn-prog .seg {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.08);
  transition: background .2s;
}
.vpn-prog .seg.done   { background: var(--green); }
.vpn-prog .seg.active { background: var(--accent); animation: vp-pulse .9s ease-in-out infinite; }
.vpn-prog .seg.failed { background: var(--red); }
@keyframes vp-pulse { 50% { opacity: .35; } }

.vpn-err {
  display: none; margin-top: 9px; padding: 8px 10px;
  border-left: 2px solid var(--red); background: rgba(239,68,68,.07);
  font-size: 11.5px; color: var(--text); line-height: 1.6;
}
.vpn-err.on { display: block; }

@media (prefers-reduced-motion: reduce) {
  .vpn-prog .seg.active { animation: none; }
}

/* ---------------- System indicators ----------------
   Not apps. They belong to the machine and you cannot quit them. */
#sys { display: flex; align-items: center; gap: var(--cell-gap); padding: 0 var(--cell-gap); }
.sysicon {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: var(--cell); height: var(--cell); flex: 0 0 var(--cell);
  border: 0; background: transparent; border-radius: 3px;
  color: var(--dim);
}
.sysicon:hover { background: rgba(255,255,255,.06); color: var(--text); }
.sysicon svg { width: 17px; height: 17px; }
.sysicon.muted { color: var(--red); }

/* ---------------- Tray / system popovers ---------------- */
.syspop {
  position: fixed; z-index: 6000;
  min-width: 250px; max-width: 320px;
  background: var(--panel, #141414);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
  padding: 12px;
}
.sp-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--dim); margin-bottom: 10px;
}
.sp-row {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 0; font-size: 12.5px;
}
.sp-row .d {
  width: 7px; height: 7px; border-radius: 50%; margin-top: 5px;
  flex-shrink: 0; background: var(--dim);
}
.sp-row.on .d { background: var(--green); box-shadow: 0 0 5px var(--green); }
.sp-row.off .d { background: var(--red); }
.sp-row b { display: block; font-weight: 500; color: var(--text); }
.sp-row .sub { display: block; font-size: 11px; color: var(--dim); margin-top: 1px; }
.sp-note {
  margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--dim); line-height: 1.6;
}

.sp-vol { display: flex; align-items: center; gap: 9px; }
.sp-mute {
  border: 0; background: transparent; font-size: 14px;
  width: 24px; height: 24px; border-radius: 3px;
}
.sp-mute:hover { background: rgba(255,255,255,.06); }
.sp-slider { flex: 1; accent-color: var(--accent); }
.sp-pct { font-size: 11px; color: var(--dim); width: 32px; text-align: right; }

/* Entra: the tenant's own log */
.ez-log { display: flex; flex-direction: column; }
.ez-lrow {
  display: grid; grid-template-columns: 52px 120px minmax(0,1fr) 58px;
  gap: 10px; align-items: baseline;
  padding: 8px 10px; background: #fff; border-bottom: 1px solid #eee;
  font-size: 12px;
}
.ez-lrow.warn { background: #fdf6f6; }
.ez-lrow .id { color: #666; font-size: 11px; }
.ez-lrow .tk { color: #555; font-size: 11.5px; }
.ez-lrow.warn .msg { color: #a4262c; }
.ez-lrow .when { color: #888; font-size: 11px; text-align: right; }
@media (max-width: 760px) {
  .ez-lrow { grid-template-columns: 46px minmax(0,1fr); }
  .ez-lrow .tk, .ez-lrow .when { display: none; }
}

/* a tray icon is drawn, like every other icon in this world */
.trayicon .ti-i svg { width: 16px; height: 16px; display: block; }

/* ---------------- The chevron and its sheet ----------------
   On a phone the notification area collapses, exactly as a real one does. */
.sysicon.chev { display: none; }
.sysicon.chev svg { width: 14px; height: 14px; }

.syspop.syssheet { min-width: 260px; max-width: min(360px, calc(100vw - 20px)); }
.ss-list { display: flex; flex-direction: column; gap: 2px; }
.ss-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 8px; border: 0; border-radius: 4px;
  background: transparent; text-align: left; color: var(--text);
}
button.ss-row:hover { background: rgba(255,255,255,.06); }
.ss-row.static { cursor: default; }
.ss-i { display: flex; flex-shrink: 0; width: 20px; color: var(--dim); }
.ss-i svg { width: 20px; height: 20px; display: block; }
.ss-t { flex: 1; min-width: 0; }
.ss-t b { display: block; font-size: 12.5px; font-weight: 500; }
.ss-t .sub {
  display: block; font-size: 11px; color: var(--dim); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: transparent; }
.ss-dot.s-ok { background: var(--green); box-shadow: 0 0 5px var(--green); }
.ss-dot.s-busy { background: var(--accent); }
.ss-row.vol .sp-slider { flex: 0 0 110px; }

@media (max-width: 640px) {
  /* one chevron, and everything folds behind it */
  .sysicon.chev { display: flex; }
  #tray { display: none; }
  #sys-net, #sys-vol { display: none; }
  #sys { border-left: 1px solid var(--line); padding-left: 2px; margin-left: auto; }
  .taskbtn { width: 36px; }

  /* the sheet spans the screen. It is not a desktop popover that happens to be on a
     phone — anchored to a chevron at the far right of a 390px display, its left edge
     went straight off the screen and it arrived with its own title cut in half. */
  .syspop { min-width: 0; max-width: none; }
  .syspop.syssheet { min-width: 0; max-width: none; }
  .ss-row.vol .sp-slider { flex: 1; }
  .ss-t .sub { white-space: normal; }
}

/* ============================================================
   Site: opnMSP Knowledge Base

   BLACK, because it is OURS. Entra is a Microsoft console and wears Microsoft's
   colours; the Northgate intranet belongs to Northgate and wears theirs. This one is
   opnMSP's own, and it should feel like part of the machine you are sitting at — the
   same surfaces, the same accent, the same type. The colour is a signal about WHOSE
   system you are looking at, and that is a distinction worth being able to make at a
   glance when you are working across three companies in an afternoon.
   ============================================================ */
.kb { display: flex; flex-direction: column; min-height: 100%; background: var(--bg); color: var(--text); }
.kb-top {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel, #101010);
}
.kb-brand { font-size: 14px; color: var(--dim); letter-spacing: .2px; }
.kb-brand b { color: var(--accent); font-weight: 600; }
.kb-search {
  width: min(320px, 45%); font: inherit; font-size: 12.5px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 3px;
  background: rgba(255,255,255,.03); color: var(--text);
}
.kb-search::placeholder { color: var(--muted); }
.kb-search:focus-visible { outline: none; border-color: var(--accent); background: rgba(255,255,255,.05); }

.kb-body { flex: 1; display: grid; grid-template-columns: 232px minmax(0,1fr); min-height: 0; }
.kb-side {
  background: rgba(255,255,255,.015); border-right: 1px solid var(--line);
  padding: 10px 0; overflow-y: auto;
}
.kb-space {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 12px; border: 0; border-left: 2px solid transparent; background: transparent;
  color: var(--dim); font-size: 12.5px; text-align: left;
}
.kb-space:hover { background: rgba(255,255,255,.05); color: var(--text); }
.kb-space.on { border-left-color: var(--accent); color: var(--accent); background: rgba(241,107,34,.07); }
.kb-space .ic { font-size: 11px; }
.kb-tree-h {
  padding: 12px 12px 5px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted);
}
.kb-node { display: flex; align-items: center; gap: 1px; padding-right: 6px; }
.kb-node:hover { background: rgba(255,255,255,.05); }
.kb-node.on { background: rgba(241,107,34,.09); }
.kb-node.on .pt { color: var(--accent); }
.kb-chev {
  width: 16px; flex-shrink: 0; border: 0; background: transparent;
  color: var(--muted); font-size: 9px; padding: 0;
}
.kb-chev:hover { color: var(--text); }
.kb-chev.none { visibility: hidden; }
.kb-pg {
  display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0;
  border: 0; background: transparent; text-align: left;
  padding: 6px 0; color: var(--dim); font-size: 12.5px;
}
.kb-pg .pi { color: var(--muted); font-size: 10px; flex-shrink: 0; }
.kb-pg .pt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kb-main { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 26px 34px 50px; }
.kb-crumb { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.kb-title { font-size: 27px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.kb-by {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted); margin-bottom: 22px;
}
.kb-by .av {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #0a0a0a;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700;
}
.kb-by b { color: var(--dim); font-weight: 500; }

.kb-h { font-size: 17px; font-weight: 600; color: var(--text); margin: 22px 0 8px; }
.kb-p { font-size: 13.5px; line-height: 1.75; color: var(--dim); margin-bottom: 12px; }
.kb-ol ol { margin: 0 0 14px 20px; }
.kb-ol li { font-size: 13.5px; line-height: 1.75; color: var(--dim); margin-bottom: 5px; }
.kb-ol li::marker { color: var(--accent); }

.kb-callout {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; margin: 14px 0;
  background: rgba(58,130,246,.07); border-left: 2px solid var(--blue); border-radius: 3px;
}
.kb-callout.warn { background: rgba(241,107,34,.07); border-left-color: var(--accent); }
.kb-callout .ci {
  width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue); color: #0a0a0a; font-size: 10px; font-weight: 700;
}
.kb-callout.warn .ci { background: var(--accent); }
.kb-callout p { font-size: 13px; line-height: 1.7; color: var(--text); }

.kb-table-w { overflow-x: auto; margin: 14px 0; }
.kb-table { border-collapse: collapse; width: 100%; min-width: 460px; }
.kb-table th, .kb-table td {
  border: 1px solid var(--line); padding: 8px 11px;
  font-size: 12.5px; line-height: 1.6; text-align: left; vertical-align: top;
  color: var(--dim);
}
.kb-table th {
  background: rgba(255,255,255,.03); color: var(--text); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
}
.kb-table td:first-child {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--accent);
}

.kb-results h1 { font-size: 19px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
.kb-result {
  display: block; width: 100%; text-align: left;
  padding: 9px 11px; margin-bottom: 5px;
  border: 1px solid var(--line); border-radius: 3px; background: transparent;
}
.kb-result:hover { background: rgba(255,255,255,.04); border-color: var(--dim); }
.kb-result b { display: block; font-size: 13px; color: var(--accent); font-weight: 500; }
.kb-result .sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

@media (max-width: 760px) {
  .kb-body { grid-template-columns: minmax(0,1fr); }
  .kb-side { border-right: 0; border-bottom: 1px solid var(--line); max-height: 190px; }
  .kb-main { padding: 18px 16px 40px; }
  .kb-title { font-size: 22px; }
  .kb-search { width: 140px; }
}

/* ============================================================
   Site: Northgate intranet — the victim
   ============================================================ */
.nt { min-height: 100%; background: #f7f8fa; color: #1f2937; }
.nt-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px; background: #14304d; color: #fff;
}
.nt-mark {
  width: 32px; height: 32px; border-radius: 4px;
  background: #e07b39; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.nt-co { font-size: 14.5px; font-weight: 600; }
.nt-sub { font-size: 11px; opacity: .7; }
.nt-nav { display: flex; gap: 16px; font-size: 12.5px; opacity: .85; }

.nt-hero { padding: 30px 22px 22px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.nt-hero h1 { font-size: 25px; font-weight: 600; color: #14304d; margin-bottom: 4px; }
.nt-hero p { font-size: 13.5px; color: #6b7280; }

.nt-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px; padding: 20px 22px;
}
.nt-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 5px; padding: 16px;
}
.nt-card.wide { grid-column: 1 / -1; }
.nt-card h2 { font-size: 14px; font-weight: 600; color: #14304d; margin-bottom: 10px; }
.nt-card ul { list-style: none; }
.nt-card li { padding: 7px 0; border-bottom: 1px solid #f1f2f4; font-size: 13px; }
.nt-card li:last-child { border-bottom: 0; }
.nt-card li b { display: block; font-weight: 600; color: #1f2937; }
.nt-card li span { display: block; font-size: 12px; color: #6b7280; margin-top: 2px; }
.nt-links li { color: #1d5fa8; }
.nt-card p { font-size: 13px; line-height: 1.7; color: #1f2937; margin-bottom: 8px; }
.nt-dim { color: #6b7280 !important; font-size: 12.5px !important; }

.nt-foot {
  display: flex; gap: 10px; padding: 14px 22px;
  border-top: 1px solid #e5e7eb; font-size: 11.5px; color: #9ca3af;
}

@media (max-width: 760px) {
  .nt-grid { grid-template-columns: minmax(0,1fr); }
  .nt-nav { display: none; }
}

/* ---------------- The bookmark bar ----------------
   It starts nearly empty on purpose. The bar is the shape of what you have learned. */
.br-marks {
  display: flex; align-items: center; gap: 3px;
  padding: 4px 8px; flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.br-marks::-webkit-scrollbar { display: none; }
.br-mark {
  flex-shrink: 0;
  border: 0; background: transparent; color: var(--dim);
  font-size: 11.5px; padding: 4px 9px; border-radius: 3px;
  white-space: nowrap;
}
.br-mark:hover { background: rgba(255,255,255,.06); color: var(--text); }
.br-mark-hint { font-size: 11px; color: var(--muted); padding: 4px 4px; white-space: nowrap; }

.br-star {
  flex-shrink: 0;
  border: 0; background: transparent; color: var(--dim);
  font-size: 14px; line-height: 1; padding: 2px 6px;
}
.br-star:hover:not(:disabled) { color: var(--text); }
.br-star.on { color: var(--accent); }
.br-star:disabled { opacity: .25; }

/* ============================================================
   Site: the Microsoft admin console SHELL

   One stylesheet, every console. The only thing a console changes is --ms-brand — purple
   for Microsoft 365, blue for Exchange, near-black for Defender. Everything else is
   shared, because in the real product everything else IS shared, and a technician who has
   learned one of these consoles has learned all of them.
   ============================================================ */
.ms { display: flex; flex-direction: column; min-height: 100%; background: #1b1a19; color: #f3f2f1;
      font-family: "Segoe UI", var(--font-ui), sans-serif; }

.ms-top {
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px; height: 48px; flex-shrink: 0;
  background: var(--ms-brand); color: #fff;
}
.ms-waffle { font-size: 17px; opacity: .9; }
.ms-brandname { font-size: 15px; font-weight: 600; white-space: nowrap; }
.ms-search {
  flex: 1; max-width: 460px; height: 30px;
  border: 0; border-radius: 3px; padding: 0 10px;
  background: rgba(255,255,255,.16); color: #fff; font: inherit; font-size: 13px;
}
.ms-search::placeholder { color: rgba(255,255,255,.75); }
.ms-search:focus-visible { outline: 2px solid #fff; background: #fff; color: #111; }
.ms-who { margin-left: auto; font-size: 11.5px; opacity: .85; white-space: nowrap; }

.ms-body { flex: 1; display: grid; grid-template-columns: 228px minmax(0,1fr) 0; min-height: 0; }
.ms-body:has(.ms-fly.open) { grid-template-columns: 228px minmax(0,1fr) minmax(0, 420px); }

.ms-rail { background: #201f1e; border-right: 1px solid #323130; padding: 12px 0; overflow-y: auto; }
.ms-sec { margin-bottom: 10px; }
.ms-sec-h {
  padding: 8px 16px 4px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .6px; color: #a19f9d;
}
.ms-nav {
  display: block; width: 100%; text-align: left;
  padding: 8px 16px; border: 0; border-left: 3px solid transparent;
  background: transparent; color: #d2d0ce; font: inherit; font-size: 13px;
}
.ms-nav:hover { background: #292827; color: #fff; }
.ms-nav.on { border-left-color: var(--ms-brand); color: #fff; background: #292827; font-weight: 600; }

.ms-main { min-height: 0; overflow-y: auto; padding: 18px 28px 60px; }

/* THE PANE ITSELF — where every console's content is drawn. It had NO RULE AT ALL, in either
   direction: no width constraint, no min-width: 0. Inside a grid column that is the whole
   reason a wide table can force the column wider than the screen and push the rail off it. */
.ms-pane { min-width: 0; }

/* and the flyout's scrolling region, likewise undefined — so a long property sheet grew the
   flyout instead of scrolling inside it */
.ms-fly-body { overflow-y: auto; min-height: 0; flex: 1; padding: 0 20px 24px; }
.ms-crumb { font-size: 12px; color: #a19f9d; margin-bottom: 8px; }
.ms-crumb span { margin: 0 6px; }
.ms-title { font-size: 28px; font-weight: 600; margin-bottom: 18px; }

.ms-cmd {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #323130;
}
.ms-cmdbtn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: transparent; color: #f3f2f1;
  font: inherit; font-size: 13px; padding: 7px 11px; border-radius: 2px;
}
.ms-cmdbtn:hover:not(:disabled) { background: #292827; }
.ms-cmdbtn:disabled { color: #605e5c; }
.ms-cmdbtn .ic { color: #6cb8f6; font-size: 13px; }

.ms-note { font-size: 12.5px; color: #a19f9d; margin-bottom: 10px; line-height: 1.6; }
.ms-count { font-size: 12px; color: #a19f9d; margin-bottom: 6px; }

.ms-list { width: 100%; border-collapse: collapse; }
.ms-list th {
  text-align: left; font-size: 12px; font-weight: 600; color: #d2d0ce;
  padding: 8px 10px; border-bottom: 1px solid #484644; white-space: nowrap;
}
.ms-list td {
  padding: 11px 10px; font-size: 13px; border-bottom: 1px solid #323130;
  vertical-align: middle;
}
/* only a row that DOES something looks like it does */
.ms-list tbody tr.hit:hover { background: #252423; cursor: pointer; }
.ms-list tbody tr.on { background: #2b2a29; }
.ms-check { width: 34px; }
.ms-kebab { width: 34px; text-align: right; }
.ms-dots {
  border: 0; background: transparent; color: #a19f9d;
  font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 2px;
}
.ms-dots:hover { background: #3b3a39; color: #fff; }

.ms-ok  { color: #6bb700; }
.ms-bad { color: #f1707b; }
.ms-dim { color: #a19f9d; }

/* the flyout. A property sheet, and it belongs to the row that opened it. */
.ms-fly {
  display: none; background: #201f1e; border-left: 1px solid #323130;
  overflow-y: auto; padding: 20px 22px 40px;
}
.ms-fly.open { display: block; }
.ms-fly-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.ms-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: #0078d4; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600;
}
.ms-fly-t { flex: 1; min-width: 0; }
.ms-fly-t b { display: block; font-size: 19px; font-weight: 600; }
.ms-fly-t span { font-size: 12.5px; color: #a19f9d; }
.ms-fly-x {
  border: 0; background: transparent; color: #a19f9d;
  font-size: 18px; line-height: 1; padding: 2px 6px;
}
.ms-fly-x:hover { color: #fff; }

.ms-fly-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
.ms-flyact {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; color: #6cb8f6;
  font: inherit; font-size: 12.5px; padding: 5px 8px; border-radius: 2px;
}
.ms-flyact:hover { background: #292827; }
.ms-flyact.danger { color: #f1707b; }
.ms-flyact .ic { font-size: 12px; }

.ms-tabs { display: flex; gap: 2px; border-bottom: 1px solid #323130; margin-bottom: 18px; }
.ms-tab {
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: #d2d0ce; font: inherit; font-size: 13px; padding: 9px 12px;
}
.ms-tab:hover { color: #fff; }
.ms-tab.on { border-bottom-color: #6cb8f6; color: #fff; font-weight: 600; }

.ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.ms-grid h4 { font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.ms-grid p  { font-size: 12.5px; color: #d2d0ce; line-height: 1.7; word-break: break-word; }

.ms-cards { display: flex; flex-wrap: wrap; gap: 14px; }
.ms-card2 {
  min-width: 150px; padding: 18px 20px;
  background: #252423; border: 1px solid #323130; border-radius: 3px;
}
.ms-card2 b { display: block; font-size: 30px; font-weight: 600; }
.ms-card2 span { font-size: 12px; color: #a19f9d; }

/* sign in. There is no VPN in front of this page. */
.ms-signin { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px; }
.ms-card {
  width: min(400px, 100%); padding: 30px;
  background: #252423; border: 1px solid #323130; border-radius: 3px;
}
.ms-card h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.ms-sub { font-size: 12.5px; color: #a19f9d; margin-bottom: 20px; }
.ms-card label { display: block; font-size: 12px; margin: 12px 0 5px; }
.ms-in {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 13px;
  border: 1px solid #605e5c; border-radius: 2px; background: #1b1a19; color: #f3f2f1;
}
.ms-in:focus-visible { outline: none; border-color: var(--ms-brand); }
.ms-go { margin-top: 20px; width: 100%; }

@media (max-width: 900px) {
  .ms-body,
  .ms-body:has(.ms-fly.open) { grid-template-columns: minmax(0,1fr); }
  .ms-rail {
    display: flex; gap: 2px; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid #323130; padding: 6px;
  }
  .ms-sec { display: flex; margin: 0; }
  .ms-sec-h { display: none; }
  .ms-nav { width: auto; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
  .ms-nav.on { border-left: 0; border-bottom-color: var(--ms-brand); }
  .ms-main { padding: 14px 14px 40px; }
  .ms-title { font-size: 21px; }
  .ms-grid { grid-template-columns: 1fr; }
  /* the flyout takes the screen on a phone, because a property sheet that is 40px wide
     is not a property sheet */
  .ms-fly.open {
    position: fixed; inset: 0; z-index: 40; border-left: 0;
  }

  /* THE LIST BECOMES CARDS.
   *
   * A six-column table at 380px is not a table, it is a rumour: every column collapses to
   * two characters and a horizontal scrollbar hides the ones that matter. The technician
   * reads a mailbox list on a phone the same way they read it on a desk — by looking at ONE
   * row and knowing what it says — so each row becomes a card, and each cell carries the
   * name of its own column.
   *
   * Nothing is hidden. A column that is not worth showing on a phone was not worth showing
   * on a desk. */
  .ms-list, .ms-list tbody, .ms-list tr, .ms-list td { display: block; width: 100%; }
  .ms-list thead { display: none; }

  .ms-list tbody tr {
    padding: 12px 12px 12px 14px; margin-bottom: 8px;
    border: 1px solid #323130; border-left: 3px solid transparent;
    border-radius: 2px; background: #201f1e;
  }
  .ms-list tbody tr.on { border-left-color: var(--ms-brand); background: #2b2a29; }

  .ms-list td {
    border: 0; padding: 3px 0;
    display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 10px;
    align-items: baseline; font-size: 13px;
  }
  /* the column's own name, carried down to the cell that needs it */
  .ms-list td::before {
    content: attr(data-col); color: #a19f9d; font-size: 11px;
    text-transform: uppercase; letter-spacing: .4px;
  }
  /* the first cell is the row's identity: it gets no label and it gets to be big */
  .ms-list td:first-child { display: block; font-size: 15px; margin-bottom: 4px; }
  .ms-list td:first-child::before { content: none; }

  .ms-check, .ms-kebab { width: auto; }
  .ms-kebab { text-align: left; }
  .ms-kebab::before { content: none; }
  .ms-check::before { content: none; }
}

/* a refused sign-in SAYS SO. It used to say nothing at all: the world returns ok:true with
   a `denied` reason (a failed action still emits events), and the console read only `ok`. */
.ms-err {
  display: none; margin-top: 12px; padding: 9px 11px;
  border-left: 3px solid #f1707b; background: rgba(241,112,123,.09);
  font-size: 12.5px; color: #f3f2f1; line-height: 1.6;
}
.ms-err.on { display: block; }
.ms-empty { padding: 26px 4px; font-size: 13px; color: #a19f9d; }

/* A FORM, IN A DIALOG. Chrome, so it lives with the chrome. */
/* a plain button inside a flyout tab — the forwarding switch lives on one */
.ms-btn {
  margin-top: 14px; padding: 6px 14px;
  border: 1px solid #605e5c; border-radius: 2px;
  background: transparent; color: #f3f2f1;
  font-size: 13px; font-family: inherit;
}
.ms-btn:hover { background: #292827; border-color: #8a8886; }

.ms-form { display: flex; flex-direction: column; gap: 4px; }
.ms-fl {
  font-size: 11.5px; color: #a19f9d; margin-top: 10px;
  text-transform: uppercase; letter-spacing: .4px;
}
.ms-fl:first-child { margin-top: 0; }
.ms-form .ms-in { width: 100%; }
.ms-fcheck {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 0; font-size: 13px; color: #f3f2f1; line-height: 1.5;
}
.ms-fcheck input { margin-top: 3px; flex-shrink: 0; }
.ms-fmulti {
  max-height: 190px; overflow-y: auto;
  border: 1px solid #605e5c; border-radius: 2px; padding: 6px 10px;
}

/* SERVICE HEALTH — an incident, and what Microsoft said about it as it went along.
   The dates are the whole point of this pane, so they are not small grey afterthoughts. */
.ms-issue {
  padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid #323130;
}
.ms-issue:last-child { border-bottom: 0; margin-bottom: 0; }

.ms-jt { display: flex; flex-direction: column; gap: 12px; }
.ms-jtrow {
  display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 12px;
  padding-left: 11px; border-left: 2px solid #3b3a39;
}
.ms-jtrow b { font-size: 11.5px; color: #a19f9d; font-weight: 400; }
.ms-jtrow span { font-size: 12.5px; color: #d2d0ce; line-height: 1.65; }

@media (max-width: 900px) {
  .ms-jtrow { grid-template-columns: minmax(0,1fr); gap: 2px; }
}

/* the users pane: chips, flyout tabs, the reset dialog */
.ms-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ms-chips-l { font-size: 12.5px; color: #a19f9d; }
.ms-chip {
  font: inherit; font-size: 12.5px; padding: 5px 10px;
  border: 1px solid #605e5c; border-radius: 14px;
  background: #292827; color: #f3f2f1;
}
.ms-chip:focus-visible { outline: none; border-color: #6cb8f6; }

.ms-h { font-size: 12.5px; font-weight: 600; margin: 18px 0 6px; }
.ms-apps { margin: 0 0 6px 18px; }
.ms-apps li { font-size: 12.5px; color: #d2d0ce; line-height: 1.8; }
.ms-warn-t { color: #ffb900; }
.ms-warn {
  margin-top: 14px; padding: 9px 11px;
  border-left: 3px solid #ffb900; background: rgba(255,185,0,.08);
  font-size: 12.5px; color: #f3f2f1; line-height: 1.6;
}

.ms-dlg { padding: 2px; }
.ms-l { display: block; font-size: 12px; margin-bottom: 5px; color: var(--dim); }
.ms-dlg-a { display: flex; justify-content: flex-end; margin-top: 16px; }

/* the selection is never invisible. A bulk action acts on what you can see. */
.ms-selcount {
  margin-left: 8px; padding: 4px 9px; border-radius: 11px;
  background: rgba(108,184,246,.14); color: #6cb8f6;
  font-size: 11.5px; white-space: nowrap;
}

/* the licences pane: the bill, and the part of it nobody is using */
.ms-card2.bad b { color: #f1707b; }

/* the sentence under the list that costs the client money if nobody reads it */
.ms-foot {
  margin-top: 12px; padding: 9px 12px;
  border-left: 3px solid #ffb900; background: rgba(255,185,0,.07);
  font-size: 12.5px; color: #d2d0ce; line-height: 1.7;
}

/* the licence picker. A subscription with no seats left is not selectable — buying one is
   a decision with a price on it, made somewhere else, on purpose. */
.ms-picks { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.ms-pick {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 8px; border-radius: 2px;
}
.ms-pick:hover { background: #292827; }
.ms-pick.out { opacity: .55; }
.ms-pick input { margin-top: 3px; }
.ms-pick span { display: block; }
.ms-pick b { display: block; font-size: 13px; font-weight: 600; }
.ms-pick i { display: block; font-size: 11.5px; font-style: normal; color: #a19f9d; margin-top: 2px; }

/* group members */
.ms-mem { display: flex; flex-direction: column; }
.ms-memrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid #323130;
}
.ms-memrow span { font-size: 13px; }
.ms-memrow i { display: block; font-style: normal; font-size: 11px; color: #a19f9d; }

/* message trace: the message's own history, told as a sequence */
.ms-verdict { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.ms-trace { list-style: none; margin: 18px 0 0; padding-left: 18px; }
.ms-trace li {
  position: relative; padding: 0 0 18px 16px;
  border-left: 1px solid #484644;
}
.ms-trace li:last-child { border-left-color: transparent; padding-bottom: 0; }
.ms-trace li::before {
  content: ""; position: absolute; left: -4.5px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ms-brand);
}
.ms-trace b {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  text-transform: capitalize; margin-right: 8px;
}
.ms-trace span { font-size: 11px; }
.ms-trace em {
  display: block; font-style: normal; font-size: 12px;
  color: #6cb8f6; margin-top: 2px;
}
.ms-trace p { font-size: 12.5px; color: #a19f9d; line-height: 1.65; margin-top: 4px; }

/* A QUARANTINED MESSAGE, READ SAFELY.
 *
 * This was called .ms-body — and so was the console's LAYOUT GRID, 250 lines earlier. The
 * later rule won, so on every console: `display: grid` was lost (rail, main and flyout
 * stopped being columns), the font became monospace, and `white-space: pre-wrap` made every
 * newline and indent in the template literals render as REAL VERTICAL SPACE. That is where
 * the enormous gaps came from. The layout was not broken. It was faithfully printing the
 * whitespace of its own source code.
 *
 * One class name, two meanings, one stylesheet. A name with two meanings is a fact with two
 * representations wearing a hat. (Doctrine, Bug #2.)
 */
.ms-msgbody {
  padding: 14px; margin-bottom: 6px;
  background: #1b1a19; border: 1px solid #323130; border-radius: 2px;
  font-family: var(--font-mono), monospace; font-size: 12px;
  color: #d2d0ce; line-height: 1.75; white-space: pre-wrap; word-break: break-word;
}

/* ================= GROUP POLICY MANAGEMENT =================
   Tree on the left, the linked GPOs (in link order) on the right. The console prints the
   order and the filter; it does not explain them, and it flags nothing. */
.gp { display: flex; height: 100%; min-height: 0; margin: -14px; }

.gp-tree {
  flex: 0 0 232px; min-width: 0; overflow-y: auto;
  border-right: 1px solid var(--border); padding: 8px 0;
  background: #0c0c0c;
}
@media (max-width: 700px) { .gp-tree { flex-basis: 150px; } }

.gp-node {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px; cursor: pointer; font-size: 12.5px; color: var(--text);
  border-left: 2px solid transparent; white-space: nowrap;
}
.gp-node:hover { background: #151515; }
.gp-node.on { background: #1a1a1a; border-left-color: var(--accent); }
.gp-ico  { flex: 0 0 auto; font-size: 12px; opacity: .75; }
.gp-name { overflow: hidden; text-overflow: ellipsis; }
.gp-count {
  margin-left: auto; font-size: 10.5px; color: var(--muted);
  background: #1e1e1e; border-radius: 8px; padding: 0 6px;
}
/* Block Inheritance. It is a fact on the OU, shown as one. It is not a warning. */
.gp-tag {
  flex: 0 0 auto; font-size: 10px; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 3px; padding: 0 4px; line-height: 14px;
}
.gp-kids { padding-left: 13px; }
.gp-sep  { height: 1px; background: var(--border); margin: 8px 0; }

.gp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.gp-head { padding: 14px 16px 8px; border-bottom: 1px solid var(--border); }
.gp-head h2 { font-size: 15px; color: var(--text); margin: 0 0 3px; }
.gp-sub { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.55; }

.gp-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--border); }
.gp-tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; font-size: 12px; padding: 8px 10px; cursor: pointer;
}
.gp-tab:hover { color: var(--text); }
.gp-tab.on { color: var(--text); border-bottom-color: var(--accent); }

.gp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 20px; }
.gp-h { font-size: 12px; color: var(--muted); margin: 16px 0 6px; font-weight: 600; }
.gp-h:first-child { margin-top: 0; }

.gp-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gp-tbl th {
  text-align: left; font-weight: 500; color: var(--muted); font-size: 11px;
  padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.gp-tbl td { padding: 8px 10px; border-bottom: 1px solid #171717; color: var(--text); }
.gp-tbl tbody tr[data-open] { cursor: pointer; }
.gp-tbl tbody tr[data-open]:hover { background: #141414; }

.gp-off   { color: var(--muted); }
.gp-dim   { color: var(--muted); }
.gp-why   { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.gp-empty { font-size: 12.5px; color: var(--muted); padding: 18px 2px; line-height: 1.6; }

/* GPMC editing controls */
.gp-btn {
  margin-top: 10px; padding: 5px 12px;
  border: 1px solid var(--border); border-radius: 3px;
  background: transparent; color: var(--text); font: inherit; font-size: 12px;
  cursor: pointer;
}
.gp-btn:hover { background: #191919; border-color: var(--dim); }
.gp-tbl .gp-btn { margin-top: 0; padding: 3px 9px; font-size: 11px; }
.gp-right { text-align: right; }

/* GPMC dialogs */
.gp-form { display: flex; flex-direction: column; gap: 4px; }
.gp-fl { font-size: 11.5px; color: var(--muted); margin-top: 10px; }
.gp-fl:first-child { margin-top: 0; }
.gp-in {
  width: 100%; padding: 7px 9px; font: inherit; font-size: 13px;
  background: #111; color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
}
.gp-in:focus { outline: none; border-color: var(--accent); }

/* GPMC — the Group Policy Results picker */
.gp-pick {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 0; font-size: 11.5px; color: var(--muted);
}
.gp-in.gp-sm { width: auto; padding: 4px 7px; font-size: 12px; }

/* ---- GPMC ON A PHONE ----
   A four-column table at 380px is not a table, it is a rumour. The tree goes on top and
   scrolls sideways; every table becomes cards, and each cell carries the name of its own
   column — because a heading two hundred pixels above the row you are reading is trivia. */
@media (max-width: 700px) {
  .gp { flex-direction: column; }

  .gp-tree {
    flex: 0 0 auto; max-height: 132px;
    border-right: 0; border-bottom: 1px solid var(--border);
  }

  .gp-tabs { overflow-x: auto; }
  .gp-body { padding: 12px 12px 20px; }

  .gp-tbl, .gp-tbl tbody, .gp-tbl tr, .gp-tbl td { display: block; width: 100%; }
  .gp-tbl thead { display: none; }

  .gp-tbl tr {
    border: 1px solid var(--border); border-radius: 4px;
    margin-bottom: 8px; padding: 4px 2px; background: #101010;
  }
  .gp-tbl td {
    border-bottom: 0; padding: 5px 10px;
    display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  }
  .gp-tbl td::before {
    content: attr(data-col);
    flex: 0 0 auto; color: var(--muted); font-size: 11px;
  }
  .gp-tbl td:not([data-col]) { justify-content: flex-end; }
  .gp-why { text-align: right; }
}

/* ---- THE REMOTE DESKTOP'S "THIS PC" ----
   Where Group Policy stops being a table and becomes a drive letter. */
/* Where a setting LIVES in a real Group Policy editor. Half of learning Group Policy is
   knowing where to find a setting, and a name on its own teaches none of it. */
.gp-path {
  margin: 6px 0 0; font-size: 11px; color: var(--muted); line-height: 1.5;
  word-break: break-word;
}

/* The what-if row on Group Policy Modeling. */
.gp-what {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 4px; background: #101010;
}

/* ---- THE GROUP POLICY EDITOR ----
   Group Policy is a tree, and knowing WHERE a setting lives is half the skill. */
.gpe { border: 1px solid var(--border); border-radius: 4px; background: #101010; padding: 6px 0; }
.gpe-branch, .gpe-leaf {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 12px 5px calc(12px + var(--d) * 16px);
  font-size: 12.5px; line-height: 1.4;
}
.gpe-branch { color: var(--muted); }
.gpe-leaf { color: var(--text); cursor: pointer; border-left: 2px solid transparent; }
.gpe-leaf:hover { background: #161616; border-left-color: var(--accent); }
.gpe-leaf.on { color: var(--text); }
.gpe-leaf.on .gpe-name { font-weight: 600; }
.gpe-ico { flex: 0 0 auto; opacity: .55; font-size: 11px; }
/* the label takes what it needs and WRAPS; the state is pinned right and never squeezed off
   the edge, which is what it did the moment a label ran long. */
.gpe-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.gpe-state {
  flex: 0 0 auto; font-size: 11.5px; text-align: right;
  max-width: 45%; overflow-wrap: anywhere;
}
.gpe-count {
  flex: 0 0 auto; font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: rgba(241,107,34,.15); color: var(--accent);
}
@media (max-width: 640px) {
  .gpe-leaf { flex-wrap: wrap; }
  .gpe-state { width: 100%; padding-left: 20px; }
}

/* ---- THE VISIBLE WAY IN ----
   Every menu in this console was a right-click and nothing else, which on a phone means it
   was not there at all. A control nobody can find is a control that does not exist. */
.gp-dots {
  flex: 0 0 auto; margin-left: auto;
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 15px; line-height: 1;
  padding: 2px 6px; border-radius: 3px;
}
.gp-dots:hover { background: rgba(255,255,255,.08); color: var(--text); }
.gp-node .gp-dots { opacity: .45; }
.gp-node:hover .gp-dots, .gp-node.on .gp-dots { opacity: 1; }
.gp-edit { margin-top: 10px; }

/* ---- GPO LINKS IN THE TREE ----
   How you actually read an estate: expand an OU, see what is linked to it, in precedence
   order, enforced ones marked, disabled ones greyed. This is how you spot a link nobody
   expected — and a thing you can only find by looking for it is a thing you will not find. */
.gp-link .gp-ico { opacity: .6; }
.gp-link .gp-name { font-size: 12.5px; }
.gp-link.off .gp-name { opacity: .45; text-decoration: line-through; }
.gp-tag-off {
  background: rgba(255,255,255,.08); color: var(--muted); border-color: transparent;
}

/* A WMI query, shown in full — because a filter whose query you cannot read is a GPO you
   cannot explain. */
.gp-q { font-size: 11.5px; overflow-wrap: anywhere; max-width: 340px; }

/* ---- THE VISIBLE WAY IN, FOR EVERY APP ----
   Every app put its actions on a right-click and nowhere else, which on a phone means it put
   them nowhere. The shell now guarantees a button. A control nobody can reach does not exist. */
.row-dots {
  flex: 0 0 auto; margin-left: auto;
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 15px; line-height: 1;
  padding: 2px 6px; border-radius: 3px; opacity: .5;
}
.row-dots:hover { background: rgba(255,255,255,.08); color: var(--text); opacity: 1; }
tr .row-dots, li .row-dots { opacity: .75; }

/* ================= File Explorer (files.js, §1.1 step 6) ================= */
.fb { display: flex; flex-direction: column; height: 100%; }
.fb-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
          border-bottom: 1px solid #2a2c31; }
.fb-crumb { font-size: 12px; color: #c9cdd6; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
.fb-spacer { flex: 1; }
.fb-main { flex: 1; overflow: auto; min-height: 0; }
.fb-status { padding: 5px 10px; font-size: 11px; border-top: 1px solid #2a2c31; }
.fb-list { display: flex; flex-direction: column; padding: 6px; gap: 2px; }
.fb-row { display: flex; align-items: center; gap: 9px; padding: 9px 10px;
          background: none; border: 0; border-radius: 6px; color: #d4d7de;
          text-align: left; cursor: pointer; font: inherit; width: 100%; }
.fb-row:hover { background: #1d1f24; }
.fb-ico { width: 20px; text-align: center; }
.fb-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-meta { font-size: 11px; }
.fb-empty { padding: 26px 18px; color: #8b8f99; font-size: 13px; line-height: 1.5; }
.fb-server { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px;
             color: #c9cdd6; font-size: 12px; }
.fb-share { display: flex; align-items: center; gap: 8px; width: 100%;
            padding: 8px 12px; background: none; border: 0; color: #d4d7de;
            text-align: left; cursor: pointer; font: inherit; border-radius: 6px; }
.fb-share:hover { background: #1d1f24; }
.fb-share.on { background: #24262c; color: #fff; }
.fb-view { display: flex; flex-direction: column; height: 100%; padding: 10px; gap: 8px; }
.fb-viewhead { display: flex; align-items: center; gap: 8px; }
.fb-err { background: #3a1d1d; border: 1px solid #6e2c2c; color: #f0b9b9;
          border-radius: 6px; padding: 9px 11px; font-size: 12px; line-height: 1.5; }
.fb-ta { flex: 1; min-height: 140px; resize: none; background: #131316;
         color: #d4d7de; border: 1px solid #2a2c31; border-radius: 6px;
         padding: 10px; font-size: 12px; line-height: 1.5; }

/* the session desktop's drive letters — labels become controls (step 6) */


/* Properties pane — two dialogs, never merged (files.js step 7) */
.fb-props { display: flex; flex-direction: column; height: 100%; padding: 10px; gap: 8px; }
.fb-tabs { display: flex; align-items: center; gap: 4px; }
.fb-tab { background: none; border: 1px solid #2a2c31; border-bottom: 0; color: #a9adb8;
          padding: 6px 12px; border-radius: 6px 6px 0 0; cursor: pointer; font: inherit;
          font-size: 12px; }
.fb-tab.on { background: #1d1f24; color: #fff; }
.fb-tabbody { flex: 1; overflow: auto; border: 1px solid #2a2c31; border-radius: 0 6px 6px 6px;
              padding: 10px; min-height: 0; }
.fb-sec { display: flex; flex-direction: column; gap: 8px; }

/* THE ADD AFFORDANCE — the one form control real Windows keeps: name a principal not yet on
   the list. Changing an existing trustee happens on its grid row, not here. */
.fb-add { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.fb-addrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* the Add input and level select wear the console's native input skin (same as .adp-in),
   so the affordance reads as part of the dialog, not a browser-default bolt-on */
.fb-add-tr, .fb-add-lv {
  font: inherit; font-size: 13px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 8px; min-width: 0;
}
.fb-add-tr { flex: 1 1 180px; }
.fb-add-lv { flex: 0 0 auto; cursor: pointer; }
.fb-add-tr:focus-visible, .fb-add-lv:focus-visible { outline: none; border-color: var(--accent); }
.fb-add-tr::placeholder { color: var(--muted); }
.fb-ace-err { font-size: 11.5px; color: var(--bad, #e5484d); line-height: 1.5; }
.fb-sechead { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.fb-names { display: flex; flex-direction: column; gap: 2px; }
.fb-name { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: none;
           border: 0; border-radius: 6px; color: #d4d7de; text-align: left; cursor: pointer;
           font: inherit; width: 100%; }
.fb-name:hover { background: #1d1f24; }
.fb-name.on { background: #24262c; color: #fff; }
.fb-grid { border: 1px solid #2a2c31; border-radius: 6px; padding: 8px 10px; }
.fb-gtitle { font-size: 11px; margin-bottom: 6px; }
.fb-grow { display: grid; grid-template-columns: 1fr 52px 52px; align-items: center;
           padding: 4px 0; font-size: 12px; }
.fb-ghead { color: #8b8f99; font-size: 11px; border-bottom: 1px solid #2a2c31; }
.fb-grow .ga, .fb-grow .gd { text-align: center; }
/* THE CHECKBOX IS THE EDITOR. An explicit box is a live toggle; an inherited box is a locked
   ✓, greyed, because you cannot uncheck a parent's grant on the child. */
.fb-box { width: 18px; height: 18px; border: 1px solid #3a3d44; border-radius: 4px;
          background: #16181d; color: #d4d7de; font-size: 12px; line-height: 1;
          cursor: pointer; padding: 0; display: inline-flex; align-items: center;
          justify-content: center; }
.fb-box:hover:not(:disabled) { border-color: var(--accent); }
.fb-box.on { background: #1f2937; border-color: var(--accent); }
.fb-box.inh { color: #6f7480; }
/* IMPLIED — a lower rung lit because a higher level covers it. Checked but derived: greyed
   and non-interactive, so it reads as "included by Full", not as a thing you set here. */
.fb-box.implied { color: #6f7480; background: #1a1c22; border-color: #2f323a; }
.fb-box:disabled { cursor: default; opacity: .8; }
/* THE COMMIT BAR — real Windows' OK / Apply / Cancel. Nothing writes until Apply or OK;
   Cancel discards the staged edits. Apply/Cancel disable when there is nothing staged. */
.fb-commit { display: flex; align-items: center; gap: 8px; margin-top: 10px;
             padding-top: 10px; border-top: 1px solid #2a2c31; }
.fb-commit-err { font-size: 11.5px; color: var(--bad, #e5484d); line-height: 1.4; }
.fb-origin { grid-column: 1 / -1; font-size: 10px; padding-left: 2px; }
.fb-advbtn { align-self: flex-start; }
.fb-adv { border: 1px solid #2a2c31; border-radius: 6px; overflow: hidden; }
.fb-advrow { display: grid; grid-template-columns: 52px 1.2fr 1fr 1.4fr; gap: 8px;
             padding: 6px 10px; font-size: 11.5px; border-top: 1px solid #232529; }
.fb-advrow:first-child { border-top: 0; }
.fb-advhead { color: #8b8f99; background: #191b1f; }
.fb-advrow.inh { color: #8b8f99; }     /* inherited rows grey in Advanced too */

/* Effective Access tab (files.js step 8) — RSoP for files */
.fb-ea-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-ea-user { background: #131316; border: 1px solid #2a2c31; border-radius: 6px;
              color: #d4d7de; padding: 7px 9px; font-size: 12px; min-width: 120px; }
.fb-ea-out { display: flex; flex-direction: column; gap: 10px; }
.fb-ea-verdict { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-cap { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #2a2c31;
          border-radius: 999px; padding: 5px 12px; font-size: 12px; }
.fb-cap.yes { color: #b8e6b8; border-color: #2f5d2f; }
.fb-cap.no  { color: #8b8f99; }
.fb-cap .mk { font-size: 11px; }
.fb-ea-clips { display: flex; flex-direction: column; gap: 6px; }
.fb-earow { grid-template-columns: 52px 52px 1fr 1.6fr 56px; }
.fb-eahead { color: #8b8f99; background: #191b1f; }

/* inheritance state on the Advanced view (files.js, step-10 audit) */
.fb-inhstate { font-size: 11px; color: #8b8f99; padding: 4px 2px 6px; line-height: 1.5; }
.fb-inhstate.off { color: #e0b088; }


/* ================= THE OPNMSP HELPDESK — cross-client ticket board (browser site) ============ */
.hd { display: flex; flex-direction: column; height: 100%; min-height: 0;
      background: var(--surface); color: var(--text); font-size: 13px; }
.hd-chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--header);
}
.hd-brand { font-size: 14px; letter-spacing: .2px; }
.hd-brand b { color: var(--accent); font-weight: 600; }
.hd-scope {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border); border-radius: 3px; padding: 2px 7px;
}
.hd-sp { flex: 1; }
.hd-find, .hd-prifilter {
  font: inherit; font-size: 12.5px; background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 5px 8px;
}
.hd-find { width: 200px; }
.hd-prifilter { cursor: pointer; }
.hd-find:focus-visible, .hd-prifilter:focus-visible { outline: none; border-color: var(--accent); }

.hd-board { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hd-cols, .hd-row {
  display: grid;
  grid-template-columns:
    minmax(0,.7fr) minmax(0,2.4fr) minmax(0,.9fr) minmax(0,1fr)
    minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr);
  gap: 10px; align-items: center; padding: 8px 16px;
}
.hd-cols {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border);
}
.hd-cols [data-k] { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 4px; }
.hd-cols [data-k]:hover { color: var(--text); }
.hd-cols [data-k].sorted { color: var(--accent); }
.hd-cols [data-k].sorted::after { content: "\2191"; font-size: 9px; }
.hd-cols [data-k].sorted.desc::after { content: "\2193"; }

.hd-rows { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
           -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.hd-row { border-bottom: 1px solid rgba(255,255,255,.03); font-size: 12.5px; cursor: default; }
.hd-row:hover { background: var(--card-hover); }
.hd-row.on { background: rgba(241,107,34,.12); }
.hd-row .c-wid { color: var(--accent); }
.hd-row .c-title, .hd-row .c-reporter, .hd-row .c-assignee, .hd-row .c-client {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* PILLS — Priority (seeded fact), Status (learner's claim, a button), Resolution (world's fact,
   inert). Distinct treatments so the eye never mistakes the claim for the fact. */
.hd-pill, .hd-pri {
  display: inline-block; font-family: var(--font-mono); font-size: 10.5px;
  padding: 2px 7px; border-radius: 3px; border: 1px solid transparent; white-space: nowrap;
}
.hd-pri.p-high   { color: #f2726b; border-color: rgba(242,114,107,.35); background: rgba(242,114,107,.08); }
.hd-pri.p-medium { color: #e0b64d; border-color: rgba(224,182,77,.30); background: rgba(224,182,77,.07); }
.hd-pri.p-low    { color: var(--muted); border-color: var(--border); }
.hd-pill.s-open        { color: var(--muted); border-color: var(--border); }
.hd-pill.s-in-progress { color: #6ea8fe; border-color: rgba(110,168,254,.35); background: rgba(110,168,254,.08); }
.hd-pill.r-unresolved  { color: var(--muted); border-color: var(--border); }
.hd-pill.r-resolved    { color: #5bbf6a; border-color: rgba(91,191,106,.40); background: rgba(91,191,106,.10); }
/* the Status pill is a button (the claim); the Resolution pill is a span (the fact — inert) */
.hd-claim { cursor: pointer; font: inherit; }
.hd-claim:hover { border-color: var(--accent); }
.hd-claim:focus-visible { outline: none; border-color: var(--accent); }

.hd-foot { padding: 8px 16px; border-top: 1px solid var(--border); }
.hd-count { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }