/* colorcal.app — shared stylesheet for the static content pages
   (index / guide / patterns) and the chrome that wraps the /match tool.

   GitHub-dark palette, dark only. Token names and values are copied
   verbatim from the rest of the show-app suite so a component lifted from
   a sibling repo drops in without retuning. */

/* ===================================================================
   TOKENS
   Kept byte-identical to show-app.com / testpattern.app. If a value
   changes here it has to change across the suite, not just locally.
   =================================================================== */
:root{
  --bg:#0d1117;
  --bg2:#161b22;
  --bg3:#21262d;
  --bg4:#30363d;
  --ink:#e6edf3;
  --ink2:#c9d1d9;
  --dim:#8b949e;
  --faint:#6e7681;
  --rule:#30363d;
  --accent:#58a6ff;
  --accent-bg:rgba(56,139,253,0.15);
  --accent-border:rgba(56,139,253,0.4);
  --green:#3fb950;
  --amber:#d29922;
  --red:#f85149;
  --font-ui:'Manrope',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Reading measure. Long-form prose past ~70 characters per line gets
     hard to track back to the next line, which matters on the guide. */
  --measure:68ch;
}

/* ===================================================================
   BASE
   =================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* svh tracks the actual visible viewport on mobile (excludes browser
     chrome). vh fallback for browsers that don't support it. */
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

img,svg{max-width:100%}

code,kbd{
  font-family:var(--font-mono);
  font-size:0.88em;
  background:var(--bg3);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:1px 5px;
  color:var(--ink2);
  /* Long ids like `neutral-hex` must be able to break rather than
     forcing the whole page to scroll sideways on a phone. */
  overflow-wrap:anywhere;
}

hr{
  border:0;
  border-top:1px solid var(--rule);
  margin:40px 0;
}

/* ===================================================================
   ACCESSIBILITY
   =================================================================== */

/* Visible focus everywhere. :focus-visible keeps it off mouse clicks
   but guarantees keyboard users can always see where they are. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:3px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:50;
  background:var(--bg3);
  border:1px solid var(--accent-border);
  border-radius:6px;
  color:var(--ink);
  padding:10px 14px;
  font-family:var(--font-mono);
  font-size:12px;
}
.skip-link:focus{left:8px;top:8px;text-decoration:none}

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ===================================================================
   SITE HEADER + NAV
   =================================================================== */
.site-head{
  border-bottom:1px solid var(--rule);
  background:var(--bg);
  /* max() picks the larger of the design padding or the device's safe-area
     inset so content clears the notch on notched phones. */
  padding:14px max(20px,env(safe-area-inset-right)) 14px max(20px,env(safe-area-inset-left));
}
.site-head-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
}
.brand:hover{text-decoration:none}
.brand-mark{
  width:30px;height:30px;
  border-radius:7px;
  outline:1px solid var(--rule);
  display:block;flex:none;
}
.wordmark{
  font-size:19px;font-weight:800;letter-spacing:-0.02em;
  color:var(--ink);
}
.wordmark .ext{
  font-family:var(--font-mono);
  color:var(--dim);
  font-size:14px;
  font-weight:500;
  letter-spacing:0;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
}
.site-nav a{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--dim);
  padding:7px 10px;
  border-radius:6px;
  border:1px solid transparent;
}
.site-nav a:hover{color:var(--ink);background:var(--bg2);text-decoration:none}
.site-nav a[aria-current="page"]{
  color:var(--ink);
  background:var(--bg3);
  border-color:var(--rule);
}
.site-nav a.nav-cta{
  color:var(--accent);
  background:var(--accent-bg);
  border-color:var(--accent-border);
}
.site-nav a.nav-cta:hover{background:rgba(56,139,253,0.25);border-color:var(--accent)}

/* ===================================================================
   PAGE LAYOUT
   =================================================================== */
main{
  flex:1;
  width:100%;
  max-width:860px;
  margin:0 auto;
  padding:48px max(20px,env(safe-area-inset-right)) 72px max(20px,env(safe-area-inset-left));
}

section{margin-top:56px}
section:first-of-type{margin-top:0}

/* ===================================================================
   TYPOGRAPHY
   =================================================================== */
