/* BizBooks360 procedure manual: /manual (contents) and /manual/<chapter>.
   Loaded after styles.css. Every class here starts with m- so nothing collides with the site's own classes.
   The chapter pages are generated by tools/build_manual.py; their one-off sizes and picture pin positions are in
   /manual/<chapter>.css (the site's content policy allows no inline styles).

   The chapter keeps its textbook layout (a reading column, a margin column for key terms, wide plates for pictures,
   numbered steps) in the site's type and colours: serif headings, sans text, blue for structure, green for tips,
   amber for cautions. The red of the picture pins is the one colour of its own: it must stand out on a screenshot. */

.m-book,.m-index{
  --ink:var(--slate);--rule:var(--line);--sheet:var(--card);
  --accent:var(--blue);--accent-ink:var(--blue);--accent-soft:var(--blue-soft);
  --pin:#d4421c;--pin-ink:#fff;--warn:#8a5800;--warn-soft:#fbf0d9;--code-bg:#eeeeea;
  --f-display:var(--sans);--f-body:var(--sans);--f-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --s-1:.8125rem;--s0:1.0625rem;--s1:1.25rem;--s2:1.6rem;--s3:2rem;--s4:clamp(2.2rem,1.6rem + 2.6vw,3.25rem);
}

/* ---------- page frame ---------- */
.m-page{padding:28px 0 var(--band)}
.m-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;line-height:1.4;color:var(--muted);padding-bottom:18px;border-bottom:1px solid var(--line)}
.m-crumbs a{color:var(--text);font-weight:600;text-decoration:none}
.m-crumbs a:hover{color:var(--blue);text-decoration:underline}
.m-crumbs .m-sep{color:var(--line-2)}
.m-crumbs .m-here{color:var(--slate);font-weight:600}
.m-crumbs .m-step-links{margin-left:auto;display:flex;gap:18px}
.m-book{color:var(--text)}

/* ---------- base inside a chapter ---------- */
.m-book h1,.m-book h2,.m-book h3,.m-book h4{margin:0;line-height:1.2;color:var(--slate)}
.m-book p,.m-book figure,.m-book table{margin:0}
.m-book ul,.m-book ol,.m-book dl{margin:1em 0}
.m-book a{color:var(--blue)}
.m-book summary:focus-visible{outline:3px solid var(--blue-light);outline-offset:2px;border-radius:2px}
.m-book .m-eyebrow{font:700 12.5px/1.4 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--blue);margin:0}
.m-book kbd,.m-book code{font-family:var(--f-mono);font-size:.82em;background:var(--code-bg);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:.05em .4em;white-space:nowrap;color:var(--slate)}
.m-book code{border-bottom-width:1px}
.m-book pre{font-family:var(--f-mono)}
.m-book pre code{white-space:inherit}
.m-ui{font-weight:600;color:var(--slate);white-space:nowrap}
.m-pinref{display:inline-grid;place-items:center;min-width:1.4em;height:1.4em;padding:0 .3em;border-radius:999px;background:var(--pin);color:var(--pin-ink);font:700 .72em/1 var(--sans);vertical-align:.12em}
.m-book sup a{font-weight:700;font-size:.78em;text-decoration:none;padding:0 .1em}

/* ---------- chapter opening ---------- */
.m-cover{border-bottom:1px solid var(--line);padding:40px 0 32px;display:grid;gap:16px}
.m-cover h1{font-size:var(--s4);font-weight:400;line-height:1.1;letter-spacing:-.01em;max-width:20ch}
.m-cover .m-lede{font-size:19px;line-height:1.6;max-width:60ch}
.m-meta{display:flex;flex-wrap:wrap;gap:6px 28px;font-size:14px;color:var(--muted)}
.m-meta b{color:var(--slate);font-weight:600;margin-right:.35em}

/* ---------- spread: reading column + margin column ---------- */
.m-spread{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;padding-top:2.75rem}
.m-spread>*{min-width:0}
.m-main{display:grid;gap:1.15rem;max-width:68ch}
.m-margin{display:grid;gap:1rem;align-content:start}
@media (min-width:1000px){
  .m-spread{grid-template-columns:minmax(0,1fr) 16.5rem;column-gap:3rem}
  .m-spread .m-wide{grid-column:1 / -1}
}
.m-chapter-head{display:grid;gap:.35rem;padding-top:.4rem}
.m-chapter-head h2{font-size:var(--s3);font-weight:400;letter-spacing:-.01em}
.m-chapter-head .m-num{font:700 12.5px/1.4 var(--sans);letter-spacing:.11em;color:var(--blue)}
.m-book h3{font-size:var(--s1);font-weight:600;margin-top:.6rem}

