/* shared.css — design tokens, reset, nav, buttons, and the logo mark's CSS
   hooks, loaded by every page via <link rel="stylesheet" href="shared.css">.
   Plain CSS, no build step — this file is hand-edited and deployed as-is.

   The two exported logo files (logo-dark.svg, logo-animated.svg) reference
   these classes (.ps/.st/.st2/.a1/.a2/.a3/.gl/.gr) on their bulb circles but
   ship with no CSS of their own — inlining them only renders correctly once
   this stylesheet is loaded on the page. See the "Logo mark" section below. */

:root {
  /* Timing Tower direction — see event_calendar.html for the full
     rationale. --amber/--green/--red stay the tree's literal bulb
     colors; --accent is the separate safety-yellow UI accent. */
  --track:      #111315;
  --panel:      #1B1E21;
  --panel-2:    #24282C;
  --hairline:   #34383C;
  --text:       #F2F0EA;
  --text-dim:   #8D9298;
  --accent:     #FFC72C;
  --accent-ink: #17140A;
  --amber:      #F5A623;
  --green:      #2ECC71;
  --red:        #D62828;
  --unlit:      #34383D;
  --mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace;
  --sans: "Titillium Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Oswald", "Segoe UI Condensed", var(--sans);
  --nav-h: 56px;

  /* Corner radius — three tiers, and only three. Every rounded thing on
     the site picks one of these rather than inventing its own value, so
     a button on the landing page and a button on a tool page agree.
       chip    small inline markers: badges, event bars, code spans
       control anything you click or type into: buttons, inputs, selects
       surface anything that holds content: cards, panels, popovers
     Bulbs and status dots stay at 50%; they are circles, not rounded
     rectangles, and are not part of this scale. */
  --r-chip:    2px;
  --r-control: 3px;
  --r-surface: 6px;

  /* Mobile chrome budget — see the "Setup chrome" section below. */
  --setup-bar-h: 38px;
}

* { box-sizing: border-box; }

/* 100dvh, not 100vh: on iOS Safari the address bar makes 100vh taller
   than the visible viewport, so a 100vh floor pushes the page down and
   the layout jumps as the bar hides and shows. dvh tracks the space
   actually on screen. */
html, body {
  margin: 0;
  padding: 0;
  background: var(--track);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

a { color: inherit; text-decoration: none; }

::selection { background: rgba(255,199,44,0.35); }

/* ===== Buttons (shared across marketing + dashboard pages) ===== */

.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-control);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  padding: 12px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #ffd35c; }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--hairline); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-secondary:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-secondary { transition: none; }
}

/* ===== Logo mark ===== */
/* Inline logo-dark.svg / logo-animated.svg per their README. Wrap the
   <svg> in one of these two containers depending on context. */

.site-logo .ps, .site-logo .st, .site-logo .st2 { fill: var(--text); }

/* Hero use of logo-animated.svg: plays the staging sequence once, then
   holds on the same "green, all bulbs settled" state the static
   logo-dark.svg ships with. Matches the documented 6.5s timing:
   left lane stages at 1s, right at 2s, ambers at 3.0/3.5/4.0s, green at
   4.5s and holds. */
.hero-logo .ps { fill: var(--text); }
.hero-logo .st, .hero-logo .st2 { fill: var(--unlit); animation: drd-stage 0.4s ease forwards; }
.hero-logo .st { animation-delay: 1s; }
.hero-logo .st2 { animation-delay: 2s; }
.hero-logo .a1, .hero-logo .a2, .hero-logo .a3 {
  fill: var(--amber);
  opacity: 0;
  animation: drd-amber 0.9s ease forwards;
}
.hero-logo .a1 { animation-delay: 3.0s; }
.hero-logo .a2 { animation-delay: 3.5s; }
.hero-logo .a3 { animation-delay: 4.0s; }
.hero-logo .gl, .hero-logo .gr { opacity: 0; animation: drd-green 0.5s ease forwards; animation-delay: 4.5s; }
.hero-logo .gl { --gl-opacity: 0.22; }
.hero-logo .gr { --gl-opacity: 1; }

