/* =========================================================
   TOOLS — /tools/ (spec decoder, lace picker, coupon and
   cost-per-wear calculators). Built on the tokens in style.css:
   lime only for money and the one action on the page, field
   labels and headings in --purple-glow.
   ========================================================= */

.tool-wrap { max-width: 980px; padding: 8px 0 90px; }
.tool-wrap > * + * { margin-top: 22px; }

.tool-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 0;
  min-width: 0;
}
.tool-panel h2 { font-size: 22px; margin: 0 0 12px; }
.tool-panel h3 { font-size: 20px; margin: 4px 0 8px; }
.tool-panel p { color: var(--text-dim); line-height: 1.7; margin: 0 0 12px; }
.tool-panel > :last-child { margin-bottom: 0; }
.tool-panel-warn { border-color: rgba(204, 255, 0, 0.35); }

.tool-label, .tool-legend {
  display: block;
  font-weight: 600;
  color: var(--purple-glow);
  font-size: 14.5px;
  margin-bottom: 8px;
}
.tool-legend { font-size: 17px; padding: 0; }
/* A legend normally sits on the fieldset's border; float it inside the panel instead. */
.tool-panel > .tool-legend { float: left; width: 100%; margin-bottom: 14px; }
.tool-panel > .tool-legend + * { clear: both; }
.tool-help, .tool-small, .tool-meta { color: var(--text-faint); font-size: 13.5px; line-height: 1.55; }
.tool-help { display: block; margin-top: 4px; }
.tool-meta { display: block; margin-top: 2px; font-weight: 400; }
.tool-small { margin: 12px 0 0; }

.tool-textarea, .tool-input {
  width: 100%;
  background: var(--black-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming into the field */
  padding: 12px 14px;
}
.tool-textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.tool-textarea:focus, .tool-input:focus { outline: none; border-color: var(--purple-glow); box-shadow: var(--focus-ring); }

.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 14px; }
.tool-hint { color: var(--text-faint); font-size: 14px; }
.tool-hint a, .tool-about a, .tool-panel p a:not(.btn), .tool-table a, .tool-hub-more a { color: var(--purple-glow); text-decoration: underline; text-underline-offset: 3px; }
.tool-hint a:hover, .tool-about a:hover, .tool-panel p a:not(.btn):hover, .tool-table a:hover, .tool-hub-more a:hover { color: var(--accent); }

.tool-form-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.tool-field + .tool-field { margin-top: 0; }
.tool-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.tool-columns .tool-field { margin-bottom: 14px; }
.tool-money { display: flex; align-items: center; gap: 8px; }
.tool-money > span { color: var(--text-faint); font-weight: 600; }

/* Tables */
/* position: relative so absolutely positioned content inside (the
   .sr-only header labels) is clipped by the scroll box rather than
   widening the whole page on phones. */
.tool-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tool-scroll:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.tool-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tool-table th, .tool-table td { text-align: left; vertical-align: top; padding: 11px 12px; border-bottom: 1px solid var(--border); }
.tool-table thead th { color: var(--purple-glow); font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; white-space: nowrap; }
.tool-table tbody th { color: var(--text); font-weight: 600; }
.tool-table td { color: var(--text-dim); }
.tool-table .tool-num { white-space: nowrap; color: var(--text); font-variant-numeric: tabular-nums; }
.tool-table tr.is-best { background: rgba(204, 255, 0, 0.06); }
.tool-table tr.is-best .tool-num[data-coupon-save], .tool-coupons tr.is-best td.tool-num:nth-of-type(3) { color: var(--accent); font-weight: 700; }

.tool-code { display: inline-flex; align-items: stretch; border: 1.5px dashed var(--accent-dim); border-radius: var(--radius-sm); overflow: hidden; vertical-align: middle; }
.tool-code code { padding: 6px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: 1px; color: var(--accent); user-select: all; }
.tool-copy { border: 0; border-left: 1.5px dashed var(--accent-dim); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 0 10px; cursor: pointer; }
.tool-copy:hover { color: var(--accent); }
.tool-copy:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.tool-go { color: var(--accent); font-weight: 600; white-space: nowrap; text-decoration: none; }
.tool-go:hover { text-decoration: underline; }

