/*!
 * Extended Components for FeatherCSS
 * Reusable patterns that complement feather.css
 */

/* ============================================
   Project palette extensions on top of FeatherCSS.
   FeatherCSS itself stays vendored / unmodified;
   anything project-specific goes here so we can
   re-pull the upstream stylesheet cleanly.
   ============================================ */
:root {
  --color-info-bg: hsl(210, 80%, 94%);
  --color-warning-bg: hsl(35, 100%, 94%);
  --color-text-muted: hsl(0, 0%, 45%);
}
[data-theme="dark"] {
  --color-info-bg: hsl(210, 40%, 22%);
  --color-warning-bg: hsl(35, 60%, 22%);
  --color-text-muted: hsl(0, 0%, 55%);
}

/* ============================================
   Toggle Switch (extends FeatherCSS checkboxes)
   Usage: <label class="toggle"><input type="checkbox"> <span>Label</span></label>
   ============================================ */
label.toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.toggle input[type="checkbox"] {
  opacity: 0;
  width: 2.5rem;
  height: 1.25rem;
  margin: 0 0.25rem 0 0;
  cursor: pointer;
}
.toggle input[type="checkbox"] ~ span {
  font-size: 1rem;
  color: var(--color-gray-2);
}
.toggle input[type="checkbox"] ~ span:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 2.5rem;
  height: 1.25rem;
  margin-top: -0.625rem;
  border-radius: 0.625rem;
  border: 0.063rem solid var(--color-border);
  background: var(--color-gray-5);
  transition: background-color var(--transition-speed) ease,
    border-color var(--transition-speed) ease;
}
.toggle input[type="checkbox"] ~ span:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  border-radius: 50%;
  background: var(--color-gray-8);
  box-shadow: 0 0.063rem 0.125rem rgba(0, 0, 0, 0.2);
  opacity: 1;
  transition: transform var(--transition-speed) ease;
}
[dir="rtl"] .toggle input[type="checkbox"] ~ span:before {
  left: initial;
  right: 0;
}
[dir="rtl"] .toggle input[type="checkbox"] ~ span:after {
  left: initial;
  right: 0.125rem;
}
.toggle:hover input[type="checkbox"] ~ span:before {
  border-color: var(--color-gray-3);
}
.toggle:hover input[type="checkbox"]:checked ~ span:before {
  background: var(--color-primary-focus);
  border-color: var(--color-primary-focus);
}
.toggle input[type="checkbox"]:focus ~ span:before {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.125rem var(--color-highlight);
}
.toggle input[type="checkbox"]:checked ~ span:before {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.toggle input[type="checkbox"]:focus:checked ~ span:before {
  background: var(--color-primary-focus);
  border-color: var(--color-primary-focus);
}
.toggle input[type="checkbox"]:checked ~ span:after {
  transform: translateX(1.25rem);
}
[dir="rtl"] .toggle input[type="checkbox"]:checked ~ span:after {
  transform: translateX(-1.25rem);
}

/* ============================================
   Danger Button (extends FeatherCSS buttons)
   ============================================ */
.danger-button {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  box-shadow: none;
  background: var(--color-error);
  margin: 0;
  padding: 0.75rem 2rem;
  border: 0.063rem solid var(--color-error);
  border-radius: var(--roundness-1);
  font-size: var(--base-font-size);
  color: #fff;
  text-align: center;
  transition: background-color var(--transition-speed) ease,
    border-color var(--transition-speed) ease;
}
.danger-button:hover,
.danger-button:focus {
  background: color-mix(in srgb, var(--color-error) 85%, black);
  border-color: color-mix(in srgb, var(--color-error) 85%, black);
}
.danger-button:disabled {
  opacity: var(--disabled-opacity, 0.5);
  cursor: not-allowed;
}

/* ============================================
   Badge (status indicators)
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.badge--draft {
  background: color-mix(in srgb, var(--color-warning, #f0a500) 20%, transparent);
  color: var(--color-warning, #f0a500);
}
.badge--posted {
  background: color-mix(in srgb, var(--color-success) 20%, transparent);
  color: var(--color-success);
}
.badge--sent {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  color: var(--color-primary);
}
/* Filled (not tinted) so "Paid" is distinct from the tinted green "Posted";
   text uses the page background so it stays legible in both themes. */
.badge--paid {
  background: var(--color-success);
  color: var(--color-background);
}
.badge--overdue {
  background: color-mix(in srgb, var(--color-error) 20%, transparent);
  color: var(--color-error);
}
/* A matched incoming bank payment awaiting the user's confirm (#288). Filled
   amber so it reads as "action available", distinct from the tinted states. */
.badge--suggested {
  background: var(--color-warning);
  color: var(--color-background);
}
/* Partially paid: some payment allocated but the invoice isn't fully settled
   (#308). A success TINT (vs. the filled "Paid" green) signals progress. */
.badge--partial {
  background: color-mix(in srgb, var(--color-success) 20%, transparent);
  color: var(--color-success);
}
/* Purple tint keeps a credit note distinct from the green/blue/red states;
   tint + colored text stays legible in both themes (as with sent/overdue). */
.badge--credit {
  background: color-mix(in srgb, var(--color-credit) 20%, transparent);
  color: var(--color-credit);
}
.badge-group {
  display: inline-flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  align-items: center;
}
.badge--imported {
  background: color-mix(in srgb, var(--color-success) 20%, transparent);
  color: var(--color-success);
}
.badge--pending {
  background: color-mix(in srgb, var(--color-gray-3, #999) 20%, transparent);
  color: var(--color-gray-2, #555);
}
.badge--needs-fiscal-year {
  background: color-mix(in srgb, var(--color-warning, #f0a500) 20%, transparent);
  color: var(--color-warning, #f0a500);
}

/* Odido Invoices subpage */
.odido-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}
.odido-toolbar__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0; /* FeatherCSS puts margin-bottom on <label>; would drop the select below the button */
  font-size: 0.85rem;
  color: var(--color-gray-3);
}
.odido-toolbar__field select {
  min-width: 15rem;
  margin: 0;
  /* match the button's vertical padding (0.75rem) so the two line up as a pair */
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.odido-status {
  color: var(--color-gray-3);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

/* ============================================
   Disabled buttons — read the state without hovering.
   General disabled = a blocked-red slash + dim (project override;
   FeatherCSS only dims). Add `.is-busy` for a "working" button:
   the slash is swapped for a spinner (pair it with an "…"-ing label).
   ============================================ */
.button:disabled,
.button[disabled] {
  position: relative;
  overflow: hidden;
  opacity: 0.72;
  cursor: not-allowed;
}
.button:disabled::after,
.button[disabled]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1.4px),
    var(--color-error) calc(50% - 1.4px),
    var(--color-error) calc(50% + 1.4px),
    transparent calc(50% + 1.4px)
  );
}
.button.is-busy:disabled,
.button.is-busy[disabled] {
  cursor: progress;
}
.button.is-busy::after {
  display: none; /* a working button is not "blocked" — no slash */
}
.button.is-busy::before {
  content: "";
  /* inline-block, or an inline ::before collapses width/height to a sliver */
  display: inline-block;
  vertical-align: -0.15em;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5em;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: var(--color-primary);
  animation: button-spin 0.7s linear infinite;
}
@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .button.is-busy::before {
    animation: none;
    border-top-color: var(--color-gray-3);
  }
}

/* ============================================
   Summary Bar (stats/totals display)
   ============================================ */
.summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 0;
  font-size: 0.9rem;
  color: var(--color-gray-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}
.summary-bar__item {
  display: inline-flex;
  gap: 0.35rem;
}
.summary-bar__label {
  color: var(--color-gray-3);
}
.summary-bar__value {
  font-weight: 600;
  color: var(--color-gray-1);
}

/* ============================================
   Responsive Data Table
   Uses native <table> + FeatherCSS styles
   ============================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th {
  white-space: nowrap;
  color: var(--color-gray-3);
  font-weight: 600;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--color-border);
  font-size: 0.85rem;
}
.data-table td {
  vertical-align: middle;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.data-table tbody tr:not(.data-table__details) {
  cursor: pointer;
  transition: background var(--transition-speed) ease;
}
.data-table tbody tr:not(.data-table__details):hover {
  background: var(--color-gray-6);
}
.data-table tbody tr.data-table__row--expanded {
  background: var(--color-gray-7);
}

/* Table cell alignments */
.data-table .text-right {
  text-align: right;
}
.data-table .text-center {
  text-align: center;
}
.data-table .text-nowrap {
  white-space: nowrap;
}

/* Truncate description cells */
.data-table .cell-truncate {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive column visibility */
@media (max-width: 1199px) {
  .data-table .col-desktop-only {
    display: none;
  }
}
/* Cards up to a tablet too: beside the 240px sidebar an 820px tablet leaves the table ~530px,
   which wrapped every name over three lines and pushed the totals out of view. Keep in step
   with the matchMedia in abstract-invoice-list-element.js. */
@media (max-width: 1023px) {
  .data-table--responsive {
    display: none;
  }
}

/* ============================================
   Data Cards (mobile alternative to table)
   ============================================ */
.data-cards {
  display: none;
}
@media (max-width: 1023px) {
  .data-cards {
    display: grid;
    /* The track never sizes to its cards: one skipped off screen has no width of its own. */
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
}

.data-card {
  background: var(--color-gray-7);
  border: 1px solid var(--color-border);
  border-radius: var(--roundness-2);
  padding: 0.75rem;
  display: grid;
  gap: 0.35rem;
  /* Cards out of view skip layout, as the list rows do (css/list-row.css): ~9.3-10.4rem measured. */
  content-visibility: var(--list-row-visibility, auto);
  contain-intrinsic-block-size: auto 9.5rem;
}
/* An open ⋮ menu reaches over the cards below: the containment would clip it and trap its z-index. */
.data-card:has(.overflow-menu__dropdown.is-open) { content-visibility: visible; }
@media print {
  .data-card { content-visibility: visible; }
}
.data-card[data-status="draft"] {
  border-left: 3px solid var(--color-warning, #f0a500);
}
.data-card[data-status="posted"] {
  border-left: 3px solid var(--color-success);
}
.data-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}
.data-card__title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-gray-1);
}
.data-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-gray-3);
}
.data-card__meta-sep::before {
  content: "\00b7";
  margin-right: 0.5rem;
}
.data-card__description {
  font-size: 0.9rem;
  color: var(--color-gray-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-card__stats {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}
.data-card__stat-label {
  color: var(--color-gray-3);
  margin-right: 0.3em;
}
.data-card__stat-value {
  font-weight: 600;
}
.data-card__details {
  display: none;
  font-size: 0.85rem;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  gap: 0.25rem;
}
.data-card__details.is-open {
  display: grid;
}
.data-card__detail-row {
  display: flex;
  gap: 0.35rem;
}
.data-card__detail-label {
  color: var(--color-gray-3);
}
.data-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}
.data-card__actions .button,
.data-card__actions .primary-button,
.data-card__actions .danger-button {
  padding: 0.5rem 1rem;
  flex: 1;
  min-width: fit-content;
}

/* ============================================
   Expandable Details Row (for tables)
   ============================================ */
.data-table__details {
  display: none;
}
.data-table__details.is-open {
  display: table-row;
}
.data-table__details > td {
  padding: 0.75rem 1rem;
  background: var(--color-gray-7);
}
.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.details-section {
  display: grid;
  gap: 0.25rem;
}
.details-section__label {
  font-size: 0.8rem;
  color: var(--color-gray-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.details-section__value {
  color: var(--color-gray-1);
}

/* Delivery log: what the mail provider recorded about a dispatch. */
.details-delivery {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-items: start;
}
.details-delivery__output {
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.details-delivery__dispatch {
  display: grid;
  gap: 0.15rem;
}
.details-delivery__sent {
  font-weight: 600;
  color: var(--color-gray-1);
}
.details-delivery__event {
  color: var(--color-gray-2);
  font-variant-numeric: tabular-nums;
}
.details-delivery__error {
  color: var(--color-gray-2);
  font-style: italic;
}
.details-delivery__receipt-status {
  color: var(--color-gray-1);
}
.details-delivery__receipt-queue {
  color: var(--color-gray-2);
  font-family: var(--font-mono, monospace);
  user-select: all;
}
/* The relay's literal words: set apart from our reading of them above. */
.details-delivery__receipt-raw {
  color: var(--color-gray-2);
  font-family: var(--font-mono, monospace);
  font-size: 0.85em;
  word-break: break-word;
}

/* The address on the e-mail button in the posting dialog, under its label. */
.issue-channel__recipient {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.85;
}

/* ============================================
   Action Buttons in Tables/Cards
   ============================================ */
.action-buttons {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.action-buttons .button,
.action-buttons .primary-button,
.action-buttons .danger-button {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

/* ============================================
   Empty State
   ============================================ */
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-gray-3);
  font-size: 0.95rem;
}

/* ============================================
   Section Header (bookkeeping header pattern)
   ============================================ */
.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.section-header__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-1);
}
.section-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-size: 0.9rem;
  color: var(--color-gray-3);
  margin-top: 0.15rem;
}
.section-header__meta span:not(:last-child)::after {
  content: "\00b7";
  margin-left: 1rem;
  color: var(--color-gray-4);
}
.section-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
@media (max-width: 600px) {
  .section-header {
    flex-direction: column;
    align-items: stretch;
  }
  .section-header__actions {
    justify-content: stretch;
  }
  .section-header__actions .primary-button {
    flex: 1;
  }
}

/* ============================================
   Data-tip (hover/tap tooltip)
   Usage: <span tabindex="0" data-tip="Label">value</span>
   ============================================ */
[data-tip] {
  position: relative;
  cursor: default;
}
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.5rem;
  background: var(--color-gray-2);
  color: var(--color-gray-8);
  font-size: 0.75rem;
  white-space: nowrap;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
[data-tip]:hover::after,
[data-tip]:focus::after {
  opacity: 1;
}

/* ============================================
   Fiscal Year Selector (pill button group)
   ============================================ */
.fiscal-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.fiscal-selector__group {
  display: inline-flex;
  border-radius: var(--roundness-2);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-gray-7);
}
.fiscal-selector__btn {
  padding: 0.5rem 0.85rem;
  border: none;
  background: transparent;
  color: var(--color-gray-2);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-speed) ease,
    color var(--transition-speed) ease;
  white-space: nowrap;
}
.fiscal-selector__btn:hover {
  background: var(--color-gray-6);
  color: var(--color-gray-1);
}
.fiscal-selector__btn.active {
  background: var(--color-primary);
  color: #fff;
}
.fiscal-selector__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}
.fiscal-selector__export {
  padding: 0.5rem 0.65rem;
  border: none;
  border-left: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-gray-3);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-speed) ease,
    color var(--transition-speed) ease;
}
.fiscal-selector__export:hover {
  background: var(--color-gray-6);
  color: var(--color-gray-1);
}
.fiscal-selector__export:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}
@media (max-width: 600px) {
  .fiscal-selector {
    flex-direction: column;
  }
  .fiscal-selector__group {
    width: 100%;
  }
  .fiscal-selector__btn {
    flex: 1;
    text-align: center;
  }
}

