/* DEBYKO chrome — the header and the footer every surface carries (Debyko.Web.Chrome Header and Footer): debyko.com,
   the studio.debyko.com landing, the account pages, agent.debyko.com. Only --dk-* tokens, so both themes work; every
   class here belongs to the header or the footer and leans on no surface's own stylesheet. Edit here, nowhere else. */

/* ── Header: the first row, identical everywhere ────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--dk-surface-page); border-bottom: 1px solid var(--dk-border-hairline); font-family: var(--dk-font-text); }
/* components below set display: flex, which would beat the UA rule for [hidden] */
.site-header [hidden] { display: none !important; }
.site-header a { text-decoration: none; }
.site-header a:hover { opacity: 1; text-decoration: none; }
.site-header svg { display: block; flex: none; }
.site-header__wrap, .site-footer__wrap { max-width: 1280px; margin: 0 auto; padding: 0 26px; }
.site-header__bar { height: 56px; display: flex; align-items: center; gap: 26px; }
.site-header__logo { display: flex; align-items: center; flex: none; }
.site-header__logo img { height: 32px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.nav__item { position: relative; }
.nav__trigger { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; margin: 0; height: 56px; padding: 0 12px; cursor: pointer; white-space: nowrap; font: 500 13px/1 var(--dk-font-text); color: var(--dk-text-secondary); }
.nav__trigger:hover, .nav__trigger[aria-expanded="true"], .nav__trigger[aria-current="page"] { color: var(--dk-text-primary); }
.nav__menu { position: absolute; top: 56px; left: 0; min-width: 236px; background: var(--dk-surface-panel); border: 1px solid var(--dk-border-hairline); border-top: 2px solid var(--dk-accent); box-shadow: var(--dk-shadow-popover); padding: 8px 0; display: flex; flex-direction: column; }
.nav__menu--end { left: auto; right: 0; }
.nav__menu a { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 16px; font: 400 13px/1.3 var(--dk-font-text); color: var(--dk-text-primary); }
.nav__menu a:hover, .nav__menu a[aria-current="page"] { background: var(--dk-surface-subtle); }
.nav-tag { font: 500 9px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-text-faint); white-space: nowrap; }

/* ── The right corner: a guest, or the reader who is signed in ──────────── */
.site-header__actions { display: flex; align-items: center; flex: none; margin-left: auto; }
.hd-guest { display: flex; align-items: center; gap: 8px; }
.hd-user { display: none; align-items: center; gap: 2px; }
/* data-viewer: the server rendered this page for a signed-in reader. data-in: a cached page whose reader carries
   the "signed in" cookie (Header.HintCookie), set on <html> before the first paint. */
.site-header[data-viewer] .hd-guest, html[data-in] .hd-guest { display: none; }
.site-header[data-viewer] .hd-user, html[data-in] .hd-user { display: flex; }

.hd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--dk-control-h); padding: 0 14px; border-radius: 0; white-space: nowrap; cursor: pointer; font: 600 var(--dk-text-xs)/1 var(--dk-font-mono); letter-spacing: var(--dk-track-label); text-transform: uppercase; transition: var(--dk-transition-control); background: var(--dk-surface-panel); color: var(--dk-text-primary); border: 1px solid var(--dk-border-hairline); }
.hd-btn > span { padding-top: 1px; }
.hd-btn:hover { background: var(--dk-surface-subtle); border-color: var(--dk-border-strong); }
.hd-btn--primary { background: var(--dk-accent); color: var(--dk-accent-fg); border-color: transparent; }
.hd-btn--primary:hover { background: var(--dk-accent-strong); border-color: transparent; }
.hd-btn--ghost { background: transparent; color: var(--dk-text-secondary); border-color: transparent; }
.hd-btn--ghost:hover { background: var(--dk-surface-subtle); border-color: transparent; color: var(--dk-text-primary); }

.hd-me__trigger { max-width: 300px; font-family: var(--dk-font-mono); font-size: var(--dk-text-xs); }
.hd-me__name { overflow: hidden; text-overflow: ellipsis; padding-top: 1px; }
.hd-out { margin: 0; display: flex; }
.hd-door { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: var(--dk-control-h); padding: 0; margin: 0; background: transparent; border: 1px solid transparent; cursor: pointer; color: var(--dk-text-secondary); transition: var(--dk-transition-control); }
.hd-door:hover:not(:disabled) { background: var(--dk-surface-subtle); color: var(--dk-text-primary); }
.hd-door:disabled { opacity: .4; cursor: default; }

