/* ALOKE — THE UNIFIED OWNER PANEL. The frame is console-shell.css's (the
   sidebar, the top bar, the drawer); this file is only what the panel adds:
   three frames that fill the column, and the subscription panes the shell
   draws itself. */
.pl-main { min-width: 0; display: flex; flex-direction: column; min-height: calc(100vh - var(--cs-top)); }
/* AN EXPLICIT HEIGHT, NOT A MIN-HEIGHT: Safari does not honour min-height on
   a replaced element that is a flex child, and a frame with no height is
   150px tall — the register's pairing card cut off after one line
   (founder's screenshot, 2026-09-06). panel.js also sizes the frames in
   pixels on load and resize, so the editor is tall on every engine. */
.pl-frame { display: block; width: 100%; flex: 1 1 auto; height: calc(100vh - var(--cs-top)); min-height: 480px; border: 0; background: var(--bg); }
.pl-own { padding: var(--s5); max-width: 1000px; width: 100%; margin: 0 auto; }
.pl-empty { margin: var(--s5) auto; max-width: 640px; }
.pl-link { display: inline-block; text-decoration: none; margin-top: var(--s3); }
#plErr { margin: var(--s3) var(--s4) 0; }
#plErr:empty { display: none; }
.pl-facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: 13px; color: var(--muted); unicode-bidi: plaintext; margin: var(--s2) 0; align-items: center; }
.pl-facts > span:empty { display: none; }
.pl-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0; align-items: center; }
.pl-chips label { display: inline-flex; align-items: center; gap: var(--s1); font-size: 14px; cursor: pointer; }
.pl-hint { margin: var(--s2) 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.8; unicode-bidi: plaintext; }
.pl-hint:empty { display: none; }
.pl-box { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: var(--s4); margin-top: var(--s3); }
.pl-box > h4 { margin: 0 0 var(--s2); font-size: 14px; }
.pl-grid { display: grid; gap: var(--s2) var(--s3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pl-wide { grid-column: 1 / -1; }
.pl-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); align-items: center; }
.pl-code {
  font-family: Inter, system-ui, sans-serif; font-size: 30px; font-weight: 700; letter-spacing: .1em;
  unicode-bidi: isolate; direction: ltr; text-align: center; padding: var(--s5);
  border: 1.5px dashed var(--accent); border-radius: var(--r-card); background: var(--accent-weak); color: var(--accent-press);
}
.pl-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-btn); padding: var(--s3) var(--s4);
  margin-top: var(--s2); background: var(--surface);
}
.pl-row .main { flex: 1 1 200px; min-width: 0; }
.pl-row .name { font-size: 14px; font-weight: 700; unicode-bidi: plaintext; }
.pl-row .meta { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; unicode-bidi: plaintext; }
.pl-row .chip, .pl-row button { flex: 0 0 auto; }
.pl-off { opacity: .6; }
.pl-scroll { overflow-x: auto; }
.pl-t { border-collapse: collapse; width: 100%; font-size: 13px; }
.pl-t th, .pl-t td { border-bottom: 1px solid var(--line); padding: var(--s2) var(--s2); text-align: start; vertical-align: top; }
.pl-t .n { unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-tot { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s1) 0; font-size: 14px; unicode-bidi: plaintext; }
.pl-tot.big { border-top: 2px solid var(--line); margin-top: var(--s2); padding-top: var(--s2); font-weight: 700; font-size: 16px; }
.bnum { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.pl-stuck { text-decoration: none; font-size: 12.5px; min-height: 36px; }
@media (max-width: 1023px) {
  .pl-frame { height: calc(100vh - var(--cs-top)); }
  .pl-own { padding: var(--s4); }
}

/* ── THE FIRST-LOGIN TOUR (panel-tour.js, 2026-09-18) ──
   A dim sheet with one lit rectangle (the spot's shadow does the dimming, so
   the rail underneath stays exactly where it is) and one card. Above the
   phone rail drawer (z 50) and its scrim (z 45). Logical offsets only. */
.plt-root { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.plt-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(20, 16, 34, .58), 0 0 0 3px #fff;
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease; }
.plt-card { position: fixed; pointer-events: auto; width: min(360px, calc(100vw - 32px)); box-sizing: border-box;
  background: var(--surface, #fff); color: var(--ink, #1f1830); border-radius: 16px; padding: 16px 18px 14px;
  box-shadow: 0 18px 48px rgba(31, 24, 48, .28); outline: none; font-size: 15px; line-height: 1.6; }
.plt-card.center { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); }
.plt-card.sheet { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); top: auto; width: auto; transform: none; }
.plt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.plt-count { font-size: 12px; color: var(--muted, #6b6480); }
.plt-skip { background: none; border: 0; color: var(--muted, #6b6480); font: inherit; font-size: 13px; cursor: pointer; padding: 6px 8px; min-height: 36px; border-radius: 8px; }
.plt-skip:hover, .plt-skip:focus-visible { color: var(--accent, #5b3df5); background: var(--accent-weak, #efeafe); outline: none; }
.plt-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.plt-body { margin: 0 0 10px; color: var(--ink-2, #3b3550); }
.plt-dots { display: flex; gap: 6px; margin: 0 0 12px; }
.plt-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line, #e6e2ef); }
.plt-dots i.on { background: var(--accent, #5b3df5); width: 20px; border-radius: 4px; }
.plt-actions { display: flex; gap: 8px; justify-content: flex-end; }
.plt-btn { font: inherit; font-weight: 600; min-height: 44px; padding: 8px 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-strong, #cfc9dd); background: var(--surface, #fff); color: var(--ink, #1f1830); }
.plt-btn[disabled] { opacity: .45; cursor: default; }
.plt-btn.primary { background: var(--accent, #5b3df5); border-color: var(--accent, #5b3df5); color: #fff; flex: 1; }
.plt-btn:focus-visible { outline: 2px solid var(--accent, #5b3df5); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .plt-spot { transition: none; } }

/* ── THE HOME (2026-09-18) ──
   The shell's own first screen. Plain rows and cards on the theme's tokens;
   the four systems as one composed grid, the unheld ones greyed with a lock;
   numbers as tiles with tabular figures. Everything logical-offset. */
.pl-home { display: flex; flex-direction: column; gap: var(--s4); }
.pl-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s4); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e-card); }
.pl-kicker { margin: 0; font-size: var(--t-sm); color: var(--muted); letter-spacing: .02em; }
.pl-hero h2 { margin: 2px 0 4px; font-size: var(--t-2xl); line-height: var(--lh-tight); unicode-bidi: plaintext; }
.pl-hero-sub { margin: 0; color: var(--ink-2); font-size: var(--t-md); }
.pl-hero-chips { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.pl-fact { font-size: var(--t-sm); color: var(--muted); unicode-bidi: plaintext; }
.pl-home .section { margin: 0; }
.pl-home .section > h3 { margin: 0 0 2px; font-size: var(--t-lg); }
.pl-attn { border-inline-start: 4px solid var(--warn); }
.pl-attn-list { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.pl-attn-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-btn);
  border: 1px solid var(--line); background: var(--surface-2); border-inline-start: 4px solid var(--info); }
.pl-attn-row.warn { border-inline-start-color: var(--warn); }
.pl-attn-row.danger { border-inline-start-color: var(--danger); }
.pl-attn-txt { flex: 1 1 auto; min-width: 0; font-size: var(--t-md); line-height: var(--lh-body); unicode-bidi: plaintext; }
.pl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.pl-tile { padding: var(--s4); border-radius: var(--r-card); background: var(--surface-2); border: 1px solid var(--line); min-height: 88px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.pl-tile-n { font-size: var(--t-2xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pl-tile-l { font-size: var(--t-sm); color: var(--muted); line-height: 1.4; }
.pl-systems { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.pl-sys { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--e-rest); min-height: 168px; }
.pl-sys-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.pl-sys-head .ic { width: 22px; height: 22px; color: var(--accent); flex: 0 0 auto; }
.pl-sys-head strong { font-size: var(--t-lg); flex: 1 1 auto; min-width: 0; }
.pl-sys-desc { margin: 0; color: var(--ink-2); font-size: var(--t-sm); line-height: var(--lh-body); flex: 1 1 auto; }
.pl-sys-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-top: auto; }
.pl-sys-price { font-size: var(--t-sm); color: var(--ink-2); unicode-bidi: plaintext; }
.pl-sys-price b { font-weight: 700; color: var(--ink); }
/* LOCKED: greyed, not hidden — the whole card opens the price. */
.pl-sys-locked { background: var(--surface-2); border-style: dashed; cursor: pointer; }
.pl-sys-locked .pl-sys-head .ic { color: var(--muted); }
.pl-sys-locked strong, .pl-sys-locked .pl-sys-desc { color: var(--muted); }
.pl-sys-locked:hover { border-color: var(--line-strong); }
/* The rail's locked groups. */
.pl-group.pl-locked .cs-tab, .pl-group.pl-locked .cs-group-h { opacity: .55; }
.pl-group.pl-locked .cs-tab:hover { opacity: .8; }
.pl-lock { width: 14px; height: 14px; margin-inline-start: auto; opacity: .9; }
/* The upsell sheet. */
.pl-sheet { position: fixed; inset: 0; z-index: 80; background: rgba(20, 16, 34, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pl-sheet[hidden] { display: none; }
.pl-sheet-card { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); color: var(--ink);
  border-radius: 16px; padding: var(--s5); box-shadow: var(--e-float); }
.pl-sheet-x { position: absolute; top: 10px; inset-inline-end: 10px; width: 40px; height: 40px; padding: 0; font-size: 22px; line-height: 1; }
.pl-up-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); padding-inline-end: 44px; }
.pl-up-icon { display: inline-flex; width: 48px; height: 48px; border-radius: 12px; background: var(--accent-weak); color: var(--accent); align-items: center; justify-content: center; flex: 0 0 auto; }
.pl-up-icon .ic { width: 24px; height: 24px; }
.pl-up-head h3 { margin: 2px 0 0; font-size: var(--t-xl); }
.pl-up-desc { margin: 0 0 var(--s3); color: var(--ink-2); line-height: var(--lh-body); }
.pl-up-price { padding: var(--s3) var(--s4); border-radius: var(--r-btn); background: var(--accent-weak); margin-bottom: var(--s3); }
.pl-up-big { font-size: var(--t-lg); font-weight: 700; unicode-bidi: plaintext; }
.pl-up-block { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-btn); background: var(--warn-weak); color: var(--warn); font-size: var(--t-sm); }
.pl-up-needs h4 { margin: 0 0 var(--s1); font-size: var(--t-md); }
.pl-up-needs ul { margin: 0 0 var(--s3); padding-inline-start: 20px; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.9; }
.pl-sheet .pl-actions { margin-top: var(--s4); }
.pl-sheet .pl-actions .primary { flex: 1 1 auto; text-align: center; }
body.pl-sheet-open { overflow: hidden; }
@media (max-width: 640px) {
  .pl-hero { padding: var(--s4); }
  .pl-sheet { align-items: flex-end; padding: 0; }
  .pl-sheet-card { width: 100%; border-radius: 16px 16px 0 0; max-height: calc(100vh - 24px); padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom)); }
}

/* ── THE SYSTEM PICKS, AS BUTTONS (the quote pane, 2026-09-18) ── */
.pl-picks { gap: var(--s2); }
.pl-pick {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-btn); background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--t-md); font-weight: 600; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pl-pick .ic { width: 18px; height: 18px; opacity: .8; }
.pl-pick:hover { border-color: var(--accent); }
.pl-pick:focus-visible { outline: none; box-shadow: var(--ring); }
.pl-pick[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pl-pick[aria-pressed="true"] .ic { opacity: 1; }
.pl-pick[aria-pressed="true"]::before { content: "\2713"; font-weight: 700; }

/* ═══════════════════════════════════ the employees page (2026-09-20) */
.pl-emp { display: flex; flex-direction: column; gap: var(--s4); }
.pl-emp .section { margin: 0; }
.pl-emp-tools { display: flex; align-items: center; gap: var(--s3); margin: var(--s2) 0 var(--s3); }
.pl-emp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s3); }
.pl-emp-card { padding: var(--s4); border-radius: var(--r-card); background: var(--surface-2); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--s2); cursor: pointer; }
.pl-emp-card:hover { border-color: var(--accent-weak-2, var(--accent-weak)); }
.pl-emp-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.pl-emp-job { color: var(--muted); font-size: var(--t-sm); }
.pl-emp-phone { font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--t-sm); }
.pl-emp-chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.pl-emp-chips .chip { font-size: 12px; }
.pl-emp-line { font-size: var(--t-sm); color: var(--muted); unicode-bidi: plaintext; }
.pl-emp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); }
.pl-emp-grid .field { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); }
.pl-emp-grid input, .pl-emp-grid select { min-height: 40px; }
.pl-emp-block { margin-top: var(--s4); }
.pl-emp-checks { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.pl-emp-checks label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); cursor: pointer; font-size: var(--t-sm); min-height: 36px; }
.pl-emp-checks label.on { background: var(--accent-weak); border-color: transparent; }
.pl-emp-presets { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0; }
.pl-emp-presets button.on { background: var(--accent-weak); border-color: transparent; }
.pl-emp-perms { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }
.pl-emp-group h4 { margin: 0 0 4px; font-size: var(--t-sm); }
.pl-emp-group p { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.pl-emp-group label { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: var(--t-sm); min-height: 32px; }
.pl-emp-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.pl-emp-empty { color: var(--muted); padding: var(--s4); border: 1px dashed var(--line); border-radius: var(--r-card); }