/* Print Buddy: THE DESIGNER GUIDE (8 Nov 2026), site/designer-guide.html drawn by js/designer-guide.js. Linked right after site.css, on that
   page only. A book on the web: a cover, the contents in a sticky column, chapters with their pictures in pairs (On a Computer, On a Phone),
   the shortcut and feature tables, the questions and the version history; and a print layout (A4, a cover page, a chapter a page) that
   tools/designer_guide_pdf.mjs prints to the downloadable PDF. Theme tokens only (docs/STYLE-GUIDE.md); tags are square. */
.dg-page{padding-bottom:40px}
.dg-old{margin:6px 0 0;padding:12px 16px;border-radius:var(--radius-sm);background:var(--warning-tint);color:var(--ink);font-size:13.5px;line-height:1.5}
.dg-old a{font-weight:500;color:var(--ink)}

/* the cover */
.dg-cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:center;margin:10px 0 34px;padding:40px 44px;border-radius:var(--radius);background:var(--panel);overflow:hidden}
.dg-cover h1{font-size:40px;line-height:1.1;font-weight:500;letter-spacing:-.01em;margin:10px 0 14px}
.dg-cover .lead{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 18px;max-width:520px}
.dg-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 22px;font-size:12.5px;color:var(--muted)}
.dg-meta span{display:inline-flex;align-items:center}
.dg-ver{padding:4px 10px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:var(--primary);color:#fff;font-weight:500;letter-spacing:.02em}
.dg-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.dg-acts .btn,.dg-acts .btn-ghost{min-height:46px}
.dg-acts .btn-ghost{height:46px;padding:0 18px;font-size:14px}
.dg-acts button.btn-ghost{cursor:pointer;font-family:inherit}
.dg-edsel{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-size:12.5px;color:var(--muted)}
.dg-edsel select{height:40px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;font:inherit;font-size:13px;color:var(--ink)}
.dg-cover-art{position:relative;min-height:300px}
.dg-cover-art img{display:block;height:auto;border-radius:10px;box-shadow:var(--shadow-page,0 18px 40px rgba(20,20,30,.16))}
.dg-ca-desk{width:92%;margin-left:0}
.dg-ca-phone{position:absolute;right:0;bottom:-26px;width:27%;border-radius:18px!important;border:5px solid #26262E}

/* the contents beside the chapters */
.dg-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
.dg-toc{position:sticky;top:150px;max-height:calc(100vh - 170px);overflow:auto;padding-right:4px}
.dg-toc-h{font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--eyebrow-ink);margin:0 0 10px}
.dg-toc ol{list-style:none;margin:0;padding:0}
.dg-toc a{display:flex;gap:10px;align-items:baseline;min-height:34px;padding:7px 8px;border-radius:var(--radius-sm);font-size:13px;line-height:1.35;color:var(--ink);text-decoration:none}
.dg-toc a i{font-style:normal;font-size:11px;color:var(--muted);min-width:18px;font-variant-numeric:tabular-nums}
.dg-toc a:hover{background:var(--panel)}
.dg-main{min-width:0;max-width:980px}
.dg-intro p{font-size:16px;line-height:1.75;margin:0 0 14px;color:var(--ink)}

/* a chapter */
.dg-ch{padding:38px 0 8px;border-top:1px solid var(--line);margin-top:30px;scroll-margin-top:150px}
.dg-ch-h{margin:0 0 20px}
.dg-n{display:block;font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--eyebrow-ink);margin-bottom:6px}
.dg-ch h2{font-size:30px;line-height:1.15;font-weight:500;margin:0}
.dg-ch>p{font-size:15px;line-height:1.7;margin:0 0 14px}
.dg-sec{margin:22px 0 0}
.dg-sec h3{font-size:18px;font-weight:500;line-height:1.3;margin:0 0 8px}
.dg-sec p{font-size:15px;line-height:1.75;margin:0 0 10px;max-width:760px}
.dg-steps{counter-reset:dgs;list-style:none;margin:6px 0 12px;padding:0;max-width:760px}
.dg-steps li{counter-increment:dgs;position:relative;padding:0 0 10px 42px;font-size:15px;line-height:1.65}
.dg-steps li::before{content:counter(dgs);position:absolute;left:0;top:1px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:var(--primary);color:#fff;font-size:13px;font-weight:500}
.dg-list{margin:6px 0 12px;padding:0 0 0 20px;max-width:760px}
.dg-list li{font-size:15px;line-height:1.65;margin:0 0 7px}
.dg-list li b{font-weight:500}

/* the pictures: a computer and a phone side by side */
.dg-fig{margin:20px 0 26px}
.dg-shots{display:flex;gap:22px;align-items:flex-start}
.dg-shot{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--muted);min-width:0}
.dg-desk{flex:1 1 auto}
.dg-phone{flex:0 0 23%}
.dg-only-phone .dg-phone{flex-basis:300px;max-width:300px}
.dg-frame{display:block;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(20,20,30,.08);transition:box-shadow .2s ease,transform .2s ease}
.dg-phone .dg-frame{border:6px solid #26262E;border-radius:22px}
.dg-frame img{display:block;width:100%;height:auto}
.dg-shot:hover .dg-frame{box-shadow:0 14px 34px rgba(20,20,30,.14)}
.dg-shot:focus-visible{outline:none}
.dg-shot:focus-visible .dg-frame{box-shadow:0 0 0 3px var(--ring,var(--primary))}
.dg-dev{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--muted)}
.dg-fig figcaption{margin-top:10px;font-size:13px;line-height:1.55;color:var(--muted);max-width:760px}

