/* =========================================================================
   shell.css - the app layout and every screen's own styles: topbar,
   collapsible sidebar, the Telefonkatalog / detail / Valgte telefoner
   columns, the login gate, and the Meld inn sak and Kampanjeoversikt
   overlays.

   Layout: 4 regions in a flex row below a 60px topbar; the sidebar
   collapses 150 <-> 64px; the three content columns scroll independently
   while the page itself never scrolls.
   ========================================================================= */

html, body{ height:100%; }
body{ overflow:hidden; }   /* the shell scrolls per-column, not the page */

/* min-width: below ~1100px the 4-column layout stops working (column 4's
   own min-width alone implies ~900px), so scroll sideways instead of
   pretending this is phone-friendly. Target devices are store laptops,
   iMacs and tablets. */
.app-shell{
  display:flex; flex-direction:column; height:100vh; background:var(--paper);
  min-width:1100px; overflow-x:auto;
}

/* --- Top bar ------------------------------------------------------------- */
.app-topbar{
  flex:none; height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; background:var(--ice-yellow); border-bottom:2px solid var(--ice-black);
}
.app-topbar__left{ display:flex; align-items:center; gap:12px; }
.app-topbar__title{ font-size:19px; font-weight:800; color:var(--ice-black); letter-spacing:-0.01em; }
.app-topbar__store{
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ice-black);
  background:rgba(0,0,0,.08); border-radius:999px; padding:4px 10px;
}
/* --- Body row: sidebar + 3 columns ---------------------------------------- */
.app-body{ flex:1; display:flex; overflow:hidden; min-height:0; }

/* --- Sidebar --------------------------------------------------------------
   Collapses width only - items stay in the same DOM order and position,
   which is what makes the 180ms width transition read as a collapse
   rather than a re-layout. */
.app-sidebar{
  flex:none; width:var(--sidebar-w); transition:width var(--sidebar-transition);
  border-right:1px solid var(--line); background:var(--panel);
  display:flex; flex-direction:column; overflow:hidden;
}
.app-sidebar.collapsed{ width:var(--sidebar-w-collapsed); }

.app-sidebar__nav{ flex:1; padding:14px 10px; display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
.app-sidebar__group-label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  color:var(--ink-soft); padding:6px 10px 2px; white-space:nowrap; overflow:hidden;
}
.app-sidebar__divider{ height:1px; background:var(--line-soft); margin:8px 6px; flex:none; }
/* Collapsed sidebar: no room for group text, but the divider line still
   separates "Etiketter" from "Sammenlign" at a glance. */
