/* ---------- Storm Station 247: My Station ----------
 *
 * The door and the shell are the console's (console.css), so the one
 * account has one door. This adds what My Station alone draws: the saved
 * places as cards on ruled sheets, and the account's panels. The site's
 * drafting language holds: hairline rules, mono small capitals for the
 * labels, no fills where a rule will do, one accent.
 */
.my .cx-body{ padding:24px 28px 48px; }
.my-head{ margin:0 0 20px; }
.my-head h1{ font-size:26px; letter-spacing:-.01em; margin:0 0 6px; }
.my-head .lede{ color:var(--dim); margin:0; max-width:62ch; }
.my-keep{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--dim); margin:2px 0 14px; cursor:pointer; }
.my-keep input{ margin:0; accent-color:var(--ice); }
.my-alt{ margin:12px 0 0; }
.my-start{ display:flex; gap:10px; flex-wrap:wrap; }

/* THE SAVED PLACES, THE READER'S OWN STATION (owner, Oct 19): the
   station at a glance, then a card each, in the reader's order */
.my-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; }
.my-head-row .my-start{ margin:0; }
.my-stats{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border:1px solid var(--line); background:var(--card); margin:0 0 18px; }
.my-stat{ display:flex; flex-direction:column; gap:3px; padding:12px 16px 13px; color:var(--ink); text-decoration:none; min-width:0; }
.my-stat + .my-stat{ border-left:1px solid var(--line); }
.my-stat:hover{ background:var(--ice2); }
.my-stat-k{ font:600 10px/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.my-stat b{ font-size:26px; line-height:1.1; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.my-stat-s{ font-size:12px; color:var(--dim); }
.my-places{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; }
.my-card{ border:1px solid var(--line); background:var(--card); display:flex; flex-direction:column; min-width:0; }
.my-card-h{ padding:12px 10px 10px 16px; display:flex; align-items:flex-start; gap:8px; }
.my-card-t{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 auto; padding-top:4px; }
.my-kind{ font:600 10.5px/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.my-kind i{ font-style:normal; opacity:.6; }
.my-name{ font-size:18px; line-height:1.2; font-weight:650; color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
.my-name:hover{ text-decoration:underline; text-underline-offset:3px; }
.my-at{ font:500 11.5px/1.3 var(--mono); color:var(--faint); font-variant-numeric:tabular-nums; }
.my-card-o{ display:flex; flex:0 0 auto; }
.my-ib{ width:36px; height:36px; display:inline-grid; place-items:center; padding:0; border:0; border-radius:8px; background:none; color:var(--faint); cursor:pointer; }
.my-ib svg, .my-go svg, .my-sw svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.my-ib:hover:not(:disabled){ color:var(--ink); background:var(--ice2); }
.my-ib:disabled{ opacity:.3; cursor:default; }
.my-ib-x:hover:not(:disabled){ color:var(--hz-tornado); }
.my-ib:focus-visible, .my-go:focus-visible, .my-al a:focus-visible, .my-stat:focus-visible{ outline:2px solid var(--ice); outline-offset:-2px; }
/* the alerts in force there: a quiet word each, its hazard's colour held
   back to the dot, the most severe first, each a door to its report */
.my-al{ list-style:none; margin:0; padding:0 16px 10px; display:flex; flex-direction:column; gap:2px; }
.my-al a{ display:flex; align-items:baseline; gap:8px; padding:5px 0; color:var(--ink); text-decoration:none; font-size:13.5px; line-height:1.35; min-width:0; }
.my-al-t{ min-width:0; }
.my-al a:hover b{ text-decoration:underline; text-underline-offset:3px; }
.my-al i{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--hz, var(--dim)); transform:translateY(-1px); }
.my-al b{ font-weight:600; }
.my-al span{ color:var(--dim); font-size:12.5px; }
.my-al-more a{ color:var(--ice-ink); font-size:12.5px; padding-left:17px; }
/* A CITY'S WEATHER NOW, its slot one height empty or full, so it lands
   and nothing moves: the now row, two lines of figures, each one line, and
   the days ahead in tiles of one height */
.my-wx{ box-sizing:border-box; height:222px; overflow:hidden; border-top:1px solid var(--line); padding:12px 16px 10px; }
.my-now{ display:flex; align-items:center; gap:10px; height:48px; min-width:0; }
.my-now svg.my-g{ width:40px; height:40px; flex:0 0 auto; color:var(--dim); }
svg.my-g *, svg.my-dg *{ stroke-width:1.1; }
.my-t{ font-size:36px; line-height:1; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; flex:0 0 auto; }
.my-t i{ font-style:normal; font-weight:400; color:var(--dim); }
.my-say{ flex:1 1 auto; min-width:0; font-size:15px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.my-fig{ margin:4px 0 0; height:18px; font-size:12.5px; line-height:18px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.my-days{ list-style:none; margin:10px 0 0; padding:10px 0 0; border-top:1px dashed var(--line); display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:4px; text-align:center; }
.my-days li{ display:grid; grid-template-rows:12px 24px 17px 16px 13px; justify-items:center; align-items:center; gap:1px; min-width:0; font-variant-numeric:tabular-nums; }
.my-dn{ font:600 10px/12px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.my-days svg.my-dg{ width:22px; height:22px; color:var(--dim); }
.my-dhi{ font-size:13.5px; line-height:17px; font-weight:600; }
.my-dlo{ font-size:12.5px; line-height:16px; color:var(--dim); }
.my-dp{ font-size:11px; line-height:13px; color:var(--ice-ink); }
.my-card-f{ margin-top:auto; padding:8px 10px 8px 16px; display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); }
.my-go{ display:inline-flex; align-items:center; gap:2px; font-size:13px; font-weight:600; color:var(--ice-ink); text-decoration:none; min-height:36px; }
.my-go:hover{ text-decoration:underline; text-underline-offset:3px; }
/* the place's own alerts, on or off, as the Alerts view sets them */
.my-sw{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 4px; font-size:12.5px; color:var(--dim); cursor:pointer; position:relative; }
.my-sw input{ position:absolute; opacity:0; width:1px; height:1px; }
.my-sw-k{ width:30px; height:18px; border-radius:9px; border:1px solid var(--line); background:var(--snow); position:relative; transition:background .12s ease; }
.my-sw-k::after{ content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--faint); transition:transform .12s ease; }
.my-sw input:checked + .my-sw-k{ background:var(--ice); border-color:var(--ice); }
.my-sw input:checked + .my-sw-k::after{ transform:translateX(12px); background:var(--card); }
.my-sw input:focus-visible + .my-sw-k{ outline:2px solid var(--ice); outline-offset:2px; }

/* the account's panels */
/* .cx section sets every section's padding to none, so the panel names its
   own under .my */
.my .my-panel{ border:1px solid var(--line); background:var(--card); padding:18px 20px; margin:0 0 16px; max-width:760px; }
.my-panel h2{ font-size:16px; margin:0 0 10px; }
.my-panel p{ margin:0 0 10px; color:var(--dim); font-size:14px; }
.my-panel form .cx-field{ margin:0 0 14px; }
.my-facts{ border-collapse:collapse; width:100%; font-size:14px; }
.my-facts th{ text-align:left; font:600 10.5px/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); padding:9px 14px 9px 0; width:130px; vertical-align:top; border-bottom:1px solid var(--line); }
.my-facts td{ padding:8px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.my-ok{ font:600 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--cx-ok); margin-left:6px; }
.my-warn{ font:600 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--cx-warn); margin-left:6px; }
.my-row{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:14px; }
.my-row .cx-field{ margin:0; }
.my-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.my-danger{ border-color:var(--cx-bad) !important; color:var(--cx-bad) !important; }

/* ALERTS: the hazards in their groups, each a ruled sheet; the places a
   list of ticks; the log a table that scrolls on its own on a phone */
.nf-switch{ font-size:15px; color:var(--ink); }
.nf-presets{ margin:4px 0 14px; }
.nf-groups{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; margin:0 0 12px; }
/* each group a ruled sheet, its name and how many are chosen at its head */
.my .nf-g{ border:1px solid var(--line); margin:0; min-width:0; align-self:start; }
.nf-g summary{ display:flex; align-items:baseline; gap:8px; padding:10px 12px; cursor:pointer; list-style:none; }
.nf-g summary::-webkit-details-marker{ display:none; }
.nf-g summary::after{ content:""; margin-left:auto; width:7px; height:7px; border-right:1.5px solid var(--faint); border-bottom:1.5px solid var(--faint); transform:rotate(45deg) translateY(-2px); }
.nf-g[open] summary::after{ transform:rotate(-135deg) translateY(-1px); }
.nf-g summary:focus-visible{ outline:2px solid var(--ice); outline-offset:-2px; }
.nf-gn{ font:600 10.5px/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.nf-gc{ font:500 11.5px/1.2 var(--mono); color:var(--dim); font-variant-numeric:tabular-nums; }
.my .nf-g fieldset{ border:0; margin:0; padding:0 12px 8px; min-width:0; }
.nf-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; padding:0; }
.nf-e{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; line-height:1.35; padding:4px 0; color:var(--ink); cursor:pointer; }
.nf-e input{ margin:2px 0 0; accent-color:var(--ice); flex:0 0 auto; }
.nf-places{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.nf-places li{ border-bottom:1px solid var(--line); }
.nf-places .my-keep{ margin:0; padding:9px 0; color:var(--ink); flex-wrap:wrap; }
.nf-places .my-kind{ margin-left:auto; }
.nf-log{ overflow-x:auto; }
.nf-log .my-facts th{ width:auto; }
.nf-log .my-facts td{ padding-right:14px; font-size:13.5px; }
/* PUSH: the switch stands unseen in its place until this device is known
   (my.js pushWire), each device a row, this one marked, and quiet hours */
.nf-wait{ visibility:hidden; }
.nf-devs{ list-style:none; margin:4px 0 12px; padding:0; border-top:1px solid var(--line); }
.nf-devs li{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink); }
.nf-devs .nf-here{ visibility:hidden; }
.nf-devs .nf-is-here .nf-here{ visibility:visible; color:var(--ice); }
.nf-dev-at{ flex:1 1 100%; order:3; font:500 11.5px/1.3 var(--mono); color:var(--faint); }
.nf-devs .cx-btn{ margin-left:auto; }
.nf-quiet{ margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--line); }
.nf-quiet h3{ margin:0 0 8px; font:600 10.5px/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.nf-q-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; font-size:13.5px; color:var(--dim); }
.nf-q-row input{ font:500 14px/1.2 var(--mono); padding:7px 8px; background:transparent; color:var(--ink); border:1px solid var(--line); min-height:40px; }
.nf-q-tz{ font-size:13px; color:var(--dim); }

/* on a phone the console's shell stacks its bar over the page; the bar
   keeps its own height and the page takes the rest */
@media (max-width:820px){
  .my .cx-shell{ grid-template-rows:auto minmax(0,1fr); }
}
@media (max-width:700px){
  .my .cx-body{ padding:18px 16px 40px; }
  .my .my-panel{ padding:16px; }
  .nf-groups{ gap:8px; }
  /* the log's rows stack: when, the alert, its places, how */
  .nf-log thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); }
  .nf-log .my-facts tr{ display:block; border-bottom:1px solid var(--line); padding:8px 0; }
  .nf-log .my-facts td{ display:block; border:0; padding:2px 0; }
  .nf-log .my-facts td:first-child{ font:500 11.5px/1.3 var(--mono); color:var(--faint); }
  .my-places{ grid-template-columns:1fr; }
  .my-stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .my-stat:nth-child(3){ border-left:0; }
  .my-stat:nth-child(n+3){ border-top:1px solid var(--line); }
  .my-stat b{ font-size:22px; }
}