h1{
  font-size:32px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0 0 14px;
  max-width:var(--measure);
}
h2{
  font-size:21px;
  line-height:1.3;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0 0 12px;
  max-width:var(--measure);
}
h3{
  font-size:16px;
  line-height:1.4;
  font-weight:700;
  margin:0 0 8px;
  max-width:var(--measure);
}
p{
  margin:0 0 14px;
  color:var(--ink2);
  max-width:var(--measure);
}
p:last-child{margin-bottom:0}

.lede{
  font-size:17px;
  line-height:1.55;
  color:var(--ink2);
  max-width:var(--measure);
}

/* Small uppercase mono label. Used above section headings so a skimmer
   can find the shape of the page without reading it. */
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--faint);
  margin:0 0 10px;
}

.muted{color:var(--dim)}
.small{font-size:13px}

ul.plain{
  margin:0 0 14px;
  padding-left:20px;
  color:var(--ink2);
  max-width:var(--measure);
}
ul.plain li{margin-bottom:6px}

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  border-radius:6px;
  border:1px solid var(--rule);
  background:var(--bg3);
  color:var(--ink2);
  /* 44px min height keeps this a comfortable touch target on phones. */
  padding:12px 18px;
  min-height:44px;
  transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover{background:var(--bg4);color:var(--ink);text-decoration:none}
.btn-primary{
  background:var(--accent-bg);
  border-color:var(--accent-border);
  color:var(--accent);
}
.btn-primary:hover{background:rgba(56,139,253,0.25);border-color:var(--accent);color:var(--accent)}
.btn-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:22px;
}
.btn-note{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--faint);
  margin-top:14px;
}

/* ===================================================================
   HERO
   =================================================================== */
.hero{padding-top:8px}
.hero h1{font-size:38px}
.hero-tag{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--green);
  background:rgba(63,185,80,0.12);
  border:1px solid rgba(63,185,80,0.35);
  border-radius:999px;
  padding:4px 12px;
  display:inline-block;
  margin-bottom:16px;
}

/* ===================================================================
   STEPS
   Numbered three-step loop on the landing page. The counter lives in
   CSS so the markup stays a plain <ol> and reads correctly to a screen
   reader without duplicated "1." text.
   =================================================================== */
.steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
  counter-reset:step;
}
.steps li{
  counter-increment:step;
  background:var(--bg2);
  border:1px solid var(--rule);
  border-radius:10px;
  padding:18px 20px 18px 58px;
  position:relative;
}
.steps li::before{
  content:counter(step);
  position:absolute;
  left:18px;top:17px;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--bg3);
  border:1px solid var(--rule);
  color:var(--dim);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
}
.steps h3{margin-bottom:5px}
.steps p{font-size:14px;margin:0}

/* ===================================================================
   CARDS
   auto-fit + minmax gives 2-up on desktop and 1-up on phones with no
   breakpoint of its own.
   =================================================================== */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:14px;
}
.card{
  background:var(--bg2);
  border:1px solid var(--rule);
  border-radius:10px;
  padding:18px 20px;
  display:block;
  color:inherit;
  transition:border-color 0.15s ease, background 0.15s ease;
}
.card p{font-size:14px;margin:0;color:var(--ink2)}
.card p + p{margin-top:10px}
.card h3{color:var(--ink)}
a.card:hover{
  border-color:rgba(63,185,80,0.5);
  background:var(--bg3);
  text-decoration:none;
}
.card-link{
  display:inline-block;
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--accent);
}

/* ===================================================================
   CHECKLIST
   The skimmable version of the guide. Each row jumps to the section
   that explains why it matters, so the page works as a checklist and
   as an explainer without duplicating the content.
   =================================================================== */
.checklist{
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid var(--rule);
  border-radius:10px;
  overflow:hidden;
  background:var(--bg2);
}
.checklist li + li{border-top:1px solid var(--rule)}
.checklist a{
  display:flex;
  gap:12px;
  align-items:baseline;
  padding:13px 18px;
  color:var(--ink2);
  min-height:44px;
}
.checklist a:hover{background:var(--bg3);color:var(--ink);text-decoration:none}
.checklist .tick{
  font-family:var(--font-mono);
  color:var(--green);
  flex:none;
  font-size:13px;
}
.checklist .what{font-weight:600;color:var(--ink)}
.checklist .hint{color:var(--dim);font-size:13px}

