/* The public news feed (templates/feed/). Its own sheet, so the page can stand
 * on a domain of its own; the Fetchlens teal is the one thing it shares.
 * Light on bare :root, dark under prefers-color-scheme unless the page is
 * stamped light, and again under an explicit dark stamp. */

:root {
  --wash: #f2f4f5;
  --paper: #ffffff;
  --ink: #111619;
  --muted: #5b666d;
  --faint: #8a959b;
  --line: #e1e6e9;
  --accent: #14505c;
  --accent-soft: #e2eef0;
  --accent-ink: #ffffff;
  --shadow: 0 1px 2px rgb(17 22 25 / 5%), 0 4px 16px rgb(17 22 25 / 4%);
  --radius: 14px;
  --measure: 40rem;
  --headline: "Newsreader", Georgia, "Times New Roman", serif;
  --ui: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Topic hues: muted, told apart by hue rather than by loudness. */
  --t-politics: #3d4f9e; --t-society: #5b6b8c; --t-economy: #13756b; --t-sport: #2f7d32;
  --t-crime: #8d3b2f; --t-culture: #7a4ea0; --t-health: #b0445f; --t-conflict: #7f2a2a;
  --t-disaster: #c0661c; --t-science: #1f6fa8; --t-people: #8a6a1f; --t-education: #36798a;
  --t-environment: #4f7a35; --t-religion: #6f5b46; --t-labour: #5d6b2f; --t-lifestyle: #a3507d;
  --t-weather: #4b86b4; --t-entertainment: #a63d8c; --t-media: #55606e;
  --side-cool: #2f6fb3; --side-warm: #e8710a;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wash: #0d1214; --paper: #151c1f; --ink: #e7edef; --muted: #a2afb5; --faint: #77858b;
    --line: #253135; --accent: #6cc0cf; --accent-soft: #17333a; --accent-ink: #0d1214;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%);
    --t-politics: #8fa0ea; --t-society: #a3b1cf; --t-economy: #5cc6b8; --t-sport: #7fcb82;
    --t-crime: #e0907f; --t-culture: #c4a0e6; --t-health: #ec93a8; --t-conflict: #e08a8a;
    --t-disaster: #f0a866; --t-science: #7fb8e6; --t-people: #dcc07a; --t-education: #84c3d2;
    --t-environment: #9fcd84; --t-religion: #c6b29c; --t-labour: #b6c47e; --t-lifestyle: #e69bc5;
    --t-weather: #96c2e6; --t-entertainment: #e89ad6; --t-media: #a9b4c0;
    --side-cool: #7fb2e5; --side-warm: #f5a05a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --wash: #0d1214; --paper: #151c1f; --ink: #e7edef; --muted: #a2afb5; --faint: #77858b;
  --line: #253135; --accent: #6cc0cf; --accent-soft: #17333a; --accent-ink: #0d1214;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%);
  --t-politics: #8fa0ea; --t-society: #a3b1cf; --t-economy: #5cc6b8; --t-sport: #7fcb82;
  --t-crime: #e0907f; --t-culture: #c4a0e6; --t-health: #ec93a8; --t-conflict: #e08a8a;
  --t-disaster: #f0a866; --t-science: #7fb8e6; --t-people: #dcc07a; --t-education: #84c3d2;
  --t-environment: #9fcd84; --t-religion: #c6b29c; --t-labour: #b6c47e; --t-lifestyle: #e69bc5;
  --t-weather: #96c2e6; --t-entertainment: #e89ad6; --t-media: #a9b4c0;
  --side-cool: #7fb2e5; --side-warm: #f5a05a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--wash); color: var(--ink);
  font: 400 16px/1.55 var(--ui); -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- the bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px);
}
.bar-in, .places { max-width: var(--measure); margin: 0 auto; padding-inline: 16px; }
.bar-in { display: flex; align-items: center; gap: 12px; height: 56px; }
.brand { display: flex; align-items: baseline; gap: 6px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 12px; height: 12px; border-radius: 3px; background: var(--accent); align-self: center;
              transform: rotate(45deg); }
.brand-name { font: 600 1.05rem/1 var(--ui); letter-spacing: -.01em; }
.brand-sub { font: 500 1.05rem/1 var(--headline); color: var(--accent); font-style: italic; }
.modes { display: flex; background: var(--wash); border-radius: 999px; padding: 3px; }
.mode { border: 0; background: none; padding: 5px 12px; border-radius: 999px; font-size: .88rem; color: var(--muted);
        cursor: pointer; }
