/* Shared component classes for js/ui.js (ARCHITECTURE.md 3.3, 3.4). Owner: WP0, later WP7.
   Package-local rules go through ui.css(id, text), never into this file. */

/* Layout helpers */
.grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin:0 0 var(--sp-4)}
.grid>*{min-width:0}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid.cols-2,.grid.cols-3{grid-template-columns:minmax(0,1fr)}}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.row>*{min-width:0}
.split{display:flex;align-items:flex-start;gap:var(--sp-4)}
.split>:first-child{flex:1;min-width:0}
.split>.side{flex:0 0 340px;min-width:0}
@media (max-width:900px){.split{flex-direction:column;align-items:stretch}.split>.side{flex-basis:auto}}
.stack>*+*{margin-top:var(--sp-4)}
.muted{color:var(--muted)}
.lead{font-size:1.06rem}
.mono{font-family:var(--mono)}
.plain-list{margin:0 0 var(--sp-3);padding:0;list-style:none}
.eyebrow{margin:0 0 var(--sp-1);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
kbd{display:inline-block;padding:0 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:var(--surface);font-size:.8em;line-height:1.5}

/* Buttons and chips (40 px tap targets) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:40px;padding:8px 16px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--accent);color:var(--surface);font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:none}
.btn.secondary{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--ink)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--bg);filter:none}
.btn.danger{background:var(--danger);border-color:var(--danger);color:var(--surface)}
.btn.small{padding:6px 12px;font-size:.88rem}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:4px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:.9rem;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);font-weight:600}

/* Cards and tiles */
.card{display:block;min-width:0;margin:0 0 var(--sp-4);padding:var(--sp-4) var(--sp-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink);text-decoration:none}
.grid>.card{margin:0}
a.card:hover{border-color:var(--accent)}
.card-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1)}
.card-head .eyebrow{margin:0}
.card-tag{margin-left:auto}
.card-icon{font-size:1.1rem;line-height:1}
.card-title{margin:0 0 var(--sp-2);font-size:1.05rem}
.card-body>:last-child{margin-bottom:0}
.tile{display:block;padding:var(--sp-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none}
.tile:hover{border-color:var(--accent)}
.tile-num{display:block;font-size:1.6rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.tile-label{display:block;font-size:.88rem;color:var(--muted)}
.hero{margin:0 0 var(--sp-5);padding:var(--sp-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.count{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-4) 0}
.count-cell{min-width:84px;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);background:var(--accent-soft);text-align:center}
.count-cell b{display:block;font-size:2rem;line-height:1.1;font-variant-numeric:tabular-nums}
.count-cell span{font-size:.8rem;color:var(--muted)}
.count-msg{margin:0;font-size:1.6rem;font-weight:700}

/* Callouts */
.callout{display:flex;gap:var(--sp-3);margin:0 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--surface);border:1px solid var(--line);border-left-width:4px;border-radius:var(--radius-sm)}
.callout-icon{flex:0 0 auto;display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--line);color:var(--ink);font-size:.85rem;font-weight:700}
.callout-main{flex:1;min-width:0}
.callout-label{display:block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.callout-title{margin:0 0 var(--sp-1)}
.callout-body>:last-child{margin-bottom:0}
.callout-note{background:var(--info-soft);border-color:var(--info)}
.callout-note .callout-icon{background:var(--info);color:var(--surface)}
.callout-tip{background:var(--ok-soft);border-color:var(--ok)}
.callout-tip .callout-icon{background:var(--ok);color:var(--surface)}
.callout-warn{background:var(--warn-soft);border-color:var(--warn)}
.callout-warn .callout-icon{background:var(--warn);color:var(--surface)}
.callout-danger{background:var(--danger-soft);border-color:var(--danger)}
.callout-danger .callout-icon{background:var(--danger);color:var(--surface)}
.callout-source{background:var(--bg)}
.callout-inference{border-style:dashed;border-color:var(--warn)}
.callout-inference .callout-icon{background:var(--warn-soft);color:var(--ink)}

/* Badges (ink text on a tinted fill keeps contrast in both themes) */
.badge{display:inline-block;padding:0 8px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font-size:.75rem;font-weight:600;line-height:1.7;white-space:nowrap;vertical-align:middle}
.badge-sourced,.badge-ok{background:var(--ok-soft);border-color:var(--ok)}
.badge-jabil{background:var(--accent-soft);border-color:var(--accent)}
.badge-similar,.badge-info{background:var(--info-soft);border-color:var(--info)}
.badge-inference,.badge-inferred,.badge-warn{background:var(--warn-soft);border-color:var(--warn)}
.badge-inferred,.badge-inference{border-style:dashed}
.badge-danger{background:var(--danger-soft);border-color:var(--danger)}
.badge-vendor,.badge-std{border-style:dashed;border-color:var(--info)}
.badge-mixed{background:linear-gradient(135deg,var(--ok-soft) 50%,var(--warn-soft) 50%);border-color:var(--warn)}
[class*="badge-phase-"]{background:var(--surface);border-left-width:6px}
.badge-phase-power{border-color:var(--ph-power)}
.badge-phase-sec{border-color:var(--ph-sec)}
.badge-phase-pei{border-color:var(--ph-pei)}
.badge-phase-dxe{border-color:var(--ph-dxe)}
.badge-phase-bds{border-color:var(--ph-bds)}
.badge-phase-os{border-color:var(--ph-os)}
.badge-phase-err{border-color:var(--ph-err)}
.ph-power{--ph:var(--ph-power)}.ph-sec{--ph:var(--ph-sec)}.ph-pei{--ph:var(--ph-pei)}.ph-dxe{--ph:var(--ph-dxe)}.ph-bds{--ph:var(--ph-bds)}.ph-os{--ph:var(--ph-os)}.ph-err{--ph:var(--ph-err)}

/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin:0 0 var(--sp-4);border-bottom:1px solid var(--line)}
.tabs [role="tab"]{min-height:40px;padding:8px 14px;border:0;border-bottom:3px solid transparent;background:none;color:var(--muted);font-weight:600;cursor:pointer}
.tabs [role="tab"]:hover{color:var(--ink)}
.tabs [role="tab"][aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}

