/* The pattern maker (crosstela.com/library/pattern-maker/): drop zone, photo and crop, settings, the chart view,
   the key and the print view. Sits on handbook.css and library-pages.css and reads only site.css tokens. Colours
   that come from a result (a thread, its tint) arrive as --c through CSSOM; the CSP allows no inline styles. */

.mk{margin-top:clamp(22px,3vw,32px)}
.mk [hidden]{display:none!important}

/* ---------- the drop zone ---------- */
.mk-drop{display:grid;justify-items:center;gap:10px;padding:clamp(28px,6vw,56px) 20px;border:2px dashed color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius:22px;background:var(--tile);box-shadow:var(--shadow);text-align:center;transition:border-color .15s,background .15s}
.mk-drop.is-over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--tile))}
.mk-pick{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:999px;background:var(--accent);
  color:var(--on-accent);font:650 18px/1 var(--text);cursor:pointer;box-shadow:0 10px 24px -14px var(--accent)}
.mk-pick:hover{filter:brightness(1.07)}
#mk-file:focus-visible+.mk-pick{outline:3px solid var(--accent-soft);outline-offset:3px}
.mk-or{margin:0;color:var(--ink-2);font-size:15.5px}
.mk-private{display:flex;align-items:flex-start;gap:8px;max-width:46ch;margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.45;text-align:left}
.mk-ico{width:18px;height:18px;flex:none;margin-top:1px;color:var(--accent)}
.mk-drop .mk-msg{color:var(--accent)}

/* ---------- photo, settings, view ---------- */
.mk-work{display:grid;gap:clamp(18px,2.4vw,28px);align-items:start}
@media (min-width:920px){.mk-work{grid-template-columns:minmax(260px,320px) minmax(0,1fr)}}
.mk-side{display:grid;gap:16px;min-width:0}
.mk-photo{min-width:0}
.mk-photo-cv{display:block;max-width:100%;border-radius:12px;cursor:crosshair;touch-action:none;box-shadow:var(--shadow);background:var(--tile)}
.mk-photo-cv:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mk-hint{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
.mk-photo-acts{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.mk-form{display:grid;gap:16px;padding:16px;border-radius:18px;background:var(--tile);box-shadow:var(--shadow)}
.mk-form .cf label b{font-feature-settings:'tnum';color:var(--accent);font-weight:750}
.mk-form input[type=range]{width:100%;height:30px;margin:0;accent-color:var(--accent);background:transparent}
.mk-check{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.4;color:var(--ink);cursor:pointer}
.mk-check input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--accent)}
.mk-main{min-width:0}
.mk-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.mk-bar .grow{flex:1}
.mk-seg,.mk-zoom{display:inline-flex;padding:3px;gap:2px;border-radius:999px;background:var(--accent-soft)}
.mk-seg button,.mk-zoom button{min-width:40px;height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--ink);
  font:600 14.5px/1 var(--text);cursor:pointer}
.mk-zoom button{padding:0 12px;font-size:16px}
.mk-zoom button[data-mk-zoom="0"]{font-size:14px}
.mk-seg button[aria-pressed="true"]{background:var(--tile-hi);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.mk-view{position:relative;overflow:auto;height:360px;max-width:100%;margin:0 auto;border-radius:14px;background:#F7F3EC;box-shadow:var(--shadow),0 0 0 1px var(--line);
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;outline:0;transition:opacity .2s}
.mk-view:focus-visible{box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)}
.mk-cv{position:sticky;top:0;left:0;display:block}
.mk-sizer{pointer-events:none}
.is-working .mk-view{opacity:.72}
.mk-status{min-height:1.6em}
.mk-msg{margin:10px 0 0;font-size:15px;line-height:1.45;color:var(--accent)}
.mk-msg.is-quiet{color:var(--muted)}
.mk-msg b{font-feature-settings:'tnum'}

/* ---------- the result ---------- */
.mk-result{margin-top:clamp(18px,2.4vw,26px)}
.mk-sum{margin:0;padding:14px 16px;border-radius:14px;background:var(--accent-soft);color:var(--ink);font-size:clamp(16px,1.8vw,18px);line-height:1.5;max-width:860px}
.mk-sum b{font-feature-settings:'tnum';color:var(--accent);font-weight:750}
.mk-get{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.mk-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:1px solid var(--rule);border-radius:999px;
  background:var(--tile);color:var(--ink);font:650 15.5px/1.1 var(--text);cursor:pointer;text-align:center}
