/* ============================================================================
 * xtoken shell — STRUCTURE ONLY (spec §7).
 *
 * The content area of every page is the platform design system (lib v3). This file lays out
 * exactly three things and nothing else:
 *
 *   .site-head    the site header: brand, primary nav, bell / currency / language / account
 *   .site-foot    the site footer
 *   .ann-support  the support band pinned to the foot of the announcements dialog
 *
 * It declares NO default value: every colour, radius, line width, font and per-skin choice is
 * a `--xt-*` variable that `skins/<id>.css` supplies. A skin missing one shows up as a broken
 * header at once, instead of quietly inheriting another skin's value. Spacing steps, type
 * sizes and z-layers are lib's tokens (`--sp-*`, `--text-*`, `--z-*`) — the same grid the
 * content area sits on.
 * ========================================================================== */

.site-head, .site-foot, .ann-support {
  font-family: var(--xt-font);
  font-size: var(--xt-font-size);
  line-height: var(--xt-leading);
  color: var(--xt-ink);
}

/* ---- header ------------------------------------------------------------- */
.site-head { position: sticky; top: 0; z-index: var(--z-sticky, 30); background: var(--xt-head-bg); backdrop-filter: var(--xt-head-blur); border-bottom: var(--xt-line-w) solid var(--xt-line); }
.site-head .head-in { display: flex; align-items: center; gap: var(--sp-4); height: var(--xt-head-h); padding-inline: var(--sp-4); }
.site-head .brand, .site-foot .brand { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--xt-brand-font); font-size: var(--text-subheading); font-weight: var(--xt-brand-weight-a); text-decoration: none; }
.site-head .brand { color: var(--xt-ink); flex: none; letter-spacing: var(--xt-brand-tracking); }
.site-foot .brand { letter-spacing: var(--xt-foot-brand-tracking); }
.site-head .wm-a, .site-foot .wm-a { color: var(--xt-brand-color-a); font-weight: var(--xt-brand-weight-a); }
.site-head .wm-b, .site-foot .wm-b { color: var(--xt-brand-color-b); font-weight: var(--xt-brand-weight-b); font-style: var(--xt-brand-style-b); }
.site-head .brand-mark, .site-foot .brand-mark { width: var(--xt-mark); height: var(--xt-mark); background: var(--xt-mark-bg); color: var(--xt-mark-fg); border: var(--xt-line-w) solid var(--xt-line); border-radius: var(--xt-radius); display: var(--xt-mark-display); place-content: center; font-size: var(--text-caption); overflow: hidden; flex: none; }
.site-head .brand-mark.has-logo, .site-foot .brand-mark.has-logo { display: grid; }
.site-head .brand-mark img, .site-foot .brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.site-head .nav { display: flex; align-items: center; gap: var(--sp-1); margin-inline-start: var(--sp-5); }
.site-head .nav a { font-weight: var(--xt-nav-weight); font-size: var(--xt-nav-size); text-transform: var(--xt-nav-transform); letter-spacing: var(--xt-nav-tracking); padding: var(--sp-1) var(--sp-2); text-decoration: none; border: var(--xt-line-w) solid transparent; border-radius: var(--xt-radius-pill); white-space: nowrap; color: var(--xt-ink-soft); }
.site-head .nav a:hover { border-color: var(--xt-hover-border); background: var(--xt-paper-3); color: var(--xt-ink); }
.site-head .nav a[aria-current="page"] { background: var(--xt-current-bg); color: var(--xt-current-fg); border-color: var(--xt-current-border); }
.site-head .head-right { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-2); flex: none; }

/* The right-hand group: icon buttons, the currency segment, the avatar, the sign-in pair.
   All exactly --xt-ctl tall — a row of controls that disagree about height reads as three
   toolbars. lib's .btn inside the header is re-shaped to match. */
.site-head .icon-btn { width: var(--xt-ctl); height: var(--xt-ctl); display: grid; place-content: center; cursor: pointer; flex: none; border: var(--xt-line-w) solid var(--xt-line); background: var(--xt-head-bg); color: var(--xt-ink); text-decoration: none; padding: 0; position: relative; border-radius: var(--xt-radius); }
.site-head .icon-btn:hover { background: var(--xt-paper-3); }
.site-head .icon-btn svg { width: 18px; height: 18px; }
.site-head .xt-avatar { width: var(--xt-ctl); height: var(--xt-ctl); border: var(--xt-line-w) solid var(--xt-line); border-radius: var(--xt-radius); background: var(--xt-avatar-bg); color: var(--xt-avatar-fg); display: grid; place-content: center; font-weight: var(--xt-ctl-weight); cursor: pointer; flex: none; font-size: var(--text-caption); padding: 0; }
.site-head .xt-seg { display: inline-flex; border: var(--xt-line-w) solid var(--xt-line); border-radius: var(--xt-radius); height: var(--xt-ctl); }
.site-head .xt-seg > button:first-child { border-start-start-radius: inherit; border-end-start-radius: inherit; }
.site-head .xt-seg > button:last-child { border-start-end-radius: inherit; border-end-end-radius: inherit; }
.site-head .xt-seg > button { border: 0; border-right: var(--xt-line-w) solid var(--xt-line); background: var(--xt-head-bg); color: var(--xt-ink); font: inherit; font-weight: var(--xt-ctl-weight); padding: 0 var(--sp-2); cursor: pointer; min-width: var(--xt-ctl); }
.site-head .xt-seg > button:last-child { border-right: 0; }
.site-head .xt-seg > button:hover { background: var(--xt-paper-3); }
.site-head .xt-seg > button[aria-pressed="true"] { background: var(--xt-pressed-bg); color: var(--xt-pressed-fg); }
.site-head .btn { height: var(--xt-ctl); border-radius: var(--xt-radius-pill); border: var(--xt-line-w) solid var(--xt-line); background: var(--xt-head-bg); color: var(--xt-ink); box-shadow: none; font-weight: var(--xt-ctl-weight); }
.site-head .btn.btn-primary { background: var(--xt-accent); color: var(--xt-accent-ink); }
.site-head .badge { position: absolute; top: -7px; inset-inline-end: -7px; min-width: 18px; height: 18px; padding-inline: 3px; background: var(--xt-accent); color: var(--xt-accent-ink); border: var(--xt-line-w) solid var(--xt-line); border-radius: var(--xt-radius); font-family: var(--font-mono); font-size: var(--text-micro); font-weight: var(--xt-ctl-weight); line-height: 1; display: grid; place-content: center; font-variant-numeric: tabular-nums; }

