/* Stopwatch.ca — calculator pages (time calculator, pace calculator, time converter, hours calculator).
   Builds on the tokens and classes in app.css; everything here is scoped to .cx. Mobile-first. */

.cx{--cx-field:var(--panel2);color-scheme:dark}
.cx input,.cx select{color-scheme:dark}
.cx input[type=text],.cx input[type=date],.cx input[type=datetime-local],.cx input[type=number],.cx select{
  width:100%;min-width:0;background:var(--cx-field);border:1px solid var(--pline);border-radius:10px;padding:10px 11px;color:var(--digit);font-size:16px;line-height:1.3}
.cx input::placeholder{color:#5f6977}
.cx input:focus,.cx select:focus{border-color:var(--accent)}
.cx input[aria-invalid=true]{border-color:var(--worst)}
.cx input[readonly]{cursor:default}
.cx input.cx-calc{border-color:var(--accent);background:#1d1812;color:var(--digit);font-weight:700}
.cx .num,.cx input[type=text]{font-variant-numeric:tabular-nums}
.cx .toolbar{align-items:center}
.cx .btn.sm{min-height:40px}
.cx .opt label,.cx .opt .lbl{margin-bottom:6px}
.cx .opt label span,.cx .opt label i{text-transform:none;letter-spacing:0;font-weight:600;font-style:normal;color:var(--pmuted)}
.cx .note-s a{color:var(--accent2)}
.cx .note-s.bad,.cx-hint.bad{color:var(--warn)}
.cx .opts{margin-top:14px}
.cx-flat{border-top:0!important;padding-top:0!important;margin-top:14px}

/* mode switch */
.cx-modes{margin:0 0 14px}
.cx-modes .seg{max-width:460px}
.cx-modes .seg button{padding:10px 6px;font-size:14px}

/* ---------- time calculator rows ---------- */
.cx-rows{display:grid;gap:10px}
.cx-row{display:grid;grid-template-columns:auto minmax(0,1fr) 42px;gap:8px;align-items:start}
.cx-op{width:86px}
.cx-op button{font-size:19px;padding:8px 0;min-height:40px}
.cx-cell{min-width:0}
.cx-in{font-size:20px!important;font-weight:650}
.cx-echo{display:block;min-height:1.3em;margin:4px 2px 0;font-size:12.5px;color:var(--pmuted);font-variant-numeric:tabular-nums}
.cx-echo.bad{color:var(--worst)}
.cx-x{appearance:none;width:42px;height:42px;border:1px solid var(--pline);background:var(--panel2);color:var(--pmuted);border-radius:10px;font-size:20px;line-height:1;cursor:pointer}
.cx-x:hover{color:var(--digit);border-color:#47515f}
.cx-tools{margin-top:12px}
.cx-inline{display:flex;align-items:center;gap:8px;margin-left:auto}
.cx-inline label{font:700 10.5px/1.2 system-ui;letter-spacing:1.1px;text-transform:uppercase;color:var(--pmuted)}
.cx-inline select{width:auto;padding:8px 10px;font-size:14px}

/* ---------- results ---------- */
.cx-out{margin-top:16px;padding-top:14px;border-top:1px solid var(--pline)}
.cx-total{font-size:clamp(38px,9.5vw,84px);font-weight:650;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--digit);overflow-wrap:anywhere}
.cx-total.neg{color:var(--worst)}
.cx-sub{font-size:clamp(17px,3.4vw,24px);color:var(--accent2);font-weight:600;margin-top:4px}
.cx-hint{margin:8px 0 12px;font-size:13.5px;color:var(--pmuted);min-height:1.4em}
.cx .stats b{overflow-wrap:anywhere}

/* ---------- date and time ---------- */
.cx-dur{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}

/* ---------- pace ---------- */
.cx-bar{display:grid;grid-template-columns:1fr;gap:12px}
.cx-presets{margin-top:14px}
.cx-presets .presets{margin:0}
.cx-fields{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.cx-stats{margin-top:14px}
.cx-flat3{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 16px;margin:0 0 4px}
.cx-flat4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.cx .grp .body.diag{padding-top:6px}
.cx .grp .opt input[type=text],.cx .grp .opt select{background:var(--panel)}
.cx .ltable{font-size:14px}
.cx .ltable th,.cx .ltable td{padding:8px 6px}
.cx .ltable tr.best td{color:var(--best)}
.cx .ltable tr.total td{font-weight:700;border-top:1px solid var(--pline);color:var(--digit)}
.cx .ltable .tag{margin-left:4px}
.cx-splits td:first-child,.cx-splits th:first-child{width:3.2em}
.cx-empty{color:var(--pmuted);text-align:center!important;padding:14px 6px!important;white-space:normal!important}
.cx .scroll-x{overflow-x:auto}

/* ---------- converter ---------- */
.cx-lead{margin:0 0 12px}
.cx-units{display:grid;grid-template-columns:1fr;gap:12px}
.cx-unit label{display:block;font:700 10.5px/1.3 system-ui;letter-spacing:1.2px;text-transform:uppercase;color:var(--pmuted);margin-bottom:6px}
.cx-unit label i{font-style:normal;text-transform:none;letter-spacing:0;font-weight:600;margin-left:6px;color:var(--pmuted)}
.cx-uin{position:relative}
.cx-uin input{padding-right:46px;font-size:17px}
.cx-uin span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--pmuted);pointer-events:none}
.cx-cards{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px}
.cx-card{background:var(--panel2);border:1px solid var(--pline);border-radius:14px;padding:14px;min-width:0}
.cx-card h2{margin:0 0 12px;font-size:15px;letter-spacing:-.1px;color:var(--digit)}
.cx-card .opt input,.cx-card .opt select{background:var(--panel)}
.cx-two{margin-top:10px}
.cx-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cx-dl{margin:12px 0 0;display:grid;gap:1px;background:var(--pline);border:1px solid var(--pline);border-radius:10px;overflow:hidden}
.cx-dl div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:var(--panel);padding:9px 12px}
.cx-dl dt{color:var(--pmuted);font-size:13px;font-weight:700}
.cx-dl dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere;min-width:0}

