/* ============================================================
   COSTMEHOURS  /  CALCULATOR UI
   Builds on base.css tokens. The calculator is a two-column
   layout: inputs on the left, a sticky results panel on the right.
   ============================================================ */

.calc-section{padding:48px 0 88px;}
.calc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:start;}
@media(max-width:960px){.calc-grid{grid-template-columns:1fr;}}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;}
.panel + .panel{margin-top:22px;}
.panel-head{padding:20px 24px;border-bottom:1px solid var(--line);}
.panel-head h2,.panel-head h3{font-family:var(--serif);font-style:italic;color:var(--heading);}
.panel-head h3{font-size:20px;}
.panel-head .eyebrow{margin-bottom:4px;}
.panel-body{padding:22px 24px;}

/* ---------- profile bar ---------- */
.profile-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;}
.profile-bar .grow{flex:1 1 180px;}
.profile-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.profile-actions .btn{padding:11px 18px;font-size:12.5px;}
/* Document actions and utility actions read as two groups, not one flat row. */
.action-group{display:flex;gap:8px;flex-wrap:wrap;}
.action-group-utility{margin-left:auto;padding-left:12px;border-left:1px solid var(--line);}
@media (max-width:620px){
  .action-group-utility{margin-left:0;padding-left:0;border-left:none;}
}

/* ---------- form fields ---------- */
.field{display:flex;flex-direction:column;gap:6px;}
.field label,.field .lab{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--heading);}
.field .hint{font-family:var(--sans);font-size:11px;letter-spacing:normal;text-transform:none;color:var(--muted-lt);}
.field-label-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.field-label-row label{flex:1;}
.field input,.field select{
  background:var(--navy);border:1px solid rgba(10,22,40,.3);border-radius:7px;color:#fff;
  font-family:var(--sans);font-size:14px;padding:10px 13px;outline:none;width:100%;
  appearance:none;-webkit-appearance:none;transition:border-color .2s,box-shadow .2s;}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;cursor:pointer;}
.field select option{background:var(--navy);color:#fff;}
.field input:focus,.field select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,160,23,.18);}
.field input::placeholder{color:rgba(255,255,255,.36);}
/* strip number spinners for a cleaner money look */
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.field input[type=number]{-moz-appearance:textfield;}

.field-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 18px;}
.field-grid.cols-1{grid-template-columns:1fr;}
@media(max-width:520px){.field-grid{grid-template-columns:1fr;}}

/* ---------- collapsible input sections ---------- */
.fieldset{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper);}
.fieldset + .fieldset{margin-top:14px;}
.fieldset > summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;background:var(--wash);}
.fieldset > summary::-webkit-details-marker{display:none;}
.fieldset > summary .st{display:flex;flex-direction:column;gap:2px;}
.fieldset > summary .st .title{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--heading);}
.fieldset > summary .st .sub{font-size:12.5px;color:var(--muted);}
.fieldset > summary .meta{display:flex;align-items:center;gap:12px;}
.fieldset > summary .sum{font-family:var(--mono);font-size:12px;color:var(--gold);white-space:nowrap;}
.fieldset > summary .chev{width:16px;height:16px;stroke:var(--muted-lt);transition:transform .2s ease;flex-shrink:0;}
.fieldset[open] > summary .chev{transform:rotate(180deg);}
.fieldset .fs-body{padding:20px;}

/* toggles */
.toggle{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink);cursor:pointer;margin-top:4px;}
.toggle input{width:auto;accent-color:var(--gold);width:16px;height:16px;}

