/* assets/physical-3d.css — the "Design in 3D" panel (js/physical-3d-ui.js,
   assets3d/blocks/three-adapter.js), shared by the Simulation Studio
   (cosim.html, below a physical network's results) and the Pack Designer
   (index.html, Thermal tab). Both pages define the same colour tokens
   (--surface, --surface-2, --ground, --line, --ink, --ink-2, --muted,
   --accent, --accent-soft, --mono) for light and dark, so the panel follows
   the page's theme without colours of its own. */
.physical-3d [hidden], .pack-cooling-3d [hidden] { display:none !important; }
.physical-3d-host { margin-top:14px; }
.physical-3d-host, .pack-cooling-3d { width:100%; min-width:0; }
.physical-3d { width:100%; box-sizing:border-box; padding:14px; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--ink); min-width:0; }
.physical-3d h3 { margin:0; font-size:16px; text-wrap:balance; font-family:var(--sans); text-transform:none; letter-spacing:normal; color:var(--ink); }
.physical-3d-compact p { font-size:13px; line-height:1.6; color:var(--ink-2); max-width:80ch; margin:8px 0 10px; }
.physical-3d button { font-size:12px; border:1px solid var(--line); border-radius:4px; background:var(--surface); padding:6px 9px; min-height:32px; cursor:pointer; color:var(--ink); }
.physical-3d button:hover:not(:disabled) { border-color:var(--accent); }
.physical-3d button:disabled { cursor:not-allowed; color:var(--muted); }
.physical-3d-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:10px 18px; }
.physical-3d-heading > div { min-width:0; }
.physical-3d-lead { margin:4px 0 0; font-size:12px; color:var(--muted); max-width:80ch; }
.physical-3d-note { margin:10px 0 0; font-size:12px; color:var(--muted); max-width:80ch; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.physical-3d-note button { font-size:12px; }
.physical-3d-look-wrap { display:grid; justify-items:end; gap:4px; }
.physical-3d-look { display:inline-flex; }
.physical-3d-look button { border-radius:0; }
.physical-3d-look button:first-child { border-radius:4px 0 0 4px; }
.physical-3d-look button:last-child { border-radius:0 4px 4px 0; border-left:0; }
.physical-3d-look button[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent); font-weight:600; }
.physical-3d-hint { margin:0; font-size:11px; color:var(--muted); max-width:34ch; text-align:right; }
.physical-3d-hint:empty { display:none; }
.physical-3d-body { display:grid; grid-template-columns:minmax(min(100%,320px),1fr) minmax(0,310px); gap:14px; margin-top:12px; }
.physical-3d-stage { position:relative; min-width:0; width:100%; height:clamp(280px, 46vw, 560px); border:1px solid var(--line); border-radius:4px; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 20%, var(--surface) 0%, var(--surface-2) 70%, var(--ground) 100%); }
.physical-3d-stage .assembly-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; cursor:grab; }
.physical-3d-stage .assembly-canvas:active { cursor:grabbing; }
.physical-3d-labels { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.physical-3d-label { position:absolute; left:0; top:0; font-size:11px; line-height:1.3; white-space:nowrap; padding:2px 6px; border:1px solid var(--line); border-radius:3px;
  background:color-mix(in srgb,var(--surface) 88%,transparent); color:var(--ink); font-variant-numeric:tabular-nums; }
.physical-3d-status { position:absolute; left:10px; right:10px; top:10px; margin:0; font-size:12px; color:var(--ink-2); }
.physical-3d-status:empty { display:none; }
.physical-3d-legend { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:11px; color:var(--ink-2); margin-bottom:6px; font-variant-numeric:tabular-nums; }
.physical-3d-legend > span:first-child { color:var(--muted); margin-right:4px; }
/* The stops are assets3d/blocks/core.js TEMPERATURE_STOPS, the same in both themes (tests/physical-3d.test.mjs keeps them equal). */
.physical-3d-ramp { display:inline-block; width:110px; height:8px; border-radius:2px; background:linear-gradient(90deg,#2f5fb3,#4fb0d6,#eee79a,#f0a04b,#c8372d); }
.physical-3d-ramp-coolant { background:linear-gradient(90deg,#163f8c,#2a72c0,#5fa9de,#b9e0f4); }
.physical-3d-legend-coolant { display:inline-flex; align-items:center; gap:6px; margin-left:14px; }
.physical-3d-legend-coolant > span:first-child { color:var(--muted); margin-right:4px; }
.physical-3d-order-key { margin:4px 0 0; }
.physical-3d-side { display:grid; align-content:start; gap:12px; min-width:0; font-size:12px; }
.physical-3d-presets { display:flex; flex-wrap:wrap; gap:6px; }
.physical-3d-lift { display:grid; gap:4px; color:var(--muted); }
.physical-3d-lift output { color:var(--ink); font-variant-numeric:tabular-nums; }
.physical-3d-lift input, .physical-3d-time input { width:100%; margin:0; accent-color:var(--accent); }
.physical-3d fieldset { margin:0; padding:8px 10px 10px; border:1px solid var(--line); border-radius:4px; min-width:0; }
.physical-3d legend { padding:0 4px; font-size:11px; color:var(--muted); }
.physical-3d-components { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:4px 10px; }
.physical-3d-components label { display:flex; gap:6px; align-items:center; min-width:0; }
.physical-3d-parts { display:grid; gap:4px; }
.physical-3d-part { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; }
.physical-3d-part-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.physical-3d-seg { display:inline-flex; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.physical-3d-seg label { position:relative; display:block; }
.physical-3d-seg label + label { border-left:1px solid var(--line); }
.physical-3d-radio { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.physical-3d-seg span { display:block; padding:4px 7px; font-size:11px; cursor:pointer; color:var(--ink-2); min-height:26px; line-height:18px; }
.physical-3d-radio:checked + span { background:var(--accent-soft); color:var(--ink); font-weight:600; }
.physical-3d-radio:focus-visible + span { outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent); outline-offset:-3px; }
.physical-3d-time { margin-top:10px; }
/* Docked beside the results plot: the view and its time, compact. */
.physical-3d-docked .physical-3d-heading h3 { margin:0; }
.physical-3d-docked .physical-3d-lead { margin:4px 0 0; }
.physical-3d-docked .physical-3d-stage { margin-top:10px; height:clamp(260px, 30vw, 400px); }
.physical-3d-docked .physical-3d-order-key { text-align:left; max-width:none; margin:8px 0 0; }
.physical-3d-dock-controls { display:grid; gap:8px; margin-top:10px; font-size:12px; }
.physical-3d-view-parts { margin-top:10px; font-size:12px; }
.physical-3d-view-parts > summary { cursor:pointer; color:var(--muted); }
.physical-3d-view-parts fieldset { margin-top:8px; }
.physical-3d-play-row { display:flex; align-items:end; gap:10px; margin-top:6px; }
.physical-3d-play-row label { flex:1; min-width:0; }
.physical-3d-play { flex:none; min-height:34px; padding:6px 12px; font-weight:600; }
.physical-3d-play[aria-pressed="true"] { background:var(--accent); color:#fff; border-color:var(--accent); }
.physical-3d-time label { display:grid; gap:6px; font-size:12px; color:var(--muted); }
.physical-3d-pick { margin-top:10px; font-size:12px; line-height:1.6; }
.physical-3d-pick:empty { display:none; }
.physical-3d-pick ul { margin:4px 0 8px; padding-left:18px; }
.physical-3d-pick code, .physical-3d-source code { font-family:var(--mono); font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.physical-3d-source { border-top:1px solid var(--line); padding-top:10px; margin-top:12px; font-size:12px; }
.physical-3d-source summary { cursor:pointer; color:var(--ink-2); }
.physical-3d-source ul { margin:8px 0; padding-left:18px; display:grid; gap:3px; }
.physical-3d-source li span { color:var(--muted); }
.physical-3d-source p { color:var(--muted); max-width:90ch; }
@media (max-width:900px) { .physical-3d-body { grid-template-columns:minmax(0,1fr); } .physical-3d-look-wrap { justify-items:start; } .physical-3d-hint { text-align:left; } }
@media (max-width:600px) { .physical-3d { padding:10px; } .physical-3d-stage { height:clamp(260px, 80vw, 420px); } }

/* Pack Designer: the panel inside the Thermal tab, with the design's own verdict. */
.pack-cooling-3d { display:grid; gap:10px; margin-top:8px; }
.pack-cooling-3d-reasons { margin:0; padding:10px 12px 10px 28px; border:1px solid var(--line); border-radius:4px; background:var(--surface-2); font-size:13px; line-height:1.6; }
.pack-cooling-3d-reasons li + li { margin-top:6px; }
.pack-cooling-3d-reasons span { display:block; color:var(--muted); font-size:12px; }
.pack-cooling-3d-summary { font-size:13px; line-height:1.6; max-width:95ch; }
.pack-cooling-3d-summary:empty { display:none; }
.pack-cooling-3d-summary b { font-variant-numeric:tabular-nums; }
.pack-cooling-3d-verdict { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:1px 7px; border-radius:3px; margin-right:6px; border:1px solid var(--line); }
.pack-cooling-3d-verdict.pass { color:var(--ok, #2f6b3a); }
.pack-cooling-3d-verdict.fail { color:var(--missing, var(--fail, #b4441f)); }
.pack-cooling-3d-basis { font-size:12px; }
.pack-cooling-3d-basis summary { cursor:pointer; color:var(--ink-2); }
.pack-cooling-3d-basis ul { margin:6px 0; padding-left:18px; color:var(--ink-2); line-height:1.6; }
.pack-cooling-3d-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12px; color:var(--muted); }
.pack-cooling-3d .physical-3d { padding:12px; }
.pack-cooling-3d-layout { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:12px; color:var(--ink-2); }
.pack-cooling-3d-layout select { font-size:12px; padding:5px 8px; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--ink); }
.pack-cooling-3d-layout span { color:var(--muted); flex-basis:100%; }
.pack-cooling-3d-dialog { width:min(1280px, calc(100vw - 24px)); max-width:none; max-height:calc(100vh - 24px); padding:0; border:1px solid var(--line); border-radius:6px; background:var(--ground); color:var(--ink); overflow:auto; }
.pack-cooling-3d-dialog::backdrop { background:rgba(8,12,11,.55); }
.pack-cooling-3d-dialog-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; background:var(--surface); border-bottom:1px solid var(--line); }
.pack-cooling-3d-dialog-head .pack-cooling-3d-summary { margin:0; min-width:0; }
.pack-cooling-3d-dialog-head .btn { flex:none; }
.pack-cooling-3d-dialog-body { padding:12px; }
.pack-cooling-3d-dialog .physical-3d-stage { height:clamp(300px, 58vh, 640px); }
@media (max-width:600px) { .pack-cooling-3d-dialog { width:100vw; max-height:100vh; border-radius:0; } .pack-cooling-3d-dialog-body { padding:8px; } }
.pack-cooling-3d-form { display:grid; gap:10px; font-size:12px; color:var(--ink-2); }
.pack-cooling-3d-form fieldset { margin:0; padding:8px 10px 10px; border:1px solid var(--line); border-radius:4px; display:grid; gap:6px; min-width:0; }
.pack-cooling-3d-form legend { padding:0 4px; font-size:11px; color:var(--muted); }
.pack-cooling-3d-form fieldset > label { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.pack-cooling-3d-form input[type="number"], .pack-cooling-3d-form fieldset select { width:84px; font-size:12px; padding:4px 6px; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--ink); }
.pack-cooling-3d-form fieldset select { width:auto; }
.pack-cooling-3d-unit { display:inline-flex; align-items:center; gap:4px; color:var(--muted); white-space:nowrap; }
.pack-cooling-3d-form .pack-cooling-3d-check { justify-content:flex-start; }
.pack-cooling-3d-help { margin:0; font-size:11px; color:var(--muted); line-height:1.5; }
.pack-cooling-3d-help:empty { display:none; }
.pack-cooling-3d-form [data-reset] { justify-self:start; }
.physical-3d-edit { border-top:1px solid var(--line); padding-top:10px; margin-top:12px; font-size:12px; }
.physical-3d-edit summary { cursor:pointer; color:var(--ink-2); font-size:13px; }
.physical-3d-edit .pack-cooling-3d-form { grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); align-items:start; margin-top:8px; }
.physical-3d-edit .pack-cooling-3d-form > .pack-cooling-3d-layout, .physical-3d-edit .pack-cooling-3d-form > .pack-cooling-3d-actions { grid-column:1 / -1; }
.physical-3d-edit .pack-cooling-3d-layout select { max-width:320px; }

/* The explanation under the 3D view (js/cooling-explain-ui.js): the answer,
   what happens, the module temperatures, the equations and the sources.
   Module lines use four fixed categorical colours, validated as an ordered set
   for colour-vision deficiency on the light and dark surfaces of both pages;
   every line also carries a direct label, a legend entry and a table view.
   Status colours (the limit line, the badges) are the pages' own tokens and
   always come with a word. */
.physical-3d { --p3d-s1:#2a78d6; --p3d-s2:#eb6834; --p3d-s3:#1baf7a; --p3d-s4:#eda100; }
@media (prefers-color-scheme:dark) { :root:where(:not([data-theme="light"])) .physical-3d { --p3d-s1:#3987e5; --p3d-s2:#d95926; --p3d-s3:#199e70; --p3d-s4:#c98500; } }
:root[data-theme="dark"] .physical-3d { --p3d-s1:#3987e5; --p3d-s2:#d95926; --p3d-s3:#199e70; --p3d-s4:#c98500; }
.physical-3d-answer-host { margin-top:12px; }
.p3d-answer { border:1px solid var(--line); border-left:4px solid var(--line); border-radius:4px; padding:10px 14px; background:var(--surface); }
.p3d-answer[data-tone="ok"] { border-left-color:var(--ok); }
.p3d-answer[data-tone="warn"] { border-left-color:var(--warn); }
.p3d-answer[data-tone="danger"] { border-left-color:var(--fail, var(--missing)); }
.p3d-question { margin:0 0 4px; font-size:12px; color:var(--muted); }
.p3d-answer-text { margin:0; font-size:15px; line-height:1.5; color:var(--ink); max-width:80ch; text-wrap:pretty; }
.p3d-path { margin:8px 0 0; font-size:13px; line-height:1.55; color:var(--ink-2); max-width:80ch; text-wrap:pretty; }
.p3d-path b { color:var(--ink); font-weight:600; }
.p3d-checks { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:4px; font-size:12px; color:var(--ink-2); }
.p3d-checks li { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 12px; padding:4px 0; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; }
.p3d-badge { display:inline-block; font-size:11px; font-weight:600; line-height:1.5; padding:0 7px; border-radius:3px; white-space:nowrap; vertical-align:baseline; color:var(--ink-2); background:var(--surface-2); }
.p3d-badge.p3d-ok { color:var(--ok); background:var(--ok-soft); }
.p3d-badge.p3d-warn { color:var(--warn); background:var(--warn-soft); }
.p3d-badge.p3d-danger { color:var(--fail, var(--missing)); background:var(--fail-soft, var(--missing-soft)); }
.physical-3d-pick-actions { display:flex; flex-wrap:wrap; gap:6px; }
.physical-3d-explain-host { margin-top:14px; min-width:0; }
.p3d-explain { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:14px; }
.p3d-box { min-width:0; padding:12px; border:1px solid var(--line); border-radius:4px; background:var(--surface); }
.p3d-box h4 { margin:0 0 6px; font-size:14px; font-family:var(--sans); color:var(--ink); text-transform:none; letter-spacing:normal; }
.p3d-box-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 10px; }
.p3d-box-head h4 { margin:0; }
.p3d-when { margin:0 0 8px; font-size:12px; color:var(--muted); }
.p3d-steps { margin:0; padding-left:20px; display:grid; gap:8px; font-size:13px; line-height:1.5; color:var(--ink-2); }
.p3d-steps b { display:block; color:var(--ink); font-weight:600; }
.p3d-steps span { font-variant-numeric:tabular-nums; }
.p3d-note { margin:8px 0 0; font-size:11px; line-height:1.5; color:var(--muted); max-width:90ch; }
.p3d-legend { list-style:none; display:flex; flex-wrap:wrap; gap:4px 14px; margin:8px 0 4px; padding:0; font-size:11px; color:var(--ink-2); }
.p3d-legend li { display:inline-flex; align-items:center; }
.p3d-key { display:inline-block; width:16px; height:0; margin-right:6px; border-top:2px solid currentColor; vertical-align:middle; }
.p3d-s1 { color:var(--p3d-s1); } .p3d-s2 { color:var(--p3d-s2); } .p3d-s3 { color:var(--p3d-s3); } .p3d-s4 { color:var(--p3d-s4); }
.p3d-sout { color:var(--ink-2); } .p3d-slimit { color:var(--fail, var(--missing)); }
.p3d-key.p3d-sout, .p3d-key.p3d-slimit { border-top-style:dashed; }
.p3d-chart-wrap { position:relative; width:100%; min-width:0; }
.p3d-chart { display:block; width:100%; height:auto; cursor:crosshair; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.p3d-grid { stroke:var(--line); stroke-width:1; }
.p3d-baseline { stroke:var(--muted); stroke-width:1; opacity:.6; }
.p3d-axis { fill:var(--muted); font-size:11px; font-family:var(--sans); font-variant-numeric:tabular-nums; }
.p3d-line { fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.p3d-line.p3d-sout { stroke-width:1.5; stroke-dasharray:5 4; }
.p3d-limit { stroke:var(--fail, var(--missing)); stroke-width:1.5; stroke-dasharray:6 4; }
.p3d-limit-label { fill:var(--ink-2); font-size:11px; font-family:var(--sans); }
.p3d-end { fill:var(--ink); font-size:11px; font-family:var(--sans); font-variant-numeric:tabular-nums; }
.p3d-end-key { stroke:currentColor; stroke-width:2; }
.p3d-end-key.p3d-sout { stroke-dasharray:3 2; }
.p3d-cursor { stroke:var(--ink-2); stroke-width:1; }
.p3d-hover { stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3; }
.p3d-hit { fill:transparent; }
.p3d-tip { position:absolute; left:0; top:0; z-index:1; display:grid; gap:2px; padding:6px 8px; pointer-events:none; font-size:11px; line-height:1.4; white-space:nowrap; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:4px; box-shadow:0 4px 14px rgba(0,0,0,.14); font-variant-numeric:tabular-nums; }
.p3d-tip span { display:flex; align-items:center; color:var(--ink-2); }
.p3d-tip .p3d-key { width:12px; margin-right:5px; }
.p3d-table-wrap { overflow-x:auto; min-width:0; max-width:100%; }
.p3d-table { width:100%; border-collapse:collapse; font-size:12px; color:var(--ink-2); }
.p3d-table caption { text-align:left; font-size:11px; color:var(--muted); padding-bottom:4px; }
.p3d-table th, .p3d-table td { text-align:left; padding:4px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.p3d-table thead th { font-weight:600; color:var(--ink); font-size:11px; }
.p3d-table .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.p3d-src { color:var(--muted); font-size:11px; min-width:16ch; }
.p3d-sym { white-space:nowrap; font-family:"Cambria Math","STIX Two Math",Cambria,Georgia,serif; font-size:14px; color:var(--ink); }
.p3d-equations { margin-top:14px; scroll-margin-top:16px; }
.p3d-equations:focus { outline:none; }
.p3d-eq-pick { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:10px 0 6px; font-size:12px; color:var(--ink-2); }
.p3d-eq-pick label { display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; }
.p3d-eq-pick select { min-width:0; max-width:100%; font-size:12px; padding:5px 8px; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--ink); }
.p3d-tabs { display:inline-flex; }
.p3d-tabs button { border-radius:0; }
.p3d-tabs button:first-child { border-radius:4px 0 0 4px; }
.p3d-tabs button:last-child { border-radius:0 4px 4px 0; }
.p3d-tabs button + button { border-left:0; }
.p3d-tabs button[aria-pressed="true"], .p3d-box-head button[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent); font-weight:600; }
.p3d-eq-words { margin:6px 0 8px; font-size:13px; line-height:1.55; color:var(--ink-2); max-width:80ch; }
.p3d-eq { display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px 6px; padding:10px 12px; border-radius:4px; background:var(--surface-2); color:var(--ink); font-family:"Cambria Math","STIX Two Math",Cambria,Georgia,serif; font-size:17px; overflow-x:auto; }
.p3d-eq:empty { display:none; }
.p3d-eq var { font-style:italic; }
.p3d-eq sub, .p3d-sym sub, .p3d-eq-result sub { font-size:.68em; font-style:normal; }
.p3d-term { display:inline-grid; justify-items:center; gap:3px; }
.p3d-m, .p3d-op { display:block; min-height:32px; line-height:32px; white-space:nowrap; }
.p3d-op { padding:0 1px; }
.p3d-cap { max-width:17ch; font-family:var(--sans); font-size:10.5px; line-height:1.25; color:var(--muted); text-align:center; }
.p3d-frac { display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; margin:0 2px; font-size:.82em; line-height:1.15; }
.p3d-frac > span:first-child { padding:0 2px; border-bottom:1px solid currentColor; }
.p3d-eq-label { margin:10px 0 4px; font-size:12px; color:var(--muted); }
.p3d-eq-live { font-family:var(--sans); font-size:13px; align-items:center; font-variant-numeric:tabular-nums; }
.p3d-eq-live .p3d-m, .p3d-eq-live .p3d-op { min-height:28px; line-height:28px; }
.p3d-eq-result { margin:8px 0 10px; font-size:13px; line-height:1.6; color:var(--ink-2); max-width:90ch; }
.p3d-eq-result .p3d-frac { font-family:"Cambria Math","STIX Two Math",Cambria,Georgia,serif; font-size:.95em; }
.p3d-sources { margin-top:14px; padding-top:10px; border-top:1px solid var(--line); font-size:12px; }
.p3d-sources summary { cursor:pointer; color:var(--ink-2); font-size:13px; }
.p3d-sources h5 { margin:14px 0 6px; font-size:12px; color:var(--ink); }
.p3d-findings { list-style:none; margin:0; padding:0; display:grid; gap:6px; line-height:1.5; color:var(--ink-2); max-width:110ch; }
.p3d-perspective { color:var(--muted); }
@media (max-width:600px) { .p3d-box { padding:10px; } .p3d-eq { font-size:15px; padding:8px; } .p3d-answer-text { font-size:14px; } }
.pack-cooling-3d-form fieldset > label { flex-wrap:wrap; }
.pack-cooling-3d-form fieldset select { max-width:100%; min-width:0; }

/* The story at the top of the Studio page: the question, the setup in plain
   numbers, the plate from above with the coolant path, Run, and the result. */
.physical-story-host { padding:16px 16px 0; }
.physical-story { --psd-coolant:#2a72c0; --psd-arrow:#e8870e; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); gap:16px 22px; align-items:center; padding:18px; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--ink); }
.physical-story-text { min-width:0; }
.physical-story-eyebrow { margin:0 0 4px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.physical-story h2 { margin:0 0 8px; font-size:22px; line-height:1.25; text-wrap:balance; }
.physical-story p { margin:0 0 10px; font-size:14px; line-height:1.55; max-width:68ch; text-wrap:pretty; }
.physical-story-result { font-weight:600; }
.physical-story-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.physical-story-actions button { min-height:36px; }
.physical-story-figure { margin:0; min-width:0; }
.physical-story-figure figcaption { font-size:12px; color:var(--muted); margin-top:4px; }
.physical-story-diagram { display:block; width:100%; height:auto; max-width:460px; }
.physical-story-diagram .psd-plate { fill:var(--accent-soft, #eef4ff); stroke:var(--line); }
.physical-story-diagram .psd-zone rect { fill:var(--surface); stroke:var(--line); fill-opacity:.94; }
.physical-story-diagram .psd-empty rect { fill:none; stroke-dasharray:4 3; }
.physical-story-diagram .psd-name { fill:var(--ink); font-size:14px; font-weight:600; }
.physical-story-diagram .psd-order, .physical-story-diagram .psd-port { fill:var(--muted); font-size:11px; }
.physical-story-diagram .psd-temp { fill:var(--ink); font-size:12px; font-variant-numeric:tabular-nums; }
.physical-story-diagram .psd-channel { fill:none; stroke:var(--psd-coolant); stroke-width:5; stroke-linejoin:round; stroke-linecap:round; opacity:.75; }
.physical-story-diagram .psd-arrow { fill:var(--psd-arrow); }
@media (prefers-color-scheme:dark) { :root:where(:not([data-theme="light"])) .physical-story { --psd-coolant:#5fa9de; --psd-arrow:#ffb347; } }
:root[data-theme="dark"] .physical-story { --psd-coolant:#5fa9de; --psd-arrow:#ffb347; }
@media (max-width:900px) { .physical-story { grid-template-columns:minmax(0,1fr); } .physical-story h2 { font-size:19px; } }