.mode.is-on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); font-weight: 500; }
.tastes-open { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; width: 38px; height: 38px;
               display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.places { display: flex; gap: 6px; align-items: center; padding-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.places::-webkit-scrollbar { display: none; }
/* Place and topic: a pill as wide as what it says, the native picker unseen
 * over the whole of it, so a tap opens the list the way the phone draws one. */
.pick { position: relative; flex: none; display: flex; align-items: center; gap: 5px; border: 1px solid var(--line);
        background: var(--paper); border-radius: 999px; padding: 4px 9px 4px 10px; color: var(--muted); }
.pick.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick .picked { font-size: .88rem; color: var(--ink); white-space: nowrap; max-width: 10rem;
                overflow: hidden; text-overflow: ellipsis; }
.pick.is-on .picked { color: var(--accent); font-weight: 500; }
.pick .chev { width: .85em; height: .85em; }
/* The side kept to, in the /axis page's two colours. */
.pick .half { color: var(--faint); }
.pick[data-tone="cool"] { --tone: var(--side-cool); }
.pick[data-tone="warm"] { --tone: var(--side-warm); }
.pick[data-tone] .half { color: var(--tone, var(--faint)); }
.pick.is-on[data-tone="cool"], .pick.is-on[data-tone="warm"] { border-color: var(--tone); background: var(--paper); }
.pick.is-on[data-tone="cool"] .picked, .pick.is-on[data-tone="warm"] .picked { color: var(--ink); }
.pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
               font-size: 16px; border: 0; }


/* ---------- the stories ---------- */
.wrap { max-width: var(--measure); margin: 0 auto; padding: 16px 16px 24px; }
#stories { display: grid; gap: 14px; }
.story { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
         box-shadow: var(--shadow); }
.story--plain { border-top: 3px solid var(--topic, var(--line)); }
.story-media { display: block; aspect-ratio: 16 / 9; background: var(--wash); overflow: hidden; }
.story-media img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: 100%;
                   transition: transform .5s ease; }
.story:hover .story-media img { transform: scale(1.02); }
.story-body { padding: 14px 18px 12px; }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .78rem; color: var(--faint);
          letter-spacing: .01em; }
.topic { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--topic, var(--muted));
         text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.topic::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.where { color: var(--muted); }
.kicker time { margin-left: auto; font-variant-numeric: tabular-nums; }
.headline { font: 600 1.32rem/1.25 var(--headline); letter-spacing: -.008em; margin: 6px 0 6px; text-wrap: balance;
            font-optical-sizing: auto; }
.headline a { text-decoration: none; }
.headline a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.summary { margin: 0; color: var(--muted); font-size: .95rem; text-wrap: pretty; }
.foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: .8rem; color: var(--faint); }
.byline strong { color: var(--muted); font-weight: 600; }

/* Each topic's hue, on the card and in the tastes panel. */
[data-cat="politics"] { --topic: var(--t-politics); }
[data-cat="society"] { --topic: var(--t-society); }
[data-cat="economy_business_and_finance"] { --topic: var(--t-economy); }
[data-cat="sport"] { --topic: var(--t-sport); }
[data-cat="crime_law_and_justice"] { --topic: var(--t-crime); }
[data-cat="culture"] { --topic: var(--t-culture); }
[data-cat="entertainment"] { --topic: var(--t-entertainment); }
[data-cat="media"] { --topic: var(--t-media); }
/* Kept by a browser that hid it before it was split into the three above. */
[data-cat="arts_culture_entertainment_and_media"] { --topic: var(--t-culture); }
[data-cat="health"] { --topic: var(--t-health); }
[data-cat="conflict_war_and_peace"] { --topic: var(--t-conflict); }
[data-cat="disaster_accident_and_emergency_incident"] { --topic: var(--t-disaster); }
[data-cat="science_and_technology"] { --topic: var(--t-science); }
[data-cat="human_interest"] { --topic: var(--t-people); }
[data-cat="education"] { --topic: var(--t-education); }
[data-cat="environment"] { --topic: var(--t-environment); }
[data-cat="religion"] { --topic: var(--t-religion); }
[data-cat="labour"] { --topic: var(--t-labour); }
[data-cat="lifestyle_and_leisure"] { --topic: var(--t-lifestyle); }
[data-cat="weather"] { --topic: var(--t-weather); }

