/* HDS Board Anatomy — "What's inside a board". All classes prefixed hds-ana-. Fonts are loaded by the page. */
.hds-ana{
  --hds-ana-ground:#f3f3f0;--hds-ana-ink:#1c1e1d;--hds-ana-ink2:#4a4d4b;--hds-ana-hair:#d4d4ce;--hds-ana-red:#ec2329;
  --hds-ana-head:"Familjen Grotesk","Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;
  --hds-ana-body:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --hds-ana-mono:"Azeret Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --hds-ana-ease:cubic-bezier(.32,.72,0,1);
  --hds-ana-seg:0;
  position:relative;margin:0;box-sizing:border-box;max-width:100%;
  background:var(--hds-ana-ground);color:var(--hds-ana-ink);
  border:1px solid var(--hds-ana-hair);border-radius:6px;
  font:400 14px/1.5 var(--hds-ana-body);-webkit-font-smoothing:antialiased;
  overflow:hidden;
}
.hds-ana *,.hds-ana *::before,.hds-ana *::after{box-sizing:border-box}

/* ---- head: fig number, title, three-way switch */
.hds-ana-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px;padding:20px 24px 4px}
.hds-ana-titles{display:grid;gap:4px;min-width:0}
.hds-ana-fig{font:500 11px/1 var(--hds-ana-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hds-ana-ink2)}
.hds-ana-title{margin:0;font:600 clamp(20px,2.1vw,26px)/1.1 var(--hds-ana-head);letter-spacing:-.01em;color:var(--hds-ana-ink)}
.hds-ana-switch{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:3px;border:1px solid var(--hds-ana-hair);border-radius:6px;background:#e9e9e4;max-width:100%}
.hds-ana-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);border-radius:4px;background:#fbfbf9;box-shadow:0 0 0 1px var(--hds-ana-hair);transform:translateX(calc(var(--hds-ana-seg) * 100%));transition:transform .42s var(--hds-ana-ease)}
.hds-ana-seg{position:relative;z-index:1;appearance:none;border:0;margin:0;background:none;padding:8px 14px;border-radius:4px;font:500 13px/1.2 var(--hds-ana-body);color:var(--hds-ana-ink2);cursor:pointer;white-space:nowrap;transition:color .2s ease}
.hds-ana-seg[aria-checked="true"]{color:var(--hds-ana-ink)}
.hds-ana-seg:hover{color:var(--hds-ana-ink)}
.hds-ana-seg:focus-visible{outline:2px solid var(--hds-ana-ink);outline-offset:1px}

/* ---- stage */
.hds-ana-stage{position:relative;outline:none;margin:0 8px;border-radius:4px}
.hds-ana-stage:focus-visible{box-shadow:inset 0 0 0 1.5px var(--hds-ana-ink2)}
.hds-ana-svg{display:block;width:100%;height:auto;overflow:visible;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}

