/* members.css — the members' area. Phone first, calm, one job per screen. */

body.app { font-size: var(--text-member); background: var(--paper); }
body.has-tabbar { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom)); }

/* ---------- Top bar: where am I + way back ---------- */
.app-top { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--rule); }
.app-top-in { display: flex; align-items: center; gap: var(--s-2); min-height: 4rem; padding: 0 var(--gutter); max-width: 46rem; margin: 0 auto; }
.app-top .back { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap); padding-right: var(--s-3);
  color: var(--link); font-weight: var(--strong-weight); text-decoration: none; margin-left: calc(-1 * var(--s-2)); }
.app-top .back .i { width: 1.6em; height: 1.6em; }
.app-top .who { margin-left: auto; color: var(--ink-2); font-size: var(--text-small); }

.app-main { max-width: 46rem; margin: 0 auto; padding: var(--s-5) var(--gutter) var(--s-7); }
.app-main.wide { max-width: 72rem; }
.page-title { margin-bottom: var(--s-5); }
.page-title h1 { font-size: calc(2.25rem * var(--zoom)); }
.page-title p { color: var(--ink-2); margin-top: var(--s-2); }
.block { margin-top: var(--s-7); }
.block > h2 { font-size: calc(1.6rem * var(--zoom)); margin-bottom: var(--s-4); }

/* ---------- Bottom tab bar (phone) / side rail (desktop) ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--paper); border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom); }
.tabbar ul { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 0 auto; padding: 0; max-width: 40rem; }
.tabbar a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 4.75rem; padding: var(--s-2) 0;
  color: var(--ink-2); text-decoration: none; font-size: calc(0.9375rem * var(--zoom)); font-weight: var(--strong-weight); position: relative; }
.tabbar .i { width: 1.85rem; height: 1.85rem; }
.tabbar a[aria-current="page"] { color: var(--ink); }
.tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 4px;
  border-radius: 0 0 4px 4px; background: var(--ink); }
.tabbar a[aria-current="page"] .i { stroke-width: 2.6; }

@media (min-width: 1000px) {
  body.has-tabbar { padding-bottom: 0; padding-left: 15rem; }
  .tabbar { top: 0; right: auto; width: 15rem; border-top: 0; border-right: 1px solid var(--rule); padding: var(--s-5) var(--s-3); }
  .tabbar .rail-head { display: flex; padding: 0 var(--s-3) var(--s-5); }
  .tabbar ul { grid-template-columns: 1fr; gap: var(--s-1); }
  .tabbar a { grid-auto-flow: column; justify-content: start; gap: var(--s-3); min-height: var(--tap); padding: 0 var(--s-3);
    border-radius: var(--r-md); font-size: var(--text-member); }
  .tabbar a:hover { background: var(--paper-2); }
  .tabbar a[aria-current="page"] { background: var(--paper-2); }
  .tabbar a[aria-current="page"]::before { top: 22%; bottom: 22%; left: 0; right: auto; width: 4px; height: auto; border-radius: 0 4px 4px 0; }
  .tabbar .rail-only { display: list-item; }
  .app-top.root { display: none; }
}
.tabbar .rail-only, .tabbar .rail-head { display: none; }
.tabbar .rail-head .logo-word { font-size: 1.1rem; }
@media (min-width: 1000px) { .tabbar .rail-only { display: block; } .tabbar .rail-head { display: flex; } .tabbar .tab-more { display: none; } }

/* ---------- Big list rows: the main navigation pattern ---------- */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rows > li { border-bottom: 1px solid var(--rule); }
.row { display: flex; align-items: center; gap: var(--s-4); min-height: 4.5rem; padding: var(--s-3) 0; color: var(--ink); text-decoration: none; width: 100%;
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.row:hover .row-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.row .row-icon { width: 3rem; height: 3rem; border-radius: var(--r-md); background: var(--paper-2); display: grid; place-items: center; flex: none; color: var(--ink); }
.row .row-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row .row-title { font-weight: var(--strong-weight); overflow-wrap: anywhere; }
.row .row-sub { color: var(--ink-2); font-size: var(--text-small); }
.row .chev { color: var(--ink-2); width: 1.5rem; height: 1.5rem; flex: none; }
.row .num { font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 1.5rem; width: 2rem; text-align: right; color: var(--ink-2); flex: none; }

/* ---------- Start ---------- */
.hello h1 { font-size: calc(2.4rem * var(--zoom)); }
.next-up { margin-top: var(--s-5); border-radius: var(--r-lg); background: var(--ev-rep-bg); padding: var(--s-5); display: grid; gap: var(--s-3); }
.next-up .label { font-weight: var(--strong-weight); color: var(--ink-2); }
.next-up.show { background: var(--ev-show-bg); }
.next-up.party { background: var(--ev-party-bg); }
.next-up.meet { background: var(--ev-meet-bg); }
.next-up .what { font-weight: var(--strong-weight); font-size: var(--text-lead); margin-bottom: calc(var(--s-2) * -1); }
.next-up .when { font-family: var(--font-display); font-weight: 800; font-stretch: 82%; font-size: calc(2rem * var(--zoom)); line-height: 1.05; }
.next-up .where { display: flex; gap: var(--s-2); align-items: center; }
.shortcut { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-lg);
  border: var(--border) solid var(--rule); color: var(--ink); text-decoration: none; margin-top: var(--s-4); }