.mk-btn:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.mk-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.mk-btn.primary:hover{filter:brightness(1.07)}
.mk-btn.small{min-height:36px;padding:0 14px;font-size:14px}
.mk-cta{display:flex;gap:16px;align-items:flex-start;margin:22px 0 0;padding:18px;border-radius:20px;background:var(--tile);box-shadow:var(--shadow);max-width:860px}
.mk-cta img{flex:none;width:56px;height:56px;border-radius:13px}
.mk-cta p{margin:0 0 10px;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.mk-cta .mk-cta-h{margin-bottom:6px;color:var(--ink);font:650 clamp(17px,1.9vw,19px)/1.3 var(--text)}
.mk-cta .get{display:inline-block;padding:12px 22px;border-radius:999px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:650;font-size:16px}
.mk-cta .get:hover{filter:brightness(1.07)}
@media (max-width:520px){.mk-cta{flex-direction:column}.mk-cta img{width:48px;height:48px}}
.mk-key{max-width:860px}
.mk-key td{vertical-align:middle;padding-top:8px;padding-bottom:8px}
.mk-key .num{text-align:right;font-feature-settings:'tnum';white-space:nowrap}
.mk-key th.num{text-align:right}
.mk-key .code{color:var(--ink);font-weight:650;white-space:nowrap}
.mk-sym{white-space:nowrap}
.mk-chip{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;background:var(--c);color:#1f1a17;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);font:17px/1 "Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2","Noto Sans Symbols","DejaVu Sans",sans-serif;vertical-align:middle}
.mk-sym .sw{width:28px;height:28px;margin:0 0 0 6px;border-radius:6px;vertical-align:middle}
/* The key stays a table on a phone: its numbers are read across a row. */
@media (max-width:640px){
  .mk-key thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:table-header-group}
  .mk-key table{display:table}.mk-key tbody{display:table-row-group}.mk-key tr{display:table-row;padding:0}
  .mk-key td{display:table-cell;padding:8px 8px 8px 0;border-bottom:1px solid var(--rule)}
  .mk-key td+td{margin:0}.mk-key td+td::before{content:none}
  .mk-key th{padding-right:8px}
  .mk-key table{font-size:14px}
  .mk-sym .sw{display:none}
}
.mk-note{max-width:860px;margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.mk-note a{color:var(--accent)}

/* ---------- questions ---------- */
.mk-q{border-bottom:1px solid var(--rule)}
.mk-q summary{cursor:pointer;padding:12px 0;font-weight:650;color:var(--ink);list-style-position:outside}
.mk-q p{margin:0 0 14px}

/* ---------- print: the cover, the key, then the chart pages, alone ---------- */
.mk-print{display:none}
@media print{
  @page{margin:12mm}
  html.mk-printing body>*:not(#mk-print){display:none!important}
  html.mk-printing body{background:#fff!important;min-height:0}
  html.mk-printing #mk-print{display:block!important;color:#000;font:11pt/1.4 var(--text)}
  .mk-pp{break-after:page;page-break-after:always}
  .mk-pp:last-child{break-after:auto;page-break-after:auto}
  .mk-pp-brand{margin:0 0 6mm;font-size:10pt;color:#555}
  .mk-pp-title{margin:0 0 6mm;font:600 26pt/1.1 var(--display);color:#000}
  .mk-pp-img{display:block;max-width:100%;max-height:150mm;margin:0 auto 6mm;object-fit:contain}
  .mk-pp-facts{margin:0 0 2mm;font-size:12pt}
  .mk-pp-small{margin:8mm 0 0;font-size:9.5pt;color:#555}
  .mk-pp-key h2{margin:0 0 4mm;font:600 18pt/1.2 var(--display)}
  .mk-pp-key table{width:100%;border-collapse:collapse;font-size:10pt}
  .mk-pp-key th{text-align:left;padding:0 3mm 2mm 0;border-bottom:1px solid #999;font-size:8.5pt;text-transform:uppercase;letter-spacing:.05em}
  .mk-pp-key td{padding:.7mm 3mm .7mm 0;border-bottom:1px solid #ddd}
  .mk-pp-key .num{text-align:right}
  .mk-pp-key tr{break-inside:avoid}
  .mk-pp-key .mk-chip{width:4.8mm;height:4.8mm;font-size:9.5pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mk-pp-head{margin:0 0 3mm;font-size:9.5pt;color:#333}
  .mk-pp-chart img{display:block;width:100%;height:auto;max-height:262mm;object-fit:contain;object-position:top left}
}