/* ---------- hours calculator ---------- */
.cx-hhead{display:none}
.cx-shifts{display:grid;gap:10px}
.cx-shift{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 42px;grid-template-areas:"date date x" "start end x" "brk res res" "msg msg msg";gap:8px;align-items:start;background:var(--panel2);border:1px solid var(--pline);border-radius:12px;padding:10px}
.cx-shift>:nth-child(1){grid-area:date}
.cx-shift>:nth-child(2){grid-area:start}
.cx-shift>:nth-child(3){grid-area:end}
.cx-shift>:nth-child(4){grid-area:brk}
.cx-shift>:nth-child(5){grid-area:res}
.cx-shift>:nth-child(6){grid-area:x}
.cx-shift>:nth-child(7){grid-area:msg}
.cx-shift .cx-f input{background:var(--panel)}
.cx-f::before,.cx-res::before{content:attr(data-l);display:block;font:700 10px/1.3 system-ui;letter-spacing:1.1px;text-transform:uppercase;color:var(--pmuted);margin-bottom:4px}
.cx-res{align-self:stretch;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-variant-numeric:tabular-nums;min-height:48px;align-content:flex-start}
.cx-res::before{flex:0 0 100%}
.cx-res b{font-size:20px;letter-spacing:-.3px}
.cx-res span{color:var(--pmuted);font-size:13.5px}
.cx-res i{font:700 10px/1 system-ui;letter-spacing:.8px;text-transform:uppercase;color:var(--accent2);border:1px solid var(--pline);border-radius:5px;padding:3px 5px;font-style:normal}
.cx-err{font-style:normal;color:var(--worst);font-size:13px}
.cx-dim{color:var(--pmuted)}
.cx-rowmsg{font-size:12.5px;line-height:1.45;color:var(--warn);padding:2px 2px 0}
.cx-rowmsg.info{color:var(--pmuted)}
.cx-days{margin-top:6px}
.cx-days .cx-dim{font-size:12px;margin-left:4px}

/* ---------- wider screens ---------- */
@media (min-width:600px){
  .cx-bar{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px 18px}
  .cx-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cx-dur{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cx-units{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
  .cx-cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
}
@media (min-width:780px){
  .cx-hhead{display:grid;grid-template-columns:minmax(140px,1.25fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr) minmax(130px,1fr) 42px;gap:8px;padding:0 10px 6px;font:700 10.5px/1.3 system-ui;letter-spacing:1.1px;text-transform:uppercase;color:var(--pmuted)}
  .cx-hhead i{font-style:normal;text-transform:none;letter-spacing:0;font-weight:600}
  .cx-shifts{gap:6px}
  .cx-shift{grid-template-columns:minmax(140px,1.25fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr) minmax(130px,1fr) 42px;grid-template-areas:"date start end brk res x" "msg msg msg msg msg msg";align-items:center;padding:8px 10px}
  .cx-f::before,.cx-res::before{display:none}
  .cx-res{min-height:0;align-content:center;align-items:center}
  .cx-rowmsg{padding:0 2px 2px}
}
@media (max-width:420px){
  .cx .ltable{font-size:13px}
  .cx .ltable th,.cx .ltable td{padding:7px 4px}
  .cx .ltable th{font-size:9.5px;letter-spacing:.6px}
  .cx-tools .cx-inline{margin-left:0;width:100%}
  .cx-op{width:80px}
}