@keyframes drd-stage {
  from { fill: var(--unlit); }
  to   { fill: var(--text); }
}
@keyframes drd-amber {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0.32; }
}
@keyframes drd-green {
  from { opacity: 0; }
  to   { opacity: var(--gl-opacity); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo .st, .hero-logo .st2 { fill: var(--text); animation: none; }
  .hero-logo .a1, .hero-logo .a2, .hero-logo .a3 { opacity: 0.32; animation: none; }
  .hero-logo .gl { opacity: 0.22; animation: none; }
  .hero-logo .gr { opacity: 1; animation: none; }
}

/* ===== Navigation ===== */

/* Full nav: landing page, dashboard home, and informational pages
   (about/faq/privacy/contact). Logo, a Dashboard + About link, and the
   account widget. Single line, capped height, condenses to a hamburger
   below 760px. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--nav-h);
  padding: 0 20px;
  background: rgba(17,19,21,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.site-nav .brand { display: flex; align-items: center; gap: 8px; }
.site-nav .brand svg { display: block; width: 30px; height: auto; }
.site-nav .brand .wordmark { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; }
.site-nav .brand .wordmark .net { font-family: var(--mono); font-size: 9px; color: var(--accent); font-weight: 600; }

.site-nav .links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  flex: 1;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav .links::-webkit-scrollbar { display: none; }
.site-nav .links a { white-space: nowrap; padding: 6px 2px; border-bottom: 2px solid transparent; }
.site-nav .links a:hover, .site-nav .links a.current { color: var(--text); border-bottom-color: var(--accent); }

.site-nav .nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.site-nav .nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  color: var(--text);
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 760px) {
  .site-nav .links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--hairline);
    padding: 6px 20px;
  }
  .site-nav .links a { padding: 10px 0; border-bottom: 1px solid var(--hairline); width: 100%; }
  .site-nav .links a:last-child { border-bottom: none; }
  .site-nav.nav-open .links { display: flex; }
  .site-nav .nav-toggle { display: flex; }
}

/* Minimal nav: the five dashboard/tool pages. Small logo mark linking
   home, the page's own name, and the account widget only — maximizes
   above-the-fold data space, especially on mobile. */
.dash-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 48px;
  padding: 0 14px;
  background: rgba(17,19,21,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.dash-nav .brand { display: flex; align-items: center; gap: 8px; }
.dash-nav .brand svg { display: block; width: 22px; height: auto; }
.dash-nav .page-title { font-family: var(--display); font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }

/* ===== Account widget (used inside both nav variants) ===== */
.auth-widget { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 12px; }
.auth-btn {
  background: var(--panel);
  border: 1px solid var(--hairline);
  color: var(--text);
  padding: 6px 12px;
  border-radius: var(--r-control);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}
.auth-btn:hover { border-color: var(--accent); }
.auth-btn.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
#authSignedIn { display: none; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Truncate a long email rather than let it set the widget's width — on
   the tool pages the account widget shares one header row with the Setup
   toggle and the staging tree, and an untruncated address there pushed
   them off the right edge. */
#authUserLabel {
  color: var(--text-dim);
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Shared footer ===== */
.site-footer {
  text-align: center;
  padding: 30px 20px 36px;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.6;
  border-top: 1px solid var(--hairline);
}
.site-footer .disclaimer { max-width: 480px; margin: 0 auto 16px; }
.site-footer .footer-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; }
.site-footer .footer-links a:hover { color: var(--accent); }

/* ===== Setup chrome (the five tool pages) ===== */
/* One collapsible model shared by all five tools, replacing the three
   different ones the pages used to carry: two had a Setup toggle whose
   panel held different amounts of the controls, and two had no toggle at
   all. The problem this solves is specifically a phone one. With a
   signed-in user the old header stack (a header row wrapping to three or
   four lines, an open control panel, and on the Classic Dashboard a
   second filter row that the Setup toggle did not even cover) ate most
   of a 844px viewport before the first timeslip appeared, and because
   the header is sticky a large share of that stayed pinned while you
   scrolled.

   Two ideas do the work:

   1. Everything the user configures lives inside .controls-panel. No
      control sits outside it any more, so one tap genuinely clears the
      chrome rather than clearing some of it.
   2. Collapsing swaps the panel for a single line that says what is
      currently loaded. The old collapsed state showed nothing, so you
      had to reopen the panel just to check which day you were looking
      at, which is why collapsing it did not stick.

   The panel keeps the 1fr -> 0fr grid transition the two dashboards
   already used rather than a max-height guess: these rows stack tall on
   a phone and a max-height guessed too short silently clips the buttons
   off the bottom. */

.setup-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 900px;
  margin: 8px auto 0;
}

