/*
 * parcor.io — the site header, and the column it sits in (G040).
 *
 * ONE STYLESHEET, TWO SURFACES. Every page apps/web/render.ts writes links this file, and so does the
 * console's page (apps/admin/index.html), whose sign-in view renders the same header (apps/web/site.ts
 * writes it for both). So the header sets every property its look depends on — face, size, weight,
 * line height, colour, smoothing — rather than inheriting them from a body that differs between the
 * two surfaces. Existing tokens only (packages/tokens/tokens.css): no colour and no face is added.
 *
 * NOTHING MOVES. From 48rem the header is one row, 4rem high, that never wraps, inside .wrap — the
 * site's one content column — so the wordmark stands over the text's left edge and Sign in over the
 * column's right edge on every page. No state changes an item's width: the page in view changes colour
 * and gains a rule on the header's lower edge, never weight or padding. And every page reserves the
 * scrollbar's space, so a short page does not sit half a scrollbar to one side of a long one.
 *
 * BELOW 48REM, one row 3.5rem high: the wordmark, the language link and Menu, a <details> element that
 * opens the pages and Sign in as a list. No script (doc 37 §5). Every target is 44 px or more, and no
 * text is under 16 px (G033's floor).
 *
 * Nothing inline anywhere: the site serves `style-src 'self'` (OI-39), so this is a file.
 */

/* The system's Simplified Chinese faces, the site's Latin face first. Not a token: tokens.css stays as it
 * is, and only the marketing pages and this header use it. styles.css reads it too. */
:root{--f-zh:"IBM Plex Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC","Noto Sans SC",sans-serif}

html{scrollbar-gutter:stable}

/* The site's content column: every page's text and its header sit in it, at one measure. */
.wrap{max-width:60rem;margin:0 auto;padding-inline:clamp(1.25rem,4.5vw,2.5rem)}

.site-header{
  position:relative;border-bottom:1px solid var(--rule);background:var(--paper);
  font-family:var(--f-body);font-size:1rem;font-weight:400;line-height:1.25;letter-spacing:normal;
  color:var(--ink);-webkit-font-smoothing:antialiased;
}
html[lang|="zh"] .site-header,.site-header [lang|="zh"]{font-family:var(--f-zh)}
.site-header *,.site-header *::before,.site-header *::after{box-sizing:border-box}
.site-header a{text-decoration:none}
.site-header :focus-visible{outline:2px solid var(--petrol);outline-offset:-2px}

.site-row{display:flex;align-items:stretch;min-height:3.5rem}

.site-brand{
  display:flex;align-items:center;flex:0 0 auto;
  font-family:var(--f-display);font-size:1.5rem;font-weight:500;letter-spacing:-.015em;line-height:1;
  color:var(--ink);white-space:nowrap;
}
.site-brand span{color:var(--patina)}

.site-link{position:relative;display:flex;align-items:center;flex:0 0 auto;white-space:nowrap;font-size:1rem;color:var(--ink-2)}
.site-link[aria-current="page"]{color:var(--ink)}
.site-link:hover{color:var(--petrol)}

/* On a phone the pages and Sign in are Menu's: the row holds the wordmark, the language link and Menu. */
.site-pages,.auth-slot{display:none}
.site-lang{margin-left:auto;min-width:2.75rem;justify-content:center;padding-inline:.75rem}
.site-menu{display:block;flex:0 0 auto;margin-right:-.75rem}
.site-menu summary{
  display:flex;align-items:center;min-height:3.5rem;padding-inline:.75rem;cursor:pointer;
  list-style:none;font-size:1rem;white-space:nowrap;color:var(--ink-2);
}
.site-menu summary::-webkit-details-marker{display:none}
.site-menu summary:hover,.site-menu[open] summary{color:var(--ink)}
.site-menu-panel{position:absolute;top:100%;left:0;right:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--rule)}
.site-menu-panel ul{list-style:none;margin-block:0;padding-block:.5rem}
.site-menu-link{
  display:flex;align-items:center;min-height:2.75rem;padding-left:.75rem;
  font-size:1rem;color:var(--ink-2);box-shadow:inset 2px 0 transparent;
}
.site-menu-link[aria-current="page"]{color:var(--ink);box-shadow:inset 2px 0 var(--petrol)}
.site-menu-link:hover{color:var(--petrol)}

/* Sign in, in the reserved auth slot: the only boxed control. */
.site-signin{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-size:.875rem;font-weight:500;line-height:1;padding:.6rem .95rem;
  border:1px solid var(--ink-3);color:var(--ink);
}
.site-signin:hover{border-color:var(--petrol);color:var(--petrol)}
.site-header .site-signin:focus-visible{outline-offset:2px}

@media (min-width:48rem){
  .site-row{min-height:4rem}
  .site-menu{display:none}
  .site-pages{display:flex;gap:1.75rem;margin-left:2.5rem}
  .site-link{font-size:.9375rem}
  .site-lang{margin-left:auto;min-width:0;padding-inline:0}
  .auth-slot{display:flex;align-items:center;position:relative;margin-left:1.75rem}
  /* The page in view: a 2 px rule on the header's lower edge, over its border, under the link. */
  .site-link[aria-current="page"]::after,.auth-slot.is-current::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--petrol);
  }
}

@media (prefers-reduced-motion:no-preference){
  .site-link,.site-signin,.site-menu summary,.site-menu-link{transition:color .15s ease,border-color .15s ease}
}