/* THE HOUSE SKIN FOR A PAGE NOT YET REBUILT (4 Oct 2026). The console and History sit on Primer's parts; the admin
 * desk keeps its own markup and class names (.btn, .card, .tabs, .note — names Primer also uses, so Primer is not
 * loaded here) and takes the look from this file and css/tokens.css instead: the same header, rail, palette,
 * typeface and light / dark / auto. One concern: the page frame and the bare form controls. A page's own rules say
 * what its cards and chips look like, in tokens. */
html, body { height: 100%; }
body { margin: 0; font-family: var(--x-sans); font-size: 14px; line-height: 1.5; color: var(--color-fg-default); background: var(--color-canvas-subtle); }
a { color: var(--color-accent-fg); }
.skin-header { display: flex; align-items: center; gap: 16px; height: 53px; box-sizing: border-box; padding: 10px 16px; background: var(--color-header-bg); border-bottom: 1px solid var(--color-border-default); }
.skin-header a { display: inline-flex; align-items: center; text-decoration: none; color: var(--color-fg-default); }
.skin-header .brand-box { display: inline-flex; align-items: center; background: var(--x-logo-box); border-radius: 6px; padding: 5px 10px; }
.skin-header .brand-box img { height: 18px; width: auto; display: block; }
.skin-header .brand-mode { margin-left: 10px; font-size: 14px; font-weight: 600; }
.skin-header .here { color: var(--color-fg-muted); font-size: 14px; }
.skin-shell { display: grid; grid-template-columns: 68px minmax(0, 1fr); height: calc(100vh - 53px); }
.skin-shell > main { overflow-y: auto; min-height: 0; min-width: 0; }
input, select, textarea { font: inherit; color: var(--color-fg-default); background: var(--color-canvas-default); border: 1px solid var(--color-border-default); border-radius: 6px; }
input::placeholder, textarea::placeholder { color: var(--color-fg-muted); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-accent-emphasis); outline-offset: -1px; }
@media (max-width: 860px) {
  .skin-shell { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - 53px); padding-bottom: var(--x-bottom-bar); }
  .skin-header { padding: 8px 12px; }
}
/* a page with no rail (an outside visitor, or a page shown inside another page's frame) is one column */
.skin-shell.norail { grid-template-columns: minmax(0, 1fr); } .skin-shell.norail > .rail { display: none; }
main.skin-main { padding: 16px; }
@media (max-width: 860px) { main.skin-main { padding: 12px 10px 24px; } }
@media print { .skin-header, .rail { display: none !important; } .skin-shell { display: block; height: auto; } }
.skin-shell > .skin-scroll { overflow-y: auto; min-height: 0; min-width: 0; }   /* a page whose own <main> sets its measure scrolls in this lane */
.skin-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 0 12px; }
/* THE HEADER'S ACTIONS (4 Oct 2026): the Helpdesk and HR pages have no rail, so the nav strip header-nav.js injects
   (Team, Safety, Agents, pending, history, ?, profile) lives at the right of the house header, in the house's colours. */
.skin-header .skin-header-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; position: static !important; top: auto !important; right: auto !important; transform: none !important; }   /* the pages' own .header-actions rules pin it absolutely; here it sits in the row */
.skin-header .skin-header-actions .icon-btn { background: none; border: 0; padding: 0; cursor: pointer; display: flex; align-items: center; text-decoration: none; }
.skin-header .skin-header-actions .icon-circle { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--color-border-default); background: var(--color-canvas-default); color: var(--color-fg-muted); font-size: 13px; font-weight: 600; }
.skin-header .skin-header-actions .icon-btn:hover .icon-circle { color: var(--color-fg-default); background: var(--color-canvas-subtle); }
.skin-header .skin-header-actions svg { width: 15px; height: 15px; }