/* Weather Briefing shell and page styles. Tokens, reset and typography come
   from foundation.css; shared components from components.css (both copied
   from the MRT Inventory design system, see DESIGN.md). */

body { background: var(--color-canvas); color: var(--color-text); }

/* ---- shell: topbar only, no sidebar ---- */
.topbar {
  position: fixed; inset: 0 0 auto 0; height: 58px; z-index: 20;
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: var(--color-frame-900); color: var(--color-frame-text);
  border-bottom: 6px solid var(--color-brand-600);
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; white-space: nowrap; }
.brand img { height: 38px; width: 38px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; }
.brand > span { display: flex; flex-direction: column; line-height: 1.15; }
.brand-short { display: none; }
.brand small { color: var(--color-frame-muted); font-size: .72rem; }
.topnav { margin-left: auto; display: flex; gap: 6px; }
.topnav a { color: #aab2c0; text-decoration: none; padding: 8px 12px; border-radius: var(--radius-control); font-size: .9rem; white-space: nowrap; }
.topnav a:hover { color: #fff; }
.topnav a.active { background: var(--color-frame-800); color: #fff; }

main { padding: 84px 24px 40px; max-width: 1180px; margin: 0 auto; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.page-head h1 { margin: 0; font-size: 1.5rem; }
.page-head p { margin: 4px 0 0; color: var(--color-text-2); }
.page-foot { margin-top: 24px; color: var(--color-text-2); font-size: .82rem; }
.page-foot p { margin: 4px 0; }
.muted { color: var(--color-muted); }

/* ---- location chips + lookup ---- */
.locations { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.locations a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface);
  color: var(--color-text); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.locations a:hover { border-color: var(--color-frame-800); }
.locations a.active { background: var(--color-frame-900); color: #fff; border-color: var(--color-frame-900); }

.find { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.find label { font-weight: 600; font-size: .9rem; margin: 0; }
.find input { flex: 1; min-width: 220px; max-width: 420px; }
.find .ex { flex-basis: 100%; color: var(--color-muted); font-size: .8rem; }

/* ---- status strip ---- */
.status-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 20px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel);
  padding: 12px 16px; margin: 0 0 16px; font-size: .9rem;
}
.status-strip dt { color: var(--color-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 2px; }
.status-strip dd { margin: 0; font-weight: 500; }
.pill-fresh { background: var(--color-info-bg); color: var(--color-info); }
.pill-stale { background: var(--color-warn-bg); color: var(--color-warn); }
.pill-unavail { background: var(--color-serious-bg); color: var(--color-serious); }
.pill-adhoc { background: var(--color-neutral-bg); color: var(--color-neutral); }

.notice { border-radius: var(--radius-control); padding: 10px 14px; margin: 0 0 14px; font-size: .9rem; border: 1px solid transparent; }
.notice-warn { background: var(--color-warn-bg); color: var(--color-warn); border-color: #e8c48a; }
.notice-serious { background: var(--color-serious-bg); color: var(--color-serious); border-color: #efb3b7; }
.flash { border-radius: var(--radius-control); padding: 10px 14px; margin: 0 0 14px; font-size: .9rem; }
.flash-ok { background: var(--color-ok-bg); color: var(--color-ok); }
.flash-error { background: var(--color-serious-bg); color: var(--color-serious); }

/* ---- cards and tables ---- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); padding: 16px 18px; margin-bottom: 18px; box-shadow: none; }
.card h2 { margin: 0 0 4px; font-size: 1.08rem; }
.card .sub { margin: 0 0 12px; color: var(--color-text-2); font-size: .88rem; }
.card.narrow { max-width: 460px; }
.card form label { display: block; margin: 10px 0 4px; font-weight: 600; font-size: .9rem; }
.card form .btn { margin-top: 12px; }

table.wx { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.wx th, table.wx td { padding: 7px 8px; border-bottom: 1px solid var(--color-border); text-align: right; white-space: nowrap; vertical-align: top; }
table.wx th { color: var(--color-muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
table.wx th:first-child, table.wx td:first-child, table.wx .left { text-align: left; }
table.wx .grp { text-align: center; border-bottom: 2px solid var(--color-border); color: var(--color-text-2); text-transform: none; letter-spacing: 0; font-size: .8rem; }
table.wx tr.selected td { background: var(--color-info-bg); }
table.wx tr.next-day td { color: var(--color-text-2); }
table.wx td a { color: var(--color-info); font-weight: 600; text-decoration: none; }
.hi { background: var(--color-warn-bg); color: var(--color-warn); border-radius: 4px; padding: 0 4px; font-weight: 600; }
.na { color: var(--color-neutral); background: var(--color-neutral-bg); border-radius: 4px; padding: 0 5px; font-size: .78rem; }
.hint { color: var(--color-muted); font-size: .8rem; margin: 10px 0 0; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--color-text-2); margin-top: 10px; }
.links a { color: var(--color-info); font-weight: 600; margin-right: 18px; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 18px; }
.settings-grid .span-all { grid-column: 1 / -1; }

/* ---- day cards (phone) ---- */
.day-cards { display: none; }
.day-card { display: block; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); padding: 12px 14px; margin-bottom: 10px; color: inherit; text-decoration: none; }
.day-card.selected { border-color: var(--color-info); background: var(--color-info-bg); }
.day-card .d { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; margin-bottom: 6px; }
.day-card .d small { color: var(--color-muted); font-weight: 400; }
.day-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: .86rem; }
.day-card .row span:first-child { color: var(--color-muted); }
.day-card .h { grid-column: 1 / -1; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-2); margin-top: 6px; }

@media (max-width: 860px) {
  .brand-full { display: none; }
  .brand-short { display: inline; }
  .topnav a { padding: 8px 8px; font-size: .84rem; }
  main { padding: 76px 16px 32px; }
}
@media (max-width: 560px) {
  .page-head h1 { font-size: 1.25rem; }
  .topnav a.about { display: none; }
  .status-strip { grid-template-columns: 1fr 1fr; }
  .week-table { display: none; }
  .day-cards { display: block; }
  table.wx.hourly th, table.wx.hourly td { padding: 6px 5px; font-size: .82rem; }
  .locations a { min-height: 40px; }
}

/* ---- release two: icons, arrows, daylight shading, markers ---- */
.wi { width: 22px; height: 22px; vertical-align: -5px; color: var(--color-text-2); flex: none; }
.wi-sm { width: 15px; height: 15px; vertical-align: -3px; }
.cond { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cond span { font-size: .84rem; }
table.wx .condcell { text-align: left; }
.valley-diff { margin-left: 6px; opacity: .75; }
.card-cond { font-weight: 500; }
.dir { display: inline-flex; align-items: center; gap: 2px; }
.dir .wi { color: var(--color-muted); }
.sub0 { background: var(--color-info-bg); color: var(--color-info); border-radius: 4px; padding: 0 4px; }
.fl { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.fl .wi { color: var(--color-muted); }
table.wx tr.night td { background: var(--color-surface-2); }
table.wx tr.selected td { background: var(--color-info-bg); }
table.wx th, table.wx td { padding: 7px 6px; }
@media (min-width: 1300px) { main { max-width: 1340px; } }

/* ---- 1.2.0: history trends ---- */
/* trend arrows (1.2.2): colour by direction only, never good/bad; amber up, blue down */
.trend { color: var(--color-warn); stroke-width: 2.4; }
.trend-down { transform: rotate(180deg); color: var(--color-info); }
table.wx tfoot td { border-top: 2px solid var(--color-border); border-bottom: none; color: var(--color-text-2); font-weight: 600; }
.day-card.totals { background: var(--color-surface-2); }
table.wx th small { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ---- 1.2.4: in-page jump links (Will) ---- */
.jump { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
/* filled, tinted buttons with a clear hover/focus state (1.2.6, owner request) */
.jump a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--color-info-bg); border: 1px solid var(--color-info-border); color: var(--color-info); font-weight: 600; font-size: .88rem; text-decoration: none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease; }
.jump a::before { content: "\2193"; font-size: .9em; opacity: .8; }   /* down arrow: these jump down the page */
.jump a:hover, .jump a:focus-visible { background: var(--color-info); border-color: var(--color-info); color: #fff; }
.jump a:active { background: var(--color-frame-900); border-color: var(--color-frame-900); color: #fff; }
.card[id] { scroll-margin-top: 70px; }   /* keep the heading clear of the fixed topbar */
@media (max-width: 560px) { .jump a { min-height: 40px; } }

/* ---- 1.2.5: past-days trend table on phones (Will) ---- */
.trend-table, .trend-hint { display: none; }
table.wx.across th, table.wx.across td { padding: 5px 3px; font-size: .78rem; text-align: center; white-space: nowrap; }
table.wx.across th[scope="row"] { text-align: left; font-size: .72rem; text-transform: none; letter-spacing: 0; color: var(--color-text-2); position: sticky; left: 0; background: var(--color-surface); }
table.wx.across thead th a { color: var(--color-info); text-decoration: none; font-weight: 700; line-height: 1.1; }
table.wx.across .wi { width: 18px; height: 18px; vertical-align: -4px; }
table.wx.across .trend { width: 11px; height: 11px; vertical-align: -1px; margin-left: 1px; }
table.wx.across tr.grp-row th, table.wx.across tr.grp-row td { border-top: 2px solid var(--color-border); }
@media (max-width: 560px) {
  #past .week-table { display: none; }
  .trend-table, .trend-hint { display: block; }
}
@media (max-width: 560px) {
  #past.card { padding-left: 8px; padding-right: 8px; }
  table.wx.across th, table.wx.across td { padding: 5px 2px; font-size: .74rem; }
  table.wx.across th[scope="row"] { font-size: .68rem; padding-left: 4px; }
}