/* segmented control (tax mode) */
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:7px;overflow:hidden;}
.seg button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 16px;background:transparent;color:var(--muted);border:none;cursor:pointer;transition:.18s;}
.seg button.active{background:var(--gold);color:#fff;}

/* small unit-toggle variant (Monthly / Yearly) */
.seg-sm{border-width:1px;border-radius:5px;flex-shrink:0;}
.seg-sm button{padding:2px 7px;font-size:9px;letter-spacing:.06em;}

/* regional utility average comparison hint */
.avg-hint{font-family:var(--sans);font-size:11px;color:var(--muted-lt);min-height:1.3em;line-height:1.3;}
.avg-hint.above{color:var(--neg);}
.avg-hint.below{color:var(--pos);}

/* ============================================================
   RESULTS
   ============================================================ */
.results{position:sticky;top:92px;}
@media(max-width:960px){.results{position:static;}}

/* headline effective-rate card */
.headline{position:relative;overflow:hidden;color:#fff;border-radius:14px;padding:28px 30px;
  background:radial-gradient(600px 300px at 90% -20%,rgba(0,183,232,.16),transparent 60%),
    linear-gradient(150deg,var(--navy),#152038 75%);border-left:4px solid var(--gold);}
.headline .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
.headline .big{font-family:var(--serif);font-style:italic;font-size:clamp(38px,7vw,56px);line-height:1.02;margin-top:8px;}
.headline .big .per{font-family:var(--sans);font-style:normal;font-size:16px;color:var(--cyan-soft);margin-left:6px;}
.headline .cmp{margin-top:14px;font-size:13px;color:rgba(255,255,255,.72);line-height:1.6;}
.headline .cmp b{color:#fff;font-weight:600;}

/* stat tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:16px 16px;}
.tile .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-lt);}
.tile .v{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--heading);margin-top:6px;}
.tile .v.pos{color:var(--pos);}
.tile .v.neg{color:var(--neg);}

/* breakdown list */
.rows{margin-top:4px;}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:12px 0;border-top:1px solid var(--line);}
.row:first-child{border-top:0;}
.row .k{font-size:14px;color:var(--muted);}
.row .v{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--heading);white-space:nowrap;}
.row.total{border-top:2px solid var(--gold);margin-top:4px;padding-top:14px;}
.row.total .k{color:var(--heading);font-weight:600;}
.row.total .v{color:var(--heading);}

/* ---------- click-to-expand detail (same chevron idiom as the form steps) ---------- */
/* The trigger is a real <button> so it is keyboard and screen-reader operable
   for free; these rules strip the native button chrome so it still reads as a
   row or a tile. */
.expandable .tile-trigger,
.expandable .row-trigger{
  width:100%;background:none;border:0;margin:0;cursor:pointer;text-align:left;
  font:inherit;color:inherit;}
.expandable .chev{width:14px;height:14px;stroke:var(--muted-lt);
  transition:transform .2s ease;flex-shrink:0;}
.expandable.open .chev{transform:rotate(180deg);}
.expandable .detail{display:none;}
.expandable.open .detail{display:block;}

/* Rows: the trigger takes over the flex layout the plain .row had. */
.row.expandable{display:block;}
.row.expandable .row-trigger{display:flex;justify-content:space-between;
  align-items:baseline;gap:14px;padding:0;}
.row.expandable .row-trigger .k{display:inline-flex;align-items:center;gap:7px;
  font-size:14px;color:var(--muted);}
.row.expandable .row-trigger .v{font-family:var(--serif);font-style:italic;
  font-size:18px;color:var(--heading);white-space:nowrap;}
.row.expandable:hover .row-trigger .k,
.row.expandable .row-trigger:focus-visible .k{color:var(--heading);}

/* Tiles: padding moves onto the trigger so the whole tile face is clickable. */
.tile.expandable{padding:0;}
.tile.expandable .tile-trigger{display:block;padding:16px;}
.tile.expandable .tile-trigger .k{display:inline-flex;align-items:center;gap:6px;}
.tile.expandable .detail{padding:0 16px 14px;}
.tile.expandable:hover{border-color:var(--cyan-soft);}

/* The itemised list itself. */
.detail-rows{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);}
.detail-row{display:flex;align-items:baseline;gap:10px;padding:5px 0;}
.detail-row .dk{flex:1;font-size:12.5px;color:var(--muted);}
.detail-row .dpct{font-family:var(--mono);font-size:10.5px;color:var(--muted-lt);
  min-width:44px;text-align:right;}
.detail-row .dv{font-family:var(--mono);font-size:12px;color:var(--heading);
  white-space:nowrap;min-width:76px;text-align:right;}
.detail-row .dv.pos{color:var(--pos);}
.detail-row .dv.neg{color:var(--neg);}
.detail-row.detail-total{border-top:1px solid var(--line);margin-top:5px;padding-top:9px;}
.detail-row.detail-total .dk{color:var(--heading);font-weight:600;}
.detail-row.detail-total .dv{color:var(--heading);}

/* mini bar under a category */
.bar{height:6px;border-radius:6px;background:var(--wash-2);overflow:hidden;margin-top:8px;}
.bar > i{display:block;height:100%;background:var(--gold);border-radius:6px;}

/* hidden-time table */
.htable{width:100%;border-collapse:collapse;font-size:13px;}
.htable th,.htable td{padding:10px 8px;text-align:right;}
.htable th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-lt);border-bottom:1px solid var(--line);font-weight:500;}
.htable th:first-child,.htable td:first-child{text-align:left;}
.htable td{border-bottom:1px solid var(--line-soft);color:var(--ink);}
.htable td.cat{font-weight:600;color:var(--heading);}
.htable tbody tr:last-child td{border-bottom:0;}