.tool-badge {
  display: inline-block;
  margin: 6px 0 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.tool-table .tool-badge { display: block; width: max-content; margin-top: 8px; }
.tool-coupons tbody th { min-width: 150px; }
.tool-callout { color: var(--text); background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 12px 14px; }
.tool-callout:empty { display: none; }

.tool-list { margin: 0; padding-left: 20px; color: var(--text-dim); line-height: 1.65; }
.tool-list li + li { margin-top: 6px; }
.tool-list strong { color: var(--text); }
.tool-catch { color: var(--text-faint); }

.tool-notes { margin: 0; }
.tool-notes dt { color: var(--text); font-weight: 600; margin-top: 12px; }
.tool-notes dt:first-child { margin-top: 0; }
.tool-notes dd { margin: 4px 0 0; color: var(--text-dim); line-height: 1.65; }

.tool-grid { margin: 16px 0; }

/* Cost per wear figures */
.tool-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.tool-figure { background: var(--black-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.tool-figure-main { grid-column: 1 / -1; border-color: rgba(204, 255, 0, 0.4); }
.tool-figure-num { display: block; font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tool-figure-main .tool-figure-num { font-size: 32px; color: var(--accent); }
.tool-figure-label { color: var(--text-faint); font-size: 13.5px; }
.tool-js .tool-js-hide { display: none; } /* tools.js sets .tool-js on <html> */

/* Lace picker */
.tool-question { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.tool-question legend { padding: 0; margin-bottom: 10px; }
.tool-question .tool-label { display: inline; }
.tool-question .tool-help { display: inline; margin: 0 0 0 6px; }
.tool-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tool-option { position: relative; cursor: pointer; }
.tool-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tool-option span { display: block; height: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--black-soft); color: var(--text-dim); font-size: 15px; line-height: 1.4; }
.tool-option:hover span { border-color: var(--purple-glow); }
.tool-option input:focus-visible + span { box-shadow: var(--focus-ring); }
.tool-option input:checked + span { border-color: var(--purple); background: var(--purple-deep); color: #fff; }

.tool-result-h { font-size: 24px; margin: 0 0 14px; }
.tool-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tool-pick { display: flex; flex-direction: column; gap: 6px; }
.tool-pick.is-top { border-color: rgba(204, 255, 0, 0.45); }
.tool-pick .tool-badge { align-self: flex-start; margin: 0; }
.tool-pick-price { font-size: 14.5px; }
.tool-pick-price strong { color: var(--accent); }
.tool-pick .tool-list { flex: 1; }
.tool-pick .btn { align-self: flex-start; margin-top: 10px; }

/* Sliders */
.tool-sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin-bottom: 18px; }
.tool-label output { color: var(--text); font-weight: 700; margin-left: 6px; font-variant-numeric: tabular-nums; }
.tool-range { width: 100%; accent-color: var(--purple-glow); height: 28px; margin: 2px 0 0; cursor: pointer; }
.tool-range:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.tool-options-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tool-options-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tool-options-5 .tool-option span { text-align: center; }
.tool-options-5 .tool-option strong { display: block; color: inherit; font-size: 17px; }
.tool-result[aria-busy="true"] { opacity: 0.6; transition: opacity .15s; }
.tool-price { color: var(--accent); }
.lv-answer { font-size: 18px; color: var(--text) !important; line-height: 1.6; }
.lv-answer strong { color: var(--text); }

.tool-options-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-options-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tool-options-7 .tool-option span { text-align: center; padding-left: 6px; padding-right: 6px; }
.tool-sliders-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-check { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 15px; min-height: 46px; cursor: pointer; }
.tool-check input { width: 20px; height: 20px; accent-color: var(--purple); }
.tool-row-head th { color: var(--purple-glow) !important; font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; padding-top: 16px; }
.tool-table tbody th .tool-meta { max-width: 300px; }
.tool-timeline { list-style: none; margin: 0 0 18px; padding: 0; }
.tool-timeline li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.tool-timeline time { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Length visualiser */
.lv-layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 22px; align-items: start; }
.lv-figure { text-align: center; }
.lv-svg { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto 8px; }
.lv-text > * + * { margin-top: 18px; }
.lv-body { fill: #4a3d63; }
.lv-hair { fill: #2a1a12; stroke: #5a3a28; stroke-width: 0.12; }
.lv-strand { fill: none; stroke: #6b4630; stroke-width: 0.14; opacity: 0.75; }
.lv-end { stroke: var(--accent); stroke-width: 0.22; stroke-linecap: round; }
.lv-mark line { stroke: var(--border); stroke-width: 0.1; stroke-dasharray: 0.5 0.5; }
.lv-mark text { fill: var(--text-faint); font-size: 1.45px; font-family: var(--font-body); }
.lv-mark.is-on line { stroke: var(--purple-glow); stroke-dasharray: none; stroke-width: 0.14; }
.lv-mark.is-on text { fill: var(--text); font-weight: 600; }

/* Density visualiser */
.dv-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 22px 0; align-items: start; }
.dv-wide svg { max-width: 760px; margin-left: auto; margin-right: auto; }
.dv-figure { margin: 0; }
.dv-figure svg { width: 100%; height: auto; display: block; margin: 4px 0 10px; }
.dv-scalp { fill: #8c7363; }
.dv-strands polyline { fill: none; stroke: #20130c; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.92; }
.dv-partline { stroke: #a88b78; stroke-width: 1; opacity: 0.35; }
.dv-shoulders { fill: #4a3d63; }
.dv-skull { fill: #4a3d63; }
.dv-hairmass { fill: #2a1a12; stroke: #5a3a28; stroke-width: 0.15; }
.dv-head text { fill: var(--text-faint); font-size: 3.2px; text-anchor: middle; font-family: var(--font-body); }
.dv-head.is-on text { fill: var(--text); font-weight: 700; }
.dv-head:not(.is-on) { opacity: 0.5; }
.dv-head.is-on .dv-hairmass { stroke: var(--purple-glow); stroke-width: 0.3; }

/* Cards: the hub and "More tools" */
.tool-more h2 { font-size: 22px; margin: 0 0 14px; }
.tool-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool-cards-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tool-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.tool-card:hover { border-color: var(--purple-glow); transform: translateY(-2px); }
.tool-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tool-card-label { font-family: var(--font-display); font-size: 20px; color: var(--text); }
.tool-cards-lg .tool-card-label { font-size: 24px; }
.tool-card-blurb { color: var(--text-dim); font-size: 14.5px; line-height: 1.55; }
.tool-card-go { margin-top: auto; padding-top: 8px; color: var(--accent); font-weight: 600; font-size: 14.5px; }
.tool-hub-more { color: var(--text-dim); text-align: center; line-height: 1.7; }

.tool-about { padding: 0 0 0; max-width: none; }
.tool-about h2 { font-size: 22px; }

@media (max-width: 860px) {
  .tool-picks { grid-template-columns: 1fr; }
  .lv-layout { grid-template-columns: 1fr; }
  .tool-options-4, .tool-options-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-options-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tool-sliders-3 { grid-template-columns: 1fr; }
  .tool-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tool-wrap { padding-left: 16px; padding-right: 16px; }
  .tool-panel { padding: 18px 16px; }
  .tool-form-row, .tool-columns, .tool-sliders, .dv-layout { grid-template-columns: 1fr; }
  .tool-options-4, .tool-options-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-form-row .btn { width: 100%; }
  .tool-cards, .tool-cards-lg { grid-template-columns: 1fr; }
  .tool-table { font-size: 14px; }
  .tool-table th, .tool-table td { padding: 9px 8px; }
  /* The decoder's table reads as a list of cards on a phone: spec,
     value, then what it means at full width. */
  .tool-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tool-stack tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .tool-stack th, .tool-stack td { display: block; border: 0; padding: 2px 0; }
  .tool-stack td:nth-of-type(1) { color: var(--text); font-weight: 600; }
}
@media (max-width: 420px) {
  .tool-options { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card { transition: none; }
  .tool-card:hover { transform: none; }
}
@media (max-width: 420px) {
  .tool-options-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  /* Stacked kit rows: the price sits under the item rather than in a squeezed column. */
  .tool-stack .tool-num { color: var(--accent); font-weight: 600; padding-top: 4px; }
  .tool-stack .tool-row-head { padding-bottom: 0; border-bottom: 0; }
}