/* shape.css — The shape and spacing scale of §5.4 — radii 6/8/10–12/14/999, the 1080px page — and the
   shared shapes of the controls every screen uses: buttons, fields, icon buttons, links.
   
   The :focus-visible rule of §5.8 lives here too, beside the controls it outlines. */

*{box-sizing:border-box}
.app{max-width:1080px;margin:0 auto;padding:0 20px 48px}
.btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{font-size:14px;padding:7px 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.btn:hover{border-color:var(--line-strong)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:500}
.btn.ghost{background:transparent}
.btn.small{font-size:13px;padding:4px 10px}
.btn:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,tr:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.crumb{margin-bottom:4px}
.link{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:0;font-size:14px}
.link:hover{color:var(--ink)}
summary.link{cursor:pointer;text-decoration:underline;text-underline-offset:3px;width:fit-content}
select,input[type=number],input[type=text],input[type=password],textarea{font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 10px;min-width:0;width:100%}
textarea{min-height:60px;resize:vertical}
select.auto{width:auto}
.icon{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;line-height:1;font-size:16px;flex:none}
.icon:hover{color:var(--danger);border-color:var(--danger)}
.addrow{justify-self:start}
.mini{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;display:inline-block}
.mini[aria-pressed="true"],.mini.on{background:var(--accent-tint);border-color:var(--accent);color:var(--accent)}
.mini:disabled{opacity:.6;cursor:not-allowed}
.end{margin-inline-start:auto}
.inline{display:flex;gap:8px;align-items:center}
/* v5: sentence rows, picker, glossary, check */
input[type=search]{font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 12px;width:100%}
.icon.info{font-size:14px}
.icon.info:hover{color:var(--accent);border-color:var(--accent)}
.btn.danger{color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}

/* «This much of that» — the meter of a stat cell, the progress bar of a collection, the two
   segments of a slot bar and the seven bars of a sparkline (§5.5). The amount is data, and the
   prototype wrote it as an inline width on each element. A served page with an inline style is
   one no stylesheet can govern, so the amount arrives as one of these hundred-and-one classes
   and the width stays here. The value is a whole percent: on a 120px meter that is 1.2px. */
.meter span,.progress span,.hbar span,.slotbar .s,.slotbar .o{width:var(--fill,0%)}
.spark span{height:var(--fill,100%)}
.fill-0{--fill:0%}.fill-1{--fill:1%}.fill-2{--fill:2%}.fill-3{--fill:3%}.fill-4{--fill:4%}.fill-5{--fill:5%}.fill-6{--fill:6%}.fill-7{--fill:7%}.fill-8{--fill:8%}.fill-9{--fill:9%}
.fill-10{--fill:10%}.fill-11{--fill:11%}.fill-12{--fill:12%}.fill-13{--fill:13%}.fill-14{--fill:14%}.fill-15{--fill:15%}.fill-16{--fill:16%}.fill-17{--fill:17%}.fill-18{--fill:18%}.fill-19{--fill:19%}
.fill-20{--fill:20%}.fill-21{--fill:21%}.fill-22{--fill:22%}.fill-23{--fill:23%}.fill-24{--fill:24%}.fill-25{--fill:25%}.fill-26{--fill:26%}.fill-27{--fill:27%}.fill-28{--fill:28%}.fill-29{--fill:29%}
.fill-30{--fill:30%}.fill-31{--fill:31%}.fill-32{--fill:32%}.fill-33{--fill:33%}.fill-34{--fill:34%}.fill-35{--fill:35%}.fill-36{--fill:36%}.fill-37{--fill:37%}.fill-38{--fill:38%}.fill-39{--fill:39%}
.fill-40{--fill:40%}.fill-41{--fill:41%}.fill-42{--fill:42%}.fill-43{--fill:43%}.fill-44{--fill:44%}.fill-45{--fill:45%}.fill-46{--fill:46%}.fill-47{--fill:47%}.fill-48{--fill:48%}.fill-49{--fill:49%}
.fill-50{--fill:50%}.fill-51{--fill:51%}.fill-52{--fill:52%}.fill-53{--fill:53%}.fill-54{--fill:54%}.fill-55{--fill:55%}.fill-56{--fill:56%}.fill-57{--fill:57%}.fill-58{--fill:58%}.fill-59{--fill:59%}
.fill-60{--fill:60%}.fill-61{--fill:61%}.fill-62{--fill:62%}.fill-63{--fill:63%}.fill-64{--fill:64%}.fill-65{--fill:65%}.fill-66{--fill:66%}.fill-67{--fill:67%}.fill-68{--fill:68%}.fill-69{--fill:69%}
.fill-70{--fill:70%}.fill-71{--fill:71%}.fill-72{--fill:72%}.fill-73{--fill:73%}.fill-74{--fill:74%}.fill-75{--fill:75%}.fill-76{--fill:76%}.fill-77{--fill:77%}.fill-78{--fill:78%}.fill-79{--fill:79%}
.fill-80{--fill:80%}.fill-81{--fill:81%}.fill-82{--fill:82%}.fill-83{--fill:83%}.fill-84{--fill:84%}.fill-85{--fill:85%}.fill-86{--fill:86%}.fill-87{--fill:87%}.fill-88{--fill:88%}.fill-89{--fill:89%}
.fill-90{--fill:90%}.fill-91{--fill:91%}.fill-92{--fill:92%}.fill-93{--fill:93%}.fill-94{--fill:94%}.fill-95{--fill:95%}.fill-96{--fill:96%}.fill-97{--fill:97%}.fill-98{--fill:98%}.fill-99{--fill:99%}
.fill-100{--fill:100%}