/* ---------- purchase widget ---------- */
.purchase{border:1px solid var(--line);border-radius:14px;background:var(--paper);overflow:hidden;margin-top:22px;}
.purchase .ph{padding:18px 22px;border-bottom:1px solid var(--line);background:var(--wash);}
.purchase .pb{padding:20px 22px;}
.purchase .prow{display:flex;gap:10px;align-items:stretch;}
.purchase .prow .field{flex:1;}
.purchase .prow .btn{align-self:stretch;margin-top:auto;}
.pout{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.pout .cell{background:var(--navy);color:#fff;border-radius:11px;padding:16px;text-align:center;}
.pout .cell .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}
.pout .cell .v{font-family:var(--serif);font-style:italic;font-size:30px;margin-top:6px;line-height:1;}
.pout .cell .u{font-size:12px;color:var(--cyan-soft);margin-top:4px;font-family:var(--sans);}
.pout-note{margin-top:12px;font-size:12.5px;color:var(--muted);line-height:1.55;}

/* empty / hint state */
.muted-note{font-size:13px;color:var(--muted-lt);line-height:1.6;}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--navy);color:#fff;padding:12px 22px;border-radius:9px;font-size:13.5px;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:200;
  border-left:3px solid var(--gold);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.disclaimer{font-size:12px;color:var(--muted-lt);line-height:1.6;margin-top:18px;}

/* ---------- auth modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(10,22,40,.55);display:flex;
  align-items:center;justify-content:center;z-index:300;padding:20px;}
.modal-card{max-width:400px;width:100%;}
.modal-card .panel-body{display:flex;flex-direction:column;gap:10px;}
.modal-card .oauth{width:100%;}
.modal-card .or{display:flex;align-items:center;gap:12px;margin:6px 0;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-lt);}
.modal-card .or::before,.modal-card .or::after{content:"";flex:1;height:1px;background:var(--line);}
.auth-actions{display:flex;gap:8px;margin-top:8px;}
.auth-actions .btn{flex:1;}
.auth-cancel{width:100%;margin-top:4px;}
.auth-msg{font-size:12.5px;line-height:1.5;min-height:1em;}
.auth-msg.err{color:var(--neg);}
.auth-msg.ok{color:var(--muted);}

/* Commute-day allocation check under the transport step. Neutral while the
   split agrees with Step 1, warning-coloured only when more travel days are
   costed than are actually commuted. */
.day-check.warn{color:var(--neg);}