.shortcut:hover { border-color: var(--ink); }
.shortcut .big-icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--megafon-soft); color: var(--megafon-ink); display: grid; place-items: center; flex: none; }
.shortcut strong { display: block; }

/* ---------- News posts ---------- */
.post { padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }
.post:first-child { padding-top: 0; }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); color: var(--ink-2); font-size: var(--text-small); margin-bottom: var(--s-2); }
.post h3 { font-size: calc(1.45rem * var(--zoom)); margin-bottom: var(--s-3); }
.post h3 a { color: var(--ink); text-decoration: none; }
.post h3 a:hover { text-decoration: underline; }
.post .photo { aspect-ratio: 16/9; border-radius: var(--r-md); margin-bottom: var(--s-4); }
.pinned { background: var(--sun-soft); border-radius: var(--r-lg); padding: var(--s-5); border: 0; margin-bottom: var(--s-5); }
.pin-label { display: inline-flex; gap: var(--s-2); align-items: center; font-weight: var(--strong-weight); margin-bottom: var(--s-2); }

/* ---------- Calendar (inspired by Las Arenas, made bigger and calmer) ---------- */
.cal-head { display: grid; grid-template-columns: var(--tap) 1fr var(--tap); align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.cal-head h2 { text-align: center; font-size: calc(1.75rem * var(--zoom)); }
.icon-btn { width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: var(--r-md);
  border: var(--border) solid var(--rule-strong); background: var(--paper); color: var(--ink); cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--paper-2); }
.seg-full { width: 100%; }
.cal-tools { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-weight: var(--strong-weight); color: var(--ink-2); font-size: var(--text-small); padding-bottom: var(--s-1); }
.cal-day { min-height: 3.4rem; border-radius: var(--r-sm); background: var(--paper-2); border: var(--border) solid transparent; padding: 4px;
  display: grid; align-content: start; justify-items: center; gap: 4px; font: inherit; color: var(--ink); cursor: pointer; position: relative; }
.cal-day .n { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.cal-day.out { background: transparent; color: var(--rule-strong); cursor: default; }
.cal-day.today { background: var(--sun-soft); border-color: var(--sun); }
.cal-day.today .n::after { content: ""; }
.cal-day[aria-pressed="true"] { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.cal-day.today[aria-pressed="true"] { background: var(--sun-soft); }
.cal-dots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.cal-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ev-rep-bar); }
.cal-dots i.show { background: var(--ev-show-bar); } .cal-dots i.party { background: var(--ev-party-bar); } .cal-dots i.meet { background: var(--ev-meet-bar); }
.cal-chips { display: none; }

.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); list-style: none; margin: var(--s-4) 0 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--rule); font-size: var(--text-small); font-weight: var(--strong-weight); }
.legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.legend i { width: 14px; height: 14px; border-radius: 4px; background: var(--ev-rep-bar); }
.legend .show { background: var(--ev-show-bar); } .legend .party { background: var(--ev-party-bar); } .legend .meet { background: var(--ev-meet-bar); }

.day-list { margin-top: var(--s-5); }
.day-list h3 { font-size: calc(1.35rem * var(--zoom)); margin-bottom: var(--s-3); }
.event { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--ev-rep-bg);
  border-left: 6px solid var(--ev-rep-bar); margin-bottom: var(--s-3); }
a.event { color: inherit; text-decoration: none; } /* cards are links in Kalender and Show → Schema */
.event.show { background: var(--ev-show-bg); border-color: var(--ev-show-bar); }
.event.party { background: var(--ev-party-bg); border-color: var(--ev-party-bar); }
.event.meet { background: var(--ev-meet-bg); border-color: var(--ev-meet-bar); }
.event .time { font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 1.35rem; line-height: 1.2; }
.event .ev-title { font-weight: var(--strong-weight); }
.event .ev-sub { color: var(--ink-2); font-size: var(--text-small); display: grid; gap: 2px; margin-top: 2px; }
.event .ev-type { font-size: var(--text-small); font-weight: var(--strong-weight); }
.empty-day { padding: var(--s-5); border-radius: var(--r-md); border: 2px dashed var(--rule); color: var(--ink-2); }

.agenda { display: none; }
.agenda .agenda-day { margin-bottom: var(--s-5); }
.agenda .agenda-day h3 { font-size: 1.2rem; margin-bottom: var(--s-2); }
[data-view="list"] .cal-month { display: none; }
[data-view="list"] .agenda { display: block; }