/* Header menus are <details>: they open with scripting off. */
.site-head .xt-menu { position: relative; }
.site-head .xt-menu > summary { list-style: none; cursor: pointer; }
.site-head .xt-menu > summary::-webkit-details-marker { display: none; }
.site-head .xt-menu-panel { position: absolute; inset-inline-end: 0; top: calc(100% + var(--sp-2)); z-index: var(--z-dropdown, 40); min-width: var(--xt-menu-w); background: var(--xt-head-bg); border: var(--xt-line-w) solid var(--xt-line); border-radius: var(--xt-radius); box-shadow: var(--xt-menu-shadow); padding: var(--sp-2); display: flex; flex-direction: column; gap: 2px; }
.site-head .xt-menu-panel a:not(.btn), .site-head .xt-menu-panel button:not(.btn) { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); min-height: var(--xt-ctl); font: inherit; font-weight: var(--xt-ctl-weight); text-decoration: none; border: var(--xt-line-w) solid transparent; border-radius: var(--xt-radius-pill); background: transparent; color: var(--xt-ink); cursor: pointer; text-align: start; width: 100%; }
.site-head .xt-menu-panel a:not(.btn):hover, .site-head .xt-menu-panel button:not(.btn):hover { background: var(--xt-paper-3); border-color: var(--xt-hover-border); }
.site-head .xt-menu-panel [aria-current="true"] { background: var(--xt-ink); color: var(--xt-paper); border-color: var(--xt-line); }
.site-head .xt-menu-head { font-size: var(--text-micro); text-transform: uppercase; letter-spacing: 0.12em; font-weight: var(--xt-ctl-weight); color: var(--xt-ink-soft); padding: var(--sp-2) var(--sp-2) var(--sp-1); }
.site-head .xt-menu-sep { border-top: var(--xt-line-w) solid var(--xt-line-soft); margin: var(--sp-2) 0; }
.site-head .xt-menu-panel form { display: contents; }

/* ---- footer ------------------------------------------------------------- */
.site-foot { border-top: var(--xt-line-w) solid var(--xt-line); background: var(--xt-foot-bg); color: var(--xt-foot-fg); padding-inline: var(--sp-4); }
.site-foot a { color: var(--xt-foot-fg); text-decoration: underline; text-decoration-color: var(--xt-foot-line); }
.site-foot a:hover { text-decoration-color: var(--xt-accent); }
.site-foot .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-5); padding-block: var(--sp-6); }
.site-foot .foot-col { display: flex; flex-direction: column; gap: var(--sp-2); }
.site-foot .foot-col .micro { color: var(--xt-foot-dim); font-family: var(--xt-foot-font); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: 0.12em; font-weight: var(--xt-ctl-weight); margin-bottom: var(--sp-1); }
.site-foot .foot-col .brand { color: var(--xt-foot-fg); }
.site-foot .dim { color: var(--xt-foot-dim); }
.site-foot .foot-bar { border-top: var(--xt-line-w) solid var(--xt-foot-line); padding-block: var(--sp-4); display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; color: var(--xt-foot-dim); font-family: var(--xt-foot-font); text-transform: var(--xt-foot-transform); letter-spacing: var(--xt-foot-tracking); }
.site-foot-slim .foot-bar { border-top: 0; padding-block: var(--sp-3); }

/* ---- the support band at the foot of the announcements dialog ------------- */
.ann-support { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); background: var(--xt-foot-bg); color: var(--xt-foot-fg); margin: var(--sp-3) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)); }
.ann-support .ann-support-mark { display: grid; place-content: center; width: var(--xt-ctl); height: var(--xt-ctl); border: var(--xt-line-w) solid var(--xt-foot-line); border-radius: var(--xt-radius); flex: none; }
.ann-support .ann-support-mark svg { width: 18px; height: 18px; }
.ann-support .ann-support-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 14rem; min-width: 0; }
.ann-support .ann-support-k { font-weight: var(--xt-ctl-weight); }
.ann-support .ann-support-d { color: var(--xt-foot-dim); }
.ann-support .btn { border-radius: var(--xt-radius-pill); border: var(--xt-line-w) solid var(--xt-foot-fg); background: var(--xt-head-bg); color: var(--xt-ink); box-shadow: none; }
.ann-support .ann-support-id { font-family: var(--font-mono); margin-inline-start: var(--sp-1); }

/* ---- narrow screens ------------------------------------------------------ */
@media (max-width: 900px) {
  .site-head .nav, .site-head .is-desk { display: none; }
  .site-foot .foot-grid { grid-template-columns: 1fr 1fr; }
}