/* ---------- margin notes ---------- */
.m-note{border-top:2px solid var(--slate);padding-top:.6rem;font-size:.9rem;line-height:1.55;display:grid;gap:.45rem}
.m-note h4{font:700 12.5px/1.4 var(--sans);letter-spacing:.11em;text-transform:uppercase}
.m-note dl{margin:0;display:grid;gap:.55rem}
.m-note dt{font-weight:600;color:var(--slate)}
.m-note dd{margin:0;color:var(--muted)}

/* ---------- tip and caution ---------- */
.m-box{border-radius:6px;padding:1rem 1.15rem;display:grid;gap:.45rem;font-size:.97rem;line-height:1.55}
.m-box .m-tag{font:700 12.5px/1.4 var(--sans);letter-spacing:.11em;text-transform:uppercase}
.m-tip{background:var(--green-soft);border-left:4px solid var(--green)}
.m-tip .m-tag{color:var(--green-ink)}
.m-caution{background:var(--warn-soft);border-left:4px solid var(--warn)}
.m-caution .m-tag{color:var(--warn)}
.m-box ul{margin:0;padding-left:1.1rem;display:grid;gap:.25rem}

/* ---------- objectives, checklist ---------- */
.m-objectives{border:1px solid var(--line);background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:1.25rem 1.4rem;display:grid;gap:.5rem}
.m-objectives ol{margin:0;padding-left:1.3rem;display:grid;gap:.3rem}
.m-checklist{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.m-checklist li{display:grid;grid-template-columns:2.4rem 1fr;align-items:baseline}
.m-checklist li::before{content:"[ ]";font-family:var(--f-mono);font-size:.9rem;color:var(--blue)}

/* ---------- steps ---------- */
.m-steps{list-style:none;margin:0;padding:0;display:grid;gap:1.35rem}
.m-step{display:grid;grid-template-columns:3.1rem minmax(0,1fr);gap:.2rem .9rem}
.m-step .m-no{font:700 1.5rem/1.1 var(--sans);color:var(--blue);border-top:2px solid var(--blue);padding-top:.3rem;font-variant-numeric:tabular-nums}
.m-step .m-body{display:grid;gap:.45rem;min-width:0}
.m-step h3{margin:0;font-size:1.125rem}
.m-step ul{margin:0;padding-left:1.1rem;display:grid;gap:.2rem}

/* ---------- pictures ---------- */
.m-book figure{display:grid;gap:.6rem}
.m-plate{position:relative;border:1px solid var(--line-2);border-radius:var(--r-card);overflow:hidden;background:#fff;box-shadow:var(--shadow-card)}
.m-plate img{display:block;width:100%;height:auto}
.m-pin{position:absolute;display:grid;place-items:center;width:clamp(18px,2.6vw,26px);height:clamp(18px,2.6vw,26px);border-radius:50%;background:var(--pin);color:var(--pin-ink);font:700 clamp(10px,1.35vw,13px)/1 var(--sans);box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.3);transform:translate(-50%,-50%)}
.m-pin[data-a="r"]{transform:translate(calc(-100% - 2px),-50%)}
.m-pin[data-a="l"]{transform:translate(2px,-50%)}
.m-book figcaption{font-size:.9rem;line-height:1.5;color:var(--muted)}
.m-book figcaption b{color:var(--slate);font-weight:600}
.m-small-plate{max-width:310px}

/* ---------- diagrams ---------- */
.m-diagram{border:1px solid var(--line);background:var(--card);border-radius:var(--r-card);padding:1rem;overflow-x:auto}
.m-diagram svg{display:block;width:100%;height:auto;min-width:560px;max-width:none}
.m-d-box{fill:var(--card);stroke:var(--slate);stroke-width:1.5}
.m-d-q{fill:var(--paper);stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 3}
.m-d-end{fill:var(--blue-soft);stroke:var(--blue);stroke-width:2}
.m-d-txt{fill:var(--slate);font-family:var(--sans);font-size:15px;font-weight:600}
.m-d-txt-s{fill:var(--muted);font-family:var(--sans);font-size:13px}
.m-d-strong{fill:var(--blue);font-family:var(--sans);font-size:17px;font-weight:700}
.m-d-line{stroke:var(--muted);stroke-width:1.6;fill:none}
.m-d-arrow{fill:var(--muted)}
.m-d-lab{fill:var(--blue);font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em}
.m-d-ink{stroke:var(--slate);stroke-width:2}
.m-d-num{fill:var(--slate);font-family:var(--f-mono);font-size:14px}

/* ---------- tables ---------- */
.m-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.m-book table{border-collapse:collapse;width:100%;font-size:.94rem;line-height:1.45}
.m-book th,.m-book td{text-align:left;vertical-align:top;padding:.65rem .85rem;border-bottom:1px solid var(--line)}
.m-book th{font:700 12.5px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--paper)}
.m-book tr:last-child td{border-bottom:0}
.m-book td:first-child{font-weight:600;color:var(--slate)}