/* solids */
.hds-ana-fill{fill:var(--hds-ana-ground)}
.hds-ana-line{fill:none;stroke-width:.7px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.hds-ana-line[data-tone="hi"]{stroke:var(--hds-ana-ink);stroke-opacity:.82}
.hds-ana-line[data-tone="mid"]{stroke:var(--hds-ana-ink2);stroke-opacity:.7}
.hds-ana-line[data-tone="crease"]{stroke:var(--hds-ana-ink);stroke-opacity:.26}
.hds-ana-line[data-tone="crease-core"]{stroke:#5b3f1f;stroke-opacity:.42}
.hds-ana-line[data-tone="skin"]{stroke:#7a5530;stroke-opacity:.2;stroke-dasharray:none}
.hds-ana-line[data-tone="glass"]{stroke:#fff;stroke-opacity:.85}
.hds-ana-shade,.hds-ana-top{stroke:none}
.hds-ana-solid{--t:#eee;--s0:#ddd;--s1:#e3e3e3;--s2:#e8e8e8;--s3:#eee}
.hds-ana-top{fill:var(--t)}
.hds-ana-shade[data-shade="0"]{fill:var(--s0)}
.hds-ana-shade[data-shade="1"]{fill:var(--s1)}
.hds-ana-shade[data-shade="2"]{fill:var(--s2)}
.hds-ana-shade[data-shade="3"]{fill:var(--s3)}
.hds-ana-k-bal{--t:#ecebe4;--s0:#d8d5ca;--s1:#dedbd1;--s2:#e3e0d7;--s3:#e8e5dc}
.hds-ana-bal-top{fill:#ecebe4}
.hds-ana-bal-fibre path{fill:none;stroke:#d9d5c8;stroke-width:1.4;opacity:.55}
.hds-ana-k-oak,.hds-ana-k-band-melamine{--t:var(--hds-ana-oak-t,#dcc7a3);--s0:var(--hds-ana-oak-s0,#bf9f72);--s1:var(--hds-ana-oak-s1,#c8aa7e);--s2:var(--hds-ana-oak-s2,#d0b48a);--s3:var(--hds-ana-oak-s3,#d8bf98)}
.hds-ana-k-graphite,.hds-ana-k-band-gloss{--t:#2a2d2c;--s0:#1d1f1e;--s1:#222524;--s2:#272a29;--s3:#2e3130}
.hds-ana-k-graphite .hds-ana-line[data-tone="crease"],.hds-ana-k-band-gloss .hds-ana-line[data-tone="crease"]{stroke:#fff;stroke-opacity:.32}
.hds-ana-k-stone,.hds-ana-k-band-silktouch{--t:#a9a79e;--s0:#8b8981;--s1:#929088;--s2:#9a988f;--s3:#a2a097}
.hds-ana-k-lacquer>.hds-ana-fill,.hds-ana-k-silk>.hds-ana-fill{fill:none}
.hds-ana-k-lacquer{--s0:rgba(255,255,255,.5);--s1:rgba(255,255,255,.55);--s2:rgba(255,255,255,.62);--s3:rgba(255,255,255,.7)}
.hds-ana-coat-gloss{fill:#1c1e1d;fill-opacity:.05}
.hds-ana-k-silk{--s0:rgba(255,255,255,.62);--s1:rgba(255,255,255,.66);--s2:rgba(255,255,255,.7);--s3:rgba(255,255,255,.76)}
.hds-ana-coat-silk{fill:#e9e8e3;fill-opacity:.42}
.hds-ana-band-radius{fill:none;stroke:#fff;stroke-opacity:.38;stroke-width:.7px;vector-effect:non-scaling-stroke}
.hds-ana-k-band-melamine .hds-ana-band-radius{stroke-opacity:.5}

/* chipboard and decor art (in the iso planes) */
.hds-ana-chip[data-c="void"]{fill:#76552f}
.hds-ana-chip[data-c="d2"]{fill:#9f7a4b}
.hds-ana-chip[data-c="d1"]{fill:#b38e5f}
.hds-ana-chip[data-c="m"]{fill:#c29d6c}
.hds-ana-chip[data-c="l1"]{fill:#dcc093}
.hds-ana-chip[data-c="l2"]{fill:#ead6b0}
.hds-ana-face-shade{fill:#3a2810;fill-opacity:.03}
.hds-ana-face-shade[data-dark="1"]{fill-opacity:.17}
.hds-ana-grain{fill:none;stroke:#a6845a;stroke-linecap:round}
.hds-ana-grain[data-g="l"]{stroke:#f2e5cb}
.hds-ana-fleck{fill:#b08c60;opacity:.3}
.hds-ana-halo path{fill:none;stroke:#4a4d4b;stroke-opacity:.013;stroke-linejoin:round}
.hds-ana-halo .hds-ana-halo-core{fill:#4a4d4b;fill-opacity:.1;stroke:none}

/* variants crossfade */
.hds-ana-v{opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.hds-ana[data-variant="melamine"] .hds-ana-v[data-v="melamine"],
.hds-ana[data-variant="gloss"] .hds-ana-v[data-v="gloss"],
.hds-ana[data-variant="silktouch"] .hds-ana-v[data-v="silktouch"]{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s}

/* leaders */
.hds-ana-leader{pointer-events:none}
.hds-ana-leader-line{fill:none;stroke:var(--hds-ana-ink2);stroke-width:.7px;vector-effect:non-scaling-stroke;stroke-opacity:.75}
.hds-ana-leader-ring{fill:var(--hds-ana-ground);fill-opacity:.9;stroke:var(--hds-ana-ink);stroke-width:.8px;vector-effect:non-scaling-stroke}
.hds-ana-leader-dot{fill:var(--hds-ana-ink);transition:fill .25s ease}
.hds-ana-leader.is-active .hds-ana-leader-dot{fill:var(--hds-ana-red)}
.hds-ana-leader.is-active .hds-ana-leader-line{stroke:var(--hds-ana-ink);stroke-opacity:1}
.hds-ana-leader-num{display:none;font:600 17px var(--hds-ana-mono);fill:var(--hds-ana-ink);text-anchor:middle;dominant-baseline:central}
.hds-ana[data-layout="stack"] .hds-ana-leader-dot{display:none}
.hds-ana[data-layout="stack"] .hds-ana-leader-ring{fill-opacity:1;stroke-width:1px;transition:fill .25s ease}
.hds-ana[data-layout="stack"] .hds-ana-leader.is-active .hds-ana-leader-ring{fill:var(--hds-ana-red);stroke:var(--hds-ana-red)}
.hds-ana[data-layout="stack"] .hds-ana-leader.is-active .hds-ana-leader-num{fill:#fff}

/* labels (wide: placed beside the figure on leader lines) */
.hds-ana-labels{list-style:none;margin:0;padding:0}
.hds-ana-label{position:absolute;left:var(--x);top:var(--y);width:max-content;max-width:min(calc(100% - var(--x) - 10px),250px);transform:translate(0,-50%)}
.hds-ana-label[data-side="l"]{transform:translate(-100%,-50%);text-align:right;max-width:min(calc(var(--x) - 10px),250px)}
.hds-ana-label[hidden]{display:none}
.hds-ana-label-btn{all:unset;display:grid;gap:3px;cursor:default;padding:4px 2px;border-radius:3px;transition:opacity .25s ease}
.hds-ana-label-btn:focus-visible{outline:2px solid var(--hds-ana-ink);outline-offset:2px}
.hds-ana-num{font:500 10.5px/1 var(--hds-ana-mono);letter-spacing:.06em;color:var(--hds-ana-ink2)}
.hds-ana-name{font:600 15.5px/1.2 var(--hds-ana-head);color:var(--hds-ana-ink)}
.hds-ana-cap{font:400 13px/1.42 var(--hds-ana-body);color:var(--hds-ana-ink2);text-wrap:pretty}
.hds-ana.has-active .hds-ana-label:not(.is-active) .hds-ana-label-btn{opacity:.62}
.hds-ana-mm{font-family:var(--hds-ana-mono);font-size:.92em;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- footer: hint + live readout */
.hds-ana-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;margin:4px 24px 0;padding:12px 0 16px;border-top:1px solid var(--hds-ana-hair)}
.hds-ana-hint{font:400 12.5px/1.4 var(--hds-ana-body);color:var(--hds-ana-ink2)}
.hds-ana-readout{display:inline-flex;align-items:center;gap:10px;font:600 13.5px/1.3 var(--hds-ana-body);color:var(--hds-ana-ink)}
.hds-ana-readout .hds-ana-mm{font-weight:500}
.hds-ana-sep{width:1px;height:14px;background:var(--hds-ana-hair)}

/* ---- stacked layout (narrow cards): labels move below the figure */
.hds-ana[data-layout="stack"] .hds-ana-head{padding:16px 16px 4px}
.hds-ana[data-layout="stack"] .hds-ana-switch{width:100%}
.hds-ana[data-layout="stack"] .hds-ana-seg{padding:8px 4px;font-size:12px;white-space:normal;text-align:center}
.hds-ana[data-layout="stack"] .hds-ana-stage{margin:0 4px}
.hds-ana[data-layout="stack"] .hds-ana-leader-line{display:none}
.hds-ana[data-layout="stack"] .hds-ana-leader-num{display:block}
.hds-ana[data-layout="stack"] .hds-ana-labels{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:10px 20px;padding:6px 12px 6px}
.hds-ana[data-layout="stack"] .hds-ana-label,.hds-ana[data-layout="stack"] .hds-ana-label[data-side="l"]{position:static;transform:none;text-align:left;width:auto;max-width:none}
.hds-ana[data-layout="stack"] .hds-ana-label-btn{grid-template-columns:24px 1fr;column-gap:8px;row-gap:2px}
.hds-ana[data-layout="stack"] .hds-ana-num{grid-row:1/3;padding-top:4px}
.hds-ana[data-layout="stack"] .hds-ana-foot{margin:4px 16px 0}

@media (prefers-reduced-motion:reduce){
  .hds-ana-v,.hds-ana-thumb,.hds-ana-leader-dot,.hds-ana-label-btn{transition:none}
}