/* ganttmatic.com: the one stylesheet for every page.
 *
 * Tokens. The colour values are copied from the product's :root block in appsscript/Styles.html
 * (the source of truth, design system "custom-tokens"); the site is hosted separately, so it keeps
 * its own copy. If a colour changes in Styles.html, change it here too. Spacing, radius and type
 * come from the design system's scales (4px grid: 4 8 12 16 24 32 48 64; type 12 14 16 20 24 32 40).
 * No colour, spacing, radius or font-size literal appears below the :root block.
 *
 * Breakpoint: one, named "narrow" = max-width 720px. CSS custom properties cannot be used in media
 * queries, so the width is written once, in the single @media rule at the end of this file.
 *
 * Contrast (WCAG AA): body text uses --ink (#1f2933, 14.6:1 on white) or --ink-2 (#52606d, 6.4:1).
 * --ink-3 (#9aa5b1, 2.6:1) is never used for text. Links use --accent (#2f4858, 9.7:1).
 * --warn on --warn-bg is 4.8:1. --accent-ink on --accent is 9.7:1.
 */
:root{
  /* colour: product tokens (appsscript/Styles.html) */
  --bg:#f5f6f8; --panel:#fff; --ink:#1f2933; --ink-2:#52606d; --ink-3:#9aa5b1;
  --line:#e1e5ea; --line-2:#eef1f4; --accent:#2f4858; --accent-ink:#fff;
  --warn:#b45309; --warn-bg:#fef6e7; --ok:#0f7b57; --brand-green:#3fbf8a;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* spacing scale */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  /* radius scale */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-full:9999px;
  /* type scale */
  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:20px; --fs-xl:24px; --fs-2xl:32px; --fs-3xl:40px;
  --fw-regular:400; --fw-semibold:600; --fw-bold:700;
  --lh-tight:1.2; --lh-normal:1.5; --lh-loose:1.7;

  /* semantic */
  --surface:var(--panel); --surface-sunken:var(--bg);
  --text:var(--ink); --text-muted:var(--ink-2);
  --border:var(--line); --border-soft:var(--line-2);
  --action:var(--accent); --on-action:var(--accent-ink);
  --focus:var(--accent);

  /* component */
  --page-max:1040px; --prose-max:720px; --hero-h1-max:760px; --hero-lede-max:680px; --shot-max:960px; --label-col:28%;
  --header-h:64px; --logo-h:32px; --step-dot:48px; --rule:1px; --bar:4px;
  --btn-pad:var(--space-3) var(--space-5); --btn-r:var(--radius-md);
  --card-pad:var(--space-5); --card-r:var(--radius-lg);
  --motion-fast:120ms; --ease:cubic-bezier(.2,0,0,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--fs-md);line-height:var(--lh-loose);color:var(--text);
  background:var(--surface);-webkit-font-smoothing:antialiased}
a{color:var(--action)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
img{max-width:100%}
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--space-5)}
.skip{position:absolute;left:var(--space-2);top:calc(-1 * var(--space-8));background:var(--action);color:var(--on-action);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:1}
.skip:focus{top:var(--space-2)}

/* AppHeader */
header.top{border-bottom:var(--rule) solid var(--border-soft)}
header.top .wrap{display:flex;align-items:center;gap:var(--space-5);min-height:var(--header-h)}
header.top .brand{display:flex;align-items:center}
header.top .brand img{height:var(--logo-h);width:auto;display:block}
header.top nav{margin-left:auto;display:flex;gap:var(--space-5);font-size:var(--fs-sm)}
header.top nav a{color:var(--text-muted);text-decoration:none}
header.top nav a:hover,header.top nav a[aria-current]{color:var(--text)}

/* Button */
.btn{display:inline-block;border-radius:var(--btn-r);padding:var(--btn-pad);font-weight:var(--fw-semibold);
  font-size:var(--fs-md);line-height:var(--lh-normal);text-decoration:none;border:var(--rule) solid var(--border);
  transition:background-color var(--motion-fast) var(--ease)}
.btn.primary{background:var(--action);border-color:var(--action);color:var(--on-action)}
.btn.secondary{background:var(--surface);color:var(--text)}
.btn.secondary:hover{background:var(--surface-sunken)}

/* hero */
.hero{padding:var(--space-8) 0 var(--space-6);text-align:center}
.hero h1{font-size:var(--fs-3xl);line-height:var(--lh-tight);margin:0 auto var(--space-4);max-width:var(--hero-h1-max)}
.hero .lede{font-size:var(--fs-lg);line-height:var(--lh-normal);color:var(--text-muted);max-width:var(--hero-lede-max);margin:0 auto var(--space-6)}
.hero .cta{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}
.hero .fine{font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--space-4)}
.shot{margin:var(--space-7) auto 0;max-width:var(--shot-max);aspect-ratio:1280/800;border:2px dashed var(--border);
  border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--text-muted);
  font-size:var(--fs-sm);background:var(--surface-sunken);text-align:center;padding:var(--space-5)}

/* sections */
section{padding:var(--space-8) 0;border-top:var(--rule) solid var(--border-soft)}
section h2{font-size:var(--fs-2xl);line-height:var(--lh-tight);margin:0 0 var(--space-4)}
.intro{color:var(--text-muted);font-size:var(--fs-lg);line-height:var(--lh-normal);max-width:var(--prose-max);margin:0 0 var(--space-6)}

