/* =========================================================
   PackLite – Display face
   =========================================================

   Newsreader carries the direction B headlines (#474/#480). It is
   self-hosted because the content security policy allows
   `font-src :self, :data` and nothing else — Google Fonts is not an
   option and the policy is not weakened to make it one.

   Newsreader is licensed under the SIL Open Font License 1.1; the
   licence ships beside the font in app/assets/fonts/OFL.txt.

   One file, 23.9 kB:
   - Latin subset only. English and German are the only active locales
     and ÄÖÜäöüß all sit inside U+0000–00FF, so latin-ext is not needed.
   - One weight (500). Every headline in the design is drawn at 500.
   - One optical size (opsz 36, the weighted mean of the drawn headline
     sizes, which run 24–62px). The variable opsz axis would be exact at
     every size but costs 60.7 kB instead of 23.9 kB.

   Referenced through --font-display in application.css, never by naming
   the stack again.
   --------------------------------------------------------- */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/newsreader-500-latin-36459103375209a47929fc7caac5eb6ec31e0abbe3cfb14b33298b637b2c79b6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* === Data tables ===
   Required FIRST from application.css, so a per-area rule of the same
   specificity later in the cascade wins without doubling its selector. */

/* ── Scroll wrapper ─────────────────────────────────────── */
.data-table-scroll,
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table-scroll--bordered,
.table-scroll {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* ── Table ──────────────────────────────────────────────── */
.data-table,
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.data-table th,
.data-table td,
.admin-table th,
.admin-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.data-table th,
.admin-table th {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  background: var(--surface-sunken);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.data-table tr:last-child td,
.admin-table tr:last-child td { border-bottom: none; }

.data-table tbody tr:hover td,
.admin-table tbody tr:hover td { background: var(--surface-raised); }

/* ── Density ────────────────────────────────────────────── */
.data-table--dense { font-size: 0.9rem; }
.data-table--dense th,
.data-table--dense td { padding: 0.65rem 1rem; }

.data-table--compact { font-size: 0.85rem; }
.data-table--compact th,
.data-table--compact td { padding: 0.5rem 0.7rem; }

/* ── Quiet: the reading table ───────────────────────────── */
.data-table--quiet td { color: var(--text-secondary); }

.data-table--quiet th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}

.data-table--quiet tbody tr:hover td { background: var(--surface-sunken); }

.data-table td.data-table__primary {
  color: var(--text-primary);
  font-weight: 600;
}

.data-table td.data-table__key {
  color: var(--primary-dark);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Surface variants ───────────────────────────────────── */
.data-table--flat {
  border-radius: 0;
  box-shadow: none;
}

.data-table--zebra tbody tr:nth-child(even) td { background: var(--surface-sunken); }

.data-table--sticky th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.data-table--print { font-size: 0.72rem; box-shadow: none; border-radius: 0; }
.data-table--print th {
  padding: 0.25rem 0.4rem;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: none;
  border-bottom: 1px solid var(--text-primary);
}
.data-table--print td {
  padding: 0.25rem 0.4rem;
  vertical-align: top;
}
.data-table--print tbody tr:hover td { background: none; }

/* ── Column helpers ─────────────────────────────────────── */
.col-check   { width: 36px; }
.col-num     { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-actions { position: relative; white-space: nowrap; width: 1%; }

/* `.data-table td` (0,1,1) outranks a bare helper (0,1,0) and pinned numeric
   columns left; restated at a specificity that wins. */
.data-table .col-num,
.admin-table .col-num { text-align: right; }

/* ── Sortable headers ───────────────────────────────────── */
.data-table th a,
.admin-table th a {
  color: inherit;
  text-decoration: none;
}

.data-table th a:hover,
.admin-table th a:hover { color: var(--primary); }

.sort-indicator {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* ── Row action icons ───────────────────────────────────── */
.data-table__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  white-space: nowrap;
  vertical-align: middle;
}

.data-table__actions form {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
}

.data-table__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.data-table__icon-btn:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.data-table__icon-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.data-table__icon-btn--danger:hover {
  background: var(--danger-light);
  color: var(--danger);
}

.data-table__position {
  width: 2.75rem;
  height: 1.75rem;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.78rem;
}

@media print {
  .data-table__actions { display: none; }
}

/* ── Edit mode: the switch, the bar, the framed table ───── */
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.edit-mode-switch {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.edit-mode-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.edit-mode-switch__btn + .edit-mode-switch__btn { border-left: 1px solid var(--border); }

.edit-mode-switch__btn:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.edit-mode-switch__btn[aria-pressed="true"] {
  background: var(--primary);
  color: var(--text-on-primary, #fff);
}

.edit-mode-switch__btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.edit-mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.8rem;
  border: 2px solid var(--primary);
  border-bottom: 0;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 0.82rem;
}

.edit-mode-bar[hidden] { display: none; }

.edit-mode-bar__text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.data-table.edit-mode {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.data-table.edit-mode td[data-inline-edit-target~="cell"] { box-shadow: inset 0 -1px 0 var(--primary); }

.data-table:not(.edit-mode) td[data-inline-edit-target~="cell"] {
  text-decoration: underline dotted transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}

.data-table:not(.edit-mode) td[data-inline-edit-target~="cell"]:hover {
  text-decoration-color: var(--text-muted);
  transition-delay: 0.5s;
}

@media print {
  .edit-mode-switch,
  .edit-mode-bar { display: none; }

  .data-table.edit-mode { outline: none; }
}

/* ── Selection bar ──────────────────────────────────────── */
.selection-dock {
  position: fixed;
  right: 0;
  bottom: 1.5rem;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.selection-bar {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  max-width: calc(100vw - 2rem);
  padding: 0.35rem 0.4rem 0.35rem 0.95rem;
  border: 1.5px solid var(--primary);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  font-size: 0.85rem;
  pointer-events: auto;
}

.selection-bar[hidden] { display: none; }

.selection-bar__count {
  margin-right: 0.55rem;
  font-weight: 700;
  white-space: nowrap;
}

.selection-bar__action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-primary);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.selection-bar__action .icon { color: var(--text-muted); }

.selection-bar__action:hover { background: var(--surface-sunken); }

.selection-bar__action--primary,
.selection-bar__action--primary .icon {
  color: var(--primary-dark);
  font-weight: 600;
}

.selection-bar__action--danger,
.selection-bar__action--danger .icon { color: var(--danger); }

.selection-bar__action--danger:hover { background: var(--danger-light); }

.selection-bar__sep {
  align-self: stretch;
  width: 1px;
  margin: 0 0.25rem;
  background: var(--border);
}

.selection-bar__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.selection-bar__clear:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.selection-bar button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.selection-bar .inline-edit-error:empty { display: none; }

@media (max-width: 768px) {
  body.has-bottom-nav .selection-dock { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 0.75rem); }
}

@media (max-width: 40rem) {
  .selection-bar__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media print {
  .selection-dock { display: none; }
}

/* ── Menu popover ───────────────────────────────────────── */
.menu-popover {
  width: 15rem;
  max-height: 20rem;
  overflow: auto;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  font-size: 0.85rem;
}

.menu-popover__title {
  margin: 0 0 0.25rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.menu-popover__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.menu-popover__item .icon { color: var(--text-muted); }

.menu-popover__item:hover,
.menu-popover__item:focus-visible {
  background: var(--surface-sunken);
  outline: none;
}

a.menu-popover__item { text-decoration: none; }

.menu-popover--actions { width: 18rem; }
.menu-popover--actions .menu-popover__item { align-items: flex-start; }
.menu-popover--actions .menu-popover__item .icon { margin-top: 0.1rem; }

.menu-popover__item small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ── Table toolbar ──────────────────────────────────────── */
.table-toolbar--filters {
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.6rem;
}

.table-toolbar__start {
  display: flex;
  flex: 1 1 28rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.table-toolbar__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.toolbar-search {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2rem;
  min-width: 15rem;
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  background: var(--surface);
}

.toolbar-search .icon { color: var(--text-muted); }

.toolbar-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.85rem;
}

.toolbar-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.toolbar-chip {
  display: inline-flex;
  align-items: stretch;
  height: 2rem;
  border: 1px dashed var(--border-sunken, var(--border));
  background: var(--surface);
}

.toolbar-chip__button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.7rem;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.toolbar-chip__button .icon { font-size: 0.8rem; }

.toolbar-chip__button b { font-weight: 700; }

.toolbar-chip--menu { border-style: solid; }

.toolbar-chip--active {
  border-style: solid;
  border-color: var(--primary);
  background: var(--primary-light);
}

.toolbar-chip--active .toolbar-chip__button { color: var(--primary-dark); }

.toolbar-chip__clear {
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem 0 0.1rem;
  color: var(--primary-dark);
}

.toolbar-chip__button:focus-visible,
.toolbar-chip__clear:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.toolbar-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.toolbar-count {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.toolbar-count b { color: var(--text-primary); }

.toolbar-segment {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface);
}

.toolbar-segment a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: calc(2rem - 2px);
  color: var(--text-secondary);
}

.toolbar-segment a + a { border-left: 1px solid var(--border); }

.toolbar-segment a.is-active {
  background: var(--primary);
  color: var(--text-on-primary, #fff);
}

.toolbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
}

.toolbar-icon-btn:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.toolbar-icon-btn .icon svg {
  width: 1rem;
  height: 1rem;
}

.menu-popover__item input[type="radio"] {
  margin: 0;
  accent-color: var(--primary);
}

.menu-popover__item[hidden] { display: none; }

.menu-popover__find {
  width: 100%;
  height: 1.9rem;
  margin-bottom: 0.35rem;
  padding: 0 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.8rem;
}

.menu-popover__fields {
  display: grid;
  gap: 0.7rem;
  padding: 0.3rem 0.4rem;
}

.menu-popover__legend {
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.menu-popover__range {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.menu-popover__range input {
  width: 5.5rem;
  height: 1.9rem;
  padding: 0 0.4rem;
  border: 1px solid var(--border);
  font: inherit;
  font-size: 0.8rem;
}

.menu-popover__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.9rem;
}

.menu-popover__choices label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
}

@media (max-width: 40rem) {
  .table-toolbar__start {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .toolbar-search { min-width: 11rem; }
}

@media print {
  .table-toolbar--filters { display: none; }
}

/* ── Row selection (bulk select) ────────────────────────── */
.data-table--selectable:not(.edit-mode) tbody tr { cursor: pointer; }

.data-table tbody tr.is-selected td,
.data-table tbody tr.is-selected:hover td {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

/* ── Inline editing ─────────────────────────────────────── */
[data-controller~="inline-edit"]:not(.edit-mode) .inline-edit-only { display: none; }

.data-table.edit-mode td[data-inline-edit-target~="cell"] {
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
}

.data-table.edit-mode td[data-inline-edit-target~="cell"]:hover {
  background-color: var(--primary-light);
  box-shadow: inset 0 0 0 1px var(--primary);
}

/* min-width: 100% is the floor; the input's `size`, which the controller keeps
   in step with what is typed, is what widens it. */
.data-table td[data-inline-edit-target~="cell"] { position: relative; }

.inline-edit-input,
.inline-edit-select {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  min-width: 100%;
  max-width: max(100%, 26rem);
  box-sizing: border-box;
  padding: 0.4rem 0.6rem;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius);
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text-primary);
  font-family: inherit;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.inline-edit-input[type="number"],
.inline-edit-input[type="date"],
.inline-edit-input[type="time"],
.inline-edit-input[type="datetime-local"] {
  width: 100%;
  max-width: 100%;
}

.inline-edit-input:focus,
.inline-edit-select:focus {
  outline: none;
  border-color: var(--primary);
}

.data-table td.saving {
  background-color: var(--warning-light);
  animation: data-table-pulse 1s ease-in-out infinite;
}

@keyframes data-table-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.data-table td.saved {
  background-color: var(--success-light);
  transition: background-color 0.5s ease;
}

.data-table td.has-error { box-shadow: inset 0 0 0 1px var(--danger); }

.inline-edit-error {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--danger);
  white-space: normal;
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
  .data-table-scroll,
  .table-scroll { overflow: visible; border: none; }

  .data-table,
  .admin-table { box-shadow: none; }

  .data-table thead { display: table-header-group; }
  .data-table tr { break-inside: avoid; }

  .inline-edit-input,
  .inline-edit-select,
  .inline-edit-error { display: none; }

  .data-table.edit-mode td[data-inline-edit-target~="cell"],
  .data-table.edit-mode td[data-inline-edit-target~="cell"]:hover {
    background-color: transparent;
    box-shadow: none;
  }
}

trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
}

trix-toolbar * {
  box-sizing: border-box;
}
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}
trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px;
}
trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 1.5vw;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent;
}
trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: rgb(0, 0, 0);
}
trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}
@media (max-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}
trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}
trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%;
}
trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-dialogs {
  position: relative;
}
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #F00 0px 0px 1.5px 1px;
}
trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none;
}
trix-toolbar .trix-dialog--link {
  max-width: 600px;
}
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable] ::-moz-selection, trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable] ::selection, trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}
trix-editor .attachment {
  position: relative;
}
trix-editor .attachment:hover {
  cursor: default;
}
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}
trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}
trix-editor .trix-button-group {
  display: inline-flex;
}
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-editor .trix-button.trix-active {
  background: #cbeefa;
}
trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}
trix-editor .trix-button--remove:hover {
  border-color: #333;
}
trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}
trix-editor .attachment__metadata-container {
  position: relative;
}
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}
trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}
.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}
.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}
.trix-content li {
  margin-left: 1em;
}
.trix-content [dir=rtl] li {
  margin-right: 1em;
}
.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}
.trix-content img {
  max-width: 100%;
  height: auto;
}
.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}
.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}
.trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
  color: inherit;
}
.trix-content .attachment__caption {
  text-align: center;
}
.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: " •";
}
.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}
.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}
.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}
/*

*/

/* Trix's gallery rule (max-width: 33%) squishes images inside the
   <action-text-attachment> wrapper; these override it. */
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

/* Overrides Trix's 1.2em h1 so headings keep their hierarchy. */
.trix-content h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.25; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.trix-content h2 { font-size: 1.5rem;   font-weight: 700; line-height: 1.25; margin-top: 1.25rem; margin-bottom: 0.4rem; }
.trix-content h3 { font-size: 1.25rem;  font-weight: 700; line-height: 1.25; margin-top: 1rem;   margin-bottom: 0.3rem; }
/* === Inline SVG icons === */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  vertical-align: -0.14em;
}

.icon svg {
  display: block;
  width: 1em;
  height: 1em;
}

.icon--lg svg {
  width: 1.25em;
  height: 1.25em;
}

.icon--xl svg {
  width: 2em;
  height: 2em;
}

.icon--spin svg {
  animation: icon-spin 1.5s linear infinite;
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

/* ── Category icon picker ── */
.icon-picker {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}

.icon-picker__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.icon-picker__option {
  display: inline-flex;
  cursor: pointer;
}

/* The radio stays in the accessibility tree and keyboard order, behind the swatch. */
.icon-picker__option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.icon-picker__swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--surface, #fff);
  font-size: 0.85rem;
  line-height: 1.2;
}

.icon-picker__swatch .icon svg {
  width: 1.4em;
  height: 1.4em;
}

.icon-picker__option input[type="radio"]:checked + .icon-picker__swatch {
  border-color: var(--primary);
  background: var(--primary-light);
  font-weight: 600;
}

.icon-picker__option input[type="radio"]:focus-visible + .icon-picker__swatch {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---- Landing Page Styles ---- */
.home-hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  background-size: cover;
  background-position: center;
  position: relative;
  margin: -1.5rem -1rem 0;
  padding: 4rem 1rem;
}

.home-hero::before {
  display: none;
}

.home-hero__content {
  position: relative;
  text-align: center;
  max-width: 640px;
  color: #fff;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 1rem;
  padding: 3rem 2.5rem;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
}

/* Explicitly override theme heading colors so white is always applied */
.home-hero__title {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.7);
}

.home-hero__subtitle {
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  margin-bottom: 2rem;
  line-height: 1.6;
  text-shadow: 0 1px 5px rgba(0,0,0,0.75);
}

.home-hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-lg {
  padding: 0.875rem 2rem;
  font-size: 1.1rem;
}

.home-features, .home-guides, .home-articles, .home-cta {
  padding: 4rem 1rem;
}

.home-section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.home-section-header h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.home-section-header p {
  color: var(--secondary);
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.home-section-link {
  display: inline-block;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.home-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
}

.feature-card__icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 1rem;
}

.feature-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.article-card {
  background: var(--surface);
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(41, 46, 51, 0.05), 0 1px 3px rgba(41, 46, 51, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}

.article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(41, 46, 51, 0.1), 0 4px 8px rgba(41, 46, 51, 0.05);
}

.article-card__image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.article-card__body {
  padding: 1.375rem;
}

.article-card__title {
  margin: 0.75rem 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.article-card__title a {
  color: var(--brand-ink);
  text-decoration: none;
}

.article-card__title a:hover {
  color: var(--brand-forest-dark);
  text-decoration: underline;
}

.article-card__excerpt {
  margin: 0 0 0.75rem;
  color: var(--brand-ink-muted);
  font-size: 0.9375rem;
  line-height: 1.62;
}

.article-card__meta {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--brand-ink-subtle);
}

/* ── Article type badge ──
   Shared by the landing teasers, the article-teaser snippet and the blog index. */
.article-type {
  padding: 0.25rem 0.75rem;
  border-radius: 0;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.article-type--guide       { background: var(--brand-forest-tint);   color: var(--brand-forest-dark); }
.article-type--trip_review { background: var(--brand-sun-tint);      color: var(--brand-sun-text); }
.article-type--gear_review { background: var(--brand-charcoal-tint); color: var(--brand-ink); }
.article-type--general     { background: var(--brand-paper-sunken);  color: var(--brand-ink-muted); }
.article-type--start_page  { background: var(--brand-paper-sunken);  color: var(--brand-ink-muted); }

.article-date { color: var(--text-muted); }

.home-cta {
  background: var(--primary-dark);
  color: #fff;
  margin: 0 -1rem;
  padding: 4rem 1rem;
}

.home-cta__inner {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.home-cta__inner h2 {
  color: #fff;
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.home-cta__inner p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.home-cta__inner .btn-secondary {
  color: #fff;
  border-color: rgba(255,255,255,0.5);
  background: transparent;
}

/* === Home — Mobile responsive overrides === */

@media (max-width: 1000px) {
  .home-page .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  /* Negative margin matches .container's padding (0.75rem) at this breakpoint. */
  .home-hero {
    padding: 2.5rem 1rem;
    margin: -1rem -0.75rem 0;
  }

  .home-hero__content {
    padding: 2rem 1.25rem;
  }

  /* Feature grid: override inline style set by teaser_grid snippet */
  .home-features__grid {
    grid-template-columns: 1fr !important;
  }

  .article-grid {
    grid-template-columns: 1fr;
  }

  .home-features,
  .home-guides,
  .home-articles,
  .home-cta {
    padding: 2.5rem 1rem;
  }

  .home-section-header h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  /* Negative margin matches .container's padding (0.625rem) at this breakpoint. */
  .home-hero {
    padding: 2rem 1rem;
    margin: -0.75rem -0.625rem 0;
  }

  .home-hero__content {
    padding: 1.5rem 1rem;
  }

  .home-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .home-hero__actions .btn-lg {
    text-align: center;
  }
}

/* === Landing page ===
   Scoped under .home-page: application.css loads last, and (0,2,0) also
   overrides the older landing rules above. */

.home-page {
  margin: -1.5rem -1rem;
  background: var(--brand-paper);
  color: var(--brand-ink);
}

/* ── Hero ─────────────────────────────────────────────────── */

.home-page .home-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(620px, 62vh);
  min-height: min(620px, 62svh);
  margin: 0;
  padding: 4rem 0;
  background: none;
  background-size: cover;
  background-position: center;
}

.home-page .home-hero::before { display: none; }

.home-page .home-hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(41, 46, 51, 0.12);
}

.home-page .home-hero--photo {
  align-items: flex-start;
  padding-top: 3rem;
}

.home-page .home-hero--photo .home-hero__claim {
  padding: 2rem 2rem 2.25rem;
  border-radius: 12px;
  background: rgba(252, 251, 244, 0.93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 20px 40px rgba(41, 46, 51, 0.18), 0 8px 16px rgba(41, 46, 51, 0.1);
}

/* The wash is a positioned pseudo-element, so the content needs its own
   stacking order or it paints underneath. */
.home-page .home-hero--photo .home-hero__inner {
  position: relative;
  z-index: 1;
}

.home-hero__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.home-hero__claim {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 34rem;
}

.home-page .home-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--brand-ink);
  margin: 0;
  text-shadow: none;
  text-wrap: balance;
}

.home-page .home-hero__subtitle {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--brand-ink-muted);
  margin: 0;
  max-width: 46ch;
  text-shadow: none;
  text-wrap: pretty;
}

.home-page .home-hero__actions {
  justify-content: flex-start;
  align-items: center;
  gap: 1.25rem;
}

.home-page .btn-primary {
  background: var(--brand-forest);
  border-color: var(--brand-forest-dark);
  color: #fff;
}

.home-page .btn-primary:hover { background: var(--brand-forest-dark); }

.home-hero__link {
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-forest);
  text-decoration: none;
}

.home-hero__link:hover {
  color: var(--brand-forest-dark);
  text-decoration: underline;
}

/* ── Feature snippet, drawn as a two-up grid of numbered panels ── */

.home-page .snippet-teaser-grid {
  background: var(--brand-paper);
  padding: 3.5rem 0 4rem;
}

.home-page .snippet-teaser-grid .home-section-header,
.home-page .snippet-teaser-grid .home-features__grid {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.home-page .home-section-header {
  text-align: left;
  margin-bottom: 1.75rem;
}

.home-page .home-section-header h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--brand-ink);
  margin: 0 0 0.375rem;
}

.home-page .home-section-header p {
  color: var(--brand-ink-muted);
  font-size: 1.0625rem;
  margin: 0;
}

/* Wrapping flex, not grid, so the inline grid-template-columns the snippet
   writes and the mobile !important override above go inert. */
.home-page .home-features__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  counter-reset: home-beat;
}

.home-page .feature-card {
  flex: 1 1 calc(50% - 0.5rem);
  min-width: 17.5rem;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  column-gap: 1rem;
  row-gap: 0.375rem;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  padding: 1.25rem 1.375rem 1.375rem;
  text-align: left;
  counter-increment: home-beat;
}

.home-page .feature-card::before {
  content: counter(home-beat, decimal-leading-zero);
  grid-column: 3;
  grid-row: 1;
  padding-top: 0.3125rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-sun-text);
}

.home-page .feature-card__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  border-radius: 8px;
  background: var(--brand-forest-tint);
  color: var(--brand-forest);
  font-size: 1.25rem;
  line-height: 1;
}

.home-page .feature-card h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding-top: 0.125rem;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
}

.home-page .feature-card p {
  grid-column: 2 / span 2;
  grid-row: 2;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--brand-ink-muted);
}

/* ── Article teasers snippet ──────────────────────────────── */

.home-page .snippet-article-teasers {
  background: var(--brand-paper);
  border-top: 1px solid var(--brand-line);
  border-bottom: 1px solid var(--brand-line);
  padding: 5.25rem 0;
}

.home-page .snippet-article-teasers .home-section-header,
.home-page .snippet-article-teasers .article-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.home-page .home-section-link {
  display: inline-block;
  margin-top: 0.25rem;
  font-weight: 600;
  color: var(--brand-forest);
}

.home-page .home-section-link:hover { color: var(--brand-forest-dark); }

.home-page .article-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.home-page .article-card__meta { margin-top: 0; }

/* ── Closing banner snippet ───────────────────────────────── */

.home-page .snippet-banner {
  background: var(--surface);
  border-top: 1px solid var(--brand-line);
  color: var(--brand-ink);
  padding: 4.75rem 1.5rem;
}

.home-page .snippet-banner__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--brand-ink);
  margin: 0 0 0.75rem;
}

.home-page .snippet-banner__subheading {
  color: var(--brand-ink-muted);
  font-size: 1.0625rem;
  max-width: 46ch;
  margin: 0 auto 1.5rem;
}

.home-page .snippet-banner__body { color: var(--brand-ink-muted); }

.home-page .snippet-banner .btn-secondary {
  background: var(--surface);
  color: var(--brand-ink);
  border-color: var(--brand-line);
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Matches .container's padding at this breakpoint. */
  .home-page { margin: -1rem -0.75rem; }

  .home-page .home-hero {
    min-height: 0;
    padding: 3rem 0 2.75rem;
  }

  .home-hero__inner,
  .home-page .snippet-teaser-grid .home-section-header,
  .home-page .snippet-teaser-grid .home-features__grid {
    padding: 0 1rem;
  }

  .home-page .snippet-teaser-grid { padding: 2.5rem 0 3rem; }

  .home-page .snippet-banner { padding: 3rem 1rem; }

  .home-page .home-hero__actions {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    gap: 0.75rem;
  }

  .home-page .home-hero__actions .btn-lg {
    justify-content: center;
    min-height: 48px;
  }

  .home-hero__link {
    text-align: center;
    padding: 0.75rem 0;
  }

  .home-page .home-hero--photo .home-hero__claim { padding: 1.75rem 1.25rem; }

  .home-page .feature-card {
    min-width: 100%;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    column-gap: 0.875rem;
    padding: 1rem 1.125rem 1.125rem;
  }

  .home-page .feature-card__icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.125rem;
  }

  .home-page .snippet-article-teasers { padding: 3rem 0; }

  .home-page .snippet-article-teasers .home-section-header,
  .home-page .snippet-article-teasers .article-grid { padding: 0 1rem; }

  .home-page .article-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .home-page { margin: -0.75rem -0.625rem; }
}

/* ── Trip features: one row per feature, text beside a real screenshot ── */

.snippet-trip-features {
  background: var(--brand-paper);
  padding: 3.5rem 1.5rem 4rem;
}

.snippet-trip-features .trip-features__steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  max-width: 1100px;
  margin: 0 auto 2.5rem;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--brand-line);
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.snippet-trip-features .trip-features__steps a {
  display: inline-flex;
  gap: 0.375rem;
  color: var(--brand-ink);
  text-decoration: none;
}

.snippet-trip-features .trip-features__steps a:hover { color: var(--brand-forest-dark); }

.snippet-trip-features .trip-features__step-number,
.snippet-trip-features .trip-feature__eyebrow span { color: var(--brand-sun-text); }

.snippet-trip-features .trip-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 0;
  border-top: 1px solid var(--brand-line-soft);
  scroll-margin-top: 5rem;
}

.snippet-trip-features .trip-feature:first-of-type { border-top: 0; }

.snippet-trip-features .trip-feature__alias { display: block; scroll-margin-top: 5rem; }

.snippet-trip-features .trip-feature--flip .trip-feature__text { order: 2; }

.snippet-trip-features .trip-feature__text {
  display: grid;
  gap: 0.875rem;
  align-content: start;
}

.snippet-trip-features .trip-feature__eyebrow {
  display: flex;
  gap: 0.625rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-sun-text);
}

.snippet-trip-features .trip-feature__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.625rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--brand-ink);
  text-wrap: balance;
}

.snippet-trip-features .trip-feature__body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--brand-ink-muted);
  text-wrap: pretty;
}

.snippet-trip-features .trip-feature__points {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.snippet-trip-features .trip-feature__points li {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.snippet-trip-features .trip-feature__points .icon { color: var(--brand-forest); flex: none; }

.snippet-trip-features .trip-feature__link {
  font-weight: 600;
  color: var(--brand-forest);
  text-decoration: none;
}

.snippet-trip-features .trip-feature__link:hover { text-decoration: underline; }

.snippet-trip-features .trip-feature__shot { margin: 0; }

.snippet-trip-features .trip-feature__image {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--brand-line);
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(41, 46, 51, 0.1), 0 4px 10px rgba(41, 46, 51, 0.06);
}

.snippet-trip-features .trip-feature__shot--phone {
  justify-self: center;
  width: min(100%, 17rem);
}

.snippet-trip-features .trip-feature__shot--phone .trip-feature__image {
  border: 8px solid var(--brand-charcoal);
  border-radius: 28px;
}

@media (max-width: 768px) {
  .snippet-trip-features { padding: 2.5rem 1rem 3rem; }

  .snippet-trip-features .trip-features__steps {
    justify-content: flex-start;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
  }

  .snippet-trip-features .trip-feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 2rem 0;
  }

  .snippet-trip-features .trip-feature--flip .trip-feature__text { order: 0; }
}

/* === Features page: the trip features in full, each followed by its guides === */

.features-page {
  margin: -1.5rem -1rem;
  background: var(--brand-paper);
  color: var(--brand-ink);
}

.features-page .blog-head {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem 0;
}

.features-page .trip-feature__title[id] { scroll-margin-top: 5rem; }

.snippet-trip-features .trip-feature__guides {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.snippet-trip-features .trip-feature__guides-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-ink-muted);
}

.features-page__closing {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 3rem 1.5rem 4rem;
  border-top: 1px solid var(--brand-line-soft);
  text-align: center;
}

.features-page__note {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--brand-ink-muted);
}

@media (max-width: 768px) {
  /* Matches .container's padding at this breakpoint, as .home-page does. */
  .features-page { margin: -1rem -0.75rem; }

  .features-page .blog-head { padding: 2rem 1rem 0; }
}

@media (max-width: 480px) {
  .features-page { margin: -0.75rem -0.625rem; }
}
/* === Blog — index and article templates ===
   application.css loads last: rules here need a class it does not define or an
   ancestor scope. `.tag` is defined there; override it only through an ancestor. */

/* === Blog index === */

.articles-index {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Page head ── */
:is(.articles-index, .guides-index, .features-page) .blog-head {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 2.25rem;
}

:is(.articles-index, .guides-index, .features-page) .blog-head__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--brand-forest);
}

:is(.articles-index, .guides-index, .features-page) .blog-head__eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  flex-shrink: 0;
  background: var(--brand-sun);
}

:is(.articles-index, .guides-index, .features-page) .blog-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--brand-ink);
}

:is(.articles-index, .guides-index, .features-page) .blog-head__subtitle {
  margin: 0;
  max-width: 62ch;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--brand-ink-muted);
}

/* ── Grid ── */
.articles-index .articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  margin: 0 0 3rem;
}

.articles-index .article-card {
  display: flex;
  flex-direction: column;
}

.articles-index .article-card__image {
  height: 180px;
  overflow: hidden;
  background: var(--brand-paper-sunken);
}

.articles-index .article-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.articles-index .article-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-grow: 1;
  padding: 1.375rem;
}

.articles-index .article-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
}

.articles-index .article-card__title,
.articles-index .article-card__excerpt {
  margin: 0;
}

.articles-index .article-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.375rem;
}

/* ── Pagination (Pagy renders its own markup) ── */
.articles-index .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding-bottom: 3rem;
}

.articles-index .pagination a,
.articles-index .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.875rem;
  text-decoration: none;
}

.articles-index .pagination a:hover {
  border-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
}

.articles-index .pagination .current {
  border-color: var(--primary-dark);
  background: var(--primary);
  color: var(--text-on-primary);
  font-weight: 600;
}

.articles-index .pagination .gap {
  border-color: transparent;
  background: none;
}

/* ── Guides link under the blog filters ── */
.articles-index .article-filters__guides {
  margin: -1rem 0 1.75rem;
  font-size: 0.9375rem;
  color: var(--brand-ink-muted);
}

