:root {
      --bg: #f4f6f8;
      --surface: #ffffff;
      --surface-soft: #f8fafc;
      --surface-muted: #eef2f6;
      --line: #d9e0e7;
      --line-soft: #edf1f5;
      --text: #18202a;
      --text-muted: #6b7583;
      --text-light: #9aa5b1;
      --accent: #1f6f5b;
      --accent-soft: #eaf6f1;
      --accent-soft-strong: #dff0e8;
      --warning-soft: #fff8e8;
      --danger: #b42318;
      --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
      --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 18px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      margin: 0;
      padding: 0.85rem;
      background:
        radial-gradient(circle at top left, rgba(31, 111, 91, 0.08), transparent 32rem),
        var(--bg);
      color: var(--text);
      line-height: 1.32;
    }


    a {
      color: inherit;
    }

    h2, h3, h4 {
      color: var(--text);
      letter-spacing: -0.02em;
    }

    h2 {
      margin: 0;
      text-align: center;
      font-size: clamp(1.45rem, 2.4vw, 1.95rem);
      font-weight: 750;
    }

    h3 {
      margin: 1.15rem auto 0.55rem;
      max-width: 1840px;
      text-align: left;
      font-size: 1.08rem;
      font-weight: 750;
    }

    h4 {
      margin: 0;
      text-align: center;
      font-size: 0.92rem;
      font-weight: 700;
    }

    .inline { display: inline; }
    .hidden { display: none; }
    .center { text-align: center; }
    .nowrap { white-space: nowrap; }
    .ml-small { margin-left: 0.5rem; }
    .mt-small { margin-top: 0.5rem; }

    
    .trip-title-wrap,
    .person {
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(217, 224, 231, 0.95);
      box-shadow: var(--shadow-sm);
    }

    .person-filter-chip {
      cursor: pointer;
      border-style: solid;
    }
.person-filter-hidden {
      display: none !important;
    }

    .trip-title-wrap {
      max-width: 1840px;
      min-height: 72px;
      margin: 0 auto 0.75rem;
      padding: 0.72rem 0.9rem;
      text-align: center;
      border-radius: var(--radius-lg);
      background:
        linear-gradient(135deg, rgba(31,111,91,0.11), rgba(255,255,255,0.96) 48%),
        var(--surface);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    .trip-title-wrap > form {
      position: relative;
      z-index: 2;
      width: min(100%, 54rem);
    }

    .trip-title-wrap h2 .data-display {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .trip-title-wrap h2 .data-display::after{
      content: "✎";
      color: var(--text-light);
      font-size: 0.72em;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .trip-title-wrap h2 .data-display:hover::after{
      opacity: 1;
    }

    .data-display {
      cursor: pointer;
      border-radius: 5px;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .data-display:hover {
      background: rgba(31,111,91,0.08);
    }

    .inline-text-form .data-input:not(.hidden),
    .lazy-inline-field .data-input:not(.hidden) {
      display: inline-block;
      vertical-align: baseline;
    }

    .lazy-inline-field {
      display: inline;
    }

    .lazy-inline-field.saving .data-input {
      opacity: .72;
    }

    .title-input {
      width: min(100%, 28rem);
      min-width: 12rem;
      max-width: 100%;
      padding: 0.2rem 0.45rem;
      text-align: center;
      font: inherit;
      font-weight: inherit;
      line-height: 1.2;
      border: 1px solid var(--line);
      border-radius: 9px;
      box-sizing: border-box;
    }

    h2 .title-input {
      font-size: clamp(1.25rem, 2vw, 1.75rem);
    }

    h4 .title-input {
      font-size: 0.92rem;
      min-width: 8rem;
      max-width: 18rem;
    }

    .information,
    .no-information {
      font-size: 0.78em;
      display: inline-block;
      width: 100%;
      word-wrap: break-word;
      margin-top: 0.22rem;
    }

    .information {
      text-align: left;
      color: var(--text-muted);
      line-height: 1.22;
    }

    .no-information {
      color: #c2c9d1;
      text-align: right;
    }

    .no-information:hover,
    .information:hover {
      color: var(--text);
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 24px;
      padding: 0.2rem 0.48rem;
      border-radius: 999px;
      background: var(--surface-soft);
      border: 1px solid var(--line);
      color: var(--text-muted);
      text-decoration: none;
      font-size: 0.82em;
      line-height: 1.1;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    }

    .tag:hover {
      background: #fff;
      color: var(--text);
      border-color: #bfc8d2;
      transform: translateY(-1px);
    }

    .tag.selected {
      background: var(--accent-soft);
      color: var(--accent);
      border-color: rgba(31,111,91,0.25);
      font-weight: 700;
      text-decoration: none;
    }

    .tag-add {
      background: #fff;
      color: var(--accent);
      cursor: pointer;
      font-weight: 650;
      border-style: dashed;
    }

    .tag-btn,
    .icon-btn {
      all: unset;
      font-size: 1em;
      color: #a5afba;
      cursor: pointer;
      line-height: 1;
    }

    .tag-btn:hover,
    .icon-btn:hover {
      color: var(--danger);
    }

    .inline-form {
      display: inline;
    }

    .inline-form input[type="text"],
    .inline-form select,
    #trip-add-form input[type="text"],
    #participant-add-container input[type="text"],
    #participant-add-container select {
      padding: 0.36rem 0.55rem;
      font-size: 0.82em;
      margin-right: 4px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      height: 27px;
      background: #fff;
      color: var(--text);
      vertical-align: middle;
    }

    textarea.data-input {
      font: inherit;
      font-size: 0.85em;
      padding: 0.45rem 0.55rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--line);
      resize: none;
      overflow: hidden;
      min-height: 56px;
      min-width: 100%;
      margin-top: 0.5rem;
      background: #fff;
    }

    .row {
      width: 100%;
      max-width: 1840px;
      margin: 0 auto 0.55rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
      gap: 0.6rem;
      align-items: start;
    }

    .person {
      min-width: 0;
      border-radius: 14px;
      padding: 0.42rem;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
      overflow: hidden;
    }

    .person:hover {
      box-shadow: var(--shadow-md);
      border-color: #cbd5df;
    }

    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 0.78em;
      line-height: 1.18;
      margin-top: 0.15rem;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--surface);
      box-shadow: none;
    }

    table.item-table {
      table-layout: fixed;
    }

    th,
    td {
      padding: 0.32rem 0.25rem;
      border-bottom: 1px solid var(--line-soft);
      vertical-align: middle;
    }

    th {
      background: #f6f8fa;
      color: var(--text-muted);
      font-weight: 750;
      border-bottom: 1px solid var(--line);
      text-align: left;
      font-size: 0.78em;
      letter-spacing: 0.01em;
    }

    thead th:first-child {
      color: var(--text);
      font-size: 0.86em;
    }

    th.g { text-align: center; }
    td.bw,
    th.bw { text-align: center; }
    td.g { text-align: right; font-variant-numeric: tabular-nums; }

    tbody tr {
      transition: background 0.15s ease, opacity 0.15s ease;
    }

    table tbody tr:nth-child(odd) {
      background-color: #fbfcfd;
    }

    table.item-table tbody tr.item-row.row-even:not(.camping-item) {
      background-color: #ffffff;
    }

    table.item-table tbody tr.item-row.row-odd:not(.camping-item) {
      background-color: #fbfcfd;
    }

    table.item-table tbody tr.item-row:hover {
      background: #f4f8fb;
    }

    table.item-table tbody tr.camping-item,
    table.item-table tbody tr.camping-item:nth-child(odd),
    table.item-table tbody tr.camping-item:hover {
      background-color: var(--accent-soft);
    }

    table.item-table tbody tr.packed-item {
      filter: grayscale(0.15);
    }

    tfoot td {
      font-weight: 750;
      background: #fbfcfd;
      border-top: 1px solid var(--line);
      border-bottom: none;
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }

    .item-row td:nth-child(2) {
      color: var(--text-muted);
      line-height: 1.22;
    }

    .item-row td:nth-child(2) > form:nth-of-type(1) .data-display {
      color: var(--text);
      font-weight: 700;
    }

    .item-row td:nth-child(2) > form:nth-of-type(2) .data-display {
      color: var(--text);
      font-weight: 500;
    }

    .item-row td:nth-child(2) > form:nth-of-type(3) .data-display {
      color: var(--text-light);
      font-size: 0.86em;
    }

    .add-trigger {
      cursor: pointer;
      color: var(--text-muted);
      font-size: 0.95em;
      display: inline-block;
      padding: 4px 8px;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      min-height: 24px;
      line-height: 1.2;
      vertical-align: middle;
    }

    .add-trigger:hover {
      color: var(--accent);
      background: var(--accent-soft);
      text-decoration: none;
    }

    .add-form,
    .new-form {
      margin: 0;
    }

    .new-form {
      margin-top: 5px;
    }

    .add-form select {
      font-size: 0.85em;
      margin-right: 5px;
    }

    .new-form input {
      font-size: 0.85em;
      margin: 2px;
    }

    .input-short { width: 80px; }
    .input-small { width: 40px; }
    .input-nutrition { width: 50px; }

    input[type=number],
    input[type=text],
    select {
      padding: 0.18rem 0.32rem;
      font-size: 1em;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      color: var(--text);
      background: transparent;
    }

    input[type=number] {
      width: 52px;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type=number] {
      appearance: textfield;
      -moz-appearance: textfield;
    }

    .qty-input {
      width: 38px;
      min-width: 38px;
      height: 25px;
      padding: 0.12rem 0.22rem;
      text-align: center;
      border: 1px solid var(--line-soft);
      background: #fff;
      border-radius: 9px;
    }

    .qty-input:focus {
      outline: none;
      border-color: rgba(31,111,91,0.55);
      box-shadow: 0 0 0 3px rgba(31,111,91,0.10);
    }

    input.data-input {
      background: #fff;
      border-color: var(--line);
      box-shadow: 0 0 0 3px rgba(31,111,91,0.08);
    }

    button {
      padding: 0.33rem 0.55rem;
      font-size: 0.9em;
      cursor: pointer;
      border-radius: var(--radius-sm);
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    }

    button:hover {
      background: var(--surface-soft);
      border-color: #bdc7d2;
    }

    button:active {
      transform: translateY(1px);
    }

    button.arrow-btn,
    button.qty-btn,
    button.confirm-btn,
    button.unconfirm-btn {
      border: none;
      background: none;
      font: inherit;
      cursor: pointer;
      padding: 0;
      line-height: 1;
      border-radius: 999px;
    }

    button.qty-btn {
      width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #aab4bf;
      background: transparent;
      font-weight: 750;
    }

    button.qty-btn:hover {
      color: var(--accent);
      background: var(--accent-soft-strong);
    }

    .qty-value {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.35rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--text);
    }

    button.confirm-btn {
      color: #c0c8d1;
    }

    button.unconfirm-btn {
      color: var(--accent);
      font-weight: 800;
    }

    button.confirm-btn:hover,
    button.unconfirm-btn:hover {
      color: var(--text);
      background: transparent;
    }

    button.arrow-btn {
      color: var(--text-muted);
      font-size: 1.2em;
      margin-left: 4px;
    }

    button.arrow-btn:hover {
      color: var(--danger);
    }

    .weight-edit-button {
      width: 92px;
      min-width: 92px;
      max-width: 92px;
      min-height: 27px;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.35rem;
      padding: 0.24rem 0.34rem;
      border: 1px solid var(--line-soft);
      border-radius: 7px;
      background: #fff;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      text-align: right;
    }

    .weight-edit-button:hover {
      border-color: rgba(31,111,91,0.45);
      background: var(--accent-soft);
      color: var(--accent);
    }

    .row-weight-display {
      display: inline-block;
      min-width: 56px;
      white-space: nowrap;
      text-align: right;
    }

    .row-weight-display i {
      white-space: nowrap;
    }

    .weight-confirmed-dot {
      width: 11px;
      min-width: 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0.18;
      color: var(--text-light);
      font-weight: 800;
      line-height: 1;
    }

    .weight-confirmed-dot.is-confirmed {
      opacity: 1;
      color: var(--accent);
    }

    .measure-span {
      visibility: hidden;
      position: absolute;
      white-space: pre;
      font: inherit;
      padding: 0;
    }

    .packed-checkbox {
      transform: scale(1.08);
      cursor: pointer;
      accent-color: var(--accent);
    }

    .packed-checkbox:hover {
      filter: brightness(1.08);
    }

    .nutrition-toggle {
      background: transparent;
      border: none;
      font-size: 1em;
      cursor: pointer;
      padding: 0 6px 0 0;
      color: var(--text-muted);
    }

    .nutrition-toggle:hover {
      color: var(--accent);
      background: transparent;
    }

    .nutrition-row {
      display: flex;
      gap: 6px;
      margin-top: 0.25rem;
      font-size: 0.85em;
    }

    .nutrition-row form {
      display: flex;
      gap: 0.35rem;
      flex-wrap: wrap;
      align-items: center;
      padding: 0.24rem;
      border-radius: var(--radius-sm);
      background: var(--warning-soft);
      border: 1px solid #f1e5c9;
    }

    .nutrition-row input {
      width: 46px;
      padding: 0.25rem 0.35rem;
      border: 1px solid #decf9d;
      border-radius: 6px;
      background: #fff;
    }

    .drag-cell {
      text-align: center;
      white-space: nowrap;
      color: #a8b2bd;
      user-select: none;
    }

    .drag-handle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 8px;
      font-size: 1.05em;
      line-height: 1;
      cursor: grab;
      touch-action: none;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .drag-handle:active {
      cursor: grabbing;
    }

    .drag-cell:hover .drag-handle,
    .drag-handle:focus {
      color: var(--text);
      background: var(--surface-muted);
      outline: none;
    }

    tbody.sort-active tr.item-row {
      transition: transform 0.16s ease, opacity 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
    }

    tbody.valid-drop-target {
      outline: 1px dashed rgba(43, 108, 176, 0.35);
      outline-offset: -3px;
      background: rgba(43, 108, 176, 0.025);
    }

    tbody.live-drop-target {
      outline-color: rgba(43, 108, 176, 0.75);
      background: rgba(43, 108, 176, 0.055);
    }

    tr.dragging {
      opacity: 0.62;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16), inset 3px 0 0 var(--accent);
    }

    tr.drag-category-change {
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16), inset 3px 0 0 #16a34a;
    }

    .drag-handle.is-dragging {
      cursor: grabbing;
      color: var(--accent);
      background: var(--accent-soft);
    }

    .saving {
      opacity: 0.65;
    }

    .flash-message {
      max-width: 1840px;
      margin: 0 auto 0.75rem;
      padding: 0.55rem 0.75rem;
      border-radius: 10px;
      font-size: 0.9rem;
      font-weight: 650;
      border: 1px solid transparent;
    }

    .flash-error {
      background: #fff1f1;
      color: #9f1d1d;
      border-color: #f2b8b8;
    }

    .flash-success {
      background: #effaf1;
      color: #1f6f5b;
      border-color: #b9dfc4;
    }

    .ajax-error {
      outline: 2px solid var(--danger);
      outline-offset: -2px;
    }

    .add-item-row td {
      background: #fff;
      border-bottom: none;
      padding: 0.42rem 0.32rem;
    }

    .open-add-modal {
      border: 1px dashed #b7c3ce;
      background: #fff;
      color: var(--accent);
      padding: 0.35rem 0.58rem;
      font-weight: 700;
    }

    .open-add-modal:hover {
      border-color: var(--accent);
      background: var(--accent-soft);
      color: var(--accent);
    }

    .add-item-hint {
      color: var(--text-light);
      font-size: 0.74em;
      margin-left: 0.3rem;
    }
body.modal-open {
      overflow: hidden;
    }

    .item-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.65rem;
    }

    .item-modal.hidden {
      display: none;
    }

    .modal-overlay {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: rgba(17, 24, 39, 0.42);
      backdrop-filter: blur(4px);
    }

    .modal-panel {
      position: relative;
      z-index: 1;
      width: min(720px, 96vw);
      max-height: 90vh;
      overflow: auto;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 24px 70px rgba(16, 24, 40, 0.28);
      padding: 0.85rem;
      border: 1px solid rgba(255,255,255,0.85);
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      align-items: flex-start;
      margin-bottom: 0.6rem;
    }

    .modal-header h3 {
      margin: 0;
      text-align: left;
    }

    .modal-context {
      margin: 0.25rem 0 0;
      color: var(--text-muted);
      font-size: 0.86em;
    }

    .modal-close {
      border: none;
      background: transparent;
      font-size: 1.55rem;
      line-height: 1;
      padding: 0 0.25rem;
      color: var(--text-light);
    }

    .modal-close:hover {
      background: transparent;
      color: var(--text);
    }

    .modal-tabs {
      display: flex;
      gap: 0.35rem;
      border-bottom: 1px solid var(--line);
      margin-bottom: 0.65rem;
    }

    .modal-tab {
      border: none;
      border-radius: 10px 10px 0 0;
      background: transparent;
      color: var(--text-muted);
      padding: 0.42rem 0.68rem;
      font-weight: 650;
    }

    .modal-tab:hover {
      color: var(--text);
      background: var(--surface-soft);
    }

    .modal-tab.active {
      background: #fff;
      border: 1px solid var(--line);
      border-bottom-color: #fff;
      margin-bottom: -1px;
      color: var(--accent);
      font-weight: 800;
    }

    .modal-panel-section.hidden {
      display: none;
    }

    .modal-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.4rem;
    }


    .settings-panel {
      width: min(900px, 96vw);
    }

    .settings-form {
      display: grid;
      gap: 0.75rem;
    }

    .settings-section {
      border: 1px solid var(--line-soft);
      border-radius: 16px;
      background: var(--surface-soft);
      padding: 0.7rem;
    }

    .settings-section-header {
      margin-bottom: 0.55rem;
    }

    .settings-section-header strong {
      display: block;
      color: var(--text);
      font-size: 0.98rem;
    }

    .settings-section-header span {
      display: block;
      margin-top: 0.12rem;
      color: var(--text-muted);
      font-size: 0.82rem;
      line-height: 1.35;
    }

    .settings-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.5rem;
    }

    .settings-field {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .settings-field label {
      color: var(--text-muted);
      font-size: 0.76rem;
      font-weight: 750;
    }

    .settings-field input,
    .settings-field select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 0.45rem 0.52rem;
      min-height: 36px;
      background: #fff;
      color: var(--text);
      font-size: 0.94rem;
    }

    .settings-field select {
      min-height: 36px;
    }

    .settings-field small,
    .settings-note {
      color: var(--text-light);
      font-size: 0.78rem;
      line-height: 1.35;
    }

    .settings-note {
      margin: 0.15rem 0 0;
    }

    @media (max-width: 680px) {
      .settings-grid {
        grid-template-columns: 1fr;
      }
    }

    .modal-field {
      flex-direction: column;
    }

    .modal-field.full {
      grid-column: 1 / -1;
    }

    .modal-field label,
    .modal-qty label,
    .modal-section-label {
      color: var(--text-muted);
      font-size: 0.78em;
      font-weight: 750;
    }

    .modal-field input,
    .modal-field select {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 0.45rem 0.55rem;
      font-size: 0.95em;
      min-height: 34px;
      background: #fff;
      color: var(--text);
    }

    .modal-field input[type=number] {
      width: 100%;
      min-width: 0;
      text-align: left;
    }

    #weight-edit-input {
      width: 100%;
      min-width: 180px;
      max-width: 260px;
      font-size: 1.2rem;
      font-weight: 750;
      text-align: right;
      padding: 0.5rem 0.6rem;
    }

    .modal-field input:focus,
    .modal-field select:focus,
    .modal-qty input:focus,
    .nutrition-row input:focus,
    input.data-input:focus,
    textarea.data-input:focus {
      outline: none;
      border-color: rgba(31,111,91,0.55);
      box-shadow: 0 0 0 4px rgba(31,111,91,0.10);
    }

    .modal-field select {
      min-height: 130px;
    }

    .modal-qty-row {
      display: flex;
      gap: 0.4rem;
      flex-wrap: wrap;
      margin: 0.9rem 0;
      padding: 0.8rem;
      border: 1px solid var(--line-soft);
      border-radius: 14px;
      background: var(--surface-soft);
    }

    .modal-qty {
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .modal-qty input {
      width: 68px;
      min-width: 56px;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 0.42rem;
      background: #fff;
      text-align: center;
    }

    .modal-food-fields {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.5rem;
      padding: 0.55rem;
      border-radius: 14px;
      background: var(--warning-soft);
      border: 1px solid #f1e5c9;
    }

    .modal-food-fields.hidden {
      display: none;
    }

    .modal-actions {
      margin-top: 0.7rem;
    }

    .people-list {
      display: grid;
      gap: 0.4rem;
      margin: 0.4rem 0 0.8rem;
    }

    .people-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.52rem 0.62rem;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: var(--surface-soft);
    }

    .people-row.selected-row {
      border-color: rgba(31,111,91,0.32);
      background: rgba(31,111,91,0.06);
    }

    .people-name,
    .trip-modal-name {
      font-weight: 700;
      color: var(--text);
    }

    .trip-modal-name-form {
      flex: 1 1 220px;
      min-width: 0;
    }

    .trip-modal-name-form input[type="text"] {
      width: 100%;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 10px;
      padding: 0.42rem 0.52rem;
      font-weight: 700;
    }

    .trip-modal-actions {
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0.35rem;
    }

    .trip-media-panel {
      grid-column: 1 / -1;
      margin-top: 0.45rem;
      padding: 0.55rem;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: rgba(248,250,252,0.82);
    }

    .trip-media-panel.has-gpx {
      background: rgba(239,250,241,0.82);
      border-color: rgba(31,111,91,0.22);
    }

    .trip-media-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.42rem;
      color: var(--text-muted);
      font-size: 0.82rem;
      font-weight: 650;
    }

    .trip-media-status {
      font-size: 0.78rem;
      color: var(--text-light);
      font-weight: 600;
    }

    .trip-gpx-form {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) auto;
      gap: 0.45rem;
      align-items: center;
    }

    .trip-gpx-form input[type="file"] {
      width: 100%;
      min-width: 0;
      padding: 0.35rem;
      border: 1px dashed var(--line);
      border-radius: 10px;
      background: #fff;
      font-size: 0.82rem;
    }

    .trip-media-actions {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      flex-wrap: wrap;
    }

    .people-empty {
      margin: 0.35rem 0 0.8rem;
      color: var(--text-muted);
      font-size: 0.9em;
    }

    .people-add-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 0.45rem;
      align-items: end;
      margin-top: 0.45rem;
    }

    .gear-closet-panel {
      width: min(1120px, 98vw);
    }

    .gear-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 0.4rem;
      margin: 0.35rem 0 0.65rem;
    }

    .gear-stat {
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: var(--surface-soft);
      padding: 0.42rem 0.52rem;
    }

    .gear-stat-label {
      display: block;
      color: var(--text-muted);
      font-size: 0.72rem;
      font-weight: 750;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .gear-stat-value {
      display: block;
      margin-top: 0.08rem;
      color: var(--text);
      font-size: 1rem;
      font-weight: 800;
    }

    .gear-filters {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) 180px 150px 150px;
      gap: 0.45rem;
      margin: 0.55rem 0 0.7rem;
      align-items: end;
    }

    .gear-filter-field {
      display: flex;
      flex-direction: column;
      gap: 0.22rem;
    }

    .gear-filter-field label {
      color: var(--text-muted);
      font-size: 0.72rem;
      font-weight: 750;
    }

    .gear-filter-field input,
    .gear-filter-field select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 0.42rem 0.52rem;
      background: #fff;
      color: var(--text);
      font-size: 0.9rem;
      min-height: 32px;
    }

    .gear-table-wrap {
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: auto;
      max-height: 58vh;
      background: #fff;
    }

    .gear-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.82rem;
      min-width: 940px;
      border: none;
      box-shadow: none;
      margin: 0;
    }

    .gear-table th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: #f8fafc;
      color: var(--text-muted);
      font-size: 0.72rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border-bottom: 1px solid var(--line);
      padding: 0.42rem 0.45rem;
    }

    .gear-table td {
      padding: 0.36rem 0.45rem;
      border-bottom: 1px solid var(--line-soft);
      vertical-align: middle;
    }

    .gear-table tr:hover td {
      background: #f8fbfa;
    }

    .gear-item-main {
      min-width: 260px;
    }

    .gear-weight-form {
      display: inline-flex;
      align-items: center;
      gap: 0.28rem;
      white-space: nowrap;
    }

    .gear-weight-input {
      width: 74px;
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 0.28rem 0.36rem;
      text-align: right;
      font-weight: 700;
      background: #fff;
    }

    .gear-measured-label {
      display: inline-flex;
      align-items: center;
      gap: 0.18rem;
      color: var(--text-muted);
      font-size: 0.78rem;
      white-space: nowrap;
    }

    .gear-save-btn {
      padding: 0.25rem 0.42rem;
      font-size: 0.78rem;
    }

    .autosave-status {
      min-width: 3.2rem;
      color: var(--text-light);
      font-size: 0.72rem;
      font-weight: 760;
      white-space: nowrap;
    }

    .autosave-status.saving {
      color: var(--text-muted);
    }

    .autosave-status.saved {
      color: var(--accent);
    }

    .autosave-status.error {
      color: var(--danger);
    }

    .autosave-metadata-form.saving {
      opacity: 0.78;
    }


    .gear-category-pill,
    .gear-usage-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 0.17rem 0.42rem;
      border: 1px solid var(--line-soft);
      background: var(--surface-soft);
      color: var(--text-muted);
      font-weight: 650;
      white-space: nowrap;
    }

    .gear-usage-pill.used {
      color: var(--accent);
      background: var(--accent-soft);
      border-color: rgba(31,111,91,0.22);
    }

    .gear-nutrition-form {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      white-space: nowrap;
    }

    .gear-nutrition-form input {
      width: 48px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0.22rem 0.3rem;
      text-align: right;
      background: #fff;
    }

    .gear-empty-filter-message {
      margin: 0.6rem 0 0;
      color: var(--text-muted);
      font-size: 0.9rem;
    }

    .modal-divider {
      border: none;
      border-top: 1px solid var(--line-soft);
      margin: 0.9rem 0 0.75rem;
    }

    .modal-danger {
      color: var(--danger);
      border-color: rgba(177, 48, 48, 0.28);
      background: #fff;
      font-weight: 750;
    }

    .modal-danger:hover {
      color: #8e2424;
      border-color: rgba(177, 48, 48, 0.45);
      background: rgba(177, 48, 48, 0.06);
    }

    button:disabled,
    button:disabled:hover {
      opacity: 0.45;
      cursor: not-allowed;
      filter: grayscale(0.2);
    }

    input:disabled,
    select:disabled,
    textarea:disabled {
      cursor: not-allowed;
    }

    .modal-secondary {
      background: #fff;
    }

    .modal-primary {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
      font-weight: 750;
    }

    .modal-primary:hover {
      background: #185a4a;
      border-color: #185a4a;
    }

    .modal-ai-row {
      display: flex;
      align-items: flex-end;
      gap: 0.4rem;
    }

    .modal-ai-row .modal-field {
      flex: 1;
    }

    .ai-weight-btn {
      white-space: nowrap;
      min-height: 34px;
      border-style: dashed;
      background: #fff;
      color: var(--accent);
      font-weight: 700;
    }

    .ai-weight-btn:hover {
      border-color: var(--accent);
      background: var(--accent-soft);
    }

    .ai-weight-btn:disabled {
      opacity: 0.48;
      cursor: not-allowed;
      color: var(--text-muted);
      border-color: var(--line);
      background: var(--surface-soft);
    }

    .ai-weight-btn.is-estimating:disabled {
      cursor: wait;
    }

    .ai-weight-result {
      grid-column: 1 / -1;
      font-size: 0.86em;
      color: var(--text-muted);
      padding: 0.5rem 0.6rem;
      background: var(--surface-soft);
      border: 1px solid var(--line-soft);
      border-radius: 12px;
    }

    .ai-weight-result.hidden {
      display: none;
    }

    .ai-weight-result strong {
      color: var(--text);
    }

    .ai-weight-error {
      color: var(--danger);
      background: #fff5f5;
      border-color: #ffd6d6;
    }

    .modal-empty {
      color: var(--text-light);
      font-size: 0.9em;
      margin: 0.5rem 0 0;
    }

    .weight-modal-note {
      margin: 0.4rem 0 0;
      font-size: 0.78em;
      color: var(--text-muted);
    }

    .modal-check-row {
      display: flex;
      gap: 0.65rem;
      align-items: flex-start;
      margin-top: 0.95rem;
      padding: 0.45rem;
      border-radius: 12px;
      border: 1px solid var(--line-soft);
      background: var(--surface-soft);
    }

    .modal-check-row input[type=checkbox] {
      margin-top: 0.2rem;
      accent-color: var(--accent);
      transform: scale(1.1);
    }

    .modal-check-row label {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      font-weight: 750;
      color: var(--text);
    }

    .modal-check-row small {
      font-weight: 500;
      color: var(--text-muted);
    }

    .item-row td:first-child {
      padding-left: 0.12rem;
      padding-right: 0.12rem;
    }

    .item-row .data-display {
      padding: 0.02rem 0.08rem;
    }

    .item-row td:nth-child(2) {
      overflow-wrap: anywhere;
    }
.item-table .bw input.qty-input {
      width: 38px;
      min-width: 38px;
      height: 25px;
      font-size: 0.92em;
    }

    .item-table .packed-checkbox {
      transform: scale(1);
    }

    @media (max-width: 880px) {
      body {
        padding: 0.45rem;
      }

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

      
    }

    @media (max-width: 640px) {
      .modal-grid,
      .modal-food-fields {
        grid-template-columns: 1fr;
      }

      .modal-ai-row {
        align-items: stretch;
        flex-direction: column;
      }
    }

.trip-title-wrap {
  min-height: 76px;
}

.trip-banner-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) minmax(18rem, auto) minmax(15rem, 1fr);
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  padding: 1rem clamp(1.1rem, 2.4vw, 2.2rem);
}

.trip-title-panel {
  justify-self: center;
  min-width: min(100%, 18rem);
  max-width: 42rem;
  text-align: center;
}

.trip-title-heading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: auto;
  max-width: 100%;
  padding: 0;
}

.trip-title-heading .data-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.35rem;
  border-radius: 10px;
  color: var(--text);
  font-weight: 850;
  letter-spacing: -0.035em;
  text-shadow: none;
  line-height: 1.05;
}

.trip-title-wrap .title-input{
  display: inline-block;
  min-width: 12rem;
  max-width: min(70vw, 42rem);
  padding: 0.08rem 0.35rem;
  margin: 0;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit;
  text-align: center;
  font: inherit;
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.trip-title-wrap .title-input:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 rgba(31,111,91,0.42) !important;
}

.trip-banner-stats {
  justify-self: start;
  display: grid;
  grid-template-columns: repeat(2, minmax(7rem, auto));
  gap: 0.42rem 0.55rem;
  align-items: stretch;
  max-width: 24rem;
}

.trip-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.42rem 0.68rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: 0 8px 18px rgba(15, 43, 37, 0.07);
  backdrop-filter: blur(3px);
}

.trip-stat-label {
  display: block;
  font-size: 0.62rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.085em;
  color: rgba(24,32,42,0.58);
  font-weight: 800;
  margin-bottom: 0.2rem;
}

.trip-stat strong {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.08;
  font-weight: 850;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .trip-banner-inner {
    grid-template-columns: 1fr;
    min-height: 13rem;
    gap: 0.55rem;
    padding: 0.9rem;
  }

  .trip-banner-stats {
    
    justify-self: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

@media (max-width: 560px) {
  .trip-banner-stats {
    grid-template-columns: 1fr 1fr;
  }

  .trip-stat {
    min-height: 2.55rem;
    padding: 0.35rem 0.5rem;
  }

  .trip-stat strong {
    font-size: 0.82rem;
  }
}

.modal-field-note.warning-note {
  color: #9a5b22;
}

.item-details-category-field {
  transition: opacity 0.16s ease;
}

/* Keep disabled category changes subtle: only the select itself looks locked. */
#item-details-category:disabled,
#item-details-category.is-disabled {
  background: var(--surface-soft);
  border-color: var(--line-soft);
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
}

#item-details-category:disabled:hover,
#item-details-category.is-disabled:hover,
#item-details-category:disabled:focus,
#item-details-category.is-disabled:focus {
  background: var(--surface-soft);
  border-color: var(--line-soft);
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
  box-shadow: none;
  outline: none;
}

.trip-profile-panel {
  padding: 0.48rem 0.62rem 0.5rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.56);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: 0 8px 18px rgba(15,43,37,0.06);
}

.trip-profile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.18rem;
}

.trip-profile-label,
.trip-profile-range {
  font-size: 0.66rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(24,32,42,0.58);
  font-weight: 800;
}

.trip-profile-range {
  text-transform: none;
  letter-spacing: 0.01em;
}

.trip-title-wrap .title-input:not(.hidden) {
  width: min(52rem, 64vw) !important;
  min-width: min(34rem, 62vw);
  max-width: min(52rem, 86vw);
  box-sizing: border-box;
  text-align: center;
}


.trip-title-wrap .data-display.hidden {
  display: none !important;
}


.trip-title-wrap .title-input.hidden {
  display: none !important;
}

.people-modal-name-form {
  flex: 1 1 16rem;
  min-width: 12rem;
}

.people-modal-name-form input[type="text"] {
  width: 100%;
  padding: 0.42rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  box-sizing: border-box;
}

.people-modal-name-form input[type="text"]:focus {
  outline: none;
  border-color: rgba(31,111,91,0.45);
  box-shadow: 0 0 0 3px rgba(31,111,91,0.11);
}

@media (max-width: 900px) {

  .trip-title-wrap .title-input:not(.hidden) {
    width: min(42rem, 88vw) !important;
    min-width: min(20rem, 84vw);
  }
}

.gear-row {
  color: inherit;
}

.trip-title-panel .trip-title-heading {
  margin: 0;
  width: auto;
  max-width: min(58rem, 72vw);
  display: flex;
  align-items: center;
  justify-content: center;
}

.trip-title-static {
  display: inline-block;
  color: #ffffff;
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-shadow: 0 2px 10px rgba(24,40,36,0.34);
  white-space: nowrap;
}

@media (max-width: 900px) {
  
  .gear-row::before {
    min-width: 4.6rem;
  }

  .trip-title-panel .trip-title-heading {
    max-width: 88vw;
  }

  .trip-title-static {
    white-space: normal;
  }
}

.trip-profile-panel{
  background: rgba(255,255,255,0.56) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow: 0 8px 18px rgba(15,43,37,0.06) !important;
}

.item-table thead th {
  font-size: 0.78rem !important;
  font-weight: 750 !important;
}

.gear-table .data-display {
  font-size: inherit !important;
}

.gear-table .information,
.gear-table .no-information {
  font-size: 0.78rem !important;
}

body {
  font-size: 16px !important;
}

table.item-table {
  font-size: 0.94rem !important;
  line-height: 1.28 !important;
}

table.item-table th,
table.item-table td {
  padding-top: 0.40rem !important;
  padding-bottom: 0.40rem !important;
}