@media (min-width: 900px) {
  .cal-day { min-height: 7.5rem; justify-items: stretch; padding: var(--s-2); }
  .cal-day .n { justify-self: start; }
  .cal-dots { display: none; }
  .cal-chips { display: grid; gap: 4px; }
  .chip { display: block; font-size: 0.875rem; font-weight: var(--strong-weight); line-height: 1.25; padding: 4px 6px; border-radius: 6px;
    background: var(--ev-rep-bg); border-left: 4px solid var(--ev-rep-bar); color: var(--ink); text-align: left;
    overflow-wrap: anywhere; }
  .chip.show { background: var(--ev-show-bg); border-color: var(--ev-show-bar); }
  .chip.party { background: var(--ev-party-bg); border-color: var(--ev-party-bar); }
  .chip.meet { background: var(--ev-meet-bg); border-color: var(--ev-meet-bar); }
  .day-list { max-width: 32rem; }
  .chip { text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* The whole month fits one laptop screen: title and editor buttons share a row, the tools sit
     on one line, and the six week rows split whatever height is left (capped both ways). */
  .cal-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
  .cal-top .page-title, .cal-top .field { margin: 0; }
  .cal-tools { flex-wrap: nowrap; justify-content: flex-start; gap: var(--s-4); margin-bottom: var(--s-2); }
  .cal-tools .seg { flex: 0 0 auto; width: auto; min-width: 12rem; }
  .cal-tools .check { flex: 1 1 auto; min-width: 11rem; }
  .cal-head { margin-bottom: var(--s-2); }
  .cal-head h2 { font-size: calc(1.4rem * var(--zoom)); }
  #cal[data-view="month"] { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-5); align-items: center; }
  #cal[data-view="month"] .cal-month { display: contents; }
  #cal[data-view="month"] .cal-tools { grid-column: 1; margin: 0; }
  #cal[data-view="month"] .cal-head { grid-column: 2; margin: 0; grid-template-columns: var(--tap) auto var(--tap); justify-content: end; }
  #cal[data-view="month"] .cal-head h2 { white-space: nowrap; }
  #cal[data-view="month"] > *:not(.cal-tools), #cal[data-view="month"] .cal-month > *:not(.cal-head) { grid-column: 1 / -1; }
  #cal[data-view="month"] .cal-grid { margin-top: var(--s-3); }
  /* Fixed week rows (the weekday row stays auto), so a day with events can't push the month
     past the bottom of the screen; chips clamp to two lines inside it. */
  .cal-grid { grid-template-rows: auto; grid-auto-rows: clamp(3.5rem, calc((100dvh - 14.5rem) / 6), 7.5rem); }
  .cal-day { min-height: 0; overflow: hidden; }
}

/* ---------- Library ---------- */
.production { border-radius: var(--r-lg); background: var(--stage); color: var(--on-stage); padding-right: 6rem; padding: var(--s-5); margin-bottom: var(--s-5);
  display: grid; gap: var(--s-2); position: relative; overflow: hidden; }
.production h1 { color: var(--on-stage); font-size: calc(2.6rem * var(--zoom)); }
.production .muted { color: color-mix(in srgb, var(--on-stage) 78%, transparent); }
.production::after { content: ""; position: absolute; right: -2.5rem; bottom: -3.75rem; width: 6.5rem; height: 6.5rem; border-radius: 50%;
  background: var(--megafon); opacity: .9; box-shadow: -3.25rem -1.25rem 0 -1rem var(--mikrofon); mix-blend-mode: screen; }
.production > * { position: relative; z-index: 1; }
.production { padding-right: 5.5rem; }
.terms { font-size: var(--text-small); }
.part-tag { display: inline-flex; align-items: center; gap: .35em; padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--megafon-soft); color: var(--megafon-ink); font-weight: var(--strong-weight); font-size: var(--text-small); white-space: nowrap; }
.part-tag.changed { background: var(--sun-soft); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ev-party-bar); }
.part-tag-note { font-weight: 400; font-size: .85em; }
.part-tag-note::before { content: "· "; }

/* ---------- Show (a production's own page, SPEC 4.4 rev; design-3/m-show.html) ----------
   Per-production mood colours ([data-accent="…"]) come from theme.css; everything here only
   ever reads --accent-tint/--chip-bg/--chip-fg through that attribute, never a literal. */
.show-hero { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); min-height: 20rem;
  background-size: cover; background-position: center; display: flex; align-items: flex-end; color: var(--on-stage); margin-bottom: var(--s-5); }
.show-hero::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, var(--hero-scrim-top) 0%, var(--hero-scrim-mid) 55%, var(--hero-scrim-bottom) 100%); }
.show-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--accent-tint); mix-blend-mode: color; opacity: .5; }
.show-hero.no-cover { background-image: none; background: var(--accent-tint); min-height: 0; }
.show-hero.no-cover::before, .show-hero.no-cover::after { content: none; }
.show-hero-in { position: relative; z-index: 1; padding: var(--s-6) var(--s-5) var(--s-5); display: grid; gap: var(--s-3); max-width: 34rem; }
.show-hero h1 { color: var(--on-stage); font-size: calc(2.75rem * var(--zoom)); }
.show-tagline { color: var(--on-stage-soft); margin: 0; max-width: 32em; }
.show-hero-meta { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center; margin-top: var(--s-1); }
.show-countdown { display: inline-flex; align-items: center; gap: var(--s-2); width: fit-content; padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill); background: var(--chip-bg); color: var(--chip-fg); font-weight: var(--strong-weight); }
.show-countdown .i { width: 1.2em; height: 1.2em; }
.show-venue { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--on-stage-soft); font-weight: var(--strong-weight); font-size: var(--text-small); }
.show-venue .i { width: 1.2em; height: 1.2em; }