/* ===================================================================
   GUIDE RULES
   One block per capture rule: what to do, then why it matters. The
   "why" is styled distinctly so someone who only wants the instruction
   can skip it, and someone learning can find it every time.
   =================================================================== */
.rule{
  border-top:1px solid var(--rule);
  padding-top:26px;
  margin-top:26px;
}
.rule:first-of-type{border-top:0;padding-top:0;margin-top:0}
.rule h3{
  font-size:18px;
  display:flex;
  gap:10px;
  align-items:baseline;
}
.rule h3 .num{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--faint);
  font-weight:500;
  flex:none;
}
.why{
  border-left:2px solid var(--bg4);
  padding-left:14px;
  margin-top:12px;
}
.why-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--faint);
  display:block;
  margin-bottom:4px;
}
.why p{font-size:14px;color:var(--dim);margin-bottom:8px}

/* ===================================================================
   CALLOUTS
   .note  — neutral aside
   .limit — the honest-limitation box. Amber, not red: it is a boundary
            on what the tool claims, not a warning that something broke.
   =================================================================== */
.note,
.limit{
  border:1px solid var(--rule);
  border-left-width:3px;
  border-radius:8px;
  background:var(--bg2);
  padding:16px 18px;
  margin:20px 0;
}
.note{border-left-color:var(--accent)}
.limit{border-left-color:var(--amber)}
.note h3,
.limit h3{font-size:14px;margin-bottom:6px}
.note p,
.limit p{font-size:14px;margin-bottom:0;color:var(--ink2)}
.note p + p,
.limit p + p{margin-top:10px}

/* ===================================================================
   TABLE
   Wrapped in .table-wrap so a wide table scrolls inside itself instead
   of making the whole page scroll sideways on a phone.
   =================================================================== */
.table-wrap{
  overflow-x:auto;
  border:1px solid var(--rule);
  border-radius:10px;
  background:var(--bg2);
  -webkit-overflow-scrolling:touch;
}
table{
  border-collapse:collapse;
  width:100%;
  min-width:520px;
  font-size:14px;
}
th,td{
  text-align:left;
  padding:11px 16px;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
th{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--faint);
  font-weight:500;
  white-space:nowrap;
}
td{color:var(--ink2)}
tbody tr:last-child td{border-bottom:0}

/* ===================================================================
   FOOTER
   Structure and class names mirror show-app.com so the suite footer
   stays recognisable across every property. Markup is rendered by
   src/chrome/footer.js.
   =================================================================== */
