/* ============================================================
 * Base / reset / shared components
 * Global resets, body defaults, and small components used by more than one section (buttons, form inputs, the segmented control, status-line, footer credits) plus the spacing utility classes.
 * ============================================================ */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg-deep);
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link);}

::selection{background:var(--gold); color:var(--night);}

#app{position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:0 24px 64px;}

input[type=text], input[type=number], input[type=date], select{
  width:100%; background:var(--input-bg); border:1px solid var(--line); color:var(--ink);
  padding:9px 10px; border-radius:8px; font-family:var(--font-body); font-size:13.5px;
  outline:none;
}
input[type=text]:focus, input[type=number]:focus, input[type=date]:focus, select:focus{
  border-color:var(--gold);
}
label.field-label{display:block; font-size:11px; color:var(--ink-faint); margin:10px 0 4px;}
label.field-label:first-child{margin-top:0;}

button{
  font-family:var(--font-body); font-weight:600; font-size:13px; cursor:pointer;
  border-radius:8px; border:1px solid var(--line); background:var(--bg-raised); color:var(--ink);
  padding:9px 12px;
}
button:hover{border-color:var(--gold);}
button.primary{background:var(--gold); color:var(--night); border-color:var(--gold);}
button.primary:hover{filter:brightness(1.08);}
button.ghost{background:transparent;}
button:disabled{opacity:0.5; cursor:default;}
button.small{padding:5px 9px; font-size:12px;}

.row{display:flex; gap:8px;}
.row > *{flex:1;}

.status-line{font-size:12px; color:var(--ink-faint); margin-top:8px; min-height:16px;}
.status-line.err{color:var(--coral);}
.status-line.ok{color:var(--link);}

.toggle-row{display:flex; align-items:center; justify-content:space-between; margin-top:2px;}
.segmented{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.segmented div{flex:1; text-align:center; padding:7px 12px; font-size:12.5px; cursor:pointer; color:var(--ink-dim); font-weight:600; white-space:nowrap;}
.segmented div.active{background:var(--gold); color:var(--night);}


/* ---------- Spacing utilities ----------
   Use these instead of inline style="margin-top:Npx" / one-off CSS margin
   values. !important is deliberate here: these are utility classes meant to
   always win regardless of source-file order, so they can't lose a
   specificity fight the way `.forecast-status{margin-bottom:0;}` briefly did
   against `.table-controls{margin-bottom:14px;}` when both had equal
   specificity and only source order decided the winner. */
.mt-0{margin-top:0 !important;}
.mt-1{margin-top:var(--space-1) !important;}
.mt-2{margin-top:var(--space-2) !important;}
.mt-3{margin-top:var(--space-3) !important;}
.mt-4{margin-top:var(--space-4) !important;}
.mt-5{margin-top:var(--space-5) !important;}
.mt-6{margin-top:var(--space-6) !important;}
.mb-0{margin-bottom:0 !important;}
.mb-1{margin-bottom:var(--space-1) !important;}
.mb-2{margin-bottom:var(--space-2) !important;}
.mb-3{margin-bottom:var(--space-3) !important;}
.mb-4{margin-bottom:var(--space-4) !important;}
.mb-5{margin-bottom:var(--space-5) !important;}
.mb-6{margin-bottom:var(--space-6) !important;}

footer.credits{margin-top:36px; font-size:11.5px; color:var(--ink-faint); line-height:1.6; text-align:center;}
footer.credits a{color:var(--ink-faint); text-decoration:underline;}

/* ---------- Privacy notice banner ---------- */
.privacy-notice{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  background:var(--bg-panel-2); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:var(--space-3) var(--space-4); margin-bottom:var(--space-4);
  font-size:12.5px; color:var(--ink-dim); line-height:1.5;
}
.privacy-notice p{margin:0;}
.privacy-notice[hidden]{display:none;}
@media (max-width:600px){
  .privacy-notice{flex-direction:column; align-items:flex-start;}
}

@media (max-width:520px){
  .brand h1{font-size:26px;}
  .clock-box .time{font-size:22px;}
  .card .card-value{font-size:22px;}
}