/* Leader/editor actions: one quiet row under the hero, not buttons inside the tabs' content. */
.show-tools { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: calc(var(--s-3) * -1) 0 var(--s-3); }
.show-tools .btn.quiet { min-height: 2.75rem; font-size: var(--text-small); }
.desk-table.clickable-rows tbody tr { cursor: pointer; }
.show-subnav { position: sticky; top: 4rem; z-index: 30; background: var(--paper); display: flex; gap: var(--s-2);
  overflow-x: auto; padding: var(--s-3) 0; margin: 0 0 var(--s-5); border-bottom: 1px solid var(--rule); scrollbar-width: none; }
.show-subnav::-webkit-scrollbar { display: none; }
.show-subnav button { flex: none; min-height: var(--tap); padding: 0 var(--s-5); border-radius: var(--r-pill);
  border: var(--border) solid var(--rule-strong); background: var(--paper); color: var(--ink); font: inherit;
  font-weight: var(--strong-weight); cursor: pointer; }
.show-subnav button[aria-current="page"] { background: var(--action); color: var(--on-action); border-color: var(--action); }
@media (min-width: 1000px) { .show-subnav { top: 0; } .show-hero:not(.no-cover) { min-height: 24rem; } }

.next-note { font-size: var(--text-small); color: var(--ink-2); }

.your-show-card { background: var(--paper-2); border-radius: var(--r-lg); padding: var(--s-5); display: grid; gap: var(--s-2);
  border-left: 6px solid var(--chip-fg, var(--rule-strong)); }
.your-show-stat { font-family: var(--font-display); font-weight: 750; font-stretch: 85%; font-size: calc(1.3rem * var(--zoom)); margin: 0; }

.sched-day { font-size: calc(1.2rem * var(--zoom)); margin: var(--s-5) 0 var(--s-2); }
.sched-day:first-of-type { margin-top: 0; }

.show-cards { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: var(--s-4); }
.show-card { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 12rem; border-radius: var(--r-lg);
  overflow: hidden; background-size: cover; background-position: center; color: var(--on-stage); text-decoration: none; width: 100%; }
.show-card::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, var(--card-scrim-top) 0%, var(--card-scrim-bottom) 100%); }
.show-card::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--accent-tint); mix-blend-mode: color; opacity: .45; }
.show-card.no-cover { background-image: none; background: var(--accent-tint); }
.show-card.no-cover::before, .show-card.no-cover::after { content: none; }
.show-card-badge { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 1; padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--chip-bg); color: var(--chip-fg); font-weight: var(--strong-weight); font-size: var(--text-small); }
.show-card-in { position: relative; z-index: 1; padding: var(--s-4) var(--s-5); display: grid; gap: 2px; }
.show-card-in strong { font-family: var(--font-display); font-weight: 750; font-stretch: 85%; font-size: calc(1.5rem * var(--zoom)); }
.show-card-in span { color: var(--on-stage-soft); font-size: var(--text-small); }
@media (min-width: 700px) { .show-cards { grid-template-columns: 1fr 1fr; } }

.accent-picker { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.accent-swatch { display: inline-flex; flex-direction: column; align-items: center; gap: var(--s-2);
  font-size: var(--text-small); font-weight: var(--strong-weight); cursor: pointer; }
.accent-swatch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.accent-swatch i { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: block; border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--rule-strong); box-sizing: border-box; background: var(--accent-tint); }
.accent-swatch input:checked + i { box-shadow: 0 0 0 3px var(--ink); }
.accent-swatch input:focus-visible + i { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Song page ---------- */
.song-head { margin-bottom: var(--s-5); }
.song-head .muted { margin-bottom: var(--s-2); display: block; }
.song-head h1 { font-size: calc(2.4rem * var(--zoom)); }
.yours { border-radius: var(--r-lg); background: var(--megafon-soft); padding: var(--s-5); border: var(--border) solid var(--megafon); }
.yours-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-4); }
.yours-head h2 { font-size: calc(1.7rem * var(--zoom)); }
.yours-head .part { font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: calc(1.7rem * var(--zoom)); color: var(--megafon-ink); }

.player { background: var(--paper); border-radius: var(--r-md); padding: var(--s-4); display: grid; gap: var(--s-3); }
.player-main { display: flex; align-items: center; gap: var(--s-4); }
.play { width: 4.25rem; height: 4.25rem; border-radius: 50%; border: 0; background: var(--action); color: var(--on-action); display: grid; place-items: center; cursor: pointer; flex: none; }
.play .i { width: 2rem; height: 2rem; }
.play .pause, .player.playing .play .start { display: none; }
.player.playing .play .pause { display: block; }
.player-title { font-weight: var(--strong-weight); }
.player-status { color: var(--ink-2); font-size: var(--text-small); }
.progress { height: 2.75rem; display: flex; align-items: center; }
.progress input { width: 100%; accent-color: var(--action); height: 2.75rem; margin: 0; }
.player-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.player-tools .btn { min-height: 2.9rem; padding: 0 var(--s-4); font-size: var(--text-small); }
.player-tools .btn[aria-pressed="true"] { background: var(--action); color: var(--on-action); border-color: var(--action); }

