/* Weather IDs page (4 Oct 2026). Loaded after ids.css and extra.css.
   Plain weather names first, the hours over the sky strips, a table header that stays in view, bigger tap targets on a phone. */
.eyebrow{font-size:12px}
.lede{text-wrap:balance}
.cit-tip{color:var(--text)}
.cit-tip b{color:var(--cit)}
.cit-tip a{white-space:nowrap}
.table-wrap{margin-top:14px}

/* text lines stay short enough to read; the Copy buttons stay near their code */
.page > p,.page > ol,.page > ul,.sources ul{max-width:38em}
.page > .cit-tip{max-width:none}
.code{max-width:640px}
p+.code{margin-top:10px}

.weather thead th{font-size:12px;line-height:1.4;color:var(--muted);box-shadow:inset 0 -1px 0 var(--line)}
.weather .th-sub{display:block;font-weight:400;letter-spacing:0;text-transform:none}
.weather .hours{display:grid;grid-template-columns:repeat(8,1fr);width:260px;max-width:100%;margin-top:1px;letter-spacing:0;text-align:center;font-variant-numeric:tabular-nums}
.weather td:first-child b{font-size:17px;color:var(--accent)}
.weather .w-name{display:block;font-size:15px;line-height:1.4;color:var(--text)}
.weather .w-name b{font-weight:600}
.weather .w-name span{white-space:nowrap}
.weather td code{display:block;font-size:13px;line-height:1.5}
.weather tbody tr{scroll-margin-top:64px}
.weather tbody tr:first-child td{border-top:0}
/* the header row stays at the top of the screen while the list scrolls (older browsers keep the plain header).
   Only from 320 px: on a narrower screen the table is wider than its box, so there the box keeps the shared sideways scroll and the plain header. */
@supports (overflow:clip){
  @media (min-width:320px){
    .table-wrap{overflow:clip}
    .weather thead th{position:sticky;top:0;z-index:1}
  }
}

.note b{color:var(--text)}
ul.plain{padding-left:22px;color:var(--text)}
ul.plain li+li{margin-top:6px}
ol.plain+p,ul.plain+p{margin-top:14px}
p+ol.plain,p+ul.plain{margin-top:8px}

/* The floating Play CIT bar sits over the bottom of the screen: leave room so the footer links can scroll clear of it. */
body:has(> .citpb:not([hidden])) .foot-inner,body:has(> .citpb-mini:not([hidden])) .foot-inner{padding-bottom:76px}

@media (max-width:620px){
  .weather .hours{width:140px}
  .weather .w-name{font-size:14px}
  .weather td code{font-size:12px}
  .cit-tip a{padding:12px 0}
  .copy{min-width:72px;min-height:44px;font-size:14px}
  .sources li+li{margin-top:0}
  .sources li a{display:inline-block;padding:11px 0}
  .nav a:not([class]){padding:11px 8px;margin:-11px -8px}
  .crumbs a{display:inline-block;padding:14px 8px;margin:-14px -8px}
  .foot a{display:inline-block;padding:12px 4px;margin:-12px -4px}
}

/* 6 October 2026: real pictures. A card for each weather on the list, and the four pictures on a weather's own page. */
.filter{margin-top:14px}
.wx-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
/* five in a row on a wide screen: then each part of the map (5, 5, 3, 4, 3 and 3 weathers) is one row */
@media (min-width:900px){.wx-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
h1 + .cit-tip{margin-top:10px}
.wx-grid a{padding:8px 8px 10px}
.wx-grid img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:0 0 6px;border-radius:6px;background:#1c2023}
.wx-grid span{font-size:14px;color:var(--text)}
.group{scroll-margin-top:12px}
.group h2{margin-top:22px}
/* the buttons that choose the time of day in the pictures */
.wx-hours{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.wx-hours>span{margin-right:4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wx-hours button{min-height:38px;padding:5px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.wx-hours button:hover{border-color:var(--accent)}
.wx-hours button small{margin-left:4px;font-size:12px;color:var(--muted)}
.wx-hours button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#14171a;font-weight:700}
.wx-hours button[aria-pressed="true"] small{color:#14171a}
.weather td:first-child a{color:inherit}
/* a weather's own page */
.wx-name{margin-top:4px;font-size:clamp(17px,2.2vw,21px);line-height:1.3;color:var(--muted)}
.wx-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.wx-shot{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.wx-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#1c2023}
.wx-shot figcaption{padding:8px 12px;font-size:14px;color:var(--muted)}
.wx-shot figcaption b{margin-right:6px;font-size:15px;color:var(--text)}
.wx-seen{margin-top:12px;color:var(--text)}
/* the presets of CIT's weather panel: a name where a weather has its ID */
.wx-preset b{color:var(--cit)}
/* the IDs above 22: the first cards show, the button opens the rest (the look of the same button on the Object ID lists) */
.wx-about{margin-top:6px;font-size:14px;color:var(--muted)}
.wx-more{margin:10px 0 0}
.wx-more>summary{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:6px 16px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--accent);font-size:14px;cursor:pointer;list-style:none}
.wx-more>summary::-webkit-details-marker{display:none}
.wx-more>summary::before{content:"+";font-weight:700}
.wx-more[open]>summary::before{content:"\2212"}
.wx-more>summary:hover{border-color:var(--accent)}
.wx-more[open]>summary .m,.wx-more:not([open])>summary .l{display:none}
.wx-more.searching>summary{display:none}
.wx-more.searching{margin-top:8px}
.wx-more.searching>.wx-grid{margin-top:0}
.page > .wx-shots + .facts,.page > .wx-seen + .facts{margin-top:14px}
@media (max-width:620px){
  .wx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .wx-hours button{min-height:44px;padding:5px 12px}
  .wx-more>summary{min-height:44px}
  .wx-shots{grid-template-columns:1fr}
  .pager .pg{display:flex;align-items:center;min-height:44px}
  .more-links a,.chips a.chip{display:inline-flex;align-items:center;min-height:44px}
  .chips a.chip{padding:4px 14px;font-size:14px}
}