/* Free tools pages (/tools, /tools/<slug>): layout B (inputs + sticky result), result bar on phones.
 * Builds on site.css tokens and the .subpage .card glass ring from subpage.css. Spec: docs/superpowers/specs/2026-10-27-free-tools-design.md */
.tools-page [hidden]{display:none!important}
.tools-page .tool-wrap{width:min(100% - 40px,1080px)}
.tools-page .ico{width:20px;height:20px}

/* hub + "more tools" cards: screenshot in a 16px-radius frame, CategoryIcon chip + name, one line, full-width primary button.
 * The button is the card's only link; its ::after stretches over the card (the card is the positioned ancestor). */
.tool-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0 0 24px}
@media (min-width:640px){.tool-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.subpage .tool-card{display:flex;flex-direction:column;gap:12px;margin:0;padding:20px}
@media (min-width:781px){.subpage .tool-card{padding:24px}}
.tool-card-shot{position:relative;overflow:hidden;border-radius:16px;background:#0b0a0f}
.tool-card-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.tool-card-shot::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.45));pointer-events:none}
.tool-card-head{display:flex;align-items:center;gap:12px;margin-top:4px}
.tool-card .t-cat{--c:#8A54FF}
.subpage .tool-card-name{margin:0;font:600 22px/1.25 var(--display)}
.subpage .tool-card-line{margin:0 0 8px;color:var(--muted);font-size:16px;line-height:1.5}
.subpage .tool-card .tool-card-cta{width:100%;height:auto;min-height:56px;margin-top:auto;white-space:normal;text-align:center}
.tool-card-cta::after{content:"";position:absolute;inset:0;border-radius:var(--r-card)}
.tool-card-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* The card lifts, not the button: a transform on the button would make it the ::after's containing block and drop the hover. */
.subpage .tool-card .tool-card-cta:hover,.subpage .tool-card .tool-card-cta:active{transform:none;box-shadow:none}
@media (hover:hover){
  .subpage .tool-card{transition:transform .25s ease,box-shadow .25s ease}
  .subpage .tool-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.35)}
  .subpage .tool-card:hover::before{background:var(--stroke-hover)}
  .subpage .tool-card:hover .tool-card-cta{background:#f4f1ff}
}

/* layout B */
.tool{margin:0 0 48px}
.tool-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:16px;align-items:start}
.subpage .tool-inputs{margin:0}
.subpage .tool-result{margin:0;position:sticky;top:112px;display:flex;flex-direction:column;gap:8px}
.tool-result:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tool-result:focus:not(:focus-visible){outline:none}
.tool-controls{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-start;margin:0 0 20px}

/* ===== web ports of the app's components (dark theme values from src/ui/theme.tsx) =====
 * Shared ring: GlassSurface's 1px inside stroke, white 5% -> 30% diagonal (strokeGradient), as a masked pseudo-element. */
.t-field,.t-chip span,.pack-group,.pack-groups .tool-controls{position:relative}
.t-field::before,.t-chip input:not(:checked)+span::before,.pack-group::before,.pack-groups .tool-controls::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:var(--stroke);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}

/* FormField: glass pill (radii.input 999, surfaceGlass rgba(0,0,0,.5)), control.height 56, 16px side padding, 14px text;
 * an inner 1px border, transparent, brand #8A54FF on focus, danger #ff6b6b on error (error wins). */