.files { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.file { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); min-height: 4rem; border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.file:hover { border-color: var(--ink); }
.file .ftype { width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: var(--paper-2); }
.file .ftext { flex: 1; min-width: 0; }
.file .ftext strong { display: block; }
.file .ftext span { color: var(--ink-2); font-size: var(--text-small); }
.file .go { font-weight: var(--strong-weight); color: var(--link); display: inline-flex; align-items: center; gap: var(--s-1); flex: none; }
.yours .file { border-color: transparent; }

.mini-play { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; }
.mini-play .play { width: 3.25rem; height: 3.25rem; }
.mini-play .play .i { width: 1.5rem; height: 1.5rem; }

/* ---------- Stämindelning ---------- */
.assign-list .row { min-height: 4rem; }
.assign-btn { min-height: var(--tap); min-width: 6.5rem; padding: 0 var(--s-4); border-radius: var(--r-md); border: var(--border) solid var(--rule-strong);
  background: var(--paper); color: var(--ink); font: inherit; font-weight: var(--strong-weight); cursor: pointer; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.assign-btn.changed { border-color: var(--ev-party-bar); background: var(--sun-soft); }
.part-choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.part-choices button { min-height: 4rem; border-radius: var(--r-md); border: var(--border) solid var(--rule-strong); background: var(--paper); color: var(--ink);
  font-family: var(--font-display); font-weight: 750; font-size: 1.35rem; cursor: pointer; }
.part-choices button[aria-pressed="true"] { background: var(--action); color: var(--on-action); border-color: var(--action); }
.grid-wrap { overflow: auto; border: 1px solid var(--rule); border-radius: var(--r-md); max-height: 70vh; }
table.grid { border-collapse: separate; border-spacing: 0; font-size: var(--text-small); min-width: 100%; }
table.grid th, table.grid td { padding: var(--s-2); border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); background: var(--paper); text-align: left; white-space: nowrap; }
table.grid thead th { position: sticky; top: 0; z-index: 2; background: var(--paper-2); vertical-align: bottom; font-weight: var(--strong-weight); }
table.grid th[scope="row"] { position: sticky; left: 0; z-index: 1; font-weight: var(--strong-weight); }
table.grid thead th:first-child { left: 0; z-index: 3; }
table.grid select { font: inherit; font-weight: var(--strong-weight); min-height: 2.6rem; padding: 0 var(--s-2); border-radius: 6px; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); }
table.grid td.changed select { background: var(--sun-soft); border-color: var(--ev-party-bar); border-width: 2px; }
table.grid td.default select { background: var(--paper-2); }
.only-desk { display: none; }
@media (min-width: 900px) { .only-desk { display: block; } .only-phone { display: none; } }

/* ---------- Album (members) ---------- */
.album-tools { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
.m-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(31%, 10rem), 1fr)); gap: 4px; }
.m-photo { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: var(--paper-3); cursor: pointer; overflow: hidden; border-radius: 4px; }
.m-photo img { width: 100%; height: 100%; object-fit: cover; }
.m-photo .tick { position: absolute; top: 6px; right: 6px; width: 2rem; height: 2rem; border-radius: 50%; border: 3px solid var(--lightbox-ink); background: var(--lightbox-scrim-weak); display: none; place-items: center; color: var(--lightbox-ink); }
.selecting .m-photo .tick { display: grid; }
.m-photo[aria-pressed="true"] .tick { background: var(--action); border-color: var(--lightbox-ink); }
.m-photo[aria-pressed="true"] img { opacity: .75; }
.m-photo .vid { position: absolute; left: 6px; bottom: 6px; background: var(--lightbox-scrim-strong); color: var(--lightbox-ink); padding: 2px 8px; border-radius: 6px; font-size: .85rem; font-weight: 700; display: flex; gap: 4px; align-items: center; }
.select-bar { position: sticky; bottom: calc(5.75rem + env(safe-area-inset-bottom)); margin-top: var(--s-4); background: var(--ink); color: var(--paper); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4);
  display: none; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.selecting .select-bar { display: flex; }
.select-bar .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (min-width: 1000px) { .select-bar { bottom: var(--s-4); } }
.m-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s-5); }
.upload-drop { border: 3px dashed var(--rule-strong); border-radius: var(--r-lg); padding: var(--s-6) var(--s-4); text-align: center; display: grid; gap: var(--s-3); justify-items: center; }
.progress-bar { height: 12px; border-radius: 6px; background: var(--paper-3); overflow: hidden; }
.progress-bar span { display: block; height: 100%; width: 0; background: var(--ok); border-radius: 6px; transition: width .3s; }