.toggle-controls-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  min-height: var(--setup-bar-h);
  padding: 6px 12px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.toggle-controls-btn:hover { border-color: var(--accent); background: var(--panel-2); }
.toggle-controls-btn:active { transform: translateY(1px); }
.toggle-controls-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The caret is the only part that moves, so the label does not shift
   under the thumb as the panel opens and closes. */
.toggle-controls-btn .setup-caret {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-dim);
  transition: transform 0.25s ease;
}
.toggle-controls-btn[aria-expanded="false"] .setup-caret { transform: rotate(-180deg); }

/* What is loaded right now, shown only while the panel is shut. Mixed
   case and dimmed so it reads as status beside the uppercase label
   rather than as a second button. */
.toggle-controls-btn .setup-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-dim);
}
.toggle-controls-btn[aria-expanded="true"] .setup-summary { display: none; }

.controls-panel {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
}
.controls-panel.collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}
/* The inner wrapper carries the overflow so the .controls top margin
   collapses away with the panel instead of holding the row open. */
.controls-panel-inner { min-height: 0; overflow: hidden; }

.controls {
  max-width: 900px;
  margin: 10px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .toggle-controls-btn,
  .toggle-controls-btn .setup-caret,
  .controls-panel { transition: none; }
}

/* One breakpoint for the tool chrome, replacing the 420/480/560/600/640
   spread the five pages each picked for themselves. Below it every
   control goes full width in a single column and every tap target
   clears 40px. */
@media (max-width: 600px) {
  .controls { flex-direction: column; align-items: stretch; gap: 8px; }
  .controls > * { width: 100%; }
  .controls select,
  .controls input[type="text"],
  .controls input[type="date"],
  .controls button { min-height: 40px; }
  .toggle-controls-btn { min-height: 40px; }
}

/* ===== Tool page header ===== */
/* The five tool pages carried four near-identical copies of these rules
   in their own <style> blocks; .title-block and .header-right were
   byte-identical across three of them. They live here now, scoped to
   .tool-header so they cannot reach the <header> on the marketing and
   informational pages, which is a different element with a different
   job. Each page sets its own --content-max to match the width of the
   data it renders below (the log sheet is wider than a pair of lanes). */
.tool-header {
  --content-max: 1180px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(11,13,16,0.93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
  padding: 10px 20px;
}
.tool-header .header-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.tool-header .title-block {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.tool-header .header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-left: auto;
}
.tool-header .setup-bar,
.tool-header .controls { max-width: var(--content-max); }

/* Phone header. The old row wrapped into three or four lines once a
   signed-in user's email and buttons joined the Home button, the title
   and the tree in it. Here the title and its subtitle collapse onto one
   line, the subtitle truncates rather than wrapping, and the account
   controls sit on their own row underneath at full tap size instead of
   fighting the title for horizontal space. */
@media (max-width: 600px) {
  .tool-header { padding: 8px 14px; }
  .tool-header .header-row { gap: 6px 10px; }
  .tool-header .title-block { flex: 1 1 100%; align-items: baseline; }
  .tool-header .title-block .sub {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tool-header .header-right {
    flex: 1 1 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
  .tool-header .auth-btn { min-height: 36px; }
}