/* Packing weight checklist: cream card with clear 44px controls; reads theme custom properties with fallbacks. */
.pack-planner { display: grid; gap: 16px; padding: 16px; background-color: var(--c-surface, #fffaf0);
  color: var(--c-text, #1f2a22); border: 1px solid var(--c-border, #d8cfb4); border-radius: var(--radius, 10px);
  border-block-start: 6px solid var(--c-accent, #2f5d3a); min-width: 0; }
.pack-planner [hidden] { display: none !important; }
.pack-planner h2 { margin: 0 0 4px; font-size: 1.25rem; }
.pack-planner h3 { margin: 0 0 8px; font-size: 1rem; }
.pack-planner-note { margin: 0; font-size: .9rem; color: var(--c-muted, #4f5a4f); }
.pack-form { display: grid; gap: 12px; margin: 0; }
.pack-field { display: grid; gap: 4px; min-width: 0; }
.pack-field label { font-weight: 600; font-size: .92rem; }
.pack-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pack-planner input[type="text"], .pack-planner input[type="number"] { width: 100%; min-width: 0; min-height: 44px;
  padding: 8px 12px; font: inherit; color: inherit; background: #ffffff; border: 1px solid var(--c-border, #d8cfb4);
  border-radius: calc(var(--radius, 10px) - 4px); }
.pack-planner input:focus-visible, .pack-planner button:focus-visible { outline: 3px solid var(--c-accent, #2f5d3a); outline-offset: 2px; }
.pack-btn, .pack-chip, .pack-delete { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 8px 16px; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; color: var(--c-accent, #2f5d3a); background: transparent;
  border: 1px solid var(--c-accent, #2f5d3a); border-radius: calc(var(--radius, 10px) - 4px); cursor: pointer; }
.pack-btn-primary { width: 100%; background: var(--c-accent, #2f5d3a); color: var(--c-on-accent, #fffaf0); }
.pack-btn:disabled { opacity: .55; cursor: not-allowed; }
.pack-error { margin: 0; padding: 8px 12px; color: #8a1c12; background: #fdecea; border-radius: 6px; font-size: .92rem; }
.pack-summary { padding: 12px; background: var(--c-bg, #eef1e6); border-radius: calc(var(--radius, 10px) - 4px); }
.pack-totals { display: grid; gap: 4px; margin: 0 0 8px; }
.pack-total-row { display: flex; justify-content: space-between; gap: 8px; }
.pack-total-row dt { color: var(--c-muted, #4f5a4f); }
.pack-total-row dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.pack-total-main dd { font-size: 1.2rem; color: var(--c-accent, #2f5d3a); }
.pack-progress { display: block; width: 100%; height: 10px; accent-color: var(--c-accent, #2f5d3a); }
.pack-count { margin: 8px 0 0; font-size: .9rem; color: var(--c-muted, #4f5a4f); }
.pack-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.pack-chip { flex: 1 1 auto; padding-inline: 12px; }
.pack-chip[aria-pressed="true"] { background: var(--c-accent, #2f5d3a); color: var(--c-on-accent, #fffaf0); }
.pack-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pack-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; padding: 8px 12px;
  background: #ffffff; border: 1px solid var(--c-border, #d8cfb4); border-radius: calc(var(--radius, 10px) - 4px); }
.pack-item[data-packed="true"] .pack-name { text-decoration: line-through; color: var(--c-muted, #4f5a4f); }
.pack-check { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; cursor: pointer; }
.pack-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--c-accent, #2f5d3a); }
.pack-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.pack-weight { grid-column: 1 / -1; font-size: .88rem; color: var(--c-muted, #4f5a4f); font-variant-numeric: tabular-nums; }
.pack-delete { grid-column: 2; grid-row: 1; padding-inline: 12px; font-size: .9rem; }
.pack-empty { margin: 0; padding: 12px; color: var(--c-muted, #4f5a4f); border: 1px dashed var(--c-border, #d8cfb4); border-radius: 6px; }
.pack-actions { display: grid; gap: 8px; }
.pack-actions .pack-btn { width: 100%; }
.pack-status { margin: 0; min-height: 1.2em; font-size: .9rem; color: var(--c-muted, #4f5a4f); }
.pack-storage { margin: 0; font-size: .9rem; color: #8a1c12; }