/* chrome.css — page chrome: the engineering-drawing title block at the
   top of every page, the footer status line, and the dark/light toggle.
   "Chrome" in the browser-UI sense: surrounds the content, not part of it. */

/* ---- title block (engineering-drawing header) ---- */
/* offset in-page anchor jumps so targets don't hide under the sticky header */
html { scroll-padding-top: 3.5rem; }
.tag {
  /* pinned to the top on scroll; opaque background + z-index so page content
     (and the splash/hero pic art) scrolls underneath it cleanly. */
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  display: flex;
  /* center, not baseline: items on the right of the bar mix text
     (sign-out, DEV), a circle SVG (theme toggle), and a bordered
     chip — their baselines all land at slightly different y's, so
     baseline alignment leaves the row visibly uneven. Centering
     them shares a midline; left-side text (gastropod + nav) is all
     the same font-size so it reads identical to baseline at this
     scale. */
  align-items: center;
  /* Wrap when the row can't fit (narrow / phone viewports). The wordmark, nav
     links, and CTAs are all non-shrinkable text, so their combined min-width
     (~890px) would otherwise force the *layout viewport* wider than the device:
     viewport-meta-honouring browsers (real phones, devtools device mode) then
     render the whole page zoomed out and unable to reflow. Wrapping keeps the
     header within the viewport so the mobile layout stays honest. The row-gap
     is tighter than the column-gap so wrapped rows sit close together. */
  flex-wrap: wrap;
  gap: 0.45rem 1.5rem;
  padding: 0.5rem 1.25rem 0.4rem;
  border-bottom: 3px double var(--ink);
  font-size: 13px;
}
/* nowrap + no shrink so the g-snail and "astropod" never break onto two
   lines when the flex header narrows (the snail must stay the word's initial,
   not jump above it on mobile). */
.tag-title { font-weight: 700; letter-spacing: 0.04em; text-transform: lowercase; display: inline-block; white-space: nowrap; flex-shrink: 0; color: var(--ink); text-decoration: none; }
.tag-title .logo { height: 1.5em; width: auto; }
/* the wordmark's leading "g" is the g-snail mark — an oversized initial
   sitting on the text baseline: the spiral bowl rests on the baseline,
   the tail hangs below as a descender, the eye-stalks rise above, and
   the rest of "astropod" follows as text. The snail is an inline pic SVG
   ({{gsnail}}, the only svg in the title); inline (not flex) flow so the
   vertical-align baseline trick lands the bowl on the text baseline. */
.tag-title svg { height: 2.2em; width: auto; vertical-align: -0.85em; margin-right: -0.12em; }
/* Wrap the nav links too: on a phone the whole [product][federation][pricing]
   [security] strip won't fit one line, so let the links flow onto a second row
   rather than overflow the header. */
.tag-nav { display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; }
.tag-nav a {
  color: var(--ink);
  text-decoration: none;
}
.tag-nav a::before { content: "["; color: var(--faint); }
.tag-nav a::after  { content: "]"; color: var(--faint); }
.tag-nav a:hover { background: var(--ink); color: var(--paper); }
.tag-nav a.on { font-weight: 700; text-decoration: underline; }
.tag-spacer { flex: 1; }
.tag-user { font-size: 12px; color: var(--grey); display: inline-flex; align-items: center; gap: 6px; }
.tag-avatar { border-radius: 50%; vertical-align: middle; object-fit: cover; }
.tag-auth, .tag-auth button {
  font-family: inherit;
  font-variation-settings: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: underline;
}
.tag-auth { display: inline; }

/* ---- marketing CTAs in the title block (signed-out, cloud) ----
   The nav links wear [brackets]; the CTAs wear (parens) to read as the
   same engineering-drawing family while standing apart as actions. */
.tag-ctas { display: inline-flex; align-items: center; gap: 0.4rem; }
.tag-cta {
  font-variation-settings: var(--mono);
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 0.1rem 0.55rem;
  white-space: nowrap;
}
.tag-cta::before { content: "("; color: var(--faint); margin-right: 0.3em; }
.tag-cta::after  { content: ")"; color: var(--faint); margin-left: 0.3em; }
.tag-cta:hover { background: var(--ink); color: var(--paper); }
.tag-cta:hover::before, .tag-cta:hover::after { color: var(--paper); }
.tag-cta-primary { background: var(--ink); color: var(--paper); }
.tag-cta-primary::before, .tag-cta-primary::after { color: var(--paper); }
.tag-cta-primary:hover { opacity: 0.82; }