/* tables */
.dg-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5;margin:6px 0 10px}
.dg-table th,.dg-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.dg-table thead th{font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-strong)}
.dg-table td:first-child{width:48%}
.dg-table kbd{display:inline-block;min-width:24px;padding:2px 7px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;background:#fff;font:500 12px/1.4 inherit;font-family:inherit;color:var(--ink);text-align:center}
.dg-grp th{padding-top:20px;font-size:13px;font-weight:500;color:var(--ink);background:none;border-bottom:1px solid var(--line-strong)}
.dg-find{display:flex;align-items:center;gap:10px;max-width:420px;height:46px;padding:0 14px;margin:6px 0 4px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;color:var(--muted)}
.dg-find input{flex:1;min-width:0;border:0;outline:none;font:inherit;font-size:14px;color:var(--ink);background:none}
.dg-find:focus-within{box-shadow:0 0 0 3px var(--ring,rgba(51,51,61,.2))}
.dg-found{min-height:20px;margin:4px 0 0;font-size:12.5px;color:var(--muted)}

/* questions and versions */
#questions .faq{max-width:820px}
.dg-vers{list-style:none;margin:10px 0 0;padding:0;max-width:820px}
.dg-vers>li{padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);margin:0 0 10px;background:#fff}
.dg-vers>li[aria-current]{background:var(--panel);border-color:transparent}
.dg-v-h{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-bottom:8px;font-size:13px;color:var(--muted)}
.dg-v-h b{font-size:15px;font-weight:500;color:var(--ink)}
.dg-v-h a{margin-left:auto;font-weight:500;color:var(--ink)}
.dg-tag{padding:3px 8px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:var(--success-tint);color:var(--ink);font-size:11.5px;font-weight:500}
.dg-tag-on{margin-left:auto;background:var(--primary);color:#fff}
.dg-vers ul{margin:0;padding-left:20px}
.dg-vers ul li{font-size:14px;line-height:1.6;margin:0 0 4px}

/* the picture zoom */
.dg-zoom{border:0;padding:0;background:transparent;max-width:min(1500px,96vw);max-height:94vh;overflow:visible}
.dg-zoom::backdrop{background:rgba(20,20,26,.78)}
.dg-zoom img{display:block;max-width:min(1500px,96vw);max-height:92vh;width:auto;height:auto;border-radius:10px;background:#fff}
.dg-zoom.dg-zoom-phone img{border:6px solid #26262E;border-radius:22px}
.dg-zoom-x{position:fixed;top:14px;right:14px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;box-shadow:var(--shadow-float,0 6px 18px rgba(0,0,0,.2))}

/* narrower screens */
@media (max-width:1100px){
  .dg-body{grid-template-columns:minmax(0,1fr);gap:0}
  .dg-toc{position:static;max-height:none;margin:0 0 10px;padding:18px 18px 10px;border-radius:var(--radius);background:var(--panel)}
  .dg-toc ol{columns:2;column-gap:20px}
  .dg-toc li{break-inside:avoid}
}
@media (max-width:860px){
  .dg-cover{grid-template-columns:minmax(0,1fr);gap:26px;padding:28px 22px 34px}
  .dg-cover h1{font-size:31px}
  .dg-cover-art{min-height:0;max-width:520px}
}
@media (max-width:640px){
  .dg-cover{margin:6px 0 24px;padding:24px 18px 30px}
  .dg-cover h1{font-size:27px}
  .dg-acts{flex-direction:column;align-items:stretch}
  .dg-acts .btn,.dg-acts .btn-ghost{justify-content:center;width:100%}
  .dg-toc ol{columns:1}
  .dg-ch{padding-top:28px;margin-top:22px}
  .dg-ch h2{font-size:24px}
  .dg-intro p,.dg-sec p,.dg-steps li,.dg-list li{font-size:14.5px}
  .dg-shots{flex-direction:column;align-items:stretch;gap:16px}
  .dg-pair .dg-phone,.dg-only-phone .dg-phone{flex-basis:auto;width:68%;max-width:290px;align-self:center}
  .dg-table td:first-child{width:auto}
  .dg-v-h a,.dg-tag-on{margin-left:0}
}

/* the printable book (Print This Guide, and ?print=1 for the PDF) */
@media print{
  @page{size:A4;margin:14mm 14mm 16mm}
  .site-head,.topbar,header.site,footer,.mast,.chrome-ph,.help-rel,.help-rel-after,.crumbs,.dg-acts,.dg-edsel,.dg-find,.dg-found,.dg-old,.chatw,.chat-fab,.btt,.ckb,nav.mainnav,.mm{display:none!important}
  body{background:#fff}
  .wrap{max-width:none!important;padding:0!important;margin:0!important}
  .dg-cover{display:flex;flex-direction:column;justify-content:center;min-height:262mm;margin:0;padding:18mm 14mm;border-radius:0;break-after:page;gap:18mm}
  .dg-cover h1{font-size:34pt}
  .dg-cover-art{min-height:0;width:100%}
  .dg-ca-phone{bottom:-8mm}
  .dg-body{display:block}
  .dg-toc{position:static;max-height:none;overflow:visible;break-after:page;padding:0;background:none;border-radius:0}
  .dg-toc-h{font-size:22pt;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:500;margin-bottom:8mm}
  .dg-toc ol{columns:1}
  .dg-toc a{font-size:11pt;min-height:0;padding:1.6mm 0;border-bottom:1px solid var(--line);border-radius:0}
  .dg-toc a i{font-size:10pt;min-width:10mm}
  .dg-main{max-width:none}
  .dg-ch{break-before:page;border-top:0;margin:0;padding:0}
  .dg-ch h2{font-size:22pt}
  .dg-sec{break-inside:auto}
  .dg-sec h3{break-after:avoid}
  .dg-fig{break-inside:avoid}
  .dg-intro p,.dg-sec p,.dg-steps li,.dg-list li{font-size:10.5pt;line-height:1.6}
  .dg-fig figcaption{font-size:9pt}
  .dg-frame{box-shadow:none}
  .dg-phone{flex-basis:22%}
  .dg-shots{flex-direction:row!important}
  .dg-table{font-size:9.5pt}
  .dg-table tr{break-inside:avoid}
  .faq{break-inside:avoid}
  details.faq>*:not(summary){display:block!important}
  .dg-vers>li{break-inside:avoid}
}