/* ---------- loading, the end, new stories ---------- */
.more { padding: 6px 0 0; }
.skeleton { display: grid; gap: 14px; }
.skeleton i { display: block; height: 132px; border-radius: var(--radius); border: 1px solid var(--line);
              background: linear-gradient(90deg, var(--paper) 30%, var(--wash) 50%, var(--paper) 70%) 0 0 / 300% 100%;
              animation: shimmer 1.4s ease-in-out infinite; }
.more.is-idle .skeleton { display: none; }
.end { text-align: center; color: var(--faint); font-size: .9rem; margin: 18px 0; }
@keyframes shimmer { to { background-position: -150% 0; } }
.fresh { position: fixed; z-index: 11; left: 50%; transform: translateX(-50%); top: calc(118px + env(safe-area-inset-top, 0px));
         display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 7px 14px;
         background: var(--accent); color: var(--accent-ink); font-size: .88rem; font-weight: 500; cursor: pointer;
         box-shadow: 0 6px 20px rgb(20 80 92 / 25%); }
.fresh[hidden] { display: none; }

/* A reader this browser knows sees the shared page's cards only if their own
 * order does not come (feed.js): never the one list, then the other. */
.own #stories:not(.is-own) { display: none; }

/* ---------- the feed as an app ---------- */
.install { position: fixed; z-index: 12; left: 50%; transform: translateX(-50%);
           bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(var(--measure), calc(100% - 32px));
           display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px;
           background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
           box-shadow: 0 10px 30px rgb(17 22 25 / 18%); }
.install[hidden] { display: none; }
.install img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.install-text { margin: 0; flex: 1; min-width: 0; font-size: .88rem; line-height: 1.4; color: var(--muted); }
.install-text strong { display: block; color: var(--ink); font-weight: 600; }
.install-text svg, .app-row svg { width: 1.05em; height: 1.05em; vertical-align: -.18em; }
.install-yes, .app-install { border: 0; border-radius: 999px; padding: 8px 15px; font-size: .88rem; font-weight: 500;
                             background: var(--accent); color: var(--accent-ink); cursor: pointer; white-space: nowrap; }
.install-later { border: 0; background: transparent; color: var(--muted); width: 32px; height: 32px; border-radius: 999px;
                 display: grid; place-items: center; cursor: pointer; flex: none; }
.install-apple, .is-apple .install-any, .is-apple .install-yes, .is-apple .app-install { display: none; }
.is-apple .install-apple { display: inline; }
.app-row[hidden] { display: none; }

/* ---------- a side of the axis ---------- */
.pick.side { cursor: pointer; font: inherit; }
.axis-ends { display: flex; justify-content: space-between; gap: 12px; font-size: .78rem; font-weight: 600; margin-top: 4px; }
.axis-ends .cool { color: var(--side-cool); }
.axis-ends .warm { color: var(--side-warm); text-align: right; }
.axis-says { font-size: .86rem; color: var(--muted); margin: 0 0 10px; min-height: 1.3em; }
.axis-choices { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; margin: 12px 0 8px; }
.axis-choices button { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px;
                       padding: 7px 10px; font-size: .84rem; cursor: pointer; line-height: 1.25; }
