/* ============================================================
 * 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;}
html{
  /* Mobile browsers (mainly iOS Safari) auto-boost font sizes in narrow text blocks for
     legibility ("font boosting"). The boost factor is recalculated from the block-width-to-
     viewport-width ratio, which changes on rotation -- text can visibly jump in size purely from
     turning the phone sideways, with no CSS change involved at all. Disabling it keeps every
     font-size exactly what's declared, in both orientations. */
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}
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);
}
/* Consistent, visible keyboard-focus ring across every interactive element on the site --
   :focus-visible shows it for keyboard/assistive-tech navigation without also triggering on
   mouse clicks, matching how most modern browsers already treat native controls. This is on top
   of (not instead of) the border-color change above, which alone wasn't a strong enough signal. */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}
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 button{
  flex:1; text-align:center; padding:7px 12px; font-size:12.5px; cursor:pointer; color:var(--ink-dim); font-weight:600; white-space:nowrap;
  appearance:none; -webkit-appearance:none; background:none; border:none; font-family:inherit; margin:0;
}
.segmented button.active{background:var(--gold); color:var(--night);}
.segmented.compact{border-radius:6px; border-color:var(--line-soft);}
.segmented.compact button{padding:3px 10px; font-size:13px; letter-spacing:0; line-height:1.4;}


/* ---------- 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;}
}