/* ── Narrow screens: the menus fold into Menu, the corner stays ─────────── */
.menu-btn { display: none; flex: none; align-items: center; background: none; border: 1px solid var(--dk-border-hairline); height: 32px; padding: 0 12px; margin-left: 10px; cursor: pointer; font: 600 11px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-primary); }
.mobile-nav { border-top: 1px solid var(--dk-border-hairline); background: var(--dk-surface-panel); padding: 14px 26px 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.mobile-nav__group { display: flex; flex-direction: column; gap: 6px; }
.mobile-nav__title { font: 600 11px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-faint); padding: 6px 0; }
.mobile-nav__group a { font: 400 14px/1.4 var(--dk-font-text); color: var(--dk-text-primary); padding: 4px 0; }
.mobile-nav__group a[aria-current="page"] { color: var(--dk-text-accent); }
.mobile-nav__actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* ── The second row: a surface's own navigation ─────────────────────────── */
.site-subnav { border-top: 1px solid var(--dk-border-hairline); background: var(--dk-surface-panel); }
.site-subnav__row { display: flex; align-items: center; gap: 4px; min-height: 40px; overflow-x: auto; scrollbar-width: none; }
.site-subnav__row::-webkit-scrollbar { display: none; }
.site-subnav__where { flex: none; font: 600 11px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-primary); padding-right: 14px; margin-right: 8px; border-right: 1px solid var(--dk-border-hairline); height: 16px; display: inline-flex; align-items: center; }
/* a surface with no links of its own in the row (the account pages): the name stands alone, with nothing to divide it from */
.site-subnav__where:last-child { border-right: 0; }
.site-subnav__item { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 10px; border-bottom: 2px solid transparent; font: 400 13px/1 var(--dk-font-mono); color: var(--dk-text-secondary); white-space: nowrap; }
.site-subnav__item:hover { color: var(--dk-text-primary); }
.site-subnav__item[aria-current="page"] { color: var(--dk-text-primary); border-bottom-color: var(--dk-accent); }
.site-subnav__item[aria-disabled="true"] { color: var(--dk-text-faint); cursor: default; }
.site-subnav__extras { flex: none; margin-left: auto; padding-left: 14px; display: flex; align-items: center; gap: 10px; }

/* The header needs about 1,100px for the logo, seven menus and the corner; below that the menus fold into Menu. */
@media (max-width: 1160px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 960px) {
  .hd-wide { display: none; }
}
@media (max-width: 640px) {
  .site-header__wrap, .site-footer__wrap { padding: 0 16px; }
  .site-header__bar { gap: 12px; }
  .site-header__logo img { height: 26px; }
  .hd-me__trigger { padding: 0 8px; }
  .hd-me__name { display: none; }
  .hd-btn { padding: 0 10px; }
  .menu-btn { margin-left: 6px; padding: 0 10px; }
  .mobile-nav { padding: 14px 16px 22px; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--dk-border-strong); padding: 48px 0 32px; font-family: var(--dk-font-text); }
.site-footer a { text-decoration: none; }
.site-footer__wrap { display: flex; flex-direction: column; gap: 48px; min-width: 0; }
.site-footer__cols { display: grid; grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr)); gap: 32px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.site-footer__brand img { height: 30px; width: auto; display: block; align-self: flex-start; }
.site-footer__col { display: flex; flex-direction: column; gap: 8px; }
.site-footer__title { font: 600 10px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-faint); padding-bottom: 6px; }
.site-footer__col a { font: 400 13px/1.4 var(--dk-font-text); color: var(--dk-text-primary); display: flex; gap: 8px; align-items: baseline; }
/* Social links carry a mark; it sits with the word, not on its baseline. */
.site-footer__col--socials a { align-items: center; gap: 7px; }
.social-icon { width: 14px; height: 14px; flex: none; opacity: .75; }
.site-footer__col--socials a:hover .social-icon { opacity: 1; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; border-top: 1px solid var(--dk-border-hairline); padding-top: 18px; font: 400 11px/1.5 var(--dk-font-mono); color: var(--dk-text-faint); }
/* The operator's legal line — company, code, registered address, author. */
.credit { margin: 0; font: 400 12px/1.7 var(--dk-font-text); color: var(--dk-text-muted); }
.credit--legal a { color: var(--dk-text-primary); }
@media (max-width: 960px) {
  .site-footer__cols { grid-template-columns: minmax(0, 1fr); }
}

/* Both logos are the light-page artwork (dark wordmark); in the dark theme they would vanish. Inverted and turned back
   round the colour wheel, the wordmark is light and the accent stays pink. */
[data-theme="dark"] .site-header__logo img, [data-theme="dark"] .site-footer__brand img { filter: invert(1) hue-rotate(180deg); }