/* The site header. One file, one definition, every page.
 *
 * Loaded by templates/pt/_header.html itself, so a page gets the styles by
 * including the partial and nothing else - there is no second step to forget.
 *
 * Every colour reads a page token with the canonical value as a fallback, so
 * pages that do not define the site tokens (gate.html, pond_captures.html)
 * still render correctly instead of inheriting whatever those pages happen to
 * call their greys. The header does not depend on the page, so a page cannot
 * restyle it by accident.
 *
 * Layout note: the header is a full-width block carrying its own centred
 * inner column, NOT something that expects to be inside a .wrap. That is what
 * lets the identical markup sit in every page layout, including the tracer
 * whose <body> is a flex column.
 */
.siteHead{
  order:0;                       /* the tracer's body is a flex column */
  width:100%;
  background:transparent;        /* the page background runs through it */
}
.siteHeadIn{
  max-width:1120px;              /* 1120 - 2x28 padding = a 1064px column,
                                    matching every other content column */
  margin:0 auto;
  padding:22px 28px 0;
  display:flex;
  align-items:center;            /* brand pill, links and the theme toggle
                                    share one vertical centre. Baseline
                                    alignment put the 44px toggle a few px
                                    below the links on every page but /app. */
  gap:18px;
  font-size:13px;
  color:var(--ink-2, #55646F);
}
.siteBrand{white-space:nowrap}
.siteHeadIn nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.siteHeadIn nav a{
  color:var(--ink-2, #55646F);
  text-decoration:none;
  font-weight:500;
  padding:8px 10px;
  border-radius:8px;
  line-height:1.2;
}
.siteHeadIn nav a:hover{ color:var(--ink, #141F28); background:var(--pt-hover, #e2ebf3); }
/* The page you are on, marked once here rather than per-page. */
.siteHeadIn nav a[aria-current="page"]{ color:var(--ink, #141F28); font-weight:600; background:var(--pt-panel, rgba(247,250,252,.94)); }
.siteHeadIn nav .pt-theme-toggle{ margin-left:6px; }
.siteSolutions{position:relative}
.siteSolutions[open]{z-index:200}
.siteHeadIn nav .siteSolutions>summary{display:flex;align-items:center;gap:6px;list-style:none;padding:8px 10px;border-radius:8px;font-family:inherit;font-weight:500;font-size:13px;line-height:1.2;color:var(--ink-2,#55646F);cursor:pointer;white-space:nowrap}
.siteSolutions>summary::-webkit-details-marker{display:none}
.siteSolutions>summary span{font-size:15px;transition:transform .15s}
.siteSolutions[open]>summary span{transform:rotate(180deg)}
.siteHeadIn nav .siteSolutions>summary:hover,.siteSolutions[open]>summary,.siteSolutionsCurrent{background:var(--pt-hover,#e2ebf3);color:var(--pt-ink,#141F28)}
.siteSolutions>summary:focus-visible{outline:2px solid var(--pt-accent,#306d9c);outline-offset:2px}
.siteSolutionsLinks{position:absolute;top:calc(100% + 7px);left:0;min-width:235px;max-width:calc(100vw - 32px);padding:7px;background:var(--pt-paper,#fff);border:1px solid var(--pt-border,#cbd7df);border-radius:8px;box-shadow:0 10px 28px #102a4324}
.siteHeadIn nav .siteSolutionsLinks a{display:block;padding:11px 12px;white-space:nowrap;font-size:13px;line-height:1.4}
@media(max-width:560px){.siteHeadIn nav .siteSolutions>summary{padding:6px 7px;font-size:12px}.siteSolutionsLinks{left:50%;transform:translateX(-50%)}}

@media (max-width:900px){
  .siteHeadIn{ padding-left:16px; padding-right:16px; }
}
@media (max-width:560px){
  .siteHeadIn{ gap:8px; padding-top:16px; flex-wrap:wrap; }
  /* Used to force nav onto its own row unconditionally (order:1;
     flex-basis:100%), which read as a bug: a header that always wraps to
     two lines whether or not it needs to. The brand pill's badge styling
     (background, border, 24px radius, 18px bold type) is what was actually
     forcing that - shrunk to a plain compact wordmark here, nav stays
     inline, and flex-wrap on the row is kept only as a safety net for
     anything narrower than this breakpoint expects. */
  .siteHeadIn .pt-brand{ background:none; border:0; padding:0; border-radius:0;
    font-size:15px; gap:6px; }
  .siteHeadIn .pt-brand svg{ width:20px; height:20px; }
  .siteHeadIn nav{ gap:2px; }
  .siteHeadIn nav a{ padding:6px 7px; font-size:12px; }
  .siteHeadIn nav .pt-theme-toggle{ flex:0 0 36px; width:36px; min-height:36px; }
}
/* pond-responsive.css hides the current page's own link under 650px to make
   room in the tracer's crowded header. Site pages have the room, and a nav
   that drops the page you are on reads as a bug there. */
@media (max-width:650px){
  html body:not(:has(.app)) .siteHeadIn nav a[aria-current="page"]{ display:flex; }
}

/* The toolsforbuilders.com tool apps (templates/pt/_tfb_home.html): the hub's header, my.toolsforbuilders.com's
 * .top bar in tfb-accounts/hub.css. White ground, one 1px rule under it, 56px of bar, the wordmark in Barlow Semi
 * Condensed 600 at 22px (20px on a phone) in the hub's ink, then a short rule and the tool's name in the same face
 * and size at 500 in the hub's muted ink: one family name, one tool, read left to right at a single height.
 * The selectors start at html body so they outrank the workspace header (pond-workflow-tabs.css), which this
 * replaces on those hosts only. */
html body .siteHead.siteHeadT4b{
  --t4b-ground:#fff; --t4b-ink:#19384f; --t4b-muted:#4f6577; --t4b-rule:#d3dee7; --t4b-signal:#326b98;
  background:var(--t4b-ground); border-bottom:1px solid var(--t4b-rule);
}
html[data-theme="dark"] body .siteHead.siteHeadT4b{
  --t4b-ground:var(--pt-page-background, #0f1720); --t4b-ink:var(--pt-ink, #e6edf3); --t4b-muted:var(--pt-muted, #9fb0bf);
  --t4b-rule:var(--pt-border, #2a3946); --t4b-signal:var(--pt-accent, #7fb3dc);
}
html body .siteHead.siteHeadT4b > .siteHeadIn{
  box-sizing:border-box; height:56px; min-height:56px; max-width:1200px; margin:0 auto;
  padding:0 24px!important; gap:14px; flex-wrap:nowrap!important; align-items:center;
}
/* The workspace runs edge to edge, so its bar does too, on the same 24px gutter. */
html body.workspaceChrome .siteHead.siteHeadT4b > .siteHeadIn{ max-width:none; }
.siteT4bMark,.siteT4bTool{ font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif; font-size:22px; line-height:1;
  white-space:nowrap; text-decoration:none; }
.siteHeadT4b .siteT4bMark{ font-weight:600; color:var(--t4b-ink); }
.siteHeadT4b .siteT4bTool{ font-weight:500; color:var(--t4b-muted); }
.siteHeadT4b a.siteT4bMark:hover,.siteHeadT4b a.siteT4bTool:hover{ color:var(--t4b-signal); }
.siteT4bRule{ flex:none; width:1px; height:20px; background:var(--t4b-rule); }
.siteHeadT4b nav{ margin-left:auto; }
.siteHeadT4b nav:not(:has(a)) + .siteFeedback{ margin-left:4px; }
/* Links and Feedback read like the hub's nav: Barlow 16px in ink, underlined in signal blue on hover, no box. */
.siteHeadT4b nav a{ font:400 16px/1.2 "Barlow","Segoe UI",sans-serif; color:var(--t4b-ink); padding:8px 4px; background:none; }
.siteHeadT4b nav a:hover,.siteHeadT4b nav a[aria-current="page"]{ color:var(--t4b-signal); background:none; text-decoration:underline; text-underline-offset:3px; }
.siteHeadT4b .siteFeedbackButton{ height:36px; padding:0 4px; border:0; background:none; gap:8px;
  font:400 16px/1 "Barlow","Segoe UI",sans-serif; color:var(--t4b-ink); }
.siteHeadT4b .siteFeedbackButton:hover{ color:var(--t4b-signal); }
.siteHeadT4b .siteFeedbackButton:hover .siteFeedbackLabel{ text-decoration:underline; text-underline-offset:3px; }
.siteHeadT4b nav .pt-theme-toggle{ color:var(--t4b-ink); flex:0 0 36px; width:36px; min-height:36px; height:36px; margin-left:0; }
.siteHeadT4b .pt-theme-toggle:hover{ color:var(--t4b-signal); }
@media (max-width:760px){
  html body .siteHead.siteHeadT4b > .siteHeadIn{ padding:0 16px!important; gap:10px; }
  .siteT4bMark,.siteT4bTool{ font-size:20px; }
  .siteT4bRule{ height:18px; }
  .siteHeadT4b .siteFeedbackButton{ width:32px; height:32px; padding:0; justify-content:center; }
}
@media (max-width:420px){
  html body .siteHead.siteHeadT4b > .siteHeadIn{ padding:0 12px!important; gap:8px; }
  .siteT4bMark,.siteT4bTool{ font-size:19px; }
  .siteHeadT4b nav .pt-theme-toggle{ flex:0 0 32px; width:32px; min-height:32px; height:32px; margin-left:0; }
}