/* ============================================================================
 * xtoken skin: brut v8 — the shell only.
 *
 * The content area of every page is the platform design system (lib v3); this file paints
 * exactly three things and nothing else (spec §7):
 *
 *   .site-head    the site header: brand mark, primary nav, bell / currency / language /
 *                 skin / account controls
 *   .site-foot    the black site footer
 *   .ann-support  the support band pinned to the foot of the announcements dialog
 *
 * Everything is scoped under those three selectors and every value is a `--xt-*` variable
 * declared on them, so nothing here can leak into lib's tokens or into the content area.
 * Type is lib's system stack (`--font-sans` / `--font-mono`, no downloaded fonts).
 *
 * The brutalist character lives in three channels: one 1px pure-ink line, a black-on-white
 * inversion for the current item, and yellow in exactly two places — the brand mark and the
 * unread badge ("here is something to act on"). Nothing floats, nothing is rounded.
 * ========================================================================== */

[data-xt-skin="brut"] .site-head,
[data-xt-skin="brut"] .site-foot,
[data-xt-skin="brut"] .ann-support {
  --xt-paper:   oklch(0.98 0.012 95);   /* page paper, for inverted text */
  --xt-paper-2: oklch(1 0 0);           /* the header's own surface */
  --xt-paper-3: oklch(0.955 0.008 95);  /* the one hover fill */
  --xt-ink:     oklch(0.17 0.012 90);   /* text + the shell line */
  --xt-ink-soft: oklch(0.46 0.012 90);  /* secondary text (≥ 4.5:1 on every shell surface) */
  --xt-ink-faint-inverse: oklch(0.72 0.010 90); /* secondary text on the black footer */
  --xt-line:    var(--xt-ink);
  --xt-line-soft: oklch(0.80 0.008 90); /* hairline between menu groups */
  --xt-line-inverse: oklch(0.42 0.012 90); /* hairline on the black footer */
  --xt-accent:  oklch(0.88 0.19 100);   /* electric yellow: brand mark + unread badge, nowhere else */
  --xt-accent-ink: var(--xt-ink);
  --xt-head-h:  54px;
  --xt-ctl:     34px;                   /* the right-hand controls share ONE height */
  --xt-mark:    26px;
  --xt-menu-w:  12rem;
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  line-height: var(--leading-body, 1.5);
  color: var(--xt-ink);
}

/* ---- header ------------------------------------------------------------- */
.site-head { position: sticky; top: 0; z-index: var(--z-sticky, 30); background: var(--xt-paper-2); border-bottom: 1px 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 { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--weight-bold, 700); font-size: var(--text-subheading); letter-spacing: -0.02em; text-decoration: none; color: var(--xt-ink); flex: none; }
.site-head .brand-mark, .site-foot .brand-mark { width: var(--xt-mark); height: var(--xt-mark); background: var(--xt-accent); color: var(--xt-accent-ink); border: 1px solid var(--xt-line); display: grid; place-content: center; font-size: var(--text-caption); overflow: hidden; flex: none; }
.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(--weight-bold, 700); font-size: var(--text-caption); padding: var(--sp-1) var(--sp-2); text-decoration: none; border: 1px solid transparent; white-space: nowrap; color: var(--xt-ink-soft); }
.site-head .nav a:hover { border-color: var(--xt-line); background: var(--xt-paper-3); color: var(--xt-ink); }
.site-head .nav a[aria-current="page"] { background: var(--xt-ink); color: var(--xt-paper); border-color: var(--xt-line); }
.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-squared to match. */
.site-head .icon-btn { width: var(--xt-ctl); height: var(--xt-ctl); display: grid; place-content: center; cursor: pointer; flex: none; border: 1px solid var(--xt-line); background: var(--xt-paper-2); color: var(--xt-ink); text-decoration: none; padding: 0; position: relative; border-radius: 0; }
.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: 1px solid var(--xt-line); border-radius: 0; background: var(--xt-ink); color: var(--xt-paper); display: grid; place-content: center; font-weight: var(--weight-bold, 700); cursor: pointer; flex: none; font-size: var(--text-caption); padding: 0; }
.site-head .xt-seg { display: inline-flex; border: 1px solid var(--xt-line); height: var(--xt-ctl); }
.site-head .xt-seg > button { border: 0; border-right: 1px solid var(--xt-line); background: var(--xt-paper-2); color: var(--xt-ink); font: inherit; font-weight: var(--weight-bold, 700); 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-ink); color: var(--xt-paper); }
.site-head .btn { height: var(--xt-ctl); border-radius: 0; border: 1px solid var(--xt-line); background: var(--xt-paper-2); color: var(--xt-ink); box-shadow: none; font-weight: var(--weight-bold, 700); }
.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: 1px solid var(--xt-line); font-family: var(--font-mono); font-size: var(--text-micro); font-weight: var(--weight-bold, 700); 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-paper-2); border: 1px solid var(--xt-line); 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(--weight-bold, 700); text-decoration: none; border: 1px solid transparent; 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-line); }
.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(--weight-bold, 700); color: var(--xt-ink-soft); padding: var(--sp-2) var(--sp-2) var(--sp-1); }
.site-head .xt-menu-sep { border-top: 1px solid var(--xt-line-soft); margin: var(--sp-2) 0; }
.site-head .xt-menu-panel form { display: contents; }

/* ---- footer ------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--xt-line); background: var(--xt-ink); color: var(--xt-paper); padding-inline: var(--sp-4); }
.site-foot a { color: var(--xt-paper); text-decoration: underline; text-decoration-color: var(--xt-line-inverse); }
.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-ink-faint-inverse); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: 0.12em; font-weight: var(--weight-bold, 700); margin-bottom: var(--sp-1); }
.site-foot .foot-col .brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--weight-bold, 700); font-size: var(--text-subheading); color: var(--xt-paper); }
.site-foot .dim { color: var(--xt-ink-faint-inverse); }
.site-foot .foot-bar { border-top: 1px solid var(--xt-line-inverse); padding-block: var(--sp-4); display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; color: var(--xt-ink-faint-inverse); }
.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-ink); color: var(--xt-paper); 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: 1px solid var(--xt-line-inverse); 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(--weight-bold, 700); }
.ann-support .ann-support-d { color: var(--xt-ink-faint-inverse); }
.ann-support .btn { border-radius: 0; border: 1px solid var(--xt-paper); background: var(--xt-paper-2); 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; }
}
@media (pointer: coarse) {
  [data-xt-skin="brut"] .site-head { --xt-ctl: 40px; }
}