/* Hotdesk management view — editor layout on top of the shared admin tokens.
 * Loaded alongside panel.css on every signed-in page; see the note there about
 * the `#app.v-admin` scoping used for the few shared class names. */
.hd-head { margin-bottom:20px; }
.hd-head h1 { font-size:28px; margin:0 0 6px; letter-spacing:-.035em; }
.hd-head .lead { color:var(--muted); font-size:14.5px; margin:0 0 16px; max-width:66ch; line-height:1.55; }
#app h2 { font-size:15.5px; margin:0 0 12px; }
.hd-note { color:var(--muted); font-size:13px; margin:6px 0 10px; line-height:1.5; }
.hd-note code, .hd-inspector code { background:var(--surface-2); border:1px solid var(--border);
  border-radius:5px; padding:1px 5px; font-family:var(--mono); font-size:12px; }

/* Space switcher — everything below a tab happens inside the space picked here */
.hd-spacebar { display:inline-flex; align-items:center; gap:10px; margin:0 0 18px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:5px 6px 5px 14px; box-shadow:var(--shadow-sm); }
.hd-spacebar label { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--faint);
  text-transform:uppercase; letter-spacing:.06em; }
.hd-spacebar select { border-radius:999px; padding:7px 12px; font-size:14px; border-color:transparent; background:var(--surface-2); }
.hd-spacebar select { width:auto; min-width:200px; }

/* Editor layout: canvas + sticky sidebar */
.hd-editor { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; align-items:start; }
.hd-sidebar { display:flex; flex-direction:column; gap:16px; position:sticky; top:76px; }
@media (max-width:1020px){ .hd-editor { grid-template-columns:minmax(0,1fr); } .hd-sidebar { position:static; } }


/* Wide mode — the panel is capped at 1080px, which wastes most of a desktop
   monitor when you are laying out a floor. The editor may take the whole width. */
body.hd-wide .admin-main { max-width:min(1900px, 100vw - 40px); }
body.hd-wide .hd-editor { grid-template-columns:minmax(0,1fr) 360px; gap:20px; }
body.hd-wide .hd-stage .fp { max-height:calc(100vh - 250px); }

/* Tool strip */
.hd-canvas { padding:14px; min-width:0; }
.hd-editor > * { min-width:0; }
.hd-sheet-close { display:none; }
.hd-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.tgroup { display:inline-flex; background:var(--surface-2); border:1px solid var(--border);
  border-radius:999px; padding:4px; gap:2px; box-shadow:inset 0 1px 2px rgba(51,42,20,.05); }
.tool { display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; color:var(--muted);
  font:inherit; font-size:13px; font-weight:650; padding:7px 13px; border-radius:999px; cursor:pointer;
  transition:background .14s, color .14s, box-shadow .14s; }
