/* The one top strip (src/newspaper/strip.mjs) for the plain pages that do not load newspaper.css (archive, calendar,
   Magic Calendar, subscribe). The same rules as newspaper.css, every selector under .b-strip and the design tokens
   set on .b-strip itself, so nothing here reaches the page around it. assets/colors.js sets --tc-<name> for the
   reader's Colors choice. Keep in step with the strip rules in src/newspaper/newspaper.css. */
.b-strip{
  --paper:var(--tc-paper,#F6EFE6);--card:var(--tc-card,#FFFCF8);--line:var(--tc-line,#E4D8C8);
  --ink:var(--tc-ink,#2F2620);--muted:var(--tc-muted,#6F625A);--faint:var(--tc-faint,#A39588);
  --lead:var(--tc-lead,#B5533A);--lead-ink:var(--tc-lead-ink,#9A4330);
  --up:#4C6A48;--down:#A8452F;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --r-sm:10px;
  --shadow-lg:0 2px 4px rgba(47,38,32,.05),0 24px 48px -24px rgba(47,38,32,.30);
  position:relative;z-index:30;background:var(--paper);
  border-bottom:1px solid var(--line);font:600 13px/1 var(--display);color:var(--muted);
  -webkit-font-smoothing:antialiased;text-align:left;letter-spacing:normal;text-transform:none
}
.b-strip *,.b-strip *::before,.b-strip *::after{box-sizing:border-box}
.b-strip a{color:inherit}
.b-strip .b-in{max-width:1232px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:24px;height:44px;white-space:nowrap}
.b-strip .wx-mini{display:inline-flex;align-items:center;gap:6px;font:600 14px var(--display);text-decoration:none;color:var(--ink)}
.b-strip .wx-mini[hidden]{display:none}
.b-strip .wx-mini .wx-ic{width:22px;height:22px}
.b-strip .b-pages{display:flex;gap:18px}
.b-strip .b-pages a{text-decoration:none;color:var(--muted);font:inherit}
.b-strip .b-pages a:hover{color:var(--lead-ink);background:none}
.b-strip .b-pages a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--lead);text-decoration-thickness:2px;text-underline-offset:6px}
.b-strip .b-ticker{margin-left:auto;flex:1 1 0;min-width:0;justify-content:flex-end;display:flex;gap:20px;overflow:hidden;white-space:nowrap;flex-wrap:wrap;height:1em;line-height:1;align-content:flex-start;row-gap:1em}
.b-strip .tick{color:var(--ink);font-variant-numeric:tabular-nums}
.b-strip .tick b{font-weight:600;color:var(--muted);margin-right:4px}
.b-strip .mk-d{font-size:13px}
.b-strip .mk-d.up{color:var(--up)}.b-strip .mk-d.down{color:var(--down)}

/* Colors menu */
.b-strip .tc-wrap{position:relative;display:inline-flex}
.b-strip .tc-btn{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--display);color:var(--muted);background:none;border:0;padding:0;margin:0;cursor:pointer;box-shadow:none}
.b-strip .tc-btn:hover{color:var(--lead-ink)}
.b-strip .tc-btn i{width:14px;height:14px;border-radius:50%;background:conic-gradient(#D6336C,#F2A51A,#6E8B6A,#2E3A87,#D6336C)}
.b-strip .tc-pop{position:absolute;top:32px;left:0;z-index:60;width:320px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:14px;text-align:left;white-space:normal;line-height:1.3}
.b-strip .tc-pop[hidden]{display:none}
.b-strip .tc-h{margin:0 0 8px;font:800 11px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.b-strip .tc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.b-strip .tc-t{border:2px solid transparent;border-radius:8px;padding:3px;background:none;cursor:pointer;text-align:center;margin:0;box-shadow:none}
.b-strip .tc-t.on{border-color:var(--lead)}
.b-strip .tc-t span{display:flex;align-items:center;justify-content:center;gap:4px;height:38px;border-radius:6px;border:1px solid var(--line)}
.b-strip .tc-t i{width:12px;height:12px;border-radius:50%}.b-strip .tc-t b{font:800 13px var(--display)}
.b-strip .tc-t small{display:block;margin-top:3px;font:600 9.5px/1.15 var(--display);color:var(--muted);white-space:normal}
.b-strip .tc-acc{display:flex;align-items:center;gap:10px}
.b-strip .tc-acc input{width:40px;height:32px;border:1px solid var(--line);border-radius:6px;padding:0;background:none;cursor:pointer}
.b-strip .tc-acc span{font:700 13px var(--display);color:var(--ink)}
.b-strip .tc-reset{margin-left:auto;font:600 12px var(--display);color:var(--ink);border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:5px 10px;cursor:pointer}

@media (max-width:760px){
  .b-strip .b-in{padding:10px 16px;gap:12px;height:auto;flex-wrap:wrap}
  .b-strip .b-ticker{margin-left:0;flex:0 0 100%;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;height:auto;flex-wrap:nowrap}
  .b-strip .b-pages{flex:0 0 100%;order:1;overflow-x:auto;scrollbar-width:none;gap:16px;padding:2px 0 4px}
  .b-strip .b-pages::-webkit-scrollbar,.b-strip .b-ticker::-webkit-scrollbar{display:none}
}
@media (max-width:640px){.b-strip .tc-pop{width:calc(100vw - 32px);left:auto;right:-8px}}

/* The account button at the far right of the strip (owner 2026-09-26: "a real button Login"). */
.b-strip .b-acct{flex:none;display:inline-flex;align-items:center;gap:6px;margin-left:14px;padding:8px 14px 8px 12px;border-radius:999px;background:var(--ink);color:var(--paper);font:700 13px/1 var(--display);text-decoration:none;white-space:nowrap}
.b-strip .b-acct:hover,.b-strip .b-acct[aria-current="page"]{background:var(--lead-ink,var(--lead));color:#fff}
.b-strip .b-acct svg{flex:none}
/* The Dig in allowance next to Account (assets/member.js fills it from /api/allowance); hidden until then. */
.b-strip .b-allow{flex:none;display:inline-flex;align-items:center;margin-left:14px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:700 13px/1 var(--display);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.b-strip .b-allow:hover{border-color:var(--lead);color:var(--lead-ink)}
.b-strip .b-allow[hidden]{display:none}
.b-strip .b-allow:not([hidden]) + .b-acct{margin-left:8px}
@media (max-width:760px){.b-strip .b-allow{order:1;margin-left:auto;padding:6px 10px}.b-strip .b-allow:not([hidden]) + .b-acct{margin-left:6px}.b-strip .b-acct{order:1;margin-left:auto;padding:7px 12px 7px 10px}.b-strip .b-ticker{order:2}.b-strip .b-pages{order:3}}
/* Nav groups (owner 2026-09-27): Make, Listen, Play in small caps ahead of their links; dropped on phones. */
.b-strip .b-grp{display:inline-flex;align-items:baseline;gap:18px}
.b-strip .b-gl{font:700 13px/1 var(--display);font-variant-caps:all-small-caps;letter-spacing:.12em;color:var(--muted);opacity:.85;white-space:nowrap}
@media (max-width:760px){.b-strip .b-gl{display:none}.b-strip .b-grp{display:contents}}