:root {
  --bg: #f4f6f9;
  --card: #ffffff;
  --accent: #2f80ed;
  --accent-dark: #1d63c5;
  --danger: #eb5757;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --border: #e4e7ec;
  --row-alt: #f7f9fc;
  --header-back: #252d3d;

  --cat-sunny: #ffb300;
  --cat-cloudy: #607d8b;
  --cat-rain: #1e88e5;
  --cat-thunder: #7c4dff;
  --cat-snow: #039be5;
  --cat-unknown: #9e9e9e;

  /* Multiplied into every font-size/padding below so "見やすいモード"
     (mode-elderly, see body.mode-elderly) can scale the whole normal
     layout up without a separate stylesheet. */
  --font-scale: 1;
  --space-scale: 1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: "Segoe UI", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: calc(15px * var(--font-scale));
}

body.mode-elderly {
  --font-scale: 1.65;
  --space-scale: 1.3;
}

/* --- Mode switch (always visible, above both views) ----------------------- */

.mode-switch-row {
  max-width: 900px;
  margin: 16px auto 0;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* In simple mode, line the switch/clock row up with the weather box's own
   left/right edges (not the screen edges) - same width formula as
   .simple-box below, so both end up centered at the same width. */
body.mode-simple .mode-switch-row {
  max-width: none;
  width: min(calc(100% - 20px), calc((100vh - 130px) * 16 / 9));
  margin: 16px auto 0;
  padding: 0;
}

.mode-switch {
  position: relative;
  display: flex;
  background: var(--border);
  border-radius: 20px;
  padding: 3px;
}

.mode-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  /* width/transform are set from JS (positionModeThumb in app.js), which
     measures the active button's actual box - the three labels are
     different lengths, so a fixed 33%-per-segment thumb would drift out
     of alignment with the text. */
  height: calc(100% - 6px);
  background: var(--accent);
  border-radius: 17px;
  transition: transform 0.25s ease, width 0.25s ease;
}

.mode-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 17px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.mode-btn.active { color: #fff; }

.mode-clock {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .mode-switch-row { padding: 0 12px; }
  .mode-btn { font-size: 11.5px; padding: 8px 8px; }
}

.page {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 20px 48px;
}

.card {
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.page-heading {
  margin: 0 0 14px;
  font-size: calc(22px * var(--font-scale));
  font-weight: 700;
}

.region-card {
  margin-bottom: 14px;
  padding: 14px 16px;
}

.region-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.region-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 160px;
  min-width: 140px;
}

.region-label {
  font-size: calc(12px * var(--font-scale));
  color: var(--text-secondary);
  font-weight: 700;
}

.region-field select {
  width: 100%;
  padding: calc(8px * var(--space-scale)) calc(10px * var(--space-scale));
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text-primary);
  font-size: calc(14px * var(--font-scale));
  font-family: inherit;
}

.region-note {
  margin: 10px 0 0;
  font-size: calc(12px * var(--font-scale));
  color: var(--text-secondary);
}

.header-card {
  padding: 20px 20px 14px;
  position: relative;
}