/* ============================================
   Browser Permissions List (personal page)
   ============================================ */
.permission-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.permission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-gray-5, #f5f5f5);
  border-radius: 4px;
}

.permission-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.permission-info strong {
  font-size: 0.875rem;
}

.permission-desc {
  font-size: 0.75rem;
  color: var(--color-gray-3, #666);
}

.permission-badge {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
}

.permission-badge--granted {
  color: #155724;
  background: #d4edda;
}

.permission-badge--denied {
  color: #721c24;
  background: #f8d7da;
}

.permission-badge--prompt {
  color: #856404;
  background: #fff3cd;
}

.permission-badge--unknown {
  color: #6c757d;
  background: #e9ecef;
}

.permission-badge--current {
  margin-top: 0.125rem;
  align-self: flex-start;
}

.permission-action {
  flex-shrink: 0;
  margin-left: 0.5rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
}

/* ---------------------------------------------------------------------------
 * .control-tile — add to a <label> that wraps a FeatherCSS radio/checkbox to
 * render the control as a larger, deliberate box/dot on the row's TRAILING edge
 * (for selectable "cards" whose whole row already highlights on choice, so the
 * native control reads as intentional, not feather's small top-left default).
 * Extends feather's `input ~ span::before/::after` by specificity — the HTML
 * stays <label><input><span>…</label> (the span may be empty; row text lives in
 * its own nodes). Reusable across elements via the copied global sheet.
 * ------------------------------------------------------------------------- */
.control-tile { position: relative; }
.control-tile > input[type="checkbox"],
.control-tile > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.control-tile > input ~ span {
  order: 99;
  margin-left: auto;
  align-self: center;
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  pointer-events: none;
}
[dir="rtl"] .control-tile > input ~ span {
  margin-left: 0;
  margin-right: auto;
}
.control-tile input[type="checkbox"] ~ span::before {
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--color-border);
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.control-tile input[type="checkbox"]:checked ~ span::before {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.control-tile input[type="checkbox"] ~ span::after {
  content: "";
  opacity: 0;
  position: absolute;
  top: 3px;
  left: 7px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  border-radius: 0;
  background: none;
  transform: rotate(45deg);
}
.control-tile input[type="checkbox"]:checked ~ span::after {
  opacity: 1;
}
.control-tile input[type="radio"] ~ span::before {
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: transparent;
  transition: border-color 0.15s ease;
}
.control-tile input[type="radio"]:checked ~ span::before {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.control-tile input[type="radio"] ~ span::after {
  content: "";
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
.control-tile input[type="radio"]:checked ~ span::after {
  opacity: 1;
}
.control-tile input:focus-visible ~ span::before {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * .primary-star — the ONE marker for "this is the chosen one" (primary address,
 * main activity, default config, …), in the app's accent colour. Filled ★ = set,
 * faint ☆ = settable (click). Use a <button class="primary-star"> for the
 * interactive set-action and a <span class="primary-star set"> for display-only.
 * Reusable via the copied global sheet; replaces the ad-hoc star/dot/badge/text.
 * ------------------------------------------------------------------------- */
.primary-star {
  background: none;
  border: none;
  padding: 0.1rem 0.25rem;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--color-gray-4);
  cursor: pointer;
  transition: color 0.15s ease;
}
.primary-star.set {
  color: var(--color-primary);
  cursor: default;
}
.primary-star:not(.set):hover,
.primary-star:not(.set):focus-visible {
  color: var(--color-primary);
  outline: none;
}
span.primary-star {
  cursor: default;
}