.footer{
  flex:0 0 auto;
  min-height:28px;
  background:var(--bg2);
  border-top:1px solid var(--rule);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--dim);
  padding:6px max(16px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.footer a{color:var(--dim);text-decoration:none}
.footer a:hover{text-decoration:underline;color:var(--ink2)}
.foot-right{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.foot-right .sep{color:var(--faint)}
.foot-right [data-build]{color:var(--faint)}
.foot-right [data-build]:hover{color:var(--dim);cursor:help}
.suite-badges{display:inline-flex;gap:5px;flex-wrap:wrap;align-items:center}
.suite-badges .badge{
  padding:2px 8px;border-radius:3px;
  font-family:var(--font-mono);font-size:10px;
  color:var(--dim);background:var(--bg3);
  border:1px solid var(--rule);text-decoration:none;
  white-space:nowrap;
  letter-spacing:0;
}
.suite-badges .badge:hover{color:var(--ink);border-color:var(--bg4);text-decoration:none}
.suite-badges .badge.current{
  background:rgba(63,185,80,0.15);
  border-color:rgba(63,185,80,0.4);
  color:var(--green);
  pointer-events:none;
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:720px){
  /* Build metadata is the first thing to go: it is diagnostic, and the
     suite badges are the part that has to survive on a phone. */
  .foot-right [data-build]{display:none}
  .foot-right .sep{display:none}
}

@media (max-width:560px){
  body{font-size:15px}
  main{padding:32px max(16px,env(safe-area-inset-right)) 56px max(16px,env(safe-area-inset-left))}
  section{margin-top:44px}
  h1{font-size:27px}
  .hero h1{font-size:29px}
  h2{font-size:19px}
  .lede{font-size:16px}
  .site-head-inner{gap:10px}
  .wordmark{font-size:17px}
  .wordmark .ext{font-size:13px}
  .steps li{padding:16px 16px 16px 52px}
  .steps li::before{left:15px;top:15px}
  .checklist a{padding:12px 14px;flex-direction:column;gap:3px}
  .btn{width:100%;justify-content:center}
  .btn-row{gap:8px}
}

/* ===================================================================
   MOTION
   Every transition here is decorative. Honour the OS preference.
   =================================================================== */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ===================================================================
   WORKFLOW CARDS  (landing page)
   Added after the existing blocks on purpose: nothing above this line
   is modified, so pages owned by other work are unaffected. The
   reduced-motion block above still wins over the transitions declared
   here because it uses !important.

   One card per workflow. Exactly one workflow is implemented, so its
   card is an <a> and every other card is an inert <div>. That
   difference is the accessibility mechanism, not just a visual one:
   the unavailable cards are not in the tab order, cannot be activated,
   and each states "Not available yet" as real text. The dashed border
   is a second, non-colour signal on top of that.
   =================================================================== */
.wf-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  /* Same auto-fit trick as .cards: 2-up where there is room, 1-up on a
     phone, without owning a breakpoint. */
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:14px;
  margin-top:20px;
}
/* The one built workflow always spans the full row so it reads as the
   primary path even when the grid is 2-up. */
.wf-item-live{grid-column:1 / -1}

.wf-card{
  display:block;
  height:100%;
  background:var(--bg2);
  border:1px solid var(--rule);
  border-radius:10px;
  padding:18px 20px;
  color:inherit;
}

/* --- the built workflow --------------------------------------------- */
a.wf-card-live{
  border-color:rgba(63,185,80,0.4);
  transition:border-color 0.15s ease, background 0.15s ease;
}
a.wf-card-live:hover{
  border-color:rgba(63,185,80,0.7);
  background:var(--bg3);
  text-decoration:none;
}
.wf-card-live h3{font-size:19px;line-height:1.35;color:var(--ink)}
.wf-card-live p{color:var(--ink2)}

/* --- workflows that are not built yet -------------------------------- */
.wf-card-soon{
  border-style:dashed;
  background:transparent;
  cursor:default;
}
.wf-card-soon h3{color:var(--ink2)}
.wf-card-soon p{color:var(--dim)}

.wf-card h3{margin:0 0 8px}
.wf-card p{font-size:14px;margin:0}

/* --- status pill ------------------------------------------------------ */
.wf-status{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border-radius:999px;
  padding:3px 10px;
  margin-bottom:12px;
}
.wf-status-live{
  color:var(--green);
  background:rgba(63,185,80,0.12);
  border:1px solid rgba(63,185,80,0.35);
}
.wf-status-soon{
  color:var(--dim);
  background:var(--bg3);
  border:1px solid var(--rule);
}

/* --- the three axes that define a workflow ---------------------------- */
.wf-axes{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 14px;
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px solid var(--rule);
  font-size:13px;
}
.wf-axes dt{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--faint);
  white-space:nowrap;
  /* dt sits on the taller dd's baseline row; nudge it back into line. */
  line-height:1.5;
  padding-top:1px;
}
.wf-axes dd{
  margin:0;
  color:var(--ink2);
  line-height:1.5;
}
.wf-card-soon .wf-axes dd{color:var(--dim)}

.wf-cta{
  display:inline-block;
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  color:var(--accent);
}

@media (max-width:560px){
  .wf-card{padding:16px}
  .wf-card-live h3{font-size:17px}
  /* Label above value: two columns squeezes long axis values into a
     three-word-per-line column on a narrow phone. */
  .wf-axes{grid-template-columns:1fr;gap:2px}
  .wf-axes dd + dt{margin-top:8px}
}