table.item-table thead th:first-child {
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

table.item-table thead th {
  font-size: 0.86rem !important;
  font-weight: 780 !important;
}

table.item-table .data-display {
  font-size: 0.94rem !important;
  line-height: 1.28 !important;
}

table.item-table .information,
table.item-table .no-information {
  font-size: 0.86rem !important;
  line-height: 1.28 !important;
}

table.item-table .qty-input {
  font-size: 0.94rem !important;
  font-weight: 720 !important;
  min-height: 1.9rem !important;
}

table.item-table .weight-edit-button {
  font-size: 0.92rem !important;
  min-height: 1.9rem !important;
}

table.item-table .weight-value {
  font-size: 0.92rem !important;
}
.gear-table {
  font-size: 0.88rem !important;
  line-height: 1.28 !important;
}

.gear-table th {
  font-size: 0.78rem !important;
}

.gear-table td {
  font-size: 0.88rem !important;
  padding-top: 0.43rem !important;
  padding-bottom: 0.43rem !important;
}

.gear-table .data-display {
  font-size: 0.88rem !important;
}

.gear-table .information,
.gear-table .no-information {
  font-size: 0.82rem !important;
}

.tag,
button.tag,
a.tag {
  font-size: 0.86rem !important;
}

.modal-context,
.people-empty {
  font-size: 0.86rem !important;
}

.visual-summary-panel {
  max-width: 1840px;
  margin: -0.15rem auto 0.7rem;
  padding: 0.72rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.9);
  box-shadow: var(--shadow-sm);
}

.visual-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.visual-summary-header h3 {
  margin: 0;
  text-align: left;
  font-size: 1rem;
  font-weight: 850;
}

.visual-summary-header p {
  margin: 0.12rem 0 0;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.visual-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 0.62rem;
}

.visual-card {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 0.62rem;
  min-width: 0;
}

.visual-card h4 {
  text-align: left;
  margin: 0 0 0.48rem;
  font-size: 0.9rem;
  font-weight: 820;
}

.visual-bars {
  display: grid;
  gap: 0.36rem;
}

.visual-bar-row,
.visual-split-row {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.9fr) minmax(8rem, 2fr) minmax(4.8rem, auto);
  gap: 0.55rem;
  align-items: center;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
}

.visual-bar-row:hover .visual-bar-track,
.visual-split-row:hover .visual-split-outer {
  box-shadow: inset 0 0 0 1px rgba(31,111,91,0.22);
}

.visual-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 720;
  font-size: 0.88rem;
}


.dashboard-shared-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.03rem;
  min-width: 5.3rem;
  line-height: 1.05;
}

.dashboard-shared-value small {
  display: block;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 760;
  white-space: nowrap;
}

.visual-bar-row strong,
.visual-split-row strong {
  text-align: right;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.visual-bar-track,
.visual-split-outer {
  position: relative;
  height: 0.72rem;
  border-radius: 999px;
  background: #e8edf2;
  overflow: hidden;
}

.visual-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(31,111,91,0.72), rgba(31,111,91,0.95));
}

.visual-bar-fill.muted {
  background: linear-gradient(90deg, rgba(84,111,132,0.55), rgba(84,111,132,0.84));
}

.visual-split-outer {
  overflow: visible;
}

.visual-split-track {
  display: flex;
  height: 0.72rem;
  border-radius: 999px;
  overflow: hidden;
  background: #e8edf2;
  min-width: 0.6rem;
}

.split-pack { background: rgba(31,111,91,0.92); }
.split-worn { background: rgba(76,132,184,0.82); }
.split-basecamp { background: rgba(116,150,104,0.82); }

.visual-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.55rem;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.visual-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.visual-legend i {
  display: inline-block;
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 3px;
}

.legend-pack { background: rgba(31,111,91,0.92); }
.legend-worn { background: rgba(76,132,184,0.82); }
.legend-basecamp { background: rgba(116,150,104,0.82); }

.visual-empty {
  margin: 0;
  color: var(--text-light);
  font-size: 0.82rem;
}

@media (max-width: 760px) {
  .visual-summary-panel {
    padding: 0.55rem;
  }

  .visual-bar-row,
  .visual-split-row {
    grid-template-columns: minmax(4.5rem, 0.8fr) minmax(6rem, 1.7fr) minmax(4.2rem, auto);
  }


}

.category-color-dot {
  display: inline-block;
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 999px;
  background: var(--cat-color, #8a94a3);
  box-shadow: 0 0 0 2px var(--cat-soft, rgba(138,148,163,0.14));
  flex: 0 0 auto;
}

.category-title,
.gear-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  min-width: 0;
}