.app-sidebar.collapsed .app-sidebar__group-label{ height:0; padding:0; overflow:hidden; }
.app-nav-item{
  display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:var(--radius-lg);
  border:1px solid transparent; background:transparent; cursor:pointer; text-align:left;
  font-family:var(--font-display); font-size:13.5px; font-weight:600; color:var(--ink);
  transition:background-color .15s, border-color .15s;
}
.app-sidebar.collapsed .app-nav-item{ justify-content:center; padding:10px 4px; }
.app-nav-item:hover{ background:var(--line-soft); }
.app-nav-item.active{ background:var(--ice-yellow); border-color:var(--ice-black); }
.app-nav-item__icon{ flex:none; width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
.app-nav-item__icon svg{ width:18px; height:18px; }
.app-nav-item__label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-sidebar.collapsed .app-nav-item__label{ display:none; }

.app-sidebar__foot{ flex:none; border-top:1px solid var(--line-soft); padding:10px; }

/* --- Shared column chrome -------------------------------------------------- */
.app-col{ display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.app-col + .app-col{ border-left:1px solid var(--line); }
.app-col__head{ flex:none; padding:18px 20px 12px; }
.app-col__head h2{ margin:0 0 10px; font-size:18px; font-weight:800; }
.app-col__body{ flex:1; overflow-y:auto; padding:0 20px 20px; }

/* --- Column 2: Telefonkatalog ---------------------------------------------- */
.col-catalog{ flex:1.3; }

.catalog-head-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.catalog-head-row h2{ margin:0; }

/* Aktiv/Utgått (base scope, mutually exclusive) + EOL/Kampanje/Redusert
   pris (independent narrowing toggles) - see ui-catalog.js's
   wireCatalogFilters. Same pill-chip look throughout so the two groups
   read as one control, with the divider as the only hint they behave
   differently. */
.catalog-filters{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.catalog-filters__sep{ width:1px; height:16px; background:var(--line); margin:0 2px; flex:none; }
.catalog-filter-chip{
  font-family:var(--font-display); font-size:11.5px; font-weight:700; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; background:var(--panel);
  cursor:pointer; transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.catalog-filter-chip:hover{ border-color:var(--ice-gold); }
.catalog-filter-chip:focus-visible{ outline:2px solid var(--ice-gold); outline-offset:1px; }
.catalog-filter-chip.is-selected{
  background:var(--ice-yellow); border-color:var(--ice-black); color:var(--ice-black);
}

.catalog-search{
  display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:9px 12px; background:var(--panel);
}
.catalog-search:focus-within{ border-color:var(--ice-gold); box-shadow:0 0 0 3px rgba(255,185,0,.2); }
.catalog-search svg{ width:16px; height:16px; flex:none; color:var(--ink-soft); }
.catalog-search input{ border:0; outline:0; flex:1; font-family:var(--font-display); font-size:13.5px; background:transparent; }

.catalog-row{
  display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:var(--radius-lg);
  cursor:pointer; border:1px solid transparent; margin-bottom:4px;
}
.catalog-row:hover{ background:var(--line-soft); }
/* The app's one shared "this is the selected thing" look - the same yellow
   fill + black border as .app-nav-item.active and .storage-pill.active. */
.catalog-row.active{ background:var(--ice-yellow); border-color:var(--ice-black); }

.catalog-row__photo{
  width:34px; height:34px; flex:none; border-radius:var(--radius-lg); background:var(--line-soft);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--grey-placeholder); font-size:9px;
}
.catalog-row__body{ flex:1; min-width:0; }
.catalog-row__name{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.catalog-row__variant{ font-size:11.5px; color:var(--ink-soft); }
/* Small badges after a phone's name in the catalog list. Colour carries
   the meaning, so each one must stay distinct:
     EOL          - warning orange: still sold, but on its way out
     Utgått       - muted grey: out of sale, just history, not urgent
     Kampanje     - green: a standalone discount is running
     <kampanjenavn> - ICE yellow: part of a named, planned campaign
                      (same yellow as its bar in Kampanjeoversikt) */
.catalog-row__eol, .catalog-row__discontinued, .catalog-row__campaign{
  display:inline-block; margin-left:6px; font-size:9.5px; font-weight:800; letter-spacing:.02em;
  color:#fff; border-radius:3px; padding:1px 5px; vertical-align:middle;
}
.catalog-row__eol{ background:var(--warning); }
.catalog-row__discontinued{ background:var(--ink-soft); }
.catalog-row__campaign{ background:var(--success); }
.catalog-row__campaign--group{ color:var(--ice-black); background:var(--ice-yellow); }
.catalog-row__price{ font-size:13.5px; font-weight:700; flex:none; margin-right:2px; white-space:nowrap; }

.catalog-row__toggle{
  width:28px; height:28px; flex:none; border-radius:50%; border:1.5px solid var(--ice-black);
  background:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700;
  cursor:pointer; transition:background-color .15s, color .15s;
}
.catalog-row__toggle.added{ background:var(--ice-yellow); }
.catalog-row__toggle:hover{ background:var(--ice-yellow-soft); }

.catalog-empty{ font-size:13px; color:var(--ink-soft); padding:20px 4px; }

/* --- Column 3: detail -------------------------------------------------------- */
.col-detail{ flex:1; }
/* Ties this column back to whichever catalog row is highlighted, using the
   same black used by .catalog-row.active's border. This used to be a rail
   along the very TOP of the column, but that edge sits flush against the
   topbar's own 2px border-bottom with zero gap - the two lines visually
   fused into one ~3px band right over this one column, reading as "gets
   thicker when a phone is highlighted". Underlining the name/brand block
   instead keeps the same tie-in without touching anything else. Always
   present as transparent so turning it on/off never shifts layout. */
.col-detail .app-col__head{ border-bottom:1px solid transparent; transition:border-color .15s ease; }
.col-detail.has-active .app-col__head{ border-color:var(--ice-black); }

.detail-empty{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 24px; gap:8px; color:var(--ink-soft);
}
.detail-empty__icon{ width:44px; height:44px; color:var(--grey-icon); margin-bottom:6px; }
.detail-empty__title{ margin:0; font-size:15px; font-weight:800; color:var(--ink); }
.detail-empty__hint{ margin:0; font-size:12.5px; line-height:1.5; max-width:260px; }

.detail-photo{
  width:96px; height:96px; border-radius:var(--radius-lg); background:var(--line-soft);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--grey-placeholder); font-size:11px; margin-bottom:14px;
}
.detail-brand{ font-size:12px; color:var(--ink-soft); font-weight:600; }
.detail-name{ font-size:19px; font-weight:800; margin-top:2px; }
.detail-eol-badge, .detail-discontinued-badge{
  display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-size:11.5px; font-weight:700;
  border-radius:999px; padding:4px 10px;
}
.detail-eol-badge{ color:var(--warning-text); background:#FFF6E5; border:1px solid var(--warning); }
.detail-discontinued-badge{ margin-left:6px; color:#fff; background:var(--ink-soft); border:1px solid var(--ink-soft); }
.storage-pills{ display:flex; gap:8px; margin:16px 0; flex-wrap:wrap; }
.storage-pill{
  font-family:var(--font-display); font-size:12.5px; font-weight:700; padding:7px 14px;
  border-radius:999px; border:1.5px solid var(--ice-black); background:#fff; cursor:pointer;
  transition:background-color .15s;
}
.storage-pill.active{ background:var(--ice-yellow); }
.storage-pill:hover:not(.active){ background:var(--line-soft); }

.color-dots{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.color-dot{
  width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); cursor:default;
  position:relative;
}
.color-dot.active{ border-color:var(--ice-black); border-width:2px; }
/* Custom hover label with the colour's name - the native title tooltip is
   slow to appear, tiny and unstyled. */
.color-dot::after{
  content:attr(data-color-name);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(3px);
  background:var(--ice-black); color:#fff; font-size:11px; font-weight:600; white-space:nowrap;
  padding:4px 9px; border-radius:var(--radius-sm); pointer-events:none; z-index:5;
  opacity:0; visibility:hidden; transition:opacity .12s ease, transform .12s ease;
}
.color-dot:hover::after{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

.energy-row{ display:flex; align-items:center; gap:10px; }
.energy-row__eprel{ font-size:12px; color:var(--ink-soft); }
.energy-class-badge{
  display:inline-flex; width:28px; height:28px; border-radius:var(--radius-sm);
  align-items:center; justify-content:center; color:#fff; font-weight:800;
}
.detail-mobilbytte{ margin-top:8px; }

/* Innstillinger popover (ui-shell.js) */
.settings-field{ margin-bottom:16px; }
.settings-field__label{ display:block; font-size:12px; font-weight:600; margin-bottom:6px; }
.settings-field__input{ width:120px; padding:8px; border:1px solid var(--line); border-radius:var(--radius-sm); }
.settings-field__note{ font-size:11.5px; color:var(--ink-soft); margin:8px 0 0; }
.settings-footer{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft); }

.detail-price{ font-size:30px; font-weight:800; margin:10px 0 4px; }
.detail-price--muted{ color:var(--ink-soft); font-size:16px; font-weight:600; }

.detail-block{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft); }
.detail-block h3{ margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }

/* --- Column 4: Valgte telefoner ---------------------------------------------- */
.col-selected{ flex:0.85; min-width:250px; }
.col-selected .app-col__body{ display:flex; flex-direction:column; gap:8px; }

.selected-row{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:8px 10px; background:var(--panel);
}
.selected-row__check{ width:16px; height:16px; flex:none; color:var(--success); }
.selected-row__name{ flex:1; min-width:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.selected-row__remove{ border:0; background:none; cursor:pointer; color:var(--ink-soft); font-size:15px; line-height:1; padding:2px; }
.selected-row__remove:hover{ color:var(--danger); }

.selected-empty{ padding:12px 2px; }
.selected-empty__title{ margin:0 0 4px; font-size:13px; font-weight:700; color:var(--ink); }
.selected-empty__hint{ margin:0; font-size:12px; line-height:1.5; color:var(--ink-soft); }

.app-col__foot{ flex:none; padding:14px 20px 20px; }
.generate-btn{ width:100%; text-align:center; padding:12px 0; font-size:14px; }
.generate-hint{ text-align:center; }


/* =========================================================================
   Login gate: store number -> who are you? -> (new name -> set PIN) or
   PIN -> (pending approval). One screen at a time, switched by auth.js
   via [data-auth-screen].
   ========================================================================= */
.login-gate{
  position:fixed; inset:0; z-index:100; background:var(--paper);
  display:flex; align-items:center; justify-content:center;
}
.auth-card{
  width:340px; max-width:90vw; background:#fff; border:2px solid var(--ice-black);
  border-radius:var(--radius-lg); padding:28px 26px; text-align:center;
}
.auth-card img{ width:120px; margin-bottom:14px; }
.auth-card h2{ margin:0 0 18px; font-size:17px; }
.auth-card input[type=text], .auth-card input[type=password]{
  width:100%; box-sizing:border-box; padding:11px 12px; margin-bottom:10px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:15px; text-align:center; letter-spacing:.06em;
}
.auth-card input:focus{ outline:none; border-color:var(--ice-gold); box-shadow:0 0 0 3px rgba(255,185,0,.25); }
.auth-card .btn{ width:100%; margin-top:4px; }
.auth-remembered-chip{
  display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px;
  font-family:var(--font-mono); font-size:14px; background:var(--line-soft); border-radius:999px; padding:8px 14px;
}
.auth-remembered-chip button{ border:0; background:none; color:var(--ink-soft); text-decoration:underline; cursor:pointer; font-size:12px; font-family:var(--font-display); }

/* =========================================================================
   "Meld inn sak" full-screen wizard. z-index sits BELOW the popover
   backdrop (60) on purpose - the "forkaste saken?" confirm (ui-sak.js)
   needs to appear on top of this, not behind it.
   ========================================================================= */
.sak-overlay{
  position:fixed; inset:0; z-index:55; background:var(--paper);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.sak-card{
  position:relative; width:480px; max-width:100%; background:#fff; border:2px solid var(--ice-black);
  border-radius:var(--radius-lg); padding:36px 32px 28px; box-sizing:border-box;
}
.sak-close{
  position:absolute; top:14px; right:14px; background:none; border:0; font-size:22px; line-height:1;
  cursor:pointer; color:var(--ink-soft); padding:4px;
}
.sak-progress{ font-size:12px; font-weight:800; color:var(--ink-soft); text-align:center; margin-bottom:18px; letter-spacing:.03em; min-height:14px; }
.sak-title{ font-size:19px; margin:0 0 14px; text-align:center; }
.sak-optional{ font-size:13px; font-weight:400; color:var(--ink-soft); }
.sak-intro-text{ font-size:14px; color:var(--ink-soft); text-align:center; margin:0 0 14px; line-height:1.5; }
.sak-warning{
  font-size:13px; background:#FFF6E5; border:1px solid var(--warning); color:var(--warning-text);
  border-radius:var(--radius-sm); padding:10px 14px; text-align:center; margin:0;
}
.sak-receipt-number{ text-align:center; font-size:22px; font-weight:800; margin:8px 0 0; }
.sak-category-grid{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.sak-category-btn{
  padding:10px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff;
  font-family:var(--font-display); font-size:14px; font-weight:700; cursor:pointer;
}
.sak-category-btn:hover{ border-color:var(--ice-gold); }
.sak-category-btn.is-selected{ background:var(--ice-black); border-color:var(--ice-black); color:#fff; }
.sak-category-custom-input{
  width:100%; box-sizing:border-box; margin-top:12px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--radius-sm); font-family:var(--font-display); font-size:14px;
}
.sak-category-custom-input:focus{ outline:none; border-color:var(--ice-gold); box-shadow:0 0 0 3px rgba(255,185,0,.2); }
.sak-textarea{
  width:100%; box-sizing:border-box; min-height:180px; resize:vertical; padding:12px;
  border:1px solid var(--line); border-radius:var(--radius-sm); font-family:var(--font-display); font-size:14px;
}
.sak-textarea:focus{ outline:none; border-color:var(--ice-gold); box-shadow:0 0 0 3px rgba(255,185,0,.2); }
.sak-enter-hint{ text-align:center; }
/* justify-content:flex-end + back's own margin-right:auto (rather than
   space-between) so the layout is still correct with only one button
   visible - back is [hidden] on the intro/receipt screens, and
   space-between with a single flex item sits it at the START, not the
   end, which would put "Start"/"Lukk" on the wrong side. */
.sak-nav{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.sak-nav .btn{ flex:none; min-width:110px; }
#sak-back-btn{ margin-right:auto; }

/* -------------------------------------------------------------------------
   Kampanjeoversikt: near-full-screen overlay + Gantt-style timeline.
   ------------------------------------------------------------------------- */
.campaign-overlay{
  position:fixed; inset:0; z-index:55; background:rgba(20,24,28,.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.campaign-card{
  position:relative; width:min(1100px, 96vw); max-height:min(820px, 90vh); overflow-y:auto;
  background:#fff; border:2px solid var(--ice-black); border-radius:var(--radius-lg);
  padding:36px 32px 28px; box-sizing:border-box;
}
.campaign-title{ margin:0 0 18px; text-align:center; }

.gantt-legend{ display:flex; gap:18px; justify-content:center; margin-bottom:20px; font-size:12.5px; color:var(--ink-soft); }
.gantt-legend__item{ display:inline-flex; align-items:center; gap:6px; }
.gantt-legend__dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.gantt-legend__dot--past{ background:var(--ink-soft); }
.gantt-legend__dot--active{ background:var(--ice-yellow); border:1.5px solid var(--ice-black); }
.gantt-legend__dot--future{ background:#fff; border:1.5px solid var(--line); }

.gantt-timeline{ position:relative; }
.gantt-axis{ position:relative; height:26px; margin-left:160px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.gantt-axis__tick{
  position:absolute; top:0; font-size:11px; font-weight:600; color:var(--ink-soft);
  white-space:nowrap; transform:translateX(-2px); text-transform:capitalize;
}
.gantt-rows{ position:relative; }
.gantt-row{ display:flex; align-items:center; gap:0; min-height:38px; }
.gantt-row__label{
  width:160px; flex:none; font-size:13px; font-weight:700; padding-right:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gantt-row__track{ position:relative; flex:1; height:26px; background:var(--line-soft); border-radius:var(--radius-lg); }
.gantt-bar{
  position:absolute; top:0; height:100%; border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-sizing:border-box;
  transition:transform .12s ease, box-shadow .12s ease;
}
.gantt-bar:hover{ transform:scaleY(1.15); box-shadow:var(--shadow-float); z-index:2; }
.gantt-bar--active{ background:var(--ice-yellow); border:1.5px solid var(--ice-black); }
.gantt-bar--past{ background:var(--ink-soft); opacity:.6; }
.gantt-bar--future{ background:#fff; border:1.5px dashed var(--line); }
.gantt-bar--open-start{ border-top-left-radius:0; border-bottom-left-radius:0; }
.gantt-bar--open-end{ border-top-right-radius:0; border-bottom-right-radius:0; }
.gantt-bar__count{ font-size:11px; font-weight:700; color:var(--ink); pointer-events:none; white-space:nowrap; }
.gantt-bar--past .gantt-bar__count{ color:#fff; }

.gantt-today-line{
  position:absolute; top:0; bottom:0; width:0; border-left:2px solid var(--danger); pointer-events:none; z-index:3;
}
.gantt-today-line--rows{ top:0; bottom:0; }
.gantt-today-line__label{
  position:absolute; top:-18px; left:2px; font-size:10.5px; font-weight:800; color:var(--danger); white-space:nowrap;
}

/* Day-by-day scrub line - snaps to the nearest whole day under the mouse
   (see ui-campaigns.js's onGanttCrosshairMove). pointer-events:none so it
   never itself blocks a bar's own hover tooltip underneath it. */
.gantt-crosshair{
  position:absolute; top:0; bottom:0; width:0; border-left:1.5px dashed var(--ink-soft);
  pointer-events:none; z-index:4;
}
.gantt-crosshair__label{
  position:absolute; top:-2px; left:6px; transform:translateY(-100%);
  background:var(--ice-black); color:#fff; font-size:11px; font-weight:700; white-space:nowrap;
  padding:3px 8px; border-radius:var(--radius-sm);
}

.gantt-tooltip{
  position:fixed; z-index:200; background:#fff; border:1.5px solid var(--ice-black); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-tooltip); padding:12px 14px; min-width:200px; max-width:300px; pointer-events:none;
}
.gantt-tooltip__title{ font-weight:800; font-size:13.5px; margin-bottom:2px; }
.gantt-tooltip__dates{ font-size:11.5px; margin:0; }

.auth-remember-row{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); margin:6px 0 14px; justify-content:center; }
.auth-error{ color:var(--danger); font-size:12.5px; min-height:16px; margin-bottom:8px; }
.auth-welcome{ margin:0 0 6px; font-size:14px; font-weight:700; color:var(--ink); }
.auth-welcome:empty{ display:none; }
.auth-pending-note{ font-size:13px; color:var(--ink-soft); margin-bottom:16px; line-height:1.5; }

/* "Hvem er du?" - a store's user roster, per-user login (migrations/0003). */
.auth-store-sub{ font-size:12.5px; color:var(--ink-soft); margin:-10px 0 14px; }
.auth-who-list{ display:flex; flex-direction:column; gap:8px; max-height:240px; overflow-y:auto; margin-bottom:4px; }
.auth-who-btn{
  width:100%; box-sizing:border-box; padding:11px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; font-family:var(--font-display); font-size:14px; font-weight:600; text-align:left;
  cursor:pointer; transition:background-color .15s, border-color .15s;
}
.auth-who-btn:hover{ background:var(--line-soft); border-color:var(--ice-gold); }
.auth-back-link{
  display:block; width:100%; text-align:center; margin-top:14px; background:none; border:0;
  color:var(--ink-soft); text-decoration:underline; cursor:pointer; font-size:12px; font-family:var(--font-display);
}