/* ---------- Konto ---------- */
.facts { display: grid; gap: var(--s-4); margin: 0; }
.facts div { display: grid; gap: 2px; padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--ink-2); font-size: var(--text-small); }
.facts dd { margin: 0; font-weight: var(--strong-weight); overflow-wrap: anywhere; }

/* ---------- Admin ---------- */
.search { position: relative; margin-bottom: var(--s-4); }
.search .i { position: absolute; left: var(--s-4); top: 50%; transform: translateY(-50%); color: var(--ink-2); }
.search .input { padding-left: 3.25rem; }
.filters { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); margin-bottom: var(--s-3); }
.filters button { flex: none; min-height: 2.9rem; padding: 0 var(--s-4); border-radius: var(--r-pill); border: var(--border) solid var(--rule-strong); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--text-small); font-weight: var(--strong-weight); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--action); color: var(--on-action); border-color: var(--action); }
.avatar { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: none; font-family: var(--font-display);
  background: var(--megafon-soft); color: var(--megafon-ink); }
.avatar.mik { background: var(--mikrofon-soft); color: var(--mikrofon-ink); }
.badge { display: inline-block; font-size: .85rem; font-weight: var(--strong-weight); padding: 1px 8px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--rule); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--s-5); }
legend { font-weight: var(--strong-weight); margin-bottom: var(--s-2); padding: 0; }
.wizard { list-style: none; display: flex; gap: var(--s-2); margin: 0 0 var(--s-5); padding: 0; counter-reset: w; }
.wizard li { counter-increment: w; flex: 1; display: grid; gap: var(--s-1); font-size: var(--text-small); font-weight: var(--strong-weight); color: var(--ink-2); }
.wizard li::before { content: ""; height: 6px; border-radius: 3px; background: var(--paper-3); }
.wizard li.done::before, .wizard li[aria-current="step"]::before { background: var(--ink); }
.wizard li[aria-current="step"] { color: var(--ink); }
.map-table { width: 100%; border-collapse: collapse; }
.map-table td, .map-table th { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.map-table td:first-child { padding-right: var(--s-3); }
.preview-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.preview-table th, .preview-table td { padding: var(--s-2); border-bottom: 1px solid var(--rule); text-align: left; }
.preview-table tr.bad td { background: var(--danger-soft); }

/* ---------- Tab bar: Prat badge ---------- */
.tabbar .tab-ic { position: relative; display: inline-flex; }
.tabbar .tab-badge { position: absolute; top: -4px; right: -8px; min-width: 1.15rem; height: 1.15rem; padding: 0 3px;
  border-radius: var(--r-pill); background: var(--sun); color: var(--ink); font-family: var(--font-text);
  font-size: 0.72rem; font-weight: var(--strong-weight); display: grid; place-items: center; line-height: 1;
  box-shadow: 0 0 0 2px var(--paper); }

/* ---------- Prat: leader notes, questions, rooms, threads ---------- */
.badge.leader { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.part-tag.band { background: var(--mikrofon-soft); color: var(--mikrofon-ink); }
.part-tag.alla { background: var(--paper-3); color: var(--ink-2); }

.leader-note { background: var(--sun-soft); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-3); display: grid; gap: var(--s-2); }
.leader-note .ln-head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.leader-note .ln-name { font-weight: var(--strong-weight); }
.leader-note .ln-scope { margin-left: auto; }
.leader-note p { margin: 0; }
.yours-flag { display: flex; gap: var(--s-2); align-items: center; background: var(--sun-soft); border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3); margin-top: var(--s-4); font-weight: var(--strong-weight); }
.yours-flag a { color: var(--ink); }

/* An empty list straight under a heading: the heading's margin is gap enough. */
.q-head + .empty { padding: 0; }
/* Event detail (#/kalender/{eid}): edit + delete on one row, under the card. */
.event-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-5); }
.q-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.q-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.q-list > li { border-bottom: 1px solid var(--rule); }
.q-row { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4) 0; min-height: var(--tap);
  color: var(--ink); text-decoration: none; width: 100%; background: none; border: 0; font: inherit; text-align: left; }
.q-row:hover .q-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.q-row .q-body { flex: 1; min-width: 0; display: grid; gap: var(--s-1); }
.q-row .q-title { font-weight: var(--strong-weight); overflow-wrap: anywhere; }
.q-row .q-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; color: var(--ink-2); font-size: var(--text-small); }
.q-row .q-solved { color: var(--ok); font-weight: var(--strong-weight); display: inline-flex; gap: .3em; align-items: center; }
.q-row .q-answer { color: var(--ink-2); }
.q-row .chev { color: var(--ink-2); width: 1.5rem; height: 1.5rem; flex: none; margin-top: .2em; }
.q-list[data-filter-view="mine"] > [data-scope="other"] { display: none; }
.q-empty { padding: var(--s-4); border-radius: var(--r-md); border: 2px dashed var(--rule); color: var(--ink-2); text-align: center; }

