/* =============================================================================
   training.css — shared styles for the printable documents under /downloads/.

   Lifted verbatim from docs/help/Unison-Training-Pack.html so the handouts a
   church prints look like the pack they were cut out of. The pack embeds Inter
   as a base64 @font-face; these pages do NOT — five copies of a 120 KB font on
   a downloads page is a worse trade than falling back to the system stack, and
   the layout was built to survive it.

   NO ?v= STAMPS IN THIS FOLDER. build.sh scans every .html under site/ and
   refuses to build if it finds a stamp that isn't the current build number.
   These are documents, not modules — they are not version-stamped at all.
   ============================================================================= */



/* ---------- Unison brand tokens (site/index.html :root) ---------- */
:root{
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;

  --forest:#050a09; --surface:#0c1412; --surface-2:#0f1a17; --edge:#16302a;
  --emerald:#10b981; --emerald-2:#34d399; --teal:#0f766e; --amber:#f5b45a;

  /* light reading surface for a document people print */
  --ink:#0b1512; --muted:#4d5f59; --faint:#7f918a; --line:#e0e8e5;
  --paper:#f7faf9; --card:#ffffff; --code:#eef4f2;
  --emerald-soft:#e6f7f0; --teal-soft:#e4f1ef; --amber-soft:#fdf3e2;
  --bad:#a63a26; --bad-soft:#fbeae5;
  --glow:0 0 40px rgba(16,185,129,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
     line-height:1.62;font-size:16.5px;-webkit-font-smoothing:antialiased;
     font-feature-settings:"cv05" 1,"ss01" 1}

/* ---------- layout ---------- */
.shell{display:flex;align-items:flex-start;max-width:1300px;margin:0 auto}
nav.toc{position:sticky;top:0;width:272px;flex:0 0 272px;height:100vh;overflow-y:auto;
        padding:26px 16px 60px 24px;background:var(--forest);color:#cfe0da}
main{flex:1;min-width:0;padding:40px 44px 100px;max-width:920px}
@media (max-width:900px){
  .shell{display:block}
  nav.toc{position:static;width:auto;height:auto;padding:20px 22px 26px}
  main{padding:26px 22px 70px}
}

/* ---------- nav ---------- */
.logo{display:flex;align-items:center;gap:10px;margin-bottom:3px}
.logo svg{width:30px;height:30px;flex:0 0 30px}
nav .brand{font-weight:800;font-size:16px;letter-spacing:-.02em;color:#fff}
nav .brandsub{font-size:11.5px;color:#6f8a80;margin:0 0 20px 40px;letter-spacing:.01em}
nav .grp{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#5f7a70;
         font-weight:800;margin:20px 0 6px}
nav a{display:block;padding:5px 10px;margin:1px 0;border-radius:7px;text-decoration:none;
      color:#a9c1b8;font-size:13.5px;line-height:1.4;transition:.12s}
nav a:hover{background:rgba(16,185,129,.13);color:#eafff7}
nav a.lead{border-left:3px solid var(--emerald);border-radius:0 7px 7px 0}
nav a.band{border-left:3px solid var(--emerald-2);border-radius:0 7px 7px 0}
nav a.tech{border-left:3px solid var(--amber);border-radius:0 7px 7px 0}

/* ---------- typography ---------- */
h1{font-size:37px;line-height:1.14;margin:0 0 10px;letter-spacing:-.03em;font-weight:800}
h2{font-size:26px;margin:64px 0 6px;letter-spacing:-.024em;font-weight:800;
   padding-top:30px;border-top:1px solid var(--line);scroll-margin-top:20px}
h2:first-of-type{border-top:0;padding-top:0}
h3{font-size:19px;margin:36px 0 8px;font-weight:700;letter-spacing:-.018em;scroll-margin-top:20px}
h4{font-size:15.5px;margin:24px 0 6px;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 13px}
ul,ol{margin:0 0 14px;padding-left:22px}
li{margin:5px 0}
a{color:var(--teal)}
.lede{font-size:19px;color:var(--muted);margin-bottom:6px;line-height:1.55;letter-spacing:-.011em}
.dek{font-size:15px;color:var(--faint);margin:-2px 0 22px}
code,kbd{font-family:var(--mono);font-size:.84em;background:var(--code);padding:2px 6px;
     border-radius:5px;white-space:nowrap}
kbd{border:1px solid var(--line);border-bottom-width:2px;font-weight:600}
.ui{font-weight:650;background:var(--emerald-soft);border:1px solid #c9e9dc;border-radius:5px;
    padding:1px 6px;font-size:.9em;white-space:nowrap;color:#0a5c46}

/* ---------- components ---------- */
.tag{display:inline-block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
     font-weight:800;padding:3px 9px;border-radius:20px;vertical-align:middle}
.tag.lead{background:var(--emerald-soft);color:#0a6b50}
.tag.band{background:var(--teal-soft);color:var(--teal)}
.tag.tech{background:var(--amber-soft);color:#8a5a12}
.tag.plus{background:var(--amber-soft);color:#8a5a12}
.tag.addon{background:var(--amber-soft);color:#8a5a12}
.tag.admin{background:var(--bad-soft);color:var(--bad)}

.box{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:18px 22px;margin:20px 0}
.box>:last-child{margin-bottom:0}
.box .bt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-bottom:7px}
.warn{border-left:4px solid var(--amber);background:var(--amber-soft);border-color:#f2e0bf}
.warn .bt{color:#8a5a12}
.stop{border-left:4px solid var(--bad);background:var(--bad-soft);border-color:#f1d3cb}
.stop .bt{color:var(--bad)}
.say{border-left:4px solid var(--emerald);background:var(--emerald-soft);border-color:#c9e9dc}
.say .bt{color:#0a6b50}
.say p{font-style:italic}
.note{border-left:4px solid var(--teal);background:var(--teal-soft);border-color:#c8e2de}
.note .bt{color:var(--teal)}

ol.steps{counter-reset:s;list-style:none;padding-left:0;margin:18px 0}
ol.steps>li{counter-increment:s;position:relative;padding:0 0 16px 42px;margin:0}
ol.steps>li::before{content:counter(s);position:absolute;left:0;top:1px;width:27px;height:27px;
  border-radius:50%;background:var(--emerald);color:#04241b;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
ol.steps.b>li::before{background:var(--teal);color:#eafff7}
ol.steps.t>li::before{background:var(--amber);color:#3b2606}
ol.steps>li>b:first-child{display:block;margin-bottom:2px}

table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
th{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
   text-align:left;padding:8px 12px;border-bottom:2px solid var(--line);font-weight:800}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr td:first-child{font-weight:600}
table.run td:first-child{white-space:nowrap;color:var(--teal);font-variant-numeric:tabular-nums;
  font-weight:700}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:22px 0}
.cardlink{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);
  background:var(--card);border-radius:12px;padding:18px 20px;transition:.15s}
.cardlink:hover{border-color:var(--emerald);transform:translateY(-1px);box-shadow:0 6px 22px rgba(16,185,129,.10)}
.cardlink .ct{font-weight:800;font-size:17px;margin:8px 0 4px;letter-spacing:-.015em}
.cardlink .cd{font-size:14px;color:var(--muted);line-height:1.45}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--forest);color:#fff;border-radius:16px;
      padding:36px 36px 32px;margin:0 0 30px;box-shadow:var(--glow)}
.hero::after{content:"";position:absolute;inset:auto -60px -160px auto;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.30),transparent 68%)}
.hero .hrow{display:flex;align-items:center;gap:13px;margin-bottom:18px;position:relative;z-index:1}
.hero .hrow svg{width:34px;height:34px}
.hero .hmark{font-weight:800;letter-spacing:-.02em;font-size:17px}
.hero h1{color:#fff;margin-bottom:8px;position:relative;z-index:1}
.hero p{color:#b6cfc6;font-size:17.5px;margin:0;position:relative;z-index:1;max-width:62ch}
.hero .meta{margin-top:20px;font-size:12.5px;color:#6f8a80;letter-spacing:.02em;
  position:relative;z-index:1;border-top:1px solid var(--edge);padding-top:14px}

.chk{list-style:none;padding-left:0}
.chk li{padding-left:30px;position:relative;margin:8px 0}
.chk li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;
  border:2px solid var(--teal);border-radius:4px}

.foot{margin-top:70px;padding-top:22px;border-top:1px solid var(--line);
      color:var(--faint);font-size:13.5px}

.handout{border:2px solid var(--forest);border-radius:14px;padding:26px 30px;margin:26px 0;
  background:var(--card)}
.handout h3{margin-top:0}
.handout .hh{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.handout .hh svg{width:22px;height:22px}
.handout .hh span{font-weight:800;font-size:13px;letter-spacing:-.01em}

/* ---------- print ---------- */
@media print{
  nav.toc{display:none} main{max-width:none;padding:0}
  body{font-size:11pt;background:#fff}
  .hero{background:#fff;color:#000;border:2px solid #000;padding:16px;box-shadow:none}
  .hero::after{display:none}
  .hero h1,.hero p,.hero .meta,.hero .hmark{color:#000}
  h2{page-break-before:always;border-top:0}
  .handout{page-break-before:always}
  .noprint{display:none}
  a{color:#000;text-decoration:none}
}

/* ---------- additions for the standalone /downloads/ pages ---------- */
.guide h2{page-break-before:auto}
.wrap{max-width:920px;margin:0 auto;padding:40px 44px 90px}
@media (max-width:900px){.wrap{padding:26px 22px 70px}}
.backlink{display:inline-block;font-size:13.5px;text-decoration:none;margin-bottom:18px}
.dl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.dl .btn{display:inline-block;background:var(--emerald);color:#04241b;font-weight:700;
  font-size:14.5px;text-decoration:none;padding:10px 18px;border-radius:9px}
.dl .btn.ghost{background:transparent;color:var(--teal);border:1px solid var(--line)}
@media print{.backlink,.dl{display:none}}