/* Foam Studio app styles. Visual identity (#276): see docs/launch/foam-design-276/DESIGN.md.
   Presentation only: every functional rule from before (hidden/empty states, pointer-events,
   touch-action, vector-effect) is kept below with the same selectors. */
@font-face{font-family:"Foam Display";src:url("assets/fonts/fredoka.woff2") format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Foam Text";src:url("assets/fonts/nunito.woff2") format("woff2");font-weight:400 800;font-display:swap}
:root{
  --ink-900:#151b28;--ink-800:#1e2738;--ink-700:#2a3550;--ink-line:#3a4664;
  --cream:#f6ecda;--cream-muted:#c9bba6;
  --paper:#fbf5e9;--paper-2:#f3e7d0;--paper-line:#e2d2b4;--field:#fffdf8;--field-line:#7d6c5a;
  --text:#2b2130;--text-muted:#5f5263;
  --ember:#f08a4b;--ember-600:#b5461a;--ember-700:#a53f16;--ember-edge:#6e2a0d;
  --brass:#f2c14e;--brass-700:#7a5410;--brass-line:#d9a441;
  --clear:#2f7d6d;--contact:#c0322b;
  --focus:#1f3f7a;
  --r-sm:8px;--r-md:14px;--r-lg:20px;
  --display:"Foam Display","Trebuchet MS",system-ui,sans-serif;
  --body:"Foam Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  accent-color:var(--ember-600);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink-900);background-image:radial-gradient(ellipse 50% 420px at 80% 0%,rgba(240,138,75,.15),transparent 70%);background-repeat:no-repeat}
body{margin:0 auto;max-width:1240px;padding:0 20px 48px;font-family:var(--body);font-size:16px;line-height:1.55;color:var(--cream);
  background:transparent}
h1,h2,h3,legend,summary{font-family:var(--display);font-weight:600;letter-spacing:.005em}
h2{font-size:26px;line-height:1.2;margin:0 0 .35em}
h3{font-size:19px;margin:1.1em 0 .4em}
a{color:var(--ember-700);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Header: mark + name on the ink frame, disclaimer kept prominent. */
header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;padding:18px 0 14px;--focus:var(--brass)}
header h1{display:flex;align-items:center;gap:12px;margin:0;font-size:30px;line-height:1.1;color:var(--cream)}
header h1::before{content:"";flex:none;width:46px;height:46px;background:url("assets/mark.svg") center/contain no-repeat}
header .disclaimer{flex:1 1 420px;margin:0;font-size:14.5px;color:var(--cream-muted);border-left:3px solid var(--brass);padding:2px 0 2px 12px;max-width:760px}

/* Plus panel (built by license-gate.js): an ink "counter" card, brass trim. #plus beats the injected .plus-panel rule. */
#plus.plus-panel{--focus:var(--brass);background:var(--ink-800);border:2px solid var(--ink-line);border-top:4px solid var(--brass);border-radius:var(--r-lg);
  padding:16px 22px 14px;margin:6px 0 18px;color:var(--cream);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
#plus.plus-panel > h2,#plus.plus-panel > p{flex:1 1 100%;margin:.15rem 0}
#plus.plus-panel h2{font-size:20px;color:var(--cream)}
#plus.plus-panel p{color:var(--cream-muted);font-size:15px}
#plus.plus-panel #plus-sales{color:var(--cream)}
#plus.plus-panel label{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;color:var(--cream);flex:1 1 320px;max-width:440px}
#plus.plus-panel input{flex:1;width:auto;min-width:0}
#plus.plus-panel #plus-status{flex:1 1 100%;font-weight:700;color:var(--brass);margin:.2rem 0 0}
#plus.plus-panel #plus-status:empty{display:none}
#plus-buy{color:var(--ember);font-family:var(--display);font-weight:600;padding:10px 4px;display:inline-block}
#plus-buy::after{content:" \2197";}
html[data-plan=plus] #plus.plus-panel{border-top-color:var(--clear)}

/* Work surfaces: parchment benches. */
#armor-set,#bracer{--focus:#1f3f7a;background:var(--paper);color:var(--text);border-radius:var(--r-lg);padding:22px 26px 26px;margin:0 0 22px;
  box-shadow:0 14px 34px rgba(0,0,0,.35)}
#armor-set > h2::after,#bracer > h2::after{content:"";display:block;width:56px;height:5px;border-radius:3px;background:var(--ember);margin-top:6px}
#armor-set p,#bracer p{margin:.5em 0}

/* Form controls. */
label{font-size:14.5px;font-weight:650;color:var(--text)}
input[type=number],input[type=text],select{font:500 15px/1.2 var(--body);color:var(--text);background:var(--field);border:1.5px solid var(--field-line);border-radius:var(--r-sm);
  min-height:40px;padding:7px 10px;max-width:100%}
input::placeholder{color:#7a6d78;opacity:1}
select{padding-right:6px}
input:disabled,select:disabled{background:var(--paper-2);border-style:dashed;color:var(--text-muted)}
input[type=range]{min-height:32px;vertical-align:middle;width:min(100%,220px)}
input[type=checkbox]{width:20px;height:20px;vertical-align:middle}
input[type=file]{font:500 14px var(--body);color:var(--text-muted);max-width:100%}
input[type=file]::file-selector-button{font:600 15px var(--display);color:var(--text);background:var(--field);border:2px solid var(--text);border-radius:999px;padding:7px 14px;margin-right:10px;cursor:pointer}
fieldset{border:1.5px dashed #cdb790;border-radius:var(--r-md);padding:10px 16px 14px;margin:12px 0;min-width:0}
fieldset:disabled{opacity:.8}
legend{font-size:16px;padding:0 6px;color:var(--text)}

/* Buttons: chunky foam slabs with a pressed state. */
button{font:600 15px/1.15 var(--display);letter-spacing:.01em;color:var(--text);background:var(--field);border:2px solid var(--text);border-radius:999px;
  min-height:40px;padding:8px 16px;cursor:pointer;box-shadow:0 3px 0 var(--text);margin:2px 0 5px;transition:transform .1s,box-shadow .1s,background-color .1s;touch-action:manipulation}
button:hover{background:#fff1dc}
button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--text)}
#plus-unlock,[data-kit="motion-check"],#bracer-pdf{background:var(--ember-600);color:#fff;border-color:var(--ember-edge);box-shadow:0 3px 0 var(--ember-edge)}
#plus-unlock:hover,[data-kit="motion-check"]:hover,#bracer-pdf:hover{background:var(--ember-700)}
#plus-forget{background:transparent;color:var(--cream);border-color:var(--cream-muted);box-shadow:none}
#plus-forget:hover{background:var(--ink-700)}
button:disabled,button:disabled:hover,button:disabled:active{cursor:not-allowed;background:transparent;color:var(--text-muted);border:2px dashed #a3968a;box-shadow:none;transform:none}
#bracer-remove-piece{color:#8f2a1f;border-color:#8f2a1f;box-shadow:0 3px 0 #8f2a1f;float:right;margin:-2px 0 6px 12px}

/* Plus-only controls in the free plan: a brass "Plus" tag. The accessible name keeps " (Plus)". */
html[data-plan=free] body [data-plus]::after{content:" (Plus)";content:"Plus"/" (Plus)";display:inline-block;margin-left:8px;padding:3px 8px 2px;border-radius:999px;
  background:var(--brass);color:var(--text);border:1.5px solid var(--text);font:700 11.5px/1.1 var(--display);letter-spacing:.06em;vertical-align:1px}
html[data-plan=free] body [data-plus]:disabled::after{background:#f3e2b4}

/* Armor set: at desktop widths the mannequin sits beside its controls. */
#armor-set{margin:1rem 0 22px}
.kit-actions,.kit-exports{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.kit-actions{padding:10px 0 4px;border-bottom:1.5px dashed var(--paper-line);margin-bottom:6px}
.kit-open{display:inline-flex;flex-wrap:wrap;gap:.35rem .6rem;align-items:center}
.kit-open input{max-width:100%}
.kit-actions + [role="status"]:empty{display:none}
.kit-view{display:block;width:100%;max-height:560px;border-radius:var(--r-lg);
  background:radial-gradient(ellipse 55% 45% at 50% 92%,rgba(240,138,75,.34),transparent 70%),radial-gradient(ellipse at 50% 30%,#34405e,#1b2232 72%);
  box-shadow:inset 0 0 0 2px #2a3550}
.kit-body{stroke-width:.35}
.kit-ground{fill:#0f141f;opacity:.75}
.kit-armor{stroke:#213650;stroke-width:1.3;cursor:pointer}
.kit-active{stroke:#a54418;stroke-width:2}
.kit-hotspot{fill:var(--cream);stroke:var(--ink-900);stroke-width:2.5;cursor:pointer}
.kit-hotspot:hover{fill:#fff}
.kit-selected{fill:var(--ember);stroke:var(--cream)}
.kit-zones{display:flex;flex-wrap:wrap;gap:.45rem;margin:.75rem 0 .5rem}
.kit-zones button{box-shadow:0 2px 0 var(--text);padding:7px 14px}
.kit-zones [aria-pressed="true"]{font-weight:700;background:var(--ember-600);color:#fff;border-color:var(--ember-edge);box-shadow:0 2px 0 var(--ember-edge)}
.kit-measurements{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:.6rem .9rem}
.kit-measurements label{display:grid;gap:.2rem;align-content:end}
.kit-measurements input{width:8rem}
.armor-strap,.stock-strap{fill:none;stroke:#7e22ce;stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none}
.kit-strap{stroke:#6b21a8;stroke-width:2;pointer-events:none}
[data-kit="coverage"]:empty,[data-kit="cuirass-fit"]:empty{display:none}
.kit-connector{stroke:#5a3720;stroke-width:.65;pointer-events:none}
[data-kit="fit-progress"]:empty,[data-kit="motion-live"]:empty,[data-kit="motion-status"]:empty,[data-kit="motion-detail"]:empty{display:none}
.kit-motion-controls{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:end;margin:.55rem 0}
.kit-motion-controls[hidden]{display:none}
.kit-motion-controls label{max-width:100%}
.kit-motion-controls select{max-width:100%}
/* Motion results on the mannequin: clear = solid teal outline, contact = thick dashed red outline plus the clash marker. */
.kit-motion-clear{stroke:#5fd4bd;stroke-width:2.5}
.kit-motion-contact{stroke:#ff5a4f;stroke-width:3;stroke-dasharray:5 3}
.kit-clash-point{fill:#e0362c;stroke:#fff;stroke-width:3;pointer-events:none}
.kit-arm-pose-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:.65rem;margin:.6rem 0}
.kit-arm-pose-grid fieldset{margin:0;min-width:0}
.kit-arm-pose-grid .kit-motion-controls{margin:0}
.kit-arm-pose-grid label{display:grid;gap:.2rem}
#armor-set > label{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.5rem 0}
[data-kit="motion-edits"]{margin:.3rem 0;padding-left:1.4rem}

/* Status read-outs: a brass rule on the left, text carries the result. */
#armor-set [role="status"]:not(:empty),#bracer [role="status"]:not(:empty),[data-kit="coverage"]:not(:empty){border-left:3px solid var(--brass-line);padding:2px 0 2px 11px;margin:.45em 0}
#bracer-detail:not(:empty){border-left:3px solid var(--paper-line);padding-left:11px}

@media (min-width:1100px){
  #armor-set{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:28px;align-items:start}
  #armor-set > *{grid-column:1}
  #armor-set > .kit-view{grid-column:2;grid-row:1 / span 24;align-self:start}
  #armor-set > [data-kit="links"],#armor-set > details,#armor-set > [data-kit="stock"]{grid-column:1 / -1}
  #armor-set > [data-kit="links"]{margin-top:10px}
  #armor-set > button{justify-self:start}
}

/* Collapsible panels: a paper tab you can see and hit. */
details{border:2px solid var(--paper-line);border-radius:var(--r-md);background:#fffaf1;margin:12px 0;padding:0 16px}
details[open]{padding-bottom:12px}
summary{cursor:pointer;font-size:17px;min-height:48px;display:flex;align-items:center;gap:10px;padding:10px 0;list-style:none;color:var(--text)}
summary::-webkit-details-marker{display:none}
summary::before{content:"";flex:none;width:16px;height:18px;background:var(--ember-600);clip-path:polygon(12% 4%,96% 50%,12% 96%);transition:transform .15s}
details[open] > summary::before{transform:rotate(90deg)}
details[open] > summary{border-bottom:1.5px dashed var(--paper-line);margin-bottom:8px}

/* Pattern previews: pattern-paper / cutting-mat surfaces. */
.stock-controls,.seam-controls{display:flex;flex-wrap:wrap;gap:.6rem .9rem;align-items:end;margin:.6rem 0}
.stock-controls label,.seam-controls label{display:grid;gap:.2rem}
.stock-controls input{width:8rem}
.stock-view{display:block;width:100%;height:350px;touch-action:none;border-radius:var(--r-md);border:2px solid var(--paper-line);
  background-color:#f4e8cf;background-image:linear-gradient(#e6d4b0 1px,transparent 1px),linear-gradient(90deg,#e6d4b0 1px,transparent 1px);background-size:20px 20px}
.stock-sheet{fill:#fffcf4;stroke:#7d6c5a;vector-effect:non-scaling-stroke}
.stock-panel{cursor:grab}
.stock-cut{fill:#dbeafe;stroke:#2b4a7a;vector-effect:non-scaling-stroke}
.stock-selected .stock-cut{fill:#ffd9b8;stroke:#b5461a;stroke-width:2px}
.stock-guide,.stock-tick{fill:none;stroke:#5f5263;stroke-width:1px;vector-effect:non-scaling-stroke;pointer-events:none}
.stock-guide{stroke-dasharray:3 2}
.stock-panel text{fill:var(--text);font-size:12px;pointer-events:none}

.seam-controls label[hidden]{display:none}
.seam-controls input{width:6.5rem}
.seam-edit-view{display:block;width:100%;height:200px;border-radius:var(--r-md);background:#fffcf4;border:2px solid var(--paper-line)}
.seam-edit-cut{fill:#f4ead6;stroke:#334155}
.seam-edit-guide{fill:none;stroke:#2563eb;stroke-dasharray:3 2}
.seam-edit-saved{stroke:#0f766e;stroke-width:2px}
.seam-edit-draft{stroke:#c2410c;stroke-width:2px;stroke-dasharray:5 3}

.armor-shell-face{fill:#dbeafe;stroke:none;pointer-events:none}

[data-nest-panel^="chest/"] .stock-cut{fill:#dbeafe}
[data-nest-panel^="backplate/"] .stock-cut{fill:#bfdbfe}
[data-nest-panel*="-shoulder/"] .stock-cut{fill:#fed7aa}
[data-nest-panel*="-upper-arm/"] .stock-cut{fill:#ddd6fe}
[data-nest-panel*="-bracer/"] .stock-cut{fill:#ccfbf1}
[data-nest-panel*="-greave/"] .stock-cut{fill:#d9f99d}
[data-nest-panel].stock-selected .stock-cut{stroke:#b5461a;stroke-width:2.5px}

/* Piece designer. */
#bracer{max-width:none}
#bracer label{display:inline-grid;gap:.2rem;margin:0 .9rem .7rem 0;vertical-align:bottom}
#bracer label:has(> input[type=checkbox]){display:inline-flex;align-items:center;gap:.5rem;min-height:40px}
#bracer .seam-controls label,#bracer .stock-controls label{margin:0}
/* Labels built as <span>caption</span> (mm) <input>: keep caption and unit on one line. */
label:has(> span){grid-template-columns:max-content 1fr;column-gap:.3em;align-content:end}
label:has(> span) > :is(input,select){grid-column:1 / -1}
#bracer input[type=number]{width:8rem}
#bracer > p:has(> label){display:flex;flex-wrap:wrap;align-items:end;gap:.6rem 1.2rem}
#bracer > p > label{margin:0}
#bracer-assembly,#bracer-flat{display:block;border-radius:var(--r-md);border:2px solid var(--paper-line)}
#bracer-assembly{background:radial-gradient(ellipse at 50% 40%,#fffdf7,#f1e4c8)}
#bracer-flat{background-color:#fffcf4;background-image:linear-gradient(#efe2c5 1px,transparent 1px),linear-gradient(90deg,#efe2c5 1px,transparent 1px);background-size:13px 13px}
#bracer-flat text{fill:var(--text);font-family:var(--body);font-weight:700}
#bracer h3{margin-top:.6em}
#bracer-fit{background:#fffaf1}
#bracer-paper{min-width:9rem}

@media (max-width:640px){
  body{padding:0 12px 32px;font-size:15.5px}
  header{padding:12px 2px 10px}
  header h1{font-size:25px}header h1::before{width:38px;height:38px}
  #plus.plus-panel{padding:14px 16px 12px}
  #plus.plus-panel label{flex:1 1 100%;max-width:none}
  #armor-set,#bracer{padding:16px 14px 18px;border-radius:var(--r-md)}
  h2{font-size:23px}
  button{min-height:44px}
  input[type=number],input[type=text],select{min-height:44px;font-size:16px}
  details{padding:0 12px}
  fieldset{padding:8px 12px 12px}
  #bracer input[type=number],.stock-controls input{width:7.5rem}
  .kit-measurements{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem .7rem}
  .kit-measurements input{width:100%}
  .kit-view{max-height:460px}
  #bracer-remove-piece{float:none;margin:0 0 6px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media (forced-colors:active){button{border:2px solid ButtonText}html[data-plan=free] body [data-plus]::after{border-color:CanvasText}}
/* Verdict lines (motion summary, fit and assembly checks) read as a result card; the words carry pass/fail. */
#armor-set [data-kit="motion-status"]:not(:empty),#bracer-fit-status:not(:empty),#bracer-body-fit:not(:empty),#bracer-proof-status:not(:empty),[data-stock="proof-status"]:not(:empty),[data-nest="proof"]:not(:empty){
  background:var(--paper-2);border-left-width:5px;border-radius:0 var(--r-sm) var(--r-sm) 0;padding:8px 12px;font-weight:700}

/* Ornament (#277): green dash-dot like the printed transfer pages, on pattern paper. */
.armor-ornament{fill:none;stroke:#0a7a5a;stroke-width:1.6;stroke-dasharray:5 2 1 2;vector-effect:non-scaling-stroke;pointer-events:none}
.ornament-line{fill:none;stroke:#0a7a5a;stroke-width:1.3;vector-effect:non-scaling-stroke}
.ornament-panel{fill:var(--field);stroke:var(--text);stroke-width:1;vector-effect:non-scaling-stroke}
#bracer-ornament-view{max-height:420px;background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--r-md)}