.t-field{display:flex;align-items:center;min-width:0;border-radius:999px;background:rgba(0,0,0,.5)}
.tool .t-field input{flex:1;min-width:0;width:100%;height:56px;margin:0;padding:0 16px;border:1px solid transparent;border-radius:999px;background:transparent;color:#fff;font:400 14px/1.4 var(--body);outline:none}
.tool .t-field input::placeholder{color:var(--muted);opacity:1}
.tool .t-field input:focus{border-color:#8A54FF}
/* iOS Safari zooms into inputs under 16px: touch screens get 16px, the app's 14px stays on desktop. */
@media (hover:none) and (pointer:coarse){.tool .t-field input{font-size:16px}}
.t-chips legend{font:600 14px/1.4 var(--body);color:var(--muted);padding:0;margin:0 0 4px}

/* SelectChip / FilterChips: 36px (control.selector) pill, 12px side padding, 14px text.
 * Selected: solid chipSelectedBg #fff, chipSelectedText #141414, semibold. Unselected: surfaceGlass + ring, white, regular. */
.t-chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.t-chips legend{width:100%;float:left}
.t-chip{position:relative;display:inline-flex}
.t-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.t-chip span{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font:400 14px/1 var(--body);white-space:nowrap}
.t-chip input:checked+span{background:#fff;color:#141414;font-weight:600}
.t-chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover){.t-chip input:not(:checked):hover+span{background:rgba(255,255,255,.06)}}

/* Button: boxed variants are 56px (control.height) pills (radii.input), 16/24 padding, 16px semibold, gap 8, icons 20.
 * primary: solid buttonPrimaryBg #fff + #1f1f1f (the site's .btn-primary); secondary: transparent, 1px text-coloured (#fff) border;
 * text: no box, 14px semibold accent #8A54FF label + tinted icon, gap 4 (muted tone: textSecondary #a8a8b0). Pressed .85, disabled .5. */
.t-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
.t-btn:active{opacity:.85}
.t-btn:disabled{opacity:.5;cursor:default}
.t-btn .ico{width:20px;height:20px;flex:none}
.t-btn--secondary{min-height:56px;padding:16px 24px;border-radius:999px;border:1px solid #fff;color:#fff;font-size:16px;line-height:24px;white-space:nowrap}
@media (hover:hover){.t-btn--secondary:hover{background:rgba(255,255,255,.1)}}
.t-btn--text{gap:4px;min-height:44px;padding:0 4px;margin:0 -4px;color:#8A54FF;font-size:14px;line-height:20px;text-align:left}
@media (hover:hover){.t-btn--text:hover{text-decoration:underline;text-underline-offset:3px}}

/* CategoryIcon: 18px glyph in a 33px rounded square (radii.checkbox 12), background = colour + 2b alpha, glyph in the colour.
 * Colours: categoryAccents. Budget rows keep their category colour; group cards use their state colour (see .pack-group). */
.t-cat{--c:#8f8f96;position:relative;width:33px;height:33px;flex:none;display:grid;place-items:center;border-radius:12px;color:var(--c)}
.t-cat::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--c);opacity:.169} /* 0x2b / 255 */
.t-cat .ico{position:relative;width:18px;height:18px}
[data-cat="wig"]{--c:#ff7eb6}[data-cat="sewing"]{--c:#56b0ff}[data-cat="armor"]{--c:#8A54FF}[data-cat="makeup"]{--c:#fe9036}
[data-cat="footwear"]{--c:#8a2ad2}[data-cat="accessories"]{--c:#99e689}[data-cat="other"]{--c:#8f8f96}
[data-cat] .t-cat{--c:inherit}

/* ProgressBadge: pill (radii.badge), 2/12 padding, 16px semibold; progressBadgeBg rgba(255,255,255,.12) + #fff, green #07cb76 at 100%. */
.t-badge{flex:none;padding:2px 12px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:600 16px/1.4 var(--body)}
/* ProgressBar (group-card size): 16px, capsule, solid progressBadgeBg track, not striped. The fill is a radial gradient
 * centred on its leading (right) edge with radius = its own width: brandGradient purple -> blue -> orange, successGradient at 100%.
 * 100cqw is the fill's width (it is its own size container); older browsers get the near-identical linear version. */
.t-progress{height:16px;border-radius:8px;background:rgba(255,255,255,.12);overflow:hidden}
.t-progress span{display:block;position:relative;height:100%;width:0;border-radius:8px;overflow:hidden;container-type:inline-size;transition:width .3s ease}
.t-progress span::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to left,#8a2ad2 0%,#2b24e4 39%,#ffa648 100%);
  background:radial-gradient(circle 100cqw at 100% 0,#8a2ad2 0%,#2b24e4 39%,#ffa648 100%)}
.t-progress.is-complete span::before,.is-complete>.t-progress span::before{
  background:linear-gradient(to left,#07cb76 0%,#99e689 39%,#eaff48 100%);
  background:radial-gradient(circle 100cqw at 100% 0,#07cb76 0%,#99e689 39%,#eaff48 100%)}

/* FormSwitch: the iOS switch, 51x31 track, 27px white thumb 2px in; track divider rgba(255,255,255,.12) off, brand #8A54FF on. */
.t-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;font-size:16px;color:#fff;cursor:pointer}
.t-switch input{appearance:none;-webkit-appearance:none;flex:none;width:51px;height:31px;border-radius:16px;background:rgba(255,255,255,.12);position:relative;margin:0;cursor:pointer;transition:background .2s}
.t-switch input::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform .2s}
.t-switch input:checked{background:#8A54FF}
.t-switch input:checked::after{transform:translateX(20px)}
.t-switch input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* budget rows: CategoryIcon chip, part name field, amount field, remove */
.subpage .budget-rows{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.subpage .budget-rows li{margin:0}
.budget-row{display:grid;grid-template-columns:56px minmax(0,1fr) 150px 44px;gap:8px;align-items:center}
/* the row's CategoryIcon matches the 56px fields beside it: radii.tile 16, 24px glyph */
.budget-rows .t-cat{width:56px;height:56px;border-radius:16px}
.budget-rows .t-cat .ico{width:24px;height:24px}
.row-money .cur-sym{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:14px}
.tool .row-money input{padding-left:36px;text-align:right}
.budget-row.is-invalid .row-amount,.budget-row.is-invalid .row-amount:focus{border-color:#ff6b6b}
.subpage .tool-error{color:#ff6b6b;font-size:14px;margin:0 0 12px}
.row-remove,.pack-remove{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.row-remove:hover,.pack-remove:hover{color:#fff;background:var(--glass-w10)}

/* packing: switches in a glass card, then one GroupCard per group (12px between cards) */
.subpage .pack-groups{display:flex;flex-direction:column;gap:12px;margin:0}
.pack-groups .tool-controls{flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0 16px;border-radius:24px;background:rgba(255,255,255,.1)}
.pack-groups .t-switch+.t-switch{border-top:1px solid rgba(255,255,255,.12)}
/* GroupCard: GlassSurface radii.card 24, fill surface rgba(255,255,255,.1); 4px left edge inset 12px top and bottom.
 * State colour: accent #8A54FF while in progress, successGradient.base #07cb76 when complete. As in the app, the
 * CategoryIcon chip, the edge and the ticks take the state colour (GroupCard passes color={stateColor}). */
.pack-group{--state:#8A54FF;border-radius:24px;background:rgba(255,255,255,.1);padding:16px 16px 8px}
.pack-group.is-complete{--state:#07cb76}
.pack-group::after{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:4px;background:var(--state)}
.pack-group .t-cat{--c:var(--state)}
.pack-group-head{display:flex;align-items:center;gap:8px;padding:0 0 8px}
.subpage .pack-group-h{flex:1;min-width:0;font:600 16px/1.4 var(--body);margin:0;color:#fff}
.pack-group.is-complete .t-badge{background:#07cb76}
.pack-progress{margin:8px 0}
.subpage .pack-list{list-style:none;padding:0;margin:0}
.subpage .pack-list li{margin:0}
.pack-item{display:flex;align-items:center;gap:4px}
.pack-item label{flex:1;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 0;cursor:pointer;font-size:14px;line-height:1.4;color:#fff}
.pack-item input{position:absolute;opacity:0;width:1px;height:1px}
/* ListCheck: 24px, radii.checkbox 12; unchecked surface rgba(255,255,255,.1) + 1px progressBadgeBg rgba(255,255,255,.12) border;
 * checked fill accent #8A54FF (#07cb76 once the group is complete), bold 16px white tick. Done label: muted + line-through. */
.pack-box{width:24px;height:24px;flex:none;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.1);display:grid;place-items:center;color:transparent}
.pack-box .ico{width:16px;height:16px}
.pack-item input:checked+.pack-box{background:var(--state,#8A54FF);border-color:transparent;color:#fff}
.pack-item input:checked~.pack-label{color:var(--muted);text-decoration:line-through}
.pack-item input:focus-visible+.pack-box{outline:2px solid var(--accent);outline-offset:2px}
.pack-add{display:flex;gap:8px;padding:8px 0}
.pack-add .t-field{flex:1}

/* result card: Tori's comment on top, drawn as the app's Tori chat message (MessageBubble, assistant role, dark theme):
 * 36px avatar bottom-aligned with the bubble, 8px gap; bubble surface rgba(255,255,255,.1), radii.bubble 20 with the
 * radii.bubbleTail 6 corner bottom-left (next to the speaker), 12/16 padding, 16/22 white text, max 85% wide. */
.tori-line{display:flex;align-items:flex-end;gap:8px;margin:0 0 8px}
.tori-avatar{width:36px;height:36px;flex:none;border-radius:50%}
.tori-avatar.is-pop{animation:tori-pop .6s ease}
@keyframes tori-pop{0%,100%{transform:scale(1)}35%{transform:scale(1.18) rotate(-6deg)}70%{transform:scale(.96) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.tori-avatar.is-pop{animation:none}}
.subpage .tori-say{flex:0 1 auto;min-width:0;max-width:85%;margin:0;padding:12px 16px;border-radius:20px 20px 20px 6px;background:rgba(255,255,255,.1);font-size:16px;line-height:22px;color:#fff;overflow-wrap:break-word}
.result-label{color:var(--muted);font-size:15px;margin-top:-4px} /* under the number */
.result-total{font:600 40px/1.15 var(--display);color:#fff}
.result-sub{color:var(--muted);font-size:14px}
.subpage .result-bars{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:10px}
.subpage .result-bars li{margin:0;display:grid;grid-template-columns:1fr auto;gap:4px 8px;font-size:14px;color:#e8e8e8}
.rb-track{grid-column:1/-1;height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.rb-track span{display:block;height:100%;background:#fff;border-radius:2px}
.result-meter{margin:4px 0}
.subpage .result-done{color:#fff;font-weight:600;margin:0}
.tool-actions{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.tool-actions .t-btn{flex:1 1 auto;padding:16px}
.subpage .tool-status{min-height:20px;font-size:14px;color:var(--muted);margin:0}
.subpage a.btn-primary{color:#000;text-decoration:none}
.subpage a.btn-primary:hover{color:#000}
.tool-cta{margin-top:4px;width:100%;white-space:normal;height:auto;min-height:56px}
.tool-clear{align-self:center;margin:0}
.tool-clear:disabled{display:none}

/* FAQ card on tool pages */
.subpage .tool-faq h3{margin:24px 0 8px}
.subpage .tool-faq h3:first-child{margin-top:0}

/* phone result bar */
.tool-bar{display:none}
@media (max-width:780px){
  .subpage.tools-page .sub-wrap{padding-bottom:152px}
  .tool-grid{grid-template-columns:1fr}
  .subpage .tool-result{position:static}
  .budget-row{grid-template-columns:56px minmax(0,1fr) 120px 44px}
  .tool-bar{display:flex;align-items:center;gap:10px;position:fixed;left:12px;right:12px;bottom:12px;z-index:20;padding:12px 12px 12px 20px;border-radius:var(--r-card);background:rgba(20,20,20,.92);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.12);transition:transform .25s ease,opacity .25s ease,visibility 0s}
  .tool-bar.is-hidden{transform:translateY(140%);opacity:0;pointer-events:none;visibility:hidden;transition:transform .25s ease,opacity .25s ease,visibility 0s .25s}
  .bar-label{color:var(--muted);font-size:14px}
  .bar-value{font-size:18px;margin-right:auto}
  .bar-open{min-height:44px;padding:8px 16px;border-radius:var(--r-btn);background:#fff;color:#000;font-weight:600;font-size:14px}
}
@media (max-width:480px){.budget-row{grid-template-columns:56px minmax(0,1fr) 44px}.budget-row .row-field{grid-column:2/-1}.budget-row .row-money{grid-column:1/3}}
@media (prefers-reduced-motion:reduce){.t-switch input,.t-switch input::after,.tool-bar,.t-progress span,.subpage .tool-card{transition:none}
  .subpage .tool-card:hover{transform:none}}

/* print: only the result (budget) or the list with tick boxes (packing) */
@media print{
  body{background:#fff!important;color:#000!important}
  .site-header,.site-footer,.menu-backdrop,.menu-sheet,.glow,.tool-bar,.tool-controls,.tool-add,.pack-add,.row-remove,.pack-remove,.tool-actions,.tool-status,.tool-cta,.tool-clear,.tori-line,.t-cat,.t-badge,.t-progress,.faq-tip,.faq-cta,.tool-cards,.tool-faq,.subpage h2,.subpage .lead,.subpage .meta,main.subpage>.sub-wrap>p{display:none!important}
  .subpage .card,.pack-group{background:none!important;padding:0!important}
  .subpage .card::before,.pack-group::before,.pack-group::after{display:none}
  .pack-group{margin:0 0 16px}
  .subpage h1,.result-total,.result-label,.result-sub,.pack-group-h,.pack-item label,.rb-name,.rb-amount{color:#000!important}
  .tool-grid{display:block}
  [data-tool="budget"] .tool-inputs{display:none}
  [data-tool="packing"] .tool-result{display:none}
  .result-bars li{color:#000!important}
  .rb-track span,.pack-box{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .pack-box{border-color:#000!important;background:#fff!important}
  .pack-item input:checked+.pack-box{color:#000!important}
  .pack-item input:checked~.pack-label{text-decoration:none;color:#000!important}
  .rb-track{background:#ddd!important}.rb-track span{background:#000!important}
}