/* Toolbox page (toolbox.html): the cost calculator as one calm card, the product check as a row.
   Ids in the selectors outrank the page-wide ".shared-workbench #main input/button" rules. */
#main .tbx{max-width:760px;color:var(--ink)}
#main .tbx :is(h1,h2,p){margin:0}
#main .tbx .tbx-head{margin:0 0 24px}
#main .tbx .tbx-head h1{margin:0 0 6px;font-size:30px;font-weight:600;line-height:1.15;letter-spacing:-.025em}
#main .tbx .tbx-head p{font-size:15px;color:var(--muted)}
#main .tbx .tbx-card{display:block;margin:0 0 16px;padding:24px;border-radius:22px;background:color-mix(in srgb,var(--ink) 3%,var(--bg));scroll-margin-top:16px}
#main .tbx .tbx-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 20px}
#main .tbx .tbx-card-head h2{margin:0 0 4px;font-size:20px;font-weight:600;letter-spacing:-.01em}
#main .tbx .tbx-card-head p{font-size:14px;color:var(--muted)}
#main #cost-import{flex:none;height:36px;margin:0;padding:0 16px;border:0;border-radius:999px;background:var(--bg);color:var(--ink);font:inherit;font-size:14px;font-weight:600;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent);cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}
#main #cost-import:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent)}
#main #cost-import:active{transform:scale(.97)}

/* Fields */
#main #tool-cost .grid{display:block}
#main #tool-cost .tbx-group{margin:0 0 18px;padding:0;border:0;min-width:0}
#main #tool-cost .tbx-group legend{margin:0 0 8px;padding:0;font-size:13px;font-weight:600;color:var(--muted)}
#main #tool-cost .tbx-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
#main #tool-cost .tbx-field{display:flex;flex-direction:column;gap:6px;margin:0;font-size:13px;font-weight:500}
#main #tool-cost .tbx-label{color:var(--ink)}
#main #tool-cost .tbx-input{position:relative;display:flex;align-items:center;height:48px;padding:0 14px;border-radius:14px;background:var(--bg);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent);transition:box-shadow .15s ease}
#main #tool-cost .tbx-input:focus-within{box-shadow:0 0 0 2px var(--tp-purple,#7532d6),0 0 0 6px color-mix(in srgb,#7532d6 14%,transparent)}
#main #tool-cost .tbx-input i{font-style:normal;font-size:15px;color:var(--muted)}
#main #tool-cost .tbx-input input{flex:1;width:100%;min-width:0;height:100%;margin:0;padding:0 0 0 6px;border:0;border-radius:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;box-shadow:none}
#main #tool-cost .tbx-input input::placeholder{color:color-mix(in srgb,var(--muted) 70%,var(--bg))}
#main #tool-cost .tbx-input input::-webkit-outer-spin-button,#main #tool-cost .tbx-input input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}
#main #tool-cost .tbx-input input[type=number]{-moz-appearance:textfield}
#main #tool-cost .tbx-field.is-big{max-width:280px}
#main #tool-cost .tbx-field.is-big .tbx-input{height:58px}
#main #tool-cost .tbx-field.is-big .tbx-input i{font-size:20px}
#main #tool-cost .tbx-field.is-big input{font-size:24px;font-weight:600}
#main #tool-cost .tbx-field.is-qty{flex-direction:row;align-items:center;gap:12px;max-width:260px}
#main #tool-cost .tbx-field.is-qty .tbx-input{width:110px;height:42px}
#main #tool-cost .tbx-field.is-qty .tbx-input input{padding:0 6px 0 0;text-align:right}
#main #tool-cost .primary{display:inline-flex;align-items:center;justify-content:center;min-width:140px;height:46px;margin:6px 0 0;padding:0 28px;border:0;border-radius:999px;background:var(--button);color:var(--button-ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .15s ease,transform .15s ease}
#main #tool-cost .primary:hover{opacity:.86}
#main #tool-cost .primary:active{transform:scale(.97)}

/* Result: the same card the lessons use (#tutorial-calculation in tutorial-panel-v2.css). */
#main #cost-result{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
#main #cost-result:empty{display:none}
#main #cost-result:has(.tc-big){margin:20px 0 0;padding:20px 22px;border-radius:18px;background:var(--bg)}
#main #cost-result .tc-label{font-size:13px;font-weight:600;color:var(--muted)}
#main #cost-result .tc-big{margin:2px 0 6px;font-size:40px;font-weight:700;line-height:1.1;letter-spacing:-.03em;color:#248a3d;font-variant-numeric:tabular-nums}
#main #cost-result .tc-big.is-loss{color:#d70015}
#main #cost-result .tc-line{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
#main #cost-result .tc-line strong{font-weight:600;color:var(--ink)}
#main #cost-result .tc-note{margin:10px 0 0;font-size:12px;color:var(--muted)}
:root[data-theme=dark] #main #cost-result .tc-big{color:#30d158}
:root[data-theme=dark] #main #cost-result .tc-big.is-loss{color:#ff453a}
#main #tutorial-calculation{background:var(--bg)}
#main .tbx .tbx-note{margin:16px 0 0;font-size:12px;color:var(--muted)}
#main .tbx .tbx-note a{color:var(--ink);text-underline-offset:3px}

/* Product check row */
#main .tbx .tbx-health{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;padding:18px 20px;color:inherit;text-decoration:none;transition:background-color .15s ease}
#main .tbx .tbx-health:hover{background:color-mix(in srgb,var(--ink) 5%,var(--bg))}
#main .tbx .tbx-health svg{display:block;width:40px;height:40px}
#main .tbx .tbx-health-text{display:flex;flex-direction:column;gap:2px;min-width:0}
#main .tbx .tbx-health-text strong{font-size:16px;font-weight:600}
#main .tbx .tbx-health-text span{font-size:13px;color:var(--muted)}
#main .tbx .tbx-go{display:inline-flex;align-items:center;gap:2px;font-size:14px;font-weight:600;color:var(--muted)}
#main .tbx .tbx-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#main .tbx .tbx-health:hover .tbx-go{color:var(--ink)}
:root[data-theme=dark] #main .tbx .tbx-health svg rect:first-child{fill:#1a2742}

@media(max-width:600px){
 #main .tbx .tbx-head h1{font-size:28px}
 #main .tbx .tbx-card{padding:18px;border-radius:20px}
 #main .tbx .tbx-card-head{flex-direction:column;gap:12px}
 #main #tool-cost .tbx-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
 #main #tool-cost .tbx-field.is-big{max-width:none;grid-column:1/-1}
 #main #tool-cost .primary{width:100%}
}
@media(prefers-reduced-motion:reduce){#main #tool-cost *,#main #cost-import{transition:none}}
/* The price group's title says it all; the field's own label stays for screen readers. */
#main #tool-cost .tbx-field.is-big .tbx-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#main #tool-cost .tbx-field.is-qty .tbx-label{white-space:nowrap}
#main .tbx .tbx-health-icon svg{stroke:none}
:root[data-theme=dark] #main .tbx .tbx-card{background:#1c1c1e}
:root[data-theme=dark] #main #tool-cost .tbx-input,:root[data-theme=dark] #main #cost-import,:root[data-theme=dark] #main #cost-result:has(.tc-big),:root[data-theme=dark] #main #tutorial-calculation{background:#2c2c2e}
:root[data-theme=dark] #main .tbx .tbx-health:hover{background:#232325}