/* ---- phone header: two tidy rows ----
   The base flex-wrap (above) keeps the bar from overflowing, but on a phone
   the wordmark, nav, and both CTAs each want their own line — too much sticky
   chrome above the content. Compact it to two rows: brand + the primary CTA on
   top, the nav strip on its own row beneath. The secondary "book a demo" CTA
   and the theme toggle are dropped from the sticky bar here so the brand + the
   one conversion action always fit a single line even on a ~360px screen
   (book-a-demo still sits in the hero; the theme toggle returns at ≥640px and
   the chosen theme persists via cookie). */
@media (max-width: 640px) {
  .tag { column-gap: 0.6rem; }
  /* nav onto its own full-width second row (order pushes it past the row-1
     items; flex-basis:100% makes it claim the whole line). */
  .tag-nav { order: 1; flex-basis: 100%; gap: 0.3rem 0.3rem; }
  /* keep only the primary action in the sticky bar; hide the secondary CTA. */
  .tag-ctas .tag-cta:not(.tag-cta-primary) { display: none; }
  .tag-theme { display: none; }
}

/* ---- status line (footer) ---- */
.status {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.35rem 1.25rem;
  border-top: 1px solid var(--ink);
  font-size: 11.5px;
  color: var(--grey);
}
.status-spacer { flex: 1; }

/* ---- light/dark toggle (in the title block) ---- */
/* The toggle's <form> wrapper. Margin lives here (not inline) so the phone
   header media query can hide it with display:none — an inline style would
   outrank the rule. No display is set: as a direct flex child the form is a
   flex item regardless, so the media query's display:none is uncontested. */
.tag-theme { margin: 0; }
.theme-toggle {
  background: none;
  border: 1px solid var(--hair);
  cursor: pointer;
  padding: 1px 4px;
  line-height: 0;
  display: inline-flex;
  align-items: center;
}
/* The glyph is now inlined as pic-generated SVG instead of an <img>,
   so the icon picks up the current ink colour and theme tokens without
   a second HTTP fetch. Size selector matches the original 13×13 chip. */
.theme-toggle svg { height: 13px; width: 13px; display: block; color: var(--ink); }
.theme-toggle:hover { border-color: var(--ink); }

/* ---- wobbly pic clock (next to the theme toggle) ---- */
.tag-clock { display: inline-flex; margin: 0; }
.clock-toggle {
  background: none;
  border: 1px solid var(--hair);
  cursor: pointer;
  padding: 1px 4px;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* WCAG 2.5.8: keep the tap target at least 24x24 even though the glyph is 16px. */
  min-width: 24px;
  min-height: 24px;
}
.clock-toggle:hover { border-color: var(--ink); }
/* Ink (currentColor) in both themes so the glyph stays legible like the theme
   toggle; a touch larger than the 13px toggle so the hands read. */
.clock-toggle svg { height: 16px; width: 16px; display: block; color: var(--ink); }
/* Off reads slightly softened; full ink when switched on or on hover so its
   state is obvious. */
.clock-toggle:not(.on) svg { opacity: 0.7; }
.clock-toggle.on svg, .clock-toggle:hover svg { opacity: 1; }

/* ---- corner-clock: the big wobbly pic clock parked in the empty top-right
   corner of the content column (every page) when the toggle is on. Anchored
   to .sheet and absolutely positioned so it overlays the corner without
   reflowing the page below. ---- */
.corner-clock {
  position: absolute;
  top: 1rem;
  right: -220px; /* push out past the content column into the empty corner */
  width: min(190px, 38vw);
  z-index: 2;
  color: var(--ink);
  pointer-events: none;
}
/* On viewports too narrow to spare the margin, pull it back to the column edge
   so it never overflows off-screen. */
@media (max-width: 1220px) { .corner-clock { right: 0.5rem; } }
.corner-clock .clock-live { display: block; }
.corner-clock svg { display: block; width: 100%; height: auto; }

/* ---- clock-style picker: the segmented control on the profile that sets
   the corner-clock mode directly (the same gst_clock cookie the top-bar
   glyph cycles). ---- */
.clock-style { display: inline-flex; flex-wrap: wrap; gap: 0; margin-top: .4rem; border: 1px solid var(--hair); border-radius: 2px; overflow: hidden; }
.clock-style .seg {
  background: none;
  border: 0;
  border-left: 1px solid var(--hair);
  cursor: pointer;
  padding: .35rem .7rem;
  font: inherit;
  color: var(--grey);
}
.clock-style .seg:first-child { border-left: 0; }
.clock-style .seg:hover { color: var(--ink); background: var(--hair); }
.clock-style .seg.on { color: var(--paper); background: var(--ink); }
.clock-style .seg.on .muted { color: var(--paper); opacity: .7; }