table.item-table thead th:first-child {
  background:
    linear-gradient(90deg, var(--cat-soft, #f6f8fa), #f6f8fa 56%) !important;
  box-shadow: inset 4px 0 0 var(--cat-color, var(--line)) !important;
  color: var(--text) !important;
}

table.item-table thead th:first-child .category-title {
  font-weight: 820;
}

.gear-category-pill {
  color: var(--cat-color, var(--text-muted)) !important;
  background: var(--cat-soft, var(--surface-soft)) !important;
  border-color: color-mix(in srgb, var(--cat-color, #8a94a3) 28%, white) !important;
  font-weight: 720 !important;
}

.gear-category-pill .category-color-dot {
  width: 0.52rem;
  height: 0.52rem;
  box-shadow: none;
}

.category-color-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  margin-top: 0.64rem;
  padding-top: 0.58rem;
  border-top: 1px solid var(--line-soft);
}

.category-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.18rem 0.46rem;
  border: 1px solid color-mix(in srgb, var(--cat-color, #8a94a3) 24%, white);
  border-radius: 999px;
  background: var(--cat-soft, var(--surface-soft));
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
}

.category-legend-chip .category-color-dot {
  width: 0.5rem;
  height: 0.5rem;
  box-shadow: none;
}

@supports not (color: color-mix(in srgb, red, white)) {
  .gear-category-pill,
  .category-legend-chip {
    border-color: var(--line-soft) !important;
  }
}

.visual-stack-outer {
  overflow: visible;
}

.visual-stack-track {
  display: flex;
  height: 0.72rem;
  border-radius: 999px;
  overflow: hidden;
  background: #e8edf2;
  min-width: 0.6rem;
}

.visual-stack-segment {
  display: block;
  height: 100%;
  background: var(--cat-color, rgba(31,111,91,0.92));
}

.visual-stack-segment + .visual-stack-segment {
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.55);
}

.shared-row-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin-top: 0.28rem;
}

.shared-row-badge {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.shared-summary-card {
  margin-top: 0.62rem;
  padding: 0.62rem;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: #fbfcfd;
}

.shared-summary-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.44rem;
}

.shared-summary-title h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 820;
}

.shared-summary-title span {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.shared-summary-list {
  display: grid;
  gap: 0.32rem;
}

.shared-summary-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.48rem;
  align-items: center;
  padding: 0.38rem 0.48rem;
  border-radius: 12px;
  background: var(--cat-soft, #f8fafc);
  border: 1px solid color-mix(in srgb, var(--cat-color, #8a94a3) 20%, white);
}

.shared-summary-main {
  display: grid;
  gap: 0.04rem;
  min-width: 0;
}

.shared-summary-main strong,
.shared-summary-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-summary-main strong {
  font-size: 0.86rem;
  color: var(--text);
}

.shared-summary-main small {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.shared-summary-weight {
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.shared-category-band {
  max-width: 1840px;
  margin: 0 auto 0.45rem;
  padding: 0.52rem;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--cat-color, #8a94a3) 22%, white);
  background: linear-gradient(90deg, var(--cat-soft, #f8fafc), rgba(255,255,255,0.94));
  box-shadow: var(--shadow-sm);
}

.shared-category-band-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.42rem;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 820;
}

.shared-category-band-title > span {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
}

.shared-category-items {
  display: grid;
  gap: 0.36rem;
}

.shared-category-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.42rem 0.52rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.85);
}

.shared-category-item div:first-child {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.shared-category-item strong {
  color: var(--text);
  font-size: 0.88rem;
}

.shared-category-item span,
.shared-category-item em {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.shared-category-item em {
  font-style: normal;
}

.shared-category-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.32rem;
  max-width: 24rem;
}

.shared-category-meta span,
.shared-category-meta strong {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.16rem 0.42rem;
  background: #fff;
  border: 1px solid var(--line-soft);
  white-space: nowrap;
}

.shared-category-meta strong {
  font-size: 0.8rem;
  font-weight: 820;
}

.shared-distribution-panel {
  width: min(640px, 96vw);
}

.shared-distribution-form {
  display: grid;
  gap: 0.7rem;
}

.modal-field {
  display: grid;
  gap: 0.28rem;
}

.modal-field label {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 780;
}

.modal-field input[type="text"],
.modal-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--text);
  padding: 0.48rem 0.6rem;
  font: inherit;
  font-size: 0.92rem;
}

.modal-field textarea {
  resize: vertical;
  min-height: 5rem;
}

.shared-person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 0.38rem;
}

.shared-person-option {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.42rem 0.48rem;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--surface-soft);
  cursor: pointer;
}

.shared-person-option span {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--text);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-start;
}

.primary-button,
.secondary-button {
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 0.42rem 0.75rem;
  font-size: 0.88rem;
  font-weight: 750;
  cursor: pointer;
}

.primary-button {
  border-color: rgba(31,111,91,0.28);
  color: #fff;
  background: var(--accent);
}

.secondary-button {
  color: var(--text-muted);
  background: #fff;
}

.shared-distribution-delete-form {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 760px) {
  .shared-category-item {
    grid-template-columns: 1fr;
  }

  .shared-category-meta {
    justify-content: flex-start;
    max-width: none;
  }

  .shared-summary-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .shared-summary-weight {
    grid-column: 2;
  }
}

@supports not (color: color-mix(in srgb, red, white)) {
  .shared-summary-item,
  .shared-category-band {
    border-color: var(--line-soft);
  }
}

.category-tile {
  max-width: 1840px;
  margin: 0 auto 0.72rem;
  border-radius: 17px;
  border: 1px solid color-mix(in srgb, var(--cat-color, #8a94a3) 22%, white);
  background: linear-gradient(90deg, var(--cat-soft, #f8fafc), rgba(255,255,255,0.94));
  box-shadow: var(--shadow-sm);
}

.category-tile-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.48rem;
}

.category-tile-header h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin: 0;
  text-align: left;
  color: var(--text);
  font-size: 1rem;
  font-weight: 850;
}

.category-tile-meta {
  font-weight: 650;
}

.category-tile-grid {
  margin: 0;
  max-width: none;
}

.person-table-title {
  color: var(--text);
  font-weight: 820;
}

.category-tile .shared-category-band {
  max-width: none;
  margin: 0 0 0.48rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.category-tile .shared-category-band-title {
  display: none;
}

table.item-table col:first-child {
  width: 0 !important;
}

.drag-cell {
  display: none !important;
}

tr.item-row input,
tr.item-row button,
tr.item-row textarea,
tr.item-row select,
tr.item-row label {
  cursor: auto;
}

.shared-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.field-help {
  margin: -0.12rem 0 0.18rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.small-soft-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text-muted);
  padding: 0.22rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
}

.small-soft-button:hover {
  color: var(--accent);
  border-color: rgba(31,111,91,0.28);
  background: var(--accent-soft);
}

.shared-person-grid-weights {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.shared-person-weight-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 0.5rem;
}

.shared-person-check {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
}

.shared-person-weight-option input[type="number"] {
  width: 74px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  padding: 0.28rem 0.36rem;
  text-align: right;
  font-size: 0.86rem;
}

.shared-summary-main small {
  white-space: normal;
}

.shared-category-meta span:nth-child(3) {
  max-width: 100%;
}

@media (max-width: 760px) {
  .category-tile {
    padding: 0.46rem;
  }

  .category-tile-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .shared-person-weight-option {
    grid-template-columns: 1fr;
  }

  .shared-person-weight-option input[type="number"] {
    width: 100%;
  }
}

@supports not (color: color-mix(in srgb, red, white)) {
  .category-tile {
    border-color: var(--line-soft);
  }
}

table.item-table col:first-child {
  width: 18px !important;
}

table.item-table col:nth-child(2) {
  width: auto !important;
}

.drag-cell {
  display: table-cell !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  padding-left: 0.12rem !important;
  padding-right: 0.08rem !important;
  border-right: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
}

.drag-cell::before {
  content: "";
  display: block;
  width: 4px;
  min-height: 1.65rem;
  border-radius: 999px;
  background: transparent;
}

tr.item-row:hover .drag-cell::before,
tr.item-row.is-dragging .drag-cell::before {
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 35%, transparent);
}

table.item-table thead th:first-child {
  padding-left: 0.45rem !important;
}

.item-row td:nth-child(2) {
  min-width: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.item-row td:nth-child(2) .data-display {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
}

tr.item-row {
  cursor: grab;
}

tr.item-row:active,
tr.item-row.is-dragging {
  cursor: grabbing;
}

.category-tile table.item-table thead th:first-child,
table.item-table thead th:first-child {
  box-shadow: none !important;
  border-left: 0 !important;
}

.category-tile table.item-table {
  margin-top: 0 !important;
}

.category-tile .drag-cell::before {
  content: none !important;
}

.category-tile table.item-table tbody tr.item-row.camping-item td {
  background: linear-gradient(90deg, var(--cat-soft, rgba(31,111,91,0.08)), rgba(255,255,255,0.86)) !important;
}

.category-tile table.item-table tbody tr.item-row:hover td {
  background: rgba(255,255,255,0.96) !important;
  border-color: color-mix(in srgb, var(--cat-color, #8a94a3) 18%, white) !important;
}

.category-tile table.item-table tbody tr.item-row.dragging td,
.category-tile table.item-table tbody tr.item-row.is-dragging td {
  background: rgba(255,255,255,0.98) !important;
  border-color: color-mix(in srgb, var(--cat-color, #8a94a3) 34%, white) !important;
  box-shadow: 0 8px 18px rgba(15,43,37,0.08) !important;
}

.category-tile table.item-table tfoot td {
  border-top: 1px solid color-mix(in srgb, var(--cat-color, #8a94a3) 18%, white) !important;
  border-bottom: 0 !important;
}

@supports not (color: color-mix(in srgb, red, white)) {
  .category-tile table.item-table thead th,
  .category-tile table.item-table tfoot td,
  .category-tile table.item-table tbody tr.item-row:hover td,
  .category-tile table.item-table tbody tr.item-row.dragging td,
  .category-tile table.item-table tbody tr.item-row.is-dragging td {
    border-color: var(--line-soft) !important;
  }
}

.category-tile {
  padding: 0.68rem !important;
}

.category-tile-grid {
  gap: 0.72rem !important;
}

.category-tile .person {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.category-tile .person:hover {
  box-shadow: none !important;
  border-color: transparent !important;
}

.category-tile table.item-table {
  border: 0 !important;
  border-radius: 0 !important;
  border-collapse: separate !important;
  overflow: visible !important;
  margin: 0 !important;
}

.category-tile table.item-table thead th {
  border: 0 !important;
  color: var(--text-muted) !important;
}

.category-tile table.item-table thead th:first-child {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.category-tile .person-table-title {
  display: inline-flex;
  align-items: center;
  line-height: 1.1 !important;
}

.category-tile table.item-table thead th.bw,
.category-tile table.item-table thead th.g {
  color: var(--text-light) !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
}

.category-tile table.item-table tbody tr.item-row td {
  background: rgba(255,255,255,0.74) !important;
  border-top: 1px solid rgba(226,232,238,0.82) !important;
  border-bottom: 1px solid rgba(226,232,238,0.82) !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

.category-tile .drag-cell {
  display: table-cell !important;
  padding: 0 !important;
  background: rgba(255,255,255,0.74) !important;
  border-top: 1px solid rgba(226,232,238,0.82) !important;
  border-bottom: 1px solid rgba(226,232,238,0.82) !important;
  border-left: 1px solid rgba(226,232,238,0.82) !important;
  border-radius: 13px 0 0 13px !important;
}

.category-tile table.item-table tbody tr.item-row td:nth-child(2) {
  padding-left: 0.54rem !important;
}

.category-tile table.item-table tbody tr.item-row td:last-child {
  border-right: 1px solid rgba(226,232,238,0.82) !important;
  border-radius: 0 13px 13px 0 !important;
}

.category-tile table.item-table tbody tr.item-row.camping-item td,
.category-tile table.item-table tbody tr.item-row.camping-item .drag-cell {
  background: linear-gradient(90deg, var(--cat-soft, rgba(31,111,91,0.08)), rgba(255,255,255,0.78)) !important;
}

.category-tile table.item-table tbody tr.item-row:hover td,
.category-tile table.item-table tbody tr.item-row:hover .drag-cell {
  background: rgba(255,255,255,0.94) !important;
  border-color: color-mix(in srgb, var(--cat-color, #8a94a3) 20%, white) !important;
}

.category-tile table.item-table tbody tr.item-row.dragging td,
.category-tile table.item-table tbody tr.item-row.is-dragging td,
.category-tile table.item-table tbody tr.item-row.dragging .drag-cell,
.category-tile table.item-table tbody tr.item-row.is-dragging .drag-cell {
  background: rgba(255,255,255,0.98) !important;
  border-color: color-mix(in srgb, var(--cat-color, #8a94a3) 34%, white) !important;
  box-shadow: 0 8px 18px rgba(15,43,37,0.08) !important;
}

.category-tile .item-row td:nth-child(2) {
  color: var(--text-muted) !important;
}

.category-tile .item-row td:nth-child(2) > form:nth-of-type(1) {
  display: inline !important;
}

.category-tile .item-row td:nth-child(2) > form:nth-of-type(1) .data-display {
  color: var(--text) !important;
  font-weight: 820 !important;
}

.category-tile .item-row td:nth-child(2) > form:nth-of-type(2) {
  display: inline !important;
  margin-left: 0.18rem !important;
}

.category-tile .item-row td:nth-child(2) > form:nth-of-type(2) .data-display {
  color: var(--text) !important;
  font-weight: 620 !important;
}

.category-tile .item-row td:nth-child(2) > form:nth-of-type(3) {
  display: inline !important;
  margin-left: 0.18rem !important;
}

.category-tile .item-row td:nth-child(2) > form:nth-of-type(3) .data-display {
  color: var(--text-light) !important;
  font-weight: 650 !important;
}

.category-tile .item-row td:nth-child(2) .information,
.category-tile .item-row td:nth-child(2) .no-information {
  display: block !important;
  color: var(--text-muted) !important;
}

.category-tile .shared-row-tools {
  margin-top: 0.32rem !important;
}

.category-tile .qty-input,
.category-tile .weight-edit-button {
  background: rgba(255,255,255,0.78) !important;
  border-color: rgba(226,232,238,0.85) !important;
  box-shadow: none !important;
}

.category-tile table.item-table tfoot td {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--cat-color, #8a94a3) 16%, white) !important;
}

.category-tile tr.add-item-row td {
  border: 0 !important;
}

.category-tile .shared-category-item {
  background: rgba(255,255,255,0.74) !important;
  border-color: rgba(226,232,238,0.82) !important;
}

.category-tile table.item-table tbody tr.item-row.row-even:not(.camping-item),
.category-tile table.item-table tbody tr.item-row.row-odd:not(.camping-item) {
  background: transparent !important;
}

.category-tile-meta {
  font-size: 0.76rem !important;
  color: var(--text-light) !important;
}

@supports not (color: color-mix(in srgb, red, white)) {
  .category-tile table.item-table tbody tr.item-row:hover td,
  .category-tile table.item-table tbody tr.item-row:hover .drag-cell,
  .category-tile table.item-table tfoot td {
    border-color: var(--line-soft) !important;
  }
}

.category-tile-meta {
  display: none !important;
}

.category-tile table.item-table thead tr {
  box-shadow: none !important;
}

.category-tile table.item-table thead th {
  background: rgba(255,255,255,0.76) !important;
  border-top: 1px solid rgba(226,232,238,0.82) !important;
  border-bottom: 1px solid rgba(226,232,238,0.82) !important;
}

.category-tile table.item-table thead th:first-child {
  border-left: 1px solid rgba(226,232,238,0.82) !important;
  border-radius: 13px 0 0 13px !important;
  padding-left: 0.62rem !important;
}

.category-tile table.item-table thead th:last-child {
  border-right: 1px solid rgba(226,232,238,0.82) !important;
  border-radius: 0 13px 13px 0 !important;
}

.category-tile .person-table-title {
  color: var(--text) !important;
  font-weight: 850 !important;
}

.category-tile table.item-table tfoot td:nth-child(6) {
  min-width: 112px !important;
  padding-left: 0.7rem !important;
}

.category-tile tr.add-item-row td {
  background: rgba(255,255,255,0.58) !important;
  border-top: 1px dashed rgba(180,193,207,0.8) !important;
  border-bottom: 1px dashed rgba(180,193,207,0.8) !important;
}

.category-tile tr.add-item-row td:first-child {
  border-left: 1px dashed rgba(180,193,207,0.8) !important;
  border-radius: 13px 0 0 13px !important;
}

.category-tile tr.add-item-row td:last-child {
  border-right: 1px dashed rgba(180,193,207,0.8) !important;
  border-radius: 0 13px 13px 0 !important;
}

.category-tile .open-add-modal {
  border: 1px dashed rgba(31,111,91,0.32) !important;
  background: rgba(255,255,255,0.72) !important;
  color: var(--accent) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  padding: 0.22rem 0.58rem !important;
}

.category-tile .open-add-modal:hover {
  background: var(--accent-soft) !important;
}

.category-tile .add-item-hint {
  color: var(--text-light) !important;
  font-size: 0.82rem !important;
  margin-left: 0.38rem !important;
}

.category-tile table.item-table tfoot tr td:nth-child(6) {
  position: relative;
}

.category-tile table.item-table tfoot tr td:nth-child(6)::before {
  color: var(--text-light);
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 760px) {
  .category-tile table.item-table col:nth-child(6) {
    width: 104px !important;
  }

  .category-tile table.item-table tfoot td:nth-child(6) {
    min-width: 100px !important;
    padding-left: 0.45rem !important;
  }
}

.category-tile table.item-table tfoot td {
  white-space: nowrap !important;
  overflow: visible !important;
  padding-top: 0.62rem !important;
  padding-bottom: 0.34rem !important;
  padding-left: 0.42rem !important;
  padding-right: 0.42rem !important;
  font-size: 0.92rem !important;
  line-height: 1.15 !important;
}

.category-tile table.item-table tfoot td.g {
  text-align: right !important;
  font-weight: 850 !important;
  font-variant-numeric: tabular-nums !important;
}

.category-tile table.item-table tbody td.bw,
.category-tile table.item-table thead th.bw {
  text-align: center !important;
}

@media (max-width: 900px) {

  .category-tile table.item-table tfoot td {
    padding-left: 0.30rem !important;
    padding-right: 0.30rem !important;
    font-size: 0.88rem !important;
  }
}

.category-tile table.item-table col:first-child {
  width: 10px !important;
}

.category-tile table.item-table col:nth-child(2) {
  width: auto !important;
}

.category-tile table.item-table tfoot td,
.category-tile table.item-table tfoot td.g,
.category-tile table.item-table tfoot td:nth-child(6) {
  min-width: 0 !important;
  width: auto !important;
  white-space: normal !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
}

.category-tile table.item-table tfoot tr td:nth-child(6)::before {
  content: none !important;
  display: none !important;
}

.category-total-row td {
  padding-top: 0.30rem !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.category-total-strip {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.38rem;
  padding-top: 0.42rem;
  border-top: 1px solid color-mix(in srgb, var(--cat-color, #8a94a3) 16%, white);
}

.category-total-strip > span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.34rem;
  padding: 0.18rem 0.46rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.66);
  border: 1px solid rgba(226,232,238,0.82);
  color: var(--text-muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

.category-total-strip .total-label {
  color: var(--text-muted);
  font-weight: 700;
}

.category-total-strip strong {
  color: var(--text);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.category-total-strip .category-total-main {
  background: #ffffff;
  border-color: color-mix(in srgb, var(--cat-color, #8a94a3) 22%, white);
}

.category-total-strip .category-total-main strong {
  font-size: 0.92rem;
}

.category-tile .item-row td:nth-child(2) {
  min-width: 0 !important;
}

.category-tile .item-row td:nth-child(2) .information,
.category-tile .item-row td:nth-child(2) .no-information {
  max-width: 100% !important;
}

.category-tile .item-row td:nth-child(2) .data-display,
.category-tile .item-row td:nth-child(2) .information {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.category-tile tr.add-item-row td {
  padding-top: 0.22rem !important;
  padding-bottom: 0.22rem !important;
}

@media (max-width: 900px) {
  .category-tile table.item-table col:nth-child(3),
  .category-tile table.item-table col:nth-child(4),
  .category-tile table.item-table col:nth-child(5) {
    width: 42px !important;
  }

  .category-total-strip {
    justify-content: flex-start;
  }

  .category-total-strip > span {
    font-size: 0.78rem;
    padding: 0.16rem 0.38rem;
  }
}

@supports not (color: color-mix(in srgb, red, white)) {
  .category-total-strip,
  .category-total-strip .category-total-main {
    border-color: var(--line-soft) !important;
  }
}

.category-tile .item-row td:nth-child(2) {
  position: relative !important;
  padding-right: 0.8rem !important;
}

.category-tile .shared-row-tools {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.28rem !important;
  margin: 0 0 0 0.32rem !important;
  vertical-align: baseline !important;
  white-space: nowrap !important;
}

.category-tile .shared-row-badge {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 9.5rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--text-light) !important;
  font-size: 0.74rem !important;
  line-height: 1 !important;
}

.category-tile .item-row td:nth-child(2) > form:nth-of-type(1),
.category-tile .item-row td:nth-child(2) > form:nth-of-type(2),
.category-tile .item-row td:nth-child(2) > form:nth-of-type(3) {
  vertical-align: baseline !important;
}

.category-tile .shared-row-tools + .nutrition-row,
.category-tile .nutrition-row + .shared-row-tools {
  margin-top: 0.18rem !important;
}

@media (max-width: 900px) {

  .category-tile .shared-row-badge {
    max-width: 6.5rem !important;
  }
}

.category-tile table.item-table thead th:nth-child(6){
  text-align: center !important;
}

.category-tile .shared-row-tools,
.category-tile .shared-row-badge {
  display: none !important;
}

.category-tile .drag-cell {
  width: 8px !important;
  min-width: 8px !important;
  max-width: 8px !important;
}

.category-tile .item-row td:nth-child(2) {
  padding-left: 0.42rem !important;
  line-height: 1.20 !important;
}

.category-tile .item-row td:nth-child(2) > form:nth-of-type(1) .data-display {
  font-size: 0.92rem !important;
  line-height: 1.12 !important;
}

.category-tile .item-row td:nth-child(2) > form:nth-of-type(2) .data-display {
  font-size: 0.88rem !important;
}

.category-tile .item-row td:nth-child(2) > form:nth-of-type(3) .data-display {
  font-size: 0.82rem !important;
}

.category-tile .item-row td:nth-child(2) .information,
.category-tile .item-row td:nth-child(2) .no-information {
  margin-top: 0.06rem !important;
  font-size: 0.84rem !important;
  line-height: 1.18 !important;
}

.category-tile .qty-input {
  padding-top: 0.08rem !important;
  padding-bottom: 0.08rem !important;
}

.category-tile .weight-edit-button {
  padding-top: 0.08rem !important;
  padding-bottom: 0.08rem !important;
}

.category-tile table.item-table thead th {
  padding-top: 0.32rem !important;
  padding-bottom: 0.32rem !important;
}

.category-tile .person-table-title {
  font-size: 0.95rem !important;
}

.category-total-row td,
.category-tile table.item-table tfoot td {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 900px) {
  .category-tile table.item-table col:nth-child(6) {
    width: 34px !important;
  }

  .category-tile table.item-table col:nth-child(7) {
    width: 80px !important;
  }

}

.visual-bars-double {
  display: grid;
  gap: 0.52rem;
}

.visual-double-row {
  display: grid;
  gap: 0.22rem;
}

.visual-bar-row-subtle {
  padding-top: 0.22rem;
  padding-bottom: 0.22rem;
}

.visual-fill-shared,
.legend-shared {
  background: linear-gradient(90deg, rgba(43,114,190,0.92), rgba(98,157,222,0.92));
}

.visual-bar-row-shared .visual-name,
.visual-bar-row-shared strong {
  color: #355c8a;
}

.visual-legend-compact {
  margin-top: 0.48rem;
}

.shared-summary-card,
.category-color-legend {
  display: none !important;
}

.visual-summary-header {
  margin-bottom: 0.48rem !important;
}

.visual-summary-header h3 {
  margin-bottom: 0 !important;
}

.visual-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  align-items: stretch !important;
}

.visual-card-wide {
  grid-column: span 1 !important;
}

.visual-bars-double {
  display: grid !important;
  gap: 0.54rem !important;
}

.visual-double-row {
  display: grid !important;
  gap: 0.22rem !important;
}

.visual-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(31,111,91,0.72), rgba(31,111,91,0.95));
}

.visual-fill-shared {
  background: linear-gradient(90deg, rgba(43,114,190,0.92), rgba(98,157,222,0.92)) !important;
}

.visual-bar-row-muted .visual-stack-track {
  opacity: 0.72;
}

.visual-bar-row-muted .visual-name,
.visual-bar-row-muted strong {
  color: var(--text-muted) !important;
}

.legend-shared {
  background: linear-gradient(90deg, rgba(43,114,190,0.92), rgba(98,157,222,0.92)) !important;
}

@media (max-width: 1150px) {
  .visual-summary-grid {
    grid-template-columns: 1fr !important;
  }

  .visual-card-wide {
    grid-column: auto !important;
  }
}

.categories-panel {
  width: min(1120px, 96vw);
  outline: none;
}

.categories-list {
  display: grid;
  gap: 0.34rem;
  margin-top: 0.28rem;
}

.category-manager-row,
.category-add-row {
  display: grid;
  grid-template-columns: 1.2rem minmax(260px, 1fr) minmax(11.5rem, auto) minmax(210px, auto) 6rem;
  align-items: center;
  gap: 0.52rem;
  min-height: 2.62rem;
  padding: 0.34rem 0.54rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--cat-color, #8a94a3) 18%, white);
  background: linear-gradient(90deg, var(--cat-soft, #f8fafc), #fff);
}

.category-add-row {
  grid-template-columns: 1.2rem minmax(260px, 1fr) auto 1fr 6rem;
  background: #fff;
  border-color: var(--line-soft);
}

.category-color-dot {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  justify-self: center;
  border-radius: 999px;
  cursor: pointer;
}

.category-color-dot input[type="color"] {
  position: absolute;
  inset: -0.35rem;
  width: 1.8rem;
  height: 1.8rem;
  opacity: 0;
  cursor: pointer;
}

.category-color-preview {
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 999px;
  background: var(--cat-color, #8a94a3);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.72), 0 0 0 3px color-mix(in srgb, var(--cat-color, #8a94a3) 22%, white);
}

.category-color-dot:hover .category-color-preview {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 0 4px color-mix(in srgb, var(--cat-color, #8a94a3) 36%, white);
}

.category-color-dot-new {
  --cat-color: #8a94a3;
  --cat-soft: rgba(138,148,163,0.14);
}

.category-manager-name {
  min-width: 0;
  width: 100%;
  height: 2rem;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.62);
  border-radius: 9px;
  padding: 0.30rem 0.42rem;
  color: var(--text);
  font-weight: 760;
  font-size: 0.94rem;
}

.category-manager-name:hover,
.category-manager-name:focus {
  border-color: var(--line);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(31,111,91,0.08);
}

.category-food-slot {
  min-width: 0;
}

.category-food-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  min-height: 1.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 820;
  padding: 0.24rem 0.56rem;
  white-space: nowrap;
  cursor: pointer;
}

.category-food-toggle.hidden {
  display: none !important;
}

.category-food-toggle input {
  width: 0.9rem;
  height: 0.9rem;
  accent-color: var(--accent);
}

.category-food-toggle.is-food-category {
  background: var(--accent-soft);
  border-color: rgba(31,111,91,0.24);
  color: var(--accent);
}

.category-food-toggle.is-locked,
.category-food-toggle.is-locked:hover {
  cursor: not-allowed;
  opacity: 0.88;
}

.category-food-toggle.is-locked input {
  cursor: not-allowed;
}

.category-manager-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.34rem;
  flex-wrap: nowrap;
  color: var(--text-light);
  font-size: 0.72rem;
  white-space: nowrap;
  min-width: 0;
}

.category-remove-button,
.category-create-button {
  justify-self: end;
  min-height: 1.95rem;
  padding: 0.28rem 0.62rem !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 820 !important;
}

.category-modal-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 0.48rem;
  padding-top: 0.54rem;
}

@media (max-width: 980px) {
  .category-manager-row {
    grid-template-columns: 1.2rem minmax(170px, 1fr) auto;
    align-items: start;
  }

  .category-food-slot,
  .category-manager-meta,
  .category-remove-button {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .category-manager-meta {
    flex-wrap: wrap;
  }

  .category-add-row {
    grid-template-columns: 1.2rem minmax(170px, 1fr) auto;
  }

  .category-create-button {
    grid-column: 2 / -1;
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .category-manager-row,
  .category-add-row {
    grid-template-columns: 1fr;
  }

  .category-color-dot,
  .category-food-slot,
  .category-manager-meta,
  .category-remove-button,
  .category-create-button {
    grid-column: auto;
    justify-self: start;
  }
}

@supports not (color: color-mix(in srgb, red, white)) {
  .category-manager-row,
  .category-add-row {
    border-color: var(--line-soft);
  }
}

.visual-bar-row-shared .visual-fill-shared {
  min-width: 0.18rem;
}

.visual-bar-row-shared .visual-name,
.visual-bar-row-shared strong {
  color: #355c8a !important;
}

.visual-bar-row-muted .visual-name::after {
  content: "";
}

#categories-manage-trigger.tag.tag-add,
#gear-closet-trigger.tag.tag-add {
  justify-self: stretch !important;
  text-align: center !important;
  white-space: nowrap !important;
  background: #fff !important;
  border: 1px dashed var(--line) !important;
  color: var(--accent) !important;
  font-weight: 780 !important;
  box-shadow: none !important;
}

#categories-manage-trigger.tag.tag-add:hover,
#gear-closet-trigger.tag.tag-add:hover {
  background: var(--accent-soft) !important;
  border-color: rgba(31,111,91,0.36) !important;
  color: var(--accent) !important;
}

#trip-manage-trigger,
#people-manage-trigger,
#categories-manage-trigger,
#gear-closet-trigger{
  min-width: 9.2rem !important;
}

.gear-category-pill.category-filter-chip {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

#categories-manage-trigger.tag.tag-add,
#gear-closet-trigger.tag.tag-add {
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

.top-chip{
  all: unset;
  box-sizing: border-box;
  font-family: inherit;
  cursor: pointer;
}

.top-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  max-width: 24rem;
  padding: 0.18rem 0.48rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.top-chip:hover {
  background: #ffffff;
  border-color: #c8d3df;
  color: var(--text);
}

.top-chip.selected {
  border-color: rgba(31,111,91,0.28);
  background: var(--accent-soft);
  color: var(--accent);
}

.top-chip.category-chip {
  color: var(--cat-color, var(--text-muted));
  background: var(--cat-soft, #f8fafc);
  border-color: color-mix(in srgb, var(--cat-color, #8a94a3) 24%, white);
}

.top-chip.category-chip.selected {
  border-color: color-mix(in srgb, var(--cat-color, #8a94a3) 42%, white);
  box-shadow: inset 0 0 0 1px rgba(31,111,91,0.08);
}

.top-chip .category-color-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
}

.top-chip:focus-visible {
  outline: 2px solid rgba(31,111,91,0.28);
  outline-offset: 2px;
}

.person-filter-hidden,
.category-filter-hidden {
  display: none !important;
}

/* === Main app control bar + gear toolbar === */

.gear-toolbar {
  max-width: 1840px;
  margin: 0 auto 0.56rem;
  padding: 0.46rem 0.72rem;
  border: 1px solid rgba(217,224,231,0.88);
  border-radius: 16px;
  background: rgba(255,255,255,0.84);
  box-shadow: 0 2px 8px rgba(16,24,40,0.04);
  display: grid;
  gap: 0.36rem;
}

.gear-toolbar-row {
  display: grid;
  grid-template-columns: 4.8rem minmax(0, 1fr);
  gap: 0.46rem;
  align-items: center;
}

.gear-toolbar-label {
  color: var(--text-light);
  font-size: 0.70rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gear-toolbar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  align-items: center;
}

.gear-status-filter-chip {
  opacity: 0.66;
  filter: saturate(0.78);
}

.gear-status-filter-chip.selected {
  opacity: 1;
  filter: none;
  border-color: rgba(31,111,91,0.28);
  background: var(--accent-soft);
  color: var(--accent);
}

.gear-status-filter-chip:not(.selected) {
  background: #f4f7fa !important;
  border-color: #dde5ee !important;
  color: var(--text-light) !important;
}

.category-filter-hidden-controls {
  display: none !important;
}

.gear-status-filter-hidden {
  display: none !important;
}

.gear-empty-status-message {
  display: none;
  margin: 0.55rem 0 0;
  padding: 0.55rem 0.72rem;
  border-radius: 12px;
  background: #f8fafc;
  color: var(--text-light);
  font-size: 0.82rem;
  font-weight: 650;
}

.category-tile.gear-status-empty .gear-empty-status-message {
  display: block;
}

@media (max-width: 760px) {

  .gear-toolbar-row {
    grid-template-columns: 1fr;
    gap: 0.28rem;
  }
}

@supports not (color: color-mix(in srgb, red, white)) {
  .top-chip.category-chip {
    border-color: var(--line);
  }
}

.top-chip.person-filter-chip,
.top-chip.category-filter-chip {
  opacity: 0.55;
  filter: saturate(0.7);
  transition: opacity 0.14s ease, filter 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

.top-chip.person-filter-chip.selected,
.top-chip.category-filter-chip.selected {
  opacity: 1;
  filter: none;
}

.top-chip.person-filter-chip:not(.selected),
.top-chip.category-filter-chip:not(.selected) {
  background: #f4f7fa !important;
  border-color: #dde5ee !important;
  color: var(--text-light) !important;
}

.top-chip.category-chip:not(.selected) {
  background: #f4f7fa !important;
  border-color: #dde5ee !important;
  color: var(--text-light) !important;
}

.top-chip.category-chip:not(.selected) .category-color-dot {
  opacity: 0.45;
}

.top-chip.person-filter-chip:hover,
.top-chip.category-filter-chip:hover {
  opacity: 1;
}

.person-filter-chip:focus-visible {
  outline: 2px solid rgba(31,111,91,0.35);
  outline-offset: 2px;
}

/* === Clickability repair after removing group summary cards === */
.visual-bar-row[data-person-filter],
.visual-split-row[data-person-filter],
.visual-double-row[data-person-filter],
.top-chip.person-filter-chip,
.top-chip.category-filter-chip {
  cursor: pointer !important;
}

.visual-double-row {
  border-radius: 9px;
}

.visual-double-row:hover .visual-bar-track,
.visual-double-row:hover .visual-split-outer,
.visual-bar-row:hover .visual-bar-track,
.visual-split-row:hover .visual-split-outer {
  box-shadow: inset 0 0 0 1px rgba(31,111,91,0.28) !important;
}

.top-chip.person-filter-chip:focus-visible,
.top-chip.category-filter-chip:focus-visible,
.visual-bar-row:focus-visible,
.visual-split-row:focus-visible {
  outline: 2px solid rgba(31,111,91,0.28) !important;
  outline-offset: 2px !important;
}


/* === Restored click-handler robustness === */

.top-chip.person-filter-chip,
.top-chip.category-filter-chip {
  pointer-events: auto !important;
}

.top-chip.person-filter-chip:active,
.top-chip.category-filter-chip:active{
  transform: translateY(1px);
}


/* === Trip banner height and title visibility refinement === */
/* Lower overall banner height, keep the route large, and make side/title spacing more even. */

/* Keep the route prominent, but prevent it from forcing an overly tall banner. */

/* Make the title more visible on the pale banner background. */

/* Compact the stats/profile side so the route, rather than the side panel, determines the height. */

/* Medium screens: stack, but keep the route visual generously sized. */

/* === Route/title refinement: no topo lines, thinner elevation-colored route, centered title === */

/* Keep the side panels above the background but below the title. */

/* === Professional trip banner layout: route | title | stats/profile === */
/* Undo the absolute-centered title: it overlapped the stats/profile column.
   Use a stable three-column banner instead. */

/* Left: route. Keep it large but visually contained. */

/* Middle: title. No absolute positioning; it is now part of the grid. */

/* Right: stats and elevation profile. Keep a clean, compact stack. */

/* Medium screens: keep a professional stacked layout without overlap. */

/* === Filter toggle behavior cue === */
.top-chip.person-filter-chip,
.top-chip.category-filter-chip {
  user-select: none;
}


/* === Filters with All reset and minimized category panels === */
.top-chip.person-filter-all,
.top-chip.category-filter-all,
.category-collapse-toggle {
  user-select: none;
  cursor: pointer;
}

.top-chip.person-filter-all:not(.selected),
.top-chip.category-filter-all:not(.selected) {
  background: #f4f7fa !important;
  border-color: #dde5ee !important;
  color: var(--text-light) !important;
  opacity: 0.62;
}


/* === Consistent hover feedback for toolbar filters ===
   People and Show filters have stronger inactive/selected override rules than
   normal navigation chips. Without a scoped rule after those overrides, their
   hover state is visually swallowed. Keep the interaction language consistent:
   every selectable toolbar chip gets the same green-tinted hover/focus cue,
   regardless of whether it is selected or inactive. */
.gear-toolbar .top-chip.person-filter-all:hover,
.gear-toolbar .top-chip.person-filter-chip:hover,
.gear-toolbar .top-chip.gear-status-filter-chip:hover,
.gear-toolbar .top-chip.person-filter-all:focus-visible,
.gear-toolbar .top-chip.person-filter-chip:focus-visible,
.gear-toolbar .top-chip.gear-status-filter-chip:focus-visible {
  opacity: 1 !important;
  filter: none !important;
  background: rgba(31,111,91,0.10) !important;
  border-color: rgba(31,111,91,0.42) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(31,111,91,0.07), 0 2px 8px rgba(31,111,91,0.08);
}

.gear-toolbar .top-chip.person-filter-all.selected:hover,
.gear-toolbar .top-chip.person-filter-chip.selected:hover,
.gear-toolbar .top-chip.gear-status-filter-chip.selected:hover,
.gear-toolbar .top-chip.person-filter-all.selected:focus-visible,
.gear-toolbar .top-chip.person-filter-chip.selected:focus-visible,
.gear-toolbar .top-chip.gear-status-filter-chip.selected:focus-visible {
  background: rgba(31,111,91,0.16) !important;
  border-color: rgba(31,111,91,0.50) !important;
  color: var(--accent) !important;
}

.category-collapse-toggle {
  border-radius: 12px;
}

.category-collapse-toggle:hover h3 {
  color: var(--accent);
}

.category-collapse-toggle:focus-visible {
  outline: 2px solid rgba(31,111,91,0.22);
  outline-offset: 3px;
}

.category-collapse-hint {
  color: var(--text-light);
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.14s ease;
  white-space: nowrap;
}

.category-tile:hover .category-collapse-hint {
  opacity: 1;
}

.category-tile.category-minimized {
  padding-bottom: 0.58rem !important;
}

.category-tile.category-minimized .shared-category-band,
.category-tile.category-minimized .category-tile-grid,
.category-tile.category-minimized .row.category-tile-grid {
  display: none !important;
}

.category-tile.category-minimized .category-tile-header {
  margin-bottom: 0 !important;
}

.category-tile.category-minimized .category-collapse-hint {
  opacity: 1;
  font-size: 0;
}

.category-tile.category-minimized .category-collapse-hint::before {
  content: "Click to expand";
  font-size: 0.72rem;
}

.category-tile.category-minimized:hover {
  border-color: color-mix(in srgb, var(--cat-color, #8a94a3) 34%, white) !important;
  box-shadow: 0 2px 8px rgba(16,24,40,0.05);
}


/* === Professional compact item rows and controls === */
.category-tile table.item-table col:nth-child(1) { width: 8px !important; }
.category-tile table.item-table col:nth-child(3),
.category-tile table.item-table col:nth-child(4),
.category-tile table.item-table col:nth-child(5) { width: 30px !important; }

.category-tile table.item-table col:nth-child(7) { width: 68px !important; }
.category-tile table.item-table {
  background: transparent !important;
  border-color: rgba(255,255,255,0.42) !important;
  box-shadow: none !important;
}

/* Keep only the meaningful row header icons; remove their boxed white backdrop. */
.category-tile table.item-table thead th.bw,
.category-tile table.item-table thead th.g.quiet-control-head {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.category-tile table.item-table thead th.quiet-control-head {
  color: transparent !important;
  font-size: 0 !important;
}

.category-tile table.item-table thead th.bw {
  color: rgba(52, 73, 66, 0.72) !important;
  font-size: 0.90rem !important;
  padding-top: 0.16rem !important;
  padding-bottom: 0.16rem !important;
}

.category-tile table.item-table tbody tr.item-row {
  background: rgba(255,255,255,0.30) !important;
}

.category-tile table.item-table tbody tr.item-row:hover {
  background: rgba(255,255,255,0.58) !important;
}

.item-text-cell {
  padding-left: 0.48rem !important;
  padding-right: 0.5rem !important;
}

.item-title-line {
  display: flex;
  align-items: baseline;
  gap: 0.34rem;
  min-width: 0;
}

.item-title-open {
  display: inline;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  line-height: 1.12;
  cursor: pointer;
}

.item-title-open:hover,
.item-title-open:focus-visible {
  background: transparent;
  color: var(--accent);
  outline: none;
}

.item-title-open:focus-visible {
  box-shadow: 0 2px 0 rgba(31,111,91,0.35);
}

.item-title-description,
.item-title-name {
  font-size: 0.90rem;
  color: var(--text);
  line-height: 1.12;
}

.item-title-description {
  font-weight: 850;
}

.item-title-name {
  font-weight: 820;
}

.item-title-brand {
  margin-left: 0.18rem;
  font-size: 0.78rem;
  color: var(--text-light);
  font-weight: 720;
  line-height: 1.12;
}

.item-title-note-dot {
  display: inline-block;
  width: 0.34rem;
  height: 0.34rem;
  margin-left: 0.28rem;
  border-radius: 999px;
  background: rgba(31,111,91,0.42);
  vertical-align: middle;
}

.item-title-food-action {
  display: inline-flex;
  align-items: center;
  margin-left: 0.08rem;
}

.compact-nutrition-row {
  margin-top: 0.22rem !important;
  opacity: 0.84;
}

.category-tile .qty-input {
  width: 1.72rem !important;
  min-width: 1.72rem !important;
  max-width: 1.72rem !important;
  min-height: 1.34rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: 0.84rem !important;
  font-weight: 780 !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
}

.category-tile .qty-input:hover,
.category-tile .qty-input:focus {
  background: rgba(255,255,255,0.76) !important;
  box-shadow: inset 0 0 0 1px rgba(31,111,91,0.22) !important;
  outline: none !important;
}

.category-tile .weight-edit-button {
  min-width: 4.25rem !important;
  width: auto !important;
  max-width: 4.8rem !important;
  min-height: 1.34rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  justify-content: flex-end !important;
  gap: 0.12rem !important;
  font-size: 0.82rem !important;
  font-weight: 760 !important;
}

.category-tile .weight-edit-button:hover,
.category-tile .weight-edit-button:focus-visible {
  background: rgba(255,255,255,0.76) !important;
  box-shadow: inset 0 0 0 1px rgba(31,111,91,0.20) !important;
  color: var(--accent) !important;
}

.category-tile .row-weight-display {
  min-width: 3.35rem !important;
  text-align: right !important;
}

.category-tile .weight-confirmed-dot {
  width: 0.55rem !important;
  min-width: 0.55rem !important;
  font-size: 0.74rem !important;
}

.category-tile .packed-checkbox {
  transform: scale(0.92) !important;
}

.add-item-row {
  display: none !important;
}

.category-total-strip {
  justify-content: flex-end !important;
  gap: 0.30rem !important;
}

.category-total-actions {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  min-width: 0;
}

.category-add-button.open-add-modal {
  border: 1px dashed rgba(31,111,91,0.28) !important;
  background: rgba(255,255,255,0.42) !important;
  color: var(--accent) !important;
  border-radius: 999px !important;
  padding: 0.18rem 0.48rem !important;
  font-size: 0.76rem !important;
  font-weight: 760 !important;
}

.category-add-button.open-add-modal:hover {
  background: var(--accent-soft) !important;
  border-color: rgba(31,111,91,0.45) !important;
}

.category-total-actions .add-item-hint {
  margin-left: 0 !important;
  font-size: 0.70rem !important;
  color: var(--text-light) !important;
}

.category-total-strip > span {
  padding: 0.14rem 0.38rem !important;
  font-size: 0.76rem !important;
}

.category-total-strip .category-total-main strong {
  font-size: 0.82rem !important;
}

.item-details-panel {
  width: min(820px, 96vw) !important;
}

.item-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
}

.item-details-grid .full {
  grid-column: 1 / -1;
}

.item-details-grid textarea {
  min-height: 8rem;
  resize: vertical;
}

.item-details-food-section {
  margin-top: 0.7rem;
  padding: 0.62rem;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface-soft);
}

.nutrition-details-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* === Related item grouping === */
.category-tile tr.related-item-row {
  background: rgba(255,255,255,0.22) !important;
}

.category-tile tr.related-item-row .item-text-cell {
  padding-left: 1.25rem !important;
}

.category-tile tr.related-item-row .item-title-open::before {
  content: "↳";
  display: inline-block;
  margin-right: 0.38rem;
  color: color-mix(in srgb, var(--cat-color, #8a94a3) 58%, var(--text-light));
  font-weight: 800;
}

.category-tile tr.related-item-row .item-title-description,
.category-tile tr.related-item-row .item-title-name {
  font-size: 0.84rem;
  font-weight: 760;
}

.category-tile tr.related-item-row .item-title-brand {
  font-size: 0.74rem;
}

.modal-field-note {
  margin: 0.28rem 0 0;
  color: var(--text-light);
  font-size: 0.76rem;
  line-height: 1.25;
}

@media (max-width: 900px) {
  .item-title-line {
    align-items: flex-start;
  }

  .category-total-strip {
    justify-content: flex-start !important;
  }

  .category-total-actions {
    width: 100%;
    margin-right: 0;
  }

  .item-details-grid,
  .nutrition-details-grid {
    grid-template-columns: 1fr;
  }
}


/* === Shared allocations as virtual person rows === */
.shared-category-band {
  display: none !important;
}

.virtual-shared-row {
  background: color-mix(in srgb, var(--cat-color, #8a94a3) 7%, rgba(255,255,255,0.52)) !important;
}

.virtual-shared-row .item-title-name,
.virtual-shared-row .item-title-description {
  font-weight: 760 !important;
}

.virtual-shared-row .item-title-brand {
  opacity: 0.78;
}

.virtual-shared-row .muted-qty {
  color: var(--text-light) !important;
  font-weight: 700 !important;
  opacity: 0.55;
}

.virtual-shared-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.08rem 0.36rem;
  background: rgba(31,111,91,0.08);
  border: 1px solid rgba(31,111,91,0.13);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 760;
  white-space: nowrap;
}

.carried-shared-badge {
  margin-left: 0.22rem;
}

.virtual-shared-meta {
  margin-top: 0.10rem;
  color: var(--text-light);
  font-size: 0.72rem;
  font-weight: 650;
}

.shared-allocation-weight {
  display: inline-flex;
  justify-content: flex-end;
  min-width: 3.35rem;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.carried-allocation-weight::after {
  content: " allocated";
  margin-left: 0.22rem;
  color: var(--text-light);
  font-size: 0.66rem;
  font-weight: 700;
}

.physical-shared-item-row {
  background: color-mix(in srgb, var(--cat-color, #8a94a3) 5%, rgba(255,255,255,0.42)) !important;
}

/* === Shared allocation validation === */
.shared-allocation-check {
  font-weight: 760;
}

.shared-allocation-check.allocation-error {
  color: var(--danger, #b42318);
}

#shared-distribution-save-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  filter: grayscale(0.25);
}

.shared-person-weight-option input[type="number"]:invalid {
  border-color: var(--danger, #b42318);
}


/* === Refined virtual shared allocation rows === */
.virtual-shared-row {
  background: color-mix(in srgb, var(--cat-color, #8a94a3) 5%, rgba(255,255,255,0.42)) !important;
}

.virtual-shared-row td {
  padding-top: 0.30rem !important;
  padding-bottom: 0.30rem !important;
}

.virtual-shared-row .item-title-line {
  gap: 0.32rem !important;
  align-items: baseline !important;
}

.virtual-shared-row .virtual-shared-title {
  max-width: min(100%, 42rem);
}

.virtual-shared-row .item-title-description,
.virtual-shared-row .item-title-name {
  font-size: 0.86rem !important;
  font-weight: 780 !important;
}

.virtual-shared-row .item-title-brand {
  font-size: 0.74rem !important;
  opacity: 0.76;
}

.virtual-shared-row .virtual-shared-meta {
  margin-top: 0.02rem !important;
  font-size: 0.70rem !important;
  line-height: 1.12 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.virtual-status-cell {
  font-size: 0.62rem !important;
  font-weight: 780 !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.virtual-status-cell.has-shared-load {
  color: var(--accent) !important;
  opacity: 1 !important;
}

.virtual-shared-badge {
  padding: 0.06rem 0.32rem !important;
  font-size: 0.64rem !important;
  line-height: 1.1 !important;
}

.shared-allocation-weight {
  min-width: 3.45rem !important;
  justify-content: flex-end !important;
  font-size: 0.82rem !important;
}

.carried-allocation-weight::after {
  content: "" !important;
}


/* === Printable packlist modal === */
.print-packlist-panel {
  width: min(1180px, 96vw) !important;
  max-height: 92vh !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.print-packlist-toolbar {
  padding: 0.9rem 1rem 0.7rem;
  margin: 0 !important;
  border-bottom: 1px solid var(--line-soft);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
}

.print-packlist-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.print-view-control {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  padding: 0.22rem 0.32rem 0.22rem 0.55rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.print-view-control select {
  min-width: 9.5rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font: inherit;
  letter-spacing: 0;
  padding: 0.24rem 1.55rem 0.24rem 0.58rem;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,0.24);
}

.print-view-tabs,
.print-packed-filter-tabs {
  max-width: min(56vw, 42rem);
  overflow-x: auto;
  scrollbar-width: thin;
}

.print-packed-filter-tabs {
  max-width: min(38vw, 22rem);
}

.print-view-tabs > span {
  flex: 0 0 auto;
  margin-right: 0.04rem;
}

.print-view-button {
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font: inherit;
  letter-spacing: 0;
  padding: 0.24rem 0.58rem;
  cursor: pointer;
  white-space: nowrap;
}

.print-view-button:hover,
.print-view-button:focus-visible {
  color: var(--accent);
  background: #fff;
  border-color: rgba(31,111,91,0.18);
  outline: none;
}

.print-view-button.is-active {
  color: var(--accent);
  background: #fff;
  border-color: rgba(31,111,91,0.28);
  box-shadow: 0 2px 7px rgba(15,43,37,0.07), inset 0 0 0 1px rgba(31,111,91,0.04);
}

.print-view-label {
  display: inline-flex;
  margin-left: 0.45rem;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: #eef6f2;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 850;
}

.print-no-results {
  margin: 0 0 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #d7dee8;
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 700;
}


.print-packlist-content {
  padding: 1rem;
  overflow: auto;
  max-height: calc(92vh - 4.5rem);
  background: #fff;
  color: #111827;
}

.print-packlist-cover {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #111827;
}

.print-cover-main {
  min-width: 0;
}

.print-cover-title-row {
  display: inline-flex;
  align-items: center;
  gap: 0.52rem;
  min-width: 0;
}

.print-cover-app-mark {
  width: 2.05rem;
  height: 2.05rem;
  flex: 0 0 auto;
  border: 1px solid #d7dee8;
  border-radius: 0.62rem;
  object-fit: contain;
  image-rendering: auto;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06);
}

.print-packlist-cover h1 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.1;
}

.print-packlist-cover p {
  margin: 0.22rem 0 0;
  color: #64748b;
  font-size: 0.86rem;
}

.print-route-stats {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.print-route-stats span {
  display: grid;
  gap: 0.08rem;
  min-width: 4.8rem;
  padding: 0.28rem 0.42rem;
  border: 1px solid #d7dee8;
  border-radius: 10px;
  text-align: center;
}

.print-route-stats strong {
  font-size: 0.92rem;
}

.print-route-stats em {
  color: #64748b;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.print-person-section {
  break-inside: avoid;
  margin-bottom: 1.1rem;
}

.print-person-section h2 {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  color: #111827;
}

.print-category-section {
  break-inside: avoid;
  margin: 0 0 0.75rem;
}

.print-category-section h3 {
  display: flex;
  align-items: center;
  gap: 0.34rem;
  margin: 0 0 0.25rem;
  font-size: 0.82rem;
  color: #334155;
}

.print-category-section h3 span {
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 999px;
  background: var(--cat-color, #64748b);
}

.print-packlist-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.76rem;
}

.print-col-check {
  width: 1.65rem;
}

.print-col-count {
  width: 4.7rem;
}

.print-col-weight {
  width: 5.4rem;
}

.print-col-people {
  width: 9.5rem;
}

.print-col-plan {
  width: 13.5rem;
}

.print-col-item {
  width: auto;
}

.print-packlist-table th,
.print-packlist-table td {
  padding: 0.20rem 0.30rem;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}

.print-packlist-table th {
  color: #475569;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}

.print-packlist-table th:first-child,
.print-packlist-table td:first-child {
  padding-left: 0.14rem;
  padding-right: 0.14rem;
}

.print-packlist-table th:nth-child(3),
.print-packlist-table td:nth-child(3),
.print-packlist-table th:nth-child(4),
.print-packlist-table td:nth-child(4),
.print-packlist-table th:nth-child(5),
.print-packlist-table td:nth-child(5),
.print-packlist-table th:nth-child(6),
.print-packlist-table td:nth-child(6) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.print-packlist-table th:nth-child(2),
.print-packlist-table td:nth-child(2) {
  text-align: left;
}

.print-packlist-table td:not(:nth-child(2)) {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.print-packlist-table strong {
  font-weight: 760;
}

.print-packlist-table small {
  display: block;
  margin-top: 0.04rem;
  color: #64748b;
  font-size: 0.66rem;
  line-height: 1.15;
}

.print-check-col {
  width: 1.25rem;
  text-align: center !important;
}

.print-check-col span {
  display: inline-block;
  width: 0.68rem;
  height: 0.68rem;
  border: 1.4px solid #94a3b8;
  border-radius: 3px;
}

.print-related-row td:nth-child(2) {
  padding-left: 1rem;
}

.print-shared-row {
  background: #f8fafc;
}

.print-packlist-table tfoot td {
  border-top: 1.5px solid #cbd5e1;
  border-bottom: 0;
  font-weight: 800;
  background: #f8fafc;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 10mm;
  }

  body {
    background: #fff !important;
  }

  body * {
    visibility: hidden !important;
  }

  #print-packlist-modal,
  #print-packlist-modal * {
    visibility: visible !important;
  }

  #print-packlist-modal {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    padding: 0 !important;
    background: #fff !important;
    z-index: 99999 !important;
  }

  #print-packlist-modal .modal-overlay,
  #print-packlist-modal .print-packlist-toolbar {
    display: none !important;
  }


  [hidden] {
    display: none !important;
  }

  #print-packlist-modal .modal-panel,
  #print-packlist-modal .print-packlist-content {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  .print-packlist-content {
    font-size: 10pt !important;
  }

  .print-person-section {
    break-before: page;
  }

  .print-person-section:first-of-type {
    break-before: auto;
  }

  .print-category-section,
  .print-packlist-table tr {
    break-inside: avoid;
  }

  .print-packlist-cover {
    margin-bottom: 6mm !important;
  }
}


/* === Packed state only affects printable checklist, not main UI rows === */
table.item-table tbody tr.packed-item {
  filter: none !important;
  opacity: 1 !important;
}

/* Main UI: keep basecamp rows visually coherent across all cells. */
.category-tile table.item-table tbody tr.camping-item,
.category-tile table.item-table tbody tr.camping-item.row-even,
.category-tile table.item-table tbody tr.camping-item.row-odd,
.category-tile table.item-table tbody tr.camping-item:hover {
  background: color-mix(in srgb, var(--cat-color, #8a94a3) 8%, rgba(255,255,255,0.58)) !important;
}

.category-tile table.item-table tbody tr.camping-item td,
.category-tile table.item-table tbody tr.camping-item .drag-cell {
  background: transparent !important;
}

.category-tile table.item-table tbody tr.camping-item .qty-input,
.category-tile table.item-table tbody tr.camping-item .weight-edit-button{
  background: transparent !important;
  box-shadow: none !important;
}

.category-tile table.item-table tbody tr.camping-item .qty-input:hover,
.category-tile table.item-table tbody tr.camping-item .qty-input:focus,
.category-tile table.item-table tbody tr.camping-item .weight-edit-button:hover,
.category-tile table.item-table tbody tr.camping-item .weight-edit-button:focus-visible {
  background: rgba(255,255,255,0.58) !important;
  box-shadow: inset 0 0 0 1px rgba(31,111,91,0.14) !important;
}

/* Printable modal checkboxes can be ticked on-screen and printed cleanly. */
.print-packed-form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.print-check-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
}

.print-check-label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.print-check-label span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 0.78rem !important;
  height: 0.78rem !important;
  border: 1.5px solid #94a3b8 !important;
  border-radius: 3px !important;
  background: #fff;
}

.print-check-label input:checked + span {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
}

.print-check-label input:checked + span::after {
  content: "✓";
  color: #fff;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
}

.print-packed-form.saving .print-check-label span {
  opacity: 0.55;
}

@media print {
  .print-check-label input:checked + span {
    background: #111827 !important;
    border-color: #111827 !important;
  }

  .print-check-label input:checked + span::after {
    color: #fff !important;
  }
}


/* === Final basecamp row normalization ===
   Older rules applied a gradient separately to each cell, causing the row to look
   segmented. Use one uniform cell background with matching control backgrounds. */
.category-tile table.item-table tbody tr.item-row.camping-item td,
.category-tile table.item-table tbody tr.item-row.camping-item .drag-cell,
.category-tile table.item-table tbody tr.item-row.camping-item.row-even td,
.category-tile table.item-table tbody tr.item-row.camping-item.row-odd td,
.category-tile table.item-table tbody tr.item-row.camping-item:hover td,
.category-tile table.item-table tbody tr.item-row.camping-item:hover .drag-cell {
  background: color-mix(in srgb, var(--cat-color, #8a94a3) 7%, rgba(255,255,255,0.82)) !important;
  background-image: none !important;
  border-top-color: rgba(226,232,238,0.82) !important;
  border-bottom-color: rgba(226,232,238,0.82) !important;
}

.category-tile table.item-table tbody tr.item-row.camping-item td:first-child,
.category-tile table.item-table tbody tr.item-row.camping-item .drag-cell {
  border-radius: 13px 0 0 13px !important;
}

.category-tile table.item-table tbody tr.item-row.camping-item td:last-child {
  border-radius: 0 13px 13px 0 !important;
}

.category-tile table.item-table tbody tr.item-row.camping-item td.bw,
.category-tile table.item-table tbody tr.item-row.camping-item td.g{
  background: color-mix(in srgb, var(--cat-color, #8a94a3) 7%, rgba(255,255,255,0.82)) !important;
  background-image: none !important;
}

.category-tile table.item-table tbody tr.item-row.camping-item .qty-input,
.category-tile table.item-table tbody tr.item-row.camping-item .weight-edit-button,
.category-tile table.item-table tbody tr.item-row.camping-item .item-title-open {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.category-tile table.item-table tbody tr.item-row.camping-item .qty-input:hover,
.category-tile table.item-table tbody tr.item-row.camping-item .qty-input:focus,
.category-tile table.item-table tbody tr.item-row.camping-item .weight-edit-button:hover,
.category-tile table.item-table tbody tr.item-row.camping-item .weight-edit-button:focus-visible {
  background: rgba(255,255,255,0.50) !important;
  box-shadow: inset 0 0 0 1px rgba(31,111,91,0.13) !important;
}

/* Packed state is only visible in the printable checklist, never in the main UI. */
.category-tile table.item-table tbody tr.item-row.packed-item,
.category-tile table.item-table tbody tr.item-row.packed-item td {
  filter: none !important;
  opacity: 1 !important;
}


/* === Row card rounding with a 7-column main table ===
   The printable checklist owns packed status; the main UI ends at the weight column. */
.category-tile table.item-table tbody tr.item-row td:nth-child(7),
.category-tile table.item-table tbody tr.item-row.camping-item td:nth-child(7),
.category-tile table.item-table tbody tr.item-row.virtual-shared-row td:nth-child(7),
.category-tile table.item-table tbody tr.item-row.physical-shared-item-row td:nth-child(7),
.category-tile table.item-table tbody tr.item-row:hover td:nth-child(7) {
  border-right: 1px solid rgba(226,232,238,0.82) !important;
  border-radius: 0 13px 13px 0 !important;
  overflow: hidden !important;
}

.category-tile table.item-table tbody tr.item-row td:first-child,
.category-tile table.item-table tbody tr.item-row .drag-cell,
.category-tile table.item-table tbody tr.item-row.camping-item td:first-child,
.category-tile table.item-table tbody tr.item-row.camping-item .drag-cell {
  border-left: 1px solid rgba(226,232,238,0.82) !important;
  border-radius: 13px 0 0 13px !important;
  overflow: hidden !important;
}

/* Keep the basecamp row background uniform across the newly visible edge cell. */
.category-tile table.item-table tbody tr.item-row.camping-item td:nth-child(7) {
  background: color-mix(in srgb, var(--cat-color, #8a94a3) 7%, rgba(255,255,255,0.82)) !important;
  background-image: none !important;
}

/* Avoid square-looking inner controls on the right edge. */
.category-tile table.item-table tbody tr.item-row.camping-item td:nth-child(7) .weight-edit-button,
.category-tile table.item-table tbody tr.item-row td:nth-child(7) .weight-edit-button,
.category-tile table.item-table tbody tr.item-row td:nth-child(7) .shared-allocation-weight {
  border-radius: 10px !important;
}


/* === Main table now has no packed column === */
.category-tile table.item-table tbody tr.item-row td:last-child,
.category-tile table.item-table tbody tr.item-row td:nth-child(7),
.category-tile table.item-table tbody tr.item-row.camping-item td:last-child,
.category-tile table.item-table tbody tr.item-row.virtual-shared-row td:last-child,
.category-tile table.item-table tbody tr.item-row.physical-shared-item-row td:last-child {
  border-right: 1px solid rgba(226,232,238,0.82) !important;
  border-radius: 0 13px 13px 0 !important;
  overflow: hidden !important;
}


/* === Final compact main rows: no shared icon column, no minimize hint === */
.category-collapse-hint {
  display: none !important;
}

.category-tile table.item-table col:nth-child(6) {
  width: 88px !important;
}

.category-tile table.item-table tbody tr.item-row td:last-child,
.category-tile table.item-table tbody tr.item-row td:nth-child(6),
.category-tile table.item-table tbody tr.item-row.camping-item td:last-child,
.category-tile table.item-table tbody tr.item-row.virtual-shared-row td:last-child,
.category-tile table.item-table tbody tr.item-row.physical-shared-item-row td:last-child {
  border-right: 1px solid rgba(226,232,238,0.82) !important;
  border-radius: 0 13px 13px 0 !important;
  overflow: hidden !important;
}

.category-tile table.item-table tbody tr.item-row.camping-item td:last-child,
.category-tile table.item-table tbody tr.item-row.camping-item td:nth-child(6) {
  background: color-mix(in srgb, var(--cat-color, #8a94a3) 7%, rgba(255,255,255,0.82)) !important;
  background-image: none !important;
}

/* Replace the faint green check with a small measured badge. */
.weight-confirmed-dot {
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.weight-confirmed-dot.is-confirmed {
  width: auto !important;
  min-width: 1.15rem !important;
  margin-left: 0.16rem !important;
  padding: 0.04rem 0.20rem !important;
  border-radius: 999px !important;
  background: rgba(31,111,91,0.10) !important;
  border: 1px solid rgba(31,111,91,0.18) !important;
  color: var(--accent) !important;
  opacity: 1 !important;
  font-size: 0 !important;
}

.weight-confirmed-dot.is-confirmed::after {
  content: "M";
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* A dot fits the quantity columns better than the word 'share'. */
.virtual-status-cell {
  font-size: 0.88rem !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.virtual-status-cell.has-shared-load {
  color: var(--accent) !important;
  font-weight: 900 !important;
}

.virtual-status-cell.muted-qty {
  font-size: 0.78rem !important;
  opacity: 0.42 !important;
}

/* Shared distribution now lives in Item details. */
.item-details-shared-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.58rem 0.62rem;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface-soft);
}

.item-details-shared-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.25;
}

#item-details-shared-open.is-shared {
  color: var(--accent);
  border-color: rgba(31,111,91,0.28);
  background: var(--accent-soft);
}


/* === Trip dates and weather === */
.trip-details-form {
  flex: 1 1 34rem;
}

.trip-details-grid {
  display: grid;
  grid-template-columns: minmax(13rem, 1.5fr) repeat(2, minmax(8rem, 0.75fr));
  gap: 0.42rem;
  align-items: end;
}

.trip-field {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
}

.trip-field span {
  color: var(--text-light);
  font-size: 0.66rem;
  font-weight: 780;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.trip-field input[type="text"],
.trip-field input[type="date"],
.trip-field input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 0.40rem 0.48rem;
  font-weight: 700;
  min-height: 2.15rem;
}

.trip-field-location {
  grid-column: span 1;
}

.trip-details-save {
  align-self: end;
  min-height: 2.15rem;
}

.trip-weather-card {
  margin-top: 0.45rem;
  padding: 0.48rem 0.56rem;
  border: 1px solid rgba(31,111,91,0.16);
  border-radius: 14px;
  background: rgba(255,255,255,0.70);
  color: var(--text);
  text-align: left;
  box-shadow: 0 8px 18px rgba(15,43,37,0.05);
}

.trip-weather-card-muted {
  opacity: 0.82;
}

.weather-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.weather-card-label,
.weather-risk {
  color: var(--text-light);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.weather-risk {
  color: #b45309;
}

.weather-card-main {
  display: flex;
  align-items: baseline;
  gap: 0.38rem;
  margin-top: 0.18rem;
}

.weather-card-main strong {
  font-size: 0.94rem;
  font-weight: 850;
}

.weather-card-main span {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 720;
}

.weather-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.28rem;
  margin-top: 0.38rem;
}

.weather-card-grid span {
  min-width: 0;
  padding: 0.20rem 0.24rem;
  border-radius: 10px;
  background: rgba(248,250,252,0.84);
}

.weather-card-grid b {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weather-card-grid em {
  display: block;
  color: var(--text-light);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 780;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.trip-weather-card p {
  margin: 0.36rem 0 0;
  color: var(--text-light);
  font-size: 0.66rem;
  line-height: 1.2;
}

.print-cover-side {
  display: grid;
  gap: 0.45rem;
  justify-items: end;
}

.print-weather-summary {
  max-width: 18rem;
  padding: 0.32rem 0.45rem;
  border: 1px solid #d7dee8;
  border-radius: 10px;
  text-align: right;
}

.print-weather-summary strong,
.print-weather-summary span {
  display: block;
}

.print-weather-summary strong {
  font-size: 0.76rem;
}

.print-weather-summary span {
  margin-top: 0.10rem;
  color: #64748b;
  font-size: 0.66rem;
}

.print-cover-summary-line {
  margin-top: 0.38rem !important;
  color: #475569 !important;
  font-size: 0.78rem !important;
}

.print-person-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.45rem;
}

.print-person-heading h2 {
  margin: 0;
}

.print-person-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.28rem;
  color: #475569;
  font-size: 0.68rem;
  font-weight: 750;
}

.print-person-stats span,
.print-shared-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.12rem 0.38rem;
  border: 1px solid #dbe3ed;
  border-radius: 999px;
  background: #f8fafc;
  white-space: nowrap;
}

.print-person-stats strong {
  color: #111827;
  font-weight: 850;
}

.print-shared-overview {
  break-before: page;
}

.print-shared-overview .print-packlist-table td:nth-child(3),
.print-shared-overview .print-packlist-table th:nth-child(3),
.print-shared-overview .print-packlist-table td:nth-child(4),
.print-shared-overview .print-packlist-table th:nth-child(4) {
  text-align: left;
  white-space: normal;
}

.print-packlist-table-shared th:nth-child(5),
.print-packlist-table-shared td:nth-child(5) {
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .print-packlist-toolbar {
    align-items: flex-start;
    gap: 0.6rem;
  }

  .print-packlist-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .print-view-tabs {
    max-width: min(82vw, 42rem);
  }
}


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

  .trip-weather-card {
    max-width: none;
  }

  .weather-card-grid {
    grid-template-columns: 1fr;
  }
}


/* === Trip management modal layout fix === */
#trip-modal .trip-manager-panel {
  width: min(1120px, 96vw) !important;
  max-height: 92vh !important;
  overflow-x: hidden !important;
}

#trip-modal .trip-manager-list {
  display: grid !important;
}

#trip-modal .trip-manager-row {
  grid-template-columns: minmax(0, 1.45fr) minmax(15.5rem, 0.85fr) !important;
  overflow: hidden !important;
}

#trip-modal .trip-manager-row > .trip-details-form {
  width: 100% !important;
  min-width: 0 !important;
}

#trip-modal .trip-manager-row > .trip-modal-actions {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.35rem !important;
  min-width: 0 !important;
  width: 100% !important;
}

#trip-modal .trip-manager-row > .trip-media-panel {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#trip-modal .trip-details-grid {
  grid-template-columns: minmax(12rem, 1.3fr) minmax(7.6rem, 0.75fr) minmax(7.6rem, 0.75fr) !important;
  width: 100% !important;
  min-width: 0 !important;
}

#trip-modal .trip-details-grid > * {
  min-width: 0 !important;
}

#trip-modal .trip-field input[type="text"],
#trip-modal .trip-field input[type="date"],
#trip-modal .trip-field input[type="number"] {
  min-width: 0 !important;
  max-width: 100% !important;
}

#trip-modal .trip-details-save {
  grid-column: 1 / 2 !important;
  width: 100% !important;
}

#trip-modal .trip-gpx-form {
  grid-template-columns: minmax(0, 1fr) auto !important;
  width: 100% !important;
}

#trip-modal .trip-gpx-form input[type="file"] {
  min-width: 0 !important;
  max-width: 100% !important;
}

#trip-modal .trip-media-actions {
  min-width: 0 !important;
}

@media (max-width: 940px) {
  #trip-modal .trip-manager-row {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "details"
      "actions"
      "media" !important;
  }

  #trip-modal .trip-manager-row > .trip-modal-actions {
    justify-content: flex-start !important;
  }

  #trip-modal .trip-details-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  #trip-modal .trip-field-name,
  #trip-modal .trip-field-location,
  #trip-modal .trip-details-save {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  #trip-modal .trip-details-grid {
    grid-template-columns: 1fr !important;
  }

  #trip-modal .trip-gpx-form {
    grid-template-columns: 1fr !important;
  }
}


/* === Weather decision card and details === */
.trip-weather-decision-card {
  padding: 0.56rem 0.62rem !important;
}

.weather-verdict {
  margin-top: 0.16rem;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 880;
  letter-spacing: -0.02em;
}

.weather-details-button {
  border: 1px solid rgba(31,111,91,0.20);
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  color: var(--accent);
  padding: 0.14rem 0.42rem;
  font-size: 0.64rem;
  font-weight: 820;
  line-height: 1.1;
}

.weather-details-button:hover,
.weather-details-button:focus-visible {
  background: var(--accent-soft);
  border-color: rgba(31,111,91,0.36);
}

.weather-risk-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
  margin-top: 0.34rem;
}

.weather-risk-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.10rem 0.38rem;
  background: rgba(180, 107, 69, 0.12);
  border: 1px solid rgba(180, 107, 69, 0.18);
  color: #9a4f2d;
  font-size: 0.62rem;
  font-weight: 820;
  line-height: 1.1;
  white-space: nowrap;
}

.weather-risk-badge.is-calm {
  background: rgba(31,111,91,0.09);
  border-color: rgba(31,111,91,0.16);
  color: var(--accent);
}

.weather-details-panel {
  width: min(860px, 96vw) !important;
}

.weather-detail-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 0.8rem;
  align-items: start;
  padding: 0.7rem;
  border: 1px solid rgba(31,111,91,0.16);
  border-radius: 16px;
  background: rgba(248,250,252,0.82);
}

.weather-detail-summary strong {
  display: block;
  margin-top: 0.14rem;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 880;
}

.weather-detail-summary p {
  margin: 0.24rem 0 0;
  color: var(--text-muted);
  line-height: 1.35;
}

.weather-detail-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.42rem;
  margin-top: 0.65rem;
}

.weather-detail-metrics span {
  padding: 0.48rem 0.56rem;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  background: #fff;
}

.weather-detail-metrics b,
.weather-detail-metrics em {
  display: block;
}

.weather-detail-metrics b {
  color: var(--text);
  font-weight: 850;
}

.weather-detail-metrics em {
  margin-top: 0.08rem;
  color: var(--text-light);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 780;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.weather-day-table-wrap {
  margin-top: 0.8rem;
}

.weather-day-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.weather-day-table th,
.weather-day-table td {
  padding: 0.38rem 0.42rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

.weather-day-table th {
  color: var(--text-light);
  font-size: 0.68rem;
  font-weight: 840;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.weather-day-table td:not(:first-child),
.weather-day-table th:not(:first-child) {
  text-align: right;
}

.weather-day-table td:last-child,
.weather-day-table th:last-child {
  text-align: left;
}

.weather-source-note {
  margin: 0.75rem 0 0;
  color: var(--text-light);
  font-size: 0.78rem;
  line-height: 1.35;
}

@media (max-width: 720px) {
  .weather-detail-summary {
    grid-template-columns: 1fr;
  }

  .weather-detail-summary .weather-risk-badges {
    justify-content: flex-start;
  }

  .weather-day-table {
    font-size: 0.78rem;
  }
}


/* === Weather day-by-day preview directly on the card === */
.weather-day-preview {
  display: grid;
  gap: 0.16rem;
  margin-top: 0.42rem;
  padding-top: 0.38rem;
  border-top: 1px solid rgba(31,111,91,0.12);
}

.weather-day-preview-title {
  color: var(--text-light);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.weather-day-preview-row,
.weather-day-preview-more {
  display: grid;
  grid-template-columns: minmax(3.8rem, 0.75fr) minmax(2.8rem, 0.55fr) minmax(4.4rem, 1fr) minmax(3.4rem, 0.8fr);
  gap: 0.28rem;
  align-items: center;
  width: 100%;
  padding: 0.16rem 0.22rem;
  border: 0;
  border-radius: 8px;
  background: rgba(248,250,252,0.72);
  color: var(--text);
  text-align: left;
  font-size: 0.66rem;
  line-height: 1.12;
}

.weather-day-preview-row:hover,
.weather-day-preview-row:focus-visible,
.weather-day-preview-more:hover,
.weather-day-preview-more:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.weather-day-preview-row b,
.weather-day-preview-row span,
.weather-day-preview-row em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weather-day-preview-row b {
  font-weight: 820;
}

.weather-day-preview-row span {
  color: var(--text-muted);
  font-weight: 700;
}

.weather-day-preview-row em {
  color: var(--text-light);
  font-style: normal;
  font-weight: 780;
}

.weather-day-preview-more {
  display: block;
  color: var(--accent);
  font-weight: 820;
  text-align: center;
}


/* === Weather date context and one-day warning === */
.weather-date-line {
  margin-top: 0.14rem;
  color: var(--text-light);
  font-size: 0.66rem;
  font-weight: 760;
  line-height: 1.2;
}

.weather-one-day-note {
  display: inline-flex;
  margin-left: 0.25rem;
  padding: 0.04rem 0.32rem;
  border: 1px solid rgba(180,107,69,0.22);
  border-radius: 999px;
  background: rgba(180,107,69,0.10);
  color: #9a4f2d;
  font-size: 0.60rem;
  font-weight: 820;
  white-space: nowrap;
}

.weather-one-day-warning {
  margin: 0.28rem 0 0 !important;
  padding: 0.34rem 0.46rem;
  border: 1px solid rgba(180,107,69,0.20);
  border-radius: 10px;
  background: rgba(180,107,69,0.08);
  color: #8a4a2f !important;
  font-size: 0.84rem;
  font-weight: 720;
}


/* === Route-aware weather point details === */
.weather-route-points-wrap {
  margin-top: 0.8rem;
}

.weather-route-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.38rem;
  margin-top: 0.35rem;
}

.weather-route-points span {
  padding: 0.40rem 0.48rem;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(248,250,252,0.82);
}

.weather-route-points b,
.weather-route-points em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weather-route-points b {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 830;
}

.weather-route-points em,
.weather-point-note {
  color: var(--text-light);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 720;
}

.weather-point-note {
  display: block;
  margin-top: 0.10rem;
  line-height: 1.18;
  white-space: normal;
}


/* === Weather day × route point matrix === */
.weather-matrix-wrap {
  margin-top: 0.8rem;
}

.weather-matrix-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: #fff;
}

.weather-matrix-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.78rem;
}

.weather-matrix-table th,
.weather-matrix-table td {
  min-width: 9.3rem;
  max-width: 11.5rem;
  padding: 0.42rem 0.48rem;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  text-align: left;
}

.weather-matrix-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  color: var(--text);
  font-weight: 850;
}

.weather-matrix-table th span,
.weather-matrix-table th em,
.weather-matrix-cell strong,
.weather-matrix-cell span,
.weather-matrix-cell em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weather-matrix-table th em {
  margin-top: 0.10rem;
  color: var(--text-light);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 720;
}

.weather-matrix-day-col {
  position: sticky !important;
  left: 0;
  z-index: 3 !important;
  min-width: 7.4rem !important;
  max-width: 8.5rem !important;
  background: #fff !important;
  box-shadow: 8px 0 16px rgba(15, 23, 42, 0.04);
}

.weather-matrix-table thead .weather-matrix-day-col {
  background: #f8fafc !important;
  z-index: 4 !important;
}

.weather-matrix-cell {
  background: rgba(248,250,252,0.55);
}

.weather-matrix-cell strong {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 850;
}

.weather-matrix-cell span {
  margin-top: 0.08rem;
  color: var(--text-muted);
  font-weight: 700;
}

.weather-matrix-cell em {
  margin-top: 0.12rem;
  color: var(--text-light);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 820;
}

.weather-matrix-cell-cold {
  background: rgba(79,125,168,0.12);
}

.weather-matrix-cell-wet {
  background: rgba(47,125,104,0.12);
}

.weather-matrix-cell-wind {
  background: rgba(194,135,47,0.14);
}

.weather-matrix-cell-missing {
  opacity: 0.56;
}

@media (max-width: 720px) {
  .weather-matrix-table th,
  .weather-matrix-table td {
    min-width: 8.4rem;
  }
}


/* === Weather refresh action === */
.weather-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.weather-refresh-form {
  display: inline-flex;
  margin: 0;
}

.weather-refresh-button {
  border: 1px solid rgba(31,111,91,0.20);
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  color: var(--accent);
  padding: 0.14rem 0.42rem;
  font-size: 0.64rem;
  font-weight: 820;
  line-height: 1.1;
}

.weather-refresh-button:hover,
.weather-refresh-button:focus-visible {
  background: var(--accent-soft);
  border-color: rgba(31,111,91,0.36);
}


.weather-route-editor-note {
  margin-top: 0.20rem !important;
  margin-bottom: 0.45rem !important;
}

.weather-point-meta,
.weather-point-fixed {
  color: var(--text-light);
  font-size: 0.70rem;
  font-weight: 760;
  align-self: center;
}

.weather-point-save:hover,
.weather-point-save:focus-visible {
  background: var(--accent-soft);
}

@media (max-width: 760px) {
  

  .weather-point-fixed,
  .weather-point-save{
    justify-self: start;
  }
}


/* === Trip hero layout refresh: larger map + cleaner information column === */

.weather-gpx-waypoints-wrap {
  margin-top: 0.8rem;
}

.weather-gpx-waypoints {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.34rem;
  margin-top: 0.35rem;
}

.weather-gpx-waypoint {
  display: block;
  padding: 0.40rem 0.48rem;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(248,250,252,0.82);
}

.weather-gpx-waypoint b,
.weather-gpx-waypoint em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weather-gpx-waypoint b {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 830;
}

.weather-gpx-waypoint em {
  margin-top: 0.08rem;
  color: var(--text-light);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 720;
}

.weather-gpx-waypoint-camp,
.weather-gpx-waypoint-shelter {
  background: rgba(180,107,69,0.10);
  border-color: rgba(180,107,69,0.20);
}

.weather-gpx-waypoint-water {
  background: rgba(79,125,168,0.10);
  border-color: rgba(79,125,168,0.18);
}

.weather-gpx-waypoint-pass {
  background: rgba(194,135,47,0.12);
  border-color: rgba(194,135,47,0.20);
}


/* === Consistent informative map markers === */

.weather-point-marker-chip,
.weather-matrix-marker-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.12rem;
  height: 1.12rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.78);
  flex: 0 0 auto;
}

.weather-matrix-marker-label {
  display: inline-flex !important;
  align-items: center;
  gap: 0.28rem;
  max-width: 100%;
}

.weather-matrix-marker-chip {
  width: 1.05rem;
  height: 1.05rem;
  background: #64748b;
}

.weather-matrix-marker-start { background: #1f6f5b; }
.weather-matrix-marker-end { background: #0f4c3f; }
.weather-matrix-marker-highest,
.weather-matrix-marker-pass { background: #c2872f; }
.weather-matrix-marker-camp { background: #b46b45; }
.weather-matrix-marker-shelter { background: #8064a9; }
.weather-matrix-marker-water { background: #4f7da8; }
.weather-matrix-marker-food { background: #a35d74; }
.weather-matrix-marker-transport { background: #6d8f88; }

.weather-gpx-waypoint b {
  display: flex !important;
  align-items: center;
  gap: 0.28rem;
}

/* === Trip hero layout spacing fix: tighter right column + non-overlapping legend === */


/* Keep the map large, but make the right column behave as one compact stack. */


/* Left column: map plus legend as separate elements, not overlayed. */

/* Legend becomes a compact bar below the map, no longer covering the route. */

/* Right column: title, stats, profile and weather are now visually connected. */

/* Slightly reduce visual noise from map marker shadows at larger marker size. */


/* Responsive fallbacks. */

/* === Trip hero height balance: map matches right-side info height === */


/* The route column no longer forces the whole hero to become very tall. */


/* Map remains large, but capped to roughly the height of title + stats + profile + weather. */


/* Legend is part of the map card, so total map+legend height stays controlled. */


/* Remove the large blank lower area by letting the right column end naturally. */


/* Keep right-hand blocks compact and visually aligned. */

/* Medium screens: slightly reduce map height before stacking. */

/* === Trip hero vertical alignment: legend bottom aligns with weather bottom === */


/* Left route panel spans the exact height of the right-hand title + info stack. */


/* Use all space above the legend for the map. */

/* Legend sits at the bottom of the route panel, aligned with the weather-card bottom. */


/* Right side remains compact, but defines the shared vertical rhythm. */

/* On stacked layouts, allow natural height again. */

/* === Clean trip hero rebuild: true two-column layout, no row-spanning hacks === */


/* One row, two columns. The right column is now a real wrapper, so title/stats/weather
   stay together and the left map can simply match that stack height. */


/* Left column: the route card consumes the same height as the right information stack. */


/* Route visual fills all available space above the legend. */

/* Legend is a fixed-height-ish footer inside the map card, never an overlay. */

/* New right column wrapper: compact, controlled, and independent from the map. */


/* Remove older grid-area/absolute-positioning behavior from these elements. */


/* Title: compact block immediately above stats. */

/* Right stack: title -> stats -> profile -> weather, all with one consistent gap. */

/* Weather card remains readable but compact enough to define the desired height. */

/* Marker shadows: visible but not noisy. */


/* Responsive layout: stack into title, route, info. */

/* === Final hero balance: map no longer determines the whole section height === */
/* This intentionally replaces the previous stretch-based approach. The right stack
   is the reference, and the map is given a controlled height that fits it. */

/* Left card: controlled height, not stretch-to-fill. */


/* The map gets the remaining visual priority, but stays aligned with the info block. */

/* Legend is a normal footer below the map; it never floats over the route. */

/* Right column: compact and natural height; no stretched blank area. */

/* Keep the weather preview compact enough not to create a tall right column. */


/* At smaller widths, stack naturally. */

/* === Trip-day stages for route/weather integration === */

.weather-point-day-chip,
.weather-matrix-day-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.12rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.74);
  flex: 0 0 auto;
}

.weather-matrix-day-chip {
  width: 1.35rem;
  height: 1.12rem;
  font-size: 0.55rem;
}

.weather-matrix-cell-day-active {
  box-shadow: inset 0 0 0 2px rgba(31,111,91,0.28);
  position: relative;
}

.weather-matrix-cell-day-active.weather-matrix-day-1 { border-top: 3px solid #2f7d68 !important; }
.weather-matrix-cell-day-active.weather-matrix-day-2 { border-top: 3px solid #4f7da8 !important; }
.weather-matrix-cell-day-active.weather-matrix-day-3 { border-top: 3px solid #c2872f !important; }
.weather-matrix-cell-day-active.weather-matrix-day-4 { border-top: 3px solid #8064a9 !important; }
.weather-matrix-cell-day-active.weather-matrix-day-5 { border-top: 3px solid #b46b45 !important; }
.weather-matrix-cell-day-active.weather-matrix-day-6 { border-top: 3px solid #617a4d !important; }
.weather-matrix-cell-day-active.weather-matrix-day-7 { border-top: 3px solid #a35d74 !important; }

.weather-matrix-cell-day-muted {
  opacity: 0.70;
}

.weather-matrix-marker-label {
  gap: 0.20rem !important;
}

/* === Route-days bug fix: cleaner editor, visible actions, overnight highlighting === */

.weather-point-save{
  border: 1px solid rgba(31,111,91,0.20);
  background: #fff;
  color: var(--accent);
  font-weight: 820;
  line-height: 1.1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 1.86rem !important;
  min-width: 4.4rem !important;
  padding: 0.20rem 0.48rem !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  white-space: nowrap !important;
  justify-self: end !important;
  align-self: end !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.weather-matrix-cell-overnight {
  box-shadow: inset 0 0 0 2px rgba(180,107,69,0.34), inset 0 -3px 0 rgba(180,107,69,0.25) !important;
}

.weather-matrix-cell-day-muted {
  opacity: 0.58 !important;
}

/* Softer day underlay: a translucent stage halo behind the normal route line. */
@media (max-width: 860px) {

  .weather-point-meta {
    grid-column: 1 / -1 !important;
  }

  .weather-point-save,
  .weather-point-fixed {
    justify-self: start !important;
  }
}


/* === Bulk route-weather-point editor === */
.weather-points-bulk-form {
  margin: 0;
}

.weather-route-point-editor {
  display: grid !important;
  gap: 0 !important;
  margin-top: 0.44rem !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #fff !important;
}

.weather-point-row:last-child {
  border-bottom: 0 !important;
}

.weather-point-row label{
  display: grid !important;
  gap: 0.08rem !important;
  min-width: 0 !important;
}

.weather-point-row label span{
  color: var(--text-light) !important;
  font-size: 0.52rem !important;
  font-weight: 840 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

.weather-point-row input,
.weather-point-row select{
  width: 100% !important;
  min-width: 0 !important;
  height: 1.86rem !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  background: #fff !important;
  padding: 0.20rem 0.34rem !important;
  color: var(--text) !important;
  font-size: 0.76rem !important;
  font-weight: 760 !important;
}

.weather-point-row input[readonly] {
  background: rgba(241,245,249,0.78) !important;
  color: var(--text-muted) !important;
}

.weather-point-meta {
  flex-wrap: wrap;
  display: flex !important;
  align-items: center !important;
  gap: 0.22rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  color: var(--text-light) !important;
  font-size: 0.70rem !important;
  font-weight: 760 !important;
  align-self: center !important;
}

.weather-point-fixed {
  grid-column: 5 / span 2 !important;
  justify-self: end !important;
  align-self: end !important;
  height: 1.86rem !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid rgba(31,111,91,0.16) !important;
  border-radius: 999px !important;
  padding: 0.12rem 0.38rem !important;
  color: var(--accent) !important;
  background: rgba(31,111,91,0.06) !important;
  font-size: 0.70rem !important;
  font-weight: 760 !important;
}

.weather-point-save-all:hover,
.weather-point-save-all:focus-visible {
  filter: brightness(1.04);
}

.weather-point-warnings {
  display: grid;
  gap: 0.22rem;
  margin: 0.42rem 0 0;
}

.weather-point-warnings span {
  padding: 0.34rem 0.48rem;
  border: 1px solid rgba(194,135,47,0.22);
  border-radius: 11px;
  background: rgba(194,135,47,0.10);
  color: #8a611f;
  font-size: 0.74rem;
  font-weight: 760;
}

.weather-point-day-chip-wide,
.weather-matrix-day-chip-wide {
  width: auto !important;
  min-width: 1.45rem !important;
  padding: 0 0.22rem !important;
}

@media (max-width: 920px) {
  

  .weather-point-row label:first-child {
    grid-column: 1 / -1 !important;
  }

  .weather-point-meta {
    grid-column: 1 / -1 !important;
  }

  .weather-point-save-all {
    width: 100% !important;
  }
}


/* === Route point editor: remove via checkbox + duplicate cleanup === */


.weather-point-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.32rem !important;
  align-self: end !important;
  min-height: 1.86rem !important;
  cursor: pointer;
  color: #9a4f2d !important;
  font-size: 0.70rem !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
}

.weather-point-remove input {
  width: 1rem !important;
  height: 1rem !important;
  accent-color: #b46b45;
}

.weather-point-remove span {
  color: #9a4f2d !important;
  font-size: 0.70rem !important;
  font-weight: 820 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.weather-point-footer span {
  color: var(--text-light);
  font-size: 0.72rem;
  font-weight: 720;
  max-width: 62rem;
}

/* Matrix readability: inactive cells remain legible, active cells are shown mainly by border. */
.weather-matrix-cell-day-muted {
  opacity: 0.78 !important;
}

.weather-matrix-cell-day-active {
  opacity: 1 !important;
  box-shadow: inset 0 0 0 2px rgba(31,111,91,0.30) !important;
}

.weather-matrix-cell-overnight {
  box-shadow: inset 0 0 0 2px rgba(180,107,69,0.34), inset 0 -3px 0 rgba(180,107,69,0.22) !important;
}

@media (max-width: 920px) {
  .weather-point-row {
    grid-template-columns: 1fr 7rem !important;
  }
  .weather-point-remove {
    justify-content: flex-start !important;
  }
}


/* === Explicit transition boundaries + day legend === */

.weather-point-restore:hover,
.weather-point-restore:focus-visible {
  background: var(--accent-soft) !important;
}

/* === Day recalculation + final day-band/map legend layout === */
/* Restore and Save sit next to each other, with Restore secondary and to the left. */

/* Explicitly explain that days are encoded by the outer route band. */
/* Make the day bands visible as broad outside lines using the same colors as the matrix. */
/* Make matrix day color borders and map day chips use the same palette visibly. */
.weather-matrix-cell-day-active.weather-matrix-day-1 { border-top-color: #2f7d68 !important; }
.weather-matrix-cell-day-active.weather-matrix-day-2 { border-top-color: #4f7da8 !important; }
.weather-matrix-cell-day-active.weather-matrix-day-3 { border-top-color: #c2872f !important; }
.weather-matrix-cell-day-active.weather-matrix-day-4 { border-top-color: #8064a9 !important; }
.weather-matrix-cell-day-active.weather-matrix-day-5 { border-top-color: #b46b45 !important; }
.weather-matrix-cell-day-active.weather-matrix-day-6 { border-top-color: #617a4d !important; }
.weather-matrix-cell-day-active.weather-matrix-day-7 { border-top-color: #a35d74 !important; }

/* === Cleaned day-stage model: visible day bands and stable controls === */

.weather-matrix-cell-day-active {
  opacity: 1 !important;
}

/* === Explicit overnight stop model === */

/* === Simplified route-weather editor: no manual day selector === */

/* === Route weather editor refinements + clean day-outline map === */
.weather-point-row {
  display: grid !important;
  gap: 0.30rem !important;
  align-items: end !important;
  padding: 0.34rem 0.42rem !important;
  border-bottom: 1px solid var(--line-soft) !important;
  background: rgba(248,250,252,0.62) !important;
  grid-template-columns: minmax(12rem, 1.40fr) minmax(6.6rem, 0.46fr) minmax(7.4rem, 0.54fr) minmax(8rem, 0.72fr) minmax(5.2rem, 0.30fr) !important;
}.weather-point-row-fixed {
  background: rgba(241,245,249,0.60) !important;
}

.weather-point-add-inline {
  display: grid;
  grid-template-columns: minmax(12rem, 1.35fr) minmax(7.6rem, 0.58fr) minmax(6.8rem, 0.46fr) 6.8rem;
  gap: 0.34rem;
  align-items: end;
  margin-top: 0.50rem;
  padding: 0.48rem 0.52rem;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: rgba(248,250,252,0.72);
}

.weather-point-add-inline label {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.weather-point-add-inline label span {
  color: var(--text-light);
  font-size: 0.52rem;
  font-weight: 840;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.weather-point-add-inline input,
.weather-point-add-inline select {
  width: 100%;
  min-width: 0;
  height: 1.92rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  padding: 0.22rem 0.36rem;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 760;
}

.weather-point-overnight-field input[readonly] {
  background: rgba(241,245,249,0.78) !important;
  color: var(--text-muted) !important;
}

.weather-point-notice {
  display: grid;
  gap: 0.22rem;
  margin: 0.42rem 0 0;
}

.weather-point-notice span {
  padding: 0.36rem 0.50rem;
  border: 1px solid rgba(31,111,91,0.18);
  border-radius: 11px;
  background: rgba(31,111,91,0.07);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 760;
}

.weather-point-footer {
  padding: 0.44rem 0.52rem;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(248,250,252,0.70);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  margin-top: 0.50rem !important;
}

.weather-point-footer-actions {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.48rem !important;
  flex: 0 0 auto !important;
}

.weather-point-restore {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  padding: 0.28rem 0.72rem !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  min-width: 8.2rem !important;
  height: 2.05rem !important;
  background: rgba(255,255,255,0.92) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(31,111,91,0.22) !important;
  box-shadow: none !important;
}

.weather-point-save-all {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(31,111,91,0.22) !important;
  border-radius: 999px !important;
  background: var(--accent) !important;
  color: #fff !important;
  padding: 0.28rem 0.78rem !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  min-width: 8.8rem !important;
  height: 2.05rem !important;
}

/* New map day rendering: small colored outside border, not a huge halo. */
.weather-matrix-cell-day-muted {
  opacity: 0.86 !important;
}

@media (max-width: 1100px) {
  .weather-point-add-inline {
    grid-template-columns: 1fr 8rem;
  }

  .weather-point-add-inline label:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1020px) {
  .weather-point-row {
    grid-template-columns: 1fr 7rem !important;
  }

  .weather-point-row label:first-child {
    grid-column: 1 / -1 !important;
  }

  .weather-point-meta {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 920px) {
  .weather-point-footer {
  align-items: stretch !important;
  flex-direction: column !important;
}

  .weather-point-footer-actions {
  width: 100% !important;
  justify-content: flex-end !important;
}

  .weather-point-restore,
  .weather-point-save-all {
  flex: 1 1 auto !important;
}
}/* Keep the right-side stack compact after moving day rows to a separate card. */

/* === Route map encoding: day outside, elevation inside === */

/* === Collision-aware route markers and overnight boundary rings === */

/* === Consistent day-stage metrics and cleaner forecast cards === */
.trip-weather-decision-card {
  padding: 0.72rem 0.80rem !important;
}

.trip-weather-decision-card .weather-card-head {
  align-items: flex-start !important;
  margin-bottom: 0.42rem !important;
}

.trip-weather-decision-card .weather-card-label {
  display: block;
  margin-bottom: 0.10rem;
}

.trip-weather-decision-card .weather-date-line {
  margin: 0 !important;
  color: var(--text-light) !important;
  font-size: 0.72rem !important;
  font-weight: 780 !important;
}

.weather-forecast-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.60rem;
  align-items: end;
  margin: 0.28rem 0 0.45rem;
}

.weather-forecast-hero .weather-verdict {
  margin: 0 0 0.10rem !important;
}

.weather-forecast-hero .weather-card-main {
  margin: 0 !important;
}

.weather-forecast-hero .weather-risk-badges {
  justify-content: flex-end;
  margin: 0 !important;
  max-width: 11rem;
}

.weather-card-grid-compact {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.28rem !important;
  margin-top: 0.40rem !important;
}

.weather-card-grid-compact span {
  min-height: 2.25rem !important;
  padding: 0.34rem 0.42rem !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.38) !important;
}

.weather-card-grid-compact span b {
  font-size: 0.82rem !important;
  line-height: 1.05 !important;
}

.weather-card-grid-compact span i {
  display: block !important;
  margin-top: 0.08rem !important;
  color: var(--text-muted) !important;
  font-size: 0.61rem !important;
  font-style: normal !important;
  font-weight: 760 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.weather-card-grid-compact span em {
  font-size: 0.53rem !important;
}@media (max-width: 760px) {
  .weather-forecast-hero {
    grid-template-columns: 1fr;
  }

  .weather-forecast-hero .weather-risk-badges {
    justify-content: flex-start;
    max-width: none;
  }

  .weather-card-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }}


/* === Day summary === */
.trip-day-summary-card {
  margin: 0 !important;
  padding: 0.60rem 0.70rem 0.58rem !important;
  border: 1px solid rgba(255,255,255,0.88);
  border-radius: 16px;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 14px 34px rgba(15,43,37,0.07);
}

.trip-day-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.36rem !important;
  padding-bottom: 0.28rem;
  border-bottom: 1px solid var(--line-soft);
}

.trip-day-summary-head span {
  color: var(--text-light);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.trip-day-summary-head em {
  color: var(--text-light);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 740;
}

.trip-day-summary-grid-head,
.trip-day-summary-row {
  display: grid !important;
  grid-template-columns: 3.2rem minmax(4.3rem, 0.72fr) minmax(4.3rem, 0.72fr) minmax(4.3rem, 0.72fr) minmax(6rem, 1fr) !important;
  gap: 0.48rem !important;
  align-items: center !important;
}

.trip-day-summary-grid-head {
  padding: 0.10rem 0 0.22rem !important;
  color: var(--text-light) !important;
  font-size: 0.52rem !important;
  font-weight: 880 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--line-soft) !important;
}

.trip-day-summary-row {
  padding: 0.26rem 0 !important;
  border-bottom: 1px solid rgba(226,232,240,0.55) !important;
}

.trip-day-summary-row:last-of-type {
  border-bottom: none !important;
}

.trip-day-summary-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: start !important;
  min-width: 1.8rem !important;
  height: 1.18rem !important;
  padding: 0 0.34rem !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.72) !important;
}

.trip-day-summary-row b,
.trip-day-summary-row .trip-day-summary-metric {
  color: var(--text) !important;
  font-size: 0.74rem !important;
  font-weight: 840 !important;
  white-space: nowrap !important;
}

.trip-day-summary-row .trip-day-summary-metric {
  color: var(--text-muted) !important;
}

.trip-day-summary-row .trip-day-summary-weather {
  color: var(--text-light) !important;
  font-size: 0.66rem !important;
  font-style: normal !important;
  font-weight: 760 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.trip-day-summary-row .trip-day-summary-daylight {
  justify-self: end !important;
  color: var(--text-muted) !important;
}

.trip-day-summary-daylight-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem 0.38rem;
  margin-top: 0.34rem;
  padding-top: 0.32rem;
  border-top: 1px solid rgba(226,232,240,0.68);
  color: var(--text-muted);
  font-size: 0.58rem;
  font-weight: 760;
}

.trip-day-summary-daylight-strip > span:first-child {
  color: var(--text-light);
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.trip-day-summary-daylight-strip b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.42rem;
  height: 0.96rem;
  margin-right: 0.18rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.50rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 1.3px rgba(255,255,255,0.72);
}


@media (max-width: 760px) {
  .trip-day-summary-grid-head {
    display: none !important;
  }

  .trip-day-summary-row {
    grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0.34rem !important;
  }

  .trip-day-summary-row .trip-day-summary-weather {
    grid-column: 2 / -1 !important;
  }

  .trip-day-summary-row .trip-day-summary-daylight {
    grid-column: 2 / -1 !important;
    justify-self: start !important;
  }
}

/* === Day-aware elevation profile and cleaner day summary === */

/* === Map-style elevation profile: day outside, elevation inside === */

/* === Root hero alignment fix: SVG no longer sizes the grid rows ===
   The map SVG previously kept contributing its own intrinsic height, so the grid
   expanded and inserted large vertical gaps. Here the hero is a single grid,
   but the SVG is absolutely positioned inside the map card. This keeps the map
   visually stretched while the right-side content controls the row heights. */


/* Flatten only the wrappers; the actual cards remain grid items. */


/* Map spans title, stats, profile and forecast rows. It does not contribute
   height because the SVG inside it is absolutely positioned. */


/* The SVG fills the map card visually but no longer determines its height. */


/* Legend and day summary are in the same final row, so the bottoms align. */

/* Keep markers inside the map card after the SVG becomes absolute. */


/* Stacked layout: restore normal flow. */

/* === Compact route forecast card v53: fixed hierarchy + no competing columns === */
.route-forecast-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "top top"
    "status metrics"
    "badges badges";
  gap: 0.38rem 0.70rem;
  align-items: center;
  margin: 0 !important;
  padding: 0.56rem 0.70rem 0.60rem !important;
  border: 1px solid rgba(255,255,255,0.88);
  border-radius: 18px;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 12px 30px rgba(15,43,37,0.07);
}

.route-forecast-summary-top {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.62rem;
  min-width: 0;
  padding-bottom: 0.28rem;
  border-bottom: 1px solid var(--line-soft);
}

.route-forecast-summary-heading {
  display: grid;
  gap: 0.04rem;
  min-width: 0;
  justify-items: start;
  text-align: left;
}

.route-forecast-summary-label {
  color: var(--text-light);
  font-size: 0.62rem;
  font-weight: 920;
  letter-spacing: 0.13em;
  line-height: 1.05;
  text-transform: uppercase;
}

.route-forecast-summary-heading em {
  display: block;
  overflow: hidden;
  max-width: 100%;
  color: var(--text-light);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 740;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-forecast-summary-status {
  grid-area: status;
  display: grid;
  gap: 0.06rem;
  min-width: 0;
  justify-items: start;
  text-align: left;
}

.route-forecast-summary-status strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 930;
  line-height: 1.06;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-forecast-summary-metrics {
  grid-area: metrics;
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(4.2rem, auto));
  gap: 0.30rem;
  align-items: center;
  justify-self: end;
}

.route-forecast-summary-metrics span {
  display: grid;
  justify-items: center;
  min-height: 2.16rem;
  padding: 0.25rem 0.48rem 0.21rem;
  border: 1px solid rgba(226,232,240,0.82);
  border-radius: 14px;
  background: rgba(248,250,252,0.78);
}

.route-forecast-summary-metrics b {
  color: var(--text);
  font-size: 0.80rem;
  font-weight: 930;
  line-height: 1.05;
  white-space: nowrap;
}

.route-forecast-summary-metrics i {
  color: var(--text-light);
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 860;
  letter-spacing: 0.10em;
  line-height: 1;
  text-transform: uppercase;
}

.route-forecast-summary-badges {
  grid-area: badges;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.24rem;
  min-width: 0;
}

.route-forecast-summary-badges .weather-risk-badge {
  padding: 0.13rem 0.38rem !important;
  font-size: 0.58rem !important;
  line-height: 1.04 !important;
}

.route-forecast-summary-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.26rem;
  flex: 0 0 auto;
  white-space: nowrap;
}

.route-forecast-summary-actions .route-forecast-refresh-form {
  margin: 0;
}

.route-forecast-action-button {
  padding: 0.18rem 0.46rem !important;
  min-height: 1.46rem !important;
  border-radius: 999px !important;
  font-size: 0.64rem !important;
  line-height: 1.05 !important;
}

.route-forecast-summary-card-muted {
  grid-template-areas:
    "top"
    "status";
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 760px) {
  .route-forecast-summary-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "status"
      "metrics"
      "badges";
    align-items: stretch;
  }

  .route-forecast-summary-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-self: stretch;
  }

  .route-forecast-summary-badges,
  .route-forecast-summary-actions {
    justify-content: flex-start;
  }
}

/* === Integrated route weather + compact route water v39 === */
/* === Readable route-weather badges v44 ===
   Weather annotations are now normal HTML overlay elements positioned from SVG
   viewBox coordinates by JavaScript. This keeps the text at UI size instead of
   scaling down with the route drawing. */

.route-water-summary-card {
  gap: 0 !important;
  padding: 0.56rem 0.66rem 0.50rem !important;
}

.route-water-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.52rem;
  margin-bottom: 0.34rem !important;
  padding-bottom: 0.28rem;
  border-bottom: 1px solid var(--line-soft);
}

.route-water-summary-head > div {
  min-width: 0;
}

.route-water-summary-head > div > span {
  display: block;
  color: var(--text-light);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.route-water-summary-head em {
  display: block;
  overflow: hidden;
  margin-top: 0.04rem;
  color: var(--text-light);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-water-summary-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  flex: 0 0 auto;
}

.route-water-planning-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.42rem;
  padding: 0.14rem 0.42rem;
  border: 1px solid rgba(100,116,139,0.18);
  border-radius: 999px;
  background: rgba(248,250,252,0.90);
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}

.route-water-planning-chip.good { border-color: rgba(45,138,112,0.20); background: rgba(45,138,112,0.08); color: var(--accent); }
.route-water-planning-chip.info { border-color: rgba(59,130,246,0.20); background: rgba(59,130,246,0.08); color: #2f5f93; }
.route-water-planning-chip.warning { border-color: rgba(161,98,7,0.24); background: rgba(245,158,11,0.10); color: #92400e; }
.route-water-planning-chip.danger { border-color: rgba(180,35,24,0.22); background: rgba(254,226,226,0.72); color: #b42318; }

.route-water-summary-grid-head,
.route-water-summary-row {
  display: grid !important;
  grid-template-columns: 3.2rem minmax(4.3rem, 0.70fr) minmax(5.4rem, 1fr) minmax(6.3rem, 1.2fr) !important;
  gap: 0.46rem !important;
  align-items: center !important;
}

.route-water-summary-grid-head {
  padding: 0.08rem 0 0.22rem !important;
  color: var(--text-light) !important;
  font-size: 0.52rem !important;
  font-weight: 880 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--line-soft) !important;
}

.route-water-summary-row {
  padding: 0.25rem 0 !important;
  border-bottom: 1px solid rgba(226,232,240,0.55) !important;
}

.route-water-summary-row:last-of-type {
  border-bottom: none !important;
}

.route-water-summary-row b,
.route-water-summary-row .route-water-summary-metric,
.route-water-summary-row em {
  color: var(--text) !important;
  font-size: 0.74rem !important;
  font-style: normal !important;
  font-weight: 840 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.route-water-summary-row .route-water-summary-metric,
.route-water-summary-row em {
  color: var(--text-muted) !important;
}

.route-water-summary-row.warning em {
  color: #92400e !important;
}

@media (max-width: 760px) {
  .route-water-summary-head,
  .route-water-summary-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .route-water-summary-actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .route-water-summary-grid-head {
    display: none !important;
  }

  .route-water-summary-row {
    grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .route-water-summary-row em {
    grid-column: 2 / -1;
  }
}

/* === Route/weather root layout guard v40 ===
   Root causes fixed here:
   1) Route-water used both .trip-weather-card and .trip-day-summary-card, so CSS
      placed it in the same grid row as the real day summary. Keep those roles
      mutually exclusive.
   2) The weather controls were rendered as a sibling of the map while route/info
      wrappers are flattened with display: contents. Absolute positioning then
      anchored outside the map and overlapped the route title. Controls now live
      inside .trip-route-visual; these rules keep that contract explicit. */

/* === Related items: same-color left relation rail === */
.category-tile table.item-table tbody tr.related-box-row td:first-child,
.category-tile table.item-table tbody tr.related-item-row td:first-child,
.category-tile table.item-table tbody tr.related-parent-row td:first-child,
.category-tile table.item-table tbody tr.related-child-row td:first-child {
  box-shadow: inset 4px 0 0 var(--relation-color, var(--cat-color, #2f7d68)) !important;
  border-left: 1px solid color-mix(in srgb, var(--relation-color, var(--cat-color, #2f7d68)) 34%, rgba(255,255,255,0.86)) !important;
  border-radius: 12px 0 0 12px !important;
}

.category-tile table.item-table tbody tr.related-box-row td:last-child,
.category-tile table.item-table tbody tr.related-item-row td:last-child,
.category-tile table.item-table tbody tr.related-parent-row td:last-child,
.category-tile table.item-table tbody tr.related-child-row td:last-child {
  border-radius: 0 12px 12px 0 !important;
}

/* Keep the row itself clean; only a very light tint on hover to reveal the set. */
.category-tile table.item-table tbody tr.related-box-row:hover td,
.category-tile table.item-table tbody tr.related-item-row:hover td,
.category-tile table.item-table tbody tr.related-parent-row:hover td,
.category-tile table.item-table tbody tr.related-child-row:hover td {
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--relation-color, var(--cat-color, #2f7d68)) 7%, transparent),
      color-mix(in srgb, var(--relation-color, var(--cat-color, #2f7d68)) 7%, transparent)
    ),
    rgba(255,255,255,0.96) !important;
}

.category-tile table.item-table tbody tr.related-child-row .item-text-cell,
.category-tile table.item-table tbody tr.related-item-row .item-text-cell {
  padding-left: 0.72rem !important;
}

.category-tile table.item-table tbody tr.related-child-row .item-title-open::before,
.category-tile table.item-table tbody tr.related-item-row .item-title-open::before {
  content: "↳";
  display: inline-block;
  margin-right: 0.32rem;
  color: color-mix(in srgb, var(--relation-color, var(--cat-color, #2f7d68)) 68%, var(--text-light));
  font-weight: 850;
}

.category-tile table.item-table tbody tr.related-parent-row .item-title-open {
  font-weight: 840;
}


.related-set-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 820;
  line-height: 1;
  padding: 0.15rem 0.42rem 0.17rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--relation-color, var(--cat-color, #2f7d68)) 70%, #1f2933);
  background: color-mix(in srgb, var(--relation-color, var(--cat-color, #2f7d68)) 12%, rgba(255,255,255,0.92));
  border: 1px solid color-mix(in srgb, var(--relation-color, var(--cat-color, #2f7d68)) 24%, rgba(255,255,255,0.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.54);
  transform: translateY(-0.02rem);
}

.related-set-badge:hover {
  background: color-mix(in srgb, var(--relation-color, var(--cat-color, #2f7d68)) 17%, rgba(255,255,255,0.90));
  border-color: color-mix(in srgb, var(--relation-color, var(--cat-color, #2f7d68)) 34%, rgba(255,255,255,0.64));
}

/* === Unified compact item badges === */
.category-tile .item-title-line .virtual-shared-badge,
.category-tile .item-title-line .related-set-badge,
.category-tile .item-title-line .shared-allocation-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  padding: 0.10rem 0.38rem 0.11rem !important;
  font-size: 0.65rem !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: 0.005em !important;
  transform: none !important;
}

.category-tile .item-title-line .shared-allocation-status-badge.auto_scaled {
  color: #8a5a00 !important;
  background: rgba(255, 193, 7, 0.16) !important;
  border: 1px solid rgba(217, 119, 6, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.54) !important;
}

.category-tile .item-title-line .shared-allocation-status-badge.mismatch {
  color: #991b1b !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(185, 28, 28, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.54) !important;
}

.category-tile .item-title-line .shared-allocation-status-badge.auto_scaled:hover {
  background: rgba(255, 193, 7, 0.22) !important;
}

.category-tile .item-title-line .shared-allocation-status-badge.mismatch:hover {
  background: rgba(239, 68, 68, 0.18) !important;
}

/* === Category footer cleanup: remove faint separator lines === */
/* The category tables already use card-like row spacing. The extra borders on
   the last item, Add item row and totals/footer row created redundant faint
   horizontal lines. */
.category-tile table.item-table tbody tr.item-row:last-of-type td {
  border-bottom-color: transparent !important;
}

.category-tile table.item-table tbody tr.add-item-row td,
.category-tile table.item-table tbody tr.add-item-row:hover td {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.category-tile table.item-table tfoot td,
.category-tile table.item-table tfoot tr,
.category-tile table.item-table tfoot tr:hover td {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.category-tile table.item-table tfoot td:first-child {
  border-left: 0 !important;
}

.category-tile table.item-table tfoot td:last-child {
  border-right: 0 !important;
}

/* === Category footer cleanup: remove remaining item/add separators === */
/* The earlier last-of-type selector does not catch the final item row because
   the Add item row follows it. These selectors remove that remaining line. */
.category-tile table.item-table tbody tr.item-row:has(+ tr.add-item-row) td,
.category-tile table.item-table tbody tr.item-row:nth-last-child(2) td {
  border-bottom: 0 !important;
}

/* Also remove any top edge/line from the Add row itself, including first/last
   cell edges that can appear as a second faint separator. */
.category-tile table.item-table tbody tr.add-item-row,
.category-tile table.item-table tbody tr.add-item-row td,
.category-tile table.item-table tbody tr.add-item-row td:first-child,
.category-tile table.item-table tbody tr.add-item-row td:last-child {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
}

/* Keep the totals/footer visually separate through spacing only, not lines. */
.category-tile table.item-table tfoot,
.category-tile table.item-table tfoot tr,
.category-tile table.item-table tfoot td,
.category-tile table.item-table tfoot td:first-child,
.category-tile table.item-table tfoot td:last-child {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* === Category summary strip: remove top divider line === */
/* This is the remaining faint line above the summary statistics: it is on the
   .category-total-strip itself, not on the tfoot/table cells. */
.category-tile table.item-table tfoot .category-total-strip,
.category-total-strip {
  border-top: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Keep the spacing clean now that the divider is gone. */
.category-tile table.item-table tfoot .category-total-strip {
  padding-top: 0.18rem !important;
}

/* === Shared virtual rows: aligned 0g participants === */
.category-tile table.item-table tbody tr.virtual-shared-row {
  background: rgba(255,255,255,0.74) !important;
}

.category-tile table.item-table tbody tr.virtual-shared-row td:first-child {
  box-shadow: inset 4px 0 0 rgba(43, 114, 190, 0.78) !important;
}

.category-tile table.item-table tbody tr.virtual-shared-physical-row td:first-child {
  box-shadow: inset 4px 0 0 rgba(31,111,91,0.78) !important;
}

.category-tile table.item-table tbody tr.virtual-shared-zero-row {
  opacity: 1 !important;
}

.category-tile table.item-table tbody tr.virtual-shared-zero-row td {
  background: rgba(247,248,250,0.72) !important;
}

.category-tile table.item-table tbody tr.virtual-shared-zero-row td:first-child {
  box-shadow: inset 4px 0 0 rgba(148,163,184,0.72) !important;
}

.category-tile table.item-table tbody tr.virtual-shared-zero-row .virtual-status-cell {
  color: #a8b1bc !important;
}

.category-tile table.item-table tbody tr.virtual-shared-row:hover td {
  background: rgba(242,247,251,0.92) !important;
}

.category-tile table.item-table tbody tr.virtual-shared-zero-row:hover td {
  background: rgba(243,245,247,0.92) !important;
}

/* === Shared rows keep relation rails === */
/* Shared virtual rows have their own blue/grey carrying rail. When a shared
   item is also related to another item, the relation rail should take priority
   so the relation remains visible after alignment across people. */


.category-tile table.item-table tbody tr.virtual-shared-row.related-child-row .item-title-open::before,
.category-tile table.item-table tbody tr.virtual-shared-row.related-item-row .item-title-open::before {
  content: "↳";
  display: inline-block;
  margin-right: 0.32rem;
  color: color-mix(in srgb, var(--relation-color, var(--cat-color, #2f7d68)) 68%, var(--text-light));
  font-weight: 850;
}

/* === Shared rows: physical rows stay normal, virtual rows stay aligned === */
/* Root behavior:
   - physical shared items remain normal editable rows, preserving quantities;
   - only non-carriers get virtual 0g/allocation rows;
   - relation rails win over shared/zero shared rails. */
.category-tile table.item-table tbody tr.virtual-shared-row.related-box-row td:first-child,
.category-tile table.item-table tbody tr.virtual-shared-row.related-item-row td:first-child,
.category-tile table.item-table tbody tr.virtual-shared-row.related-parent-row td:first-child,
.category-tile table.item-table tbody tr.virtual-shared-row.related-child-row td:first-child,
.category-tile table.item-table tbody tr.virtual-shared-zero-row.related-box-row td:first-child,
.category-tile table.item-table tbody tr.virtual-shared-zero-row.related-item-row td:first-child,
.category-tile table.item-table tbody tr.virtual-shared-zero-row.related-parent-row td:first-child,
.category-tile table.item-table tbody tr.virtual-shared-zero-row.related-child-row td:first-child {
  box-shadow: inset 4px 0 0 var(--relation-color, var(--cat-color, #2f7d68)) !important;
}

.category-tile table.item-table tbody tr.virtual-shared-zero-row td {
  color: var(--text-light) !important;
}

.category-tile table.item-table tbody tr.virtual-shared-zero-row .item-title-open,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .item-title-description,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .item-title-name,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .item-title-brand,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .virtual-shared-meta {
  color: var(--text-light) !important;
}

.category-tile table.item-table tbody tr.virtual-shared-zero-row .shared-allocation-weight {
  color: #8a96a3 !important;
  background: rgba(148,163,184,0.12) !important;
  border-color: rgba(148,163,184,0.20) !important;
}

.virtual-shared-badge.zero-share-badge {
  color: #7f8b98 !important;
  background: rgba(148,163,184,0.12) !important;
  border-color: rgba(148,163,184,0.18) !important;
}

.lazy-modal-loading-row td {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: 1rem;
}

.gear-empty-filter-message[data-lazy-modal-loading],
.gear-empty-filter-message[data-lazy-modal-error] {
  margin-top: 0.75rem;
}

.gear-empty-filter-message[data-lazy-modal-error] {
  color: #991b1b;
}

/* === Gear closet and food pantry quick-add === */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.closet-quick-add-form {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.9fr) minmax(7rem, 1.1fr) auto;
  gap: 0.28rem;
  align-items: center;
  min-width: 17rem;
}

.food-pantry-quick-add-form {
  grid-template-columns: minmax(6rem, 1fr) auto;
  min-width: 11rem;
}

.closet-quick-add-form select {
  width: 100%;
  min-width: 0;
  padding: 0.28rem 0.36rem;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(255,255,255,0.82);
  font-size: 0.78rem;
}

.closet-quick-add-form .quick-add-submit {
  white-space: nowrap;
}

.food-pantry-panel .modal-context {
  max-width: 58rem;
}

.food-pantry-table .gear-nutrition-form {
  min-width: 19rem;
}

.food-pantry-row .gear-item-main {
  min-width: 16rem;
}

@media (max-width: 900px) {
  .closet-quick-add-form,
  .food-pantry-quick-add-form {
    grid-template-columns: 1fr;
    min-width: 0;
  }
}

/* === Add item modal source tabs === */
.modal-tabs .modal-tab.hidden {
  display: none !important;
}

/* === Food and drinks summary cards === */
.category-food-summary-row td {
  padding: 0.34rem 0 0.18rem !important;
  border: 0 !important;
  background: transparent !important;
}

.food-summary-card {
  display: grid;
  gap: 0.46rem;
  padding: 0.62rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--cat-color, #8a94a3) 18%, white);
  border-radius: 16px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--cat-color, #8a94a3) 7%, white),
      rgba(255,255,255,0.84)
    );
  box-shadow: 0 8px 20px rgba(15,23,42,0.045);
}

/* Food summary is now embedded at the top of the Food & nutrition category.
   Keep the summary visually part of the category instead of a separate white table box. */
.category-tile.food-category-tile table.item-table tbody tr.category-food-summary-row,
.category-tile.food-category-tile table.item-table tbody tr.category-food-summary-row:nth-child(odd),
.category-tile.food-category-tile table.item-table tbody tr.category-food-summary-row:hover {
  background: transparent !important;
}

.category-tile.food-category-tile table.item-table tbody tr.category-food-summary-row td {
  padding: 0.16rem 0.12rem 0.52rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.category-tile.food-category-tile .food-summary-card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.16rem 0.18rem 0.34rem !important;
}

.category-tile.food-category-tile .category-food-summary-row td::after {
  content: "";
  display: block;
  height: 1px;
  margin: 0.50rem 0.34rem 0;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--cat-color, #8a94a3) 20%, rgba(226,232,240,0.9)),
    transparent
  );
}

.category-tile.food-category-tile .category-food-summary-row + tr.item-row td,
.category-tile.food-category-tile .category-food-summary-row + tr.item-row .drag-cell {
  border-top-color: color-mix(in srgb, var(--cat-color, #8a94a3) 16%, white) !important;
}

/* Food summaries sit before the item controls. Hide the normal table header
   for food tables and render a compact item header below the summary instead,
   so the backpack/worn/basecamp icons no longer float above the summary. */


.category-tile.food-category-tile table.item-table .food-item-header-row td {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-top: 0.08rem !important;
  padding-bottom: 0.10rem !important;
  color: var(--text-muted) !important;
}

.category-tile.food-category-tile table.item-table .food-item-header-row td:first-child {
  padding-left: 0.62rem !important;
}

.category-tile.food-category-tile table.item-table .food-item-header-row td.bw {
  text-align: center !important;
  color: rgba(52, 73, 66, 0.72) !important;
  font-size: 0.90rem !important;
}

.category-tile.food-category-tile table.item-table .food-item-header-row td.g.quiet-control-head {
  color: transparent !important;
  font-size: 0 !important;
}

.category-tile.food-category-tile table.item-table .food-item-header-row .person-table-title {
  font-size: 0.93rem !important;
  color: var(--text) !important;
}

.category-tile.food-category-tile table.item-table .food-item-header-row + tr.item-row td,
.category-tile.food-category-tile table.item-table .food-item-header-row + tr.item-row .drag-cell {
  border-top-color: color-mix(in srgb, var(--cat-color, #8a94a3) 16%, white) !important;
}

.food-summary-header {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  color: var(--text);
  font-size: 0.84rem;
}

.food-summary-header .food-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  box-shadow: inset 0 0 0 1px rgba(226,232,240,0.85);
}

.food-summary-header strong {
  font-weight: 880;
}

.food-summary-header em {
  margin-left: auto;
  color: var(--text-light);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 750;
}

.food-summary-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.34rem;
}

.food-summary-metrics.no-data-warning {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.food-summary-metrics.has-data-warning {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.food-summary-metrics > span {
  display: grid;
  gap: 0.08rem;
  padding: 0.34rem 0.40rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(226,232,240,0.72);
  min-width: 0;
}

.food-summary-metrics b {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 880;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.food-summary-metrics small {
  color: var(--text-light);
  font-size: 0.60rem;
  font-weight: 780;
  letter-spacing: 0.05em;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
}

.food-summary-metrics em {
  color: var(--text-light);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1.1;
  white-space: nowrap;
}

.food-summary-metrics > span.complete > b {
  color: var(--accent);
}

.food-summary-metrics > span.has-missing > b {
  color: #a15c1d;
}

.food-summary-breakdown {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.34rem;
  padding: 0.30rem 0.42rem;
  border-radius: 12px;
  border: 1px dashed rgba(148,163,184,0.38);
  background: rgba(255,255,255,0.50);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.food-summary-breakdown strong {
  color: var(--text);
  font-weight: 860;
}

.food-summary-breakdown span {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.10rem 0.34rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.24);
  background: rgba(255,255,255,0.64);
  white-space: nowrap;
}

.food-summary-breakdown b {
  color: var(--text);
  font-weight: 860;
}

.food-summary-breakdown small {
  color: #a15c1d;
  font-size: 0.66rem;
  font-weight: 800;
}

.food-summary-adequacy,
.food-summary-secondary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.30rem 0.42rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.54);
  border: 1px dashed rgba(148,163,184,0.42);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.food-summary-adequacy.very-low,
.food-summary-adequacy.low,
.food-summary-adequacy.good,
.food-summary-adequacy.high,


.food-summary-adequacy strong,
.food-summary-secondary strong {
  color: var(--text);
  font-weight: 850;
}

.food-summary-adequacy span:not(:last-child)::after,
.food-summary-secondary span:not(:last-child)::after {
  content: "·";
  margin-left: 0.35rem;
  color: var(--text-light);
  font-weight: 600;
}

.food-target-form {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  padding: 0.08rem 0.32rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(255,255,255,0.64);
  color: var(--text-muted);
  white-space: nowrap;
}

.food-target-form label,
.food-target-form span {
  color: var(--text-light);
  font-size: 0.68rem;
  font-weight: 800;
}

.food-target-form input[type="number"] {
  width: 4.6rem;
  min-width: 0;
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 8px;
  background: rgba(255,255,255,0.86);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 850;
  padding: 0.14rem 0.28rem;
  text-align: right;
}

.food-target-form.saving {
  opacity: 0.72;
}

/* === Trail food adequacy warning === */
.food-summary-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.42rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.38rem 0.50rem;
  border: 1px solid rgba(194,135,47,0.22);
  border-radius: 11px;
  background: rgba(194,135,47,0.10);
  color: #8a611f;
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.25;
}

.food-summary-warning-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.62);
  color: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.food-summary-warning strong {
  display: block;
  color: inherit;
  font-size: 0.76rem;
  font-weight: 860;
  margin-bottom: 0.08rem;
}

.food-summary-warning p {
  margin: 0;
  color: inherit;
  font-weight: 720;
}

.food-summary-warning.good {
  border-color: rgba(31,111,91,0.20);
  background: rgba(31,111,91,0.08);
  color: #1f6f5b;
}

.food-summary-warning.high,
.food-summary-warning.very-high {
  border-color: rgba(79,125,168,0.22);
  background: rgba(79,125,168,0.08);
  color: #3d668e;
}

.food-summary-footer {
  color: var(--text-light);
  font-size: 0.72rem;
  font-weight: 740;
}

.food-summary-footer.has-missing {
  color: #a15c1d;
}

.food-summary-footer.complete {
  color: var(--accent);
}

@media (max-width: 1100px) {
  .food-summary-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .food-summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* === Refined on-trail food summary interpretation cards === */
.food-summary-decision-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.42rem;
}

.food-summary-decision-cards .food-decision-card {
  position: relative;
  display: grid !important;
  align-content: start;
  gap: 0.28rem !important;
  min-width: 0;
  padding: 0.48rem 0.54rem !important;
  border-radius: 14px !important;
  border: 1px solid rgba(226,232,240,0.84) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.82), rgba(248,250,252,0.64)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 6px 16px rgba(15,23,42,0.035);
}

.food-summary-decision-cards .food-decision-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
  background: rgba(148,163,184,0.62);
}

.food-decision-card.status-good::before,
.food-decision-card.density-efficient::before,
.food-decision-card.density-very-efficient::before,
.food-decision-card.macro-endurance-mix::before,
.food-decision-card.macro-balanced::before,
.food-decision-card.water-good::before {
  background: rgba(31,111,91,0.70);
}

.food-decision-card.status-low::before,
.food-decision-card.status-high::before,
.food-decision-card.density-moderate::before,
.food-decision-card.data-warning::before,
.food-decision-card.water-warning::before,
.food-decision-card.macro-low-protein::before,
.food-decision-card.macro-mixed::before {
  background: rgba(194,135,47,0.78);
}

.food-decision-card.status-very-low::before,
.food-decision-card.status-very-high::before,
.food-decision-card.water-danger::before,
.food-decision-card.density-low-density::before,
.food-decision-card.macro-protein-heavy::before,
.food-decision-card.macro-fat-rich::before,
.food-decision-card.macro-carb-heavy::before {
  background: rgba(177,83,69,0.78);
}

.food-decision-card.water-info::before,
.food-decision-card.water-neutral::before {
  background: rgba(79,125,168,0.68);
}

.food-decision-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.48rem;
  min-width: 0;
}

.food-decision-card-top small {
  overflow: hidden;
  color: var(--text-light);
  font-size: 0.60rem;
  font-weight: 840;
  letter-spacing: 0.065em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Interpretation typography and state colors are shared in planning-ui.css. */

.food-decision-primary {
  display: flex;
  align-items: baseline;
  gap: 0.26rem;
  min-width: 0;
}

.food-decision-primary strong {
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 920;
  letter-spacing: 0.005em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.food-decision-primary.compact strong {
  font-size: 0.95rem;
}

.food-decision-primary span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 820;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.food-decision-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.22rem 0.42rem;
  color: var(--text-muted);
  font-size: 0.67rem;
  font-weight: 760;
  line-height: 1.18;
}

.food-decision-meta span {
  min-width: 0;
}

.food-summary-water-form {
  display: grid;
  gap: 0.24rem;
  margin: 0;
}

.food-summary-water-form label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.22rem;
  min-width: 0;
}

.food-summary-water-form label > span {
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 820;
}

.food-summary-water-form input[name="planned_water_l"] {
  width: 4.2rem;
  border: 1px solid rgba(226,232,240,0.92);
  border-radius: 9px;
  background: rgba(255,255,255,0.88);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 880;
  line-height: 1.1;
  padding: 0.18rem 0.32rem;
  text-align: right;
}

.food-summary-water-form em {
  color: var(--text-muted);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 820;
}

.food-decision-meta.water-meta {
  display: grid;
  gap: 0.12rem;
}

.food-summary-decision-cards .food-decision-card.water {
  min-height: 0;
}

.food-summary-decision-cards .food-decision-card.water .food-summary-water-form {
  /* Override the dashboard water-row grid. In the food summary this form lives inside
     a compact card, so its children should stack inside the card instead of using
     the dashboard's three-column row layout. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.26rem;
  align-items: stretch;
  margin-top: 0.02rem;
  padding: 0;
  width: 100%;
}

.food-summary-decision-cards .food-decision-card.water .food-range-bar,
.food-summary-decision-cards .food-decision-card.water .food-range-caption,
.food-summary-decision-cards .food-decision-card.water .food-decision-meta {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.food-summary-decision-cards .food-decision-card.water .water-planned-input-row {
  justify-content: flex-start;
}

.food-summary-decision-cards .food-decision-card.water .food-decision-meta.water-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem 0.42rem;
}

.food-summary-decision-cards .food-decision-card.data-warning {
  grid-column: 1 / -1;
}

.food-range-bar {
  --marker: 0%;
  position: relative;
  display: flex;
  overflow: visible;
  height: 0.46rem;
  margin: 0.05rem 0 0.03rem;
  border-radius: 999px;
  background: rgba(226,232,240,0.74);
  box-shadow: inset 0 0 0 1px rgba(148,163,184,0.18);
}

.food-range-bar .range-segment {
  display: block;
  min-width: 0;
  opacity: 0.78;
}

.food-range-bar .range-segment:first-child {
  border-radius: 999px 0 0 999px;
}

.food-range-bar .range-segment:nth-last-child(2) {
  border-radius: 0 999px 999px 0;
}

.food-range-bar.calorie-range .very-low { flex: 70; background: rgba(177,83,69,0.72); }
.food-range-bar.calorie-range .low { flex: 20; background: rgba(194,135,47,0.72); }
.food-range-bar.calorie-range .good { flex: 20; background: rgba(31,111,91,0.72); }
.food-range-bar.calorie-range .high { flex: 10; background: rgba(79,125,168,0.68); }
.food-range-bar.calorie-range .very-high { flex: 20; background: rgba(177,83,69,0.58); }

.food-range-bar.density-range .low-density { flex: 300; background: rgba(148,163,184,0.62); }
.food-range-bar.density-range .moderate { flex: 100; background: rgba(194,135,47,0.60); }
.food-range-bar.density-range .efficient { flex: 100; background: rgba(31,111,91,0.66); }
.food-range-bar.density-range .very-efficient { flex: 100; background: rgba(37,99,155,0.60); }

.food-range-bar.water-range .capacity { flex: 1; background: rgba(79,125,168,0.62); }
.food-range-bar.water-range.no-capacity .capacity { background: rgba(148,163,184,0.46); }
.food-range-bar.water-range .range-marker { background: #4f7da8; }
.food-range-bar.water-range.over-capacity .range-marker { background: #9b4b3f; }
.food-range-caption.water-range-caption { margin-top: -0.02rem; }

.food-range-bar .range-marker {
  position: absolute;
  left: var(--marker);
  top: 50%;
  z-index: 2;
  width: 0.64rem;
  height: 0.64rem;
  border: 2px solid rgba(255,255,255,0.95);
  border-radius: 999px;
  background: var(--text);
  box-shadow: 0 1px 5px rgba(15,23,42,0.24);
  transform: translate(-50%, -50%);
}

.food-range-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.20rem 0.35rem;
  color: var(--text-light);
  font-size: 0.59rem;
  font-weight: 760;
  line-height: 1.12;
}

.food-range-caption .food-target-form {
  margin-left: auto;
}

.food-macro-stack {
  display: flex;
  overflow: hidden;
  height: 0.72rem;
  border-radius: 999px;
  background: rgba(226,232,240,0.80);
  box-shadow: inset 0 0 0 1px rgba(148,163,184,0.17);
}

.food-macro-stack span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0.22rem;
  color: white;
  font-size: 0.54rem;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
}

.food-macro-stack span + span {
  border-left: 1px solid rgba(255,255,255,0.54);
}

.food-macro-stack i {
  overflow: hidden;
  max-width: 100%;
  padding: 0 0.24rem;
  font-style: normal;
  text-overflow: ellipsis;
}

.food-macro-stack .macro-carbs { background: rgba(79,125,168,0.86); }
.food-macro-stack .macro-protein { background: rgba(124,106,166,0.86); }
.food-macro-stack .macro-fat { background: rgba(194,135,47,0.86); }

.food-macro-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.20rem 0.42rem;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 760;
  line-height: 1.12;
}

.food-macro-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  white-space: nowrap;
}

.food-macro-legend span::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.78;
}

.food-macro-legend .carbs { color: #4f7da8; }
.food-macro-legend .protein { color: #7c6aa6; }
.food-macro-legend .fat { color: #9f6b21; }
.food-macro-legend b { color: var(--text); font-weight: 860; }

.food-decision-meta.macro-meta {
  display: grid;
  gap: 0.14rem;
}

.food-summary-breakdown.meal-mix-per-day {
  background: rgba(255,255,255,0.56);
}

.food-summary-breakdown.meal-mix-per-day strong {
  margin-right: 0.08rem;
}

@media (max-width: 700px) {
  .food-summary-decision-cards {
    grid-template-columns: 1fr !important;
  }
  .food-summary-decision-cards .food-decision-card.data-warning {
    grid-column: auto;
  }
  .food-range-caption {
    justify-content: flex-start;
  }
}

/* === Food nutrition completion and meal types === */
.food-type-form {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  white-space: nowrap;
}

.food-type-select,
.compact-food-type-select,
#item-details-food-type,
#modal-new-food-type {
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(255,255,255,0.88);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 720;
  min-height: 1.75rem;
  padding: 0.22rem 0.38rem;
}

.food-type-select {
  min-width: 7.2rem;
}

.compact-food-type-select {
  max-width: 7.3rem;
}

.food-type-pill,
.nutrition-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.08rem 0.36rem;
  border: 1px solid rgba(226,232,240,0.86);
  background: rgba(255,255,255,0.72);
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 790;
  line-height: 1.1;
  white-space: nowrap;
}

.food-type-pill {
  color: var(--accent);
  background: rgba(31,111,91,0.075);
  border-color: rgba(31,111,91,0.15);
}

.nutrition-status-pill.set, .nutrition-status-pill.complete {
  color: var(--accent);
  background: rgba(31,111,91,0.075);
  border-color: rgba(31,111,91,0.16);
}

.nutrition-status-pill.missing_macros {
  color: #9a661c;
  background: rgba(194,135,47,0.10);
  border-color: rgba(194,135,47,0.22);
}

.nutrition-status-pill.missing_kcal {
  color: #a15c1d;
  background: rgba(216,130,43,0.10);
  border-color: rgba(216,130,43,0.24);
}

.nutrition-status-pill.compact {
  font-size: 0.62rem;
  padding: 0.07rem 0.32rem;
}

.food-pantry-table .nutrition-status-pill {
  font-size: 0.72rem;
}

.food-pantry-table .food-type-form {
  min-width: 10rem;
}

.food-pantry-table .gear-nutrition-form {
  align-items: center;
}

/* === Main food nutrition display === */
.nutrition-display-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.22rem;
  margin-top: 0.24rem;
  padding-left: 0.02rem;
}

.basecamp-nutrition-row {
  margin-top: 0.15rem;
  opacity: 0.82;
}

.nutrition-scope-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.10rem 0.34rem;
  border: 1px solid rgba(31,111,91,0.16);
  background: rgba(31,111,91,0.075);
  color: var(--accent);
  font-size: 0.60rem;
  font-weight: 850;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.nutrition-scope-pill.basecamp {
  border-color: rgba(148,163,184,0.34);
  background: rgba(248,250,252,0.82);
  color: var(--text-muted);
}

.nutrition-value-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.16rem;
  padding: 0.10rem 0.34rem;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,0.82);
  background: rgba(255,255,255,0.66);
  color: var(--text-muted);
  line-height: 1.1;
  white-space: nowrap;
}

.nutrition-value-pill.kcal {
  color: var(--text);
  background: rgba(31,111,91,0.065);
  border-color: rgba(31,111,91,0.13);
}

.nutrition-value-pill b {
  font-size: 0.70rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.nutrition-value-pill small {
  color: var(--text-light);
  font-size: 0.58rem;
  font-weight: 780;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

/* === Item details checkbox spacing === */
.item-details-panel .item-details-grid .modal-check-row.full {
  margin-top: 0.18rem !important;
  padding: 0.36rem 0.48rem !important;
}

.item-details-panel .item-details-grid .modal-check-row.full + .modal-check-row.full {
  margin-top: 0.10rem !important;
}

.item-details-panel .modal-check-row label {
  gap: 0.10rem !important;
}

.item-details-panel .modal-check-row small {
  line-height: 1.22;
}


/* === Performance diagnostics === */
.performance-diagnostics {
  position: fixed;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 9999;
  display: grid;
  gap: 0.34rem;
  max-width: min(62rem, calc(100vw - 1.8rem));
  max-height: min(70vh, 34rem);
  overflow: auto;
  padding: 0.42rem 0.54rem;
  border: 1px solid rgba(148,163,184,0.34);
  border-radius: 12px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 10px 28px rgba(15,23,42,0.12);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 760;
  backdrop-filter: blur(8px);
}

.performance-diagnostics-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.performance-diagnostics strong {
  color: var(--text);
  font-weight: 900;
}

.performance-diagnostics span {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
}

.performance-diagnostics-summary span:not(:last-child)::after {
  content: "·";
  margin-left: 0.28rem;
  color: var(--text-light);
  font-weight: 700;
}

.performance-diagnostics-hint {
  color: var(--text-light);
  font-size: 0.64rem;
  font-weight: 720;
}

.performance-diagnostics-hint code {
  padding: 0.04rem 0.22rem;
  border-radius: 6px;
  background: rgba(226,232,240,0.55);
  color: var(--text-muted);
  font-size: 0.64rem;
}

.performance-phases {
  display: grid;
  gap: 0.24rem;
  min-width: min(56rem, calc(100vw - 3.2rem));
}

.performance-phases table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.66rem;
}

.performance-phases th,
.performance-phases td {
  padding: 0.20rem 0.28rem;
  border-top: 1px solid rgba(226,232,240,0.78);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.performance-phases th {
  color: var(--text-light);
  font-size: 0.60rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.performance-phases td:last-child {
  white-space: normal;
  color: var(--text-light);
}

@media print {
  .performance-diagnostics {
    display: none !important;
  }
}


.qty-input.saving {
  opacity: 0.62;
}

.weight-edit-button.shared-allocation-weight {
  justify-content: flex-end;
  cursor: pointer;
}

.weight-edit-button.shared-allocation-weight:hover {
  border-color: rgba(31,111,91,0.45);
  background: var(--accent-soft);
  color: var(--accent);
}

.shared-allocation-check.allocation-ok {
  color: var(--accent);
  font-weight: 800;
}

.shared-allocation-check.allocation-error {
  color: var(--danger);
  font-weight: 800;
}

#shared-distribution-shared-count {
  font-weight: 700;
}

.shared-person-weight-option {
  grid-template-columns: minmax(150px, 1fr) 130px;
}

.shared-person-note-input {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0.42rem;
  font-size: 0.92rem;
}


/* Shared-distribution fields stay enabled for reliable form submission.
   Unselected rows are visually muted through the checkbox state, not disabled inputs. */
.shared-person-option:has(input[name="shared_person_ids[]"]:not(:checked)) input[name^="share_weight_grams["],
.shared-person-option:has(input[name="shared_person_ids[]"]:not(:checked)) input[name^="share_note["] {
  opacity: 0.52;
}

.physical-shared-meta {
  margin-top: 0.06rem !important;
}

/* Zero-share/reference rows: show that the item is carried by someone else,
   but do not make the 0 g look like an editable or allocated weight box. */
.category-tile table.item-table tbody tr.virtual-shared-zero-row .zero-allocation-weight {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.category-tile table.item-table tbody tr.virtual-shared-zero-row .zero-share-status-cell {
  color: transparent !important;
}

.category-tile table.item-table tbody tr.virtual-shared-zero-row .virtual-shared-meta {
  color: var(--text-light) !important;
  font-weight: 760 !important;
}

/* Main UI category dots: match the neat modal color dot with a white rim. */
.category-tile-header .category-color-dot,
table.item-table thead .category-color-dot,
.gear-category-pill .category-color-dot,
.category-legend-chip .category-color-dot {
  display: inline-block !important;
  width: 0.82rem !important;
  height: 0.82rem !important;
  border-radius: 999px !important;
  background: var(--cat-color, #8a94a3) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.82),
    0 0 0 3px color-mix(in srgb, var(--cat-color, #8a94a3) 24%, white) !important;
  flex: 0 0 auto !important;
}

.gear-category-pill .category-color-dot,
.category-legend-chip .category-color-dot {
  width: 0.62rem !important;
  height: 0.62rem !important;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.86),
    0 0 0 2.5px color-mix(in srgb, var(--cat-color, #8a94a3) 22%, white) !important;
}

@supports not (color: color-mix(in srgb, red, white)) {
  .category-tile-header .category-color-dot,
  table.item-table thead .category-color-dot,
  .gear-category-pill .category-color-dot,
  .category-legend-chip .category-color-dot {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.82), 0 0 0 3px rgba(138,148,163,0.22) !important;
  }
}

@media (max-width: 720px) {

}

@media (max-width: 1100px) {
  .food-summary-metrics.no-data-warning,
  .food-summary-metrics.has-data-warning {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .food-summary-metrics.no-data-warning,
  .food-summary-metrics.has-data-warning {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


}

@media (max-width: 520px) {

}


/* === Compact row rhythm and professional tooltips === */
.category-tile table.item-table {
  border-spacing: 0 0.22rem !important;
}

.category-tile table.item-table tbody tr.item-row td {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.category-tile table.item-table tbody tr.related-item-row td,
.category-tile table.item-table tbody tr.related-child-row td {
  padding-top: 0.13rem !important;
  padding-bottom: 0.13rem !important;
}

.category-tile tr.related-item-row .item-text-cell,
.category-tile tr.related-child-row .item-text-cell {
  padding-left: 1.04rem !important;
}

.category-tile tr.related-item-row .item-title-line,
.category-tile tr.related-child-row .item-title-line {
  gap: 0.24rem !important;
}

.category-tile table.item-table tbody tr.related-item-row .item-title-open::before,
.category-tile table.item-table tbody tr.related-child-row .item-title-open::before {
  margin-right: 0.24rem !important;
}

.category-tile .item-title-line .virtual-shared-badge,
.category-tile .item-title-line .related-set-badge,
.category-tile .item-title-line .shared-allocation-status-badge,
.food-type-pill,
.nutrition-status-pill.compact {
  min-height: 1.02rem !important;
  padding: 0.105rem 0.38rem 0.115rem !important;
  font-size: 0.64rem !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: 0.006em !important;
}

.packlist-tooltip {
  position: fixed;
  z-index: 2147483000;
  max-width: min(20rem, calc(100vw - 1.4rem));
  padding: 0.46rem 0.58rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 11px;
  background: rgba(20, 30, 41, 0.96);
  color: #fff;
  box-shadow: 0 14px 34px rgba(15,23,42,0.22), 0 2px 8px rgba(15,23,42,0.16);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.28;
  letter-spacing: 0.002em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 110ms ease, transform 110ms ease;
  backdrop-filter: blur(10px);
  white-space: normal;
}

.packlist-tooltip.is-weather-daypart {
  max-width: min(34rem, calc(100vw - 1.4rem));
  padding: 0.62rem 0.72rem 0.66rem;
  font-size: 0.75rem;
  line-height: 1.25;
  font-weight: 650;
}

.packlist-tooltip .tooltip-daypart-title {
  display: block;
  margin-bottom: 0.42rem;
  padding-bottom: 0.38rem;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.18;
  letter-spacing: 0.004em;
}

.packlist-tooltip .tooltip-daypart-row {
  display: grid;
  grid-template-columns: 1.62rem minmax(0, 1fr);
  gap: 0.48rem;
  align-items: start;
  padding: 0.30rem 0;
}

.packlist-tooltip .tooltip-daypart-row + .tooltip-daypart-row {
  border-top: 1px solid rgba(255,255,255,0.08);
}

.packlist-tooltip .tooltip-daypart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.62rem;
  height: 1.62rem;
  border-radius: 999px;
  margin-top: -0.02rem;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
  font-size: 0.93rem;
  line-height: 1;
}

.packlist-tooltip .tooltip-daypart-body {
  min-width: 0;
}

.packlist-tooltip .tooltip-daypart-label {
  display: block;
  margin-bottom: 0.08rem;
  color: rgba(226, 242, 240, 0.82);
  font-size: 0.66rem;
  font-weight: 880;
  letter-spacing: 0.055em;
  line-height: 1.15;
  text-transform: uppercase;
}

.packlist-tooltip .tooltip-daypart-value {
  display: block;
  color: rgba(255,255,255,0.96);
  font-weight: 720;
  line-height: 1.30;
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .packlist-tooltip.is-weather-daypart {
    max-width: calc(100vw - 1rem);
  }

  .packlist-tooltip .tooltip-daypart-row {
    grid-template-columns: 1.52rem minmax(0, 1fr);
    gap: 0.42rem;
    padding: 0.28rem 0;
  }

  .packlist-tooltip .tooltip-daypart-icon {
    width: 1.52rem;
    height: 1.52rem;
    font-size: 0.86rem;
    margin-top: 0;
  }
}

.packlist-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.packlist-tooltip.is-measuring {
  visibility: hidden;
  opacity: 0;
}

.packlist-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0.55rem;
  height: 0.55rem;
  background: rgba(20, 30, 41, 0.96);
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.packlist-tooltip[data-placement="top"]::after {
  bottom: -0.30rem;
}

.packlist-tooltip[data-placement="bottom"]::after {
  top: -0.30rem;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid rgba(255,255,255,0.10);
  border-top: 1px solid rgba(255,255,255,0.10);
}

@media (prefers-reduced-motion: reduce) {
  .packlist-tooltip {
    transition: none;
  }
}

/* === Route waterpoint planning summary === */

.route-points-editor-modal-panel {
  width: min(1120px, calc(100vw - 2rem));
  max-height: min(88vh, 960px);
  overflow: auto;
  background: #fff;
}

.route-setup-modal-nav {
  position: sticky;
  top: -1px;
  z-index: 3;
  display: flex;
  gap: 0.48rem;
  flex-wrap: wrap;
  margin: 0.1rem 0 0.85rem;
  padding: 0.5rem;
  border: 1px solid rgba(203,213,225,0.72);
  border-radius: 1rem;
  background: rgba(248,250,252,0.94);
  backdrop-filter: blur(12px);
}

.route-setup-modal-nav button {
  border: 1px solid rgba(203,213,225,0.9);
  background: #fff;
  color: var(--text-muted);
  border-radius: 999px;
  padding: 0.42rem 0.72rem;
  font-weight: 850;
  font-size: 0.78rem;
  cursor: pointer;
}

.route-setup-modal-nav button:hover,
.route-setup-modal-nav button:focus-visible {
  color: var(--accent);
  border-color: rgba(31,111,91,0.32);
  box-shadow: 0 0 0 3px rgba(31,111,91,0.08);
  outline: none;
}

.route-setup-modal-overview {
  margin-bottom: 1rem;
}

.route-setup-overview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  align-items: center;
  justify-content: flex-end;
}

.route-setup-overview-chips span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(203,213,225,0.9);
  background: rgba(255,255,255,0.82);
  border-radius: 999px;
  padding: 0.35rem 0.6rem;
  color: var(--text-muted);
  font-weight: 850;
  font-size: 0.76rem;
  white-space: nowrap;
}

.route-setup-section {
  scroll-margin-top: 5rem;
  margin-top: 1rem;
  padding-top: 0.1rem;
}

.route-setup-section + .route-setup-section {
  border-top: 1px solid rgba(226,232,240,0.82);
  padding-top: 1rem;
}

.route-setup-note {
  margin: 0.22rem 0 0.7rem;
}

.route-waterpoint-editor-modal-section .route-waterpoint-editor-table-wrap {
  margin-top: 0.55rem;
}

.route-waterpoint-editor-modal-section .route-waterpoint-editor-actions {
  border-top: 1px solid rgba(226,232,240,0.72);
  padding-top: 0.78rem;
}

.route-waterpoint-status {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  white-space: nowrap;
  border: 1px solid rgba(211,220,230,0.78);
  border-radius: 999px;
  background: rgba(248,250,252,0.86);
  padding: 0.34rem 0.62rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 840;
}

.route-waterpoint-status.good { color: var(--accent); border-color: rgba(31,111,91,0.24); background: rgba(31,111,91,0.07); }
.route-waterpoint-status.info { color: #2f5f93; border-color: rgba(47,95,147,0.22); background: rgba(47,95,147,0.07); }
.route-waterpoint-status.warning { color: #a16207; border-color: rgba(161,98,7,0.22); background: rgba(161,98,7,0.08); }
.route-waterpoint-status.danger { color: #b42318; border-color: rgba(180,35,24,0.22); background: rgba(180,35,24,0.08); }


.route-waterpoint-reliability,
.route-waterpoint-auto-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(211,220,230,0.78);
  border-radius: 999px;
  padding: 0.18rem 0.42rem;
  font-size: 0.62rem;
  font-weight: 880;
  white-space: nowrap;
  background: rgba(248,250,252,0.82);
  color: var(--text-muted);
}

.route-waterpoint-reliability.good { color: var(--accent); border-color: rgba(31,111,91,0.22); background: rgba(31,111,91,0.06); }
.route-waterpoint-reliability.info { color: #2f5f93; border-color: rgba(47,95,147,0.22); background: rgba(47,95,147,0.07); }
.route-waterpoint-reliability.warning { color: #a16207; border-color: rgba(161,98,7,0.22); background: rgba(161,98,7,0.08); }

.route-waterpoint-editor {
  margin-top: 0.82rem;
  border: 1px dashed rgba(148,163,184,0.42);
  border-radius: 16px;
  background: rgba(248,250,252,0.58);
  padding: 0.72rem;
}

.route-waterpoint-editor summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.route-waterpoint-editor-table-wrap {
  margin-top: 0.7rem;
  overflow-x: auto;
  border: 1px solid rgba(226,232,240,0.82);
  border-radius: 14px;
  background: rgba(255,255,255,0.78);
}

.route-waterpoint-editor-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
}

.route-waterpoint-editor-table th,
.route-waterpoint-editor-table td {
  padding: 0.5rem 0.62rem;
  border-bottom: 1px solid rgba(226,232,240,0.64);
  text-align: left;
  vertical-align: middle;
  font-size: 0.76rem;
}

.route-waterpoint-editor-table th {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.62rem;
  font-weight: 900;
}

.route-waterpoint-editor-table tbody tr:last-child td {
  border-bottom: 0;
}

.route-waterpoint-editor-table tr.selected-waterpoint td {
  background: rgba(31,111,91,0.035);
}

.route-waterpoint-editor-table select {
  width: 100%;
  min-width: 8rem;
  padding: 0.36rem 0.48rem;
  border-radius: 10px;
  border: 1px solid rgba(203,213,225,0.92);
  background: #fff;
  color: var(--text);
  font-weight: 700;
}

.route-waterpoint-auto-badge {
  margin-left: 0.35rem;
  color: var(--accent);
  border-color: rgba(31,111,91,0.22);
  background: rgba(31,111,91,0.06);
}

.route-waterpoint-editor-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 0.72rem;
}

.route-water-hint.good { color: var(--accent); }
.route-water-hint.info { color: #2f5f93; }
.route-water-hint.warning { color: #a16207; }
.route-water-hint.danger { color: #b42318; }
.route-water-hint b {
  font-weight: 900;
}

.route-waterpoint-note {
  margin: 0.66rem 0 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.35;
}

.dashboard-route-water-summary {
  display: grid;
  gap: 0.32rem;
  margin: 0.22rem 0 0.36rem;
  border: 1px solid rgba(226,232,240,0.78);
  border-radius: 14px;
  background: rgba(248,250,252,0.72);
  padding: 0.42rem 0.56rem 0.38rem;
}

.dashboard-route-water-heading {
  display: grid;
  grid-template-columns: minmax(6.4rem, max-content) minmax(0, 1fr);
  gap: 0.12rem 0.56rem;
  align-items: baseline;
  min-width: 0;
}

.dashboard-route-water-heading > span:first-child {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.62rem;
  font-weight: 880;
}

.dashboard-route-water-summary strong {
  color: var(--text);
  font-size: 0.80rem;
  font-weight: 890;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-route-water-summary em {
  grid-column: 2;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 690;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-route-water-summary.good strong { color: var(--accent); }
.dashboard-route-water-summary.info strong { color: #2f5f93; }
.dashboard-route-water-summary.warning strong { color: #a16207; }
.dashboard-route-water-summary.danger strong { color: #b42318; }

.route-waterpoint-timeline {
  grid-column: 1 / -1;
  margin-top: 0.16rem;
  width: 100%;
}

.route-waterpoint-timeline-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.08rem;
  scrollbar-width: thin;
}

.route-waterpoint-timeline-compact .route-waterpoint-timeline-scroll {
  overflow: visible;
  padding-bottom: 0;
}

.route-waterpoint-timeline-inner {
  min-width: var(--waterpoint-timeline-min-width, 320px);
  padding: 0.1rem 0.2rem 0.22rem;
}

.route-waterpoint-timeline-compact .route-waterpoint-timeline-inner {
  min-width: 0;
  padding: 0.02rem 0.1rem 0;
}

.route-waterpoint-track {
  position: relative;
  height: 1.45rem;
  margin: 0.08rem 0 0.02rem;
}

.route-waterpoint-track-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0.68rem;
  height: 0.22rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(148,163,184,0.34), rgba(148,163,184,0.18));
}

.route-waterpoint-longest-line {
  position: absolute;
  top: 0.68rem;
  height: 0.22rem;
  border-radius: 999px;
  background: rgba(161,98,7,0.34);
  z-index: 1;
}

.route-waterpoint-dot {
  position: absolute;
  top: 0.79rem;
  width: 0.54rem;
  height: 0.54rem;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 2px solid rgba(100,116,139,0.72);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
  z-index: 2;
}

.route-waterpoint-dot.kind-start,
.route-waterpoint-dot.kind-finish {
  width: 0.62rem;
  height: 0.62rem;
  border-color: rgba(51,65,85,0.85);
  background: #f8fafc;
}

.route-waterpoint-dot.kind-water {
  border-color: rgba(47,95,147,0.9);
  background: rgba(47,95,147,0.14);
}

.route-waterpoint-dot.kind-water.reliability-warning {
  border-color: #a16207;
  background: rgba(161,98,7,0.14);
}

.route-waterpoint-dot.kind-water.reliability-info {
  border-color: #2f5f93;
  background: rgba(47,95,147,0.14);
}

.route-waterpoint-segment-labels {
  position: relative;
  min-height: 1.2rem;
}

.route-waterpoint-timeline-compact .route-waterpoint-track {
  height: 1.12rem;
  margin: 0.02rem 0 0;
}

.route-waterpoint-timeline-compact .route-waterpoint-segment-labels {
  min-height: 0.92rem;
}

.route-waterpoint-segment-distance {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0.08rem 0.25rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 760;
  line-height: 1;
}

.route-waterpoint-segment-distance.longest {
  background: rgba(161,98,7,0.09);
  color: #a16207;
  font-weight: 900;
}

.route-waterpoint-timeline-compact .route-waterpoint-segment-distance {
  top: -0.02rem;
  padding: 0.08rem 0.34rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.82);
}

.route-waterpoint-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem 0.55rem;
  color: var(--text-muted);
  font-size: 0.61rem;
  font-weight: 740;
  line-height: 1.2;
  margin-top: 0.1rem;
}

.route-waterpoint-timeline-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
}

.route-waterpoint-timeline-legend .legend-dot {
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  border: 1.5px solid rgba(100,116,139,0.7);
  background: #fff;
}

.route-waterpoint-timeline-legend .legend-dot.water {
  border-color: rgba(47,95,147,0.9);
  background: rgba(47,95,147,0.14);
}

.route-waterpoint-timeline-legend .legend-dot.start,
.route-waterpoint-timeline-legend .legend-dot.finish {
  border-color: rgba(51,65,85,0.85);
  background: #f8fafc;
}

.food-decision-meta .route-water-hint {
  color: var(--text-muted);
}

@media (max-width: 760px) {
  
  
  .dashboard-route-water-heading {
    grid-template-columns: 1fr;
  }
  .dashboard-route-water-summary em {
    grid-column: 1;
  }
}

/* === Dashboard food readiness and body-weight load balance === */
.dashboard-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}

.dashboard-pack-card .visual-double-row {
  display: grid;
}

.dashboard-pack-card .visual-bar-row {
  grid-template-columns: minmax(9.2rem, 9.2rem) minmax(12rem, 1fr) minmax(9.6rem, 9.6rem);
}

.dashboard-pack-card .visual-bar-row strong,
.dashboard-pack-card .dashboard-metric-value {
  justify-self: stretch;
  width: 100%;
}

.dashboard-pack-card .dashboard-metric-value {
  justify-content: flex-end;
}

.dashboard-pack-card .dashboard-metric-badge {
  min-width: 3.2rem;
}

.dashboard-pack-card .visual-bar-track {
  width: 100%;
}

.dashboard-person-heavy-row,
.dashboard-person-water-row {
  display: grid;
  grid-template-columns: minmax(9.2rem, 9.2rem) minmax(12rem, 1fr) minmax(9.6rem, 9.6rem);
  gap: 0.72rem;
  align-items: center;
  padding: 0.18rem 0.2rem 0.06rem;
}

.dashboard-person-water-row {
  margin: 0;
}

.dashboard-water-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.38rem;
  min-width: 0;
}

.dashboard-water-main label {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.70rem;
  font-weight: 760;
}

.dashboard-water-main input {
  width: 4.4rem;
  min-height: 1.55rem;
  border: 1px solid rgba(217,224,231,0.92);
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  padding: 0.14rem 0.48rem;
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 790;
  text-align: right;
}

.dashboard-water-main input:focus {
  outline: 2px solid rgba(31,111,91,0.20);
  border-color: rgba(31,111,91,0.42);
}

.dashboard-water-main em,

.dashboard-person-heavy-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 780;
  text-align: right;
}

.dashboard-person-heavy-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
}

.dashboard-person-heavy-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  min-width: 0;
  max-width: min(100%, 14.5rem);
  border: 1px solid rgba(217,224,231,0.78);
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  padding: 0.14rem 0.36rem;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}

.dashboard-person-heavy-pill strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.69rem;
  font-weight: 800;
}

.dashboard-person-heavy-pill em,
.dashboard-person-heavy-pill i {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 820;
  color: var(--text-muted);
}

.dashboard-person-heavy-pill i {
  border-radius: 999px;
  background: rgba(31,111,91,0.08);
  color: var(--accent);
  padding: 0.03rem 0.22rem;
}

.dashboard-person-heavy-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.24rem;
  min-width: 0;
}

.dashboard-person-heavy-summary em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 720;
  color: var(--text-muted);
}

.dashboard-person-heavy-empty {
  font-style: normal;
  color: var(--text-muted);
  font-size: 0.70rem;
  font-weight: 720;
}

.water-container-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  border-radius: 999px;
  background: rgba(79,125,168,0.10);
  color: #315f82;
  border: 1px solid rgba(79,125,168,0.22);
  padding: 0.08rem 0.36rem;
  font-size: 0.64rem;
  font-weight: 820;
  white-space: nowrap;
}

.dashboard-category-segment {
  cursor: pointer;
  outline: none;
}

.dashboard-category-segment:hover,
.dashboard-category-segment:focus-visible {
  filter: saturate(1.22) brightness(1.04);
  box-shadow: inset 0 0 0 999px rgba(255,255,255,0.10), 0 0 0 2px rgba(31,111,91,0.24);
}

.dashboard-food-list {
  display: grid;
  gap: 0.34rem;
}

.dashboard-readiness-section {
  display: grid;
  gap: 0.32rem;
}

.dashboard-readiness-section + .dashboard-readiness-section {
  margin-top: 0.56rem;
  padding-top: 0.56rem;
  border-top: 1px solid rgba(217,224,231,0.68);
}

.dashboard-readiness-subtitle {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.dashboard-water-readiness-list {
  display: grid;
  gap: 0.34rem;
}

.dashboard-food-card .dashboard-person-water-row {
  grid-template-columns: minmax(4.4rem, 0.62fr) minmax(9rem, 1fr) minmax(7.8rem, auto);
  gap: 0.16rem 0.52rem;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  background: rgba(255,255,255,0.72);
  padding: 0.42rem 0.52rem;
}

.dashboard-food-card .dashboard-person-water-row .dashboard-person-heavy-label {
  text-align: left;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 830;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-food-card .dashboard-person-water-row .dashboard-water-main {
  justify-content: flex-start;
}

.dashboard-food-card .dashboard-person-water-row .dashboard-water-main-compact {
  gap: 0.28rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 760;
  white-space: nowrap;
}

.dashboard-food-card .dashboard-person-water-row .dashboard-water-main-compact strong {
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 860;
}

.dashboard-food-card .dashboard-person-water-row .dashboard-water-readiness-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.28rem;
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.70rem;
  font-weight: 760;
}

.dashboard-food-card .dashboard-person-water-row .dashboard-water-readiness-meta em {
  flex-basis: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  text-align: right;
}

.dashboard-food-row {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  background: rgba(255,255,255,0.72);
  padding: 0.42rem 0.52rem;
  display: grid;
  grid-template-columns: minmax(4.4rem, 0.62fr) minmax(7rem, 1.05fr);
  gap: 0.14rem 0.52rem;
  text-align: left;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  align-items: center;
}

.dashboard-food-row:hover,
.dashboard-food-row:focus-visible {
  border-color: rgba(31,111,91,0.28);
  box-shadow: 0 6px 16px rgba(15,23,42,0.08);
  outline: none;
}

.dashboard-food-person {
  font-size: 0.84rem;
  font-weight: 820;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-food-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.34rem;
  min-width: 0;
}

.dashboard-food-main strong {
  font-size: 0.88rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dashboard-food-main em {
  font-style: normal;
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 760;
  white-space: nowrap;
}

.dashboard-food-meta {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-food-row.food-status-good .dashboard-food-main em,
.dashboard-food-row.food-status-good .dashboard-food-person {
  color: #1f6f5b;
}

.dashboard-food-row.food-status-low .dashboard-food-main em,
.dashboard-food-row.food-status-very-low .dashboard-food-main em {
  color: #9a5d00;
}

.dashboard-food-row.food-status-high .dashboard-food-main em,
.dashboard-food-row.food-status-very-high .dashboard-food-main em {
  color: #9a4d1e;
}

.dashboard-empty-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 650;
}

.visual-fill-body,
.legend-body {
  background: linear-gradient(90deg, rgba(128,100,169,0.70), rgba(128,100,169,0.96));
}

.dashboard-body-row {
  grid-template-columns: minmax(5.5rem, 0.9fr) minmax(8rem, 2fr) minmax(4.8rem, auto);
  cursor: default !important;
}

.dashboard-body-row:hover .visual-bar-track {
  box-shadow: none !important;
}

.dashboard-body-row strong {
  min-width: 4.4rem;
}

.dashboard-body-row .muted-body-value {
  color: var(--text-muted);
}

.dashboard-body-edit:hover,

.dashboard-range-under {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) auto;
  gap: 0.46rem;
  align-items: center;
  margin-top: -0.10rem;
  min-width: 0;
}

.dashboard-range-bar {
  --marker: 0%;
  position: relative;
  display: flex;
  height: 0.36rem;
  min-width: 0;
  overflow: visible;
  border-radius: 999px;
  background: rgba(226,232,240,0.72);
  box-shadow: inset 0 0 0 1px rgba(148,163,184,0.16);
}

.dashboard-range-bar .range-segment {
  display: block;
  min-width: 0;
  opacity: 0.78;
}

.dashboard-range-bar .range-segment:first-child {
  border-radius: 999px 0 0 999px;
}

.dashboard-range-bar .range-segment:nth-last-child(2) {
  border-radius: 0 999px 999px 0;
}

.dashboard-range-bar .range-marker {
  position: absolute;
  left: var(--marker);
  top: 50%;
  width: 0.54rem;
  height: 0.54rem;
  z-index: 2;
  border: 2px solid rgba(255,255,255,0.96);
  border-radius: 999px;
  background: var(--text);
  box-shadow: 0 1px 5px rgba(15,23,42,0.24);
  transform: translate(-50%, -50%);
}

.dashboard-range-caption {
  color: var(--text-light);
  font-size: 0.58rem;
  font-weight: 790;
  line-height: 1.05;
  text-align: right;
  white-space: nowrap;
}

.dashboard-range-block {
  display: grid;
  gap: 0.24rem;
  margin: -0.10rem 0 0.50rem;
}

.dashboard-range-block .dashboard-range-caption {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: left;
}

.dashboard-range-bar.pack-load-range .light { flex: 15; background: rgba(31,111,91,0.68); }
.dashboard-range-bar.pack-load-range .moderate { flex: 5; background: rgba(79,125,168,0.66); }
.dashboard-range-bar.pack-load-range .high { flex: 5; background: rgba(194,135,47,0.72); }
.dashboard-range-bar.pack-load-range .very-high { flex: 5; background: rgba(177,83,69,0.68); }

.dashboard-range-bar.base-weight-range .ul { flex: 5; background: rgba(31,111,91,0.68); }
.dashboard-range-bar.base-weight-range .light { flex: 3; background: rgba(82,137,118,0.62); }
.dashboard-range-bar.base-weight-range .standard { flex: 4; background: rgba(79,125,168,0.66); }
.dashboard-range-bar.base-weight-range .heavy { flex: 3; background: rgba(194,135,47,0.72); }
.dashboard-range-bar.base-weight-range .very-heavy { flex: 5; background: rgba(177,83,69,0.68); }

.dashboard-range-bar.balance-range .balanced { flex: 2; background: rgba(31,111,91,0.68); }
.dashboard-range-bar.balance-range .slight { flex: 3; background: rgba(79,125,168,0.66); }
.dashboard-range-bar.balance-range .uneven { flex: 3; background: rgba(194,135,47,0.72); }
.dashboard-range-bar.balance-range .strong { flex: 4; background: rgba(177,83,69,0.68); }

.dashboard-range-bar.shared-fairness-range .even { flex: 250; background: rgba(31,111,91,0.68); }
.dashboard-range-bar.shared-fairness-range .slight { flex: 500; background: rgba(79,125,168,0.66); }
.dashboard-range-bar.shared-fairness-range .uneven { flex: 750; background: rgba(194,135,47,0.72); }
.dashboard-range-bar.shared-fairness-range .strong { flex: 1500; background: rgba(177,83,69,0.68); }

.dashboard-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.42rem;
}

.dashboard-card-title-row h4 {
  margin-bottom: 0 !important;
}

.dashboard-modal-link:hover,


.dashboard-noninteractive {
  cursor: default !important;
}

.dashboard-noninteractive:hover,
.dashboard-noninteractive:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}


.dashboard-attention-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.dashboard-attention-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  min-height: 1.7rem;
  padding: 0.32rem 0.58rem;
  border-radius: 999px;
  border: 1px solid rgba(127, 139, 153, 0.22);
  background: rgba(255,255,255,0.72);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 820;
  line-height: 1.1;
  white-space: nowrap;
}

button.dashboard-attention-badge {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
}

button.dashboard-attention-badge:hover,
button.dashboard-attention-badge:focus-visible,
.attention-nav-item:hover,
.attention-nav-item:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(40,55,75,0.10);
  outline: none;
}

button.dashboard-attention-badge:focus-visible,
.attention-nav-item:focus-visible {
  box-shadow: 0 0 0 3px rgba(31,111,91,0.16), 0 5px 14px rgba(40,55,75,0.10);
}

.dashboard-attention-badge::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.78;
}

.dashboard-attention-badge.danger {
  color: #a33a28;
  background: rgba(255,245,242,0.86);
  border-color: rgba(188,76,50,0.24);
}

.dashboard-attention-badge.warning {
  color: #9a5d00;
  background: rgba(255,248,226,0.88);
  border-color: rgba(210,151,38,0.28);
}

.dashboard-attention-badge.info {
  color: #38627a;
  background: rgba(238,247,252,0.88);
  border-color: rgba(91,139,164,0.24);
}

.dashboard-attention-badge.neutral {
  color: var(--text-muted);
  background: rgba(247,249,251,0.88);
}

.dashboard-attention-ok {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.dashboard-metric-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.28rem;
  min-width: 0;
}

.dashboard-metric-value > span:first-child {
  white-space: nowrap;
}

.dashboard-metric-badge,


.dashboard-metric-badge.good {
  color: #1f6f5b;
  background: rgba(232,247,240,0.86);
  border-color: rgba(54,135,105,0.22);
}

.dashboard-metric-badge.info,


.dashboard-metric-badge.warning {
  color: #9a5d00;
  background: rgba(255,248,226,0.88);
  border-color: rgba(210,151,38,0.28);
}

.dashboard-metric-badge.danger {
  color: #a33a28;
  background: rgba(255,245,242,0.86);
  border-color: rgba(188,76,50,0.24);
}

.dashboard-metric-badge.neutral,


.dashboard-card-summary {
  margin: -0.14rem 0 0.46rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 730;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.34rem;
}

@media (max-width: 1250px) {
  .dashboard-pack-card {
    grid-column: span 12 !important;
  }

  .dashboard-food-card,
  .dashboard-attention-card {
    grid-column: span 6 !important;
  }

  .dashboard-balance-card,
  .dashboard-shared-card,
  .dashboard-split-card {
    grid-column: span 6 !important;
  }
}


@media (max-width: 760px) {
  .dashboard-pack-card .visual-bar-row,
  .dashboard-person-heavy-row,
  .dashboard-person-water-row {
    grid-template-columns: minmax(7.2rem, 7.2rem) minmax(7rem, 1fr) minmax(7.5rem, 7.5rem);
    gap: 0.48rem;
  }

  .dashboard-food-card .dashboard-person-water-row {
    grid-template-columns: minmax(4.4rem, 0.7fr) minmax(7rem, 1.05fr);
  }

  .dashboard-pack-card .dashboard-metric-badge {
    display: none;
  }
}

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  .dashboard-grid > .visual-card,
  .dashboard-pack-card,
  .dashboard-food-card,
  .dashboard-attention-card,
  .dashboard-balance-card,
  .dashboard-shared-card,
  .dashboard-split-card {
    grid-column: 1 / -1 !important;
  }

  
}

.people-modal-person-form {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(5.8rem, 7.4rem);
  gap: 0.42rem;
  align-items: center;
}

.people-modal-name-form input[type="number"] {
  width: 100%;
  padding: 0.42rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  box-sizing: border-box;
}

.people-modal-name-form input[type="number"]:focus {
  outline: none;
  border-color: rgba(31,111,91,0.45);
  box-shadow: 0 0 0 3px rgba(31,111,91,0.11);
}

.dashboard-focus-pulse {
  animation: dashboardFocusPulse 1.4s ease;
}

@keyframes dashboardFocusPulse {
  0% { box-shadow: 0 0 0 0 rgba(31,111,91,0.26), var(--shadow-sm); }
  45% { box-shadow: 0 0 0 5px rgba(31,111,91,0.14), var(--shadow-sm); }
  100% { box-shadow: 0 0 0 0 rgba(31,111,91,0), var(--shadow-sm); }
}

@media (max-width: 1150px) {
  .dashboard-pack-card {
    grid-column: span 1 !important;
  }
}

/* === Compact trip dashboard organization === */
.dashboard-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 0.58rem !important;
}

.dashboard-pack-card {
  grid-column: span 7 !important;
  order: 1 !important;
}

.dashboard-food-card {
  grid-column: span 5 !important;
  order: 2 !important;
}

.dashboard-balance-card,
.dashboard-shared-card,
.dashboard-split-card {
  grid-column: span 4 !important;
}

.dashboard-balance-card { order: 3 !important; }
.dashboard-shared-card { order: 4 !important; }
.dashboard-split-card { order: 5 !important; }

.dashboard-heaviest-card {
  grid-column: span 8 !important;
  order: 6 !important;
}

.dashboard-attention-card {
  grid-column: span 4 !important;
  order: 7 !important;
}

.dashboard-pack-card .visual-bars-double {
  gap: 0.48rem !important;
}

.dashboard-pack-card .visual-double-row {
  gap: 0.22rem !important;
  padding-bottom: 0.18rem;
}

.dashboard-pack-card .visual-double-row + .visual-double-row {
  border-top: 1px solid rgba(217,224,231,0.56);
  padding-top: 0.42rem;
}

.dashboard-pack-card .visual-bar-row {
  grid-template-columns: minmax(7.5rem, 8.8rem) minmax(0, 1fr) minmax(7.1rem, 8.2rem) !important;
  gap: 0.54rem !important;
  align-items: center !important;
}

.dashboard-pack-card .visual-name {
  font-size: 0.84rem !important;
}

.dashboard-pack-card .dashboard-range-under {
  display: contents !important;
}

.dashboard-pack-card .dashboard-range-under .dashboard-range-bar {
  grid-column: 2 !important;
  width: 100% !important;
  align-self: center !important;
}

.dashboard-pack-card .dashboard-range-under .dashboard-range-caption {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: center !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dashboard-heaviest-person-list {
  display: grid;
  gap: 0.34rem;
}

.dashboard-heaviest-person-row {
  display: grid;
  grid-template-columns: minmax(5.2rem, 6.4rem) minmax(0, 1fr) minmax(5.8rem, auto);
  gap: 0.52rem;
  align-items: center;
  min-width: 0;
  padding: 0.26rem 0.34rem;
  border: 1px solid rgba(217,224,231,0.62);
  border-radius: 12px;
  background: rgba(255,255,255,0.58);
}

.dashboard-heaviest-person-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 820;
}

.dashboard-heaviest-card .dashboard-person-heavy-items {
  gap: 0.22rem;
}

.dashboard-heaviest-card .dashboard-person-heavy-pill {
  max-width: min(100%, 17rem);
  padding-top: 0.12rem;
  padding-bottom: 0.12rem;
}

.dashboard-heaviest-card .dashboard-person-heavy-summary {
  justify-content: flex-end;
}

.dashboard-attention-card .dashboard-attention-grid {
  gap: 0.32rem !important;
}

.dashboard-attention-card .dashboard-attention-badge {
  min-height: 1.48rem;
  padding: 0.24rem 0.46rem;
  font-size: 0.72rem;
}

.dashboard-attention-card .dashboard-attention-badge::before {
  width: 0.42rem;
  height: 0.42rem;
}

@media (max-width: 1280px) {
  .dashboard-pack-card,
  .dashboard-food-card {
    grid-column: span 12 !important;
  }

  .dashboard-balance-card,
  .dashboard-shared-card,
  .dashboard-split-card,
  .dashboard-heaviest-card,
  .dashboard-attention-card {
    grid-column: span 6 !important;
  }
}

@media (max-width: 980px) {
  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  .dashboard-grid > .visual-card,
  .dashboard-pack-card,
  .dashboard-food-card,
  .dashboard-balance-card,
  .dashboard-shared-card,
  .dashboard-split-card,
  .dashboard-heaviest-card,
  .dashboard-attention-card {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 720px) {
  .visual-summary-panel {
    padding: 0.52rem !important;
  }

  .dashboard-pack-card .visual-bar-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.22rem 0.45rem !important;
  }

  .dashboard-pack-card .visual-bar-row .visual-name {
    grid-column: 1 !important;
  }

  .dashboard-pack-card .visual-bar-row .dashboard-metric-value {
    grid-column: 2 !important;
    justify-self: end !important;
  }

  .dashboard-pack-card .visual-bar-row .visual-bar-track {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .dashboard-pack-card .dashboard-range-under .dashboard-range-bar {
    grid-column: 1 / -1 !important;
  }

  .dashboard-pack-card .dashboard-range-under .dashboard-range-caption {
    grid-column: 1 / -1 !important;
    justify-self: end !important;
  }

  .dashboard-heaviest-person-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.24rem;
  }

  .dashboard-heaviest-person-row .dashboard-person-heavy-summary {
    justify-content: flex-start;
  }

  .dashboard-food-row,
  .dashboard-food-card .dashboard-person-water-row,
  .visual-bar-row,
  .visual-split-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .dashboard-food-meta,
  .dashboard-food-card .dashboard-person-water-row .dashboard-water-readiness-meta {
    grid-column: 1 / -1 !important;
  }
}


/* === Shared ghost/reference rows: single authoritative layout ===
   Root cause of the visual drift: several later patches gave virtual shared
   rows their own heights, min-heights, flex rules and badge sizing, while
   related rows also had separate compact rules. This block deliberately stops
   treating ghost rows as a separate row type. A ghost/reference row now uses
   the same rhythm as the row it mirrors:
   - non-related ghost rows follow normal item rows;
   - ghost rows inside a shared related set follow normal related rows;
   - only color/muting and the carried-by pill remain special. */

.virtual-shared-note-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  max-width: 9.5rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  padding: 0.105rem 0.38rem 0.115rem !important;
  background: rgba(148,163,184,0.10) !important;
  border: 1px solid rgba(148,163,184,0.16) !important;
  color: var(--text-light) !important;
  font-size: 0.64rem !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  letter-spacing: 0.006em !important;
}

.category-tile table.item-table tbody tr.virtual-shared-row,
.category-tile table.item-table tbody tr.virtual-shared-zero-row {
  height: auto !important;
  min-height: 0 !important;
}

/* Normal ghost rows: same row rhythm as ordinary item rows. */
.category-tile table.item-table tbody tr.virtual-shared-row:not(.related-child-row):not(.related-item-row) td,
.category-tile table.item-table tbody tr.virtual-shared-zero-row:not(.related-child-row):not(.related-item-row) td {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  vertical-align: middle !important;
}

/* Mirrored related children: exactly the compact rhythm of normal related rows. */
.category-tile table.item-table tbody tr.virtual-shared-row.virtual-shared-related-visible.related-child-row td,
.category-tile table.item-table tbody tr.virtual-shared-zero-row.virtual-shared-related-visible.related-child-row td,
.category-tile table.item-table tbody tr.virtual-shared-row.virtual-shared-related-visible.related-item-row td,
.category-tile table.item-table tbody tr.virtual-shared-zero-row.virtual-shared-related-visible.related-item-row td {
  vertical-align: middle !important;
}

.category-tile table.item-table tbody tr.virtual-shared-row .item-title-line,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .item-title-line {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.34rem !important;
  min-height: 0 !important;
  flex-wrap: nowrap !important;
  line-height: 1.12 !important;
}

.category-tile table.item-table tbody tr.virtual-shared-row.related-child-row .item-title-line,
.category-tile table.item-table tbody tr.virtual-shared-zero-row.related-child-row .item-title-line,
.category-tile table.item-table tbody tr.virtual-shared-row.related-item-row .item-title-line,
.category-tile table.item-table tbody tr.virtual-shared-zero-row.related-item-row .item-title-line {
  gap: 0.24rem !important;
}

.category-tile table.item-table tbody tr.virtual-shared-row .item-title-open,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .item-title-open,
.category-tile table.item-table tbody tr.virtual-shared-row .virtual-shared-title,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .virtual-shared-title {
  display: inline !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Normal ghost rows use normal item typography. */
.category-tile table.item-table tbody tr.virtual-shared-row:not(.related-child-row):not(.related-item-row) .item-title-description,
.category-tile table.item-table tbody tr.virtual-shared-zero-row:not(.related-child-row):not(.related-item-row) .item-title-description,
.category-tile table.item-table tbody tr.virtual-shared-row:not(.related-child-row):not(.related-item-row) .item-title-name,
.category-tile table.item-table tbody tr.virtual-shared-zero-row:not(.related-child-row):not(.related-item-row) .item-title-name {
  font-size: 0.90rem !important;
  line-height: 1.12 !important;
}

.category-tile table.item-table tbody tr.virtual-shared-row:not(.related-child-row):not(.related-item-row) .item-title-brand,
.category-tile table.item-table tbody tr.virtual-shared-zero-row:not(.related-child-row):not(.related-item-row) .item-title-brand {
  margin-left: 0.18rem !important;
  font-size: 0.78rem !important;
  line-height: 1.12 !important;
  opacity: 1 !important;
}

/* Related ghost rows use normal related-row typography. */
.category-tile table.item-table tbody tr.virtual-shared-row.virtual-shared-related-visible.related-child-row .item-title-description,
.category-tile table.item-table tbody tr.virtual-shared-zero-row.virtual-shared-related-visible.related-child-row .item-title-description,
.category-tile table.item-table tbody tr.virtual-shared-row.virtual-shared-related-visible.related-item-row .item-title-description,
.category-tile table.item-table tbody tr.virtual-shared-zero-row.virtual-shared-related-visible.related-item-row .item-title-description,
.category-tile table.item-table tbody tr.virtual-shared-row.virtual-shared-related-visible.related-child-row .item-title-name,
.category-tile table.item-table tbody tr.virtual-shared-zero-row.virtual-shared-related-visible.related-child-row .item-title-name,
.category-tile table.item-table tbody tr.virtual-shared-row.virtual-shared-related-visible.related-item-row .item-title-name,
.category-tile table.item-table tbody tr.virtual-shared-zero-row.virtual-shared-related-visible.related-item-row .item-title-name {
  font-size: 0.84rem !important;
  line-height: 1.12 !important;
  font-weight: 760 !important;
}

.category-tile table.item-table tbody tr.virtual-shared-row.virtual-shared-related-visible.related-child-row .item-title-brand,
.category-tile table.item-table tbody tr.virtual-shared-zero-row.virtual-shared-related-visible.related-child-row .item-title-brand,
.category-tile table.item-table tbody tr.virtual-shared-row.virtual-shared-related-visible.related-item-row .item-title-brand,
.category-tile table.item-table tbody tr.virtual-shared-zero-row.virtual-shared-related-visible.related-item-row .item-title-brand {
  margin-left: 0.18rem !important;
  font-size: 0.74rem !important;
  line-height: 1.12 !important;
  font-weight: 720 !important;
  opacity: 1 !important;
}

/* Zero-share/reference rows remain muted, but not smaller. */
.category-tile table.item-table tbody tr.virtual-shared-zero-row .item-title-open,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .item-title-description,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .item-title-name,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .item-title-brand {
  color: var(--text-light) !important;
}

.category-tile table.item-table tbody tr.virtual-shared-row .shared-allocation-weight,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .shared-allocation-weight {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.category-tile table.item-table tbody tr.virtual-shared-zero-row .zero-allocation-weight {
  min-width: 0 !important;
  color: var(--text-light) !important;
  font-weight: 800 !important;
}

.category-tile table.item-table tbody tr.virtual-shared-row .virtual-shared-meta,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .virtual-shared-meta {
  display: none !important;
}

/* Make mirrored shared related children show the same Shared cue as the original side. */
.category-tile table.item-table tbody tr.virtual-shared-zero-row.virtual-shared-related-visible .virtual-shared-reference-badge {
  color: var(--accent) !important;
  background: rgba(31,111,91,0.08) !important;
  border-color: rgba(31,111,91,0.13) !important;
}


/* === Shared ghost rows: height comes from controls, not text ===
   The remaining mismatch was not only competing color/padding rules. Normal item
   rows contain quantity inputs and a weight button, both with a 1.9rem control
   height. Zero-share ghost rows had empty quantity cells and a plain 0 g span,
   so the browser made those rows shorter even when padding matched. These final
   rules give ghost rows invisible control-height placeholders while keeping the
   visual output clean. */
.category-tile table.item-table tbody tr.virtual-shared-row .virtual-status-cell,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .virtual-status-cell {
  font-size: 0.94rem !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  vertical-align: middle !important;
}

.category-tile table.item-table tbody tr.virtual-shared-row .virtual-status-cell::before,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .virtual-status-cell::before {
  content: "0";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.72rem;
  min-height: 1.9rem;
  line-height: 1;
  visibility: hidden;
  pointer-events: none;
}

.category-tile table.item-table tbody tr.virtual-shared-row .virtual-status-cell:not(.zero-share-status-cell)::before,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .virtual-status-cell:not(.zero-share-status-cell)::before {
  content: none;
  display: none;
}

.category-tile table.item-table tbody tr.virtual-shared-row .shared-allocation-weight,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .shared-allocation-weight,
.category-tile table.item-table tbody tr.virtual-shared-row .zero-allocation-weight,
.category-tile table.item-table tbody tr.virtual-shared-zero-row .zero-allocation-weight {
  min-height: 1.9rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.category-tile table.item-table tbody tr.virtual-shared-zero-row .zero-allocation-weight {
  visibility: visible !important;
}

/* Keep ghost rows visually muted/readonly, but let the row height mirror the
   original row because the hidden status placeholders and weight cell now have
   the same control height as normal quantity/weight controls. */
.category-tile table.item-table tbody tr.virtual-shared-row.virtual-shared-related-visible.related-child-row td,
.category-tile table.item-table tbody tr.virtual-shared-zero-row.virtual-shared-related-visible.related-child-row td,
.category-tile table.item-table tbody tr.virtual-shared-row.virtual-shared-related-visible.related-item-row td,
.category-tile table.item-table tbody tr.virtual-shared-zero-row.virtual-shared-related-visible.related-item-row td {
  padding-top: 0.13rem !important;
  padding-bottom: 0.13rem !important;
}

/* Trip-condition-aware dashboard interpretation */
.trip-condition-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  align-self: center;
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.22rem 0.52rem;
  border: 1px solid rgba(217,224,231,0.95);
  background: rgba(255,255,255,0.82);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 840;
  box-shadow: 0 6px 16px rgba(15,23,42,0.05);
}

.trip-condition-chip.good {
  border-color: rgba(31,111,91,0.22);
  background: rgba(31,111,91,0.08);
  color: #1f6f5b;
}

.trip-condition-chip.info {
  border-color: rgba(79,125,168,0.24);
  background: rgba(79,125,168,0.09);
  color: #315e83;
}

.trip-condition-chip.warning {
  border-color: rgba(194,135,47,0.28);
  background: rgba(194,135,47,0.11);
  color: #8a611f;
}

.trip-condition-chip.danger {
  border-color: rgba(177,83,69,0.30);
  background: rgba(177,83,69,0.11);
  color: #8f3e32;
}

.dashboard-range-bar.base-weight-range .expedition-heavy {
  background: rgba(136,65,59,0.72);
}

.dashboard-range-caption-zones {
  display: flex;
  justify-content: space-between;
  gap: 0.2rem;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 760;
}

#trip-modal .trip-field select,
.trip-field select {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.46rem 0.58rem;
  background: rgba(255,255,255,0.9);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
}

@media (max-width: 760px) {
  .visual-summary-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .trip-condition-chip {
    align-self: flex-start;
  }
}

/* === Trip profile auto-suggestion + compact trip manager cleanup === */
.trip-condition-chip-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  justify-content: flex-end;
  align-items: center;
}

.trip-condition-suggestion-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.34rem;
  padding: 0.13rem 0.44rem;
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 999px;
  background: rgba(255,255,255,0.74);
  color: var(--text-muted);
  font-size: 0.64rem;
  font-weight: 820;
  line-height: 1.05;
  white-space: nowrap;
}

.trip-condition-suggestion-chip.good {
  border-color: rgba(31,111,91,0.20);
  background: rgba(31,111,91,0.07);
  color: #1f6f5b;
}

.trip-condition-suggestion-chip.info {
  border-color: rgba(79,125,168,0.22);
  background: rgba(79,125,168,0.08);
  color: #315e83;
}

.trip-condition-suggestion-chip.warning {
  border-color: rgba(194,135,47,0.28);
  background: rgba(194,135,47,0.10);
  color: #8a611f;
}

.trip-condition-suggestion-chip.danger {
  border-color: rgba(177,83,69,0.28);
  background: rgba(177,83,69,0.10);
  color: #8f3e32;
}

.dashboard-pack-card .dashboard-range-under .dashboard-range-caption-zones {
  grid-column: 2 !important;
  justify-self: stretch !important;
  align-self: start !important;
  max-width: none !important;
  width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  margin-top: -0.08rem;
  padding: 0 0.02rem;
}

.dashboard-range-caption-zones span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  white-space: nowrap;
}

.dashboard-range-caption-zones span:first-child { text-align: left; }
.dashboard-range-caption-zones span:last-child { text-align: right; }

#trip-modal .trip-manager-panel {
  width: min(1080px, 96vw) !important;
  padding: 0.95rem !important;
}

#trip-modal .trip-manager-list {
  gap: 0.62rem !important;
}

#trip-modal .trip-manager-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "details actions"
    "media media" !important;
  gap: 0.54rem 0.70rem !important;
  align-items: start !important;
  padding: 0.70rem !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(248,250,252,0.94), rgba(255,255,255,0.92)) !important;
}

#trip-modal .trip-manager-row.selected-row {
  background: linear-gradient(180deg, rgba(239,250,246,0.96), rgba(255,255,255,0.94)) !important;
}

#trip-modal .trip-manager-row > .trip-details-form {
  grid-area: details !important;
}

#trip-modal .trip-manager-row > .trip-modal-actions {
  grid-area: actions !important;
  align-self: start !important;
  justify-content: flex-end !important;
  white-space: nowrap !important;
}

#trip-modal .trip-manager-row > .trip-media-panel {
  grid-area: media !important;
  display: grid !important;
  grid-template-columns: minmax(9rem, auto) minmax(0, 1fr) !important;
  gap: 0.48rem 0.65rem !important;
  align-items: center !important;
  padding: 0.52rem 0.60rem !important;
  margin: 0 !important;
}

#trip-modal .trip-media-header {
  margin: 0 !important;
  display: grid !important;
  gap: 0.08rem !important;
  align-content: center !important;
}

#trip-modal .trip-media-header > span:first-child {
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 850;
}

#trip-modal .trip-media-status {
  font-size: 0.66rem !important;
}

#trip-modal .trip-media-actions {
  justify-content: flex-end !important;
}

#trip-modal .trip-details-grid {
  grid-template-columns: minmax(13rem, 1.45fr) minmax(7.7rem, 0.80fr) minmax(7.7rem, 0.80fr) minmax(10.5rem, 1.05fr) !important;
  gap: 0.40rem 0.48rem !important;
  align-items: end !important;
}

#trip-modal .trip-field-name,
#trip-modal .trip-field-profile,
#trip-modal .trip-field-location,
#trip-modal .trip-details-save {
  grid-column: auto !important;
}

#trip-modal .trip-field span {
  font-size: 0.60rem !important;
  letter-spacing: 0.08em !important;
}

#trip-modal .trip-field input[type="text"],
#trip-modal .trip-field input[type="date"],
#trip-modal .trip-field input[type="number"],
#trip-modal .trip-field select {
  min-height: 2.0rem !important;
  padding: 0.34rem 0.48rem !important;
  font-size: 0.86rem !important;
  font-weight: 750 !important;
}

#trip-modal .trip-details-save {
  min-height: 2.0rem !important;
  padding-top: 0.30rem !important;
  padding-bottom: 0.30rem !important;
}

#trip-modal .trip-profile-suggestion-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.46rem;
  align-items: center;
  padding: 0.38rem 0.46rem;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 12px;
  background: rgba(255,255,255,0.66);
}

#trip-modal .trip-profile-suggestion-card.has-suggestion {
  border-color: rgba(79,125,168,0.24);
  background: rgba(79,125,168,0.06);
}

#trip-modal .trip-profile-suggestion-card.matches-current {
  border-color: rgba(31,111,91,0.18);
  background: rgba(31,111,91,0.055);
}

#trip-modal .trip-profile-suggestion-text {
  display: grid;
  gap: 0.06rem;
  min-width: 0;
}

#trip-modal .trip-profile-suggestion-kicker {
  color: var(--text-light);
  font-size: 0.58rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#trip-modal .trip-profile-suggestion-text strong {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 880;
  line-height: 1.05;
}

#trip-modal .trip-profile-suggestion-text small {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#trip-modal .trip-suggestion-apply,
#trip-modal .trip-suggestion-match {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  min-height: 1.55rem;
  padding: 0.22rem 0.58rem;
  font-size: 0.70rem;
  font-weight: 850;
  white-space: nowrap;
}

#trip-modal .trip-suggestion-apply {
  border: 1px solid rgba(31,111,91,0.28);
  background: rgba(31,111,91,0.09);
  color: var(--accent);
}

#trip-modal .trip-suggestion-match {
  border: 1px solid rgba(31,111,91,0.18);
  background: rgba(31,111,91,0.06);
  color: #1f6f5b;
}

#trip-modal .trip-modal-actions .tag,
#trip-modal .trip-modal-actions .modal-secondary,
#trip-modal .trip-modal-actions .modal-danger {
  min-height: 1.85rem;
  padding: 0.30rem 0.52rem;
  font-size: 0.78rem;
}

#trip-modal .trip-gpx-form {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.38rem !important;
}

#trip-modal .trip-gpx-form input[type="file"] {
  min-height: 2.0rem;
  padding: 0.31rem 0.42rem !important;
  font-size: 0.74rem !important;
}

@media (max-width: 1050px) {
  #trip-modal .trip-manager-row {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "actions"
      "details"
      "media" !important;
  }
  #trip-modal .trip-manager-row > .trip-modal-actions {
    justify-content: flex-start !important;
  }
  #trip-modal .trip-details-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  #trip-modal .trip-field-name,
  #trip-modal .trip-field-profile,
  #trip-modal .trip-field-location,
  #trip-modal .trip-details-save {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 720px) {
  .dashboard-pack-card .dashboard-range-under .dashboard-range-caption-zones {
    grid-column: 1 / -1 !important;
  }
  #trip-modal .trip-manager-row > .trip-media-panel,
  #trip-modal .trip-details-grid,
  #trip-modal .trip-profile-suggestion-card {
    grid-template-columns: 1fr !important;
  }
  #trip-modal .trip-media-actions {
    justify-content: flex-start !important;
  }
}


/* === Sticky page-mode navigation === */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.75rem;
}

.section-jump-nav {
  position: sticky;
  top: 0.35rem;
  z-index: 60;
  max-width: 1840px;
  margin: 0 auto 0.70rem;
  padding: 0.34rem 0.46rem;
  border: 1px solid rgba(217,224,231,0.88);
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 24px rgba(31,41,55,0.08);
  backdrop-filter: blur(14px);
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
  align-items: center;
}

.section-jump-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 999px;
  min-height: 1.72rem;
  padding: 0.22rem 0.58rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1.1;
  white-space: nowrap;
}

.section-jump-nav .app-brand-mark {
  box-sizing: border-box;
  width: 1.86rem;
  height: 1.86rem;
  min-width: 1.86rem;
  min-height: 1.86rem;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid rgba(180, 200, 190, 0.50);
  border-radius: 0.62rem;
  background: rgba(255,255,255,0.72);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), inset 0 0 0 1px rgba(255,255,255,0.32);
  overflow: hidden;
  opacity: 0.92;
  transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.section-jump-nav .app-brand-mark:hover,
.section-jump-nav .app-brand-mark:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  border-color: rgba(31,111,91,0.28);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.10), inset 0 0 0 1px rgba(255,255,255,0.36);
}

.section-jump-nav .app-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

.section-jump-nav a:hover,
.section-jump-nav a:focus-visible,
.section-jump-nav a.is-active,
.section-nav-group.is-open > a,
.section-nav-group:focus-within > a,
.section-nav-group:hover > a {
  background: rgba(31,111,91,0.08);
  color: var(--accent);
}

.section-nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.section-nav-group::after {
  content: "";
  position: absolute;
  left: 0;
  right: -0.5rem;
  top: 100%;
  height: 0.55rem;
  pointer-events: auto;
}

.section-submenu {
  position: absolute;
  left: 0;
  top: calc(100% + 0.10rem);
  z-index: 90;
  display: none;
  min-width: 13.2rem;
  max-width: min(28rem, calc(100vw - 2rem));
  max-height: var(--menu-available-height, calc(100dvh - 6rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.34rem;
  border: 1px solid rgba(217,224,231,0.92);
  border-radius: 16px;
  background: rgba(255,255,255,0.97);
  box-shadow: 0 18px 42px rgba(31,41,55,0.13);
  backdrop-filter: blur(16px);
}

.section-nav-group:hover .section-submenu,
.section-nav-group:focus-within .section-submenu,
.section-nav-group.is-open .section-submenu {
  display: grid;
  gap: 0.16rem;
}

.section-submenu a {
  justify-content: flex-start;
  min-height: 1.68rem;
  padding: 0.28rem 0.48rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.74rem;
  font-weight: 760;
  gap: 0.42rem;
}

.section-submenu .category-color-dot {
  width: 0.48rem !important;
  height: 0.48rem !important;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.88),
    0 0 0 2.5px color-mix(in srgb, var(--cat-color, #8a94a3) 22%, white) !important;
}

.section-submenu a.category-nav-item {
  border: 1px solid transparent;
  background: var(--category-soft, transparent);
}

.section-submenu a.category-nav-item:hover,
.section-submenu a.category-nav-item:focus-visible {
  border-color: var(--category-border, rgba(31,111,91,0.18));
}

.section-submenu-label {
  display: none;
}

.section-submenu a.attention-nav-item {
  color: var(--text-muted);
  white-space: normal;
  line-height: 1.2;
}

.section-submenu a.attention-nav-item.danger { color: #9f2f2f; }
.section-submenu a.attention-nav-item.warning { color: #8a5a00; }
.section-submenu a.attention-nav-item.info { color: #315d86; }
.section-submenu a.attention-nav-item.neutral { color: var(--text-muted); }

@supports not (color: color-mix(in srgb, red, white)) {
  .section-submenu .category-color-dot {
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.88), 0 0 0 2.5px rgba(138,148,163,0.22) !important;
  }
}

.section-anchor,
[data-section-panel],
.category-tile,
#dashboard-attention,
#food-summary-anchor {
  scroll-margin-top: 5.75rem;
}

.section-anchor {
  display: block;
  height: 0;
  overflow: hidden;
}

body[data-page-view="route"] [data-section-panel]:not([data-section-panel="route"]),
body[data-page-view="dashboard"] [data-section-panel]:not([data-section-panel="dashboard"]),
body[data-page-view="gear"] [data-section-panel]:not([data-section-panel="gear"]),
body[data-page-view="food"] [data-section-panel]:not([data-section-panel="food"]),
body[data-page-view="stays"] [data-section-panel]:not([data-section-panel="stays"]),
body[data-page-view="attention"] [data-section-panel]:not([data-section-panel="attention"]) {
  display: none !important;
}

body[data-page-view="attention"] #trip-dashboard .visual-summary-header,
body[data-page-view="attention"] #trip-dashboard .visual-card:not(#dashboard-attention) {
  display: none !important;
}

body[data-page-view="attention"] #dashboard-attention {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  html { scroll-padding-top: 4.35rem; }
  .section-jump-nav {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    border-radius: 18px;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .section-jump-nav > a,
  .section-nav-group { flex: 0 0 auto; }
  .section-submenu {
    position: fixed;
    left: 0.7rem;
    right: 0.7rem;
    top: auto;
    min-width: 0;
    max-width: none;
  }
  .section-anchor,
  [data-section-panel],
  .category-tile,
  #dashboard-attention,
  #food-summary-anchor {
    scroll-margin-top: 4.45rem;
  }
}

/* === Follow-up navigation and food refinements === */

.section-jump-nav > a,
.section-jump-nav .section-nav-group > a {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.34);
}

.section-jump-nav > a:hover,
.section-jump-nav > a:focus-visible,
.section-jump-nav > a.is-active,
.section-jump-nav .section-nav-group > a:hover,
.section-jump-nav .section-nav-group > a:focus-visible,
.section-jump-nav .section-nav-group > a.is-active,
.section-nav-group.is-open > a,
.section-nav-group:focus-within > a,
.section-nav-group:hover > a {
  border-color: rgba(31,111,91,0.28);
  background: var(--accent-soft);
  color: var(--accent);
}

.category-tile.food-category-tile table.item-table[data-is-food="1"] > thead {
  display: none !important;
}


/* === Sticky-bar trip selector + settings menu === */
.section-jump-nav {
  z-index: 150;
}

.section-jump-nav .section-nav-summary {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  min-height: 1.72rem;
  max-width: 24rem;
  padding: 0.22rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.34);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.section-jump-nav .section-nav-summary::-webkit-details-marker {
  display: none;
}

.section-jump-nav .section-nav-summary::marker {
  content: "";
}

.section-jump-nav .section-nav-summary:hover,
.section-jump-nav .section-nav-summary:focus-visible,
.section-nav-group[open] > .section-nav-summary {
  border-color: rgba(31,111,91,0.28);
  background: var(--accent-soft);
  color: var(--accent);
}

.section-jump-nav .section-nav-summary:focus-visible,
.section-submenu-button:focus-visible,
.sticky-trip-create-form input:focus-visible,
.sticky-trip-create-form button:focus-visible {
  outline: 2px solid rgba(31,111,91,0.28);
  outline-offset: 2px;
}

.section-nav-group[open] > .section-submenu {
  display: grid;
  gap: 0.16rem;
}

.sticky-trip-menu {
  max-width: min(28rem, 100%);
}

.sticky-trip-summary {
  max-width: min(28rem, 52vw) !important;
  border-color: rgba(31,111,91,0.22) !important;
  background: #ffffff !important;
  color: var(--accent) !important;
}

.sticky-trip-kicker {
  color: var(--text-light);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.sticky-trip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-menu-caret {
  opacity: 0.72;
  font-size: 0.74rem;
}

.sticky-trip-submenu,
.sticky-settings-submenu {
  z-index: 285;
}

.sticky-trip-submenu {
  min-width: min(23rem, calc(100vw - 2rem));
}

.sticky-settings-menu {
  margin-left: auto;
}

.sticky-settings-submenu {
  left: auto;
  right: 0;
  min-width: 22rem;
  max-width: min(30rem, calc(100vw - 2rem));
  gap: 0.26rem !important;
}

.manage-menu-section {
  display: grid;
  gap: 0.14rem;
  padding: 0.22rem 0 0.34rem;
  border-top: 1px solid var(--line-soft);
}

.manage-menu-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.manage-menu-action-form {
  display: block;
  margin: 0;
}

.manage-menu-action-form .section-submenu-button {
  width: 100%;
}

.archived-trip-list {
  display: grid;
  gap: 0.55rem;
}

.archived-trip-row {
  align-items: center;
}

.archived-trip-summary {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.archived-trip-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archived-trip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.manage-menu-section .section-submenu-label {
  padding-top: 0.30rem;
}

.manage-menu-section:first-child .section-submenu-label {
  padding-top: 0.16rem;
}

.section-submenu-button .menu-item-text {
  display: grid;
  flex: 1 1 auto;
  gap: 0.08rem;
  min-width: 0;
}

.section-submenu-button .menu-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-submenu-button .menu-item-subtitle {
  color: var(--text-light);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.15;
}

.section-submenu-button .menu-item-status {
  margin-left: auto;
  padding: 0.10rem 0.34rem;
  border: 1px solid rgba(148,163,184,0.24);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--text-light);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section-submenu-button.is-disabled,
.section-submenu-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.section-submenu-button.is-disabled:hover,
.section-submenu-button.is-disabled:focus-visible,
.section-submenu-button:disabled:hover,
.section-submenu-button:disabled:focus-visible {
  border-color: transparent;
  background: transparent;
  color: var(--text);
}

.sticky-trip-submenu .section-submenu-label,
.sticky-settings-submenu .section-submenu-label {
  display: block;
  padding: 0.26rem 0.48rem 0.18rem;
  color: var(--text-light);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  line-height: 1.1;
  text-transform: uppercase;
}

.trip-switch-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 0.6rem;
}

.trip-switch-item.selected {
  background: var(--accent-soft);
  color: var(--accent);
}

.trip-switch-item small {
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 850;
}

.section-submenu-button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 1.82rem;
  padding: 0.36rem 0.52rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.15;
  cursor: pointer;
}

.section-submenu-button:hover,
.section-submenu-button:focus-visible {
  border-color: rgba(31,111,91,0.18);
  background: var(--accent-soft);
  color: var(--accent);
}

.sticky-trip-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 0.34rem;
  align-items: end;
  margin-top: 0.24rem;
  padding: 0.46rem;
  border-top: 1px solid var(--line-soft);
}

.sticky-trip-create-form label {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
  color: var(--text-light);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sticky-trip-create-form input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0.38rem 0.52rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.sticky-trip-create-form button {
  box-sizing: border-box;
  min-height: 2.05rem;
  padding: 0.38rem 0.62rem;
  border: 1px solid rgba(31,111,91,0.24);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
}

.sticky-trip-create-form button:hover {
  border-color: rgba(31,111,91,0.38);
  background: #ffffff;
}

.settings-create-trip-form {
  margin: 0.10rem 0 0.18rem;
  padding: 0.48rem;
  border-top: 0;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #f8fafc;
}

@media (max-width: 720px) {
  .sticky-trip-summary {
    max-width: min(16rem, 58vw) !important;
  }

  .sticky-trip-kicker {
    display: none;
  }

  .sticky-settings-menu {
    margin-left: 0;
  }

  .sticky-trip-submenu,
  .sticky-settings-submenu {
    position: fixed;
    left: 0.7rem;
    right: 0.7rem;
    top: auto;
    min-width: 0;
    max-width: none;
  }
}


/* === Sticky People / Show gear filters === */
:root {
  --gear-toolbar-sticky-top: 4.75rem;
  --gear-toolbar-height: 4.35rem;
  --gear-scroll-margin-top: calc(var(--gear-toolbar-sticky-top) + var(--gear-toolbar-height) + 0.85rem);
}

.gear-toolbar {
  position: sticky;
  top: var(--gear-toolbar-sticky-top);
  z-index: 142;
  margin-bottom: 0.72rem;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 10px 26px rgba(31,41,55,0.09);
  backdrop-filter: blur(14px);
}

.gear-category-tile,
#gear-section {
  scroll-margin-top: var(--gear-scroll-margin-top) !important;
}

body[data-page-view="food"] .gear-toolbar,
body[data-page-view="route"] .gear-toolbar,
body[data-page-view="dashboard"] .gear-toolbar,
body[data-page-view="attention"] .gear-toolbar {
  display: none !important;
}

@media (min-width: 900px) {
  .gear-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.42rem 0.88rem;
  }

  .gear-toolbar-row {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
  }

  .gear-toolbar-row:first-child {
    flex: 1 1 30rem;
  }

  .gear-toolbar-row:nth-child(2) {
    flex: 1 1 34rem;
  }
}

@media (max-width: 760px) {
  .gear-toolbar {
    max-height: calc(100vh - var(--gear-toolbar-sticky-top) - 0.75rem);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* v78: surfaces belong to their sticky bars, not a fixed page-wide overlay. */
.section-jump-nav,.gear-toolbar {
  isolation:isolate;
  background:#fff !important;
  border-color:#d9e0e7 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 3px 10px rgba(15,23,42,.06) !important;
}
.section-jump-nav { z-index:240 !important; }
.gear-toolbar { z-index:220 !important; }
.section-jump-nav::before,.gear-toolbar::before { display:none !important; }
.section-submenu,.sticky-trip-submenu,.sticky-settings-submenu { z-index:280; background:#fff !important; }

/* === Route water / map weather relayout === */

.weather-route-setup-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.9rem;
  padding: 0.72rem 0.82rem;
  border: 1px solid rgba(31,111,91,0.14);
  border-radius: 16px;
  background: var(--accent-soft);
}

.weather-route-setup-callout span {
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.weather-route-setup-callout strong {
  display: block;
  margin-top: 0.08rem;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 900;
}

.weather-route-setup-callout p {
  margin: 0.14rem 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.35;
}

@media (max-width: 720px) {
  
  .weather-route-setup-callout {
    grid-template-columns: 1fr;
  }

}

/* === Authoritative visibility helper ===
   Keep this late in the stylesheet. Some modal components define their own
   display mode (flex/grid) after the base .hidden rule, so .hidden must win. */
.hidden,
[hidden] {
  display: none !important;
}


html.packlist-fragment-refreshing {
  cursor: progress;
}

.item-table tr.row-just-updated {
  animation: rowJustUpdated 1.4s ease;
}

@keyframes rowJustUpdated {
  0% { box-shadow: inset 4px 0 0 rgba(31,111,91,0.62); background: rgba(31,111,91,0.10); }
  55% { box-shadow: inset 4px 0 0 rgba(31,111,91,0.34); background: rgba(31,111,91,0.06); }
  100% { box-shadow: inset 4px 0 0 rgba(31,111,91,0); background: inherit; }
}


/* v23.1: explicit route-file diagnostics. */
.route-status-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, .32);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  font-size: .9rem;
}
.route-status-card strong { font-size: .92rem; }
.route-status-card span { color: var(--text-muted, #64748b); }
.route-status-card small { color: var(--text-muted, #64748b); overflow-wrap: anywhere; }
.route-status-error { border-color: rgba(190, 90, 68, .28); }

/* Route-point removal is a direct action, not a pending checkbox. */
.weather-point-remove-button {
  justify-self: end;
  align-self: center;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--danger);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.weather-point-remove-button:hover { background: #fff1f0; border-color: var(--danger); }
.weather-point-remove-button:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }

/* Unified route-point planner. */
#route-points-modal-title:focus { outline: none; }

/* Compact route planning, with one editor revealed at a time. */
.planning-symbol { display:inline-grid; place-items:center; flex:0 0 26px; height:26px; border-radius:50%; color:white; font-size:.7rem; font-weight:700; }
.planning-distance-note { grid-column:1/-1; font-size:.75rem; color:var(--text-muted); margin:0; }
.planning-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; font-size:.8rem; color:var(--text-muted); }

/* v38: compact overview and focused point/section dialogs. */
.planning-compact-list { display:grid; gap:.15rem; }
.planning-list-title { text-align:left; margin:.5rem 0; font-size:.85rem; }
.planning-list-title small { font-weight:400; color:var(--text-muted); }
.planning-day-heading { margin:.7rem 0 .2rem; padding:.3rem .5rem; font-size:.75rem; color:var(--text-muted); border-left:3px solid var(--day-color); }
.planning-compact-row { width:100%; display:grid; grid-template-columns:26px 5.8rem minmax(0,1fr) auto; gap:.6rem; align-items:center; padding:.4rem .5rem; border:0; border-left:3px solid var(--day-color,transparent); border-radius:10px; background:color-mix(in srgb,var(--day-color,#87948f) 6%,white); color:var(--text); text-align:left; cursor:pointer; font:inherit; font-size:.8rem; }
.planning-compact-row:hover,.planning-compact-row:focus-visible { background:var(--accent-soft); }
.planning-compact-row strong { overflow-wrap:anywhere; font-weight:600; }
.planning-compact-distance { color:var(--text-muted); font-variant-numeric:tabular-nums; }
.planning-compact-tags { font-size:.7rem; color:var(--text-muted); }
.planning-section-options { margin-top:1.5rem; padding-top:0; font-size:.8rem; }
.planning-section-options h4 { margin:0; text-align:left; }
.planning-section-options form { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.planning-detail-modal { z-index:20000; }
.planning-detail-panel { width:min(560px,calc(100vw - 2rem)); max-height:85vh; overflow:auto; }
.planning-detail-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin:1rem 0; }
.planning-detail-fields label { display:grid; gap:.3rem; font-size:.75rem; color:var(--text-muted); min-width:0; }
.planning-detail-fields label[hidden] { display:none; }
.planning-detail-fields label:first-child { grid-column:1/-1; }
.planning-detail-fields input,.planning-detail-fields select { width:100%; min-width:0; padding:.55rem; border:1px solid var(--line); border-radius:8px; background:white; font:inherit; color:var(--text); }
.planning-detail-fields input[readonly] { background:var(--surface-soft); }
.planning-detail-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; margin-top:1rem; font-size:.8rem; }
.planning-detail-actions [hidden],.planning-unsaved[hidden] { display:none; }
.planning-detail-actions [role=status] { flex:1; }
.planning-unsaved { border-top:1px solid var(--line); margin-top:1rem; padding-top:.5rem; font-size:.8rem; }
.planning-unsaved button { border:1px solid var(--line); background:var(--surface-soft); border-radius:8px; padding:.5rem; margin-right:.5rem; }
@media(max-width:560px) { .planning-compact-row { grid-template-columns:24px 4.5rem minmax(0,1fr); gap:.4rem; }.planning-compact-tags { grid-column:3; }.planning-compact-tags:empty { display:none; } }

#route-section-detail .planning-detail-fields label:first-child { grid-column:auto; }


.planning-compact-row.is-excluded { background:#f4f6f5; color:#66746e; }
.planning-compact-row.is-excluded:hover,.planning-compact-row.is-excluded:focus-visible { background:#e8efeb; }

/* v42: row dragging, animated insertion gaps and deliberate relation targets. */
tr[data-sortable="1"] { cursor:grab; -webkit-touch-callout:none; }
tr[data-sortable="1"] .item-title-open { cursor:grab; }
body.item-drag-active,body.item-drag-active * { cursor:grabbing!important; user-select:none!important; -webkit-user-select:none!important; }
tr.item-drag-source { display:none!important; }
.item-drag-ghost.category-tile { position:fixed!important; top:0!important; left:0!important; margin:0!important; padding:0!important; min-height:0!important; max-height:none!important; z-index:22000; pointer-events:none!important; opacity:.86; border:1px solid rgba(31,111,91,.2); border-radius:12px; background:#fff; box-shadow:0 14px 32px #173d3238,0 2px 6px #173d3226; transform-origin:0 0; overflow:hidden; will-change:transform; }
.item-drag-ghost table { table-layout:fixed; border-collapse:collapse; }
.item-drag-ghost tr.item-drag-copy { opacity:1!important; }
.item-drag-ghost.is-invalid { opacity:.45; }
.item-drag-ghost.is-related { border-color:var(--accent); }
.item-drag-ghost.is-related .item-text-cell { padding-left:1.35rem!important; }
.item-drag-gap > td { padding:4px 2px!important; border:0!important; background:transparent!important; box-sizing:border-box; }
.item-drag-gap > td > div { box-sizing:border-box; border:1px dashed rgba(31,111,91,.35); border-radius:10px; background:rgba(31,111,91,.06); transition:margin-left 150ms ease; }
.item-drag-gap.is-related > td > div { margin-left:20px; border-color:rgba(31,111,91,.6); background:rgba(31,111,91,.1); }
.category-tile tr.item-relation-target > td { background:color-mix(in srgb,var(--accent) 12%,white)!important; box-shadow:inset 0 2px rgba(31,111,91,.5),inset 0 -2px rgba(31,111,91,.5); }
.item-sort-saving { opacity:.82; }
.item-sort-status:not(.is-error) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.item-sort-status.is-error { margin:.4rem 0; font-size:.8rem; color:var(--danger,#a33); }
@media(prefers-reduced-motion:reduce) { .item-drag-gap > td > div { transition:none; } }

/* v43: simple multi-item picker. */
.item-pick-list { max-height:20rem; overflow-y:auto; border:1px solid var(--line); border-radius:12px; padding:.3rem; }
.item-pick-list .item-pick-option { display:block; width:100%; padding:.65rem .7rem; margin:0; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--text); text-align:left; font:inherit; font-size:.85rem; cursor:pointer; }
.item-pick-option:hover { background:var(--accent-soft); }
.item-pick-list .item-pick-option[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent); }
.item-pick-option:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.item-pick-option:disabled { opacity:.6; cursor:default; }
.item-pick-status { font-size:.8rem; color:var(--text-muted); }

/* v44: compact rows and assignment removal. */
table.item-table tbody tr.item-row > td { padding-top:.28rem !important; padding-bottom:.28rem !important; }
.item-pick-list .item-pick-option { padding:.45rem .65rem; }
#item-details-form .item-remove-assignment { margin-left:auto; border:0; background:transparent; color:#b43d3d; font:inherit; font-size:.85rem; cursor:pointer; padding:.65rem .5rem; }
#item-details-form .item-remove-assignment:hover { background:#fff0f0; }

/* Compact colour swatches in the existing dark tooltip. */
.packlist-tooltip.is-route-type-legend { min-width: 10rem; white-space: normal; }
.packlist-tooltip .tooltip-route-heading { margin-bottom: .28rem; font-weight: 800; }
.packlist-tooltip .tooltip-route-row { display: flex; align-items: center; gap: .45rem; padding: .14rem 0; }
.packlist-tooltip .tooltip-route-row i { width: .68rem; height: .68rem; flex: none; border-radius: 3px; border: 1px solid #ffffff4a; }
.packlist-tooltip .tooltip-route-row span { flex: 1; }
.packlist-tooltip .tooltip-route-row strong { white-space: nowrap; font-size: .72rem; }

/* v56: daily walking time fits beneath each compact weather reading. */
.trip-day-summary-row .trip-day-summary-conditions {
  grid-column: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: .05rem;
}
.trip-day-summary-row .trip-day-summary-walk-time {
  max-width: 100%;
  padding: .05rem .15rem;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: .60rem;
  font-weight: 760;
  white-space: nowrap;
  cursor: default;
}
.trip-day-summary-row .trip-day-summary-walk-time:hover,
.trip-day-summary-row .trip-day-summary-walk-time:focus-visible { background: var(--accent-soft); }
@media (max-width: 760px) {
  .trip-day-summary-row .trip-day-summary-conditions { grid-column: 2 / -1; }
}

/* The insertion placeholder must not inherit the table's alternating row background. */
.category-tile table.item-table tbody tr.item-drag-gap,
.category-tile table.item-table tbody tr.item-drag-gap > td {
 background:transparent !important; border:0 !important; box-shadow:none !important; outline:0 !important;
}
.item-drag-ghost tr.item-drag-copy,.item-drag-ghost tr.item-drag-copy > td { outline:0 !important; }

/* v75: compact dashboard composition, without duplicate base-weight bars. */
.dashboard-load-list { display:grid; gap:1.1rem; }
.dashboard-load-person { display:grid; gap:.5rem; min-width:0; }
.dashboard-load-heading { display:flex; justify-content:space-between; gap:1rem; }
.dashboard-load-bar { display:flex; height:14px; overflow:hidden; border-radius:999px; background:#edf1ee; }
.dashboard-load-bar .load-part { border:0; border-radius:0; padding:0; min-width:0; cursor:pointer; }
.load-part-gear { background:#2a7864; }.load-part-food { background:#d2a25e; }.load-part-water { background:#668dad; }
.dashboard-load-values { display:flex; flex-wrap:wrap; gap:.35rem 1rem; font-size:.8rem; }
.dashboard-load-values>span { display:inline-flex; align-items:center; gap:.3rem; }
.dashboard-load-values i { display:inline-block; width:.6rem; height:.6rem; border-radius:3px; }
.dashboard-load-context { display:flex; align-items:center; gap:.5rem; color:var(--text-muted); font-size:.76rem; }
#trip-dashboard .dashboard-metric-badge { display:inline-flex; align-items:center; justify-content:center; width:auto; max-width:100%; padding:.2rem .5rem; border-radius:999px; font-size:.72rem; line-height:1.35; font-style:normal; white-space:normal; vertical-align:middle; }
#trip-dashboard .dashboard-person-heavy-pill { font:inherit; text-align:left; cursor:pointer; }
#trip-dashboard .dashboard-person-heavy-pill:hover { border-color:var(--accent); }
#trip-dashboard .dashboard-person-heavy-summary { min-width:0; }
.dashboard-attention-summary { grid-column:1/-1; order:7; }
.dashboard-attention-summary a { display:flex; align-items:center; justify-content:space-between; color:inherit; font-weight:750; text-decoration:none; }
body:not([data-page-view="attention"]):not([data-page-view="all"]) #dashboard-attention { display:none!important; }
body[data-page-view="attention"] .dashboard-attention-summary { display:none!important; }

body[data-page-view="attention"] #dashboard-attention { grid-column:1/-1!important; }

.packlist-tooltip::after { left:var(--tooltip-arrow-left,50%); }
#trip-dashboard .dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:.8rem; align-items:start; }
#trip-dashboard .dashboard-grid>.visual-card { grid-column:auto!important; min-width:0; }
#trip-dashboard .dashboard-grid>.dashboard-heaviest-card,
#trip-dashboard .dashboard-grid>.dashboard-attention-summary,
#trip-dashboard .dashboard-grid>#dashboard-attention { grid-column:1/-1!important; }
#trip-dashboard[data-solo="1"] .dashboard-balance-card,
#trip-dashboard[data-solo="1"] .dashboard-split-card { display:none; }
.trip-day-summary-chip[data-fit-route-day] { font:inherit; font-weight:800; border:0; cursor:pointer; }
.trip-day-summary-chip[data-fit-route-day]:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(max-width:760px){#trip-dashboard .dashboard-grid { grid-template-columns:minmax(0,1fr)!important; }}

.dashboard-load-bar .dashboard-category-segment { background:var(--cat-color,#8a94a3); }
.dashboard-load-extra { color:var(--text-muted); font-size:.76rem; }

/* v77: charts share columns; labels cannot shift one person's scale. */
#trip-dashboard .dashboard-balance-card .visual-bars,
#trip-dashboard .dashboard-shared-card .visual-bars { display:grid; grid-template-columns:minmax(5rem,1fr) minmax(4rem,3fr) minmax(9rem,1.2fr); gap:.5rem .7rem; align-items:center; }
#trip-dashboard .dashboard-balance-card .visual-bar-row,
#trip-dashboard .dashboard-shared-card .visual-bar-row { display:contents!important; }
#trip-dashboard .dashboard-metric-value { display:flex; align-items:center; justify-content:flex-end; gap:.4rem; }
.heaviest-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
#trip-dashboard[data-solo="1"] .heaviest-charts { grid-template-columns:1fr; }
.heaviest-person h5 { margin:.2rem 0 .5rem; font-size:.9rem; }
.heaviest-chart-row { display:grid; grid-template-columns:minmax(8rem,1.3fr) minmax(4rem,2fr) 4.5rem; align-items:center; gap:.5rem; margin:.45rem 0; }
.heavy-name { border:0; padding:0; background:none; font:inherit; font-size:.78rem; text-align:left; color:inherit; cursor:pointer; }
.heavy-track { height:17px; background:#e7eeed; border-radius:8px; overflow:hidden; }
.heavy-fill { display:flex; height:100%; border-radius:8px; overflow:hidden; }
.heavy-fill button { border:0; border-right:1px solid #ffffff60; padding:0; min-width:0; border-radius:0; cursor:pointer; }
.heaviest-chart-row>strong { text-align:right; font-size:.78rem; }
.dashboard-attention-summary .attention-preview { display:block; padding:.5rem 0; font-size:.8rem; font-weight:500; }
.attention-preview span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--text-muted); }
.dashboard-trip-context { display:block; background:none; border:0; color:var(--text-muted); padding:0 0 .7rem; font:inherit; font-size:.8rem; cursor:pointer; text-align:left; }
.item-content-options { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.item-content-options .modal-check-row { margin:0; align-items:start; }
.item-content-options small { display:block; color:var(--text-muted); font-weight:400; }
.item-modal :is(.modal-primary,.modal-secondary,.modal-danger,.weather-point-save,.weather-point-save-all,.weather-point-restore,.item-remove-assignment,.weather-point-remove-button),
.item-modal .modal-panel input[type="submit"] { font-family:inherit; font-size:.9rem; line-height:1.3; border-radius:12px; min-height:2.5rem; }
.modal-actions,.planning-detail-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:.5rem; }
.modal-actions .modal-primary,.planning-detail-actions [type="submit"] { order:3; }
.modal-actions .modal-secondary { order:2; }
.modal-actions [data-remove-pack-item],.planning-detail-actions [data-point-remove] { order:0; margin-right:auto!important; margin-left:0!important; color:#b52e2e; border:1px solid #e8bcbc; background:white; padding:.5rem .8rem; }
.item-modal .modal-primary,.item-modal .weather-point-save,.item-modal .weather-point-save-all { background:var(--accent,#23715c); color:white; padding:.5rem .85rem; border:1px solid transparent; font-weight:700; }
.item-modal .modal-secondary,.item-modal .weather-point-restore { background:white; border:1px solid #d8e2df; color:var(--text); padding:.5rem .85rem; }
@media(max-width:760px){.heaviest-charts,.item-content-options { grid-template-columns:1fr; }#trip-dashboard .dashboard-balance-card .visual-bars,#trip-dashboard .dashboard-shared-card .visual-bars { grid-template-columns:4rem minmax(3rem,1fr) 7rem; }.heaviest-chart-row { grid-template-columns:minmax(6rem,1fr) minmax(3rem,1fr) 4rem; }}

.item-modal .modal-danger { color:#b52e2e; border:1px solid #e8bcbc; background:white; padding:.5rem .8rem; font-weight:700; }
#trip-dashboard .dashboard-metric-value { flex-wrap:wrap; min-width:0; }
#trip-dashboard .visual-name { min-width:0; overflow-wrap:anywhere; }

/* v79: all three quantity boxes share geometry; editing never moves the row. */
.quantity-control { --quantity-box:30px; position:relative; display:inline-flex; align-items:center; height:var(--quantity-box); }
.category-tile .quantity-control .qty-input,
.quantity-control .quantity-step { box-sizing:border-box !important; width:var(--quantity-box) !important; min-width:var(--quantity-box) !important; max-width:var(--quantity-box) !important; height:var(--quantity-box) !important; min-height:var(--quantity-box) !important; padding:0 !important; line-height:1 !important; border-radius:8px !important; margin:0 !important; }
.quantity-control .quantity-step { display:none; position:absolute; top:0; border:1px solid #d9e0e7; background:#fff; color:var(--accent); font-family:inherit; font-size:1.1rem; font-weight:700; z-index:4; cursor:pointer; transform:none !important; transition:background-color 100ms ease,border-color 100ms ease !important; }
.quantity-step:first-child { right:calc(100% + 2px); }.quantity-step:last-child { left:calc(100% + 2px); }
.quantity-control.is-editing,.quantity-control:focus-within { z-index:5; }
.quantity-control.is-editing .quantity-step,.quantity-control:focus-within .quantity-step { display:block; }
.category-tile .quantity-control.is-editing .qty-input { border:1px solid #d9e0e7 !important; background:#fff !important; box-shadow:none !important; }
.quantity-control .quantity-step:active { background:var(--accent-soft); border-color:var(--accent); }
.quantity-step:disabled { opacity:.45; cursor:wait; }
body[data-gear-status-filter]:not([data-gear-status-filter="all"]) tr[data-sortable="1"],
body[data-gear-status-filter]:not([data-gear-status-filter="all"]) tr[data-sortable="1"] .item-title-open { cursor:pointer; }
@media(pointer:coarse){.quantity-control { --quantity-box:40px; }}
/* Sticky surfaces and their controls retain their position during hover/scroll. */
.section-jump-nav,.gear-toolbar { overflow-anchor:none; transition:none !important; }
.section-jump-nav a,.section-jump-nav summary,.section-jump-nav button,
.gear-toolbar .top-chip { transform:none !important; transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease !important; }
.route-water-day-bands { position:relative; display:flex; height:1.35rem; margin-bottom:.2rem; }
.route-water-day-band { min-width:0; overflow:hidden; text-align:center; font-size:.65rem; font-weight:750; border-left:1px solid #fff; background:var(--day-tint); color:var(--day-color); white-space:nowrap; }

.route-waterpoint-timeline-inner { position:relative; }
.route-water-day-shading { position:absolute; display:flex; top:1.6rem; bottom:0; left:.1rem; right:.1rem; pointer-events:none; }
.route-water-day-shading span { border-left:1px solid #fff; }

.app-section-heading { margin:0 0 1rem; padding:.2rem 0; }
.app-section-heading h3 { margin:0; font-size:1.2rem; font-weight:750; color:var(--text); }
.app-section-heading p { margin:.3rem 0 0; color:var(--text-muted); font-size:.85rem; }
.attention-group-heading { border-left:5px solid #88968f; padding-left:.6rem; margin:1rem 0 .5rem; }
.water-carry-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.8rem; margin-bottom:1rem; }
.water-carry-grid input { width:5rem; }.water-carry-grid p { font-size:.85rem; }.water-source-list>div { padding:.4rem; }
.item-modal .modal-panel :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),select,textarea) { font-family:inherit !important; font-size:.95rem !important; font-weight:400 !important; line-height:1.4; border-radius:10px; }
.item-modal .modal-panel :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),select) { min-height:2.5rem; }
.item-modal .modal-panel label { font-family:inherit; font-size:.85rem; font-weight:600; }
.item-modal .modal-header h3 { font-size:1.15rem; font-weight:750; }
.item-modal .modal-context,.item-modal small { font-size:.8rem; font-weight:400; }
@media(max-width:700px){.item-modal .modal-panel :is(input,select,textarea) { font-size:16px !important; }}

/* Compact water layout uses the same surfaces as the food and gear sections. */
.water-category-tile .dashboard-person-water-row { display:block; padding:.5rem 0; }
.water-category-tile .dashboard-person-water-row label { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.water-category-tile .category-color-dot { display:inline-block; margin-right:.5rem; }
.route-water-summary-grid-head,.route-water-summary-row { grid-template-columns:5rem minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr) !important; }
.route-water-summary-row .trip-day-summary-chip { width:auto; justify-self:start; }
.route-water-summary-row b { cursor:default; }
.water-gap-note { font-size:.78rem; color:var(--text-muted); margin:.65rem 0 0; }
.water-source-list button { font:inherit; color:var(--accent); background:none; border:0; padding:.3rem; border-radius:8px; cursor:pointer; }
.water-source-list button:hover { background:var(--accent-soft); }
.ai-weight-result button,.ai-weight-result a { display:inline-block; margin:.4rem .5rem 0 0; }
@media(max-width:600px){
 .route-water-summary-grid-head,.route-water-summary-row { grid-template-columns:3.8rem minmax(0,1fr) minmax(0,1fr) !important; gap:.35rem; }
 .route-water-summary-grid-head>span:last-child { display:none; }
 .route-water-summary-row>.route-water-summary-metric { grid-column:2/-1; }
 .route-water-summary-grid-head { display:grid !important; font-size:.65rem !important; }
 .water-carry-grid { grid-template-columns:minmax(0,1fr); }
}

.route-water-summary-row .route-water-summary-metric { white-space:normal !important; font-weight:500 !important; line-height:1.3 !important; }

/* v81: permanent planning sections and compact meal allocation. */
.gear-section-heading { padding:1rem 1.15rem; margin-bottom:.6rem; }
.food-category-tile>.app-section-heading,.water-category-tile>.app-section-heading { padding:.25rem 0 .6rem; }
.category-manager-row { grid-template-columns:1.2rem minmax(10rem,1fr) minmax(8rem,auto) 6rem; }
.daily-food-person { padding:.8rem 0; border-bottom:1px solid var(--line-soft,#e1e7e5); }
.daily-food-person h4 { margin:0 0 .5rem; font-size:1rem; }
.daily-food-totals { display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; font-size:.8rem; margin-bottom:.7rem; color:var(--text-muted); }
.daily-food-totals strong { color:var(--text); }
.food-day { border-radius:10px; margin:.3rem 0; background:color-mix(in srgb,var(--day-color) 7%,white); border-left:4px solid var(--day-color); }
.food-day>summary { display:grid; grid-template-columns:5rem minmax(7rem,1fr) minmax(4rem,.5fr) minmax(6rem,.7fr); gap:.5rem; align-items:center; padding:.65rem; font-size:.82rem; cursor:pointer; }
.food-day-label { color:var(--day-color); font-weight:750; }
.food-day-label::before { content:'›'; display:inline-block; margin-right:.5rem; }.food-day[open] .food-day-label::before { transform:rotate(90deg); }
.food-day-meals { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; padding:.2rem .7rem .7rem; }
.food-day h5,.food-equipment h5 { margin:.35rem 0; font-size:.8rem; }
.food-allocation-link,.food-equipment-link { display:block; text-align:left; border:0; background:none; color:var(--accent); cursor:pointer; padding:.3rem; font:inherit; font-size:.8rem; border-radius:8px; }
.food-allocation-link:hover,.food-equipment-link:hover,.food-allocation-item:hover { background:var(--accent-soft); }
.food-allocation-items>summary,.food-supplies>summary { cursor:pointer; font-size:.9rem; font-weight:650; padding:.75rem 0; }
.food-allocation-item { display:flex; width:100%; gap:.7rem; justify-content:space-between; text-align:left; padding:.5rem; border:0; border-radius:10px; background:none; color:var(--text); font:inherit; font-size:.82rem; cursor:pointer; }
.food-allocation-item>span:last-child { color:var(--text-muted); text-align:right; }
.food-plan-muted { color:var(--text-muted); font-size:.77rem; margin:.45rem 0; }
.food-plan-warning { padding:.65rem; background:#fff4dd; border-radius:10px; color:#785317; font-size:.82rem; }
.food-equipment { margin:.8rem 0; }
.food-allocation-dialog { border:0; border-radius:20px; padding:1.25rem; width:min(680px,calc(100vw - 2rem)); max-height:85vh; color:var(--text); font:inherit; box-shadow:0 16px 60px #0004; }
.food-allocation-dialog::backdrop { background:#24342b66; backdrop-filter:blur(3px); }
.food-allocation-dialog .modal-header { display:flex; justify-content:space-between; align-items:center; }
.food-allocation-dialog h3 { margin:0; font-size:1.15rem; }
.food-allocation-dialog p { font-size:.85rem; }
.food-allocation-dialog input,.food-allocation-dialog select { box-sizing:border-box; font:inherit; font-size:.95rem; font-weight:400; min-height:2.5rem; border:1px solid #d5dfdb; border-radius:10px; padding:.4rem; }
.food-allocation-scroll { max-height:45vh; overflow:auto; }
.food-allocation-grid { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:.3rem; }
.food-allocation-grid th { font-size:.75rem; text-align:left; }.food-allocation-grid thead th { position:sticky; top:0; background:white; z-index:1; }
.food-allocation-grid input { width:100%; min-width:0; text-align:center; }
.food-repeat { display:flex; align-items:end; gap:.5rem; flex-wrap:wrap; margin:.7rem 0; font-size:.8rem; }
.food-repeat label { display:grid; gap:.25rem; }.food-repeat input { width:5rem; }
.food-allocation-dialog .modal-primary,.food-allocation-dialog .modal-secondary,.food-equipment .modal-secondary { font:inherit; font-size:.85rem; border-radius:12px; min-height:2.5rem; padding:.45rem .75rem; cursor:pointer; }
.food-allocation-dialog .modal-primary { background:var(--accent); border:1px solid transparent; color:white; font-weight:700; }
.food-allocation-dialog .modal-secondary,.food-equipment .modal-secondary { border:1px solid #d5dfdb; background:white; color:var(--text); }
@media(max-width:700px){
 .food-day>summary { grid-template-columns:4rem 1fr 4rem; }.food-day>summary>span:last-child { grid-column:2/-1; }
 .food-day-meals { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .food-allocation-dialog { padding:.75rem; width:calc(100vw - 1rem); }
 .food-allocation-dialog input,.food-allocation-dialog select { font-size:16px; }
 .food-allocation-item { flex-direction:column; gap:.2rem; }.food-allocation-item>span:last-child { text-align:left; }
 .category-manager-row { grid-template-columns:1.2rem minmax(0,1fr) 5rem; }.category-manager-row .category-manager-meta { grid-column:2; }
}

/* v82: direct meals and route-aware water planning. */
.category-tile.food-category-tile { --category-color:#52736a; --category-tint:#fff; --category-soft:#f5f8f7; background:#fff; }
.food-category-tile .person,.food-category-tile .item-table { background:transparent; }
.daily-food-person { padding:.35rem 0 .7rem; }
.daily-food-person h4,.food-category-tile .person-table-title { text-align:left; }
.food-day { background:#fff; border:1px solid var(--line-soft,#e1e7e5); border-left:4px solid var(--day-color); }
.food-day-meals { gap:.5rem; }
.food-meal-card { display:flex; flex-direction:column; gap:.25rem; text-align:left; padding:.65rem; min-width:0; border:1px solid #e1e8e4; border-radius:12px; background:#fff; color:var(--text); font:inherit; font-size:.8rem; cursor:pointer; }
.food-meal-card:hover,.food-meal-card:focus-visible { background:var(--accent-soft,#f0f6f3); border-color:var(--accent); }
.food-meal-card>strong { display:flex; justify-content:space-between; }.food-meal-card>span { overflow-wrap:anywhere; }
.food-meal-place { color:var(--accent); }
.food-meal-tabs { display:flex; gap:.4rem; margin:.75rem 0; }
.food-meal-tabs button { flex:1; border:1px solid #d5dfdb; border-radius:10px; background:white; padding:.6rem; font:inherit; cursor:pointer; }
.food-meal-tabs button[aria-pressed=true] { color:var(--accent); background:var(--accent-soft,#f0f6f3); border-color:var(--accent); }
.food-picker-filters { display:grid; grid-template-columns:1fr 10rem; gap:.6rem; }
.food-meal-dialog label { display:grid; gap:.3rem; font-size:.8rem; margin:.5rem 0; }
.food-meal-dialog input,.food-meal-dialog select { width:100%; min-width:0; }
.food-meal-picks { max-height:40vh; overflow:auto; overscroll-behavior:contain; margin-top:.5rem; }
.food-meal-pick { display:flex; align-items:center; gap:.5rem; border-radius:10px; }
.food-meal-pick>button { flex:1; min-width:0; display:flex; flex-direction:column; gap:.2rem; text-align:left; padding:.65rem; font:inherit; font-size:.88rem; color:var(--text); border:1px solid transparent; background:white; border-radius:10px; cursor:pointer; }
.food-meal-pick>button[aria-pressed=true] { background:var(--accent-soft,#edf5f1); border-color:var(--accent); }
.food-meal-pick small { color:var(--text-muted); font-size:.76rem; }.food-meal-pick>input { width:5rem; flex:0 0 5rem; text-align:center; }
.food-meal-dialog [hidden] { display:none; }.food-meal-dialog [data-food-status]:empty { display:none; }
.food-meal-dialog .modal-actions { position:sticky; bottom:-1.25rem; background:white; padding:.75rem 0 .25rem; display:flex; gap:.5rem; justify-content:flex-end; }
.food-linked-equipment td { background:white; }.food-linked-equipment small { color:var(--text-muted); }
.water-carry-form { display:flex; flex-wrap:wrap; align-items:end; gap:.65rem; margin:.5rem 0; }
.water-carry-form label { display:grid; gap:.35rem; font-size:.85rem; }.water-carry-form input { background:white; border:1px solid #c9d7d0; border-radius:10px; padding:.5rem; width:8rem; font:inherit; min-height:2.5rem; box-sizing:border-box; }
.water-carry-form button { min-height:2.5rem; font:inherit; font-size:.8rem; border:1px solid #c9d7d0; border-radius:10px; padding:.45rem .7rem; background:white; color:var(--accent); cursor:pointer; }
.water-planning-notice { background:#f4f8f6; border:1px solid #dce7e1; padding:.7rem .8rem; border-radius:12px; font-size:.82rem; margin:.5rem 0; }.water-planning-notice p { margin:.35rem 0 0; }
.water-route-overview { border:1px solid #dce7e1; border-radius:14px; padding:.8rem; margin:1rem 0; background:white; }
.water-route-chart-scroll { overflow-x:auto; }.water-route-chart-scroll svg { width:100%; display:block; font-family:inherit; font-size:12px; fill:var(--text); }
.water-chart-legend { display:flex; flex-wrap:wrap; gap:.5rem 1rem; font-size:.74rem; color:var(--text-muted); margin:.5rem 0; }
.water-chart-legend i { width:1.3rem; display:inline-block; vertical-align:middle; margin-right:.3rem; border-top:3px solid #b27722; }.water-chart-legend i.water-gap-reliable { border-color:#3c788f; border-top-style:dashed; }
.water-source-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.water-source-chip { display:flex; flex-direction:column; gap:.2rem; text-align:left; border:1px solid #dce7e1; background:white; padding:.5rem .7rem; border-radius:10px; font:inherit; font-size:.78rem; color:var(--text); }.water-source-chip span { color:var(--text-muted); }
button.water-source-chip { cursor:pointer; }button.water-source-chip:hover { background:var(--accent-soft); }
@media(max-width:700px){.food-picker-filters{grid-template-columns:1fr 8rem}.food-meal-card{padding:.5rem}.food-meal-dialog .modal-actions{bottom:-.75rem}.water-carry-form input{font-size:16px}}