/* ==========================================================================
   ID8 SHARED SHELL v1

   The house style, factored out of public/styles.css so a tool can sit
   inside the ID8 family without re-implementing (or drifting from) the
   brand. Built to be adopted by BOARDS02, STORY, CAMERA and the rest —
   nothing in this file knows anything about ACT.

   HOW TO ADOPT IT
   Load this BEFORE the tool's own stylesheet:

     <link rel="stylesheet" href="/_shell/id8-shell.css" />
     <link rel="stylesheet" href="styles.css" />

   Then use the two landmarks:

     <header class="id8-bar">
       <a class="id8-bar-mark" href="/">ID8</a>
       <span class="id8-bar-sep">/</span>
       <span class="id8-bar-tool">ACT<em>.ID8</em></span>
       <span class="id8-bar-tag">Beta</span>       <!-- optional -->
     </header>

     ... the tool ...

     <footer class="id8-footer">
       <p class="id8-footer-mark"><a href="/">ID8</a></p>
       <p class="id8-footer-tagline">Ideas in Motion</p>
       <p class="id8-footer-oatz">by <a href="https://oatz.com" ...>OATZ</a></p>
       <a class="id8-footer-email" href="mailto:Aaron@oatz.com">Aaron@oatz.com</a>
     </footer>

   DESIGN INTENT — WHY THE HEADER IS A BAR, NOT A HERO
   The hierarchy is ID8 -> TOOL -> the thing you came to do, and the third
   one is why anybody is here. A full homepage hero would establish the
   house by pushing the work below the fold, which inverts that. So the bar
   is one line: the wordmark carries the family, the breadcrumb carries the
   tool, and everything below the rule belongs to the tool.

   Tokens are the same five as public/styles.css. Defined here with
   fallbacks so a tool that already declares them keeps its own, and a tool
   that doesn't gets the house values for free.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  --paper: #fbfaf8;
  --ink: #14161a;
  --ink-dim: #62666f;
  --line: rgba(20, 22, 26, 0.12);
  --accent: #00a8cc;
  --accent-dim: rgba(0, 168, 204, 0.08);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Shared rhythm. Tools should reach for these rather than inventing
     their own spacing scale, which is how families drift apart. */
  --id8-measure: 720px;
  --id8-gutter: 6vw;
}

/* --- Header bar ---------------------------------------------------------- */

.id8-bar {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  max-width: var(--id8-measure);
  margin: 0 auto;
  padding: 1.5rem var(--id8-gutter) 1.1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font);
}

/* The wordmark is the only place the accent appears in the shell. It is
   the brand doing its job in the smallest space that still reads as ID8. */
.id8-bar-mark {
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.id8-bar-mark:hover,
.id8-bar-mark:focus-visible { opacity: 0.7; outline: none; }

.id8-bar-sep {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--line);
}

.id8-bar-tool {
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.id8-bar-tool em { font-style: normal; font-weight: 500; }

.id8-bar-tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25em 0.6em;
  transform: translateY(-1px);
}

/* The route home is deliberately quiet — present for anyone looking for it,
   never competing with the tool's own primary action. */
.id8-bar-home {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.15s ease;
}

.id8-bar-home:hover,
.id8-bar-home:focus-visible { color: var(--accent); outline: none; }

/* --- Footer -------------------------------------------------------------- */

.id8-footer {
  max-width: var(--id8-measure);
  margin: 0 auto;
  padding: 4vh var(--id8-gutter) 6vh;
  border-top: 1px solid var(--line);
  font-family: var(--font);
}

.id8-footer-mark {
  margin: 0;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.id8-footer-mark a { color: inherit; text-decoration: none; }

.id8-footer-tagline {
  margin: 0.2em 0 0;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink-dim);
}

.id8-footer-oatz {
  margin: 0.6em 0 0;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ink-dim);
}

.id8-footer-oatz a { color: var(--ink-dim); text-decoration: underline; }

.id8-footer-email {
  display: inline-block;
  margin-top: 0.9em;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.id8-footer-email:hover,
.id8-footer-email:focus-visible { color: var(--accent); outline: none; }

@media (max-width: 520px) {
  .id8-bar { padding-top: 1.1rem; }
  .id8-bar-tag { display: none; }
}