/* ---------- Prat: rooms + context threads ---------- */
.ctx-tag { display: inline-flex; align-items: center; gap: .3em; padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--ink-2); font-weight: var(--strong-weight); font-size: var(--text-small); white-space: nowrap; }
.room-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.room-list > li { border-bottom: 1px solid var(--rule); }
.room-row { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4) 0; color: var(--ink); text-decoration: none; }
.room-row:hover .room-title { text-decoration: underline; }
.room-row .room-ic { width: 3rem; height: 3rem; border-radius: var(--r-md); background: var(--paper-2); display: grid; place-items: center; flex: none; color: var(--ink); }
.room-row .room-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.room-row .room-title { font-weight: var(--strong-weight); }
.room-row .room-visible { color: var(--ink-2); font-size: var(--text-small); }
.room-row .room-preview { color: var(--ink-2); font-size: var(--text-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-row .room-meta { display: grid; gap: 4px; align-items: end; justify-items: end; flex: none; margin-left: auto; }
.room-row .room-time { color: var(--ink-2); font-size: var(--text-small); }
.room-row .room-unread { min-width: 1.4rem; height: 1.4rem; padding: 0 5px; border-radius: var(--r-pill); background: var(--action);
  color: var(--on-action); font-size: .8rem; font-weight: var(--strong-weight); display: grid; place-items: center; }

/* ---------- Prat: thread view ---------- */
.thread-q { padding: var(--s-4) 0 var(--s-5); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-4); }
.thread-q .q-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-3); }
.thread-q h1 { font-size: calc(1.9rem * var(--zoom)); margin-bottom: var(--s-3); }
.reply-list { list-style: none; margin: 0; padding: 0; }
.reply { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.reply .r-who { font-weight: var(--strong-weight); display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.reply .r-time { color: var(--ink-2); font-size: var(--text-small); font-weight: var(--text-weight); }
.reply p { margin: 0; }
.composer { position: sticky; bottom: calc(5.75rem + env(safe-area-inset-bottom)); z-index: 30; background: var(--paper);
  border-top: 1px solid var(--rule); margin: var(--s-5) calc(-1 * var(--gutter)) calc(-1 * var(--s-7));
  padding: var(--s-3) var(--gutter); display: flex; gap: var(--s-3); align-items: flex-end; }
.composer textarea.input { flex: 1; min-height: var(--tap); max-height: 6rem; }
.composer .btn { flex: none; }
@media (min-width: 1000px) { .composer { bottom: 0; } }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--s-6) var(--gutter); background: var(--paper-2); }
.login-card { width: min(100%, 28rem); background: var(--paper); border-radius: var(--r-lg); padding: var(--s-6) var(--s-5); box-shadow: var(--shadow-lift); }
.login-card .logo { margin-bottom: var(--s-6); }
.login-card h1 { font-size: calc(2.2rem * var(--zoom)); margin-bottom: var(--s-3); }
.mail-art { width: 6rem; height: 6rem; border-radius: 50%; background: var(--mikrofon-soft); color: var(--mikrofon-ink); display: grid; place-items: center; margin-bottom: var(--s-4); }
.mail-art .i { width: 3rem; height: 3rem; }
[hidden] { display: none !important; }

/* ==========================================================================
   Compatibility layer (stream 2c)
   The admin/account screens (admin-members.js, admin-groups.js, admin-sections.js,
   admin-settings.js, admin-import.js, admin-member-edit.js, and the local
   quick-login list on /logga-in) were built in step 2 with a generic, framework-ish
   class vocabulary (".list-row", ".card", ".confirm-row", …) rather than design-3's
   own markup ("rows"/"row", m-admin*.html). Rewriting every admin screen's DOM to
   design-3's literal markup is round-2/3 scope; for round "2c" these rules restyle
   the EXISTING classes with design-3's tokens (spacing, radius, ink, rule, action)
   so every admin screen already reads as part of the same system. No raw colours —
   tokens only, same rule the theme test enforces for every other file. See the
   stream 2c report for the full list of screens this covers.
   ========================================================================== */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- lists of rows (admin tables, sessions, quick-login) ---- */
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.list > li { border-bottom: 1px solid var(--rule); }
.list-row, a.list-row {
  display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap);
  padding: var(--s-3) 0; color: var(--ink); text-decoration: none; width: 100%;
  background: none; border: 0; font: inherit; text-align: left;
}
a.list-row:hover .list-row-title, .list-row:hover .list-row-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.list-row-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.list-row-title, .detail-row-title { display: flex; align-items: center; gap: var(--s-2); font-weight: var(--strong-weight); color: var(--ink); overflow-wrap: anywhere; }
.list-row-detail, .list-row-note, .list-row-meta { color: var(--ink-2); font-size: var(--text-small); }
.list-row-note { font-style: italic; }
.list-row-meta { display: grid; gap: 2px; }
.list-heading { padding: var(--s-4) 0 var(--s-1); color: var(--ink-2); font-weight: var(--strong-weight); font-size: var(--text-small); text-transform: uppercase; letter-spacing: .04em; }
.row-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; flex: none; }

/* ---- toolbars, filters, counts above a list ---- */
.list-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
.filter-bar .field { flex: 1 1 10rem; margin-bottom: 0; }
.list-count { color: var(--ink-2); font-size: var(--text-small); margin: 0 0 var(--s-2); }

