/* DIY designer page only (content/diy.html). Site tokens from site.css; nothing pinned. */
.diy fieldset{border:1px solid var(--line);padding:1rem 1.1rem 1.1rem;margin:0 0 1.25rem;min-width:0}
.diy legend{font-family:var(--display);font-size:1.15rem;padding:0 .4rem}
.f-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem 1rem;margin:0 0 .7rem}
.f-row label{font-weight:600}
.f-in{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted)}
.diy input[type=number],.diy select{font:inherit;font-family:var(--mono);color:var(--text);background:var(--board-2);
  border:1px solid var(--line);border-radius:4px;padding:.35rem .5rem;min-height:2.5rem}
.diy input[type=number]{width:6rem;text-align:right}
.diy select{font-family:var(--body);max-width:100%}
.diy input:focus-visible,.diy select:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.diy input[aria-invalid=true]{border-color:var(--copper)}
.f-check{display:flex;align-items:center;gap:.6rem;margin:0 0 .7rem}
.f-check input{width:1.2rem;height:1.2rem;accent-color:var(--copper);margin:0}
.f-check label{font-weight:600}
.f-sub{padding-left:1.1rem;border-left:1px solid var(--line);margin-left:.55rem}
.f-sub[hidden]{display:none}
.f-head{font-weight:600;margin:1rem 0 .5rem}
.f-note{color:var(--muted);font-size:.95rem;margin:.2rem 0 0}
.f-note strong{color:var(--text)}
.f-stages{list-style:none;padding:0;margin:0 0 .8rem;counter-reset:st}
.f-stages li{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid var(--line)}
.f-stages li:first-child{border-top:1px solid var(--line)}
.f-stages label{font-weight:600}
.f-btn{font:inherit;cursor:pointer;color:var(--text);background:var(--board-2);border:1px solid var(--line);border-radius:4px;padding:.4rem .9rem;min-height:2.5rem}
.f-btn:hover{border-color:var(--muted)}
.f-btn[disabled]{color:var(--muted);cursor:default}
.f-btn.small{padding:.25rem .7rem;min-height:2.2rem;font-size:.9rem}
.f-more{margin:0 0 1.5rem;border:1px solid var(--line);padding:.6rem 1.1rem}
.f-more summary{cursor:pointer;font-weight:600;padding:.2rem 0}
.f-more[open] summary{margin-bottom:.8rem}
.f-msg{color:var(--copper-hi);min-height:1.2em}
.f-msg:empty{margin:0}

/* Results */
.d-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.6rem 1.25rem;margin:0 0 1.5rem;padding:0}
.d-sum div{border-top:1px solid var(--line);padding-top:.4rem}
.d-sum dt{color:var(--muted);font-size:.85rem}
.d-sum dd{margin:0;font-family:var(--mono);color:var(--fr4);font-size:1.1rem}
.d-tab td.num{white-space:nowrap}
.d-tab th small,.d-tab td small{display:block;color:var(--muted);font-size:.8rem;font-family:var(--body);white-space:normal}
.d-tab tbody th{white-space:normal;min-width:7rem}
.d-tab td.num small{font-family:var(--mono)}
@media (max-width:40rem){.d-tab th,.d-tab td{padding:.4rem .35rem}.d-tab tbody th{min-width:0}.d-tab thead th{white-space:normal}}
.d-tab td.flag{color:var(--copper-hi);font-family:var(--body);text-align:left;white-space:normal}
.d-tab tr.warn th,.d-tab tr.warn td.num{color:var(--copper-hi)}
.d-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.5rem}
@media (max-width:40rem){
  .d-cards thead{display:none}
  .d-cards,.d-cards tbody,.d-cards tr,.d-cards th,.d-cards td{display:block;width:auto}
  .d-cards tr{padding:.6rem 0;border-bottom:1px solid var(--line)}
  .d-cards th,.d-cards td{border:0;padding:.1rem 0;text-align:left}
  .d-cards tbody th{font-family:var(--display);font-size:1.05rem}
  .d-cards td.num{text-align:left}
  .d-cards td[data-l]::before{content:attr(data-l) ": ";color:var(--muted);font-family:var(--body)}
}