.axis-choices button.cool { color: var(--side-cool); }
.axis-choices button.warm { color: var(--side-warm); }
.axis-choices button.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.axis-choices button.cool.is-on { background: var(--side-cool); border-color: var(--side-cool); color: #fff; }
.axis-choices button.warm.is-on { background: var(--side-warm); border-color: var(--side-warm); color: #fff; }
.axis-rows { --names: 7.5rem; list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.axis-rows li { display: grid; grid-template-columns: var(--names) 1fr; gap: 8px; align-items: center;
                font-size: .82rem; transition: opacity .15s; }
.axis-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.axis-track { position: relative; height: 10px; }
.axis-track::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line); }
.axis-track i { position: absolute; top: 1px; bottom: 1px; border-radius: 3px; }
.axis-track i.cool { right: 50%; width: calc(var(--at) * -50%); background: var(--side-cool); }
.axis-track i.warm { left: 50%; width: calc(var(--at) * 50%); background: var(--side-warm); }
.axis-rows li[data-state="little"] { opacity: .5; }
.axis-rows li[data-state="none"] { opacity: .2; }
.axis-rows li[data-state="none"] .axis-name { text-decoration: line-through; }
@media (prefers-reduced-motion: reduce) { .axis-rows li { transition: none; } }

/* ---------- what you like ---------- */
.tastes { position: fixed; inset: 0; z-index: 20; background: rgb(8 12 14 / 45%); display: flex; justify-content: flex-end; }
.tastes[hidden] { display: none; }
.tastes-panel { width: min(24rem, 100%); height: 100%; overflow-y: auto; background: var(--paper);
                padding: calc(18px + env(safe-area-inset-top, 0px)) 18px calc(24px + env(safe-area-inset-bottom, 0px));
                box-shadow: -8px 0 30px rgb(0 0 0 / 15%); }
.tastes-head { display: flex; align-items: center; justify-content: space-between; }
.tastes-head h2 { font: 600 1.35rem/1.2 var(--headline); margin: 0; }
.tastes-close { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 6px; }
.tastes-note { color: var(--muted); font-size: .88rem; margin: 6px 0 14px; }
.tastes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tastes-list li { display: grid; grid-template-columns: 1fr 5.5rem auto; align-items: center; gap: 10px; padding: 7px 0;
                  border-bottom: 1px solid var(--line); }
.tastes-list .topic { font-size: .74rem; }
.meter { height: 6px; border-radius: 3px; background: var(--wash); overflow: hidden; position: relative; }
.meter i { position: absolute; inset: 0 auto 0 33.3%; width: 0; background: var(--topic, var(--accent)); border-radius: 3px; }
.meter.is-low i { left: auto; right: 66.7%; opacity: .45; }
.home { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 10px;
        font-size: .92rem; }
.home select { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); padding: 5px 8px; }
.forget { width: 100%; margin-top: 8px; border: 1px solid var(--line); background: none; border-radius: 10px;
          padding: 9px; color: var(--muted); cursor: pointer; font-size: .88rem; }

.foot-note { color: var(--faint); font-size: .82rem; text-align: center; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.foot-note p { margin: 4px 0; }
.foot-note a { color: var(--muted); }
/* The topics' and towns' own pages, linked from every page. */
.foot-links { margin: 0 0 10px; line-height: 1.9; text-wrap: balance; }
.foot-links a { text-decoration: none; white-space: nowrap; }
.foot-links a:hover { text-decoration: underline; }
/* A topic's or a town's page says which. */
.page-title { font: 600 1.6rem/1.15 var(--headline); letter-spacing: -.01em; margin: 2px 2px 14px; text-wrap: balance; }

@media (min-width: 720px) {
  .headline { font-size: 1.45rem; }
  .story-body { padding: 16px 22px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-media img, .skeleton i { transition: none; animation: none; }
}
@media (max-width: 400px) {
  .brand-sub { display: none; }
  .mode { padding: 5px 10px; }
  .bar-in { gap: 8px; }
}

/* The outlets the panel learned, below the topics. */
.outlets-title { font: 600 1.05rem/1.2 var(--headline); margin: 18px 0 2px; }
.outlets-list li { grid-template-columns: 1fr 5.5rem auto; }
.outlet-name { font-size: .88rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outlets-list .meter i { background: var(--accent); }

/* The ⋯ menu: what the reader does not want to see. */
.refuse { margin-left: auto; position: relative; }
.refuse-open { width: 32px; height: 32px; border-radius: 50%; border: 1px solid transparent; background: none;
               color: var(--faint); display: grid; place-items: center; cursor: pointer; }
.refuse-open:hover, .refuse-open[aria-expanded="true"] { color: var(--ink); border-color: var(--line); background: var(--wash); }
.refuse-open svg { fill: currentColor; stroke: none; }
.refuse-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5; min-width: 15rem; display: grid;
               background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 6px;
               box-shadow: 0 10px 30px rgb(0 0 0 / 14%); }
.refuse-menu[hidden] { display: none; }
.refuse-menu button { border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 8px;
                      font-size: .88rem; color: var(--ink); cursor: pointer; }
.refuse-menu button:hover, .refuse-menu button:focus-visible { background: var(--wash); }
.story.is-gone { display: none; }
.refused { background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px 16px;
           font-size: .88rem; color: var(--muted); }
.refused button { border: 0; background: none; color: var(--accent); font-weight: 600; cursor: pointer; padding: 0 0 0 4px; }

/* The panel: hidden things to give back, learned things to read. */
.hidden-list li { grid-template-columns: 1fr auto auto; }
.restore, .forget-one { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; cursor: pointer;
                        font-size: .8rem; padding: 3px 10px; color: var(--accent); }
.forget-one { padding: 1px 8px; color: var(--faint); }
.topics-list li, .outlets-list li { grid-template-columns: 1fr 5.5rem 1.8rem; }