/* ---------- contents of a chapter ---------- */
.m-toc{display:grid;gap:.15rem;padding:0;margin:0;list-style:none}
.m-toc a{display:grid;grid-template-columns:2.2rem 1fr;text-decoration:none;color:var(--slate);padding:.35rem 0;border-bottom:1px solid var(--line)}
.m-toc a span{color:var(--blue);font-weight:700}
.m-toc a:hover{color:var(--blue)}

/* ---------- check your understanding ---------- */
.m-q{border-bottom:1px solid var(--line);padding:.75rem 0;display:grid;gap:.4rem}
.m-q summary{cursor:pointer;font:700 12.5px/1.4 var(--sans);color:var(--blue);letter-spacing:.08em;text-transform:uppercase;width:max-content}
.m-q details p{margin-top:.35rem;color:var(--muted)}

/* ---------- quick reference cards ---------- */
.m-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1rem}
.m-card{border:1px solid var(--line-2);border-top:3px solid var(--slate);border-radius:var(--r-card);background:var(--card);padding:1.1rem 1.2rem;display:grid;gap:.6rem;align-content:start}
.m-card h3{margin:0;font-size:var(--s1)}
.m-card ol{margin:0;padding-left:1.25rem;display:grid;gap:.3rem;font-size:.95rem}

/* ---------- notes at the end ---------- */
.m-footnotes{border-top:1px solid var(--line);margin-top:3rem;padding-top:1.4rem;display:grid;gap:.8rem}
.m-footnotes ol{margin:0;padding-left:1.4rem;display:grid;gap:.6rem;font-size:.9rem;line-height:1.5;color:var(--muted)}
.m-footnotes li::marker{font-weight:700;color:var(--slate)}
.m-footnotes a.m-back{text-decoration:none;font-weight:700;margin-left:.3rem}
.m-book li:target{background:var(--blue-soft);border-radius:4px}

/* ---------- previous / next and the rest of the volume ---------- */
.m-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:56px 0 0}
.m-pager a{display:grid;gap:4px;padding:18px 22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);text-decoration:none;color:var(--slate);transition:border-color .15s,box-shadow .15s}
.m-pager a:hover{border-color:var(--blue);box-shadow:var(--shadow-card)}
.m-pager .m-dir{font-size:13px;font-weight:600;color:var(--muted)}
.m-pager .m-ttl{font:600 1.125rem/1.3 var(--serif)}
.m-pager .m-next{text-align:right;grid-column:2}
.m-more{margin:48px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.m-more h2{font-size:1.375rem;font-weight:600;margin:0 0 14px}
.m-more p{margin:18px 0 0}

/* ---------- lists of chapters (contents page, and "more in this volume") ---------- */
.m-chapters{list-style:none;margin:0;padding:0;columns:2;column-gap:48px}
.m-chapters li{break-inside:avoid;margin:0}
.m-chapters a,.m-chapters .m-soon{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:0 8px;padding:.5rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--slate);line-height:1.4}
.m-chapters a:hover{color:var(--blue)}
.m-chapters a:hover .m-ch-title{text-decoration:underline;text-underline-offset:.2em}
.m-chapters .m-ch-no{color:var(--blue);font-weight:700;font-variant-numeric:tabular-nums}
.m-chapters [aria-current] .m-ch-title{font-weight:700}
.m-chapters .m-soon{color:var(--muted)}
.m-chapters .m-soon .m-ch-no{color:var(--muted)}
.m-chapters .m-soon em{font-style:normal;font-size:13px;white-space:nowrap}

/* ---------- contents page ---------- */
.m-index{padding:56px 0 var(--band)}
.m-vols{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.m-vols a{display:block;padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);font-size:14px;font-weight:600;color:var(--slate);text-decoration:none}
.m-vols a:hover{border-color:var(--blue);color:var(--blue)}
.m-volume{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:16px 56px;padding:40px 0;border-top:1px solid var(--line);scroll-margin-top:72px}
.m-volume h2{font-size:1.75rem;line-height:1.2;margin:4px 0 8px}
.m-vol-no{font:700 12.5px/1.4 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--blue);margin:0}
.m-vol-count{font-size:14px;color:var(--muted);margin:0}

@media (max-width:820px){
  .m-volume{grid-template-columns:minmax(0,1fr);padding:32px 0}
  .m-chapters{columns:1}
  .m-pager{grid-template-columns:minmax(0,1fr)}
  .m-pager .m-next{grid-column:1;text-align:left}
  .m-crumbs .m-step-links{margin-left:0;width:100%}
  .m-cover{padding-top:28px}
}
@media print{
  .site-header,.site-footer,.m-pager,.m-more,.m-crumbs .m-step-links{display:none}
  .m-plate{box-shadow:none}
}