/* ---- admin sub-navigation (views/admin-nav.js): links between the admin screens, which
   otherwise have no links to each other. Wraps on wide screens; scrolls horizontally on
   narrow ones rather than wrapping into a tall block, same spirit as .filters. */
.admin-nav { display: flex; flex-wrap: nowrap; gap: var(--s-2); overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--gutter)) var(--s-4); padding: 0 var(--gutter) var(--s-2); scrollbar-width: none; }
.admin-nav a { flex: none; white-space: nowrap; }
@media (min-width: 1000px) { .admin-nav { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; } }
.admin-nav a {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap);
  padding: 0 var(--s-4); border-radius: var(--r-pill); border: var(--border) solid var(--rule-strong);
  background: var(--paper); color: var(--ink); font-weight: var(--strong-weight); font-size: var(--text-small);
  text-decoration: none; white-space: nowrap;
}
.admin-nav a[aria-current="page"] { background: var(--action); color: var(--on-action); border-color: var(--action); }
.admin-nav a[aria-current="page"] .badge { background: var(--on-action); color: var(--action); border-color: var(--on-action); }

/* ---- #/admin/anmalningar: the reported item's thumbnail in its list row ---- */
.report-thumb {
  width: 3.75rem; height: 3.75rem; flex: none; border-radius: var(--r-md); object-fit: cover;
  background: var(--paper-2); display: grid; place-items: center; color: var(--ink-2);
}

/* ---- cards (settings groups, member actions, section cards) ---- */
.card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-4); }
.card-heading-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2); }
.card-actions { margin-bottom: var(--s-3); }
.section-list { display: grid; gap: var(--s-4); }
.action-card .field { margin-bottom: var(--s-3); }
.action-card .field:last-child { margin-bottom: 0; }

/* ---- inline confirm, rename and add (no window.confirm/prompt anywhere) ---- */
.confirm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-2) 0; }
.confirm-text { color: var(--danger); font-size: var(--text-small); font-weight: var(--strong-weight); }
.confirm-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.name-btn {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: var(--strong-weight);
  color: var(--ink); text-align: left; text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: .2em; cursor: pointer; min-height: var(--tap); display: inline-flex; align-items: center;
}
.rename-row { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 auto; flex-wrap: wrap; }
.rename-row input { flex: 1 1 auto; min-width: 0; }
.inline-add { display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; }
.inline-add input { flex: 1 1 12rem; min-width: 8rem; }

/* ---- form helpers ---- */
.check-row { display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--tap); padding: var(--s-1) 0; }
.check-row input[type="checkbox"], .check-row input[type="radio"] { width: 1.6rem; height: 1.6rem; flex: none; accent-color: var(--action); margin: .25rem 0 0; }
.check-fieldset { border: 0; padding: 0; margin: 0 0 var(--s-5); }
.check-fieldset legend { font-weight: var(--strong-weight); margin-bottom: var(--s-2); padding: 0; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--s-2); }
.field-hint { color: var(--ink-2); font-size: var(--text-small); margin: var(--s-1) 0 0; }
.btn.icon-btn { width: var(--tap); padding: 0; }

/* ---- role/leader markers ---- */
.role-badge { display: inline-flex; align-items: center; font-size: var(--text-small); font-weight: var(--strong-weight); padding: 1px 8px; border-radius: var(--r-pill); }
.role-badge-editor { background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule); }
.role-badge-admin { background: var(--action); color: var(--on-action); }
.leader-mark { display: inline-flex; align-items: center; font-size: var(--text-small); font-weight: var(--strong-weight); color: var(--megafon-ink); }

/* ---- states ---- */
.loading, .empty { padding: var(--s-6) 0; color: var(--ink-2); }
.problem { padding: var(--s-5) 0; color: var(--danger); max-width: var(--measure); }
.problem .btn { margin-top: var(--s-3); }

/* ---- label/value detail rows (account page, before it had .facts) ---- */
.detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.detail-row:last-child { border-bottom: 0; }
.detail-label { color: var(--ink-2); font-weight: var(--strong-weight); }
.detail-value { color: var(--ink); text-align: right; overflow-wrap: anywhere; }

/* ---- CSV import wizard (admin-import.js) ---- */
.import-steps { display: flex; flex-wrap: wrap; gap: var(--s-2); color: var(--ink-2); font-size: var(--text-small); font-weight: var(--strong-weight); margin-bottom: var(--s-4); }
.import-step.current { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; }
.import-hint { color: var(--ink-2); font-size: var(--text-small); margin: var(--s-1) 0 0; }
.import-hint:empty { display: none; }
.import-map-row { display: grid; gap: var(--s-1); margin-bottom: var(--s-3); }
.import-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.import-preview-summary { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-bottom: var(--s-4); }
.import-preview-group { flex: 1 1 15rem; }
.import-error-row { color: var(--danger); }
.import-fix-note { color: var(--danger); font-size: var(--text-small); margin: var(--s-2) 0 0; }