.header-top {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.current-icon {
  width: calc(80px * var(--font-scale));
  height: calc(80px * var(--font-scale));
  flex: none;
}
.current-icon svg { width: 100%; height: 100%; display: block; }

.header-text { flex: 1; min-width: 0; }

.lbl-current {
  font-size: calc(26px * var(--font-scale));
  font-weight: 700;
  color: var(--text-primary);
}

.lbl-details {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: calc(14px * var(--font-scale));
}

.lbl-next-change {
  margin-top: 4px;
  color: var(--accent);
  font-weight: 700;
  font-size: calc(14px * var(--font-scale));
}

.typhoon-banner {
  margin-top: 14px;
  background: var(--danger);
  color: #fff;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: calc(13.5px * var(--font-scale));
}

.overview-card {
  margin-top: 14px;
  padding: 12px 16px;
}

.lbl-overview {
  margin: 0;
  color: var(--text-secondary);
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: calc(14px * var(--font-scale));
}

.footer-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lbl-updated {
  color: var(--text-secondary);
  font-size: calc(13px * var(--font-scale));
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: calc(13.5px * var(--font-scale));
  padding: calc(8px * var(--space-scale)) calc(16px * var(--space-scale));
  border-radius: 6px;
  cursor: pointer;
}
.btn-primary:hover { background: var(--accent-dark); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

.tabs {
  margin-top: 22px;
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
}

.tab-btn {
  background: none;
  border: none;
  padding: calc(10px * var(--space-scale)) calc(18px * var(--space-scale));
  font-size: calc(15px * var(--font-scale));
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-panel { display: none; padding-top: 14px; }
.tab-panel.active { display: block; }

.weather-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: 8px;
  overflow: hidden;
}

.weather-table thead th {
  background: var(--header-back);
  color: #fff;
  text-align: left;
  padding: 9px 12px;
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
}

.weather-table .group-row td {
  background: var(--header-back);
  color: #cfd6e4;
  font-size: calc(12.5px * var(--font-scale));
  font-weight: 700;
  padding: 6px 12px;
}

.weather-table tbody tr:not(.group-row) td {
  padding: calc(8px * var(--space-scale)) 12px;
  border-bottom: 1px solid var(--border);
  font-size: calc(13.5px * var(--font-scale));
}

.weather-table tbody tr:nth-child(even):not(.group-row) td {
  background: var(--row-alt);
}

.cell-weather { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.cell-weather svg { width: calc(22px * var(--font-scale)); height: calc(22px * var(--font-scale)); flex: none; }

.typhoon-panel { display: flex; flex-direction: column; gap: 22px; }

.typhoon-block-title {
  font-size: calc(16px * var(--font-scale));
  font-weight: 700;
  margin: 0 0 8px;
}

.typhoon-empty {
  color: var(--text-secondary);
  padding: 8px 4px;
}

.typhoon-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
}

.rain-alert {
  position: fixed;
  top: 16px;
  right: 16px;
  max-width: 360px;
  background: var(--accent);
  color: #fff;
  padding: 14px 40px 14px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  font-size: calc(13.5px * var(--font-scale));
  z-index: 1000;
}

.rain-alert-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 600px) {
  .page { padding: 12px 12px 36px; }
  .header-top { gap: 12px; }
  .current-icon { width: calc(60px * var(--font-scale)); height: calc(60px * var(--font-scale)); }
  .lbl-current { font-size: calc(21px * var(--font-scale)); }
  .footer-row { flex-direction: column; align-items: flex-start; }
  .weather-table { font-size: calc(12px * var(--font-scale)); }
}

/* --- Simple dashboard mode -------------------------------------------- */

.simple-view {
  margin: 8px auto 16px;
  padding: 0 10px;
}

.simple-box {
  /* As large as possible while still fitting the viewport at 16:9 -
     width caps out either at the available horizontal space, or (on a
     short/wide window) at whatever width keeps the 16:9 height within
     the space left under the mode-switch row, whichever is smaller. */
  width: min(100%, calc((100vh - 130px) * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Text/icon sizes below are in cqw/cqh (this box's own width/height),
     not vw/vh (viewport) - the box's actual size only tracks the viewport
     1:1 in a 16:9 window. In a squarer window (e.g. 4:3) the box is
     smaller than the viewport, and vw/vh-sized content would overflow it;
     cqw/cqh always match the box's real rendered size instead. The icons
     use min(Xcqw, Ycqh) so they scale up to fill whichever of the box's
     two dimensions is tighter, instead of just following width. */
  container-type: size;
}

.simple-header {
  background: var(--header-back);
  color: #fff;
  padding: clamp(10px, 2cqw, 20px) clamp(16px, 3cqw, 28px);
  font-size: clamp(16px, 2.6cqw, 26px);
  font-weight: 700;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.simple-header-updated {
  font-size: clamp(11px, 1.2cqw, 15px);
  font-weight: 400;
  color: #cfd6e4;
  white-space: nowrap;
}

/* Current weather fills the left half at full height; tomorrow and the
   next change split the right half, tomorrow on top. */
.simple-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: 0;
}

.simple-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1cqw, 10px);
  padding: clamp(8px, 2cqw, 20px);
  text-align: center;
  min-width: 0;
  min-height: 0;
  /* Safety net: if the stacked icon/text/number/humidity ever add up to
     more than the cell's actual height (a quarter of the box, so the
     tightest fit of the three), clip rather than visually bleed into the
     cell below/beside it. */
  overflow: hidden;
}

.simple-col-current {
  grid-column: 1;
  grid-row: 1 / 3;
  border-right: 1px solid var(--border);
}
.simple-col-tomorrow {
  grid-column: 2;
  grid-row: 1;
  border-bottom: 1px solid var(--border);
}
.simple-col-next {
  grid-column: 2;
  grid-row: 2;
}

.simple-label {
  font-size: clamp(14px, 2.2cqw, 24px);
  color: var(--text-secondary);
  font-weight: 700;
}

.simple-icon {
  width: clamp(80px, min(17cqw, 30cqh), 220px);
  height: clamp(80px, min(17cqw, 30cqh), 220px);
}
.simple-icon svg { width: 100%; height: 100%; display: block; }

.simple-temp {
  font-size: clamp(34px, 8cqw, 90px);
  font-weight: 700;
  line-height: 1.1;
}

.simple-time {
  font-size: clamp(22px, 4cqw, 50px);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

.simple-text {
  font-size: clamp(18px, 3cqw, 34px);
  font-weight: 700;
}

.simple-sub {
  font-size: clamp(15px, 2.1cqw, 25px);
  color: var(--text-secondary);
}

/* Tomorrow/next-change each get a quarter of the box (half width, half
   height) in the two-column desktop layout, so their icon/text/gap/padding
   need to be noticeably smaller than the current-weather column's there,
   or the five stacked lines (label/icon/text/number/humidity) don't fit
   the available height and spill into the cell below - the .simple-col
   overflow:hidden above only catches the overflow after the fact, this
   keeps it from happening. Below 701px everything stacks into full-width
   rows instead (see the max-width:700px block), so there's no cramped
   quarter-cell and tomorrow/next can just match current's full size. */
@media (min-width: 701px) {
  .simple-col-tomorrow,
  .simple-col-next {
    gap: clamp(2px, 0.6cqw, 6px);
    padding: clamp(4px, 1cqw, 10px);
  }
  .simple-col-tomorrow .simple-icon,
  .simple-col-next .simple-icon {
    width: clamp(48px, min(10cqw, 18cqh), 110px);
    height: clamp(48px, min(10cqw, 18cqh), 110px);
  }
  .simple-col-tomorrow .simple-temp { font-size: clamp(20px, 4cqw, 42px); }
  .simple-col-next .simple-time { font-size: clamp(16px, 2.8cqw, 32px); }
  .simple-col-tomorrow .simple-text,
  .simple-col-next .simple-text {
    font-size: clamp(13px, 1.8cqw, 20px);
  }
  .simple-col-tomorrow .simple-sub,
  .simple-col-next .simple-sub {
    font-size: clamp(11px, 1.4cqw, 16px);
  }
  .simple-col-tomorrow .simple-label,
  .simple-col-next .simple-label {
    font-size: clamp(11px, 1.4cqw, 16px);
  }
}

@media (max-width: 700px) {
  .simple-box { width: 100%; aspect-ratio: auto; }
  .simple-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .simple-col-current, .simple-col-tomorrow, .simple-col-next {
    grid-column: 1;
    grid-row: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 18px;
  }
  .simple-col-next { border-bottom: none; }
  /* Tomorrow/next each get their own full-width row here, same as
     current - so their icon should be just as prominent, not the
     quarter-cell-sized one from the desktop layout above. cqw (not vw)
     for the same reason as everywhere else in simple mode: it tracks the
     box's actual rendered width instead of the viewport's. */
  .simple-col-tomorrow .simple-icon,
  .simple-col-next .simple-icon {
    width: clamp(72px, 20cqw, 150px);
    height: clamp(72px, 20cqw, 150px);
  }
}