/* CalcWyse — shared calculator UI layer (loaded by every /tools/*.html after its own styles).
   Purpose: one brand accent, readable type, touch-friendly inputs, and layouts that never
   overflow on a phone. Keep selectors generic: the tools use several class-name families. */

/* 1. One brand accent across all calculators */
:root{
  --cw-accent:#c9a84c; --cw-accent-soft:rgba(201,168,76,.13); --cw-accent-line:rgba(201,168,76,.32); --cw-accent-strong:#e0c26a;
  --a:var(--cw-accent); --ad:var(--cw-accent-soft); --ab:var(--cw-accent-line);
  --ac:var(--cw-accent); --ac-d:var(--cw-accent-soft); --ac-b:var(--cw-accent-line); --ac-l:var(--cw-accent-strong);
  --accent:var(--cw-accent); --accent-dim:var(--cw-accent-soft); --accent-border:var(--cw-accent-line);
}

/* 2. Nothing may be wider than the screen */
html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
body *{min-width:0}
img,svg,canvas,video{max-width:100%}
canvas{height:auto}
.cw-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border-radius:10px}
.cw-scroll>table{min-width:480px}
td,th{overflow-wrap:normal}

/* 3. Readable, calm type */
body{font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%;text-size-adjust:100%}
label,.kl,.sc-l,.hl,.ri-lbl,.panel-title,.ch,.ph{letter-spacing:.04em}
input,select,textarea,button{font-family:inherit}
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),select,textarea{font-size:16px!important;min-height:46px}
.iw,.input-wrap{min-height:48px}
.iw input,.input-wrap input{min-height:0}
.iw>input:first-child,.input-wrap>input:first-child{padding-left:13px!important}
.iw>input:last-child,.input-wrap>input:last-child{padding-right:13px!important}
button{min-height:44px;touch-action:manipulation}
input[type=range]{width:100%;margin:10px 0;touch-action:pan-y}
:focus-visible{outline:2px solid var(--cw-accent);outline-offset:2px}

/* 4. Section headers get an icon (added by tool-ui.js) */
.cw-ico{display:inline-flex;width:1.3em;height:1.3em;flex:0 0 auto;vertical-align:-0.2em;margin-right:.45em;color:var(--cw-accent)}
.cw-ico svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
label .cw-ico{opacity:.9}

/* 5. Plain-language result sentence (each tool fills #cw-summary) */
.cw-summary{margin:0 0 14px;padding:14px 16px;border-radius:12px;border:1px solid var(--cw-accent-line);background:var(--cw-accent-soft);
  font-size:16px;line-height:1.55;color:#f1f5f9;font-family:var(--sans,system-ui,sans-serif);text-align:left}
.cw-summary strong{color:#fff;font-weight:700}
.cw-summary:empty{display:none}
.cw-help{display:block;margin-top:5px;font-size:13px;line-height:1.45;color:#94a3b8;text-transform:none;letter-spacing:0;font-weight:400}

/* 6. Simple SVG bar breakdown (rendered by CWUI.bars) */
.cw-bars{margin:0 0 14px;display:grid;gap:10px}
.cw-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;font-size:14px;color:#cbd5e1}
.cw-bar__val{font-family:var(--mono,ui-monospace,monospace);color:#f1f5f9;font-variant-numeric:tabular-nums}
.cw-bar__track{grid-column:1/-1;height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.cw-bar__fill{height:100%;border-radius:999px;background:var(--cw-accent);min-width:2px;transition:width .25s}
.cw-bar--good .cw-bar__fill{background:#34d399}
.cw-bar--bad .cw-bar__fill{background:#f87171}
.cw-bar--muted .cw-bar__fill{background:#64748b}

/* 7. Two-column desktop layouts: flexible, then stacked on small screens */
.lay,.layout{grid-template-columns:minmax(0,360px) minmax(0,1fr)}
@media (max-width:820px){
  .lay,.layout{grid-template-columns:minmax(0,1fr)!important;display:grid}
  .pw,.page-wrap{padding-left:12px!important;padding-right:12px!important}
}
@media (max-width:560px){
  .pw,.page-wrap{padding-left:8px!important;padding-right:8px!important}
  .panel-body,.cb,.pb,.card-body{padding-left:14px!important;padding-right:14px!important}
  .panel-head,.ch,.ph{padding-left:14px!important;padding-right:14px!important}
  /* result tiles: two per row when they fit, otherwise one */
  .kgrid,.kg,.sg,.kpi-grid,.results-grid,.stat-grid,.mets,.sgrid{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))!important}
  /* headline numbers scale down instead of overflowing */
  .hv,.hero-val,.result-value,.big,.big-val{font-size:clamp(26px,9.5vw,40px)!important;overflow-wrap:anywhere}
  .kpi-val{font-size:clamp(18px,5.6vw,26px)!important;overflow-wrap:anywhere}
  .kv,.sc-v,.sv,.met-val,.ri-val{font-size:clamp(15px,4.6vw,19px)!important;overflow-wrap:anywhere}
  /* tab rows scroll sideways rather than wrapping off-screen */
  .tabs,.cat-tabs,.tab-row{display:flex;flex-wrap:wrap;gap:6px}
  .tabs>*,.cat-tabs>*,.tab-row>*{flex:1 1 auto;text-align:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}