.tool .ic-svg { width:15px; height:15px; }
.tool:hover { color:var(--text); background:rgba(255,255,255,.7); }
.tool.active { background:var(--accent); color:#fff; box-shadow:0 3px 10px -3px rgba(79,70,229,.55); }
.tool.add:hover { color:var(--accent-2); }
.tsep { width:1px; height:26px; background:var(--border-2); }
.hd-mode { font-size:12.5px; color:var(--accent); font-weight:600; }
@media (max-width:640px){ .tool span { display:none; } .tool { padding:8px 10px; } .tool .ic-svg { width:17px; height:17px; } }

/* Stage */
.hd-stage { position:relative; border:1px solid var(--border); border-radius:var(--radius); padding:16px;
  touch-action:none;
  background:radial-gradient(130% 130% at 50% -10%, #fffdf7, #f1ece0); overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(51,42,20,.06);
  touch-action:none; /* we own wheel + drag on the plan */ }
/* Taller on a desktop: the stage grows with the window instead of a flat 72vh. */
.hd-stage .fp { max-height:clamp(380px, calc(100vh - 330px), 1000px); }

/* View controls sit at the far end of the tool strip */
.hd-zoom { margin-left:auto; }
.hd-zoom .zlabel { font-family:var(--mono); font-size:12.5px; min-width:56px; justify-content:center; }
.fp--panning, .fp--panning * { cursor:grabbing !important; }
.hd-statusbar { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:10px;
  color:var(--faint); font-size:12.5px; }
.hd-statusbar #hd-meta { font-weight:600; color:var(--muted); }
.hd-statusbar .keys { margin-left:auto; }
.hd-statusbar kbd { background:var(--surface-2); border:1px solid var(--border-2); border-bottom-width:2px;
  border-radius:5px; padding:0 5px; font-family:var(--mono); font-size:11px; color:var(--muted); }

/* Inspector + sidebar forms */
#app.v-admin .hd-grid2 { display:grid; grid-template-columns:112px 1fr; gap:10px 12px; align-items:center; }
#app.v-admin .hd-grid2 label { color:var(--muted); font-size:13px; font-weight:600; }
#app.v-admin .hd-grid2 .input, #app.v-admin .hd-grid2 .textarea, #app.v-admin .hd-grid2 select.input { font-size:14.5px; padding:8px 11px; }
.btn-row { margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.hd-code { font-family:var(--mono); font-size:14px; background:var(--accent-soft); color:var(--accent-ink);
  border-radius:8px; padding:3px 9px; vertical-align:1px; font-weight:700; letter-spacing:-.02em; }
.hd-check { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--text); }
.hd-check input { width:17px; height:17px; }
.hd-color { width:46px; height:40px; padding:3px; border:1px solid var(--border-2); border-radius:var(--radius-sm); background:var(--surface); }

/* Accounts (admin) */
.hp-accounts { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; margin-bottom:6px; }
/* An account card is narrow and its row of actions is long, so the buttons drop
   to their own line inside the card rather than out of it. */
.hp-acccard { display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px; }
.hp-acccard.inactive { opacity:.6; }
.hp-acccard .pacts { flex:1 0 100%; justify-content:flex-start; }
.hp-otp { margin-bottom:14px; background:var(--accent-soft); border:1px solid var(--accent); border-radius:10px; padding:12px 14px; }
.hp-otp-inner { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hp-otp-actions { margin-left:auto; display:flex; gap:6px; }
.hp-otp-code { font-family:var(--mono); font-size:16px; font-weight:700; background:var(--surface); border:1px solid var(--border);
  border-radius:6px; padding:2px 10px; letter-spacing:.05em; }

/* Sections inside a card need air above them — the space settings card stacks
   four of them (links, screens, people). */
#app.v-admin .card h3 { margin:26px 0 8px; }
#app.v-admin .card h3:first-of-type { margin-top:6px; }

/* People cards */
.hd-cardhead { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; margin-bottom:14px; }
.hd-cardhead .hd-actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.hd-count { color:var(--faint); font-weight:600; font-size:13px; margin-left:6px; }
.hd-people { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; margin-bottom:16px; }
.pcard { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px; box-shadow:var(--shadow-sm);
  transition:border-color .14s, box-shadow .14s, transform .1s; }
/* Row actions take their own line rather than squeezing the name out of the
   card — a card is only ~250px wide and three labelled buttons never fit. */
.pcard .pacts { margin-left:auto; }
/* A card built around a link (registration, display) spans the whole grid: the
   URL is the content, and it is long. */
.pcard.wide { grid-column:1 / -1; }
.pcard.wide .psub code { white-space:nowrap; }
.pcard:hover { border-color:var(--border-2); box-shadow:var(--shadow); transform:translateY(-2px); }
.pcard.inactive { opacity:.55; }
.pcard.active { border-color:var(--accent); background:var(--surface); box-shadow:var(--shadow-sm); }
.pcard.editing { grid-column:1 / -1; flex-direction:column; background:var(--surface); }
.pav { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:800; color:#fff; background:var(--c,#c2c8d2);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35), 0 1px 3px rgba(16,24,40,.18); }
.pinfo { min-width:0; flex:1; }
.pnm { font-weight:650; font-size:14.5px; }
.psub { color:var(--muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pdesks { display:flex; gap:5px; flex-wrap:wrap; margin-top:7px; }
.pchip { font-size:10.5px; font-weight:700; font-family:var(--mono); color:var(--accent-2);
  background:var(--accent-soft); border-radius:999px; padding:2px 8px; }
.pchip.none { color:var(--faint); background:var(--surface); border:1px dashed var(--border-2); }
.pacts { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; align-items:center; flex-shrink:0; }
.hd-addform { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; border-top:1px solid var(--border); padding-top:14px; }
.hd-addform .field { margin:0; }
.hd-addform .grow { flex:1 1 180px; }
.hd-more { flex:1 1 100%; margin-top:2px; }
.hd-more summary { cursor:pointer; color:var(--muted); font-size:13px; font-weight:600; padding:2px 0; }
.hd-more-fields { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-top:10px; }

/* ---------- Owner's console (/hotdesk/super-admin) ----------
   Dense on purpose: this view is read first and clicked second, so it is
   tables and counters rather than cards. */
.sa-badge { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:#fff; background:#111827; border-radius:999px; padding:3px 10px; margin-left:10px; }
.sa-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:18px; }
.sa-stat { display:grid; justify-items:center; gap:2px; padding:14px 10px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); }
.sa-stat .v { font-size:26px; font-weight:800; letter-spacing:-.03em; }
.sa-stat .k { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); text-align:center; }

.sa-table { width:100%; border-collapse:collapse; font-size:13.5px; }
/* A table this wide beats every phone; let it scroll inside its card instead of
   pushing the page sideways. */
.card:has(> .sa-table) { overflow-x:auto; }
.sa-table th { text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--faint); padding:6px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
.sa-table td { padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.sa-table tr:last-child td { border-bottom:0; }
.sa-table tr.inactive { opacity:.55; }
.sa-table .input { min-width:150px; padding:6px 10px; font-size:13px; }
.sa-table code { font-size:12.5px; }
.sa-who { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.sa-chip { display:inline-block; font-size:11.5px; font-weight:650; color:var(--accent-2); background:var(--accent-soft);
  border-radius:999px; padding:2px 9px; margin:1px 0; }
.sa-chip i { font-style:normal; color:var(--muted); font-weight:600; }

/* Which organisation the panel is signed into — said once, in the title, so
   nothing below has to keep repeating whose offices these are. */
.hd-org { font-weight:650; font-size:.62em; letter-spacing:.01em; color:var(--accent-2);
  background:var(--accent-soft); border-radius:999px; padding:4px 12px; vertical-align:middle; margin-left:8px; }

/* Organisation members, inside an organisation card. */
.tn-members { flex:1 0 100%; border-top:1px dashed var(--border); margin-top:6px; padding-top:10px; }
.tn-member { display:flex; align-items:center; gap:10px; padding:6px 0; min-width:0; }
.tn-member .who { display:grid; min-width:0; line-height:1.25; flex:1; }
.tn-member .who b { font-size:13.5px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-member .who i { font-style:normal; font-size:12px; color:var(--faint); }
.tn-member .input { width:auto; min-width:120px; }
.tn-members .hd-addform { margin-top:8px; }

/* Night mode on a display card: when the screen goes dark and on whose clock.
   Its own row under the link, because it is settings rather than identity. */
.dp-sleep { flex:1 0 100%; display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  border-top:1px dashed var(--border); margin-top:4px; padding-top:12px; }
.dp-sleep .field { margin:0; }
.dp-sleep .input { min-width:120px; }
.dp-toggle { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:650;
  color:var(--text); padding-bottom:9px; white-space:nowrap; }
.dp-toggle input { width:16px; height:16px; accent-color:var(--accent); }
.dp-hint { flex:1 1 100%; margin:0; color:var(--muted); font-size:12.5px; }
/* On a phone the switch gets its own line — sharing it with one time field
   leaves a half-empty row and pushes the other field onto the next one anyway. */
@media (max-width:560px) {
  .dp-toggle { flex:1 0 100%; padding-bottom:0; }
  .dp-sleep .field { flex:1 1 130px; }
  .dp-sleep .input { min-width:0; }
}

/* API tab */
.hd-tokenrow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.hd-token { flex:1 1 260px; font-family:var(--mono); font-size:13px; letter-spacing:.02em; }
.hd-doc { font-size:14px; line-height:1.65; color:var(--text); }
.hd-doc h1 { font-size:22px; margin:0 0 10px; }
.hd-doc h2 { font-size:17px; margin:22px 0 8px; }
.hd-doc h3 { font-size:15px; margin:16px 0 6px; }
.hd-doc p { margin:8px 0; }
.hd-doc code { background:var(--surface-2); border:1px solid var(--border); border-radius:5px; padding:1px 5px; font-family:var(--mono); font-size:12.5px; }
.hd-doc pre { background:#0f1320; color:#e6e9f2; border-radius:var(--radius-sm); padding:12px 14px; overflow-x:auto; }
.hd-doc pre code { background:none; border:none; color:inherit; padding:0; }
.hd-doc table { border-collapse:collapse; margin:8px 0; font-size:13px; display:block; overflow-x:auto; }
.hd-doc th, .hd-doc td { border:1px solid var(--border); padding:5px 9px; text-align:left; }
.hd-doc th { background:var(--surface-2); }
.hd-doc ul { margin:8px 0; padding-left:22px; }
.hd-doc blockquote { border-left:3px solid var(--accent); margin:10px 0; padding:4px 12px; color:var(--muted); background:var(--accent-soft); border-radius:0 8px 8px 0; }
.hd-doc a { color:var(--accent-2); }

@media (max-width:560px){
  #app.v-admin .hd-grid2 { grid-template-columns:1fr; gap:5px 0; }
  #app.v-admin .hd-grid2 label { margin-top:7px; }
  .hd-cardhead .hd-actions { margin-left:0; }
  .hd-statusbar .keys { display:none; }
  /* Labelled row-action buttons drop to their own full-width row under the name. */
  .pcard { flex-wrap:wrap; }
  .pacts { width:100%; justify-content:flex-start; }
}

/* ---------- Mobile editor ----------
   Below 820px the sidebar stops being a column. Stacking it under the canvas
   meant that tapping a desk scrolled the thing you wanted to edit off-screen,
   so the inspector becomes a bottom sheet: it rides above the plan, appears
   when something is selected, and can be swiped/collapsed away. The remaining
   sidebar cards (scene, blueprint, shuffle) sit under the plan as normal, where
   they are settings you visit deliberately rather than while editing. */
@media (max-width:820px){
  .hd-canvas { padding:10px; }
  /* The intro paragraph costs a third of a phone screen before anything
     useful; the panel's purpose is obvious once you are inside it. */
  #app.v-admin .hd-head .lead { display:none; }
  #app.v-admin .hd-head h1 { font-size:22px; }
  #app.v-admin .hd-head { margin-bottom:14px; }
  /* Plan fills what is left of the screen; the sheet overlays it. */
  .hd-stage { padding:8px; }
  .hd-stage .fp { max-height:none; height:calc(100dvh - 280px); min-height:340px; }
  .hd-editor { gap:12px; }

  .hd-inspector { position:fixed; left:0; right:0; bottom:0; z-index:60;
    margin:0; border-radius:20px 20px 0 0; border-bottom:0;
    padding:14px 16px calc(16px + var(--safe-bot));
    max-height:62dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    box-shadow:0 -18px 44px -20px rgba(51,42,20,.42), 0 -2px 8px rgba(51,42,20,.06);
    transform:translateY(calc(100% - 0px));
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
  }
  /* Only slide up when there is something to edit. */
  body.hd-haspick .hd-inspector { transform:translateY(0); }
  .hd-inspector::before {
    content:""; display:block; width:38px; height:4px; border-radius:99px;
    background:var(--border-2); margin:0 auto 12px;
  }
  /* Closing the sheet must never depend on hitting the plan behind it. */
  .hd-sheet-close { display:inline-flex; position:absolute; top:10px; right:12px;
    width:34px; height:34px; align-items:center; justify-content:center;
    border-radius:50%; border:1px solid var(--border); background:var(--surface-2);
    color:var(--muted); box-shadow:var(--shadow-sm); }
  .hd-sheet-close .ic-svg { width:17px; height:17px; }
  /* Keep the last cards clear of the raised sheet. */
  body.hd-haspick .hd-sidebar { padding-bottom:38dvh; }

  /* Tool strip scrolls sideways instead of wrapping into three rows. */
  .hd-tools { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .hd-tools::-webkit-scrollbar { display:none; }
  .hd-mode { display:none; }
  .hd-zoom { margin-left:0; flex:0 0 auto; }
  .tgroup { flex:0 0 auto; }
  .tsep { display:none; }
  /* Wide mode is a desktop idea — there is no width to reclaim on a phone. */
  #zm-wide { display:none; }
  .hd-statusbar .keys { display:none; }
  /* Comfortable touch targets throughout the strip. */
  .tool { padding:9px 12px; min-height:40px; }
}