/* Schematic under the form, drawn left to right; it scrolls sideways on its own on narrow screens (never pinned) */
main:has(.d-layout){max-width:calc(68rem + 2*var(--gutter))}
main:has(.d-layout) > p,main:has(.d-layout) > ul,main:has(.d-layout) > h1,.d-layout .diy{max-width:var(--measure)}
.d-schem{margin:0 0 1.5rem;border:1px solid var(--line);padding:.8rem .6rem .6rem;background:var(--board)}
#d-schem{overflow-x:auto}
.d-schem svg{display:block;width:100%;height:auto;min-width:36rem;margin:0 auto}
.d-schem figcaption{font-size:.85rem;margin:.4rem .4rem 0}
.s-w{stroke:var(--muted);stroke-width:1.5;fill:none}
.s-r,.s-l{stroke:var(--text);stroke-width:1.6;fill:var(--board)}
.s-l{fill:none}
.s-c{stroke:var(--text);stroke-width:1.5;fill:var(--board)}
.s-dot{fill:var(--muted)}
.s-k{stroke:var(--muted);stroke-width:1;stroke-dasharray:4 3;fill:none}
.s-t{font:12px var(--body);fill:var(--text)}
.s-v{font:12px var(--mono);fill:var(--fr4)}
.s-h{font:12px var(--body);fill:var(--muted)}

/* Maths page (content/maths.html) */
.m-form{margin-top:1rem}
.m-work{white-space:pre-wrap;font-size:.95rem;line-height:1.75}
.m-text{font:inherit;font-family:var(--mono);color:var(--text);background:var(--board-2);border:1px solid var(--line);
  border-radius:4px;padding:.35rem .5rem;min-height:2.5rem;width:14rem;max-width:100%}
.m-text:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.m-text[aria-invalid=true]{border-color:var(--copper)}
.m-picks .f-row label{display:inline-flex;align-items:center;gap:.5rem}
.m-picks select{max-width:min(100%,17rem)}
.m-sw{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;flex:none;vertical-align:-.05rem}
.m-legend{list-style:none;padding:0;margin:1rem 0;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:.9rem;color:var(--muted)}
.m-legend li{display:flex;align-items:center;gap:.45rem}
.m-chartbox{margin:0 0 1.75rem}
.m-chart{position:relative;outline-offset:4px}
.m-chart svg{display:block;max-width:100%;overflow:visible}
.m-grid{stroke:var(--line);stroke-width:1}
.m-ax{font:11px var(--mono);fill:var(--muted)}
.m-lab{font:11px var(--body);fill:var(--muted)}
.m-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.m-hair{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.m-tip{position:absolute;top:.4rem;z-index:2;background:var(--board-2);border:1px solid var(--line);border-radius:4px;
  padding:.4rem .6rem;font-size:.8rem;display:grid;gap:.15rem;pointer-events:none;white-space:nowrap}
.m-tip[hidden]{display:none}
.m-tip strong{font-weight:600}
.m-tip span{display:flex;align-items:center;gap:.4rem;color:var(--muted)}
.m-tip b{font-family:var(--mono);font-weight:400;color:var(--text)}
.m-table summary{cursor:pointer;color:var(--muted);font-size:.9rem;margin:.4rem 0}
.m-c0{background:#c27a3e}.m-c1{background:#3f8fc4}.m-c2{background:#7f9e2c}.m-c3{background:#b468b0}.m-cs{background:#b9ae84}
.d-notice{border:1px solid var(--copper);padding:.8rem 1.1rem;margin:0 0 1.5rem}
.d-notice p{margin:0 0 .5rem}
.d-notice p:last-child{margin:0;color:var(--muted);font-size:.95rem}
.d-notice strong{font-family:var(--display);font-weight:400;font-size:1.15rem;color:var(--copper-hi)}
.d-notice ul{margin:0 0 .6rem;padding-left:1.2rem}