/* The wardrobe planner.

   Sits on the site's own stylesheet rather than replacing it: the header,
   footer, buttons and type come from site.css, and this is only what the
   planner itself needs. Drafting language — graph ground, millimetres in a
   mono face, dimensions in one hot colour and nothing else in it. */

.wp{
  --wp-grid:#DCE3EA;
  --wp-line:#C7D0D8;
  --wp-ink:#16232B;
  --wp-soft:#5C6B76;
  --wp-face:#FFFFFF;
  --wp-void:#EDF1F4;
  --wp-dim:#A8432E;
  --wp-dim-wash:#F6E7E3;
  --wp-warn:#8A5A17;
  --wp-warn-wash:#FAF0DC;
  --wp-ok:#1E6B4F;
  display:flex;flex-direction:column;gap:22px;
}

/* ---- the steps down the side ---- */
.wp-cols{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:900px){.wp-cols{grid-template-columns:minmax(0,1fr)}}

.wp-panel{
  border:1px solid var(--wp-line);border-radius:4px;background:var(--wp-face);
  overflow:hidden;
}
.wp-panel > h2,.wp-panel > h3{
  margin:0;padding:12px 15px;border-bottom:1px solid var(--wp-line);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wp-soft);
}
.wp-body{padding:14px 15px;display:flex;flex-direction:column;gap:16px}

.wp-step{display:flex;flex-direction:column;gap:8px}
.wp-step > label,.wp-q{
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--wp-soft);margin:0;
}
.wp-hint{font-size:13px;color:var(--wp-soft);margin:0;line-height:1.45}

/* choices read as choices, not as a dropdown pretending to be one */
.wp-choice{display:flex;flex-wrap:wrap;gap:6px}
.wp-choice button{
  font:600 13px/1 inherit;padding:9px 12px;border-radius:3px;cursor:pointer;
  border:1px solid var(--wp-line);background:var(--wp-face);color:var(--wp-ink);
}
.wp-choice button[aria-pressed="true"]{
  background:var(--wp-ink);border-color:var(--wp-ink);color:#fff;
}
.wp-choice button:focus-visible{outline:3px solid var(--wp-dim);outline-offset:2px}

.wp-row{display:flex;flex-wrap:wrap;gap:10px}
.wp-f{display:flex;flex-direction:column;gap:5px;flex:1 1 92px;min-width:0}
.wp-f span{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--wp-soft);
}
.wp-f input,.wp-f select{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:15px;font-variant-numeric:tabular-nums;
  padding:9px 10px;border:1px solid var(--wp-line);border-radius:3px;
  background:var(--wp-void);color:var(--wp-ink);width:100%;min-width:0;
}
.wp-mm{position:relative}
.wp-mm::after{
  content:"mm";position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font:600 11px/1 ui-monospace,monospace;color:var(--wp-soft);pointer-events:none;
}
.wp-mm input{padding-right:32px}

/* ---- the views ---- */
.wp-stage{border:1px solid var(--wp-line);border-radius:4px;background:var(--wp-face);overflow:hidden}
.wp-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--wp-line)}
.wp-tabs button{
  font:700 12px/1 inherit;padding:11px 14px;border:0;cursor:pointer;
  background:transparent;color:var(--wp-soft);border-bottom:3px solid transparent;
}
.wp-tabs button[aria-pressed="true"]{color:var(--wp-ink);border-bottom-color:var(--wp-dim)}
.wp-view{display:block;width:100%;height:auto;background:var(--wp-face)}
.wp-3d{position:relative;width:100%;height:clamp(320px,58vh,560px);background:var(--wp-void)}
.wp-3d canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.wp-3d canvas:active{cursor:grabbing}
.wp-toggle{
  position:absolute;right:12px;top:12px;
  font:700 11px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 12px;border-radius:3px;cursor:pointer;
  border:1px solid var(--wp-line);background:rgba(255,255,255,.94);color:var(--wp-ink);
  box-shadow:0 1px 3px rgba(16,35,43,.14);
}
.wp-toggle[aria-pressed="true"]{background:var(--wp-ink);border-color:var(--wp-ink);color:#fff}
.wp-toggle:focus-visible{outline:3px solid var(--wp-dim);outline-offset:2px}
.wp-turn{
  position:absolute;left:14px;bottom:12px;margin:0;pointer-events:none;
  font:700 11px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--wp-ink);opacity:.4;
}

/* ---- what the checker says ---- */
.wp-checks{display:flex;flex-direction:column;gap:8px;padding:14px 15px;border-top:1px solid var(--wp-line)}
.wp-check{
  display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:3px;
  font-size:13.5px;line-height:1.45;
}
.wp-check b{display:block;font-weight:700}
.wp-check.stop{background:var(--wp-dim-wash);color:var(--wp-dim)}
.wp-check.warn{background:var(--wp-warn-wash);color:var(--wp-warn)}
.wp-check.fine{color:var(--wp-ok);padding-left:0;font-weight:600}
.wp-check i{font-style:normal;font-weight:700;flex:none}

/* ---- the numbers ---- */
.wp-cut{width:100%;border-collapse:collapse;font-size:13.5px}
.wp-cut th,.wp-cut td{padding:7px 8px 7px 0;border-bottom:1px solid var(--wp-line);text-align:left}
.wp-cut th{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--wp-soft);
}
.wp-cut td.n,.wp-cut th.n{
  text-align:right;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.wp-cut tbody tr:last-child td{border-bottom:0}
.wp-scroll{overflow-x:auto}
.wp-note{font-size:13px;color:var(--wp-soft);margin:0}
.wp-spec{
  font-family:ui-monospace,monospace;font-size:12.5px;line-height:1.6;white-space:pre-wrap;
  background:var(--wp-void);border:1px solid var(--wp-line);border-radius:3px;
  padding:12px;max-height:260px;overflow:auto;margin:0;
}
.wp-said{font-size:13px;font-weight:600;color:var(--wp-ok);min-height:18px;margin:0}
.wp-acts{display:flex;flex-wrap:wrap;gap:8px}
.wp-acts .btn{font-size:14px;padding:10px 14px}

details.wp-more{border-top:1px solid var(--wp-line)}
details.wp-more > summary{
  padding:12px 15px;cursor:pointer;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wp-soft);
}
details.wp-more > summary:focus-visible{outline:3px solid var(--wp-dim);outline-offset:-3px}

@media (prefers-reduced-motion:reduce){.wp *{animation:none!important;transition:none!important}}