/* Make a font — the real engine's parts (drawing board, glyph strip, preview, kerning, screenshot dialog, quality panel)
   in the mockup's language. Layout classes (.editor-layout, .test-layout, .export-layout …) come from foxfire.css. */
[data-icon]{display:inline-flex;align-items:center;justify-content:center}
.page-heading .heading-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;margin-top:30px}
.project-select{width:auto;min-width:170px;max-width:240px;min-height:36px;padding:7px 10px;font-size:12px;border-radius:30px;border-color:#b6bcae;background:transparent}
.step:disabled{opacity:.45}
.stage-pane{padding-bottom:10px}

/* --- canvas tools --- */
.canvas-tools{flex-wrap:nowrap}
.toolgroup button.on{background:var(--ink);color:#fff}
.toolgroup button:not(.on):hover,.toolgroup .eye:hover{background:var(--soft)}
.toolgroup .tool-sep{width:1px;height:22px;background:var(--line);margin:0 5px}
.toolgroup .eye{width:35px;height:35px;display:grid;place-items:center;border-radius:5px;cursor:pointer}
.toolgroup .eye:has(input:checked){color:var(--green)}
.toolgroup .eye:has(input:not(:checked)){color:#a4ac9b}
.toolgroup .eye:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.glyph-nav{display:flex;align-items:center;gap:6px;min-width:0;font-size:11px;color:var(--muted)}
.glyph-nav b{color:var(--ink);font-size:13px}
.glyph-nav button{width:30px;height:30px;border-radius:50%;font-size:18px;line-height:1;color:var(--muted)}
.glyph-nav button:hover{background:var(--soft);color:var(--ink)}
.glyph-nav .mono{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brush-size input{width:84px}
.brush-size output{min-width:24px;font-size:10px;color:var(--muted)}

/* --- drawing board --- */
.canvas-wrap{height:auto;min-height:421px;display:grid;place-items:center;padding:18px 18px 34px}
.stage{position:relative;width:min(100%,388px);aspect-ratio:1;touch-action:none;border-radius:6px;background:#fffffb;box-shadow:0 0 0 1px #e1e4d8,0 14px 40px #20251f0d}
.stage canvas,.stage svg{position:absolute;inset:0;width:100%;height:100%}
.stage canvas{cursor:crosshair}
.stage .overlay{pointer-events:none}
.stage .guides line{stroke:#e3e6da;stroke-width:2}
.stage .guides line.base{stroke:#a9b69b;stroke-width:2.5;stroke-dasharray:8 12}
.stage .guides text{font:22px 'IBM Plex Mono',monospace;fill:#8a957f}
.stage .overlay path.outline{fill:none;stroke:#37533b;stroke-width:2;vector-effect:non-scaling-stroke}
.stage .overlay line.adv{stroke:#8ca46b;stroke-width:2;stroke-dasharray:8 8}
.stage .overlay polyline.lasso{fill:#d7f75b40;stroke:#37533b;stroke-width:3;stroke-dasharray:10 8}
.stage .overlay circle.cursor{fill:none;stroke:#37533b;stroke-width:2;opacity:.6}
.stage.dragover{box-shadow:0 0 0 3px var(--glow),0 14px 40px #20251f14}
.stage-empty{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:var(--muted);font-size:12px;pointer-events:none}
.canvas-label{bottom:12px}

/* --- glyph strip (all characters of the font) --- */
.strip-wrap{border-top:1px solid var(--line)}
.strip-empty{padding:12px 16px 0;font-size:12px;color:var(--muted)}
.strip-empty .demo-link{min-height:0}
.glyph-strip{display:flex;gap:8px;padding:13px 16px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:thin}
.glyph-strip h2{display:none}
.glyph-strip .cells{display:contents}
.glyph-strip .cell{position:relative;flex:0 0 37px;height:40px;border:1px solid var(--line);border-radius:5px;display:grid;place-items:center;font-size:16px;color:#737d69;background:#fff;padding:0;overflow:hidden;transition:background .2s,border-color .2s,transform .3s cubic-bezier(.2,.8,.2,1.4)}
.glyph-strip .cell:hover{border-color:#7a8572}
.glyph-strip .cell svg{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px)}
.glyph-strip .cell svg path{fill:var(--ink)}
.glyph-strip .cell .ghost-char{color:#b8bfae;font-size:15px}
.glyph-strip .cell .label{display:none}
.glyph-strip .cell.filled{background:#fbfbf6}
.glyph-strip .cell.on{background:var(--glow);border-color:#8a9a62;color:var(--ink)}
.glyph-strip .cell.drop{border-color:var(--green);box-shadow:0 0 0 2px var(--glow)}
.glyph-strip .cell.auto{border-style:dashed;cursor:default;background:transparent}
.glyph-strip .cell.auto svg path{fill:#8a957f}
.glyph-strip.expanded{flex-wrap:wrap;max-height:330px;overflow-y:auto}
.glyph-strip.expanded h2{display:block;flex:0 0 100%;margin:8px 0 0;font:500 10px/1.4 'IBM Plex Mono',monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.glyph-strip.expanded h2 small{text-transform:none;letter-spacing:0;margin-left:6px;font-family:Manrope,sans-serif}
.strip-bar{display:flex;align-items:center;gap:14px;padding:0 16px 12px;flex-wrap:wrap}
.strip-bar .demo-link{min-height:32px;margin-left:auto}
.strip-legend{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:6px}
.strip-legend .lg{display:inline-block;width:10px;height:10px;border-radius:3px;border:1px solid var(--line);margin-left:6px}
.strip-legend .lg.made{background:#fbfbf6;border-color:#7a8572}.strip-legend .lg.missing{background:#fff}.strip-legend .lg.auto{border-style:dashed}

/* --- inspector --- */
.inspector>div{margin-bottom:4px}
.inspector .field-label:first-child{margin-top:0}
.slider{display:grid;grid-template-columns:76px 1fr 34px;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin:6px 0}
.slider output{font:10px 'IBM Plex Mono',monospace;color:var(--ink);text-align:right}
.slider.inline{display:inline-grid;grid-template-columns:auto 140px;margin:0}
.context{font-size:40px;line-height:1.25;padding:6px 10px;border-radius:6px;background:var(--paper);white-space:nowrap;overflow:hidden;font-kerning:normal;margin-top:8px}
.inspector-links{display:flex;gap:16px;flex-wrap:wrap}
.inspector-links .demo-link{min-height:34px}
.demo-link.danger{color:var(--error)}
.demo-link.inline{min-height:0;display:inline;font-size:inherit}
details.more{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
details.more summary{cursor:pointer;font-size:11px;font-weight:650;list-style:none;display:flex;align-items:center;gap:6px}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:'+';font:12px 'IBM Plex Mono',monospace;color:var(--muted);transition:transform .3s}
details.more[open] summary::before{transform:rotate(45deg)}
.check{display:inline-flex;gap:8px;align-items:center;font-size:12px}
.field.compact{width:auto;min-height:34px;padding:6px 10px;font-size:12px;max-width:60%}
.export-card .row strong{text-align:right}
.export-card .auto-list{font-size:20px;letter-spacing:.06em;color:var(--muted);padding:6px 0;min-height:0}
.lib-fields{display:grid;gap:2px}
.lib-fields .check{margin-top:12px}
.credits{margin-top:18px;font-size:10px}

/* --- test --- */
.preview{border-radius:9px;padding:14px 18px;margin:16px 0 10px;transition:background .4s,color .4s;background:var(--paper)}
.preview[data-theme=paper]{background:var(--paper);color:var(--ink)}
.preview[data-theme=night]{background:var(--ink);color:var(--paper)}
.preview[data-theme=glow],.preview[data-theme=sage]{background:var(--glow);color:var(--ink)}
.preview-text{font-size:120px;line-height:1.12;min-height:1.2em;outline:none;white-space:pre-wrap;word-break:break-word;max-height:46vh;overflow:auto;font-kerning:normal;font-feature-settings:"kern" 1}
.preview-bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-bottom:18px}
.themes{display:flex;gap:6px}
.swatch{width:24px;height:24px;border-radius:50%;border:1px solid #a4ac9b;padding:0}
.swatch.paper{background:linear-gradient(135deg,var(--paper) 50%,var(--ink) 50%)}
.swatch.night{background:linear-gradient(135deg,var(--ink) 50%,var(--paper) 50%)}
.swatch.glow{background:linear-gradient(135deg,var(--glow) 50%,var(--ink) 50%)}
.hint{margin-left:auto;color:#75521e;font-size:10px}
.test-controls .field-label{display:flex;justify-content:space-between}
.kerning .pair-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.kerning .chip{background:#fff}
.kerning .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.kerning .chip i{font-style:normal;color:var(--green);margin-left:4px;font-size:10px}
.kerning .chip.on i{color:var(--glow)}
.pair-sample{font-size:84px;line-height:1.15;text-align:center;background:var(--paper);border-radius:8px;font-kerning:normal;margin:6px 0}
.pair-add{display:flex;align-items:center;gap:10px}
.pair-add .field{width:90px;min-height:34px}
.test-paper .note{font-size:12px;color:var(--muted)}

/* --- quality panel (FONT-QUALITY.md §8) --- */
.quality{border:1px solid var(--line);border-radius:10px;padding:16px;margin:4px 0 0;background:var(--paper)}
.q-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.q-head b{font-size:13px}
.q-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.q-list li{display:grid;grid-template-columns:10px 1fr;gap:9px;font-size:12px;line-height:1.5}
.q-list li small{display:block;color:var(--muted);font-size:11px}
.q-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;background:#a4ac9b}
.q-dot.pass{background:var(--green)}.q-dot.fail,.q-dot.error{background:var(--error)}.q-dot.review{background:#c39a3c}.q-dot.not_run,.q-dot.not_applicable{background:transparent;border:1px solid #a4ac9b}
.q-list button.demo-link{min-height:0;font-size:11px}
.quality details{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.quality summary{cursor:pointer;font-size:11px;font-weight:650}
.q-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:10.5px}
.q-table td{padding:5px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.q-table td:first-child{font-family:'IBM Plex Mono',monospace;white-space:nowrap}
.q-state{font-family:'IBM Plex Mono',monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em}

/* --- screenshot dialog --- */
.batch-modal{position:fixed;inset:0;background:#20251f70;display:grid;place-items:center;z-index:60;padding:24px;animation:fadeIn .25s ease}
.batch-modal .sheet{width:min(1240px,100%);height:min(840px,100%);background:var(--paper);border:1px solid #aab39d;border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 90px #20251f30;animation:modalIn .4s cubic-bezier(.2,.8,.2,1)}
.sheet-head{display:flex;align-items:center;gap:24px;padding:16px 22px;border-bottom:1px solid var(--line)}
.sheet-head h2{margin:0;font-size:23px;font-weight:500;letter-spacing:-.035em}
.sheet-head .iconbtn{margin-left:auto}
.batch-steps{display:flex;gap:22px}
.batch-steps button{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px;padding:0}
.batch-steps .step-n{width:25px;height:25px;border:1px solid #bec4b6;border-radius:50%;display:grid;place-items:center;font-size:10px;transition:background .3s}
.batch-steps button.on{color:var(--ink);font-weight:650}
.batch-steps button.on .step-n{background:var(--glow);border-color:var(--glow)}
.batch-body{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.batch-body.dragover::after{content:"Drop to add";position:absolute;inset:14px;border:2px dashed var(--green);border-radius:13px;background:#e3efbbdd;display:grid;place-items:center;font-size:22px;font-weight:500;letter-spacing:-.03em;pointer-events:none}
.batch-step{flex:1;min-height:0;display:flex;flex-direction:column}
.batch-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;margin:22px;border:1px dashed #839071;border-radius:13px;background:#eff0e7}
.batch-empty h2{font-size:25px;font-weight:500;letter-spacing:-.04em;margin:10px 0}
.batch-empty p{color:var(--muted);max-width:420px;margin:0 0 20px}
.batch-work{flex:1;min-height:0;display:grid;grid-template-columns:132px 1fr 320px}
.shot-col{border-right:1px solid var(--line);overflow:auto;padding:12px;display:flex;flex-direction:column;gap:12px}
.shot-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.shot{position:relative}
.shot-pick{width:100%;padding:4px;border-radius:8px;border:2px solid transparent;background:#fff;display:grid;gap:4px;text-align:left}
.shot-pick img{width:100%;height:70px;object-fit:contain;background:#fff;border-radius:5px}
.shot-pick span{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot.on .shot-pick{border-color:var(--ink)}
.shot-x{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid var(--line);font-size:14px;line-height:1;color:var(--muted)}
.shot-x:hover{color:var(--error)}
.add-more{width:100%;min-height:64px;border:1px dashed #a4ad97;border-radius:8px;color:var(--muted);font-size:12px}
.add-more:hover{border-color:var(--ink);color:var(--ink)}
.sheet-view{position:relative;overflow:auto;background-color:#f6f6f0;background-image:radial-gradient(#d4d9ca 1px,transparent 1px);background-size:18px 18px;display:grid;place-items:center;padding:16px}
.sheet-view canvas{max-width:100%;max-height:100%;display:block;box-shadow:0 6px 25px #20251f14}
.sheet-view svg{position:absolute}
.sheet-view svg rect{fill:#d7f75b26;stroke:#37533b;stroke-width:1.5;vector-effect:non-scaling-stroke;cursor:pointer}
.sheet-view svg rect.dup{stroke:#8a957f;fill:#20251f0a;stroke-dasharray:2 4}
.sheet-view svg text.dup{fill:#8a957f;font-weight:400}
.sheet-view svg rect.skip{stroke:var(--error);fill:#a5313214;stroke-dasharray:5 4}
.sheet-view svg text{fill:#37533b;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3px;pointer-events:none;font-family:Manrope,sans-serif}
.sheet-view.picking,.sheet-view.picking svg,.sheet-view.picking rect{cursor:crosshair}
.sheet-side{padding:20px;display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--line);overflow:auto;background:#fff}
.sheet-side .field-label{margin:0}
.sheet-side textarea{font:18px/1.4 Manrope,sans-serif;letter-spacing:.08em;resize:vertical}
.sheet-side .count{margin:0;font-size:12px}
.count.ok{color:var(--green)}.count.warn{color:#75521e}
.quick{display:flex;flex-wrap:wrap;gap:6px}
.quick .chip{min-height:30px;padding:5px 11px}
.colour-row{gap:8px}
.colour-chip{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);box-shadow:inset 0 0 0 2px #fff}
#pickColour.on{background:var(--ink);color:#fff}
.batch-foot{display:flex;align-items:center;gap:14px;padding:14px 22px;border-top:1px solid var(--line);background:var(--paper)}
.batch-foot .grow{flex:1;margin:0}
.progress{color:var(--green);font-size:11px}
.pick-top{display:flex;gap:14px;align-items:end;padding:16px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pick-top .field-label{margin:0 0 6px}
.pick-top .field{width:260px}
.pick-top p{margin:0;max-width:60ch}
.pick-grid{flex:1;overflow:auto;padding:6px 22px 30px}
.pick-grid h4{font:500 11px/1.2 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:22px 0 10px}
.pick-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.pick-cell{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#fff;min-height:76px}
.pick-cell>b{font:600 20px/1 Manrope,sans-serif;width:26px;flex:none;text-align:center}
.pick-cell.missing{border-style:dashed;background:transparent;color:var(--muted)}
.pick-cell.missing span{font-size:11px}
.tiles{display:flex;gap:6px;overflow-x:auto;padding:2px}
.tile{width:56px;height:56px;flex:none;padding:4px;border-radius:8px;border:2px solid var(--line);background:#fff;display:grid;place-items:center}
.tile img{max-width:100%;max-height:100%}
.tile.keep{font-size:11px;color:var(--muted);background:var(--paper)}
.tile.on{border-color:var(--ink);box-shadow:0 0 0 3px var(--glow)}

@media(max-width:1100px){.batch-work{grid-template-columns:110px 1fr 280px}}
@media(max-width:800px){
  .page-heading .heading-tools{margin-top:0;justify-content:flex-start}
  .canvas-tools{flex-wrap:wrap;height:auto;padding:8px 12px;row-gap:4px}
  .brush-size{display:none}
  .batch-modal{padding:0;place-items:end center}
  .batch-modal .sheet{height:94vh;border-radius:16px 16px 0 0}
  .batch-work{grid-template-columns:1fr;grid-template-rows:auto minmax(240px,1fr) auto;overflow:auto}
  .shot-col{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;overflow-x:auto}
  .shot-list{display:flex}.shot-pick{width:96px}.add-more{width:96px;flex:none}
  .sheet-side{border-left:0;border-top:1px solid var(--line)}
  .sheet-head{gap:14px;padding:12px 16px}.sheet-head h2{display:none}
  .preview-text{font-size:80px}
}
@media(max-width:540px){
  .canvas-wrap{min-height:0;padding:12px 12px 30px}
  .glyph-nav{order:3;width:100%;justify-content:center}
  .inspector>div,.inspector>details,.inspector>.inspector-links{grid-column:1/-1}
  .slider{grid-template-columns:70px 1fr 30px}
  .project-select{min-width:0;max-width:100%;flex:1}
  .pick-top .field{width:100%}
  .batch-foot{flex-wrap:wrap}.batch-foot .grow{flex-basis:100%;order:-1}
  .field.compact{max-width:55%}
  .export-card .row{flex-wrap:wrap}
}
.slider input{width:100%;min-width:0}
.slider output{overflow:hidden}
.q-table{table-layout:fixed}.q-table td{overflow-wrap:anywhere}.q-table td:first-child{width:38%;white-space:normal;word-break:break-word}.q-table td.q-state{width:18%}