/* Code and terminal blocks (dark in both themes) */
.code{overflow:hidden;margin:0 0 var(--sp-4);border-radius:var(--radius-sm);background:var(--code-bg);color:var(--code-ink)}
.code figcaption{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:4px 4px 4px var(--sp-3);border-bottom:1px solid rgba(255,255,255,.08);font-size:.82rem}
.code .btn.ghost{border-color:rgba(255,255,255,.2);color:var(--code-ink)}
.code .btn.ghost:hover{background:rgba(255,255,255,.08)}
.code pre,.term{margin:0;padding:var(--sp-3);overflow:auto;font-family:var(--mono);font-size:.86rem;line-height:1.5;white-space:pre;tab-size:8}
.code pre code,.term code{font-size:inherit}
.term{margin:0 0 var(--sp-4);border-radius:var(--radius-sm);background:var(--code-bg);color:var(--code-ink)}
.term-cmd,.term-prompt{color:var(--code-green)}
.term-prompt{user-select:none;-webkit-user-select:none}
.term-err{color:var(--code-red)}
.term-note{color:var(--code-yellow)}

/* Quiz */
.quiz-list{margin:0;padding:0;list-style:none}
.quiz-item{padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.quiz-q{font-weight:600}
.quiz-options{display:grid;gap:var(--sp-2)}
.quiz-opt{min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}
.quiz-opt:hover{border-color:var(--accent)}
.quiz-opt[aria-disabled="true"]{cursor:default}
.quiz-opt[aria-disabled="true"]:hover{border-color:var(--line)}
.quiz-opt.right,.quiz-opt.right:hover{border-color:var(--ok);background:var(--ok-soft)}
.quiz-opt.wrong,.quiz-opt.wrong:hover{border-color:var(--danger);background:var(--danger-soft)}
.quiz-letter{font-weight:700;color:var(--muted)}
.quiz-fb{margin:var(--sp-2) 0 0}
.quiz-fb:empty{display:none}
.quiz-foot{justify-content:space-between;padding-top:var(--sp-3)}
.quiz-score{margin:0;font-weight:600}

/* Step player */
.stepper{margin:0 0 var(--sp-4);padding:var(--sp-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.stepper-dots{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin:0 0 var(--sp-3);padding:0;list-style:none}
.stepper-dots button{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);font-weight:600;cursor:pointer}
.stepper-dots button.done{background:var(--accent-soft);color:var(--ink)}
.stepper-dots button[aria-current="step"]{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.stepper-step>:last-child{margin-bottom:0}
.stepper-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3)}
.stepper-count{margin-left:auto;font-size:.9rem;color:var(--muted)}

/* Progress */
.progress{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px var(--sp-2);margin:0 0 var(--sp-3);font-size:.9rem}
.progress progress{grid-column:1/-1;width:100%;height:10px;border:0;border-radius:999px;background:var(--line);overflow:hidden;-webkit-appearance:none;appearance:none}
.progress progress::-webkit-progress-bar{background:var(--line);border-radius:999px}
.progress progress::-webkit-progress-value{background:var(--accent);border-radius:999px}
.progress progress::-moz-progress-bar{background:var(--accent)}
.progress-text{color:var(--muted);font-variant-numeric:tabular-nums}

/* Definition list and tables */
.kv{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:var(--sp-1) var(--sp-4);margin:0 0 var(--sp-4)}
.kv dt{font-weight:600;color:var(--muted)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
@media (max-width:600px){.kv{grid-template-columns:minmax(0,1fr);gap:0}.kv dd{margin-bottom:var(--sp-2)}}
.scroll-x{margin:0 0 var(--sp-4)}
.tbl{width:100%;border-collapse:collapse;background:var(--surface);font-size:.92rem}
.tbl caption{padding:0 0 var(--sp-2);text-align:left;font-weight:600}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{background:var(--bg);color:var(--muted);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
.sel{font-family:var(--mono);font-size:.82rem;white-space:nowrap}
.sel th{font-family:var(--font)}
.std-mark{margin-left:2px;color:var(--info);font-weight:700}
.sel-empty{margin:0 0 var(--sp-4);font-family:var(--mono);color:var(--muted)}

/* Form fields */
.field{display:grid;gap:var(--sp-1);margin:0 0 var(--sp-3)}
.field>label{font-size:.92rem;font-weight:600}
.field input,.field select,.field textarea{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink)}
.field textarea{min-height:96px;line-height:1.5;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field-hint{font-size:.85rem;color:var(--muted)}
.check{display:flex;align-items:flex-start;gap:var(--sp-2);min-height:40px;padding:8px 0;cursor:pointer}
.check input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}

/* POST code display, beeps, timer, source line */
.post-wrap{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.post{min-width:3.2ch;padding:4px 14px;border:2px solid #333;border-radius:var(--radius-sm);background:#111;color:#ff5a4f;font:700 2.4rem/1.1 var(--mono);letter-spacing:.08em;text-align:center;text-shadow:0 0 6px rgba(255,90,79,.5);font-variant-numeric:tabular-nums}
.beeps{display:flex;align-items:center;gap:var(--sp-2);font-size:.85rem;color:var(--muted)}
.beep-dots{display:flex;gap:4px}
.beep-dot{width:10px;height:10px;border-radius:50%;background:var(--warn)}
.timer{display:inline-block;padding:4px 12px;border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);font:700 2rem/1.2 var(--mono);font-variant-numeric:tabular-nums}
.timer.warn{border-color:var(--warn);background:var(--warn-soft)}
.timer.danger{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}
.src-line{margin:var(--sp-2) 0 0;font-size:.8rem;color:var(--muted)}

/* Disclosure */
details{margin:0 0 var(--sp-3);padding:0 var(--sp-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
details>summary{min-height:40px;margin:0 calc(-1 * var(--sp-4));padding:10px var(--sp-4);font-weight:600;cursor:pointer}
details[open]>summary{margin-bottom:var(--sp-3);border-bottom:1px solid var(--line)}

/* SVG part states (server map, kitchen sample) */
.diagram{display:block;width:100%;height:auto}
.scroll-x>.diagram{min-width:720px}
.part{cursor:pointer;outline:none}
.part :is(rect,path,circle,ellipse,polygon){fill:var(--surface);stroke:var(--line);stroke-width:1.5;transition:fill .2s,stroke .2s}
.part text{fill:var(--ink);stroke:none;font:12px var(--font);pointer-events:none}
.part:hover :is(rect,path,circle,ellipse,polygon),.part:focus-visible :is(rect,path,circle,ellipse,polygon){stroke:var(--accent)}
.part:focus-visible :is(rect,path,circle,ellipse,polygon){stroke-width:3}
.part.active :is(rect,path,circle,ellipse,polygon){fill:var(--accent-soft);stroke:var(--accent);stroke-width:2.5}
.part.fault :is(rect,path,circle,ellipse,polygon){fill:var(--danger-soft);stroke:var(--danger)}
.part.warn :is(rect,path,circle,ellipse,polygon){fill:var(--warn-soft);stroke:var(--warn)}
.part.dim{opacity:.35}
.flowdot{fill:var(--accent)}
svg.hide-label .part text{visibility:hidden}

/* Demo frame */
.demo-wrap{margin:var(--sp-5) 0}
.demo{min-width:0}
.demo-loading{padding:var(--sp-4) 0}