:root {
  color-scheme: light dark;
  --bar: #1f3d2b;
  --bar-fg: #f4efe4;
  --bg: #f4efe4;
  --card: #fffdf8;
  --fg: #22301f;
  --muted: #6b7a66;
  --line: #e2dccd;
  --green: #2f5d3a;
  --accent: #e4572e;
  --warn: #b3261e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131a14;
    --card: #1c251d;
    --fg: #e8ecdf;
    --muted: #93a08d;
    --line: #2c382d;
    --green: #6fbf85;
    --warn: #ff8a80;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

html {
  /* iOS tints the status bar area from the page background, not from the
     header, so the page behind everything is the bar colour and main paints
     the content colour over it. */
  background: var(--bar);
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bar);
  color: var(--fg);
  font: 16px/1.45 system-ui, sans-serif;
  /* Stop the page itself bouncing or zooming like a website. */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

button,
select,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* Keep clear of the notch and status bar when installed. */
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background: var(--bar);
  color: var(--bar-fg);
}

h1 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

#tally {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

main {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
  padding: 14px 14px 24px;
}

main > * {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

nav {
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 0 6px;
  color: var(--muted);
  font-size: 0.72rem;
  text-decoration: none;
}

nav b {
  font-size: 1.25rem;
  line-height: 1.2;
}

nav a.on {
  color: var(--accent);
}

/* --- Pieces shared by the screens ----------------------------------------- */

.card {
  margin-bottom: 14px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
}

h2 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

h3 {
  margin: 16px 0 8px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.hint {
  margin: 8px 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.warn {
  margin: 10px 0 0;
  color: var(--warn);
  font-size: 0.9rem;
}

.field {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  /* 16px or more, or an iPhone zooms the page to the field. */
  font-size: 16px;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.pair label,
.slider {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
}

.pair label > * {
  margin-top: 4px;
}

.button {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  border-radius: 12px;
  background: var(--green);
  color: #fff;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  .button {
    color: #10210f;
  }
}

.button.quiet {
  background: none;
  border: 1px solid var(--line);
  color: var(--fg);
  font-weight: 500;
}

.button.go {
  background: var(--accent);
  color: #fff;
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.stepper button {
  width: 46px;
  height: 44px;
  font-size: 1.3rem;
}

.stepper b {
  color: var(--fg);
  font-size: 1.05rem;
}

.segmented {
  display: flex;
  padding: 3px;
  border-radius: 12px;
  background: var(--line);
}

.segmented button {
  flex: 1;
  padding: 9px 4px;
  border-radius: 9px;
  font-size: 0.86rem;
}

.segmented .on {
  background: var(--card);
  font-weight: 650;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.segmented.small button {
  padding: 6px 10px;
  font-size: 0.8rem;
}

/* --- Plan ----------------------------------------------------------------- */

.slider {
  margin-top: 14px;
}

.slider span {
  display: flex;
  justify-content: space-between;
}

.slider output {
  color: var(--fg);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.slider input {
  width: 100%;
  margin: 6px 0 0;
  accent-color: var(--accent);
}

.switches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.switch input {
  position: absolute;
  opacity: 0;
}

.switch span {
  display: block;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.88rem;
}

.switch input:checked + span {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.place {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: left;
}

.place span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}

.outlook {
  margin: 10px 0 0;
  font-size: 0.9rem;
}

.outlook:empty {
  display: none;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}

.stats b {
  display: block;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

.stats span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
}

.chip.ok {
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: var(--green);
}

.chip.gap {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn);
  font-weight: 650;
}

.wishes {
  margin: 0;
  font-size: 0.92rem;
}

/* --- Pack ----------------------------------------------------------------- */

.packbar {
  margin-bottom: 14px;
}

/* Gathered is the pale bar; packed is drawn over it. */
.progress {
  position: relative;
  height: 8px;
  margin: 10px 0 0;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}

.progress i,
.progress b {
  position: absolute;
  inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--green) 40%, transparent);
  transition: width 0.25s;
}

.progress b {
  background: var(--green);
}

.group {
  margin-bottom: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.group h2,
.group summary {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 11px 14px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.group summary {
  cursor: pointer;
}

.group ul,
.legend,
.review,
#door ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}

.row:last-child {
  border-bottom: 0;
}

.what {
  flex: 1;
  min-width: 0;
}

.what b {
  display: block;
  font-weight: 550;
}

.what i {
  font-style: normal;
  color: var(--muted);
}

.what span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.what span:empty {
  display: none;
}

.grams {
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.row.done .what b {
  color: var(--muted);
  text-decoration: line-through;
}

/* The tick: empty, half for gathered, full for in the pack. */
.tick,
.plus {
  flex: none;
  width: 30px;
  height: 30px;
  border: 2px solid var(--muted);
  border-radius: 9px;
}

.tick.s1 {
  border-color: var(--green);
  background: linear-gradient(135deg, var(--green) 50%, transparent 50%);
}

.tick.s2 {
  border-color: var(--green);
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.plus {
  border-style: dashed;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
}

.allclear {
  padding: 30px 0;
  text-align: center;
  color: var(--green);
  font-weight: 650;
}

.left {
  margin-top: 14px;
}

/* --- Weight --------------------------------------------------------------- */

.scale {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 18px;
  border-radius: 6px;
  overflow: visible;
  font-size: 0.68rem;
  text-align: center;
  color: #fff;
}

.scale span {
  padding: 3px 0;
}

.scale span:nth-of-type(1) {
  background: #4fb0a5;
  border-radius: 6px 0 0 6px;
}

.scale span:nth-of-type(2) {
  background: #2f5d3a;
}

.scale span:nth-of-type(3) {
  background: #b08968;
  border-radius: 0 6px 6px 0;
}

/* The marker showing where this pack's base weight falls. */
.scale i {
  position: absolute;
  top: -7px;
  bottom: -7px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--card);
}

.bar {
  display: flex;
  height: 22px;
  border-radius: 8px;
  overflow: hidden;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.legend li:last-child {
  border-bottom: 0;
}

.legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend span {
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.legend small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
}

.legend li > small {
  margin-left: 4px;
}

.mini {
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
}

.inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inline .field {
  width: 110px;
}

/* --- Trips ---------------------------------------------------------------- */

.review li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.review small {
  color: var(--muted);
}

.review .segmented {
  flex: none;
}

/* --- Sheets over the screen ----------------------------------------------- */

#sheet,
#door {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

.panel {
  width: 100%;
  max-width: 620px;
  max-height: 88%;
  overflow-y: auto;
  padding: 18px 16px calc(env(safe-area-inset-bottom) + 16px);
  background: var(--card);
  border-radius: 20px 20px 0 0;
  animation: rise 0.2s ease-out;
}

@keyframes rise {
  from {
    transform: translateY(30%);
    opacity: 0;
  }
}

.doorline {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 1.02rem;
}

.doorline i {
  flex: none;
  width: 26px;
  height: 26px;
  border: 2px solid var(--muted);
  border-radius: 50%;
}

.doorline.done {
  color: var(--muted);
}

.doorline.done i {
  border-color: var(--green);
  background: var(--green);
}

.verdict {
  margin: 14px 0 0;
  text-align: center;
  font-weight: 650;
}

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 74px);
  z-index: 6;
  width: max-content;
  max-width: calc(100% - 28px);
  margin: 0;
  padding: 10px 14px;
  transform: translate(-50%, 10px);
  border-radius: 14px;
  background: #22301f;
  color: #f4efe4;
  font-size: 0.86rem;
  line-height: 1.6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}

#toast.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

#toast b {
  margin-right: 8px;
  font-weight: 550;
  white-space: nowrap;
}

#toast .in {
  color: #9be0ae;
}

#toast .out {
  color: #ffb4a0;
}