/* Card */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.card{border:var(--rule) solid var(--border);border-radius:var(--card-r);padding:var(--card-pad);background:var(--surface)}
.card h3{margin:0 0 var(--space-2);font-size:var(--fs-lg);line-height:var(--lh-tight)}
.card p{margin:0;color:var(--text-muted)}

/* numbered steps */
.steps{counter-reset:s;display:grid;gap:var(--space-5)}
.step{display:grid;grid-template-columns:var(--step-dot) 1fr;gap:var(--space-4);align-items:start}
.step::before{counter-increment:s;content:counter(s);width:var(--step-dot);height:var(--step-dot);border-radius:var(--radius-full);
  background:var(--action);color:var(--on-action);font-weight:var(--fw-bold);font-size:var(--fs-lg);
  display:flex;align-items:center;justify-content:center}
.step h3{margin:var(--space-2) 0;font-size:var(--fs-lg);line-height:var(--lh-tight)}
.step p,.step li{color:var(--text-muted)}
.step ol{margin:var(--space-2) 0 0;padding-left:var(--space-5)}
.path{font-weight:var(--fw-semibold);color:var(--text);background:var(--border-soft);border-radius:var(--radius-sm);
  padding:0 var(--space-1);white-space:nowrap}

/* Tag */
.tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0;padding:0;list-style:none}
.tag{font-size:var(--fs-sm);border:var(--rule) solid var(--action);color:var(--action);border-radius:var(--radius-md);
  padding:0 var(--space-2);font-weight:var(--fw-semibold)}

/* DataTable */
.table-scroll{overflow-x:auto}
table.how{width:100%;border-collapse:collapse}
table.how th,table.how td{text-align:left;padding:var(--space-3) var(--space-4);border-bottom:var(--rule) solid var(--border);vertical-align:top}
table.how th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
table.how td:first-child{font-weight:var(--fw-semibold);width:var(--label-col)}

/* Banner */
.note{background:var(--warn-bg);border-left:var(--bar) solid var(--warn);border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:var(--space-4);margin:var(--space-5) 0 0;color:var(--text)}
.tbd{background:var(--warn-bg);color:var(--warn);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  border-radius:var(--radius-sm);padding:0 var(--space-1)}

/* permissions list */
dl.perm{margin:0}
dl.perm dt{font-weight:var(--fw-semibold);margin-top:var(--space-4)}
dl.perm dd{margin:var(--space-1) 0 0;color:var(--text-muted)}
code{font-size:var(--fs-sm);background:var(--border-soft);border-radius:var(--radius-sm);padding:0 var(--space-1);overflow-wrap:anywhere}

.support{display:flex;gap:var(--space-5);align-items:center;flex-wrap:wrap}

/* legal / prose pages */
.doc{padding:var(--space-7) 0 var(--space-8)}
.doc .prose{max-width:var(--prose-max)}
.doc h1{font-size:var(--fs-2xl);line-height:var(--lh-tight);margin:0 0 var(--space-2)}
.doc .meta{color:var(--text-muted);font-size:var(--fs-sm);margin:0 0 var(--space-6)}
.doc h2{font-size:var(--fs-xl);line-height:var(--lh-tight);margin:var(--space-7) 0 var(--space-3)}
.doc h3{font-size:var(--fs-lg);line-height:var(--lh-tight);margin:var(--space-5) 0 var(--space-2)}
.doc p,.doc li{color:var(--text)}
.doc ul{padding-left:var(--space-5)}
.doc li+li{margin-top:var(--space-2)}
.summary{background:var(--surface-sunken);border:var(--rule) solid var(--border);border-radius:var(--card-r);padding:var(--card-pad)}
.summary h2{margin-top:0}
.summary ul{margin-bottom:0}

/* footer */
footer{border-top:var(--rule) solid var(--border-soft);padding:var(--space-6) 0;color:var(--text-muted);font-size:var(--fs-sm)}
footer .wrap{display:flex;gap:var(--space-3) var(--space-5);flex-wrap:wrap}
footer nav{display:flex;gap:var(--space-5);flex-wrap:wrap}
footer a{color:var(--text-muted)}

/* breakpoint "narrow" */
@media (max-width: 720px){
  .grid3{grid-template-columns:1fr}
  .hero{padding-top:var(--space-7)}
  .hero h1{font-size:var(--fs-2xl)}
  .hero .lede{font-size:var(--fs-md)}
  section{padding:var(--space-7) 0}
  section h2{font-size:var(--fs-xl)}
  .intro{font-size:var(--fs-md)}
  header.top .wrap{flex-wrap:wrap;gap:0 var(--space-4);padding-top:var(--space-3);padding-bottom:var(--space-3)}
  header.top nav{margin-left:0;width:100%;gap:var(--space-4);overflow-x:auto}
  .step{grid-template-columns:1fr;gap:var(--space-2)}
  table.how th,table.how td{padding:var(--space-3) var(--space-2)}
  table.how td:first-child{width:auto}
  .path{white-space:normal}
}
.shot-img{display:block;margin:var(--space-7) auto 0;width:100%;max-width:var(--shot-max);height:auto}