.articles-index .article-filters__guides-link {
  font-weight: 600;
  color: var(--brand-forest);
  text-decoration: none;
}

.articles-index .article-filters__guides-link:hover { text-decoration: underline; }

/* === Guides list (/guides) and the guides under each feature (/features) === */

.guides-index {
  max-width: 800px;
  margin: 0 auto;
}

.guides-index .guide-group { margin-bottom: 2.25rem; }

.guides-index .guide-group__title {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--brand-ink);
  scroll-margin-top: 5rem;
}

.guide-group__count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-ink-subtle);
}

.guide-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--brand-line);
}

.guide-list li { border-bottom: 1px solid var(--brand-line); }

.guide-list__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.625rem 0.25rem;
  color: var(--brand-ink);
  text-decoration: none;
}

.guide-list__link .icon { flex: none; color: var(--brand-forest); }

.guide-list__link:hover { color: var(--brand-forest-dark); }

.guide-list__link:hover span { text-decoration: underline; }

.guide-list__more summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--brand-forest);
  cursor: pointer;
}

.guide-list__more[open] summary { display: none; }

/* ── Breadcrumb above an article ── */
.article-breadcrumb {
  max-width: 1120px;
  margin: 0 auto 1.25rem;
  font-size: 0.875rem;
}

.article-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--brand-ink-subtle);
}

.article-breadcrumb li + li::before {
  content: '›';
  margin-right: 0.5rem;
  color: var(--brand-ink-faint);
}

.article-breadcrumb a {
  color: var(--brand-forest);
  text-decoration: none;
}

.article-breadcrumb a:hover { text-decoration: underline; }

/* The guide header and the trip hero bleed to the top of the page when they come first. */
.article-breadcrumb + .guide-page .guide-header,
.article-breadcrumb + .article-show--trip-review .trip-hero { margin-top: 0; }

/* === Article show — shared across the four templates === */

.article-show {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.article-header {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 2rem;
}

.article-header__meta {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.875rem;
}

.article-header__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.5vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--brand-ink);
}

.article-header__excerpt {
  margin: 0;
  max-width: 58ch;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--brand-ink-muted);
}

.article-header__tags,
.article-footer__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.article-footer__tags {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* ── Byline and date ── */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.article-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.article-meta__item + .article-meta__item::before {
  content: '·';
  margin-right: 0.6rem;
  color: var(--brand-line-sunken);
}

.article-tags__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.article-hero {
  width: 100%;
  margin: 2rem 0;
  border: 1px solid var(--border);
  overflow: hidden;
}

.article-hero img {
  display: block;
  width: 100%;
  height: auto;
}

.article-content {
  margin: 2rem 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.article-content h2 {
  margin: 2rem 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.875rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--brand-ink);
}

.article-content .trix-content div:has(> strong:only-child) {
  margin-top: 1.75rem;
}

.article-footer {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.article-footer__tags + .article-footer {
  margin-top: 1.25rem;
  padding-top: 0;
  border-top: 0;
}

/* === HowTo (guide) template === */

.guide-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 0 4rem;
}

/* ── Header banner ── */
.guide-header {
  background: var(--surface-dark);
  margin: -1.5rem -1rem 2.5rem;
  padding: 3rem 2.5rem 2.5rem;
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
}

.guide-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(252, 251, 244, 0.1) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.guide-header__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.125rem;
  max-width: 1080px;
  margin: 0 auto;
}

/* Sun only as a hairline or as text on charcoal (4.9:1), never behind light text. */
.guide-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.3125rem 0.875rem;
  border: 1px solid var(--brand-sun);
  color: var(--brand-sun);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.guide-header__title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 2.875rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--brand-paper);
}

.guide-header .article-meta {
  color: var(--text-on-dark-meta);
}

.guide-header .article-meta__item + .article-meta__item::before {
  color: inherit;
}

/* ── Two-column layout ─────────────────────────────────────── */
.guide-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

/* ── Sidebar TOC ───────────────────────────────────────────── */
.guide-sidebar {
  position: sticky;
  top: 1.5rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}

.guide-toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  padding: 1.125rem 1rem;
}

.guide-toc__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.guide-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.guide-toc__list li a {
  display: block;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  line-height: 1.35;
}

.guide-toc__list li a:hover {
  color: var(--primary-dark);
  border-left-color: var(--primary);
  background: var(--primary-light);
}

.guide-toc__list li.active > a {
  color: var(--primary-dark);
  border-left-color: var(--primary);
  background: var(--primary-light);
  font-weight: 600;
}

.guide-toc__list li.guide-toc__sub > a,
.guide-toc__list li.guide-toc__step > a {
  padding-left: 1.25rem;
  font-size: 0.775rem;
  color: var(--text-muted);
}

.guide-toc__list li.guide-toc__sub.active > a,
.guide-toc__list li.guide-toc__sub > a:hover,
.guide-toc__list li.guide-toc__step.active > a,
.guide-toc__list li.guide-toc__step > a:hover {
  color: var(--primary-dark);
}

/* ── Intro callout ─────────────────────────────────────────── */
.guide-intro {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
}

.guide-intro__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  color: var(--primary);
  margin-top: 0.1rem;
}

.guide-intro p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--primary-dark);
  line-height: 1.6;
}

/* ── Guide body ────────────────────────────────────────────── */
/* The body is limited to the blocks UserGuides::Checker allows. */
.guide-body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.guide-body p {
  margin: 0 0 1.25rem;
}

.guide-body h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  margin: 2.25rem 0 0.875rem;
}

.guide-body h2:first-child { margin-top: 0; }

.guide-body h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 1.75rem 0 0.5rem;
}

.guide-body strong {
  color: var(--text-primary);
  font-weight: 600;
}

.guide-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface-sunken);
  padding: 1px 5px;
}

.guide-body ol {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.5rem 0 1.5rem;
  padding-left: 1.375rem;
}

.guide-body ol li {
  line-height: 1.7;
}

.guide-figure {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 1.5rem 0 1.75rem;
}

.guide-figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
}

.guide-body .guide-figure figcaption {
  margin-top: 0;
}

.guide-callout {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 1rem;
  line-height: 1.6;
}

.guide-callout p {
  margin: 0;
}

.guide-callout__icon {
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.guide-callout--warning {
  border-left-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-text);
}

/* ── Legacy bodies ──
   Styles guide_enhancer_controller's enhanceLegacyBody output; remove with it. */

.guide-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  min-width: 1.9rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text-on-primary);
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.guide-screenshot {
  margin: 1.25rem 0 1.5rem !important;
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(41, 46, 51, 0.09);
  overflow: hidden;
  position: relative;
}

.guide-screenshot::before {
  content: '● ● ●';
  display: block;
  background: var(--surface-sunken);
  color: var(--text-disabled);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.guide-screenshot img {
  display: block;
  width: 100%;
  height: auto;
}

.guide-tip {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint);
  border-left: 4px solid var(--accent);
  padding: 0.8rem 1rem;
  margin: 0.5rem 0 1.25rem;
  font-size: 0.9rem;
  color: var(--accent-text);
  line-height: 1.55;
}

.guide-tip__icon { font-size: 1rem; flex-shrink: 0; margin-top: 0.1rem; }

.guide-body ul {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.5rem 0 1.5rem;
}

.guide-body ul li {
  padding: 0.5rem 0.875rem 0.5rem 2.25rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  position: relative;
  font-size: 0.95rem;
}

.guide-body ul li::before {
  content: '✓';
  position: absolute;
  left: 0.75rem;
  top: 0.55rem;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.8rem;
}

/* ── Related Guides section ────────────────────────────────── */
.guide-related-list {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.75rem 0 1.5rem;
}

/* Scoped under .guide-body to outrank the checklist's `.guide-body ul li` ✓. */
.guide-body .guide-related-list li {
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  position: relative;
  font-size: 0.95rem;
  transition: all 0.15s ease;
}

.guide-related-list li:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(41, 46, 51, 0.08);
  transform: translateX(2px);
}

.guide-related-list a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

.guide-related-list a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.guide-body .guide-related-list li::before {
  content: '→';
  position: absolute;
  left: 0.85rem;
  top: 0.75rem;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
}

/* === Trip report template === */

.article-show--trip-review .trip-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin: -2rem -1rem 0;
  min-height: 400px;
  background: var(--surface-sunken);
  overflow: hidden;
}

.article-show--trip-review .trip-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pixel stops, not percentages, so contrast where the text starts does not
   depend on title length. `transparent → 0.88` left the first line at 2.59:1. */
.article-show--trip-review .trip-hero__overlay {
  position: relative;
  width: 100%;
  padding: 4.5rem 2rem 2rem;
  background: linear-gradient(
    to bottom,
    rgba(41, 46, 51, 0) 0,
    rgba(41, 46, 51, 0.45) 4.5rem,
    rgba(41, 46, 51, 0.62) 7.5rem,
    rgba(41, 46, 51, 0.92) 100%
  );
}

.article-show--trip-review .trip-hero__overlay .article-header {
  gap: 0.875rem;
  margin: 0;
}

.article-show--trip-review .trip-hero__overlay .article-header__title {
  max-width: 20ch;
  color: var(--brand-paper);
}

/* Sun carries dark text only — white on sun is 2.81:1. */
.article-show--trip-review .trip-hero__overlay .article-type {
  background: var(--accent);
  color: var(--text-on-accent);
}

.trip-highlights {
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  padding: 1.125rem 1.375rem;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
}

.trip-highlights .article-meta {
  color: var(--primary-dark);
  font-weight: 600;
}

.trip-highlights .article-meta__item + .article-meta__item::before {
  color: inherit;
}

.trip-meta__summary {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--primary-dark);
}

/* === Gear review template === */

/* Sun tint behind sun text, never the other way round. */
.gear-review-summary {
  background: var(--accent-tint);
  border-left: 4px solid var(--accent);
  padding: 1.125rem 1.375rem;
  margin: 1.5rem 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--accent-text);
}

.gear-review-summary p {
  margin: 0;
  color: inherit;
}

/* === General template === */

.article-content dl,
.guide-body dl {
  display: flex;
  flex-direction: column;
  margin: 2rem 0;
  border-top: 1px solid var(--border);
}

.article-content dt,
.guide-body dt {
  padding-top: 1.375rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
}

