/* The app shell: sidebar, optional sub-nav, content, optional right rail.
   Tokens only; nothing here hard-codes a colour. */

html { background: var(--color-bg); }
body { min-height: 100vh; }
.tnum, .gp-tnum { font-variant-numeric: tabular-nums; }

.gp-skip { position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--color-surface); padding: 8px 12px; border-radius: 8px; }
.gp-skip:focus { left: 8px; }

.gp-shell {
  display: grid; min-height: 100vh;
  grid-template-columns: 304px minmax(0, 1fr);
}
.gp-shell.has-subnav { grid-template-columns: 304px 220px minmax(0, 1fr); }
.gp-shell.has-rail { grid-template-columns: 304px minmax(0, 1fr) var(--gp-rail, 320px); }
.gp-shell.has-subnav.has-rail { grid-template-columns: 304px 220px minmax(0, 1fr) var(--gp-rail, 320px); }

.gp-main { padding: 28px 32px; min-width: 0; }
.gp-subnav { padding: 28px 12px; min-width: 0; border-right: 1px solid var(--color-divider); }
.gp-rail { padding: 28px 22px; min-width: 0; }

/* -- sidebar -- */
.gp-side {
  background: var(--color-neutral-900); color: var(--color-text);
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 12px; height: 100vh; position: sticky; top: 0;
  overflow-y: auto; min-width: 0;
}
.gp-head { display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.gp-head .gp-brand { display: flex; align-items: center; gap: 8px; color: var(--color-text);
  text-decoration: none; font-size: 16px; font-weight: 500; }
.gp-head .gp-brand .ph { font-size: 20px; color: var(--color-accent); }
.gp-head .gp-tools { margin-left: auto; display: flex; gap: 2px; }
.gp-iconbtn { width: 30px; height: 30px; padding: 0; color: var(--color-neutral-400); }
.gp-iconbtn .ph { font-size: 17px; }
.gp-iconbtn[aria-current="page"] { color: var(--color-accent); background: var(--color-neutral-800); }

.gp-who { position: relative; }
.gp-who > summary, .gp-who > .gp-who-static { list-style: none; }
.gp-who > summary::-webkit-details-marker { display: none; }
.gp-whobtn {
  display: flex; justify-content: flex-start; align-items: center; gap: 10px;
  padding: 10px; text-align: left; width: 100%; font-weight: 400; cursor: pointer;
}
.gp-whobtn .gp-avatar { width: 32px; height: 32px; border-radius: 8px; flex: none;
  background: var(--color-accent-800); color: var(--color-accent-100);
  display: grid; place-items: center; font-size: 14px; }
.gp-whotext { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.gp-whotext .gp-calling { font-size: 11px; color: var(--color-neutral-500); }
.gp-whotext .gp-name { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; min-width: 0; }
.gp-whotext .gp-name > .gp-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-whotext .gp-guild { font-size: 12px; color: var(--color-neutral-400);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-whobtn .gp-caret { color: var(--color-neutral-500); }
.gp-menu {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--color-surface); box-shadow: var(--shadow-md);
  border-radius: var(--radius-md); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.gp-menu form { margin: 0; }
.gp-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 7px 8px; border: 0; border-radius: 8px; background: transparent;
  color: var(--color-text); font: inherit; font-size: 13px; cursor: pointer;
}
.gp-menu button:hover { background: var(--color-neutral-800); }
.gp-menu .gp-avatar { width: 24px; height: 24px; border-radius: 6px; font-size: 12px; }
.gp-menu .gp-sub { display: block; font-size: 11px; color: var(--color-neutral-400); }
.gp-menu .gp-here { color: var(--color-accent); margin-left: auto; }

.gp-nav { display: flex; flex-direction: column; gap: 2px; }
.gp-nav a {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px;
  text-decoration: none; font-size: 14px; color: var(--color-neutral-300);
}
.gp-nav a .ph { font-size: 17px; }
.gp-nav a:hover { background: var(--color-neutral-800); }
.gp-nav a[aria-current="page"] { background: var(--color-neutral-800); color: var(--color-text); }
.gp-nav .gp-extra { margin-left: auto; font-size: 12px; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.gp-nav .gp-extra.tag { font-size: 11px; padding: 1px 7px; color: var(--color-accent-100); }

/* -- phone panel -- */
.gp-phone {
  margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border-radius: var(--radius-md); background: var(--color-bg); box-shadow: var(--shadow-sm);
}
.gp-phone-head { display: flex; align-items: center; gap: 8px; }
.gp-phone-head h6 { margin: 0; color: var(--color-neutral-400); }
.gp-phone-status { margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-neutral-400); }
.gp-phone-status .gp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
.gp-phone-dial { display: flex; gap: 6px; margin: 0; }
.gp-phone-dial .input { min-height: 34px; }
.gp-phone-dial .btn { width: 34px; height: 34px; flex: none; }
.gp-phone-note { margin: 0; font-size: 12px; color: var(--color-neutral-400); }
/* The phone package fills these; the idle panel shows only the dial row. */
.gp-phone [data-phone-call-card], .gp-phone [data-phone-desk-card] { display: none; }
.gp-phone[data-state="incall"] [data-phone-call-card] { display: block; }
.gp-phone[data-state="incall"] [data-phone-idle-hide] { display: none; }

/* -- small shared marks -- */
.gp-badge { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px;
  background: var(--color-neutral-800); color: var(--color-neutral-300); font-size: 11px; flex: none; }
.gp-name { display: inline-flex; align-items: center; gap: 6px; }
[data-dial] { cursor: pointer; }

/* -- pages not yet rebuilt (portal/ui/shell.py scopes the old stylesheet to .gp-legacy) -- */
.gp-legacy {
  --ink: var(--color-text); --ink-soft: var(--color-neutral-400); --ink-faint: var(--color-neutral-500);
  --paper: var(--color-bg); --surface: var(--color-surface);
  --line: var(--color-neutral-800); --line-soft: color-mix(in srgb, var(--color-text) 8%, transparent);
  --accent: var(--color-accent); --accent-ink: var(--color-bg);
  --good: var(--gp-good); --warn-bg: var(--gp-warn-bg); --warn-line: var(--gp-warn-line); --bad: var(--gp-bad);
  --radius: 10px;
  max-width: 54rem; font-size: 16px; line-height: 1.6;
}
.gp-legacy h1 { font-size: 1.9rem; }
.gp-legacy select, .gp-legacy .find { color-scheme: inherit; }

/* -- narrow screens: the sidebar becomes a block above the page -- */
@media (max-width: 900px) {
  .gp-shell, .gp-shell.has-subnav, .gp-shell.has-rail, .gp-shell.has-subnav.has-rail { grid-template-columns: minmax(0, 1fr); }
  .gp-side { position: static; height: auto; }
  .gp-phone { margin-top: 0; }
  .gp-main { padding: 20px 16px; }
  .gp-subnav { border-right: 0; padding: 12px; }
}

/* The sidebar's last line: Privacy, under the phone panel. */
.gp-side-foot { padding: 0 10px; }
.gp-side-foot a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--color-neutral-400); text-decoration: none; }
.gp-side-foot a:hover { color: var(--color-text); text-decoration: underline; }
.gp-side-foot .ph { font-size: 14px; }