.article-content dd,
.guide-body dd {
  margin: 0;
  padding: 0 0 1.375rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.03125rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

@media (min-width: 700px) {
  /* No column gap: the term's right padding stands in, so the two cells' bottom
     borders meet as one rule. */
  .article-show--general .article-content dl {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .article-show--general .article-content dt {
    padding: 1.375rem 1.625rem 1.375rem 0;
    border-bottom: 1px solid var(--border);
  }

  .article-show--general .article-content dd {
    padding: 1.375rem 0;
  }
}

/* === Image sources and the disclaimer === */

.article-show .trix-content figcaption,
.guide-body figcaption {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.article-show .trix-content figcaption a,
.guide-body figcaption a {
  color: var(--primary-dark);
  text-decoration: underline;
  word-break: break-word;
}

.article-show .trix-content figcaption a:hover,
.guide-body figcaption a:hover {
  opacity: 0.8;
}

.article-disclaimer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--divider);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* override the <em> wrapping added by seed files */
.article-disclaimer em {
  font-style: normal;
}

/* === Catalog sections composed into an article === */
.article-sections {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

.article-sections__heading {
  margin: 0 0 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
}

.article-section {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
}

.article-section:last-child {
  border-bottom: 0;
}

.article-section__image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  object-fit: cover;
}

.article-section__title {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
}

/* === Responsive === */

@media (max-width: 900px) {
  .guide-layout {
    grid-template-columns: 1fr;
  }

  .guide-sidebar {
    position: static;
    max-height: none;
    display: none;
  }
}

@media (max-width: 768px) {
  .guide-header {
    margin: -1rem -0.75rem 2rem;
    padding: 2rem 1.25rem 1.75rem;
  }

  .articles-index .articles-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .article-show--trip-review .trip-hero {
    margin: -2rem -0.75rem 0;
    min-height: 300px;
  }

  .article-show--trip-review .trip-hero__overlay {
    padding: 4.5rem 1.25rem 1.5rem;
  }
}

@media (max-width: 640px) {
  .article-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .guide-header {
    margin: -0.75rem -0.625rem 1.5rem;
    padding: 1.75rem 1rem 1.5rem;
  }

  .article-show--trip-review .trip-hero {
    margin: -2rem -0.625rem 0;
  }
}
/* ---- Page Snippets ---- */

/* ── Base ── */
.snippet {
  padding: 4rem 1rem;
}

/* ── Banner ── */
.snippet-banner {
  text-align: center;
  background: var(--primary-dark);
  color: #fff;
}

.snippet-banner__heading {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 0.5rem;
  color: #fff;
}

.snippet-banner__subheading {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
}

.snippet-banner__body {
  max-width: 720px;
  margin: 0 auto 1.5rem;
  line-height: 1.7;
}

.snippet-banner__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.snippet-banner .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
}

/* ── Teaser Grid ── */
.snippet-teaser-grid {
  background: var(--bg);
}

/* ── Article Teasers ── */
.snippet-article-teasers {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ── Button ── */
.snippet-button {
  text-align: center;
  padding: 3rem 1rem;
}

/* ── HTML Block ── */
.snippet-html-block {
  max-width: 800px;
  margin: 0 auto;
}

.snippet-html-block__heading {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  margin-bottom: 0.5rem;
  text-align: center;
}

.snippet-html-block__subheading {
  color: var(--secondary);
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
  text-align: center;
}

.snippet-html-block__body {
  line-height: 1.7;
}
/* === Gear CSV import wizard === */

/* --- Shared: instruction cards --- */
.instructions-card {
  background: var(--info-light);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  margin-bottom: 2rem;
  border-left: 4px solid var(--info);
}

.instructions-card h3 {
  margin-top: 0;
  color: var(--info);
}

.instructions-card ul {
  margin: 0.5rem 0 0 1.2rem;
}

.instructions-card--warn {
  background: var(--warning-light);
  border-left: 4px solid var(--warning);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}

.instructions-card--warn h3 {
  margin-top: 0;
  color: var(--warning);
}

/* --- Import index / history --- */
/* .data-table lives in data_table.css, required before this file, so the rules
   below win at equal specificity. */

.gear-imports-index .page-header {
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}

/* Baseline-aligned only while the header is a row: application.css stacks it
   below 768px, and an unconditional flex-end would outrank that. */
@media (min-width: 769px) {
  .gear-imports-index .page-header { align-items: flex-end; }
}

.gear-imports-index .page-header h1 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.gear-imports-index .page-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
  max-width: 70ch;
}

.gear-imports-table-scroll {
  overflow-x: auto;
}

.gear-imports-table {
  border: 1px solid var(--border);
  min-width: 520px;
}

.gear-imports-table td {
  color: var(--text-secondary);
  vertical-align: middle;
}

.gear-imports-table th.col-num,
.gear-imports-table td.col-num {
  text-align: right;
}

.gear-imports-table__file {
  font-weight: 600;
  color: var(--text-primary);
}

.gear-imports-table__count {
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.gear-imports-table .col-actions {
  width: 1%;
  white-space: nowrap;
}

/* --- Preview page --- */
.preview-summary {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.summary-card {
  flex: 1;
  min-width: 120px;
  padding: 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.summary-card--new  { background: var(--success-light); border-color: rgba(22,163,74,0.3); }
.summary-card--dup  { background: var(--warning-light);  border-color: rgba(251,191,36,0.3); }
.summary-card--skip { background: var(--surface-sunken); }

.summary-number { font-size: 2rem; font-weight: 700; }
.summary-label  { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.25rem; }

.dup-options { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }

.dup-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.dup-option:has(input:checked) {
  border-color: var(--warning);
  background: var(--warning-light);
}

.dup-option div   { display: flex; flex-direction: column; gap: 0.2rem; }
.dup-option strong { font-size: 0.95rem; }
.dup-option span   { font-size: 0.85rem; color: var(--text-secondary); }

.preview-section {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}

.preview-section h3 { margin-top: 0; }
.preview-section--dup { border-left: 4px solid var(--warning); }

.preview-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

.preview-table th,
.preview-table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.preview-table th {
  background: var(--surface-sunken);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  position: sticky;
  top: 0;
}

.preview-table tr:nth-child(even) { background: var(--surface-sunken); }

/* --- Column–field mapping pages (map & resolve_categories) --- */
.mapping-container { max-width: 1000px; margin: 0 auto; }

.categories-reference {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  margin-bottom: 2rem;
}

.categories-reference h4 { margin-top: 0; }

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.category-chip {
  background: var(--surface);
  padding: 0.4rem 0.85rem;
  border-radius: 0;
  border: 1px solid var(--border);
  font-size: 0.875rem;
}

.mapping-form {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.mapping-header {
  display: grid;
  grid-template-columns: 1fr 50px 1fr;
  gap: 1rem;
  padding: 1rem;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
  font-weight: 600;
  text-align: center;
}

.mapping-grid { margin-bottom: 2rem; }

.mapping-row {
  display: grid;
  grid-template-columns: 1fr 50px 1fr;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.mapping-row:hover { background: var(--surface-raised); }

.column-name  { display: flex; flex-direction: column; gap: 0.25rem; }
.sample-value { font-size: 0.85rem; color: var(--text-secondary); font-style: italic; }

.required-badge {
  font-size: 0.78rem;
  color: #fff;
  background: var(--danger);
  padding: 0.1rem 0.45rem;
  border-radius: 0;
  font-weight: 600;
}

.arrow {
  text-align: center;
  font-size: 1.5rem;
  color: var(--primary);
}

.field-select { display: flex; flex-direction: column; }

.mapping-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--surface);
  color: var(--text-primary);
  transition: border-color var(--transition);
}

.mapping-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .mapping-row,
  .mapping-header {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .arrow { transform: rotate(90deg); }
  .preview-summary { flex-direction: column; }
}

/* --- Misc --- */
.header-row-section {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}
/* === Statistics ===
   Scoped to .statistics-index: application.css loads last, so unscoped rules
   lose to its .stat-card / .dashboard-section / .stat-bar base rules. */

.statistics-index .page-header {
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
}

/* Baseline-aligned only while the header is a row: application.css stacks it
   below 768px, and an unconditional flex-end would outrank that. */
@media (min-width: 769px) {
  .statistics-index .page-header { align-items: flex-end; }
}

.statistics-index .page-header h1 {
  margin: 0;
}

.statistics-index .page-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

/* ── Summary cards ─────────────────────────────────────────────────── */
.statistics-index .stats-row {
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}

.statistics-index .stat-card {
  border-left: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  box-shadow: 0 4px 8px rgba(41, 46, 51, 0.05), 0 1px 3px rgba(41, 46, 51, 0.04);
}

/* Ink-muted, not subtle: muted text loses AA on the sunken ground (see --brand-ink-subtle). */
.statistics-index .stat-card h3 {
  color: var(--text-secondary);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}

.statistics-index .stat-number {
  font-size: 2.375rem;
  margin: 0;
}

.statistics-index .stat-number__unit {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0;
}

/* ── Sections ──────────────────────────────────────────────────────── */
.statistics-index .dashboard-section {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 2.25rem;
}

.statistics-index .section-header {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0.9rem;
}

.statistics-index .section-header h2 {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 0;
  color: var(--text-primary);
}

.statistics-index .data-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(41, 46, 51, 0.05), 0 1px 3px rgba(41, 46, 51, 0.04);
}

.statistics-index .data-table th {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.statistics-index .data-table td {
  color: var(--text-secondary);
  border-bottom-color: var(--divider);
  vertical-align: middle;
}

.statistics-index .data-table td.stat-row-label {
  color: var(--text-primary);
  font-weight: 600;
}

.statistics-index .data-table td.col-weight {
  color: var(--text-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.statistics-index .data-table tr:hover td {
  background: var(--surface-raised);
}

.statistics-index .col-bar { width: 30%; }

/* ── Bars ──────────────────────────────────────────────────────────── */
.statistics-index .stat-bar-wrap {
  gap: 0.75rem;
}

.statistics-index .stat-bar-track {
  flex: 1 1 auto;
  height: 8px;
  background: var(--divider);
  overflow: hidden;
}

.statistics-index .stat-bar {
  height: 100%;
  min-width: 0;
  border-radius: 0;
  background: var(--primary);
}

/* Trip bars use the WeightBandHelper#weight_band bands. */
.statistics-index .stat-bar--share   { background: var(--primary); }
.statistics-index .stat-bar--under   { background: var(--primary); }
.statistics-index .stat-bar--close   { background: var(--accent); }
.statistics-index .stat-bar--over    { background: var(--danger); }
.statistics-index .stat-bar--unknown { background: var(--border-sunken); }

.statistics-index .stat-bar-label {
  flex: 0 0 auto;
  min-width: 3rem;
  text-align: right;
  font-size: 0.84rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.statistics-index .stat-caption {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.statistics-index .empty-state {
  margin: 0;
  text-align: left;
  padding: 1.25rem 0;
}

@media (max-width: 768px) {
  .statistics-index .dashboard-section { overflow-x: auto; }
  .statistics-index .section-header { justify-content: flex-start; }
  .statistics-index .section-header h2 { text-align: left; }
  .statistics-index .data-table { min-width: 560px; }
  .statistics-index .col-bar { width: 36%; }
  .statistics-index .stat-bar-label { min-width: 2.5rem; }
}
/* === Pricing, billing and profile === */

/* --- Pricing Page --- */
.pricing-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.pricing-header {
  text-align: center;
  margin-bottom: 3rem;
}

.pricing-header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }

.pricing-subtitle {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

/* Shown only when the `pricing` page snippet is missing. */
.pricing-unavailable {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--text-secondary);
}

.pricing-unavailable h1 {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.pricing-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.pricing-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.pricing-card--featured {
  border-color: var(--primary);
  border-width: 2px;
  box-shadow: 0 4px 20px rgba(59, 122, 80, 0.18);
}

.pricing-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  padding: 0.25rem 1.1rem;
  border-radius: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pricing-card__header h2 { font-size: 1.4rem; margin: 0 0 0.5rem; }

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.pricing-card__price .price { font-size: 2.5rem; font-weight: 700; }
.pricing-card__price .interval { color: var(--text-secondary); }

.pricing-card__savings {
  margin: 0.35rem 0 0.5rem;
}

.pricing-card__monthly {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.savings {
  background: var(--success-light);
  color: var(--success);
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.pricing-card__features .feature {
  padding: 0.4rem 0;
  font-size: 0.95rem;
}

.feature--included::before { content: '✓ '; color: var(--success); font-weight: 700; }
.feature--excluded::before { content: '✗ '; color: var(--text-muted); }
.feature--note::before     { content: '• '; color: var(--warning); }

.coming-soon {
  font-size: 0.7rem;
  background: var(--warning-light);
  color: var(--warning);
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-sm);
}

.pricing-card__cta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.btn--current {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  text-align: center;
  font-weight: 500;
}

.btn--sm { font-size: 0.85rem; padding: 0.4rem 1rem; }

/* --- Billing Page --- */
.billing-page {
  padding: 0 1rem;
}

.plan-badge {
  display: inline-block;
  margin: 0.5rem 0 1rem;
}

.plan-badge--free { background: var(--surface-sunken); color: var(--text-secondary); }
.plan-badge--pro  { background: var(--info-light);     color: var(--info); }

.billing-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.billing-upgrade {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 1rem 0;
}

.billing-upgrade strong {
  width: 100%;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.billing-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

/* --- Ad slot --- */
.ad-slot {
  margin: 1.5rem 0;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.ad-slot__bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ad-slot__remove {
  color: var(--text-muted);
  text-decoration: underline;
  text-transform: none;
  letter-spacing: normal;
}

/* A responsive display unit renders at most 250px tall at the widths we serve,
   so reserving it up front avoids layout shift. */
.ad-slot__unit,
.ad-slot__unit .adsbygoogle {
  display: block;
  min-height: 250px;
}

@media (max-width: 768px) {
  /* Extra room so the sticky FAB (56px, 1rem above the bottom nav) does not
     cover the slot's corner when scrolled to the end. */
  .ad-slot--trips,
  .ad-slot--gear_items {
    margin-bottom: calc(var(--bottom-nav-h) + 2rem);
  }
}

/* --- Profile Page --- */
.profile-page {
  padding: 0 1rem;
}

.profile-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.profile-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-field:last-child { border-bottom: none; }

.profile-label {
  color: var(--text-secondary);
}

.profile-stats {
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat {
  flex: 1;
  text-align: center;
  border: 1px solid var(--border);
}

.stat__value {
  display: block;
}

.stat__label {
  margin-top: 0.25rem;
}

.profile-actions { display: flex; gap: 0.75rem; }

/* --- Profile Edit Form --- */
.profile-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.form-section {
  border: 1px solid var(--border);
  margin: 1rem 0;
}

.form-section legend {
  font-weight: 600;
  padding: 0 0.5rem;
  font-size: 0.95rem;
}

.form-hint {
  font-weight: 400;
  color: var(--text-muted);
}

/* form-actions deferred to application.css */
/* === Design options mockup === */

/* ── Page layout ─────────────────────────────────────────── */
.designs-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.designs-hero {
  text-align: center;
  margin-bottom: 2.5rem;
}

/* ── Outdoor hero backdrop ───────────────────────────────── */
.designs-hero--outdoor {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: 2.5rem;
}

.designs-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.designs-hero__mountains {
  width: 100%;
  height: 100%;
  display: block;
}

.designs-hero__content {
  position: relative;
  z-index: 1;
  padding: 2.5rem 1.5rem 0.75rem;
}

.designs-hero--outdoor h1 {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.designs-hero--outdoor p {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.designs-hero--outdoor .designs-filter-bar {
  position: relative;
  z-index: 1;
  padding: 0 1.5rem 1.25rem;
}

.designs-hero--outdoor .designs-filter-btn {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--text-primary);
  backdrop-filter: blur(4px);
}

.designs-hero--outdoor .designs-filter-btn:hover,
.designs-hero--outdoor .designs-filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.designs-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.designs-hero p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 640px;
  margin: 0 auto 1.25rem;
}

.designs-filter-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.designs-filter-btn {
  padding: 0.35rem 0.9rem;
  border-radius: 0;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition);
  font-weight: 500;
}

.designs-filter-btn:hover,
.designs-filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ── Grid ────────────────────────────────────────────────── */
.designs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1.75rem;
}

/* ── Design card ─────────────────────────────────────────── */
.design-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 2px solid transparent;
  transition: box-shadow var(--transition-slow), border-color var(--transition-slow), transform var(--transition-slow);
  display: flex;
  flex-direction: column;
}

.design-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.design-card.is-current {
  border-color: var(--primary);
}

/* ── Mockup preview window ───────────────────────────────── */
.mockup-window {
  position: relative;
  height: 240px;
  overflow: hidden;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.mockup-chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: #e0e0e0;
  border-bottom: 1px solid #c8c8c8;
}

.mockup-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.mockup-dot:nth-child(1) { background: #ff5f57; }
.mockup-dot:nth-child(2) { background: #febc2e; }
.mockup-dot:nth-child(3) { background: #28c840; }

.mockup-url {
  flex: 1;
  height: 16px;
  background: #fff;
  border-radius: 0;
  margin-left: 8px;
  font-size: 9px;
  color: #777;
  padding: 0 6px;
  line-height: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mockup-body {
  position: relative;
  height: calc(100% - 31px);
  overflow: hidden;
  font-size: 0;
}

/* ── Mini UI templates (scale: 0.45) ─────────────────────── */
.mockup-ui {
  position: absolute;
  inset: 0;
  transform-origin: top left;
  transform: scale(0.45);
  width: 222.22%;   /* 100% / 0.45 = 222.22% — counteracts the scale so content fills the container */
  height: 222.22%;
  font-size: 14px;
  line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}

/* ── Shared mini-UI primitives ───────────────────────────── */
.mu-topbar {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 44px;
  gap: 16px;
  font-weight: 600;
  font-size: 13px;
}

.mu-logo { font-weight: 800; font-size: 14px; letter-spacing: -0.3px; }

.mu-topbar-links {
  display: flex;
  gap: 14px;
  font-size: 11px;
  opacity: 0.85;
}

.mu-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
}

.mu-btn {
  padding: 4px 10px;
  border-radius: 0;
  font-size: 10px;
  font-weight: 600;
  border: none;
  cursor: default;
}

.mu-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff40;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.mu-layout {
  display: flex;
  height: calc(100% - 44px);
}

.mu-sidebar {
  width: 160px;
  flex-shrink: 0;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mu-nav-item {
  padding: 7px 10px;
  border-radius: 0;
  font-size: 11px;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.mu-nav-item.active { font-weight: 700; }

.mu-content {
  flex: 1;
  padding: 14px;
  overflow: hidden;
}

.mu-stats-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.mu-stat {
  flex: 1;
  border-radius: 0;
  padding: 8px 10px;
}

.mu-stat-num {
  font-size: 18px;
  font-weight: 800;
  margin-top: 2px;
}

.mu-stat-label {
  font-size: 9px;
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mu-table {
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  font-size: 10px;
}

.mu-table-head {
  display: flex;
  padding: 5px 8px;
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  gap: 6px;
}

.mu-table-row {
  display: flex;
  padding: 5px 8px;
  align-items: center;
  gap: 6px;
  border-top: 1px solid transparent;
}

.mu-checkbox {
  width: 11px;
  height: 11px;
  border-radius: 0;
  border: 1.5px solid currentColor;
  flex-shrink: 0;
}

.mu-bulk-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 0;
  font-size: 9px;
  font-weight: 600;
  margin-bottom: 6px;
}

.mu-gradient-top { background: var(--mu-gradient, linear-gradient(135deg,#7c3aed,#db2777)); }

/* ── Card body (info below mockup) ───────────────────────── */
.design-card-body {
  padding: 1.1rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.design-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.design-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.design-current-badge {
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--primary-light);
  color: var(--primary);
  padding: 0.15rem 0.55rem;
  border-radius: 0;
  white-space: nowrap;
  border: 1px solid var(--primary);
  flex-shrink: 0;
}

.design-card-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0.65rem;
}

.design-card-highlight {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 0.85rem;
  flex: 1;
}

.design-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.design-tag {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0;
  background: var(--surface-sunken);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-weight: 500;
}

.design-card-actions {
  display: flex;
  gap: 0.6rem;
}

.design-preview-btn {
  flex: 1;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.design-preview-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.design-apply-btn {
  flex: 1;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}

.design-apply-btn:hover { background: var(--primary-dark); }
.design-apply-btn:disabled { background: var(--text-disabled); cursor: default; }

/* ── Full-screen preview overlay ─────────────────────────── */
.design-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.design-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.design-overlay-inner {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: min(90vw, 960px);
  max-height: 88vh;
  overflow: auto;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.design-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  gap: 1rem;
  flex-shrink: 0;
}

.design-overlay-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.design-overlay-close {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  transition: color var(--transition);
  padding: 0 0.25rem;
}

.design-overlay-close:hover { color: var(--text-primary); }

.design-overlay-mockup {
  position: relative;
  overflow: hidden;
  background: #d0d0d0;
  min-height: 480px;
  flex-shrink: 0;
}

.design-overlay-mockup .mockup-ui {
  transform: scale(0.75);
  width: 133.33%;
  height: 133.33%;
}

.design-overlay-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 1rem;
}

.design-overlay-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.design-overlay-meta strong {
  color: var(--text-primary);
}

/* ── Notification toast ──────────────────────────────────── */
.designs-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9500;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 0.85rem 1.25rem;
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem;
  color: var(--text-primary);
  max-width: 320px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.designs-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* ── Colour swatch strip ─────────────────────────────────── */
.design-swatches {
  display: flex;
  gap: 4px;
  margin-bottom: 0.7rem;
}

.design-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .designs-grid {
    grid-template-columns: 1fr;
  }

  .designs-hero h1 { font-size: 1.5rem; }

  .design-overlay-mockup { min-height: 300px; }

  .design-overlay-mockup .mockup-ui {
    transform: scale(0.45);
    width: 222.22%;
    height: 222.22%;
  }
}
/* === Packs === */

/* ── Tab bar above planner columns ───────────────────────────────────── */
.planner-tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0 0.6rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 0;
  flex-wrap: wrap;
}

/* ── View tabs (right side of tab bar) ───────────────────────────────── */
.planner-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  flex-shrink: 0;
}

.planner-view-tab {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.planner-view-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.planner-view-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ── Trip Sub Navigation ─────────────────────────────────────────── */
.trip-sub-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.trip-sub-nav__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem 0.75rem;
  flex-wrap: wrap;
}
.trip-sub-nav__info { flex: 1; min-width: 0; }
.trip-sub-nav__title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trip-sub-nav__meta { font-size: 0.82rem; color: var(--text-muted); margin: 0; }
.trip-sub-nav__right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.trip-sub-nav__stats { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.trip-sub-nav__actions { display: flex; gap: 0.5rem; align-items: center; }
.trip-sub-nav__tabs {
  display: flex;
  overflow-x: auto;
  padding: 0 1.5rem;
  scrollbar-width: none;
  border-top: 1px solid var(--border);
}
.trip-sub-nav__tabs::-webkit-scrollbar { display: none; }

.trip-nav-link {
  display: inline-block;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
  flex-shrink: 0;
}
.trip-nav-link:hover { color: var(--text-primary); border-bottom-color: var(--border); }
.trip-nav-link--active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.trip-nav-link--pro::after {
  content: 'PRO';
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 3px;
  padding: 1px 3px;
  margin-left: 3px;
  vertical-align: super;
}

/* ── Overview page ────────────────────────────────────────────────── */
.trip-overview { padding: 1.5rem 0 2rem; }

.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.overview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.overview-card--full {
  grid-column: 1 / -1;
}

.overview-card__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.overview-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.overview-card__header .overview-card__title { margin: 0; }

.overview-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.overview-stat__value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.overview-stat__label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.overview-weight-bar {
  margin-top: 0.5rem;
}

.overview-weight-bar__label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

/* Deprecated — kept for other views */
.overview-info-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.overview-section {
  border-top: 1px solid var(--border);
  padding: 1rem 0;
  margin-top: 0.5rem;
}
.overview-section h3 {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

/* ── Sub-page wrappers — consistent padding ───────────────────────── */
.trip-sub-page { padding: 1.5rem 0 2rem; }

/* ── Planner page wrapper ─────────────────────────────────────────── */
.planner-page { padding: 1.5rem 0 2rem; }

/* ── Planner: category nav expands into tab bar, search on right ── */
.category-nav-bar--expand {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0;
}
.planner-tab-bar-search {
  flex-shrink: 0;
  width: 200px;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface);
}
.planner-tab-bar-search:focus { outline: none; border-color: var(--primary); }

@media print { .trip-sub-nav { display: none; } }

.planner-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  margin-bottom: 4px;
}

.planner-thumb--sm {
  width: 36px;
  height: 36px;
  margin-bottom: 0;
  margin-right: 8px;
  flex-shrink: 0;
}

.trip-gear-content {
  display: flex;
  align-items: flex-start;
}

.pack-card { border-top: 3px solid var(--primary); }

/* ── Pack card on the packs index ──
   Scoped to .pack-card-wrap: application.css loads last, so unscoped rules lose
   to the trip-card base rules there. */

.pack-card-wrap .pack-type-tag {
  background: var(--neutral-tint);
  color: var(--text-primary);
  font-weight: 700;
  border-radius: 0;
}

.pack-card-wrap .trip-date {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-secondary);
}

.pack-card-wrap .trip-weight-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.pack-card-wrap .trip-weight-value {
  font-weight: 700;
  color: var(--text-primary);
}

/* Sun is a background for dark text only, so "nearly there" reads in the on-tint ink. */
.pack-card-wrap .trip-weight-note {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.pack-card-wrap .trip-weight-note--close {
  color: var(--accent-text);
  font-weight: 600;
}

.pack-card-wrap .trip-weight-note--over {
  color: var(--danger);
  font-weight: 600;
}

/* The band comes from WeightBandHelper#weight_band, not Pack#weight_status. */
.pack-card-wrap .weight-bar { background: var(--divider); }
.pack-card-wrap .weight-progress--under { background: var(--primary); }
.pack-card-wrap .weight-progress--close { background: var(--accent); }
.pack-card-wrap .weight-progress--over  { background: var(--danger); }

.pack-type-badge {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--primary-light);
  color: var(--primary-dark);
  margin-left: 0.5rem;
  vertical-align: middle;
}

.pack-transport {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0.25rem 0 0.5rem;
}

.pack-load-trip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.pack-load-trip label {
  font-weight: 500;
  white-space: nowrap;
}

.form-control--inline {
  width: auto;
  min-width: 180px;
}

/* Doubled on purpose: application.css loads last, so its `.alert` would win
   every shared property at equal specificity. Don't drop back to one class. */
.alert.alert--warning {
  --alert-accent: var(--warning);

  background: var(--warning-light);
  border-color: var(--warning);
  color: #92400e;
}

.alert--warning strong { display: block; margin-bottom: 0.25rem; }
.alert--warning ul { margin: 0; padding-left: 1.25rem; }

/* ── Pack planner UX enhancements ──────────────────────────────────────── */

.qty-label {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.qty-input {
  width: 4rem;
  padding: 1px 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
  background: var(--surface);
  color: var(--text-primary);
  text-align: center;
  -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-edit-gear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 4px;
  border-radius: 4px;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.btn-edit-gear:hover {
  opacity: 1;
}

.available-gear-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.available-gear-header h2 {
  margin-bottom: 0;
}

.gear-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.35rem;
}

.btn-remove {
  background: none;
  cursor: pointer;
  color: var(--text-secondary);
}

.btn-remove:hover {
  color: var(--danger, #dc2626);
  border-color: var(--danger, #dc2626);
}

.pack-item-notes {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.btn-note {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.55;
  transition: opacity 0.15s;
  line-height: 1;
}

.btn-note:hover { opacity: 1; }

.note-text {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-secondary);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-input {
  font-size: 0.8rem;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-primary);
  width: 160px;
}

.available-gear-panel.drag-over-remove {
  outline: 2px dashed var(--primary, #4f46e5);
  outline-offset: -4px;
  background: var(--primary-light, #eef2ff);
  transition: background 0.15s;
}

/* ── View switcher ─────────────────────────────────────────────────────── */

.drag-drop-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

.pack-view-switcher {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.pack-view-label {
  font-weight: 600;
  white-space: nowrap;
}

.pack-view-select {
  min-width: 180px;
}

/* ── List view (shared: Packed Items + Unpacked Items) ─────────────────── */

.pack-list-view {
  width: 100%;
  overflow-x: auto;
}

.pack-list-header,
.pack-list-row {
  display: grid;
  grid-template-columns: 40px 2fr 2fr 3fr 60px 80px;
  gap: 0.5rem;
  align-items: center;
  padding: 0.4rem 0.5rem;
}

.pack-list-header--available,
.pack-list-row--available {
  grid-template-columns: 40px 3fr 2fr 80px;
}

.pack-list-header--available-items,
.pack-list-row--available-items,
.pack-list-row--pack-items {
  cursor: pointer;
  user-select: none;
}

.pack-list-header--available-items,
.pack-list-row--available-items {
  grid-template-columns: 28px 40px 3fr 2fr 2fr 80px 48px;
}

.available-item-check-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.available-item-check {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-radius: 3px;
  display: block;
  transition: background 0.12s, border-color 0.12s;
  flex-shrink: 0;
}

.pack-list-row--available-items.selected,
.pack-list-row--pack-items.selected {
  background: var(--primary-light, #f0f4ff);
}

.pack-list-row--available-items.selected .available-item-check,
.pack-list-row--pack-items.selected .available-item-check {
  background: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 8px;
}

.btn-quick-add {
  background: none;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  transition: background 0.12s, color 0.12s;
}

.btn-quick-add:hover {
  background: var(--primary);
  color: #fff;
}

.btn-quick-remove {
  background: none;
  border: 1.5px solid var(--danger, #dc2626);
  color: var(--danger, #dc2626);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  transition: background 0.12s, color 0.12s;
}

.btn-quick-remove:hover {
  background: var(--danger, #dc2626);
  color: #fff;
}

/* trip-gear adds .col-divider-badge--active while rows are ticked, so the
   shared selection bar fades in rather than toggling [hidden]. */
.available-items-multibar {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease, visibility 0.15s;
}

.available-items-multibar.col-divider-badge--active {
  visibility: visible;
  opacity: 1;
}


.pack-list-header--pack-items,
.pack-list-row--pack-items {
  grid-template-columns: 28px 40px 2fr 3fr 60px 80px 48px;
}

.pack-list-header--statistics,
.pack-list-row--statistics {
  grid-template-columns: 40px 3fr 2fr 60px 80px 100px;
}

.pack-list-header {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

.pack-list-row {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

.pack-list-row:hover {
  background: var(--surface-raised);
}

.pack-list-thumbnail {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.pack-list-icon {
  font-size: 1.5rem;
  line-height: 1;
  display: block;
  text-align: center;
}

.pack-list-thumb-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pack-list-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.pack-sort-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding: 0;
  text-align: left;
  transition: color 0.15s;
}

.pack-sort-btn:hover { color: var(--primary); }

.pack-sort-btn.asc::after  { content: " \2191"; }
.pack-sort-btn.desc::after { content: " \2193"; }

/* ── Optimize Weight — dedicated Pro page ──────────────────────────────── */

.optimize-weight-page {
  padding: 1.5rem 0 2rem;
}

.optimize-info-panel {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--color-primary, #2d6a4f);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem 1.25rem;
  margin-bottom: 2rem;
}

.optimize-info-panel > *:first-child {
  margin-top: 0;
}

.optimize-info-panel > *:last-child {
  margin-bottom: 0;
}

.optimize-info-panel__header {
  margin-bottom: 0.5rem;
}

.optimize-info-panel__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.optimize-info-panel__intro {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}

.optimize-info-panel__steps {
  margin: 0 0 0.6rem 1.1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.optimize-info-panel__steps li {
  font-size: 0.88rem;
  color: var(--text-secondary, var(--text-muted));
  line-height: 1.5;
}

.optimize-info-panel__note {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
}

.optimize-weight-summary {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.optimize-weight-stat {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.6rem 1.1rem;
  flex: 1;
  min-width: 110px;
}

.optimize-weight-stat__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}

.optimize-weight-stat__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.optimize-weight-section {
  margin-bottom: 1.5rem;
}

.optimize-weight-section__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.optimize-weight-section__header h2 {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0;
  flex-shrink: 0;
}

.optimize-cat-bar {
  flex: 1;
  height: 4px;
  background: var(--border-color);
  border-radius: 2px;
  overflow: hidden;
}

.optimize-cat-bar__fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.optimize-weight-section__pct {
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.optimize-weight-section__list {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.optimize-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  border-left: 3px solid transparent;
  padding-right: 0.75rem;
  transition: background 0.1s;
  min-width: 0;
}

.optimize-item-row:last-child { border-bottom: none; }
.optimize-item-row:hover { background: var(--surface-sunken); }

.optimize-item-row--high   { border-left-color: #dc2626; }
.optimize-item-row--medium { border-left-color: #ea8c00; }
.optimize-item-row--low    { border-left-color: var(--border-color); }

.optimize-item-row__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.optimize-item-row__thumb img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.optimize-item-row__content {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0;
}

.optimize-item-row__name {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.heaviest-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--warning, #f59e0b);
  color: #fff;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.optimize-item-row__meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.optimize-item-row__weight {
  text-align: right;
  flex-shrink: 0;
  padding: 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.optimize-item-row__weight-pct {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
}

.optimize-item-row__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

/* ── Add task circle button */
.btn-add-task {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.btn-add-task:hover {
  background: var(--primary);
  color: var(--text-on-primary);
}

.optimize-item-wrap--has-tasks .btn-add-task {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
}

.optimize-item-wrap--has-tasks .btn-add-task:hover {
  opacity: 0.85;
}

.optimize-item-form-panel {
  padding: 0.65rem 1rem 0.8rem;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-color);
  border-left: 3px solid var(--border-color);
}

.optimize-item-form-panel[hidden] {
  display: none;
}

/* ── Weight bar under each row ─────────────────────────────────────────── */
.optimize-item-bar {
  height: 3px;
  background: var(--border-color);
  overflow: hidden;
}

.optimize-item-bar__fill {
  height: 100%;
  transition: width 0.3s ease;
}

.optimize-item-bar__fill--high   { background: #dc2626; }
.optimize-item-bar__fill--medium { background: #ea8c00; }
.optimize-item-bar__fill--low    { background: var(--primary); }

/* ── Task count badge on toggle button ─────────────────────────────────── */
.optimize-task-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--primary);
  color: var(--text-on-primary, #fff);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.optimize-task-badge--hidden { display: none; }

/* ── Task list below weight bar ─────────────────────────────────────────── */
.optimize-task-list:empty { display: none; }

.optimize-task-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem 0.3rem 0.5rem;
  border-top: 1px solid var(--border-color);
  background: var(--surface-sunken);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.optimize-task-row__hook {
  color: var(--border-color);
  font-size: 0.75rem;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 0.35rem;
  user-select: none;
}

.optimize-task-row__priority {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.optimize-task-row__priority--high   { background: #dc2626; }
.optimize-task-row__priority--medium { background: #ea8c00; }
.optimize-task-row__priority--low    { background: var(--primary); }

.optimize-task-row__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  text-decoration: none;
}

.optimize-task-row__title:hover {
  color: var(--primary);
  text-decoration: underline;
}

.optimize-task-row__complete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.7rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.optimize-task-row__complete:hover {
  border-color: var(--success, #16a34a);
  background: var(--success, #16a34a);
  color: #fff;
}

/* ── Won't-optimize skip row ────────────────────────────────────────────── */
.optimize-item-wrap--skipped {
}

.optimize-all-done-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-success-bg, #d1fae5);
  color: var(--color-success, #059669);
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.optimize-skip-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.85rem;
}

.optimize-skip-row__check {
  color: var(--success, #16a34a);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.optimize-skip-row__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.optimize-skip-row__name {
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.optimize-skip-row__note {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.optimize-skip-row__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--success, #16a34a);
  white-space: nowrap;
  flex-shrink: 0;
}

.optimize-skip-row__undo {
  flex-shrink: 0;
}

/* ── "Won't optimize" divider inside panel ──────────────────────────────── */
.optimize-skip-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.6rem 0 0.4rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.optimize-skip-divider::before,
.optimize-skip-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

/* ── Improved badge (shown after all tasks complete) ────────────────────── */
.optimize-improved-badge {
  display: none;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--success, #16a34a);
  color: #fff;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.optimize-improved-badge--show {
  display: inline;
}

.optimize-redirect-hint {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

/* ── Option C: three-section layout ────────────────────────────────────── */

.optimize-section {
  margin-bottom: 2rem;
}

.optimize-section__title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-color);
}

.optimize-section__empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 0.75rem 0;
}

.optimize-section--tasks:has(.optimize-open-tasks-list:empty) {
  display: none;
}

.optimize-section__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* ── Section 1 item row (Option C) ─────────────────────────────────────── */

.optimize-item-wrap--high  { border-left: 3px solid var(--danger, #dc2626); }
.optimize-item-wrap--medium { border-left: 3px solid var(--warning, #f59e0b); }
.optimize-item-wrap--low   { border-left: 3px solid var(--border-color); }

.optimize-item-row__icon {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
}

.optimize-item-row__name-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.optimize-item-row__name-link:hover {
  text-decoration: underline;
}

.optimize-item-row__weight-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Section 2: open tasks list ─────────────────────────────────────────── */

.optimize-open-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.optimize-task-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem 0.35rem 3.25rem;
  border-top: 1px solid var(--border-color);
  background: var(--surface-sunken, var(--surface));
}

.optimize-task-inline__title {
  flex: 1;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.optimize-task-inline__title:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.optimize-open-task-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 4px);
}

.optimize-open-task-row__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 0.1rem;
}

.optimize-open-task-row__item {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.optimize-open-task-row__title {
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.optimize-open-task-row__title:hover {
  text-decoration: underline;
}

/* ── Section 3: all items (collapsible) ─────────────────────────────────── */

.optimize-section--all {
  margin-top: 0.5rem;
}

.optimize-section--all .optimize-item-row {
  border-bottom: 1px solid var(--border-color);
}

.optimize-section__summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0.85rem 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}
.optimize-section__summary::-webkit-details-marker { display: none; }
.optimize-section__summary::before {
  content: '▶';
  font-size: 0.65rem;
  transition: transform 0.15s;
}
details[open] .optimize-section__summary::before {
  transform: rotate(90deg);
}

.optimize-section__summary-count {
  font-weight: 400;
}

.optimize-weight-section {
  margin-bottom: 1rem;
}

.optimize-weight-section h3 {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.75rem 0 0.25rem;
}

/* ── All-items row (Section 3) ──────────────────────────────────────────── */

.optimize-all-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.25rem;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border-color);
}

.optimize-all-row:last-child { border-bottom: none; }

.optimize-all-row--skipped {
  opacity: 0.55;
}

.optimize-all-row__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === Packs index — empty state and templates === */

.packs-index .page-header {
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
}

/* Baseline-aligned only while the header is a row: application.css stacks it
   below 768px, and an unconditional flex-end would outrank that. */
@media (min-width: 769px) {
  .packs-index .page-header { align-items: flex-end; }
}

.packs-index .page-header div:first-child h1 {
  margin: 0;
}

.packs-index .page-header .page-subtitle {
  margin: 0.35rem 0 0 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.packs-index .header-actions {
  flex-shrink: 0;
}

.templates-section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.templates-section h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0 0 0.35rem 0;
  color: var(--text-primary);
}

.templates-section > p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0 0 1.5rem 0;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.templates-view-all {
  text-align: center;
  padding: 1rem 0;
}

.templates-view-all .btn-secondary {
  display: inline-block;
}

.optimize-all-row__weight {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  font-size: 0.8rem;
  width: 50px;
  text-align: right;
  flex-shrink: 0;
}

.optimize-all-row__pct {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 0.75rem;
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

.optimize-all-row .optimize-item-bar {
  width: 60px;
  flex-shrink: 0;
}



.optimize-form-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}

.optimize-task-form-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.optimize-task-form-row:first-child { margin-top: 0; }

.optimize-task-form-row .form-control { width: auto; }

.optimize-task-title {
  flex: 1;
  min-width: 0;
}

.optimize-task-priority {
  width: 110px;
  flex-shrink: 0;
}

.optimize-task-desc {
  width: 100%;
  resize: vertical;
  font-size: 0.85rem;
}

.optimize-task-form-row .optimize-task-desc {
  width: 100%;
}

.pack-list-row.heaviest {
  background: var(--warning-light, #fffbeb);
  border-left: 3px solid var(--warning, #f59e0b);
}

/* ── Inline stat bar (statistics view) ─────────────────────────────────── */

.stat-bar-inline {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 2px;
}

.stat-bar-inline .stat-bar-fill {
  height: 100%;
  border-radius: 3px;
  min-width: 2px;
}

.pack-list-pct {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pack-list-pct small {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* ── Pack list footer (totals) ─────────────────────────────────────────── */

.pack-list-footer {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-top: 2px solid var(--border);
  font-weight: 600;
  margin-top: 0.25rem;
}

/* ── Statistics view ───────────────────────────────────────────────────── */

.pack-stats-view {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pack-stats-view h3 {
  margin-bottom: 0.5rem;
}

.pack-stat-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.pack-stat-summary {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  background: var(--surface-raised);
  user-select: none;
}

.pack-stat-summary::-webkit-details-marker { display: none; }

.pack-stat-summary::before {
  content: "\25B6";
  font-size: 0.65rem;
  color: var(--text-secondary);
  transition: transform 0.2s;
  flex-shrink: 0;
}

details[open] .pack-stat-summary::before { transform: rotate(90deg); }

.stat-cat-label {
  font-weight: 600;
  flex: 1 0 120px;
}

.stat-cat-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.stat-bar {
  flex-basis: 100%;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  background: var(--primary, #4f46e5);
  border-radius: 4px;
  transition: width 0.3s ease;
  min-width: 2px;
}

.pack-stat-items {
  padding: 0.5rem 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pack-stat-item-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.9rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--border);
}

.pack-stat-item-row:last-child { border-bottom: none; }

.pack-stat-total {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-top: 2px solid var(--border);
  font-weight: 600;
  margin-top: 0.25rem;
}

/* ── Responsive adjustments ────────────────────────────────────────────── */

@media (max-width: 640px) {
  .pack-list-header,
  .pack-list-row {
    grid-template-columns: 36px 1fr 60px;
  }

  .pack-list-brand,
  .pack-list-qty,
  .pack-list-pct,
  .pack-list-notes { display: none; }

  .pack-list-header--available,
  .pack-list-row--available {
    grid-template-columns: 36px 1fr 60px;
  }

  .pack-list-header--pack-items,
  .pack-list-row--pack-items {
    grid-template-columns: 36px 1fr 60px;
  }

  .pack-list-header--optimize,
  .pack-list-row--optimize {
    grid-template-columns: 36px 1fr 60px 60px;
  }

  .pack-list-header--statistics,
  .pack-list-row--statistics {
    grid-template-columns: 36px 1fr 60px;
  }
}

/* === Pack subtitle line === */
.trip-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--success);
}
/* === Pack Templates – Gallery & Detail Styles === */

.pack-templates-index .page-subtitle,
.pack-template-show .page-subtitle {
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.pack-template-show .page-header {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  margin-bottom: 2rem;
  overflow: hidden;
}

.pack-template-show .page-header .header-content {
  display: block;
  padding: 2rem;
  position: relative;
}

.pack-template-show .page-header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  padding-right: 10rem;
}

.header-title-section {
  width: 100%;
}

.pack-template-show .page-header .button_to {
  position: absolute;
  top: 2rem;
  right: 2rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.header-clone-btn {
  width: auto;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  white-space: nowrap;
}

.back-link {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.back-link:hover {
  text-decoration: underline;
}

.pack-template-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: start;
}

.pack-template-gear-list {
  background: transparent;
  border: none;
  padding: 0;
}

.pack-template-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}

.section-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.item-count {
  background: var(--primary-light);
  color: var(--primary);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.gear-items-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.gear-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.gear-item:hover {
  background: var(--surface-sunken);
}

.gear-item:last-child {
  border-bottom: none;
}

.gear-item-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.gear-item-info {
  flex: 1;
}

.gear-name {
  color: var(--text-primary);
  font-weight: 500;
}

.quantity {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-left: 0.3rem;
}

.gear-weight {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  min-width: 70px;
  text-align: right;
}

.other-templates-sidebar {
  background: transparent;
  border: none;
  padding: 0;
}

.sidebar-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--text-primary);
}

.other-templates-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.other-templates-list .trip-card-wrap {
  flex: 1;
}

@media (max-width: 768px) {
  .pack-template-detail-grid {
    grid-template-columns: 1fr;
  }
  
  .pack-template-show .page-header .header-content {
    padding: 1.5rem;
  }

  .pack-template-show .page-header h1 {
    font-size: 1.5rem;
    padding-right: 0;
  }

  .pack-template-show .page-header .button_to {
    position: static;
    margin-top: 1rem;
  }

  .header-clone-btn {
    width: 100%;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* === Hero graphics === */

.template-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-repeat: repeat-x;
  background-position: bottom;
}

.template-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpolygon points='0,60 22,28 42,48 66,15 92,42 118,20 146,46 172,24 200,44 200,60' fill='white' fill-opacity='0.16'/%3E%3Cpolygon points='0,60 30,42 58,55 90,34 124,52 156,36 200,54 200,60' fill='white' fill-opacity='0.12'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 200px 60px;
  pointer-events: none;
}

.template-hero__icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.template-hero__icon svg {
  width: 58%;
  height: 58%;
  color: #fff;
}

.template-sidebar-name svg {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.15em;
  margin-right: 0.3rem;
}

.pack-type-icon-cell svg {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

.template-hero--card {
  height: 110px;
}

.template-hero--card .template-hero__icon {
  width: 56px;
  height: 56px;
  font-size: 1.75rem;
}

.template-hero--banner {
  height: 180px;
}

.template-hero--banner .template-hero__icon {
  width: 88px;
  height: 88px;
  font-size: 2.75rem;
}

.template-hero--sunrise { background: linear-gradient(135deg, #fde68a 0%, #fb923c 55%, #f97316 100%); }
.template-hero--forest  { background: linear-gradient(135deg, #6ee7b7 0%, #059669 55%, #065f46 100%); }
.template-hero--trail   { background: linear-gradient(135deg, #93c5fd 0%, #3b82f6 55%, #1d4ed8 100%); }
.template-hero--summit  { background: linear-gradient(135deg, #c4b5fd 0%, #7c3aed 55%, #4c1d95 100%); }
.template-hero--slate   { background: linear-gradient(135deg, #cbd5e1 0%, #64748b 55%, #334155 100%); }

@media (max-width: 768px) {
  .template-hero--banner {
    height: 130px;
  }

  .template-hero--banner .template-hero__icon {
    width: 64px;
    height: 64px;
    font-size: 2rem;
  }
}

/* Scoped: an unscoped flex-direction: column here leaked past require_self
   onto every page's .header-actions. */
.pack-template-show .header-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
}

.template-compare-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.template-compare-form__label {
  font-size: 0.875rem;
  font-weight: 600;
}

.template-compare-form__select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 16rem;
}

.pack-template-compare .compare-weight {
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.pack-template-compare .compare-weight--under  { border-left-color: #3b82f6; }
.pack-template-compare .compare-weight--within { border-left-color: #059669; }
.pack-template-compare .compare-weight--over   { border-left-color: #f97316; }

.pack-template-compare .compare-weight__verdict {
  font-weight: 600;
}

.pack-template-compare .compare-empty {
  color: var(--text-muted);
  padding: 0.75rem 0;
}

@media (max-width: 768px) {
  .pack-template-show .header-actions {
    align-items: stretch;
  }
}
/* === Tasks === */

.tasks-index {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.tasks-index .page-header {
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}

/* Baseline-aligned only while the header is a row: application.css stacks it
   below 768px, and an unconditional flex-end would outrank that. */
@media (min-width: 769px) {
  .tasks-index .page-header { align-items: flex-end; }
}

.tasks-index .page-header__text {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.tasks-index .page-header h1 {
  margin: 0;
}

.tasks-overdue-badge {
  display: inline-block;
  background: var(--danger);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  border-radius: 0;
  vertical-align: middle;
}

.tasks-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.tasks-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.btn-filter {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-filter:hover {
  color: var(--text-primary);
  border-color: var(--border-sunken);
  text-decoration: none;
}

.btn-filter.active {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary-dark);
}

.btn-filter--type {
  border-style: dashed;
}

.btn-filter--type.active {
  border-style: solid;
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.task-row {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.task-row:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.task-row--completed {
  opacity: 0.65;
}

.task-row--overdue {
  border-left: 3px solid var(--danger);
}

.task-row__priority {
  width: 4px;
  flex-shrink: 0;
}

.task-priority--high   { background: var(--danger); }
.task-priority--medium { background: var(--accent); }
.task-priority--low    { background: var(--primary); }

.task-row__body {
  flex: 1;
  padding: 0.75rem 1rem;
  min-width: 0;
}

.task-row__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.task-row__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}

.task-row__title a {
  color: var(--text-primary);
  text-decoration: none;
}

.task-row__title a:hover {
  text-decoration: underline;
}

.task-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--secondary);
}

.task-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.task-meta-item a {
  color: var(--secondary);
}

.task-row__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.75rem;
  flex-shrink: 0;
}

.task-type-badge,
.task-status-badge,
.task-priority-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.task-type-badge {
  background: var(--surface-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-weight: 600;
}

/* Pending and cancelled sit on the sunken ground, where muted ink loses AA;
   in progress is a sun tint and reads in the on-tint ink, never white. */
.task-status--pending     { background: var(--surface-sunken); color: var(--text-muted-on-sunken); }
.task-status--in_progress { background: var(--accent-tint); color: var(--accent-text); }
.task-status--completed   { background: var(--primary-light); color: var(--primary-dark); }
.task-status--cancelled   { background: var(--surface-sunken); color: var(--text-muted-on-sunken); }

.task-overdue-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--danger);
}

.task-detail {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.task-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.task-detail__content {
  margin-top: var(--space-lg);
}

.task-detail__section {
  margin-bottom: var(--space-lg);
}

.task-detail__section h2 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.task-detail__meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.task-meta-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
}

.task-meta-label {
  min-width: 9rem;
  font-size: 0.85rem;
  color: var(--secondary);
  font-weight: 500;
}

.task-meta-value {
  font-size: 0.9rem;
}

.task-meta-value a {
  color: var(--primary);
}

.task-detail__back {
  margin-top: var(--space-xl, 2rem);
}

.page-header__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

/* ── Trip Tasks Section (embedded in trip show / edit) ── */
.trip-tasks-section {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  background: var(--surface);
}

.trip-tasks-section--form {
  background: var(--surface-sunken);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-top: 0;
}

.section-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 1rem 0;
}

.trip-tasks-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.trip-tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.trip-tasks-header h2 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0;
}

.trip-tasks-header__link {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: color 0.15s, border-color 0.15s;
}

.trip-tasks-header__link:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
  text-decoration: none;
}

.tasks-list--compact .task-row {
  border-radius: var(--radius-sm);
}

.tasks-list--compact .task-row__title {
  font-size: 0.9rem;
}

.empty-state--inline {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ── Trip Task Cards (tasks index grouped view) ── */
.trip-task-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.trip-task-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.trip-task-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-alt, var(--surface));
}

.trip-task-card__title-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.trip-task-card__name {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trip-task-card__name a {
  color: inherit;
  text-decoration: none;
}

.trip-task-card__name a:hover {
  text-decoration: underline;
}

.trip-task-card__date {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Sun is a background for dark text only — white on it is 2.81:1. */
.trip-task-card__count {
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: 999px;
  min-width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.4rem;
  flex-shrink: 0;
}

.trip-task-card__list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  flex: 1;
}

.trip-task-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
}

.trip-task-item + .trip-task-item {
  border-top: 1px solid var(--border-color);
}

.trip-task-item--overdue .trip-task-item__title {
  color: var(--danger);
}

.trip-task-check {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  transition: color 0.15s;
}

.trip-task-check:hover {
  color: var(--primary);
}

.trip-task-check svg {
  width: 1rem;
  height: 1rem;
}

/* button_to wraps in a <form> — strip default form margins */
.trip-task-item form {
  display: contents;
}

.trip-task-item__title {
  font-size: 0.85rem;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.trip-task-card__footer {
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border-color);
}

.trip-task-card__add-link {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
}

.trip-task-card__add-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* ── Mini task list embedded in trip index cards ────────────────────────── */
.trip-card-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-color);
}

.gear-card-tasks {
  background: var(--surface-sunken);
  margin-top: auto;
}

.trip-card-task-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.trip-card-task-item:last-child {
  border-bottom: none;
}

.trip-card-task-item--overdue .trip-card-task-item__title {
  color: var(--danger);
}

/* button_to wraps in <form> — strip default margins */
.trip-card-task-item form {
  display: contents;
}

.trip-card-task-item__title {
  font-size: 0.8rem;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trip-card-task-item__edit {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.1s;
}

.trip-card-task-item:hover .trip-card-task-item__edit {
  opacity: 1;
}

.trip-card-tasks--form {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.trip-card-tasks-empty {
  color: var(--text-muted);
  font-style: italic;
}

/* ── Quick-add inline row ─────────────────────────────────────────── */
.trip-quick-add-row {
  border-top: 1px solid var(--border-color);
  padding: 0;
}

.trip-quick-add-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  width: 100%;
}

.trip-quick-add-input {
  flex: 1;
  border: none;
  background: none;
  font-size: 0.8rem;
  color: var(--text-primary);
  outline: none;
  padding: 0.1rem 0;
  min-width: 0;
}

.trip-quick-add-input::placeholder {
  color: var(--text-muted);
}

.trip-quick-add-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  padding: 0.1rem;
  border-radius: 50%;
  transition: color 0.15s;
  flex-shrink: 0;
}

.trip-quick-add-btn:hover {
  color: var(--primary);
}

.trip-quick-add-btn svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* ── Microsoft To Do integration banner ─────────────────────────────────── */

.ms-todo-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--surface-dark);
  border-radius: 0;
  padding: 0.9rem 1.25rem;
  margin-bottom: var(--space-lg);
  box-shadow: 0 4px 8px rgba(41, 46, 51, 0.05), 0 1px 3px rgba(41, 46, 51, 0.04);
}

.ms-todo-banner__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--primary-light);
  color: var(--primary-dark);
}

.ms-todo-banner__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.ms-todo-banner__body strong {
  font-size: 0.9rem;
  color: var(--text-primary);
}

.ms-todo-banner__sub {
  font-size: 0.78rem;
  color: var(--secondary);
}

.ms-todo-banner__action {
  flex-shrink: 0;
}

/* ── Tasks index — status tabs ─────────────────────────────────────── */
.tasks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tasks-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tasks-priority-legend {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.tasks-priority-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.tasks-priority-legend__dot {
  width: 9px;
  height: 9px;
  border-radius: 0;
  flex-shrink: 0;
}

.tasks-priority-legend__dot--high   { background: var(--danger); }
.tasks-priority-legend__dot--medium { background: var(--accent); }
.tasks-priority-legend__dot--low    { background: var(--primary); }

/* ── Tasks index — 3-section layout ───────────────────────────────── */
.tasks-sections {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tasks-section {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.tasks-section__header {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.25rem;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-color);
}

.tasks-section__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tasks-section__title h2 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0;
}

.tasks-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 0;
}

.tasks-section__add {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: color 0.15s;
}

.tasks-section__add:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.tasks-section__list {
}

.tasks-section__empty {
  padding: 0.9rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

/* ── Task item row ─────────────────────────────────────────────────── */
.task-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  border-left: 4px solid transparent;
  padding-right: 0.5rem;
  transition: background 0.1s;
  min-width: 0;
}

.task-item-row:last-child {
  border-bottom: none;
}

.task-item-row:hover {
  background: var(--surface-sunken);
}

.task-item-row--high   { border-left-color: var(--danger); }
.task-item-row--medium { border-left-color: var(--accent); }
.task-item-row--low    { border-left-color: var(--primary); }

.task-item-row--completed { opacity: 0.6; }
.task-item-row--cancelled { opacity: 0.45; }

.task-item-row--completed .task-item-row__title { text-decoration: line-through; }

/* Drawn as an inset ring so the stacked neighbours do not move. */
.task-item-row--overdue {
  box-shadow: inset 0 0 0 1px var(--danger);
}
.task-item-row--overdue .task-item-row__title { color: var(--danger); }

.task-item-row__check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.35rem 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s;
}

.task-item-row__check:hover { color: var(--primary); }

/* button_to wraps in <form> — strip default margins */
.task-item-row__check form { display: contents; }

.task-item-row__check svg {
  width: 0.95rem;
  height: 0.95rem;
}

.task-item-row__content {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0;
}

.task-item-row__title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.task-item-row__title:hover { text-decoration: underline; }

.task-item-row__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.1rem;
}

.task-meta-link {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
}

.task-meta-link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.task-item-row__due {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.task-item-row__due--overdue {
  color: var(--danger);
  font-weight: 600;
}

.task-item-row__actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s;
}

.task-item-row:hover .task-item-row__actions { opacity: 1; }

.task-item-row__action-btn {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
  white-space: nowrap;
}

.task-item-row__action-btn:hover {
  color: var(--text-primary);
  background: var(--border-color);
  text-decoration: none;
}

/* button_to wraps in <form> — strip default margins */
.task-item-row__actions form { display: contents; }

.task-item-row__action-btn--danger:hover {
  color: var(--danger);
  background: var(--danger-light, #fee2e2);
}
/* === Gear Categories — index styles === */

.gear-categories-index {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* ── Category row (mirrors .task-item-row) ──────────────────────────── */
.gear-cat-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border-color);
  padding: 0.6rem 0.5rem 0.6rem 1.25rem;
  transition: background 0.1s;
  min-width: 0;
}

.gear-cat-row:last-child {
  border-bottom: none;
}

.gear-cat-row:hover {
  background: var(--surface-sunken);
}

.gear-cat-row__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
  line-height: 1;
}

.gear-cat-row__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.gear-cat-row__name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gear-cat-row__desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gear-cat-row__count {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.gear-cat-row .task-item-row__actions {
  opacity: 0;
  transition: opacity 0.12s;
}

.gear-cat-row:hover .task-item-row__actions,
.gear-cat-row:focus-within .task-item-row__actions {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .gear-cat-row .task-item-row__actions {
    opacity: 1;
  }
}

/* Looks disabled but keeps pointer events and focus, so its title and
   description can still be read. */
.gear-cat-row .gear-cat-row__delete--blocked,
.gear-cat-row .gear-cat-row__delete--blocked:hover {
  opacity: 0.45;
  cursor: not-allowed;
  background: none;
  color: var(--text-muted);
}

/* button_to wraps in <form> — strip default margins */
.gear-cat-row .task-item-row__actions form {
  display: contents;
}
/* === Trips ===
   Never write a nested slash-star inside a comment here: CSS comments do not
   nest, and the first close silently drops the rules that follow. */

/* --- Mobile planner panel tab switcher --- */
.planner-mobile-tabs {
  display: none;
}

.planner-mobile-tab {
  flex: 1;
  padding: 0.7rem 1rem;
  border: none;
  background: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  font-family: inherit;
  min-height: 44px;
}

.planner-mobile-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.planner-mobile-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 99px;
  background: var(--primary);
  color: var(--text-on-primary);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0 4px;
  margin-left: 5px;
  vertical-align: middle;
}

.planner-mobile-add-bar {
  display: none;
}

/* === Mobile — Trips ===
   Selectors are doubled (`.trip-card.trip-card`): application.css loads last and
   wins at equal specificity, media query or not. New rules here need the same. */

@media (max-width: 768px) {

  /* --- Index: filter tabs --- */
  .trips-index .article-filters {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 0.4rem;
    margin: 1.25rem 0;
  }

  .trips-index .article-filters::-webkit-scrollbar { display: none; }

  .trips-index .filter-tab {
    padding: 0.55rem 1rem;
    white-space: nowrap;
    font-size: 0.875rem;
    flex-shrink: 0;
  }

  .trips-section h2 {
    font-size: 0.7rem;
    margin: 0 0 0.875rem;
  }

  .trips-grid.trips-grid {
    gap: 1rem;
  }

  /* --- Trip card --- */
  .trip-card-wrap.trip-card-wrap {
    border-radius: 8px;
  }

  .trip-card.trip-card {
    padding: 0.85rem 1rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
  }

  .trip-card__title.trip-card__title {
    font-size: 1rem;
    margin: 0;
    flex: 1;
    min-width: 0;
    order: 1;
  }

  .trip-weight-row.trip-weight-row {
    order: 1;
    margin-top: 0;
    padding-top: 0;
    font-size: 0.82rem;
    flex-shrink: 0;
  }

  .trip-card__meta.trip-card__meta {
    order: 2;
    margin-bottom: 0;
    width: 100%;
    padding-top: 0.25rem;
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .trip-card__excerpt.trip-card__excerpt {
    font-size: 0.8rem;
    margin: 0;
    order: 3;
    width: 100%;
    color: var(--text-muted);
  }

  .weight-bar.weight-bar {
    width: 100%;
    order: 4;
    margin-top: 0.35rem;
  }

  .trip-card__tags.trip-card__tags {
    order: 5;
    margin-top: 0.3rem;
    gap: 0.3rem;
  }

  .tag.tag {
    font-size: 0.73rem;
    padding: 0.15rem 0.45rem;
  }

  .trip-card-edit-btn.trip-card-edit-btn {
    padding: 0.45rem 0.75rem;
    font-size: 0.78rem;
    min-height: 44px;
  }

  .trip-card-tasks {
    margin: 0;
    padding: 0.5rem 0.75rem;
  }

  .trip-stat-badge.trip-stat-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
  }

  /* --- Mobile planner: panel tab switcher --- */
  .planner-mobile-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    background: var(--surface);
  }

  .planner-columns.planner-columns {
    grid-template-columns: 1fr;
  }

  .planner-col-divider.planner-col-divider {
    display: none;
  }

  .planner-columns[data-active-panel="gear"] .planner-col--gear,
  .planner-columns:not([data-active-panel]) .planner-col--gear {
    display: flex;
  }

  .planner-columns[data-active-panel="gear"] .planner-col--pack,
  .planner-columns:not([data-active-panel]) .planner-col--pack {
    display: none;
  }

  .planner-columns[data-active-panel="pack"] .planner-col--pack {
    display: flex;
  }

  .planner-columns[data-active-panel="pack"] .planner-col--gear {
    display: none;
  }

  .planner-col--gear.planner-col--gear,
  .planner-col--pack.planner-col--pack {
    max-height: calc(100dvh - 220px);
    border-bottom: none;
  }

  .planner-mobile-add-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    background: var(--primary);
    color: var(--text-on-primary);
    font-weight: 600;
    font-size: 0.9rem;
    border-top: 2px solid var(--primary-dark);
    transform: translateY(100%);
    transition: transform 0.22s ease;
    pointer-events: none;
    position: sticky;
    bottom: 0;
    z-index: 10;
  }

  .planner-mobile-add-bar.visible {
    transform: translateY(0);
    pointer-events: auto;
  }

  .planner-mobile-add-bar__label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .planner-mobile-add-bar__btn {
    background: var(--surface);
    color: var(--primary-dark);
    border: none;
    border-radius: var(--radius);
    padding: 0.4rem 0.875rem;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    min-height: 36px;
    font-family: inherit;
    flex-shrink: 0;
  }

  .planner-tab-bar {
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem 0.5rem;
  }

  .planner-tab-bar-search {
    width: 90px;
    flex-shrink: 0;
  }

  .cat-nav-arrow.cat-nav-arrow {
    width: 22px;
    height: 22px;
    font-size: 1rem;
  }

  .gear-items.gear-items {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .trip-card.trip-card {
    padding: 0.75rem 0.875rem;
  }

  .trip-card__title.trip-card__title {
    font-size: 0.95rem;
  }

  .planner-mobile-tab {
    font-size: 0.85rem;
    padding: 0.6rem 0.5rem;
  }
}

/* ── Trip Review Wizard ───────────────────────────────────────────────────── */

.review-wizard {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

.review-wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.review-wizard-header__back {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-decoration: none;
  flex-shrink: 0;
}

.review-wizard-header__back:hover {
  color: var(--primary);
}

.review-wizard-header__subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.review-wizard-dots {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 1.5rem;
}

.review-wizard-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
  transition: background 0.2s, transform 0.2s;
}

.review-wizard-dot--active {
  background: var(--primary);
  transform: scale(1.3);
}

.review-wizard-step__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--text-primary);
}

.review-wizard-step__count {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-left: 0.25rem;
}

.review-item-card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.review-item-card__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
}

.review-item-card__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}

.review-item-card__info {
  flex: 1;
  min-width: 0;
}

.review-item-card__name {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-item-card__meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.review-item-card__weight {
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.review-item-card__status-badges {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
}

.review-item-card--summary .review-item-card__header {
  flex-wrap: wrap;
}

.review-item-card__note-text {
  padding: 0.375rem 1rem 0.625rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-color);
}

.review-item-card__controls {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border-color);
  background: var(--surface-sunken);
}

.review-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  border: 1.5px solid var(--border-color);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}

.review-toggle-btn:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.review-toggle-btn__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.review-toggle-btn--used:has(.review-toggle-btn__input:checked) {
  background: var(--success-light);
  border-color: var(--success);
  color: var(--success);
}

.review-toggle-btn--repair:has(.review-toggle-btn__input:checked) {
  background: #fef3c7;
  border-color: #d97706;
  color: #92400e;
}

.review-item-card__notes {
  display: block;
  width: 100%;
  border: none;
  border-top: 1px solid var(--border-color);
  border-radius: 0;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  background: var(--surface);
  color: var(--text-primary);
  outline: none;
}

.review-item-card__notes:focus {
  background: #fafafa;
  box-shadow: inset 0 0 0 2px var(--primary-light);
}

.review-notes-group {
  margin-bottom: 1.25rem;
}

.review-notes-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
}

.review-notes-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
  white-space: pre-wrap;
}

.review-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--border-color);
  margin-top: 0.5rem;
}

.review-wizard-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  padding-top: 1.5rem;
  margin-top: 0.5rem;
}

.review-wizard-footer__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.review-wizard-footer__skip {
  display: flex;
  justify-content: center;
}

.review-wizard-footer__skip-btn {
  opacity: 0.88;
}

.is-visually-hidden {
  display: none !important;
}

.review-wizard-completed-at {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}

/* ── Completion info box (review show, completed state) ───────────────────── */

.review-completion-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.review-completion-box__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.review-completion-box__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.review-completion-box__date {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.review-completion-box__links {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ── Save-as-pack inline form ──────────────────────────────────────────────── */

.input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.input-row .form-control {
  flex: 1;
  min-width: 0;
}

/* ── Review Summary card (trip show, reviewed status) ──────────────────────── */

.review-summary-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.review-summary-card__header .overview-card__title {
  margin: 0;
}

.review-summary-card__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.review-summary-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.review-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.review-summary-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.review-summary-stat__label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.review-summary-stat--warn .review-summary-stat__value  { color: var(--warning, #d97706); }
.review-summary-stat--alert .review-summary-stat__value { color: var(--danger, #dc2626); }

/* ── Packed list (reviewed trip: Overview card and Pack › Packed) ──────────── */

.packed-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.packed-list__title {
  display: inline;
  margin: 0 0.6rem 0 0;
}

.packed-list__summary,
.packed-list__count {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.view-btn.active .packed-list__count { color: inherit; opacity: 0.8; }

.packed-list__tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.packed-list__link {
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.packed-table__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.packed-table__icon { color: var(--text-muted); flex: none; }

.packed-table__brand {
  margin-left: 0.3rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
}

.packed-table__sub {
  display: none;
  font-size: 0.78rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text-secondary);
}

td.packed-table__notes {
  font-size: 0.85rem;
  font-style: italic;
}

.packed-table__used {
  text-align: center;
  white-space: nowrap;
}

.packed-table__mark--ok { color: var(--success); }
.packed-table__mark--no { color: var(--warning-dark); }

.data-table .packed-table__category td {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  background: var(--surface-raised);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.data-table .packed-table__category td.col-num {
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: 0;
}

.data-table tr.is-unused td { background: var(--warning-light); }

.data-table .packed-table__total td {
  font-weight: 700;
  color: var(--text-primary);
  background: var(--surface-raised);
}

@media (max-width: 640px) {
  .packed-table__notes,
  .packed-table__brand { display: none; }

  .packed-table__sub { display: block; }

  .packed-table__repair-label { display: none; }
}

.review-scope-note {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.review-scope-note a { color: var(--primary); font-weight: 600; }

/* --- Reviewed Trip Card (index page) --- */

.trip-card-wrap--reviewed {
  border: 1px solid var(--border);
  /* application.css sets .trip-card-wrap { background: var(--surface) } and loads
     last, so this ground does not render; it states intent only. */
  background: var(--surface-sunken);
}

.trip-card--reviewed {
  --review-card-inset: 1rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-height: auto;
  width: 100%;
}

.trip-card--reviewed .trip-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 0;
  order: 1;
  gap: 0.4rem 0.65rem;
}

.trip-card--reviewed .trip-card__title {
  order: 2;
  font-size: 1.1rem;
  font-weight: 600;
}

.trip-card--reviewed .trip-card__excerpt {
  order: 3;
  width: 100%;
}

.trip-status-badge {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.trip-status-reviewed {
  background: var(--primary-light);
  color: var(--primary-dark);
}

/* --- Reviewed Trip Card — header, sections, items, footer --- */

.trip-card--reviewed {
  padding: 0;
  gap: 0;
}

.trip-card-reviewed__header {
  width: 100%;
  padding: 0.95rem var(--review-card-inset) 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-bottom: 1px solid var(--border);
}

.trip-card-reviewed__packed {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem var(--review-card-inset);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.trip-card-reviewed__packed-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.trip-card__title-link {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}

.trip-card__title-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

.trip-card-review-date {
  font-size: 0.74rem;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.16rem 0.45rem;
}

.trip-card-review-stats {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  padding: 0.75rem var(--review-card-inset);
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
}

.trip-card-review-stat {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 58px;
  padding: 0.58rem 0.35rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.trip-card-review-stat:first-child {
  border-left: 1px solid var(--border);
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.trip-card-review-stat + .trip-card-review-stat {
  border-left: 1px solid var(--border);
}

.trip-card-review-stat:last-child {
  border-right: 1px solid var(--border);
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.trip-card-review-stat .stat-value {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.trip-card-review-stat .stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
}

.trip-card-review-stat--ok {
  border-top-color: var(--primary);
}

.trip-card-review-stat--ok .stat-value {
  color: var(--primary-dark);
}

.trip-card-review-stat--warn {
  border-top-color: var(--accent);
}

.trip-card-review-stat--warn .stat-value {
  color: var(--accent-text);
}

.trip-card-review-stat--alert {
  border-top-color: var(--danger);
}

.trip-card-review-stat--alert .stat-value {
  color: var(--danger);
}

.trip-card-reviewed__section {
  width: 100%;
  padding: 0.75rem var(--review-card-inset);
  border-bottom: 1px solid var(--border);
}

.trip-card-reviewed__section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.trip-card-reviewed__section-label--warn {
  color: var(--accent-text);
}

.trip-card-reviewed__section-label--alert {
  color: var(--danger);
}

.trip-card-reviewed__item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.trip-card-reviewed__item,
.trip-card-reviewed__task {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  line-height: 1.35;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.trip-card-reviewed__item-icon,
.trip-card-reviewed__task-icon {
  flex-shrink: 0;
  font-size: 0.85rem;
  width: 1.4em;
  text-align: center;
}

.trip-card-reviewed__item-name {
  font-weight: 500;
  color: var(--text-primary);
}

.trip-card-reviewed__item-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

.trip-card-reviewed__item-note::before {
  content: '— ';
}

.trip-card-reviewed__task-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
}

.trip-card-reviewed__task-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

.trip-card-review-notes {
  width: 100%;
  padding: 0.75rem var(--review-card-inset);
  border-bottom: 1px solid var(--border);
}

.trip-card-review-notes--compact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.trip-card-review-notes__entry {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--accent-tint);
  border-left: 4px solid var(--accent);
  border-radius: 0.45rem;
  background: var(--accent-tint);
  box-shadow: 0 1px 0 rgba(41, 46, 51, 0.04);
}

.trip-card-review-notes--compact .trip-card-review-notes__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Sun is a background for dark text only — this is the ink that goes on it. */
  color: var(--accent-text);
  font-weight: 700;
}

.trip-card-review-notes--compact .trip-card-review-notes__text {
  font-size: 0.81rem;
  line-height: 1.4;
  margin: 0;
  color: var(--text-secondary);
}

.trip-card-review-notes__pin {
  font-size: 0.75rem;
  line-height: 1;
}

.trip-card-reviewed__footer {
  padding: 0.65rem 1.25rem;
  display: flex;
  justify-content: flex-end;
}

.trip-card-reviewed__footer-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.trip-card-reviewed__footer-link:hover {
  text-decoration: underline;
}



/* === Trip itinerary — stage table ===
   Cell overrides double the .itinerary-table.data-table prefix: application.css
   loads last and its .data-table td rules would otherwise win. */

.itinerary-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.itinerary-toolbar__start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.itinerary-toolbar__summary {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.itinerary-summary__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.itinerary-summary__value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.itinerary-frozen-notice {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 0.86rem;
}

/* The frame is a custom element, inline by default; left inline, the scroll
   box's overflow leaks into the document width and the page scrolls sideways. */
.itinerary turbo-frame { display: block; }

.itinerary-table-scroll {
  /* Positioned: the move form's screen-reader label is absolutely placed and
     would escape an unpositioned scroll box. */
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.itinerary-table {
  min-width: 72rem;
  font-size: 0.84rem;
}

.itinerary-table.data-table th,
.itinerary-table.data-table td {
  padding: 0.5rem 0.55rem;
  vertical-align: top;
}

.itinerary-col--day    { width: 4rem; }
.itinerary-col--date   { width: 7rem; white-space: nowrap; }
.itinerary-col--stage  { width: 5rem; }
.itinerary-col--num    { width: 4rem; text-align: right; white-space: nowrap; }
.itinerary-col--slot   { min-width: 4.5rem; }
.itinerary-col--actions { width: 9rem; min-width: 9rem; }
.itinerary-accommodation { min-width: 8rem; }

/* ── Inline cell editing ── */
.itinerary-table .inline-edit-input,
.itinerary-table .inline-edit-select {
  padding: 0.2rem 0.35rem;
  font-size: 0.82rem;
}

.itinerary-table .itinerary-col--num .inline-edit-input { text-align: right; }

.itinerary-table.data-table td.itinerary-col--num,
.itinerary-table.data-table th.itinerary-col--num { text-align: right; }

.itinerary-day-number {
  font-weight: 700;
  font-size: 0.95rem;
}

.itinerary-badge {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.itinerary-badge--resupply {
  background: var(--warning-light);
  color: var(--warning);
}

/* Both states are spelled out because .data-table tr:hover td repaints the row. */
.itinerary-table.data-table .itinerary-row--resupply td,
.itinerary-table.data-table .itinerary-row--resupply:hover td {
  background: var(--warning-light);
}

.itinerary-table.data-table .itinerary-segment-row td,
.itinerary-table.data-table .itinerary-segment-row:hover td {
  background: var(--surface-sunken);
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.itinerary-elevation span { margin-right: 0.35rem; }

.itinerary-accommodation__name { display: block; font-weight: 600; }

.itinerary-accommodation__type,
.itinerary-accommodation__contact,
.itinerary-accommodation__ref,
.itinerary-resupply-note {
  display: block;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.itinerary-accommodation__link {
  font-size: 0.76rem;
  color: var(--primary);
}

.itinerary-accommodation__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.25rem;
}

.itinerary-accommodation__edit {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: none;
}

.itinerary-accommodation__edit:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.itinerary-accommodation__add {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.itinerary-accommodation__add:hover { text-decoration: underline; }

.itinerary-accommodation__edit:focus-visible,
.itinerary-accommodation__add:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

@media print {
  .itinerary-accommodation__edit,
  .itinerary-accommodation__add { display: none; }
}

/* ── Stay dialog ── */
.stay-dialog {
  width: min(32rem, calc(100% - 2rem));
  /* The global reset zeroes margins, which also drops the UA centring of a
     modal dialog; restore it. */
  margin: auto;
  max-height: calc(100vh - 4rem);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
}

.stay-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }

.stay-dialog__loading {
  margin: 0;
  padding: 1.5rem 1.1rem;
  color: var(--text-muted);
}

.stay-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.stay-dialog__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.stay-dialog__meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.stay-dialog__close {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.stay-dialog__close:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.stay-dialog__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 0.85rem;
  padding: 0.9rem 1.1rem;
}

.stay-dialog__wide { grid-column: 1 / -1; }

.stay-dialog__copy {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-self: start;
  gap: 0.3rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.stay-dialog__copy:hover { text-decoration: underline; }

.stay-dialog__copy-source {
  font-weight: 400;
  color: var(--text-muted);
}

.stay-dialog__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1.1rem;
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
}

/* After Save in the markup, so Enter in a field saves; shown on the left. */
.stay-dialog__steps {
  display: flex;
  order: -1;
  gap: 0.35rem;
}

.stay-dialog__actions {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}

@media (max-width: 40rem) {
  .stay-dialog {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .stay-dialog[open],
  .stay-dialog turbo-frame,
  .stay-form {
    display: flex;
    flex-direction: column;
  }

  .stay-dialog turbo-frame,
  .stay-form {
    flex: 1;
    min-height: 0;
  }

  .stay-dialog__body {
    flex: 1;
    align-content: start;
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .stay-dialog__foot { flex-wrap: wrap; }

  .stay-dialog__steps { width: 100%; }

  .stay-dialog__step--next { margin-left: auto; }

  .stay-dialog__actions {
    width: 100%;
    margin-left: 0;
  }

  .stay-dialog__actions > * {
    flex: 1;
    justify-content: center;
    text-align: center;
  }
}

.itinerary-notes { min-width: 8rem; }

/* ── Reordering ── */
.itinerary-drag-handle {
  float: left;
  margin-right: 0.3rem;
  padding: 0 0.15rem;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: grab;
}

.itinerary-drag-handle:hover { color: var(--text-secondary); }

.itinerary-drag-handle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-radius: 3px;
}

.itinerary-row--dragging td { opacity: 0.45; }

/* Spelled out against :hover too, because .data-table tr:hover td repaints the row. */
.itinerary-table.data-table .itinerary-row--drop-before td,
.itinerary-table.data-table .itinerary-row--drop-before:hover td {
  box-shadow: inset 0 2px 0 0 var(--primary);
}

.itinerary-table.data-table .itinerary-row--drop-after td,
.itinerary-table.data-table .itinerary-row--drop-after:hover td {
  box-shadow: inset 0 -2px 0 0 var(--primary);
}

/* ── Dialog fields ── */
.itinerary-form__errors {
  margin-bottom: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--danger-light);
  color: var(--danger-dark);
  font-size: 0.82rem;
}

.itinerary-field { display: flex; flex-direction: column; gap: 0.2rem; }

.itinerary-field label {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}

.itinerary-field input,
.itinerary-field select,
.itinerary-field textarea {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.86rem;
  font-family: inherit;
}

/* ── New day dialog ── */
.day-form__group {
  grid-column: 1 / -1;
  margin: 0.35rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.day-form__group:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.day-form__shift {
  display: inline-block;
  margin: 0.2rem 0 0;
  padding: 0.1rem 0.45rem;
  background: var(--surface-sunken);
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.day-form__hint {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.day-form__numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem 0.85rem;
}

.day-form__check label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  color: var(--text-primary);
}

.day-form__check input[type="checkbox"] { width: auto; }

.day-form:not(:has(#trip_day_resupply:checked)) .day-form__resupply-note { display: none; }

/* Save day first in the markup so Enter saves; on screen it goes last. */
.day-form__cancel { order: 1; }
.day-form__next { order: 2; }
.day-form__save { order: 3; }

@media (max-width: 40rem) {
  .day-form__actions { flex-wrap: wrap; }
  .stay-dialog__actions > .day-form__next { flex-basis: 100%; }
}

@media (max-width: 700px) {
  .itinerary-toolbar { align-items: flex-start; flex-direction: column; }
}


/* === Meals on itinerary days === */

/* The table floor and slot column width live with the column rules above. */

/* ── A meal placed in a slot ─────────────────────────────── */
.meal-chip {
  display: inline-block;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 0.75rem;
  white-space: nowrap;
}

.meal-chip .g {
  margin-left: 0.25rem;
  color: var(--text-muted);
  font-size: 0.65rem;
}

.meal-chip--adhoc {
  border-style: dashed;
  background: var(--surface);
  color: var(--text-muted);
}

.meal-chip--empty { color: var(--text-muted); }

.meal-chip--combo {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
}

.meal-chip__items {
  display: block;
  margin-top: 0.1rem;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
}

.meal-chip--button {
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}

.meal-chip--button:hover { background: var(--primary-light); }

.meal-slot { max-width: 11rem; }

.itinerary-table.data-table td.meal-slot__weight { color: var(--text-secondary); }

/* ── Meals column ── */
.itinerary-table-scroll { container-type: inline-size; }

.itinerary-col--meals { min-width: 10rem; }

.meal-slots__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  line-height: 1.45;
}

.meal-slots__line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  white-space: nowrap;
}

.meal-slots__icon {
  flex: none;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.meal-slots__names {
  min-width: 0;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  text-decoration: none;
}

a.meal-slots__names:hover {
  color: var(--primary);
  text-decoration: underline;
}

.meal-slots__line--empty .meal-slots__names { color: var(--text-muted); }

.meal-slots__adhoc {
  font-style: italic;
  color: var(--text-muted);
}

.meal-slots__icons {
  display: none;
  gap: 0.1rem;
}

.meal-slot-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  height: 1.75rem;
  padding: 0 0.3rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.meal-slot-btn .icon { font-size: 1rem; }

.meal-slot-btn:hover,
.meal-slot-btn:focus-visible {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.meal-slot-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.meal-slot-btn--empty { opacity: 0.55; }

/* In the top layer (popover), so the table cannot clip it; the meal-popover
   controller places it. */
.meal-popover {
  width: 14rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  font-size: 0.8rem;
  line-height: 1.5;
}

.meal-popover__title {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.meal-popover__list {
  margin: 0.2rem 0 0.35rem;
  padding: 0;
  list-style: none;
}

.meal-popover__list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.meal-popover__g {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.meal-popover__empty {
  margin: 0.2rem 0 0.35rem;
  color: var(--text-muted);
}

.meal-popover__edit {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--primary);
}

@container (max-width: 72rem) {
  .itinerary-table { min-width: 60rem; }
  .meal-slots__list { display: none; }
  .meal-slots__icons { display: inline-flex; }
}

@media print {
  .meal-slots__list { display: block; }
  .meal-slots__icons { display: none; }
}

/* ── Food segment band ──
   A left border, never a fill: fills do not survive a greyscale print. */
.food-segment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--success);
  background: var(--surface-raised);
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-secondary);
}

.food-segment strong { color: var(--text-primary); }
.food-segment--2 { border-left-color: var(--info); }
.food-segment--3 { border-left-color: var(--warning); }

.itinerary-table.data-table .itinerary-segment-row td,
.itinerary-table.data-table .itinerary-segment-row:hover td {
  padding: 0;
  background: transparent;
}

/* ── Slot dialog ──
   The search field keeps a 1rem font; anything smaller makes iOS zoom the page. */
.meal-dialog { width: min(34rem, calc(100% - 2rem)); }

.meal-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.meal-dialog__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.meal-dialog__title .icon { color: var(--text-muted); }

.meal-dialog__meta {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.meal-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.meal-dialog__close:hover { background: var(--surface-sunken); color: var(--text-primary); }

.meal-dialog__body { padding: 0.9rem 1.1rem; }

.meal-dialog__error {
  margin: 0 0 0.7rem;
  padding: 0.5rem 0.7rem;
  background: var(--danger-light);
  color: var(--danger-dark);
  font-size: 0.82rem;
}

.meal-dialog__hint {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.meal-dialog__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
}

.meal-dialog__library {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--primary);
  text-decoration: none;
}

.meal-dialog__library:hover { color: var(--primary-dark); text-decoration: underline; }

.slot-current {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--primary);
  background: var(--primary-light);
}

.slot-current form { display: inline-flex; margin: 0; }

.slot-current--legacy {
  border-color: var(--warning);
  background: var(--warning-light);
}

.slot-current__name {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.slot-current__name--adhoc { color: var(--text-muted); font-style: italic; }

.slot-current__detail {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.slot-list__actions { display: flex; flex: none; gap: 0.1rem; }

.slot-list__empty {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.meal-kind-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  border: 1px solid var(--primary);
  background: var(--surface);
  color: var(--primary-dark);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.1em;
}

/* ── A meal's items, on the meal library form ── */
.meal-items { margin: 0 0 1.25rem; }

.meal-items__label {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.meal-items__list {
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  background: var(--surface);
}

.meal-items__list:empty { display: none; }

.meal-items__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--divider);
}

.meal-items__row:last-child { border-bottom: none; }
.meal-items__name { flex: 1 1 0; min-width: 0; font-size: 0.88rem; }
.meal-items__qty { width: 4.5rem; padding: 0.25rem 0.4rem; font: inherit; font-size: 0.85rem; }
.meal-items__empty { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--text-muted); }
.meal-items__add { display: block; max-width: 22rem; margin-bottom: 0.75rem; }

.meal-items__totals {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.meal-items__totals b { color: var(--text-primary); font-size: 0.95rem; font-variant-numeric: tabular-nums; }

.qty {
  display: inline-flex;
  align-items: center;
  flex: none;
  border: 1px solid var(--border);
  background: var(--surface);
}

.qty__step {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.qty__step:hover:not(:disabled) { background: var(--surface-sunken); color: var(--text-primary); }
.qty__step:disabled { color: var(--brand-ink-faint); cursor: default; }

.qty__value {
  min-width: 2.4rem;
  text-align: center;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.meal-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.meal-search__icon { display: inline-flex; color: var(--text-muted); }

.meal-search__input {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 1rem;
}

.meal-search__input:focus { outline: none; }

.meal-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 14rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-top: 0;
}

.meal-results__row { border-bottom: 1px solid var(--divider); }
.meal-results__row:last-child { border-bottom: none; }
.meal-results__row form { margin: 0; }
.meal-results__row.is-active { background: var(--primary-light); }
.meal-results__row--create { background: var(--surface-raised); }

.meal-results__add {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.4rem 0.6rem;
  border: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}

.meal-results__add:hover { background: var(--surface-sunken); }
.meal-results__slot { flex: none; color: var(--text-muted); }

.meal-results__name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meal-results__group {
  padding: 0.3rem 0.6rem;
  background: var(--surface-sunken);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.meal-results__items {
  display: block;
  overflow: hidden;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-overflow: ellipsis;
}

.meal-results__g,
.meal-results__used {
  flex: none;
  font-size: 0.74rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.slot-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.85rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.slot-filter-chip:hover { background: var(--surface); }
.slot-filter-chip .icon { color: var(--primary); }
.slot-filter-chip[hidden] { display: none; }

.meal-results__filter {
  margin: 0.4rem 0 0;
  min-height: 1.85rem;
}

.fill-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.fill-row__label { font-size: 0.78rem; color: var(--text-muted); }

.fill-chip {
  min-height: 2.25rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.fill-chip:hover { border-color: var(--primary); color: var(--primary); }

.fill-chip.is-on {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
}

@media (max-width: 40rem) {
  .meal-dialog {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border: 0;
  }

  .meal-dialog__body { padding: 0.8rem 0.9rem 1.5rem; }
  .meal-dialog__foot { position: sticky; bottom: 0; }
  .slot-current { flex-wrap: wrap; gap: 0.3rem 0.45rem; }
  .slot-current__name { flex: 1 1 100%; }
  .meal-results { max-height: none; }
  .qty__step { width: 2.5rem; height: 2.5rem; }

  .slot-list__actions .data-table__icon-btn,
  .meal-dialog__close {
    width: 2.5rem;
    height: 2.5rem;
  }
}

@keyframes meal-busy-bar {
  0% { transform: scaleX(0); }
  60% { transform: scaleX(0.75); }
  100% { transform: scaleX(1); }
}

.meal-dialog__panel,
.food-board { position: relative; }

.meal-dialog__panel.is-busy::after,
.food-board.is-busy::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  height: 2px;
  background: var(--primary);
  transform-origin: left;
  animation: meal-busy-bar 1.2s ease-out forwards;
}

.meal-dialog__panel.is-busy .meal-dialog__body,
.meal-dialog__panel.is-busy .meal-dialog__foot,
.food-board.is-busy .food-board__layout,
.food-board.is-busy .selection-bar {
  opacity: 0.55;
  pointer-events: none;
}

.meal-dialog__panel.is-busy,
.food-board.is-busy { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .meal-dialog__panel.is-busy::after,
  .food-board.is-busy::after { animation: none; transform: scaleX(1); }
}

/* ── Food board ── */
.food-board__toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.food-board__hint { margin: 0; font-size: 0.8rem; color: var(--text-muted); }

.food-board__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.food-board__rail {
  border: 1px solid var(--border);
  background: var(--surface);
}

.food-board__rail.is-waiting {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.food-board__rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

/* The way to the meal library from the board: quiet, beside the heading. */
.food-board__rail-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--primary);
  text-decoration: none;
}

.food-board__rail-link:hover { color: var(--primary-dark); text-decoration: underline; }

.food-board__rail-search {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem;
  border-bottom: 1px solid var(--divider);
  color: var(--text-muted);
}

.food-board__rail-search input {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.3rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
}

.food-board__rail-search input:focus { outline: none; }

.food-board__rail-list {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  list-style: none;
  margin: 0;
  padding: 0.45rem 0.55rem;
}

.food-board__rail-foot {
  margin: 0;
  padding: 0.5rem 0.6rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.food-board__meal {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.food-board__meal:hover { border-color: var(--primary); background: var(--primary-light); }
.food-board__meal-slot { color: var(--text-muted); }

.food-board__meal-g {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.food-board__grid { overflow-x: auto; }

.food-board__table { table-layout: fixed; font-size: 0.82rem; }

.food-board__table th,
.food-board__table td {
  padding: 0.4rem 0.5rem;
  vertical-align: top;
}

.food-board__table th { white-space: nowrap; }
.food-board__table th .icon { color: var(--text-muted); }
.food-board__day-col { width: 12%; }
.food-board__slot-col { width: 20%; }
.food-board__total-col { width: 8%; text-align: right; }

/* Not nowrap: German labels ("Nachschub") outgrow the fixed 12% column below
   ~1440px and ran under the Breakfast cell. */
.food-board__day { overflow-wrap: anywhere; }
.food-board__day b { display: block; font-weight: 700; }
.food-board__date { display: block; color: var(--text-muted); font-size: 0.75rem; }

.food-board__resupply {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
  color: var(--warning-dark);
  font-size: 0.72rem;
}

.food-board__copy form { margin: 0; }
.food-board__total { text-align: right; font-variant-numeric: tabular-nums; }
.food-board__cell-wrap { padding: 0.25rem; }

.food-board__cell {
  min-height: 2.75rem;
  padding: 0.3rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.food-board__cell:hover { border-color: var(--border); background: var(--surface-raised); }
.food-board__cell:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.food-board__cell.is-selected {
  border-color: var(--primary);
  background: var(--primary-light);
}

.food-board__cell.is-drop {
  border: 1px dashed var(--primary);
  background: var(--primary-light);
}

.food-board__cell .meal-chip { margin: 0 0.2rem 0.2rem 0; white-space: normal; }
.food-board__empty { color: var(--text-muted); }

.food-board__edit {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.15rem;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}

.food-board__band-row td {
  padding: 0;
  background: transparent;
}

.food-board__row--resupply td { background: var(--warning-light); }

.food-board__tick {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.food-board__tick--head { width: 100%; text-align: left; }
.food-board__tick:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.food-board__tick-box {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  border: 1.5px solid var(--brand-line-sunken);
  background: var(--surface);
  color: var(--text-on-primary);
  font-size: 0.65rem;
  line-height: 1;
}

.food-board__tick.is-on .food-board__tick-box { border-color: var(--primary); background: var(--primary); }
.food-board__tick.is-on .food-board__tick-box::after { content: "✓"; }
.food-board__tick.is-part .food-board__tick-box { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.food-board__tick.is-part .food-board__tick-box::after { content: "−"; }

.food-board__band-row--select td { height: 1px; }
.food-board__band-row--select .food-segment { height: 100%; border-radius: 0; }

.food-board__band-label .food-segment {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.1rem 0.4rem;
  padding: 0.35rem 0.5rem;
  border-right: 0;
}

.food-board__band-tick .food-segment {
  padding: 0.35rem 0.4rem;
  border-left: 0;
  border-right: 0;
}

.food-board__band-tick:last-child .food-segment { border-right: 1px solid var(--border); }

.food-board__toast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: fit-content;
  margin: 0.9rem auto 0;
  padding: 0.4rem 0.5rem 0.4rem 0.9rem;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(41, 46, 51, 0.12);
  font-size: 0.82rem;
}

.food-board__toast form { margin: 0; }

.food-board__undo {
  padding: 0.3rem 0.5rem;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.food-board__undo:hover { background: var(--primary-light); }

.food-board__rail-group {
  flex: none;
  align-self: center;
  padding: 0.25rem 0.1rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.food-board__meal-count {
  flex: none;
  min-width: 1.1rem;
  padding: 0 0.25rem;
  border: 1px solid var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 0.66rem;
  font-weight: 700;
  text-align: center;
}

@media (min-width: 60rem) {
  .food-board__layout { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
  .food-board__rail { position: sticky; top: 1rem; }

  .food-board__rail-list {
    display: block;
    max-height: 22rem;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .food-board__rail-list li + li { margin-top: 0.25rem; }
  .food-board__meal { width: 100%; }

  .food-board__meal-name {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .food-board__cell:not(:hover):not(.is-selected) .food-board__edit-label { display: none; }
}

@media (max-width: 48rem) {
  .food-board__grid { overflow-x: visible; }

  .food-board__table,
  .food-board__table tbody,
  .food-board__table tr,
  .food-board__table td {
    display: block;
    width: auto;
  }

  .food-board__table thead { display: none; }

  .food-board__row {
    margin-bottom: 0.6rem;
    border: 1px solid var(--border);
    background: var(--surface);
  }

  .food-board__row--resupply { border-color: var(--warning); }
  .food-board__table .food-board__row td { border-bottom: 1px solid var(--divider); }
  .food-board__table .food-board__row td:last-child { border-bottom: none; }

  .food-board__day {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: var(--surface-sunken);
  }

  .food-board__day b,
  .food-board__date { display: inline; }
  .food-board__resupply { display: inline-flex; }

  .food-board__cell-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .food-board__cell-wrap::before {
    content: attr(data-slot-label);
    flex: 0 0 5rem;
    padding-top: 0.55rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
  }

  .food-board__cell { flex: 1 1 0; min-width: 0; }
  .food-board__band-row { margin-bottom: 0.6rem; }
  .food-board__band-row td { border-bottom: none; }

  .food-board__table .food-board__band-tick { display: none; }
  .food-board__band-row--select td { height: auto; }
}

@media (max-width: 59.99rem) {
  .food-board__rail {
    position: sticky;
    top: 0;
    z-index: 3;
  }

  .food-board__table { font-size: 0.78rem; }
  .food-board__day-col { width: 22%; }
  .food-board__slot-col { width: 19.5%; }
  .food-board__total-col,
  .food-board__total { display: none; }
}

/* ── Food summary and shopping list ──────────────── */
.food-stats { margin-top: 0.25rem; }

.itinerary-panels {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-top: 1.75rem;
}

.shopping-list__title {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.shopping-list__band { margin: 1rem 0 -1px; }
.shopping-list__band:first-of-type { margin-top: 0; }

.shopping-list__table { font-size: 0.82rem; box-shadow: none; }

.shopping-list__table.data-table td { padding: 0.4rem 0.7rem; }

.shopping-list__table.data-table td.shopping-list__num {
  width: 5rem;
  text-align: right;
  white-space: nowrap;
}

.shopping-list__slots {
  width: 9rem;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.shopping-list__from { display: block; font-style: italic; }
.shopping-list__tick {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  margin: -0.4rem 0;
  cursor: pointer;
}
.shopping-list__tick input { width: 1.15rem; height: 1.15rem; flex-shrink: 0; accent-color: var(--primary); }
.shopping-list__row--ticked .shopping-list__tick span,
.shopping-list__row--ticked td { color: var(--text-disabled); }
.shopping-list__row--ticked .shopping-list__tick span { text-decoration: line-through; }
.shopping-list__bought { font-weight: 400; color: var(--text-secondary); }
.shopping-list__error { margin: 0 0 0.75rem; color: var(--danger-dark); font-size: 0.85rem; }

/* In the shop only the name and the count matter; the slot column is what overflowed. */
@media (max-width: 48rem) {
  .shopping-list__slots { display: none; }
  .shopping-list__band > span:last-child { white-space: nowrap; }
}

.shopping-list__table.data-table .shopping-list__total td,
.shopping-list__table.data-table .shopping-list__total:hover td {
  background: var(--surface-raised);
  font-weight: 700;
}

@media (max-width: 900px) {
  .itinerary-panels { grid-template-columns: minmax(0, 1fr); }
}

/* === Trip travel legs ===
   Cell overrides double the .travel-table.data-table prefix for the same reason
   as the itinerary above. */

.travel-section { margin-bottom: 1.75rem; }

.travel-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.travel-section__title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* ── Journeys ── */
.travel-journey__head {
  justify-content: flex-start;
  align-items: baseline;
  gap: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--primary);
}

.travel-journey--before .travel-journey__head,
.travel-journey--after .travel-journey__head,
.travel-journey--unlinked .travel-journey__head { border-bottom: 1px dashed var(--border); }

.travel-journey__head .travel-section__title { color: var(--text-primary); font-size: 0.85rem; }

.travel-journey__date { font-size: 0.82rem; color: var(--text-secondary); }

.travel-journey__stage {
  padding: 0.05rem 0.45rem;
  background: var(--surface-sunken);
  color: var(--text-muted-on-sunken);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.travel-journey__stage--travel { background: var(--primary-light); color: var(--primary-dark); }

.travel-journey__route { font-size: 0.84rem; color: var(--text-secondary); }

.travel-journey__add { margin-left: auto; }

.travel-journey__empty,
.travel-journey__hint { margin: 0.4rem 0 0; font-size: 0.84rem; color: var(--text-muted); }

.travel-toolbar__edge { border-style: dashed; }

.itinerary-travel-line {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.74rem;
  color: var(--primary-dark);
  white-space: nowrap;
}

.itinerary-travel-line--add { color: var(--text-muted); }

.travel-frozen-notice {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--text-secondary);
  font-size: 0.86rem;
}

.travel-flight-warning {
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--warning);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--warning-light);
  color: var(--warning-dark);
  font-size: 0.86rem;
}

.travel-flight-warning strong { display: block; }

/* Same containment as the itinerary: the custom-element frame must not stay
   inline, and the scroll box is positioned to hold the move form's label. */
.travel turbo-frame { display: block; }

.travel-table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
}

.travel-table { min-width: 64rem; }

.travel-table.data-table th,
.travel-table.data-table td {
  padding: 0.5rem 0.75rem;
  font-size: 0.845rem;
  vertical-align: top;
}

.travel-col--time    { width: 7.5rem; white-space: nowrap; }
.travel-col--mode    { width: 7rem; }
.travel-col--private { width: 7rem; }
.travel-notes        { min-width: 8rem; }
.travel-col--actions { width: 9rem; }

.travel-table.data-table td.travel-col--time,
.travel-table.data-table th.travel-col--time { text-align: right; }

.travel-leg__time { font-variant-numeric: tabular-nums; }

.travel-leg__sub {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.travel-leg__sub--overnight { color: var(--warning-dark); }

.travel-table.data-table .leg--cancelled td,
.travel-table.data-table .leg--cancelled:hover td { color: var(--text-disabled); }

.travel-table.data-table .leg--cancelled s,
.travel-table.data-table .leg--cancelled .travel-leg__sub { color: var(--text-disabled); }


/* ── Edit cells ── */
.travel-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
}

.travel-table .inline-edit-input,
.travel-table .inline-edit-select {
  padding: 0.2rem 0.35rem;
  font-size: 0.82rem;
}

.travel-col--time .inline-edit-input { min-width: max(10.5rem, 100%); }

/* ---- Inline edit panel ---- */

.travel-table.data-table .travel-edit-row td,
.travel-table.data-table .travel-edit-row:hover td {
  background: var(--surface-raised);
  padding: 0.85rem 1rem;
}

.travel-form__errors {
  margin-bottom: 0.7rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--danger-light);
  color: var(--danger-dark);
  font-size: 0.82rem;
}

.travel-form__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.travel-form__journey { flex-direction: row; align-items: center; gap: 0.5rem; }

.travel-form__journey select { width: auto; max-width: 22rem; }

.travel-form__hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.travel-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.65rem 0.85rem;
}

.travel-field { display: flex; flex-direction: column; gap: 0.2rem; }

.travel-field--wide { grid-column: 1 / -1; }

.travel-field--check {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

.travel-field label {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}

.travel-field--check label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.86rem;
}

.travel-field input,
.travel-field select,
.travel-field textarea {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.86rem;
  font-family: inherit;
}

.travel-field--check input[type="checkbox"] { width: auto; }

.travel-form__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

@media (max-width: 700px) {
  .travel-section__header { align-items: flex-start; flex-direction: column; }
  .travel-journey__add { margin-left: 0; }
}

/* === Printed dossier ===
   Authored at 794px, A4 at 96dpi, so a browser prints it 1:1. */

.dossier-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.dossier-sheet {
  width: 794px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 2.5rem 3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.78rem;
  line-height: 1.45;
}

.dossier-runhead {
  margin: 0 0 0.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dossier-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
}

.dossier-title {
  margin: 0 0 0.15rem;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dossier-meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.dossier-header__right { text-align: right; }

.dossier-rule {
  border: 0;
  border-top: 1px solid var(--text-primary);
  margin: 0.7rem 0 1.2rem;
}

.dossier-section { margin-bottom: 1.4rem; }

.dossier-section__title {
  margin: 0 0 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-secondary);
}

.dossier-empty {
  margin: 0;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-muted);
}

/* ── Tables ──────────────────────────────────────────────── */

.dossier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.dossier-table th {
  padding: 0.25rem 0.4rem;
  text-align: left;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--text-primary);
}

.dossier-table td {
  padding: 0.25rem 0.4rem;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.dossier-col--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dossier-col--time,
.dossier-col--day,
.dossier-col--date,
.dossier-col--mode { white-space: nowrap; }

.dossier-col--tick { width: 1.4rem; }

.dossier-sub {
  display: block;
  font-size: 0.64rem;
  color: var(--text-muted);
}

.dossier-total-row td { font-weight: 700; }

.dossier-group-row td {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom-color: var(--text-primary);
}

.dossier-grand-row td {
  font-weight: 700;
  border-top: 1px solid var(--text-primary);
  border-bottom: 0;
}

.dossier-tick {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1px solid var(--text-primary);
}

/* A left rule rather than a fill: fills collapse into one another in a greyscale print. */
.dossier-segment-row td {
  padding: 0.45rem 0 0.2rem;
  border-bottom: 0;
}

.dossier-band {
  padding: 0.25rem 0.6rem;
  font-size: 0.68rem;
}

/* ── Food figures, shopping list, contacts ───────────────── */

.dossier-figures {
  display: flex;
  gap: 1.5rem;
  margin: 0;
}

.dossier-figures > div { flex: 1 1 0; }

.dossier-figures dt {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.dossier-figures dd {
  margin: 0.1rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.dossier-figures dd.dossier-sub {
  font-size: 0.64rem;
  font-weight: 400;
}

.dossier-shopping {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.dossier-shopping__block { flex: 1 1 220px; }

.dossier-shopping__title {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.dossier-contacts {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 1.5rem;
}

.dossier-contacts__item {
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  font-size: 0.72rem;
  break-inside: avoid;
}

.dossier-contacts__day {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.dossier-contacts__place {
  display: block;
  font-weight: 700;
}

.dossier-contacts__detail {
  display: block;
  color: var(--text-secondary);
}

.dossier-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
  font-size: 0.62rem;
  color: var(--text-muted);
}

@media (max-width: 840px) {
  .dossier-sheet { padding: 1.25rem; }
  .dossier-section { overflow-x: auto; }
  .dossier-header { flex-direction: column; align-items: flex-start; }
  .dossier-header__right { text-align: left; }
  .dossier-contacts { columns: 1; }
}

/* ── Print ───────────────────────────────────────────────── */

@media print {
  @page { size: A4; margin: 12mm; }

  .dossier-sheet {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 9.5pt;
  }

  .dossier-section { overflow-x: visible; }
  .dossier-section__title { break-after: avoid; }
  .dossier-section--checklist { break-before: page; }

  .dossier-table thead { display: table-header-group; }
  .dossier-table tr { break-inside: avoid; }

  .dossier-band.food-segment,
  .dossier-band.food-segment--2,
  .dossier-band.food-segment--3 {
    background: transparent;
    border-color: #000;
    border-left-width: 4px;
    color: #000;
  }
}


/* === Itinerary paste import === */

.itinerary-import { max-width: 100%; }

.itinerary-import__title {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.itinerary-import__intro {
  margin: 0 0 0.85rem;
  font-size: 0.86rem;
  color: var(--text-secondary);
  max-width: 70ch;
}

.itinerary-import__textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  white-space: pre;
  overflow-x: auto;
  min-height: 14rem;
}

.itinerary-import__section { margin-top: 1.75rem; }

.itinerary-import__section-title {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.itinerary-import__columns { font-size: 0.82rem; }

.itinerary-import__columns.data-table th { vertical-align: bottom; }

.itinerary-import__column-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
}

.itinerary-import__columns select {
  min-width: 9rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-family: inherit;
}

.itinerary-import__columns.data-table .itinerary-import__header-line td,
.itinerary-import__columns.data-table .itinerary-import__header-line:hover td {
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-style: italic;
}

.itinerary-import__update { margin-top: 0.75rem; }

.itinerary-import__errors {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--danger-light);
  color: var(--danger-dark);
  font-size: 0.86rem;
}

.itinerary-import__errors ul { margin: 0 0 0.5rem 1.2rem; }

.itinerary-import__errors p { margin: 0; }

.itinerary-table.data-table .itinerary-import__row--error td,
.itinerary-table.data-table .itinerary-import__row--error:hover td {
  background: var(--danger-light);
}

.itinerary-import__row-error { color: var(--danger-dark); }

.itinerary-import__unmatched {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.itinerary-import__unmatched-meal {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.86rem;
}

.itinerary-import__slot {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.itinerary-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.travel-import__direction-title {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.95rem;
}

.travel-import__leg {
  margin-bottom: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

.travel-import__leg:has(input[type="checkbox"]:not(:checked)) { opacity: 0.55; }

.travel-import__direction { flex-direction: row; align-items: center; gap: 0.5rem; }

.travel-import__direction select { width: auto; }

.travel-import__nights { font-size: 0.82rem; color: var(--primary-dark); }

.travel-import__nights--none { color: var(--accent-text); }

.travel-import__conflict {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--accent);
  border-left-width: 4px;
  background: var(--accent-tint);
  font-size: 0.84rem;
}

.travel-import__conflict legend { float: left; width: 100%; padding: 0; font-weight: 700; }

.travel-import__conflict label,
.travel-import__add-days { display: flex; align-items: center; gap: 0.4rem; }

.travel-import__add-days { margin-top: 0.7rem; font-size: 0.86rem; font-weight: 600; }

.travel-import__check-summary,
.travel-import__check {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--brand-charcoal);
  font-size: 0.84rem;
  line-height: 1.45;
}

.travel-import__check-summary { margin: 0.6rem 0 0.4rem; font-weight: 600; }

.travel-import__check { margin-bottom: 0.7rem; }

.travel-import__check ul { margin: 0.25rem 0 0 1.1rem; padding: 0; }

.travel-import__leg:has(.travel-import__check) { border-left: 4px solid var(--accent); }

.travel-field--flagged input,
.travel-field--flagged select { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.travel-field--flagged label::after {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.3rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.08em;
}

.itinerary-import__mode-option {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 0.6rem;
  font-size: 0.86rem;
  cursor: pointer;
}

.itinerary-import__mode-option input { margin-top: 0.2rem; }

.itinerary-import__mode-option strong { margin-right: 0.3rem; }

.itinerary-import__replace-confirm {
  margin-left: 1.6rem;
  color: var(--danger-dark);
}

/* ── Phone cards for the itinerary and travel tables ─────────────────
   Table and cards both render in the same frame; these queries show one.
   767.98px so that 768px itself keeps the table. */
.itinerary-cards,
.travel-cards {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 767.98px) {
  .itinerary .itinerary-table-scroll,
  .travel .travel-table-scroll,
  .itinerary .edit-mode-switch,
  .itinerary .edit-mode-bar,
  .travel .edit-mode-switch,
  .travel .edit-mode-bar { display: none; }

  .itinerary-cards,
  .travel-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
}

.itinerary-card,
.travel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 0.9rem;
  font-size: 0.9rem;
}

.itinerary-card--resupply { border-left: 3px solid var(--warning); }

.itinerary-card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  margin: -0.4rem 0 0.2rem;
  color: var(--text-primary);
  text-decoration: none;
}

.itinerary-card__day {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-right: auto;
}

.itinerary-card__day strong { font-size: 1rem; }
.itinerary-card__day time { font-size: 0.8rem; color: var(--text-muted); }
.itinerary-card__open { color: var(--text-muted); }

.itinerary-card__route {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.itinerary-card__figures {
  margin: 0.15rem 0 0;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

.itinerary-card .itinerary-travel-line { margin-top: 0.3rem; }

.itinerary-card__stay {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--divider);
}

.itinerary-card__label {
  margin: 0 0 0.1rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.travel-card__toggle { margin: 0; }

/* Time first: the departure is what a leg is read by on a platform. */
.travel-card .ov-leg {
  grid-template-columns: 4.2rem minmax(0, 1fr);
  padding: 0;
  border-top: 0;
}

.travel-card .ov-leg__time {
  order: -1;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 700;
}

.travel-card .ov-leg__what strong { overflow-wrap: anywhere; }

.travel-card--form .travel-form { margin: 0; }

/* ── Shared packing list (public page by link) ─────────────────────────────── */

.shared-list {
  max-width: 52rem;
  margin: 0 auto;
}

.shared-list__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--text-primary);
}

.shared-list__eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--primary);
}

.shared-list__title {
  margin: 0.15rem 0 0.2rem;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.shared-list__dates {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.shared-list__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.shared-list__stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.shared-list__stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.shared-list__stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.shared-list__stat--total .shared-list__stat-value { color: var(--primary); }

.shared-list__empty { color: var(--text-muted); }

.data-table .shared-list__food td {
  background: var(--accent-tint);
  color: var(--brand-charcoal);
}

.shared-list__food .packed-table__item { font-weight: 600; }

.shared-list__food-note {
  margin-left: 0.3rem;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--accent-text);
}

.shared-list__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--primary-light);
  border: 1px solid var(--border);
}

.shared-list__cta p { flex: 1 1 20rem; margin: 0; font-size: 0.9rem; }
.shared-list__cta strong { color: var(--primary-dark); }

.shared-list__credit {
  margin-top: 1rem;
  font-size: 8pt;
  text-align: center;
  color: #555;
}

@media (max-width: 640px) {
  .shared-list__title { font-size: 1.3rem; }
  .shared-list__stats { gap: 1rem; }
  .shared-list__stat-value { font-size: 1.1rem; }
  .btn-secondary.shared-list__print { display: none; }
}

/* A named page, so the dossier's A4 @page cannot force A4 onto a Letter printer. */
@media print {
  @page shared-list { size: auto; margin: 12mm; }

  body:has(.shared-list) > :not(main) { display: none !important; }

  .shared-list {
    page: shared-list;
    max-width: none;
    font-size: 9.5pt;
  }

  .shared-list__head { border-bottom-color: #000; }
  .shared-list__eyebrow,
  .shared-list__stat--total .shared-list__stat-value { color: #000; }
  .shared-list__title { font-size: 16pt; }
  .shared-list__stat-value { font-size: 12pt; }

  .shared-list .packed-table__icon { display: none; }
  .shared-list .packed-table__brand { display: inline; }
  .data-table .shared-list__food td { background: none; }
  .shared-list .data-table td,
  .shared-list .data-table th { padding: 0.15rem 0.4rem; border-color: #aaa; color: #000; }
  .shared-list .data-table th { background: none; }

  .shared-list .packed-table__category { break-after: avoid; }
  .shared-list .data-table tr { break-inside: avoid; }
}

/* ── Share control (trip header popover) ─────────────────────────────────── */

.toolbar-icon-btn.toolbar-icon-btn--on {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}

.share-popover__title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.share-popover__text,
.share-popover__meta,
.share-popover__warn {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.share-popover__meta { color: var(--text-muted); }
.share-popover__warn { color: var(--accent-text); }

.share-popover__url {
  display: flex;
  margin-bottom: 0.6rem;
  border: 1px solid var(--border);
}

.share-popover__url input {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border: 0;
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
}

.share-popover__url button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.7rem;
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--primary);
  color: var(--text-on-primary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.share-popover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.share-popover__form { margin: 0; }

.btn-secondary.share-popover__revoke { color: var(--danger); }

/* The same panel as a page, for a create that arrives without Turbo. */
.share-dialog--page {
  width: min(32rem, calc(100% - 2rem));
  margin: 2rem auto;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.share-popover__back {
  display: inline-block;
  margin-top: 0.9rem;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Share dialog: the .stay-dialog shell with one column of page options. */
.share-dialog .stay-dialog__body { grid-template-columns: minmax(0, 1fr); }

.share-dialog__section {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.share-dialog__form { display: flex; flex-direction: column; gap: 0.8rem; }
.share-dialog__optional { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.share-dialog__hint { margin: 0; font-size: 0.75rem; color: var(--text-muted); }
.share-dialog__saved { margin: 0 0 0.6rem; font-size: 0.8rem; color: var(--primary-dark); }

.share-dialog__hero {
  aspect-ratio: 16 / 6;
  margin-bottom: 0.4rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-sunken);
}

.share-dialog__hero img { display: block; width: 100%; height: 100%; object-fit: cover; }

.share-crop { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.4rem; }

.share-crop__row { display: grid; grid-template-columns: 2fr 3fr; gap: 0.6rem; align-items: start; }
.share-crop__cell { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

/* 2fr : 3fr makes the 16:9 phone frame and the 16:6 desktop strip exactly as tall. */
.share-crop__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-sunken);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.share-crop__stage:active { cursor: grabbing; }
.share-crop__stage:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.share-crop__image { position: absolute; max-width: none; pointer-events: none; }

.share-crop__caption {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* What the desktop page shows: the middle 16:6 of the 16:9 frame above. */
.share-crop__strip {
  position: relative;
  aspect-ratio: 16 / 6;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-sunken);
}

.share-crop__zoom { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--text-muted); }
.share-crop__zoom input { flex: 1; accent-color: var(--primary); }

.share-dialog__checks { display: flex; flex-direction: column; gap: 0.5rem; }

.share-dialog__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.5rem;
  align-items: start;
  font-size: 0.85rem;
}

.share-dialog__check input { margin-top: 0.25rem; accent-color: var(--primary); }
.share-dialog__check small { grid-column: 2; font-size: 0.75rem; color: var(--text-muted); }
.itinerary-field .share-dialog__check--remove {
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}

/* Chip on the menu's Share item while a link is live. */
.trip-share-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  padding: 0 0.45rem;
  border: 1px solid var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 0.7rem;
  font-weight: 700;
}

.menu-popover--trip { width: 17rem; }
/* Doubled class: data_table.css shows every small in a menu item. */
.menu-popover__item .menu-popover__note { display: none; margin-left: auto; font-size: 0.7rem; white-space: nowrap; }
.menu-popover__item[data-offline-locked] .menu-popover__note { display: inline; }

.trip-share-pill__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

.trip-card__shared {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.08rem 0.45rem;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

/* The shared page: hero, description and the weight-by-category chart. */
.shared-list__hero {
  aspect-ratio: 16 / 6;
  margin-bottom: 1.1rem;
  overflow: hidden;
  background: var(--surface-sunken);
}

.shared-list__hero img { display: block; width: 100%; height: 100%; object-fit: cover; }

.shared-list__desc {
  max-width: 62ch;
  margin: -0.35rem 0 1.25rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  text-wrap: pretty;
}

.shared-list__chart {
  margin-bottom: 1.35rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
}

.shared-list__chart-title {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.shared-list__chart .category-weight-row {
  grid-template-columns: 8.5rem 1fr 4.5rem 2.6rem;
  margin-bottom: 0.45rem;
}

.shared-list__chart .cat-pct { text-align: right; font-variant-numeric: tabular-nums; }
.shared-list__chart .weight-bar-fill--food { background: var(--accent); }

@media (max-width: 40rem) {
  .shared-list__hero { margin: -1rem -1rem 1rem; aspect-ratio: 16 / 9; }
  .shared-list__chart { padding: 0.7rem 0.75rem; }
  .shared-list__chart .category-weight-row { grid-template-columns: 5.6rem 1fr 4rem; gap: 0.5rem; }
  .shared-list__chart .cat-pct { display: none; }
}

@media print {
  .shared-list__chart { border-color: #aaa; }
  .shared-list__chart .weight-bar-track { background: #ddd; }
  .shared-list__chart .weight-bar-fill,
  .shared-list__chart .weight-bar-fill--food { background: #000; }
}
/* =========================================================
   Trip Overview, open trip (trips/overview/*)
   Phone first: one column in DOM order, two columns from 1000px.
   application.css loads after this file, so shared class names are
   only ever styled here through an .ov-* parent.
   ========================================================= */

.ov { display: flex; flex-direction: column; gap: 1rem; }
.ov .review-cta { margin: 0; }

.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.ov-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

@media (min-width: 1000px) {
  .ov-grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
}

.ov-card { padding: 1rem 1.1rem; }
.ov-card__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.ov-card__head .overview-card__title { margin: 0; }
.ov-card__sum { font-size: 0.8rem; color: var(--text-muted); }
.ov-card__head .ov-link,
.ov-card__head .ov-badge { margin-left: auto; }
.ov-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--divider);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.ov-link { color: var(--primary); font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ov-link:hover { text-decoration: underline; }
.ov-muted { color: var(--text-muted); }
.ov-small { font-size: 0.8rem; color: var(--text-muted); margin: 0.2rem 0 0; }
.ov-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Badges */
.ov-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.08rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius-sm);
}
.ov-badge--booked { background: var(--success-light); color: var(--primary-dark); }
.ov-badge--unbooked { background: var(--warning-light); color: var(--warning-dark); }
.ov-badge--missing { background: var(--danger-light); color: var(--danger-dark); }
.ov-badge--not_needed { background: var(--surface-sunken); color: var(--text-secondary); }
.ov-badge--stage-hike { background: var(--primary-light); color: var(--primary-dark); }
.ov-badge--stage-travel { background: var(--info-light); color: var(--info-dark); }
.ov-badge--stage-rest,
.ov-badge--stage-zero { background: var(--surface-sunken); color: var(--text-secondary); }

/* ── Strip ─────────────────────────────────────────────── */
.ov-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  box-shadow: var(--shadow-sm);
}
.ov-strip--trail { border-left-color: var(--accent); }
.ov-strip__when { display: flex; flex-direction: column; min-width: 8rem; }
.ov-strip__label,
.ov-strip__facts dt {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ov-strip__value { font-size: 1.6rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.ov-strip__facts { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 0; flex: 1 1 18rem; }
.ov-strip__facts div { display: flex; flex-direction: column-reverse; }
.ov-strip__facts dd { margin: 0; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.ov-ring { display: flex; align-items: center; gap: 0.6rem; }
.ov-ring__dial {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--primary) calc(var(--p, 0) * 1%), var(--surface-sunken) 0);
  display: grid;
  place-items: center;
}
.ov-ring__dial::after {
  content: "";
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--surface);
}
.ov-ring__text { display: flex; flex-direction: column; font-size: 0.78rem; color: var(--text-muted); }
.ov-ring__text strong { font-size: 0.92rem; color: var(--text-primary); }

/* ── Still to do ───────────────────────────────────────── */
.ov-todo__list { list-style: none; margin: 0; padding: 0; }
.ov-todo__item {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto auto;
  gap: 0.6rem;
  align-items: start;
  padding: 0.6rem 0;
  border-top: 1px solid var(--divider);
  font-size: 0.9rem;
}
.ov-todo__item:first-child { border-top: 0; padding-top: 0; }
.ov-todo__dot {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  font-size: 0.72rem;
  font-weight: 800;
}
.ov-todo__dot--miss { background: var(--danger-light); color: var(--danger-dark); }
.ov-todo__dot--warn { background: var(--warning-light); color: var(--warning-dark); }
.ov-todo__dot--info { background: var(--info-light); color: var(--info-dark); }
.ov-todo__text strong { display: block; font-weight: 600; color: var(--text-primary); }
.ov-todo__text small { display: block; font-size: 0.78rem; line-height: 1.4; color: var(--text-muted); margin-top: 0.1rem; }
.ov-todo__action { white-space: nowrap; }
.ov-todo__dismiss-form { display: inline; margin: 0; }
.ov-todo__dismiss {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.ov-todo__dismiss:hover { background: var(--surface-sunken); color: var(--text-primary); }
.ov-todo__clear { display: flex; align-items: center; gap: 0.4rem; margin: 0; color: var(--primary-dark); font-weight: 600; }
.ov-todo__done,
.ov-todo__dismissed {
  margin: 0.6rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--divider);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.ov-todo__dismissed { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.ov-todo__restore {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.76rem;
  cursor: pointer;
}
.ov-todo__restore:hover { border-color: var(--primary); color: var(--primary); }

/* ── Itinerary: table from 1000px, list below ──────────── */
.ov-it-table { display: none; overflow-x: auto; }
.ov-it-list { display: block; }
@media (min-width: 1000px) {
  .ov-it-table { display: block; }
  .ov-it-list { display: none; }
}
.ov-it td { vertical-align: middle; font-size: 0.84rem; }
.ov-it__day { font-weight: 600; white-space: nowrap; color: var(--text-primary); }
.ov-it__day small,
.ov-it-list__num small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--text-muted); }
.ov-it__route { color: var(--text-primary); }
.ov-it__night { white-space: nowrap; }
.ov-it__stay { display: block; }
.ov-it__band td { padding: 0.35rem 0 0.2rem; border-bottom: 0; }
.ov-it tr.is-today td { background: var(--primary-light); }
.ov-it tr.is-today td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.ov-it tr.is-past td { color: var(--text-muted); }
.ov-it tr.is-past .ov-it__day,
.ov-it tr.is-past .ov-it__route { color: var(--text-muted); font-weight: 400; }
.ov-it__gap td,
.ov-it-list__gap {
  background: repeating-linear-gradient(-45deg, var(--surface), var(--surface) 6px, var(--surface-raised) 6px, var(--surface-raised) 12px);
  border-top: 1px dashed var(--warning);
  border-bottom: 1px dashed var(--warning);
  color: var(--warning-dark);
}
.ov-legs { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--info-dark); font-size: 0.8rem; font-weight: 600; }
.ov-legs--none { color: var(--danger-dark); }
.ov-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.ov-dots i { display: block; width: 8px; height: 8px; background: var(--primary); }
.ov-dots i.is-empty { background: transparent; box-shadow: inset 0 0 0 1.5px var(--warning); }

.ov-it-list__days { list-style: none; margin: 0; padding: 0; }
.ov-it-list__day,
.ov-it-list__gap {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: start;
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--divider);
  font-size: 0.9rem;
}
.ov-it-list__gap { display: block; font-size: 0.85rem; }
.ov-it-list__day.is-today { background: var(--primary-light); box-shadow: inset 3px 0 0 var(--primary); }
.ov-it-list__num { font-weight: 700; }
.ov-it-list__route small { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-top: 0.15rem; font-size: 0.78rem; color: var(--text-muted); }
.ov-it-list__past summary {
  padding: 0.5rem 0.4rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 1px solid var(--divider);
}
.ov-it-list__past .ov-it-list__day { color: var(--text-muted); }

/* ── Travel ────────────────────────────────────────────── */
.ov-leg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: start;
  padding: 0.55rem 0;
  border-top: 1px solid var(--divider);
  font-size: 0.88rem;
}
.ov-card__head + .ov-leg { border-top: 0; padding-top: 0; }
.ov-leg:has(.ov-leg__when) { grid-template-columns: 5.5rem minmax(0, 1fr) auto; }
.ov-leg__when { display: flex; flex-direction: column; font-size: 0.74rem; color: var(--text-muted); }
.ov-leg__when strong { font-size: 0.84rem; color: var(--text-primary); }
.ov-leg__what strong { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-primary); }
.ov-leg__what small { display: block; font-size: 0.78rem; color: var(--text-muted); }
.ov-leg__time { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-leg__time small { display: block; font-size: 0.74rem; color: var(--text-muted); }
.ov-leg--missing { background: var(--danger-light); padding: 0.55rem 0.6rem; border-top: 0; margin-top: 0.3rem; }
.ov-leg__extras { display: flex; align-items: center; gap: 0.45rem; margin: 0.1rem 0 0.4rem; }
.ov-leg__extras .ov-ref { flex: 1; margin: 0; }
.ov-leg__extras .ov-leg__directions { flex: none; width: auto; padding: 0 0.75rem; }

/* ── Pack and food ─────────────────────────────────────── */
.ov-figures { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 0 0 0.75rem; }
.ov-figures div { display: flex; flex-direction: column-reverse; }
.ov-figures dt { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ov-figures dd { margin: 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-cats { margin-top: 0.75rem; }
.ov-cats .category-weight-row { grid-template-columns: 7rem minmax(0, 1fr) 4rem; gap: 0.5rem; margin-bottom: 0.4rem; }
.ov-cats .cat-label { font-size: 0.82rem; }
.ov-cats .cat-weight { text-align: right; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.ov-shop + .ov-shop { margin-top: 0.5rem; }
.ov-shop__lines { list-style: none; margin: 0.35rem 0 0.2rem; padding: 0; font-size: 0.84rem; color: var(--text-secondary); }
.ov-shop__lines li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.12rem 0.2rem 0.12rem 0.85rem; }
.ov-shop__lines li span:last-child { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ── On the trail ──────────────────────────────────────── */
.ov-today__route { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.ov-today__figures { margin: 0.1rem 0 0; font-size: 0.88rem; color: var(--text-secondary); }
.ov-tonight__name { margin: 0; font-size: 1.08rem; font-weight: 700; }
.ov-ref {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0;
  padding: 0.5rem 0.65rem;
  background: var(--surface-sunken);
}
.ov-ref small { display: block; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ov-ref code { font-size: 1.08rem; font-weight: 700; background: none; padding: 0; color: var(--text-primary); }
.ov-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.6rem; }
.ov-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  width: 100%;
  text-decoration: none;
}
.ov-next-shop .ov-actions__btn,
.ov-tonight > .ov-actions__btn { margin-top: 0.5rem; }
.ov-tomorrow { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; min-height: 44px; }
.ov-tomorrow__text small { display: block; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ov-notes p { margin: 0.3rem 0 0; color: var(--text-secondary); }

/* ── Day view (trip_day_views#show) ──────────────────────────────── */
.trip-day { max-width: 40rem; }
.trip-day__pager {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 0.5rem;
}
.trip-day__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}
.trip-day__position { margin: 0; text-align: center; }
.trip-day__position strong { display: block; font-size: 1.05rem; }
.trip-day__position small { font-size: 0.8rem; color: var(--text-muted); }
.trip-day__slots { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.trip-day__slots li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--divider);
}
.trip-day__slots li:first-child { border-top: 0; padding-top: 0; }
.trip-day__slot { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-secondary); }
/* ── Offline copy: header button, nudge card, status toast ───────── */
.offline-trip { display: inline-flex; }
.offline-trip__icon--saved { display: none; }
.offline-trip__button[aria-pressed="true"] { color: var(--primary); }
.offline-trip__button[aria-pressed="true"] .offline-trip__icon--save { display: none; }
.offline-trip__button[aria-pressed="true"] .offline-trip__icon--saved { display: inline-flex; }
.offline-trip__status {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 60;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.6rem 0.9rem;
  background: var(--brand-charcoal, #2b2b2b);
  color: #fff;
  font-size: 0.85rem;
  box-shadow: var(--shadow-md);
}
@media (max-width: 768px) {
  body.has-bottom-nav .offline-trip__status { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 0.75rem); }
}
.offline-trip__status--inline { position: static; transform: none; max-width: none; margin: 0.6rem 0 0; }
.offline-trip__status--error { background: var(--danger-dark); }
.offline-nudge { border-left: 4px solid var(--info); }
.offline-nudge .ov-actions { margin-top: 0.75rem; }
@media (max-width: 480px) {
  .offline-nudge .ov-actions { grid-template-columns: minmax(0, 1fr); }
}

.ov-leg--cancelled .ov-leg__what strong,
.ov-leg--cancelled .ov-leg__time { color: var(--text-disabled); text-decoration: line-through; }

/* The Overview's trail cards join the column's flow on desktop; on a phone
   they take the Day view's tighter spacing below. */
.ov-trail { display: contents; }

/* The Day view on a phone: the whole day above the bottom bar. The trip's
   title block stays on the Overview; the switcher already names the trip.
   Doubled classes where application.css (loaded last) sets the same property. */
@media (max-width: 767.98px) {
  .trip-show.trip-show--day { padding: 0.5rem 0.75rem 0.75rem; }
  .trip-show--day .page-header.trip-header { margin: 0 0 0.25rem; padding: 0; border: 0; }
  .trip-show--day .trip-header .page-header__title,
  .trip-show--day .trip-header .trip-stat-badge { display: none; }
  .trip-show--day .trip-header .header-actions { margin-left: auto; }

  .ov.trip-day { gap: 0.5rem; }
  .trip-day__pager { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 0.4rem; }
  .btn-secondary.trip-day__step { min-width: 40px; min-height: 36px; height: 36px; padding: 0; }
  .trip-day__position strong { display: inline; font-size: 0.95rem; }
  .trip-day__position small::before { content: "· "; }

  .trip-day__slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 0.75rem;
    font-size: 0.84rem;
  }
  .trip-day__slots li,
  .trip-day__slots li:first-child { display: block; padding: 0; border-top: 0; }
  .trip-day__slot { display: flex; font-size: 0.72rem; color: var(--text-muted); line-height: 1.2; }

  /* Shared by the Day view and the Overview's trail cards. */
  .ov-trail { display: flex; flex-direction: column; gap: 0.5rem; }
  :is(.trip-day, .ov-trail) .ov-card { padding: 0.6rem 0.75rem; }
  :is(.trip-day, .ov-trail) .ov-card__head { margin-bottom: 0.15rem; }
  :is(.trip-day, .ov-trail) .ov-today__route { font-size: 1.02rem; line-height: 1.25; }
  :is(.trip-day, .ov-trail) .ov-today__figures { font-size: 0.82rem; margin: 0; }
  :is(.trip-day, .ov-trail) .ov-small { margin-top: 0.1rem; }

  :is(.trip-day, .ov-trail) .ov-tonight__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0 0.5rem;
  }
  :is(.trip-day, .ov-trail) .ov-tonight__head .ov-small { margin: 0; }
  :is(.trip-day, .ov-trail) .ov-tonight__name { font-size: 1.02rem; }
  :is(.trip-day, .ov-trail) .ov-ref { margin: 0.4rem 0; padding: 0.3rem 0.3rem 0.3rem 0.55rem; }
  :is(.trip-day, .ov-trail) .ov-ref small { display: inline; margin-right: 0.35rem; }
  :is(.trip-day, .ov-trail) .ov-ref code { font-size: 0.95rem; }
  :is(.trip-day, .ov-trail) .ov-ref .btn-sm { min-height: 32px; padding: 0 0.55rem; }
  :is(.trip-day, .ov-trail) .ov-actions {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.35rem;
    margin-top: 0.4rem;
  }
  :is(.trip-day, .ov-trail) .ov-actions__btn { min-height: 40px; padding: 0 0.3rem; gap: 0.3rem; font-size: 0.82rem; }
  /* Four equal buttons only fit a 375px row as words. */
  :is(.trip-day, .ov-trail) .ov-actions:has(> :nth-child(4)) .icon { display: none; }
  :is(.trip-day, .ov-trail) .ov-actions:has(> :nth-child(4)) .ov-actions__btn { font-size: 0.78rem; }
  .ov-trail .ov-tonight > .ov-actions__btn,
  .ov-trail .ov-next-shop .ov-actions__btn { margin-top: 0.35rem; }

  :is(.trip-day, .ov-trail) .ov-leg { grid-template-columns: 3.1rem minmax(0, 1fr); gap: 0.5rem; padding: 0.35rem 0; }
  :is(.trip-day, .ov-trail) .ov-leg__time { order: -1; text-align: left; font-weight: 700; }
  .ov-trail .ov-leg--missing { grid-template-columns: minmax(0, 1fr) auto; padding: 0.45rem 0.6rem; }
  .trip-day .ov-leg__extras .ov-ref { margin: 0; min-width: 0; }
  .trip-day .ov-leg__extras .ov-ref code { white-space: nowrap; }
  /* Beside Directions there is room for the reference, not its label. */
  .trip-day .ov-leg__extras .ov-ref small {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .trip-day .ov-leg__directions { min-height: 36px; }

  .ov-trail .ov-shop__lines { margin: 0.25rem 0 0.1rem; font-size: 0.82rem; }
  .ov-trail .ov-shop__lines li { padding: 0.05rem 0.2rem 0.05rem 0.85rem; }
  .ov-trail .ov-tomorrow { min-height: 0; }
}

@media (max-width: 480px) {
  .ov-card { padding: 0.9rem; }
  .ov-strip { padding: 0.8rem 0.9rem; gap: 0.7rem 1rem; }
  .ov-strip__value { font-size: 1.4rem; }
  .ov-todo__item { grid-template-columns: 1.5rem minmax(0, 1fr) auto; }
  .ov-todo__action { grid-column: 2; justify-self: start; }
  .ov-todo__dismiss-form { grid-column: 3; grid-row: 1; }
  .ov-leg:has(.ov-leg__when) { grid-template-columns: minmax(0, 1fr) auto; }
  .ov-leg__when { grid-column: 1 / -1; flex-direction: row; gap: 0.4rem; }
}

/* Sharing: the promotion for an open trip, and the line that replaces it once shared. */
.share-promo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.75rem;
  align-items: start;
  margin-bottom: 0.9rem;
  padding: 0.75rem 0.85rem;
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
}

.share-promo__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background: var(--surface);
  color: var(--accent-text);
  border: 1px solid var(--border);
}

.share-promo__title { margin: 0; font-size: 0.9rem; font-weight: 700; }
.share-promo__text { margin: 0; font-size: 0.8rem; }

.share-promo__new {
  margin-right: 0.35rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.share-promo__actions { grid-column: 2; display: flex; gap: 0.5rem; align-items: center; margin-top: 0.35rem; }
.share-promo__form { margin: 0; }

.share-promo__dismiss {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
}

.share-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
  padding: 0.55rem 0.75rem;
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
  font-size: 0.8rem;
  color: var(--primary-dark);
}

.share-status__edit {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}

.share-status__edit:hover { text-decoration: underline; }
/*


















 */
/* NOTE: admin.css is loaded separately in app/views/layouts/admin.html.erb */

/* === PackLite – Application Styles === */

/* --- Design Tokens – Light Mode --- */
:root {
  --bottom-nav-h: 49px;
  /* ── Brand palette ── */
  --brand-charcoal:      #292e33;
  --brand-charcoal-tint: #e7e8ea;
  --brand-forest:        #3b7a50;
  --brand-forest-dark:   #2f6240;
  --brand-forest-tint:   #eef4ef;
  /* Sun is a background for DARK text only — white on sun is 2.81:1. */
  --brand-sun:           #e08335;
  --brand-sun-tint:      #fbeee0;
  --brand-sun-text:      #96551d;
  --brand-paper:         #fcfbf4;
  --brand-paper-sunken:  #f4f2ea;
  --brand-line:          #e4e1d6;
  --brand-line-soft:     #efece2;
  --brand-line-sunken:   #d8d4c6;
  --brand-ink:           #292e33;
  --brand-ink-muted:     #565c62;
  /* Clears WCAG AA on paper and white only; on --surface-sunken or
     --primary-light use --text-muted-on-sunken instead. */
  --brand-ink-subtle:    #6b7178;
  --brand-ink-faint:     #9aa0a6;
  --brand-red:           #dc2626;

  /* Brand */
  --primary:        var(--brand-forest);
  --primary-dark:   var(--brand-forest-dark);
  --primary-light:  var(--brand-forest-tint);
  --secondary:      var(--brand-ink-muted);
  --secondary-dark: var(--brand-charcoal);
  --text-on-primary: var(--brand-paper);

  /* Layout */
  --app-frame: 1440px;

  /* Accent — dark text on it, always. */
  --accent:         var(--brand-sun);
  --accent-tint:    var(--brand-sun-tint);
  --accent-text:    var(--brand-sun-text);
  --text-on-accent: var(--brand-charcoal);

  /* Semantic colours */
  --danger:         var(--brand-red);
  --danger-light:   #fee2e2;
  --danger-dark:    #991b1b;
  --warning:        #d97706;
  --warning-light:  #fef3c7;
  --warning-dark:   #92400e;
  --success:        #16a34a;
  --success-light:  #dcfce7;
  --info:           #0284c7;
  --info-light:     #e0f2fe;
  --info-bg:        #dbeafe;
  --info-dark:      #1e40af;
  --orange-light:   #ffedd5;
  --orange-dark:    #9a3412;

  /* Surfaces */
  --nav-bg:         var(--brand-paper);
  --bg:             var(--brand-paper);
  --surface:        #ffffff;
  --surface-raised: var(--brand-paper);
  --surface-sunken: var(--brand-paper-sunken);
  --surface-dark:   var(--brand-charcoal);
  --neutral-tint:   var(--brand-charcoal-tint);

  /* Text */
  --text-primary:   var(--brand-ink);
  --text-secondary: var(--brand-ink-muted);
  --text-muted:     var(--brand-ink-subtle);
  --text-disabled:  var(--brand-ink-faint);
  /* Muted text loses AA on the sunken and tinted grounds; step it up there. */
  --text-muted-on-sunken: var(--brand-ink-muted);
  /* On charcoal, paper at 0.8 for body and 0.6 for meta — never pure white. */
  --text-on-dark:      rgba(252, 251, 244, 0.8);
  --text-on-dark-meta: rgba(252, 251, 244, 0.6);

  /* Borders */
  --border:         var(--brand-line);
  --divider:        var(--brand-line-soft);
  --border-sunken:  var(--brand-line-sunken);
  --border-focus:   var(--brand-forest);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 4px 8px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 8px 16px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.06);

  /* Radius */
  --radius-sm: 0;
  --radius:    0;
  --radius-md: 0;
  --radius-lg: 0;

  /* Transitions */
  --transition:      150ms ease;
  --transition-slow: 250ms ease;

  /* Display face. @font-face lives in fonts.css.erb; Georgia is the
     metric-compatible fallback. */
  --font-display:   'Newsreader', Georgia, 'Times New Roman', serif;

  /* Legacy aliases – keep old markup working */
  --primary-color:   var(--primary);
  --secondary-color: var(--secondary);
  --danger-color:    var(--danger);
  --success-color:   var(--success);
  --warning-color:   var(--warning);
  --light-gray:      var(--surface-sunken);
  --border-color:    var(--border);
  --text-color:      var(--text-primary);
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* [hidden] must beat any display rule, so a component can hide itself with
   `el.hidden = true` whatever its class sets. */
[hidden] { display: none !important; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.6;
  background-color: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Typography scale */
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.25; color: var(--text-primary); }
h1 { font-size: 1.875rem; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem;   letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
p  { color: var(--text-secondary); }

.container {
  padding: 1.5rem 1rem;
}

.container.container--app {
  max-width: var(--app-frame);
  margin: 0 auto;
}

/* --- Header & Nav --- */
.header {
  background: var(--brand-paper);
  color: var(--text-primary);
  padding: 0;
  box-shadow: 0 1px 3px rgba(41,46,51,0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
  /* viewport-fit=cover lets the page reach the notch; keep the bar below it. */
  padding-top: env(safe-area-inset-top, 0px);
}

.public-header {
  background: var(--brand-paper);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(41,46,51,0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
}

.header-container {
  max-width: var(--app-frame);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Scoped to .header--app: the admin layout shares .header and .nav and keeps
   the paper bar. */
.header.header--app {
  background: var(--primary-dark);
  color: var(--text-on-primary);
  border-bottom: 0;
  box-shadow: 0 2px 8px rgba(41, 46, 51, 0.22);
}

.header--app .nav-brand-link,
.header--app .nav-brand-text { color: var(--text-on-primary); }

.header--app .nav .nav-link { color: rgba(252, 251, 244, 0.8); }

.header--app .nav .nav-link:hover {
  color: var(--text-on-primary);
  background: rgba(252, 251, 244, 0.1);
}

.header--app .nav .nav-link::after { background: var(--brand-sun); }

.header--app .nav .nav-link--active,
.header--app .nav .nav-link--active:hover {
  background: transparent;
  color: var(--text-on-primary);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--brand-sun);
}

.header--app .nav .nav-link--admin,
.header--app .nav .nav-link--admin:hover {
  color: var(--text-on-primary);
  background: rgba(220, 38, 38, 0.4);
}

.header--app .nav-user__name,
.header--app .nav-user__name:hover { color: var(--text-on-primary); }

.header--app .nav-user__name:hover { background: rgba(252, 251, 244, 0.1); }

.header--app .nav-user .btn-secondary {
  background: transparent;
  border-color: rgba(252, 251, 244, 0.45);
  color: var(--text-on-primary);
}

.header--app .nav-user .btn-secondary:hover {
  background: rgba(252, 251, 244, 0.12);
  color: var(--text-on-primary);
}

.header--app .nav-hamburger:hover { background: rgba(252, 251, 244, 0.12); }
.header--app .nav-hamburger__bar { background: var(--brand-paper); }

/* The drawer hangs inside the header; it keeps the page's ink, not the bar's. */
.header--app .mobile-menu { color: var(--text-primary); }

/* ── App bar layout ── */
.header--app .nav { justify-content: flex-start; gap: 1rem; }
.header--app .nav-menu { flex: 0 1 auto; }
.header--app .nav-user { margin-left: auto; gap: 0.35rem; }

.nav-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  max-width: 18rem;
  padding: 0.3rem 0.6rem 0.3rem 0.4rem;
  border: 1px solid rgba(252, 251, 244, 0.22);
  background: rgba(252, 251, 244, 0.09);
  color: var(--text-on-primary);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nav-switch:hover { background: rgba(252, 251, 244, 0.16); }

.nav-switch__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(252, 251, 244, 0.14);
}

.nav-switch__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.nav-switch__name {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-switch__sub {
  font-size: 0.72rem;
  color: rgba(252, 251, 244, 0.72);
  white-space: nowrap;
}

.nav-switch .icon svg,
.nav-menu-button .icon svg,
.nav-account .icon svg {
  width: 1rem;
  height: 1rem;
}

.nav-link__count {
  margin-left: 0.3rem;
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 0.75;
}

.nav-menu-button {
  gap: 0.3rem;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.nav-sep {
  width: 1px;
  height: 26px;
  margin: 0 0.35rem;
  background: rgba(252, 251, 244, 0.22);
}

.nav-account {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.4rem;
  border: 0;
  background: none;
  color: var(--text-on-primary);
  cursor: pointer;
}

.nav-account:hover { background: rgba(252, 251, 244, 0.1); }

.nav-account__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(252, 251, 244, 0.14);
}

.nav-help {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(252, 251, 244, 0.12);
  color: var(--text-on-primary);
  cursor: pointer;
}

.nav-help:hover { background: rgba(252, 251, 244, 0.22); }
.nav-help .icon svg { width: 18px; height: 18px; }
.nav-help--phone { display: none; }

.nav-blog { gap: 0.35rem; }
.nav-blog .icon { display: none; }
.nav-blog .icon svg { width: 1rem; height: 1rem; }

@media (min-width: 769px) and (max-width: 1100px) {
  .nav-blog .icon { display: inline-flex; }
  .nav-blog__label { display: none; }
}

.guide-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.guide-hint a { color: var(--primary-dark); font-weight: 600; }
.guide-hint .icon { color: var(--text-muted); }

.menu-popover__empty { margin: 0; padding: 0.4rem 0.5rem; color: var(--text-muted); font-size: 0.8rem; }

.menu-popover.menu-popover--nav { width: 19rem; max-height: 75vh; }
.menu-popover__form { margin: 0; }
.menu-popover__rule { margin: 0.3rem 0; border: 0; border-top: 1px solid var(--divider); }
.menu-popover__item--focus { background: var(--primary-light); }
.menu-popover__item--focus .icon { color: var(--brand-sun); }
.menu-popover__item--admin { color: var(--danger); }

.menu-popover__chip {
  margin-left: auto;
  padding: 1px 5px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .header--app .nav { gap: 0.6rem; }
  .nav-switch { flex: 1; max-width: none; }
  .nav-help--phone { display: inline-flex; }
}

.nav,
.public-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: 64px;
  transition: min-height 0.25s ease, padding 0.25s ease;
}

.nav-brand,
.public-nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Lighter than 800 / -0.025em on purpose: heavier fought the mark for attention. */
.nav-brand h1,
.nav-brand-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.3125rem;
  font-weight: 600;
  color: var(--primary-dark);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
  padding: 0.25rem;
}

.nav-logo svg,
.nav-logo .nav-logo-img {
  display: block;
  height: auto;
}

/* Only the uploaded raster blends; multiplying the inline vector mark against
   the bar shifts every brand colour. */
.nav-logo .nav-logo-img {
  mix-blend-mode: multiply;
}

.nav-brand-text {
  font-size: 1.3125rem;
  font-weight: 600;
  color: var(--primary-dark);
  letter-spacing: -0.01em;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.2s ease, max-width 0.25s ease;
}

.nav-brand-link:hover {
  text-decoration: none;
}

.admin-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--danger);
  color: white;
  border-radius: var(--radius-sm);
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 0.25rem;
  align-items: center;
  flex: 1;
}

.nav-menu li {
  display: flex;
  align-items: center;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2px;
  background: var(--primary);
  transition: transform var(--transition);
}

.nav-link:hover {
  color: var(--primary-dark);
  background: rgba(41,46,51,0.05);
  text-decoration: none;
}

.nav-link:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.nav-link--active {
  background: var(--primary);
  color: var(--text-on-primary);
  font-weight: 600;
}

.nav-link--active::after {
  display: none;
}

.nav-link--active:hover {
  background: var(--primary-dark);
  color: var(--text-on-primary);
}

.nav-link--admin {
  font-size: 0.8rem;
  color: var(--danger);
  background: rgba(220,38,38,0.08);
  font-weight: 600;
}

.nav-link--admin:hover {
  background: rgba(220,38,38,0.15);
  color: var(--danger-dark);
}

.nav-link--admin::after {
  display: none;
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-shrink: 0;
}

.nav-username,
.nav-user__name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}

.nav-user__avatar {
  font-size: 1.125rem;
  line-height: 1;
}

.nav-user__text {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user__name:hover {
  background: rgba(41,46,51,0.05);
  color: var(--primary-dark);
  text-decoration: none;
}

.public-nav__links {
  display: flex;
  gap: 0.25rem;
  flex: 1;
}

.public-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Language dropdown ─────────────────────────────────── */
.lang-dropdown {
  position: relative;
}

.lang-dropdown__toggle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.lang-dropdown__toggle:hover {
  background: var(--surface-raised);
  border-color: var(--text-muted);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.lang-dropdown__code {
  letter-spacing: 0.04em;
  font-weight: 600;
}

.lang-dropdown__code-abbr {
  letter-spacing: 0.04em;
  font-weight: 600;
  display: inline;
}

.lang-dropdown__code-abbr--hidden {
  display: none;
}

.lang-dropdown__code-full {
  font-weight: 500;
  display: none;
}

.lang-dropdown__code-full--visible {
  display: inline;
}

.lang-dropdown__caret {
  font-size: 0.7rem;
  opacity: 0.5;
  transition: transform var(--transition);
}

.lang-dropdown__toggle:hover .lang-dropdown__caret {
  opacity: 0.8;
}

.lang-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  padding: 0.5rem;
  z-index: 100;
}

.lang-dropdown__menu--open {
  display: block;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lang-dropdown__form {
  margin: 0;
}

.lang-dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.875rem;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-primary);
  text-align: left;
  transition: background var(--transition);
}

.lang-dropdown__item:hover {
  background: var(--surface-raised);
}

.lang-dropdown__item--active {
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
}

.btn-sm {
  padding: 0.4rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.btn-logout {
  background: var(--primary);
  color: var(--text-on-primary);
  border: 1px solid var(--primary-dark);
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  transition: background var(--transition);
  white-space: nowrap;
}
.btn-logout:hover { background: var(--primary-dark); }

/* --- Footer --- */
.footer {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--brand-paper);
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: 3rem;
  border-top: 1px solid var(--border);
}

.footer__link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--primary);
  cursor: pointer;
}
.footer__link-button:hover { text-decoration: underline; }

/* Targets touch rather than sit 1.25rem apart: 22px marks cannot keep a 44px
   target each and leave a 1.25rem gap between marks. */
.footer__social {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.25rem;
}
.footer__social a {
  display: inline-flex;
  padding: 0.75rem;
  line-height: 1;
  color: var(--text-muted);
}
.footer__social a:hover,
.footer__social a:focus-visible { color: var(--primary); }
.footer__social a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.footer__social .icon svg { width: 22px; height: 22px; }

/* --- Cookie settings dialog --- */
.consent-dialog {
  width: min(32rem, calc(100% - 2rem));
  /* The global reset zeroes margins, which also drops the UA centring of a
     modal dialog; restore it. */
  margin: auto;
  max-height: calc(100vh - 4rem);
  overflow: auto;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
  text-align: left;
  box-shadow: var(--shadow-md);
}
.consent-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.consent-dialog h2 { margin: 0 0 0.75rem; font-size: 1.25rem; }
.consent-dialog p { margin: 0 0 0.75rem; }
.consent-dialog__links { color: var(--text-muted); font-size: 0.875rem; }
.consent-dialog__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  body.has-bottom-nav .consent-dialog {
    max-height: calc(100vh - 2 * (var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)) - 2rem);
  }
}

/* --- Buttons --- */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-small,
.btn-warning,
.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
  white-space: nowrap;
  user-select: none;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-success:hover {
  text-decoration: none;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary-dark);
}
.btn-primary:hover { background: var(--primary-dark); }

.btn-secondary {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--surface-sunken); }

.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:hover { filter: brightness(0.88); }

.btn-warning {
  background: var(--warning);
  color: #fff;
}
.btn-warning:hover { filter: brightness(0.88); }

.btn-success {
  background: var(--success);
  color: #fff;
}
.btn-success:hover { filter: brightness(0.88); }

.btn-small {
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
}

button:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Forms --- */
.form-container {
  max-width: 600px;
  margin: 2rem auto;
  background: var(--surface);
  padding: 2rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.form-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.locale-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.locale-picker__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.locale-picker__option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: background var(--transition), border-color var(--transition);
  user-select: none;
}

.locale-picker__option:hover {
  background: var(--surface-raised);
  border-color: var(--text-muted);
}

.locale-picker__option:has(:checked) {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

.locale-picker__option--active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

.form-control {
  width: 100%;
  padding: 0.45rem 0.75rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59, 122, 80, 0.18);
}

.form-control::placeholder { color: var(--text-disabled); }

textarea.form-control { resize: vertical; min-height: 90px; }

input[type="file"].form-control {
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  color: var(--text-primary);
  background: var(--surface);
  border-color: var(--border);
}

input[type="file"].form-control::file-selector-button {
  background: var(--surface-sunken);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.75rem;
  margin-right: 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background var(--transition);
}

input[type="file"].form-control::file-selector-button:hover {
  background: var(--border);
}

.form-control-small {
  width: 80px;
  padding: 0.4rem 0.5rem;
  font-size: 0.875rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.form-inline {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-section {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.form-section legend {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.form-section--danger {
  background: var(--danger-light);
  border-color: var(--danger);
}

.form-section--danger legend { color: var(--danger); }

.form-errors {
  background: var(--danger-light);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.form-errors ul {
  list-style-position: inside;
  color: var(--danger);
  font-size: 0.875rem;
}

.profile-form {
  background: var(--surface);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.form-check-input {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--primary);
}

.form-check-label {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-secondary);
  cursor: pointer;
}

/* --- Flash Messages --- */
.flash-messages {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: min(420px, calc(100vw - 2rem));
  pointer-events: none;
}

.alert {
  --alert-accent: var(--primary);

  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  border-radius: 14px 14px 4px 14px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  margin-bottom: 0;
  background: var(--surface);
  color: var(--text-secondary);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
  width: 100%;
  pointer-events: auto;
  position: relative;
  transition: opacity 0.18s ease, transform 0.18s ease;
  animation: slideDownAlert 0.3s ease-out;
}

.alert::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--alert-accent);
  opacity: 0.82;
  flex-shrink: 0;
}

.alert::after {
  content: "";
  position: absolute;
  right: 0.85rem;
  bottom: -0.33rem;
  width: 0.65rem;
  height: 0.65rem;
  background: var(--surface);
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transform: rotate(45deg);
}

.alert-message {
  flex: 1;
  color: var(--text-secondary);
}

.alert-dismissed {
  opacity: 0;
  transform: translateY(-0.5rem);
}

@keyframes slideDownAlert {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Announcement Banner --- */
.announcement-banner {
  --announcement-accent: var(--primary);

  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: min(560px, calc(100vw - 2rem));
  padding: 0.7rem 0.85rem;
  margin: 0.75rem 1rem 0.25rem auto;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  border-radius: 14px 14px 4px 14px;
  border: 1px solid transparent;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
  position: relative;
}

.announcement-banner::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--announcement-accent);
  opacity: 0.82;
  flex-shrink: 0;
}

.announcement-banner::after {
  content: "";
  position: absolute;
  right: 0.85rem;
  bottom: -0.33rem;
  width: 0.65rem;
  height: 0.65rem;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transform: rotate(45deg);
}

.announcement-banner.announcement-info {
  --announcement-accent: var(--primary);

  background: var(--surface);
  color: var(--text-secondary);
  border-color: var(--border);
}

.announcement-banner.announcement-info::after {
  background: var(--surface);
  border-color: var(--border);
}

.announcement-banner.announcement-warning {
  --announcement-accent: var(--warning);

  background: var(--surface);
  color: var(--text-secondary);
  border-color: rgba(217, 119, 6, 0.22);
}

.announcement-banner.announcement-warning::after {
  background: var(--surface);
  border-color: rgba(217, 119, 6, 0.22);
}

.announcement-banner.announcement-danger {
  --announcement-accent: var(--danger);

  background: var(--surface);
  color: var(--text-secondary);
  border-color: rgba(220, 38, 38, 0.22);
}

.announcement-banner.announcement-danger::after {
  background: var(--surface);
  border-color: rgba(220, 38, 38, 0.22);
}

.announcement-banner strong {
  color: var(--text-primary);
  font-weight: 700;
  white-space: nowrap;
}

.announcement-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
  color: inherit;
  opacity: 0.6;
  flex-shrink: 0;
}

.announcement-dismiss:hover {
  opacity: 1;
}

.announcement-banner .button_to {
  display: inline;
}

.announcement-banner .button_to form {
  display: inline;
}

.on-behalf-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 1rem;
  background: rgba(217, 119, 6, 0.12);
  border-bottom: 1px solid rgba(217, 119, 6, 0.3);
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.on-behalf-banner .button_to {
  display: inline;
}

.btn-link-inline {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline;
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
}

.alert-notice {
  --alert-accent: var(--success);

  background: var(--surface);
  color: var(--text-secondary);
  border-color: rgba(22, 163, 74, 0.22);
}

.alert-notice::after {
  border-color: rgba(22, 163, 74, 0.22);
}

.alert-alert {
  --alert-accent: var(--danger);

  background: var(--surface);
  color: var(--text-secondary);
  border-color: rgba(220, 38, 38, 0.22);
}

.alert-alert::after {
  border-color: rgba(220, 38, 38, 0.22);
}

.alert-warning {
  --alert-accent: var(--warning);

  background: var(--surface);
  color: var(--text-secondary);
  border-color: rgba(217, 119, 6, 0.22);
}

.alert-warning::after {
  border-color: rgba(217, 119, 6, 0.22);
}

.alert-info {
  --alert-accent: var(--info);

  background: var(--surface);
  color: var(--text-secondary);
  border-color: rgba(2, 132, 199, 0.22);
}

.alert-info::after {
  border-color: rgba(2, 132, 199, 0.22);
}

/* --- Error Messages --- */
.error-messages {
  background: var(--danger-light);
  border: 1px solid rgba(220, 38, 38, 0.25);
  padding: 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

.error-messages h4 {
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  color: var(--danger);
}

.error-messages ul { margin-left: 1.5rem; }
.error-messages li { font-size: 0.875rem; color: var(--danger); }

/* --- Auth Pages --- */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 120px);
  padding: 2rem 1rem;
}

.auth-card {
  background: var(--surface);
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 420px;
}

.auth-card h1 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.auth-links {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* --- Dashboard --- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: var(--surface);
  padding: 1.1rem 1.25rem;
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  text-align: left;
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-card h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.stat-number {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0.3rem 0;
}

.stat-detail {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* Base / worn / food split under a total (packs/show, trip overview pack card) */
.weight-split { margin-top: 0.75rem; }

.weight-split__bar {
  display: flex;
  height: 6px;
  background: var(--divider);
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.weight-split__seg { height: 100%; }
.weight-split__seg--base, .weight-split__key--base { background: var(--primary); }
.weight-split__seg--worn, .weight-split__key--worn { background: var(--text-muted); }
.weight-split__seg--food, .weight-split__key--food { background: var(--accent); }

.weight-split__list { display: grid; gap: 0.2rem; margin: 0; }

.weight-split__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.85rem;
}

.weight-split__row dt { display: flex; align-items: center; gap: 0.45rem; color: var(--text-secondary); }
.weight-split__row dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.weight-split__row--base dt, .weight-split__row--base dd { font-weight: 700; color: var(--text-primary); }
.weight-split__key { width: 0.6rem; height: 0.6rem; flex: none; }

.stat-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
}

.stat-link:hover { text-decoration: underline; }

.dashboard-section {
  background: var(--surface);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

/* --- Page Headers --- */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  background: none;
  color: var(--text-primary);
  padding: 0 0 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.header-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Doubled class so the per-screen and small-screen .page-header rules further
   down this file cannot undo it. */
.page-header.page-header--tabs {
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  column-gap: 2rem;
  padding-bottom: 0;
}

.page-header.page-header--tabs > h1,
.page-header.page-header--tabs > .page-header__title,
.page-header.page-header--tabs > .header-actions { padding-bottom: 0.6rem; }

.page-header.page-header--tabs > .header-actions { margin-left: auto; }

.page-header__title h1 { margin: 0; }

.page-header__title .page-subtitle {
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.page-tabs {
  display: flex;
  gap: 1.25rem;
}

.page-tabs a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: -1px;
  padding: 0.5rem 0 0.65rem;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.page-tabs a:hover { color: var(--text-primary); }

.page-tabs a.is-active {
  border-bottom-color: var(--primary);
  color: var(--text-primary);
}

.page-tabs__count {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* Cells grow from their label's width, not equal shares: inside a trip card at 360 px a quarter
   is narrower than German "Verbindungen". */
.page-subtabs {
  display: flex;
  margin: 0.25rem 0 1.25rem;
  border: 1px solid var(--border);
  background: var(--surface);
}

.page-subtabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  gap: 0.3rem;
  min-height: 38px;
  padding: 0 0.25rem;
  border-left: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.page-subtabs a:first-child { border-left: 0; }

.page-subtabs a:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.page-subtabs a.is-active {
  background: var(--primary);
  color: var(--brand-paper);
}

.page-subtabs__count { font-size: 0.72rem; font-weight: 400; opacity: 0.75; }

/* On a phone the trip card's 2rem padding left the row 274 px at 360, too narrow for German
   "Verbindungen" in wider fonts (Linux, some Androids): the row runs to the card's edges. */
@media (max-width: 768px) {
  .trip-show .page-subtabs { margin-inline: -2rem; border-inline: 0; }
}

@media (max-width: 400px) {
  .page-subtabs a { padding: 0 0.1rem; font-size: 0.78rem; }
}

.page-subtabs__pro {
  margin-left: 0.3rem;
  padding: 0 3px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: super;
}

.trip-header .header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.menu-popover__item--danger { color: var(--danger); }

.split-button { display: inline-flex; }

.split-button__main,
.split-button__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.split-button .split-button__main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.split-button .split-button__toggle {
  padding-left: 0.55rem;
  padding-right: 0.55rem;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Not the shared hover lift: the two halves would lift one at a time and the
   pair would jiggle. */
.split-button .split-button__main:hover,
.split-button .split-button__toggle:hover,
.split-button__main--solo:hover {
  transform: none;
  box-shadow: none;
}

.split-button__main .icon svg,
.split-button__toggle .icon svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 40rem) {
  .page-header.page-header--tabs {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    row-gap: 0.25rem;
  }

  .page-header.page-header--tabs > .page-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .page-header.page-header--tabs > h1,
  .page-header.page-header--tabs > .page-header__title,
  .page-header.page-header--tabs > .header-actions { padding-bottom: 0; }

  .page-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .page-tabs a { flex: none; }

  /* Icon only; the label stays the button's name for screen readers. */
  .split-button__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* --- Filter tabs — shared between Articles and Trips --- */

.article-filters {
  display: flex;
  gap: 0.5rem;
  margin: 2rem 0;
  border-bottom: 1px solid var(--border);
}

.filter-tab {
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.filter-tab:hover {
  color: var(--text-primary);
  background: var(--surface-sunken);
  text-decoration: none;
}

.filter-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.filter-tab--pro::after {
  content: 'PRO';
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 3px;
  padding: 1px 3px;
  margin-left: 3px;
  vertical-align: super;
}

/* --- Trips --- */

.trips-section {
  margin-bottom: 2.5rem;
}

.trips-section h2 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.trips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

.trip-card-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.trip-card-wrap:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.07);
}

.trip-card {
  padding: 1.5rem;
  text-decoration: none;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.trip-card:hover { text-decoration: none; }

.trip-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.875rem;
}

.trip-date {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.trip-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.trip-card__excerpt {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 0.75rem;
}

.trip-weight-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.trip-weight-value {
  font-weight: 700;
  color: var(--text-primary);
}

.trip-weight-note {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Sun is a background for dark text only, so the note reads in the on-tint ink. */
.trip-weight-note--close {
  color: var(--accent-text);
  font-weight: 600;
}

.trip-weight-note--over {
  color: var(--danger);
  font-weight: 600;
}

.trip-notes {
  margin: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.trip-notes p {
  margin: 0.25rem 0 0;
}

.weight-bar {
  background: var(--divider);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.weight-progress {
  background: var(--primary);
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* The band comes from TripsHelper#trip_weight_band, not Trip#weight_status. */
.weight-progress--over  { background: var(--danger); }
.weight-progress--close { background: var(--accent); }
.weight-progress--under { background: var(--primary); }

.trip-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.tag {
  padding: 0.2rem 0.6rem;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  border-radius: 4px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
}

.trip-card-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.trip-card-wrap:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.07);
}

.trip-card-edit-btn {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.01em;
  font-family: inherit;
}

/* button_to wraps the button in a <form>. */
.button_to {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.trip-card-edit-btn:hover {
  background: var(--primary);
  color: var(--text-on-primary);
  text-decoration: none;
}

.trip-status-badge,
.pack-type-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.6em;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.trip-status-planning    { background: var(--neutral-tint); color: var(--text-primary); }
.trip-status-packed      { background: var(--primary-light); color: var(--primary-dark); }
.trip-status-in_progress { background: var(--accent-tint); color: var(--accent-text); }
/* Muted ink loses AA on the sunken ground — see --brand-ink-subtle. */
.trip-status-completed   { background: var(--surface-sunken); color: var(--text-muted-on-sunken); }
.trip-status-reviewed    { background: var(--primary-light); color: var(--primary-dark); }

.trips-summary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.trips-summary-sep { color: var(--text-muted); }
.trips-summary-next strong { color: var(--text-primary); }

.trips-nudge {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  background: var(--surface-sunken);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.trips-nudge p { margin: 0; color: var(--text-secondary); }


/* Gear */
.gear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.gear-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(41,46,51,0.09), 0 1px 3px rgba(41,46,51,0.05);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

a.gear-card:hover,
div.gear-card:hover,
.gear-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transform: translateY(-2px);
  text-decoration: none;
}

.gear-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 0.75rem;
}

.gear-category {
  background: var(--light-gray);
  border: 1px solid var(--border);
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  width: fit-content;
}

.gear-catalog-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.catalog-browse-area {
  margin-bottom: 1.75rem;
}

.catalog-browse-area__title {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

a.catalog-browse-badge {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.catalog-browse-badge:hover {
  border-color: var(--primary-color);
}

.gear-weight {
  color: var(--primary);
  font-size: 1rem;
  font-weight: 600;
}

.gear-total-weight {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.filters {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.category-all-added {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0.4rem 0.5rem;
  margin: 0;
}

/* --- Gear Items Index — filter bar, view toggles, bulk actions --- */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  margin-bottom: 0.5rem;
}

.filter-group   { display: flex; align-items: center; gap: 0.25rem; }
.filter-search  { flex: 1 1 200px; }
.filter-weight  { gap: 0.3rem; }

.filter-input {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--text-primary);
  background: var(--surface-raised);
  width: 100%;
}
.filter-input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.filter-input--sm { width: 70px; }

.filter-select {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
}

.btn-search { padding: 0.45rem 0.9rem; }
.btn-clear  {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 0.3rem;
}
.btn-clear:hover { text-decoration: underline; }

.toggle-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.filter-label { font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; }

.filter-advanced {
  display: none;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.filter-advanced.open { display: flex; }

.filter-advanced-toggle { position: relative; white-space: nowrap; }
.filter-advanced-toggle.open { border-color: var(--primary); color: var(--primary); }

.badge-dot {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}
.filter-advanced-toggle.has-advanced .badge-dot { display: block; }

.filter-pill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.88rem;
  cursor: pointer;
  user-select: none;
  background: var(--surface);
  color: var(--text-primary);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filter-pill-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-pill-toggle:has(input:checked) {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-decoration: none;
}
.filter-chip a { color: var(--text-muted); text-decoration: none; font-weight: 700; }
.filter-chip a:hover { color: var(--danger); }
.filter-chip--clear { border-color: var(--danger); color: var(--danger); }
.filter-chip--clear:hover { background: var(--danger); color: var(--text-on-primary); }

.view-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.gear-summary { color: var(--text-secondary); font-size: 0.9rem; }
.view-toggle  { display: flex; gap: 0.25rem; }

.view-btn {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.875rem;
  background: var(--surface);
  transition: background var(--transition), color var(--transition);
}
.view-btn.active {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
}

.gear-card-wrap { position: relative; display: flex; flex-direction: column; }

.card-select-area {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 3;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.card-select-area:hover { border-color: var(--primary); }

/* Native checkbox hidden but remains keyboard-accessible */
.card-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.card-select-tick {
  font-size: 0.85rem;
  font-weight: 700;
  color: transparent;
  line-height: 1;
  user-select: none;
  transition: color 0.1s;
}

.gear-card-wrap:has(.item-checkbox:checked) .card-select-area {
  background: var(--primary);
  border-color: var(--primary);
}
.gear-card-wrap:has(.item-checkbox:checked) .card-select-tick { color: var(--text-on-primary); }
.gear-card-wrap:has(.item-checkbox:checked) .gear-card {
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 3px rgba(59,122,80,0.18);
}


/* ── Row actions dropdown ───────────────────────────────── */
.row-actions { position: relative; display: inline-block; }
.row-actions-btn {
  display: inline-flex; align-items: center; justify-content: center;
  list-style: none; cursor: pointer; padding: 0.2rem 0.5rem;
  border-radius: var(--radius); font-size: 1.25rem; line-height: 1;
  color: var(--text-muted); user-select: none; background: none; border: none;
}
.row-actions-btn::-webkit-details-marker,
.row-actions-btn::marker { display: none; }
.row-actions-btn:hover { background: var(--surface-sunken); color: var(--text-primary); }
.row-actions-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 2px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  min-width: 170px; z-index: 200; padding: 0.25rem 0;
}
.row-actions[open] .row-actions-menu { display: block; }
/* The trigger is a data-table icon button; these undo the old glyph sizing. */
.row-actions-btn.data-table__icon-btn { padding: 0; font-size: 1rem; }
.row-action-item {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 1rem; font-size: 0.875rem;
  color: var(--text-primary); text-decoration: none;
  background: none; border: none; width: 100%; text-align: left;
  cursor: pointer; white-space: nowrap;
}
.row-action-item:hover { background: var(--surface-sunken); }
.row-action-item .icon { color: var(--text-muted); }
.row-action-danger .icon { color: inherit; }
.row-action-danger { color: var(--danger, #dc2626); }
.row-action-danger:hover { background: var(--danger-light, #fee2e2); color: var(--danger, #dc2626); }
.row-action-divider { height: 1px; background: var(--border); margin: 0.25rem 0; }

.gear-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.gear-card-content {
  padding: 0.75rem 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.gear-card-thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.gear-card-thumb--empty {
  height: 140px;
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.gear-card-icon { font-size: 2.5rem; opacity: 0.4; }

.gear-card-edit-btn {
  display: block;
  padding: 0.45rem 0.75rem;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-top: 1px solid var(--border);
  border-radius: 0 0 10px 10px;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.01em;
}
.gear-card-edit-btn:hover {
  background: var(--primary);
  color: #fff;
  text-decoration: none;
}

.item-link   { color: var(--primary-dark); text-decoration: none; font-weight: 500; }
.item-link:hover { text-decoration: underline; }
.category-badge {
  background: var(--surface-sunken);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 0.15rem 0.5rem;
  border-radius: 0;
  font-size: 0.78rem;
  white-space: nowrap;
}

.gear-brand,
.gear-total-weight,
.gear-trips { margin: 0; font-size: 0.8rem; color: var(--text-secondary); }

.col-bar { width: 30%; }

.stat-bar-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.stat-bar {
  height: 10px;
  background: var(--primary);
  border-radius: var(--radius-sm);
  min-width: 2px;
  flex-shrink: 0;
}
.stat-bar--under   { background: var(--success); }
.stat-bar--close   { background: var(--warning); }
.stat-bar--over    { background: var(--danger); }
.stat-bar--unknown { background: var(--secondary); }
.stat-bar-label { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }

/* --- Badges --- */
.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

.badge-admin    { background: #fff3e0; color: #e65100; }
.badge-user     { background: var(--success-light); color: var(--success); }
.badge-active   { background: var(--success-light); color: var(--success); }
.badge-inactive { background: var(--danger-light);  color: var(--danger); }
.badge-you      { background: var(--info-light);    color: var(--info); }

/* Breadcrumb */
.breadcrumb-link {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-top: 0.2rem;
}
.breadcrumb-link:hover { color: var(--primary); text-decoration: underline; }

/* Utility */
.text-muted   { color: var(--text-muted); font-size: 0.85rem; }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-center  { text-align: center; }

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

/* --- Detail / Show Pages --- */
.trip-show, .gear-show {
  background: var(--surface);
  padding: 2rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.table-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: auto;
  box-shadow: var(--shadow-sm);
}

.trip-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.trip-gear-section, .add-gear-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--light-gray);
  border-radius: 0;
}

/* Detail Pages */
.gear-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.detail-group {
  background: var(--light-gray);
  padding: 1.5rem;
  border-radius: 0;
}

.detail-group dl {
  margin-top: 1rem;
}

.detail-group dt {
  font-weight: 600;
  margin-top: 0.75rem;
}

.detail-group dd {
  margin-left: 1rem;
  color: #666;
}

.gear-usage {
  margin: 2rem 0;
}

.trip-list {
  list-style: none;
  padding-left: 0;
}

.trip-list li {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.trip-list a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.trip-list a:hover {
  text-decoration: underline;
}

/* Gear Tags */
.gear-tag {
  display: inline-block;
  background: var(--primary-color);
  color: white;
  padding: 0.15rem 0.6rem;
  border-radius: 0;
  font-size: 0.8rem;
  margin: 0.1rem 0.25rem 0.1rem 0;
}

/* Responsive */
@media (max-width: 900px) {
  .drag-drop-container { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav {
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    min-height: auto;
    gap: 0.5rem;
  }

  .nav-menu { flex-wrap: wrap; gap: 0; }
  .nav-link { padding: 0.5rem 0.75rem; font-size: 0.8rem; }

  .page-header { flex-direction: column; align-items: flex-start; }
  .form-row   { grid-template-columns: 1fr; }
  .stats-row  { grid-template-columns: 1fr 1fr; }
  .container  { padding: 1rem 0.75rem; }

  .announcement-banner {
    align-items: flex-start;
    margin: 0.75rem auto 0.35rem;
    width: min(100% - 1rem, 680px);
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.5rem; }
  .stats-row  { grid-template-columns: 1fr; }
  .trips-grid { grid-template-columns: 1fr; }
  .filter-bar      { flex-direction: column; align-items: stretch; }
  .view-controls   { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
  .view-toggle     { width: 100%; }
  .view-btn        { flex: 1; text-align: center; }
}

/* --- Drag and Drop Planner --- */

/* --- Collapsible trip card --- */
.trip-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 1rem;
}

.trip-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  background: var(--surface);
}

.trip-card-title-group {
  flex: 1;
  min-width: 0;
}
.trip-card-title-group h1 {
  margin: 0 0 0.2rem;
  font-size: 1.4rem;
}
.trip-card-title-group .trip-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.trip-card-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.trip-stats-inline {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.trip-stat-badge {
  border-radius: 99px;
  padding: 2px 9px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--primary-light);
  color: var(--primary);
  white-space: nowrap;
}
.trip-stat-badge--under { background: rgba(34,197,94,0.12); color: #16a34a; }
.trip-stat-badge--close  { background: rgba(245,158,11,0.12); color: #b45309; }
.trip-stat-badge--over   { background: rgba(239,68,68,0.12);  color: #dc2626; }

.trip-card-chevron {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--transition), transform var(--transition);
  flex-shrink: 0;
}
.trip-card-chevron:hover { border-color: var(--primary); }
.trip-card-chevron svg {
  width: 12px;
  height: 12px;
  transition: transform 0.25s ease;
}
.trip-card--collapsed .trip-card-chevron svg { transform: rotate(-90deg); }

.trip-card-body {
  overflow: hidden;
  max-height: 1200px;
  transition: max-height 0.35s ease;
  border-top: 1px solid var(--border);
}
.trip-card--collapsed .trip-card-body {
  max-height: 0;
}

.trip-card-body .trip-description {
  padding: 0.75rem 1.25rem 0;
}

.trip-card-body .overview-section {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.trip-card-body .overview-section:last-child {
  border-bottom: none;
}

.planner-box {
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  margin-top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* --- Planner top bar --- */
.planner-topbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.planner-topbar-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

.planner-topbar-search {
  flex: none;
  width: 72px;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface);
}

.planner-topbar-nav.category-nav-bar {
  flex: 1;
  border-top: none;
  background: transparent;
  padding: 0;
  min-width: 180px;
}

.planner-topbar-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  flex-shrink: 0;
  margin: 0;
  white-space: nowrap;
}



.planner-columns {
  display: grid;
  grid-template-columns: 1fr 2.5rem 1fr;
}

.planner-col {
  padding: 1.25rem;
}

.planner-col--gear {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  background: var(--surface-sunken);
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.planner-col-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sunken);
  position: relative;
}
.planner-col-divider::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--border);
}

.planner-col--pack {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  background: var(--surface-sunken);
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.planner-col-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border);
}
.planner-col-header h2 {
  margin: 0;
  color: var(--primary);
}
.col-cartoon {
  width: 48px;
  height: 48px;
  color: var(--primary);
  flex-shrink: 0;
  opacity: 0.85;
}

.wizard-scroll-area,
.pack-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.wizard-col-foot {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  flex-shrink: 0;
  background: var(--surface-sunken);
}

.col-divider-badge {
  position: relative;
  z-index: 1;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--primary);
  color: var(--text-on-primary);
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--surface-sunken);
  box-shadow: 0 2px 10px rgba(41,46,51,0.22);
  cursor: default;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.col-divider-badge svg {
  width: 1.1rem;
  height: 1.1rem;
}

.col-divider-badge--active {
  cursor: pointer;
  box-shadow: 0 2px 18px rgba(0,0,0,0.38);
}
.col-divider-badge--active:hover { transform: scale(1.15); }

.divider-icon--right,
.divider-icon--left { display: none; }

.col-divider-badge--add .divider-icon--both  { display: none; }
.col-divider-badge--add .divider-icon--right { display: block; }

.col-divider-badge--remove .divider-icon--both { display: none; }
.col-divider-badge--remove .divider-icon--left { display: block; }

.divider-count {
  position: absolute;
  top: -5px;
  right: -5px;
  /* Sun is a background for dark text only — white on it is 2.81:1. */
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: 99px;
  font-size: 0.62rem;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

.planner-col--gear h2,
.planner-col--pack h2 {
  margin-bottom: 0.5rem;
  color: var(--primary);
}

/* Legacy classes kept for pack planner (packs/show) */
.available-gear-panel,
.trip-gear-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.available-gear-panel {
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.available-gear-panel h2,
.trip-gear-panel h2 {
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.help-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.review-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.review-cta__start {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  min-width: 220px;
}

.review-cta__mark-reviewed {
  opacity: 0.88;
}

.planner-gear-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.gear-category-group h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gear-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.available-gear-panel .gear-card,
.planner-col--gear .gear-card {
  background: var(--surface);
  /* White cards on the sunken ground need the darker hairline to separate. */
  border: 1.5px solid var(--border-sunken);
  border-radius: 10px;
  padding: 0.65rem;
  gap: 0.35rem;
  overflow: visible;
  box-shadow: none;
  cursor: default;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.gear-card.draggable { cursor: grab; }
.gear-card.draggable:active { cursor: grabbing; }

.gear-card.dragging {
  opacity: 0.45;
  border-style: dashed;
}

.gear-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 122, 80, 0.15);
  transform: translateY(-2px);
}

.gear-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.gear-card-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.gear-card-header strong {
  font-size: 0.9rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gear-card-brand {
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.available-gear-panel .gear-weight {
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--surface);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
}

.planner-col--gear .gear-weight,
.planner-col--pack .gear-weight {
  color: var(--primary-dark);
  font-weight: 700;
  background: none;
  padding: 0;
}

.gear-card-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.gear-card-notes {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.2rem;
}

.gear-filter-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.gear-search-input {
  flex: 1;
  min-width: 120px;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0;
  font-size: 0.9rem;
}

.gear-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 122, 80, 0.18);
}

.gear-category-filter {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
}

.gear-category-filter:focus {
  outline: none;
  border-color: var(--primary-color);
}

.gear-no-results {
  color: var(--text-muted);
  text-align: center;
  padding: 1.5rem 0;
  font-size: 0.95rem;
}

.gear-card.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(59, 122, 80, 0.22);
}

.gear-multiselect-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 2px solid var(--primary);
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  border-radius: 0;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
}

.multiselect-count {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.multiselect-actions {
  display: flex;
  gap: 0.5rem;
}

.trip-gear-drop-zone {
  min-height: 380px;
  border: 2px dashed transparent;
  border-radius: var(--radius);
  padding: 1rem;
  transition: border-color 0.2s, background 0.2s;
}

.trip-gear-drop-zone.drag-over {
  border-color: var(--primary);
  background: var(--primary-light);
}

.empty-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  color: var(--text-muted);
  text-align: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem;
}

.empty-pack-svg {
  width: 80px;
  height: 80px;
  color: var(--border);
  opacity: 0.7;
  margin-bottom: 0.25rem;
}

.empty-drop-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

.trip-gear-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.trip-category-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.category-header {
  font-size: 1rem;
  color: var(--secondary-color);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 0.5rem;
}

.trip-gear-item {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.9rem;
  transition: box-shadow var(--transition);
}

.trip-gear-item:hover { box-shadow: var(--shadow); }
.trip-gear-item.packed { background: var(--success-light); border-color: rgba(22,163,74,0.3); }

.trip-gear-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.trip-gear-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Without the gap long names butt against the quantity label; German's
     "Anz.:" is wider than "Qty:". */
  gap: 0.75rem;
}

.packed-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  flex: 1;
}

.packed-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.packed-checkbox input[type="checkbox"]:checked + .gear-name {
  text-decoration: line-through;
  opacity: 0.7;
}

.gear-name {
  font-weight: 500;
  font-size: 1rem;
}

.gear-quantity {
  font-size: 0.9rem;
  color: var(--text-secondary);
  background: var(--light-gray);
  padding: 0.25rem 0.75rem;
  border-radius: 0;
}

.trip-gear-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.gear-weight-each,
.gear-weight-total {
  padding: 0.25rem 0.5rem;
  background: var(--light-gray);
  border-radius: 0;
}

.gear-weight-total {
  font-weight: 500;
  color: var(--primary-color);
}

.btn-remove {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0;
  transition: all 0.2s;
}

.btn-remove:hover {
  background: var(--danger-light);
  transform: scale(1.15);
}


@media (max-width: 768px) {
  .drag-drop-container { grid-template-columns: 1fr; }
  .planner-columns { grid-template-columns: 1fr; }
  .planner-col-divider { display: none; }
  .planner-col--gear {
    border-bottom: 1px solid var(--border);
    max-height: 70vh;
  }
  .planner-col--pack { max-height: 70vh; }
  .gear-items { grid-template-columns: 1fr; }
}

/* --- Trip Pack Panel – distinct background --- */
.trip-gear-panel {
  background: var(--surface-raised);
  overflow: hidden;
}

.stat-cartoon {
  width: 26px;
  height: 26px;
  color: var(--primary);
  flex-shrink: 0;
}

.pack-weight-bar-track {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin: 0.25rem 0 0.1rem;
}
.pack-weight-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--primary);
  transition: width 0.4s ease;
}
.pack-weight-bar-fill--under { background: var(--success, #22c55e); }
.pack-weight-bar-fill--close { background: var(--warning, #f59e0b); }
.pack-weight-bar-fill--over  { background: var(--danger, #ef4444); }

/* --- Packed gear cards --- */
.trip-gear-panel .gear-card,
.packed-gear-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem;
  gap: 0.35rem;
  overflow: visible;
  box-shadow: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform 0.25s ease-in, opacity 0.25s ease-in;
  cursor: pointer;
  position: relative;
}

.packed-gear-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.packed-gear-card.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.packed-gear-card.removing {
  transform: translateX(60px);
  opacity: 0;
  pointer-events: none;
}

.packed-gear-card.packed {
  border-color: var(--primary);
  background: var(--primary-light);
}

.packed-gear-card.packed .packed-label {
  color: var(--primary-dark);
  font-weight: 600;
}

.packed-card-thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.trip-gear-panel .gear-weight {
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
}

.packed-card-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.packed-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.packed-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.packed-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.gear-qty-badge {
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--primary-light);
  color: var(--primary);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.gear-qty-stepper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: default;
}

.qty-step-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-sunken);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.qty-step-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}

.qty-value {
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 1.5rem;
  text-align: center;
  color: var(--text-primary);
}

.qty-total-weight {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.gear-card-notes-row {
  margin-top: 0.4rem;
  cursor: default;
}

.gear-card-notes-input,
.gear-card-notes-row .form-control--sm {
  width: 100%;
  cursor: text;
}

.gear-card-notes-display {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-card-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.75rem;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity var(--transition), background var(--transition), border-color var(--transition);
}

.packed-gear-card:hover .btn-card-edit,
.btn-card-edit:hover {
  opacity: 1;
  background: var(--primary-light);
  border-color: var(--primary);
}

.inline-edit-form {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}

.inline-edit-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.inline-edit-label {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  gap: 0.2rem;
}

.inline-edit-label--notes { flex: 1; min-width: 100px; }

.form-control--sm {
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  width: 4rem;
}

.inline-edit-label--notes .form-control--sm { width: 100%; }

.pack-list-notes .form-control--sm,
.pack-list-notes .inline-notes { width: 100%; }

.inline-edit-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* --- Category nav bar --- */
.category-nav-bar {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  display: flex;
  align-items: center;
  /* A flex item defaults to min-width: auto; without this the chip row won't
     shrink, pushes the planner sideways on mobile and never scrolls. */
  min-width: 0;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
}

.category-nav-chips {
  flex: 1;
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
  min-width: 0;
}
.category-nav-chips::-webkit-scrollbar { display: none; }

.category-nav-chip {
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  background: none;
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.category-nav-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.category-nav-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-primary);
  font-weight: 600;
}
.category-nav-chip--all {
  border-style: dashed;
}
.category-nav-chip--all.active {
  border-style: solid;
}

.cat-nav-arrow {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: none;
  border: 1.5px solid var(--border);
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  line-height: 1;
  transition: border-color var(--transition), color var(--transition);
}
.cat-nav-arrow:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}
.cat-nav-arrow:disabled { opacity: 0.3; cursor: default; }

/* --- Wizard step navigation --- */
.wizard-step {
  padding: 0.5rem 0 0.75rem;
}

.wizard-step-header {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  margin-bottom: 0.75rem;
  padding: 0.4rem 0.75rem;
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  border-radius: 0 6px 6px 0;
}

.wizard-step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
}

.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  margin-top: 0;
}

.wizard-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.wizard-step-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.step-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}

.step-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  display: inline-block;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  padding: 2px;
  box-sizing: content-box;
  margin: -2px;
}

.step-dot:hover { background: var(--primary-hover, var(--primary)); transform: scale(1.3); }
.step-dot.active { background: var(--primary); }

.dot-nav-btn {
  background: none;
  border: none;
  padding: 0 2px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: color var(--transition);
}
.dot-nav-btn:hover:not(:disabled) { color: var(--primary); }
.dot-nav-btn:disabled { opacity: 0.3; cursor: default; }

.wizard-buttons {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.btn-outline {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: none;
  cursor: pointer;
  color: var(--text-secondary);
  transition: border-color var(--transition), color var(--transition);
}
.btn-outline:hover, .btn-outline.active {
  border-color: var(--primary);
  color: var(--primary);
}

.wizard-load-pack,
.wizard-save-pack {
  margin-bottom: 1rem;
}

.load-pack-form,
.save-pack-form {
  display: contents;
}

.load-pack-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.gear-multiselect-bar--always {
  display: flex !important;
  margin-top: 0.75rem;
}

/* --- Overview tab --- */
.overview-panel {
  max-width: 700px;
}

.overview-panel h2 {
  margin-bottom: 1.25rem;
  color: var(--primary);
}

.overview-totals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.overview-section {
  margin-bottom: 2rem;
}

.overview-section h3 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  padding-bottom: 0;
  border-bottom: none;
}

.category-weight-row {
  display: grid;
  grid-template-columns: 8rem 1fr 4rem 2.5rem;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.cat-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weight-bar-track {
  height: 8px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.weight-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  transition: width 0.4s ease;
  min-width: 2px;
}

.cat-weight {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}

.cat-pct {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: right;
}

.missing-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.missing-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .category-weight-row { grid-template-columns: 6rem 1fr 4rem 2rem; gap: 0.4rem; }
  .wizard-nav { flex-direction: column; align-items: flex-start; }
}

/* --- Profile Page --- */
.profile-page {
  max-width: 800px;
  margin: 0 auto;
}

.profile-card {
  background: var(--surface);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.profile-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.profile-field:last-child {
  border-bottom: none;
}

.profile-label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.profile-value {
  color: var(--text-primary);
  font-size: 0.9375rem;
}

.plan-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.plan-badge--free {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.plan-badge--pro {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.plan-badge--premium {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: white;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat {
  background: var(--surface);
  padding: 1.25rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  text-align: center;
}

.stat__value {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profile-actions {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.profile-locale-card {
  margin-top: 1.5rem;
}

/* ── Billing page ──────────────────────────────────────────────────────── */

.billing-page {
  max-width: 860px;
  margin: 0 auto;
}

.billing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--surface);
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}

.billing-banner--pro {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  border-color: var(--primary);
  background: var(--primary-light);
}

.billing-banner__left {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.billing-banner__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.billing-banner__plan {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
}

.billing-banner--pro .billing-banner__plan {
  color: var(--primary-dark);
}

.billing-banner__desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.billing-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.billing-plan-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.billing-plan-card--pro {
  border-color: var(--primary);
}

.billing-plan-card--current {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.billing-plan-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.billing-plan-card__name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.billing-plan-card__badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
}

.billing-plan-card__badge--current {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.billing-plan-card__badge--popular {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.billing-plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.billing-plan-card__amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.billing-plan-card__period {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.billing-plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.billing-plan-card__feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.billing-plan-card__feature--no {
  color: var(--text-muted);
}

.bpf-icon {
  flex-shrink: 0;
  width: 1.1rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.billing-plan-card__feature--yes .bpf-icon {
  color: var(--success, #2e7d32);
}

.billing-plan-card__feature--no .bpf-icon {
  color: var(--text-muted);
}

.billing-plan-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

.billing-plan-card__annual-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

@media (max-width: 600px) {
  .billing-plans {
    grid-template-columns: 1fr;
  }

  .billing-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .profile-stats {
    grid-template-columns: 1fr;
  }
  
  .profile-actions {
    flex-direction: column;
  }
}

/* --- Gear Items Index — inline add row (editing lives in data_table.css) --- */
.btn-add-row {
  margin-top: 1rem;
  width: 100%;
  padding: 0.75rem;
  font-size: 0.95rem;
}

.inline-add-form {
  padding: 1rem 0;
}

.inline-add-fields {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.inline-add-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text-primary);
  flex: 1 1 150px;
}

.inline-add-input--sm {
  flex: 0 1 80px;
}

.inline-add-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

#add-row-form {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  background: var(--surface-sunken);
}

#add-row-form td {
  border-bottom: none;
}

.btn-success {
  background-color: var(--success);
  color: #fff;
  border: 1px solid var(--success);
}

.btn-success:hover {
  background-color: var(--success-dark, #157347);
  border-color: var(--success-dark, #157347);
}

/* ── Checklist page (also used for print) ─────────────────────────────── */

.checklist-page {
  padding: 1.5rem 0 2rem;
}

.checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border);
}

.checklist-header__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--text-primary);
}

.checklist-header__sub {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

.checklist-header__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* The Pro task lists under the pack list. */
.data-table--checklist {
  margin-bottom: 1.5rem;
}

.data-table--checklist tbody tr:hover td { background-color: transparent; }

.checklist-grand-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.6rem;
  border-top: 2px solid var(--border);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Checklist tasks section ─────────────────────────────── */
.checklist-tasks-section {
  margin-top: 2rem;
}

.checklist-tasks-header-row {
  background: var(--surface-sunken);
}

.checklist-tasks-header-row td {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.6rem;
  border-top: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.checklist-tasks-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.checklist-task-row td {
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border-light, #e8e8e8);
  vertical-align: middle;
}

.checklist-task-col--complete {
  width: 2.5rem;
  text-align: center;
}

.checklist-task-col--complete form { display: contents; }

.checklist-task-complete {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 50%;
  transition: color 0.15s;
}

.checklist-task-complete:hover { color: var(--color-success, #16a34a); }

.checklist-task-complete svg {
  width: 1rem;
  height: 1rem;
}

.checklist-task-col--title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.checklist-task-priority {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.checklist-task-priority--high   { background: #dc2626; }
.checklist-task-priority--medium { background: #ea8c00; }
.checklist-task-priority--low    { background: var(--border-color); border: 1px solid var(--text-muted); }

.checklist-task-title { flex: 1; }

.checklist-task-title--overdue { color: var(--danger); }

.checklist-task-context {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.checklist-task-col--due {
  text-align: right;
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
  width: 5rem;
}

.checklist-task-due--overdue {
  color: var(--danger);
  font-weight: 600;
}

.checklist-tasks-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Print styles ─────────────────────────────────────────────────────── */

.print-only { display: none; }

@media print {
  .no-print,
  .header,
  .footer,
  .layouts-flash {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .container {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  .checklist-page {
    max-width: 100%;
    padding: 0;
  }

  .checklist-header {
    border-bottom-color: #000;
  }

  .pack-group__head {
    background-color: #f0f0f0 !important;
    color: #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* The folded Packed group prints open: the sheet lists everything. */
  .pack-page .pack-group__rows[hidden] { display: block !important; }

  .pack-group__chevron { display: none; }

  .pack-row { border-bottom-color: #aaa; }

  .data-table--checklist {
    border-color: #aaa;
  }

  .data-table--checklist th {
    background: none;
    text-transform: none;
    letter-spacing: normal;
  }

  a[href]::after {
    content: none !important;
  }
}


/* === Mobile Navigation — Hamburger + Drawer === */

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background var(--transition);
}

.nav-hamburger:hover {
  background: rgba(41, 46, 51, 0.06);
}

.nav-hamburger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav--open .nav-hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav--open .nav-hamburger__bar:nth-child(2) {
  opacity: 0;
}
.nav--open .nav-hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 2px solid var(--primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 200;
  overflow-y: auto;
  max-height: calc(100dvh - 64px);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.mobile-menu__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 199;
  backdrop-filter: blur(2px);
}

.nav--open .mobile-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav--open .mobile-menu__overlay {
  display: block;
}

.nav__list,
.mobile-menu__list {
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
}

.mobile-menu__list {
  border-bottom: 1px solid var(--border);
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  padding: 0.875rem 1.25rem;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  min-height: 44px;
  transition: background var(--transition), color var(--transition);
}

.mobile-menu__link:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
  text-decoration: none;
}

.mobile-menu__link.nav-link--active {
  color: var(--primary);
  font-weight: 700;
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
  padding-left: calc(1.25rem - 3px);
}

.mobile-menu__link--admin {
  color: var(--danger);
}

.mobile-menu__link--admin:hover {
  background: rgba(220, 38, 38, 0.08);
}

.mobile-menu__profile {
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
}

.mobile-menu__profile-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  color: var(--text-primary);
  text-decoration: none;
  min-height: 52px;
  transition: background var(--transition), color var(--transition);
}

.mobile-menu__profile-link:hover {
  background: var(--surface-sunken);
  color: var(--primary);
  text-decoration: none;
}

.mobile-menu__profile-avatar {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.mobile-menu__profile-name {
  flex: 1;
  font-weight: 500;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-menu__profile-chevron {
  font-size: 1.25rem;
  color: var(--text-muted);
  flex-shrink: 0;
  line-height: 1;
}

.mobile-menu__lang {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
  flex-wrap: wrap;
}

.mobile-menu__lang-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.mobile-menu__lang-options {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.mobile-menu__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  font-family: inherit;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
  min-height: 36px;
}

.mobile-menu__lang-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.mobile-menu__lang-btn--active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.mobile-menu__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
}

.mobile-menu__logout-btn {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  transition: background var(--transition);
  min-height: 44px;
}

.mobile-menu__logout-btn:hover {
  background: var(--primary-dark);
}

.mobile-menu__footer--public {
  gap: 0.5rem;
}

.mobile-menu__footer-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  background: var(--surface);
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  min-height: 44px;
  text-decoration: none;
  transition: background var(--transition);
}

.mobile-menu__footer-link:hover {
  background: var(--surface-sunken);
  text-decoration: none;
}

.mobile-menu__footer-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  min-height: 44px;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition);
}

.mobile-menu__footer-btn:hover {
  background: var(--primary-dark);
  text-decoration: none;
}

/* === Mobile — scroll-shrink header (.header--scrolled, set by MobileNavController) === */

@media (max-width: 768px) {
  .nav,
  .public-nav {
    min-height: 56px;
  }

  .header--scrolled .nav,
  .header--scrolled .public-nav {
    min-height: 44px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .header--scrolled .nav-brand-text {
    opacity: 0;
    max-width: 0;
  }

  .header--scrolled .mobile-menu {
    max-height: calc(100dvh - 44px);
  }

  .header--scrolled,
  .public-header.header--scrolled {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 1px 0 var(--border);
  }
}

/* === Mobile — global responsive overrides === */

@media (max-width: 900px) {
  .card-grid-2col,
  .gear-grid-2col,
  .stats-2col {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* The public row of four and its actions need about 860px in German. */
@media (max-width: 960px) {
  .public-header .nav-hamburger { display: flex; }
  .public-nav__links,
  .public-nav__actions { display: none; }
  .public-header .mobile-menu { display: block; }
}

@media (max-width: 768px) {
  .nav-hamburger { display: flex; }
  .nav-menu      { display: none; }
  .nav-user      { display: none; }

  .mobile-menu        { display: block; }
  /* The mobile nav is 56px tall here, not 64px. */
  .mobile-menu        { max-height: calc(100dvh - 56px); }

  .header,
  .public-header {
    position: sticky;
    top: 0;
    overflow: visible;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-danger {
    min-height: 44px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
  }

  .card-grid,
  .gear-grid {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-bar input,
  .filter-bar select {
    width: 100%;
  }

  .stats-row {
    grid-template-columns: 1fr 1fr;
  }

  .flash {
    border-radius: 0;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
  }
}

@media (max-width: 480px) {
  .stats-row {
    grid-template-columns: 1fr;
  }

  .nav-brand-text {
    display: none;
  }

  .container {
    padding: 0.75rem 0.625rem;
  }

  .btn-primary--block,
  .form-actions .btn-primary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .trips-grid,
  .packs-grid {
    grid-template-columns: 1fr;
  }

  h1 { font-size: 1.375rem; }
  h2 { font-size: 1.25rem; }
}

/* ── Pack cards ────────────────────────────────────────────────────────── */

.packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

.packs-summary {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

.packs-summary__stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.packs-summary__value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}

.packs-summary__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.pack-card-wrap {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s, box-shadow 0.18s;
}

.pack-card-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
}

.pack-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.25rem;
  text-decoration: none;
  color: var(--text-primary);
  flex: 1;
}

.pack-card:hover { text-decoration: none; }

.pack-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.pack-card__title-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pack-card__name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  color: var(--text-primary);
}

.pack-card__type-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.pack-card__transport {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.pack-card__stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.pack-card__stat {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.pack-card__stat strong {
  color: var(--text-primary);
}

.pack-card__limit {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.pack-card__bar {
  margin-top: 0.25rem;
}

.pack-card__actions {
  display: flex;
  border-top: 1px solid var(--border);
}

.pack-card__action-btn {
  flex: 1;
  padding: 0.55rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
}

.pack-card__action-btn + .pack-card__action-btn {
  border-left: 1px solid var(--border);
}

.pack-card__action-btn:hover {
  background: var(--surface-raised);
  color: var(--text-primary);
  text-decoration: none;
}

.pack-card__action-btn--danger:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

/* === Mobile companion UX ===
   The planner, optimizer and admin are deliberately left desktop-only. */

.offline-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: var(--warning-light);
  color: var(--warning-dark);
  font-size: 0.88rem;
  font-weight: 600;
}
.offline-banner[hidden] { display: none; }
.offline-banner__text { flex: 1 1 12rem; min-width: 0; }
.offline-banner__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  color: var(--warning-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.offline-banner__link[hidden] { display: none; }

/* In flow, not sticky: a sticky bar would compete with the sticky header and the checklist progress bar. */
.visit-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0 0 1rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--accent);
  background: var(--accent-tint);
  color: var(--accent-text);
  font-size: 0.85rem;
  font-weight: 600;
}
.visit-bar__text { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.visit-bar__form { margin: 0 0 0 auto; }
.visit-bar__switch {
  min-height: 44px;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--primary-dark);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Set by offline_lock_controller.js on controls that need the server. */
[data-offline-locked] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* A tick queued offline (offline_ticks.js), inside the tick's label. */
.tick-waiting {
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--warning-light);
  color: var(--warning-dark);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Bottom navigation ──────────────────────────────────────────────────── */

.bottom-nav { display: none; }

@media (max-width: 768px) {
  .bottom-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Under the drawer overlay (199) so an open menu covers it, above content. */
    z-index: 150;
    background: var(--surface);
    border-top: 1px solid var(--border);
    /* Clears the iOS home indicator without leaving a gap on other devices. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  }

  .bottom-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-height: var(--bottom-nav-h);
    padding: 0.3rem 0.25rem;
    background: none;
    border: 0;
    font: inherit;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
  }

  .bottom-nav__link--active { color: var(--primary); }

  .bottom-nav__icon {
    display: block;
    width: 22px;
    height: 22px;
  }

  .bottom-nav__icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .bottom-nav__label {
    font-size: 0.7rem;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The application layout sets this class only on pages that render the bottom nav. */
  body.has-bottom-nav {
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Floating action button ─────────────────────────────────────────────── */

.fab { display: none; }

@media (max-width: 768px) {
  .fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 1rem;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 1rem);
    z-index: 160;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--text-on-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    text-decoration: none;
  }

  .fab__icon {
    display: block;
    width: 24px;
    height: 24px;
  }

  .fab__icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.nav--open ~ .container .fab,
.nav--open ~ main .fab {
  display: none;
}

/* ── Packing progress ───────────────────────────────────────────────────── */

.checklist-progress {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 1rem 0;
}

.checklist-progress__bar {
  height: 8px;
  border-radius: 4px;
  background: var(--divider);
  overflow: hidden;
}

.checklist-progress__fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.2s ease;
}

.checklist-progress__text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Hidden until the controller reports a failed save. */
.checklist-save-error { display: none; }

.checklist-page--error .checklist-save-error {
  display: block;
  margin: 0 0 1rem;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  background: #fdecec;
  color: #8a1c1c;
  font-size: 0.9rem;
}

/* ── Checklist tick target ──────────────────────────────────────────────── */

.checklist-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.checklist-check input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.checklist-check__box {
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid var(--text-disabled);
  background: var(--surface);
  transition: background 0.15s, border-color 0.15s;
}

.checklist-check__box::after {
  content: "";
  display: block;
  width: 6px;
  height: 11px;
  margin: 0 auto;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
  opacity: 0;
}

.checklist-check input:checked + .checklist-check__box {
  background: var(--primary);
  border-color: var(--primary);
}

.checklist-check input:checked + .checklist-check__box::after { opacity: 1; }

.checklist-check input:focus-visible + .checklist-check__box {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Pack list ──────────────────────────────────────────────────────────── */

.pack-page [hidden] { display: none !important; }

/* A ticked row leaves its group; Chrome's scroll anchoring would nudge the page to compensate. */
.pack-page { overflow-anchor: none; }

.pack-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 36px;
  margin: 0 0 1rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.pack-back .icon svg { width: 14px; height: 14px; }

.pack-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg);
}

.pack-bar .checklist-progress {
  flex: 1;
  min-width: 0;
  margin: 0.75rem 0;
}

.pack-bar__menu { flex: none; }

.pack-addbar { margin: 0 0 1rem; }

.pack-addbar__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: var(--primary-dark);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.pack-addbar__link .icon svg { width: 18px; height: 18px; }

.pack-addbar__hint,
.pack-addbar__note {
  margin-left: auto;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* offline_lock_controller.js marks the link; the words replace the hint. */
.pack-addbar__note { display: none; }
.pack-addbar__link[data-offline-locked] .pack-addbar__hint { display: none; }
.pack-addbar__link[data-offline-locked] .pack-addbar__note { display: inline; }

.pack-group { margin-top: 0.6rem; }

.pack-group__head,
.pack-group__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0 0.75rem;
  border: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.pack-group--packed .pack-group__head { padding: 0; }

.pack-group__toggle {
  border: 0;
  cursor: pointer;
}

.pack-group__name { display: inline-flex; align-items: center; gap: 0.4rem; }

.pack-group__count {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.pack-group__head .tick-waiting {
  letter-spacing: 0;
  text-transform: none;
}

.pack-group__sum {
  margin-left: auto;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.pack-group__chevron svg {
  width: 14px;
  height: 14px;
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}

.pack-group--open .pack-group__chevron svg { transform: none; }

.pack-group__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pack-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 54px;
  padding: 0.25rem 0.75rem 0.25rem 0;
  border-bottom: 1px solid var(--divider);
  background: var(--surface);
}

.pack-row:has(.pack-row__select:checked) { background: var(--primary-light); }

.pack-row .checklist-check { flex: none; }

.pack-row__select {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0 11px;
  accent-color: var(--primary);
}

.pack-row__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.35rem 0.25rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pack-row__main:hover { background: var(--surface-sunken); }

.pack-row__name {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.pack-row__notes { font-style: italic; }
.pack-row__notes:empty { display: none; }

.pack-row__weight {
  flex: none;
  min-width: 3.5rem;
  padding-left: 0.5rem;
  font-size: 0.93rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.checklist-row--packed .pack-row__name {
  color: var(--text-muted);
  text-decoration: line-through;
}

.pack-pill {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.35rem;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  vertical-align: 1px;
}

/* Select mode swaps the packed tick for a selection box. */
.pack-page--selecting .checklist-check,
.pack-page--selecting .pack-addbar { display: none; }

.pack-sheet {
  width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0.75rem 1.25rem 1.25rem;
  overflow: auto;
  border: 1px solid var(--border);
  border-top: 2px solid var(--primary);
  background: var(--surface);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
  color: var(--text-primary);
}

.pack-sheet::backdrop { background: rgba(41, 46, 51, 0.45); }

.pack-sheet__head { display: flex; align-items: flex-start; gap: 0.75rem; }

.pack-sheet__title {
  flex: 1;
  margin: 0.4rem 0 0;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.3;
}

.pack-sheet__close {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -0.75rem;
  border: 0;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}

.pack-sheet__meta { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--text-muted); }
.pack-sheet__worn-note { margin: 0 0 0.5rem; font-size: 0.8rem; }

.pack-sheet__gear-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-size: 0.85rem;
  font-weight: 600;
}

.pack-sheet__field { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; }
.pack-sheet__field label { font-size: 0.85rem; font-weight: 700; }

.pack-sheet__error {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  background: var(--danger-light);
  color: var(--danger-dark);
  font-size: 0.85rem;
}

.pack-sheet__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.pack-sheet__remove { color: var(--danger); }

.pack-sheet__offline { display: none; margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--text-muted); }
.pack-sheet:has([data-offline-locked]) .pack-sheet__offline { display: block; }

@media (max-width: 768px) {
  /* The sheet sits on the bottom edge, the way the card draws it. */
  .pack-sheet {
    width: 100%;
    max-width: none;
    max-height: 85dvh;
    margin: auto 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }

  /* Room under the list for the add bar. */
  .pack-page { padding-bottom: 5rem; }

  /* Both the site header and this bar are sticky. The bar sticks just below the
     header, whose measured height checklist_controller.js publishes. */
  .pack-bar {
    position: sticky;
    top: var(--site-header-h, 3.5rem);
    z-index: 90;
    border-bottom: 1px solid var(--divider);
  }

  .pack-bar .checklist-progress { margin: 0.5rem 0; }

  .pack-addbar {
    position: fixed;
    right: 0;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    left: 0;
    z-index: 120;
    margin: 0;
    padding: 0.55rem 1rem;
    background: linear-gradient(to top, var(--bg) 72%, rgba(252, 251, 244, 0));
  }
}

/* ── Page headers ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 0.65rem;
    margin-bottom: 1rem;
  }

  .page-header h1 {
    margin: 0;
    font-size: 1.4rem;
  }

  /* Without this the badges stretch to the Edit/Delete buttons' height and
     border-radius: 99px turns them into circles. */
  .header-actions { align-items: center; }
}

/* ── Tab rows scroll rather than crush ──────────────────────────────────── */

@media (max-width: 768px) {
  .article-filters {
    margin: 1.25rem 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .article-filters::-webkit-scrollbar { display: none; }

  .filter-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.75rem 1rem;
    white-space: nowrap;
  }
}

/* ── Forms as full-width sheets ─────────────────────────────────────────── */

@media (max-width: 768px) {
  .form-row { display: block; }

  .form-row > * + * { margin-top: 1rem; }

  /* 16 px is the threshold below which iOS Safari zooms the viewport on focus,
     and it does not zoom back out afterwards. */
  .form-control,
  .filter-input,
  .filter-select {
    min-height: 44px;
    font-size: 16px;
  }

  .form-actions {
    position: sticky;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    z-index: 80;
    display: flex;
    /* The base rule wraps, which stacks the pair into two full-width rows here. */
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin: 1.5rem -1rem 0;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
  }

  /* `1 1 0` rather than `1 1 auto`: sizing from content would give "Create Gear
     item" three times the width of "Cancel". */
  .form-actions > * {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-align: center;
  }

  form { padding-bottom: 1rem; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
  /* .bottom-nav lives inside .header, which the print block above already hides. */
  .fab,
  .checklist-progress,
  .checklist-save-error {
    display: none !important;
  }
}