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

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

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

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

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

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/newsreader-500-latin-36459103375209a47929fc7caac5eb6ec31e0abbe3cfb14b33298b637b2c79b6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

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

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

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

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

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

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}
.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}
.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}
.trix-content li {
  margin-left: 1em;
}
.trix-content [dir=rtl] li {
  margin-right: 1em;
}
.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}
.trix-content img {
  max-width: 100%;
  height: auto;
}
.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}
.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}
.trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
  color: inherit;
}
.trix-content .attachment__caption {
  text-align: center;
}
.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: " •";
}
.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}
.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}
.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

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

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

/* Override Trix's default h1 sizing (1.2em) to restore a proper heading hierarchy.
   These rules apply to both the editor preview and the public article view. */
.trix-content h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.25; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.trix-content h2 { font-size: 1.5rem;   font-weight: 700; line-height: 1.25; margin-top: 1.25rem; margin-bottom: 0.4rem; }
.trix-content h3 { font-size: 1.25rem;  font-weight: 700; line-height: 1.25; margin-top: 1rem;   margin-bottom: 0.3rem; }
/* =========================================================
   PackLite – Inline SVG icons
   Rendered by ApplicationHelper#icon_tag from the partials in
   app/views/shared/icons/. Icons scale with the surrounding
   font size and inherit currentColor, so they recolour with
   whatever context they sit in.
   ========================================================= */

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

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

/* Slightly larger than the running text — used where the icon
   sits next to short labels that would otherwise dwarf it. */
.icon--lg svg {
  width: 1.25em;
  height: 1.25em;
}

/* ── Category icon picker (gear category forms) ──────────────
   A radio group showing the icons themselves, replacing the
   free-text emoji field the categories used before the set. */
.icon-picker {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}

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

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

/* The radio itself stays in the accessibility tree and keyboard order —
   it is placed behind the swatch rather than removed. */
.icon-picker__option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

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

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

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

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

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

/* No full-image overlay – keeps the photo crisp and bright.
   The content card itself provides all the contrast needed. */
.home-hero::before {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.article-card__body {
  padding: 1.375rem;
}

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

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

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

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

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

/* ── Article type badge ────────────────────────────────────
   Shared by the landing teasers, the article-teaser snippet and the blog
   index, so it is defined once here. Squared like every other chip, and in
   the brand family: HowTo forest, trip report sun, gear review charcoal,
   general and start page a warm neutral (#477). Sun is a background for dark
   text only, so the trip-report badge pairs the tint with `--brand-sun-text`. */
.article-type {
  padding: 0.25rem 0.75rem;
  border-radius: 0;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

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

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

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

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

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

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

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

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

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

@media (max-width: 768px) {
  /* Hero padding reduction + fix negative margin to match container padding (0.75rem) */
  .home-hero {
    padding: 2.5rem 1rem;
    margin: -1rem -0.75rem 0;
  }

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

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

  /* Article grid: single column */
  .article-grid {
    grid-template-columns: 1fr;
  }

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

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

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

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

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

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

/* =============================================================
   Landing page — direction B ("Field notes"), issue #475
   Canvas: https://claude.ai/code/artifact/815d7f13-b24f-44a1-b461-71593f55bb4f

   Every rule is scoped under .home-page on purpose. application.css
   is required LAST in the manifest (`*= require_self`), so a
   single-class rule here loses to its base rules at equal
   specificity — the trap that killed the mobile trip-card block in
   trips.css and the transport warning in #448. Two classes (0,2,0)
   also let these override the older landing rules further up this
   file without deleting them.
   ============================================================= */

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

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

/* A band, not a screen. 620px is the ceiling and 62vh the shape, so the hero
   never takes more than about two thirds of the window and the sections below
   it are always well clear of the fold. Phones drop the floor altogether
   further down. */
.home-page .home-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(620px, 62vh);
  min-height: min(620px, 62svh);
  margin: 0;
  padding: 4rem 0;
  background: none;
  background-size: cover;
  background-position: center;
}

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

/* The photo stays at full strength — it is the mood, and washing it out was
   the point of the complaint. Only a slight veil, to settle the picture under
   the two panels rather than to hide it. */
.home-page .home-hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(41, 46, 51, 0.12);
}

/* The card sits high so the lower band of the photo stays clear: the subject
   of a landscape shot is usually on the ground line, which is exactly where a
   vertically centred card lands. */
.home-page .home-hero--photo {
  align-items: flex-start;
  padding-top: 3rem;
}

/* Legibility lives in the card, not in a wash over the picture. Paper at 0.93
   over even a black photo gives charcoal text ~12:1, so the claim holds
   against any upload while the photo around it is untouched. */
.home-page .home-hero--photo .home-hero__claim {
  padding: 2rem 2rem 2.25rem;
  border-radius: 12px;
  background: rgba(252, 251, 244, 0.93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 20px 40px rgba(41, 46, 51, 0.18), 0 8px 16px rgba(41, 46, 51, 0.1);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Wrapping flex rather than grid, so both the inline
   grid-template-columns the snippet writes on this element and the
   mobile !important override further up go inert. The panels pair up
   two to a row from their own min-width and fall to one column below
   it without a breakpoint. */
.home-page .home-features__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  counter-reset: home-beat;
}

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

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

/* The icon sits in a forest tint tile spanning both rows, so the
   panel reads icon → title → body rather than four loose pieces. */
.home-page .feature-card__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  border-radius: 8px;
  background: var(--brand-forest-tint);
  color: var(--brand-forest);
  font-size: 1.25rem;
  line-height: 1;
}

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

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

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

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

/* The header and the grid must share one container. The grid carries its own
   max-width, so without this the header ran full-bleed to the page edge while
   the cards sat centred 150px inside it. */
.home-page .snippet-article-teasers .home-section-header,
.home-page .snippet-article-teasers .article-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

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

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

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

/* The landing teasers close the gap above the date; the blog index puts its
   meta row at the top of the card instead and sets its own spacing. */
.home-page .article-card__meta { margin-top: 0; }

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

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

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

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

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

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

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

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

  /* The stacked claim and pack card already exceed a phone viewport, so the
     full-height floor only adds dead space here. */
  .home-page .home-hero {
    min-height: 0;
    padding: 3rem 0 2.75rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 480px) {
  .home-page { margin: -0.75rem -0.625rem; }
}
/* =============================================================
   Blog — index and the four article templates (#477)

   Direction B tokens throughout; the raw values live on :root in
   application.css (#476) and nothing here redefines one.

   Cascade note: application.css is required LAST in the manifest
   (`*= require_self`), so its base rules land after this file. A
   single-class rule here loses to a single-class rule there at equal
   specificity — the trap that killed the transport warning in #448.
   Everything below is either a class application.css does not define
   (`.guide-*`, `.article-show`, `.blog-head`) or is scoped by an
   ancestor so it wins on specificity. `.tag` is the one to watch: it
   is defined in application.css and must be overridden through an
   ancestor, never on its own.

   The index used to carry ~130 lines of inline <style> that redefined
   `.article-card`, `.article-type` and `.tag` — the same names
   home.css already defined, which is why the blog and the landing
   page drifted apart. The card and badge component now has exactly
   one definition, in home.css, shared by the landing teasers, the
   article-teaser snippet and the index; what is left here is only
   what the blog adds on top.
   ============================================================= */

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

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

/* ── Page head ─────────────────────────────────────────────
   A title and a rule rather than the old grey slab. The rule is the
   sun dash on the eyebrow plus the border under the filter row, so
   this block deliberately does not use `.page-header`. */
.articles-index .blog-head {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 2.25rem;
}

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

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

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

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

/* ── Grid ──────────────────────────────────────────────────
   `auto-fill` at 320px lands on three columns inside the 1200px
   wrapper, which is what the artboard draws, and degrades to two and
   one on its own. */
.articles-index .articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  margin: 0 0 3rem;
}

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

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

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

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

/* The index puts its meta row at the top of the card, badge against
   date, rather than under the excerpt as the teasers do. */
.articles-index .article-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
}

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

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

/* ── Pagination ────────────────────────────────────────────
   Pagy renders its own markup; these are the only rules it gets. */
.articles-index .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding-bottom: 3rem;
}

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

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

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

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

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

   Moved here from home.css, which had no business styling the blog;
   articles.css is required after home.css, so nothing about the
   cascade changed in the move.
   ============================================================= */

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

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

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

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

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

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

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

/* ── Byline and date ───────────────────────────────────────
   Rendered only by articles/templates/_meta, and always in the same
   place: the row directly under the title (#477). Read time and
   screenshot count ride along on the HowTo template as extra items. */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

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

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

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

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

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

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

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

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

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

/* A tag row above the buttons already carries the rule, so the footer
   drops its own rather than drawing a second one 12px below it. */
.article-footer__tags + .article-footer {
  margin-top: 1.25rem;
  padding-top: 0;
  border-top: 0;
}

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

/* Page wrapper — overrides article-show width so sidebar fits */
.guide-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 0 4rem;
}

/* ── Header banner ─────────────────────────────────────────
   Charcoal, the one dark in the palette. It was a Tailwind-green
   gradient that belonged to no part of the brand; the dot grid that
   was already here stays, redrawn in paper rather than white. */
.guide-header {
  background: var(--surface-dark);
  margin: -1.5rem -1rem 2.5rem;
  padding: 3rem 2.5rem 2.5rem;
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Guide body ────────────────────────────────────────────── */
.guide-body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

.guide-body h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  margin: 2.5rem 0 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

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

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

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

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

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

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

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

/* Lists — prerequisites, after-completion, troubleshooting */
.guide-body ul {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.5rem 0 1.5rem;
}

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

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

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

.guide-related-list li {
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  position: relative;
  font-size: 0.95rem;
  transition: all 0.15s ease;
}

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

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

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

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

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

   The only type that keeps a photo band with the title in it.
   ============================================================= */

.article-show--trip-review .trip-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Flush to the edges of the article column, the way the HowTo band is. */
  margin: -2rem -1rem 0;
  min-height: 400px;
  background: var(--surface-sunken);
  overflow: hidden;
}

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

/* The scrim is measured from the top of the box in pixels rather than
   percentages, so the alpha where the content starts does not depend on
   how many lines the title runs to. Content begins at the 4.5rem
   padding, where the scrim is already at 0.45, and only gets darker
   below it. The old `transparent → 0.88` left the first line at
   2.59:1 over a bright photo. */
.article-show--trip-review .trip-hero__overlay {
  position: relative;
  width: 100%;
  padding: 4.5rem 2rem 2rem;
  background: linear-gradient(
    to bottom,
    rgba(41, 46, 51, 0) 0,
    rgba(41, 46, 51, 0.45) 4.5rem,
    rgba(41, 46, 51, 0.62) 7.5rem,
    rgba(41, 46, 51, 0.92) 100%
  );
}

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

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

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

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

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

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

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

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

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

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

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

   Title, excerpt, tags, then a plain definition list — no callouts.
   The list is what the body renders `<dl>` as; articles that use
   headings and paragraphs instead are unaffected.
   ============================================================= */

/* `dl` is allowed in an article body (ArticlesHelper::BODY_ALLOWED_TAGS), so
   the plain term-and-description list is available to every type; only the
   general template turns it into the two-column grid the artboard draws. */
.article-content dl,
.guide-body dl {
  display: flex;
  flex-direction: column;
  margin: 2rem 0;
  border-top: 1px solid var(--border);
}

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

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

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

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

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

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

   Both used to be boxes — a tinted, forest-bordered caption block and
   a bordered notice with an ℹ. Every artboard sets a caption as plain
   muted text under its figure, and the general template is meant to
   carry no callouts at all, so the boxes are gone. These appear on all
   four types, not only general: the seeds put a figure with a source
   line under most screenshots.
   ============================================================= */

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

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

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

/* Article disclaimer notice — a rule and quiet text, not a box. */
.article-disclaimer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--divider);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-muted);
}

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

/* =============================================================
   Catalog sections composed into an article (#433)
   Rendered below the article body, one block per Section.
   ============================================================= */
.article-sections {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

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

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

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

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

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

/* =============================================================
   Responsive
   ============================================================= */

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

  .guide-sidebar {
    position: static;
    max-height: none;
    display: none; /* TOC collapsed on tablet/mobile */
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.snippet-html-block__body {
  line-height: 1.7;
}
/* ==========================================================
   gear_imports.css  —  CSV import wizard styles
   All colours use design tokens from application.css :root.
   ========================================================== */

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

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

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

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

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

/* ---------------------------------------------------------
   Import index / history
   --------------------------------------------------------- */
/* .data-table itself lives in application.css. The rules here are scoped
   to the history screen — application.css is required LAST, so an unscoped
   rule at equal specificity would lose to the base table there. */
.gear-imports-index {
  max-width: 1200px;
  margin: 0 auto;
}

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

/* Baseline-aligned only where the header is still a row: application.css
   stacks it below 768px, and an unconditional `flex-end` here outranks that
   and pushes the title to the right edge of the phone. */
@media (min-width: 769px) {
  .gear-imports-index .page-header { align-items: flex-end; }
}

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

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

/* Four columns do not fit a phone, so the table scrolls inside its own
   container rather than pushing the page sideways. */
.gear-imports-table-scroll {
  overflow-x: auto;
}

/* A thin screen, and that is fine: the table is the whole page, so it takes
   the card border the trip and pack cards carry. Cells read quiet; the file
   name and the count are the only ones carrying ink. */
.gear-imports-table {
  border: 1px solid var(--border);
  min-width: 520px;
}

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

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

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

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

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

/* Revert stays the one red control on the page; nothing else competes with
   it, so the button keeps its full weight rather than the small variant's. */
.gear-imports-table .btn-danger {
  font-weight: 600;
}

.gear-imports-table .btn-danger .icon {
  width: 0.9em;
  height: 0.9em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------------------------------------------------------
   Misc
   --------------------------------------------------------- */
.header-row-section {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}
/* =========================================================
   Statistics – summary cards and the three tables
   Every rule is scoped to `.statistics-index`: application.css is
   required LAST, so an unscoped rule at equal specificity would lose
   to the .stat-card / .dashboard-section / .stat-bar base rules there.
   ========================================================= */

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

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

/* Baseline-aligned only where the header is still a row: application.css
   stacks it below 768px, and an unconditional `flex-end` here outranks that
   and pushes the title to the right edge of the phone. */
@media (min-width: 769px) {
  .statistics-index .page-header { align-items: flex-end; }
}

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

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

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

/* Plain cards, no accent rule: the numbers are the emphasis. */
.statistics-index .stat-card {
  border-left: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  box-shadow: 0 4px 8px rgba(41, 46, 51, 0.05), 0 1px 3px rgba(41, 46, 51, 0.04);
}

/* The label sits in the ink-muted step, not the subtle one — the same
   rule as muted text on sunken ground (see --brand-ink-subtle). */
.statistics-index .stat-card h3 {
  color: var(--text-secondary);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}

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

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

/* ── Sections ──────────────────────────────────────────────────────── */
/* A display-face heading over a bordered table, not a card around both. */
.statistics-index .dashboard-section {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 2.25rem;
}

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

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

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

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

/* Cells read quiet; the row label and the weight are the only ones
   carrying ink, and weight is the only bold column. */
.statistics-index .data-table td {
  color: var(--text-secondary);
  border-bottom-color: var(--divider);
  vertical-align: middle;
}

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

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

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

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

/* ── Bars ──────────────────────────────────────────────────────────── */
/* Track and fill, the same 8px pair the pack and trip cards draw. */
.statistics-index .stat-bar-wrap {
  gap: 0.75rem;
}

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

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

/* Category rows show a share, so every bar is forest. Trip rows show a
   status against the trip's own target: forest under it, sun in the last
   tenth of it, red past it (WeightBandHelper#weight_band). */
.statistics-index .stat-bar--share   { background: var(--primary); }
.statistics-index .stat-bar--under   { background: var(--primary); }
.statistics-index .stat-bar--close   { background: var(--accent); }
.statistics-index .stat-bar--over    { background: var(--danger); }
.statistics-index .stat-bar--unknown { background: var(--border-sunken); }

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

/* The one caption on the page: the trip bars mean two things at once. */
.statistics-index .stat-caption {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

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

@media (max-width: 768px) {
  /* Four columns do not fit a phone: the table scrolls inside its section
     rather than pushing the page sideways, and the heading stays left. */
  .statistics-index .dashboard-section { overflow-x: auto; }
  .statistics-index .section-header { justify-content: flex-start; }
  .statistics-index .section-header h2 { text-align: left; }
  .statistics-index .data-table { min-width: 560px; }
  .statistics-index .col-bar { width: 36%; }
  .statistics-index .stat-bar-label { min-width: 2.5rem; }
}
/* ==========================================================
   subscriptions.css  —  Pricing, Billing & Profile pages
   All colours use design tokens from application.css :root.
   ========================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------------------------------------------------------
   Ad slot placeholder
   --------------------------------------------------------- */
.ad-slot {
  text-align: center;
  padding: 0.5rem;
  margin: 1rem 0;
}

.ad-placeholder {
  border: 1px dashed var(--border);
  padding: 1rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  border-radius: var(--radius);
}

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

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

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

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

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

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

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

.stat__value {
  display: block;
}

.stat__label {
  margin-top: 0.25rem;
}

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

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

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

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

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

/* form-actions deferred to application.css */
/* =========================================================
   Design Options Mockup – designs.css
   Visual mockup page showcasing 10 UI design options
   ========================================================= */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* The rendered UI inside the chrome */
.mockup-body {
  position: relative;
  height: calc(100% - 31px);
  overflow: hidden;
  font-size: 0;  /* reset so children scale correctly */
}

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

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

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

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

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

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

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

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

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

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

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

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

/* Grid / card grid inside content */
.mu-stats-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .design-overlay-mockup .mockup-ui {
    transform: scale(0.45);
    width: 222.22%;
    height: 222.22%;
  }
}
/* =========================================================
   Packs – Pack-based Trip Planning Styles
   ========================================================= */

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

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

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

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

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

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

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

/* ── Overview page ────────────────────────────────────────────────── */
.trip-show { max-width: 1200px; margin: 0 auto; }
.trip-overview { padding: 1.5rem 0 2rem; }

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

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

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

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

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

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

/* Stats inside cards */
.overview-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

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

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

/* Weight progress bar inside overview card */
.overview-weight-bar {
  margin-top: 0.5rem;
}

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

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

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

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

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

/* Hide nav on print */
@media print { .trip-sub-nav { display: none; } }

/* Planner card thumbnail (available gear + packed items) */
.planner-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  margin-bottom: 4px;
}

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

/* Make packed items flex so the thumbnail sits beside text */
.trip-gear-content {
  display: flex;
  align-items: flex-start;
}

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

/* ── Pack card on the packs index ──────────────────────────────────────
   The pack card is the trip card's sibling: same wrapper, same weight row,
   same bar. The rules below are scoped to `.pack-card-wrap` on purpose —
   application.css is required LAST, so an unscoped rule at equal
   specificity would lose to the trip-card base rules there. They mirror
   the trip card's bar treatment (#478) so the two cards read the same
   whichever lands first. */

/* Pack type on the charcoal tint, not the sunken ground: the trip card puts
   its status there, so the pack card's one badge takes the neutral tint. */
.pack-card-wrap .pack-type-tag {
  background: var(--neutral-tint);
  color: var(--text-primary);
  font-weight: 700;
  border-radius: 0;
}

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

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

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

/* The number beside the bar. Neutral while there is room; it only takes a
   colour once the bar does, and then it matches it. Sun is a background for
   dark text only, so "nearly there" reads in the on-tint ink. */
.pack-card-wrap .trip-weight-note {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

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

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

/* Forest under the limit, sun in the last tenth of it, red past it. The band
   comes from WeightBandHelper#weight_band, not from Pack#weight_status. */
.pack-card-wrap .weight-bar { background: var(--divider); }
.pack-card-wrap .weight-progress--under { background: var(--primary); }
.pack-card-wrap .weight-progress--close { background: var(--accent); }
.pack-card-wrap .weight-progress--over  { background: var(--danger); }

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

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

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

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

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

/* Alert warning */
/* Doubled class on purpose. application.css is required LAST (require_self), so
   its base `.alert` rule sits after this one at equal specificity and wins every
   property both set — which silently killed this whole modifier. `.alert.alert--warning`
   outranks it. Don't drop back to the single class. */
.alert.alert--warning {
  --alert-accent: var(--warning);

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

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

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

/* Inline quantity input */
.qty-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

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

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

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

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

/* Available gear panel header row (title + "New Gear" button) */
.available-gear-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

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

/* Edit link row at the bottom of each available gear card */
.gear-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.35rem;
}

/* Remove (left arrow) button — reuses .btn-remove base sizing */
.btn-remove {
  background: none;
  cursor: pointer;
  color: var(--text-secondary);
}

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

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

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

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

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

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

/* Left panel drag-over highlight when dragging a packed item back */
.available-gear-panel.drag-over-remove {
  outline: 2px dashed var(--primary, #4f46e5);
  outline-offset: -4px;
  background: var(--primary-light, #eef2ff);
  transition: background 0.15s;
}

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

/* Two-column side-by-side layout for the drag-drop planner */
.drag-drop-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

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

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

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

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

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

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

/* Available: thumb | name | brand | weight */
.pack-list-header--available,
.pack-list-row--available {
  grid-template-columns: 40px 3fr 2fr 80px;
}

/* Available Items (trip page): select | thumb | name | brand | category | weight | actions */
.pack-list-header--available-items,
.pack-list-row--available-items,
.pack-list-row--pack-items {
  cursor: pointer;
  user-select: none;
}

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

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

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

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

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

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

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

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

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

/* Multi-select action bar — shown only when rows are selected */
.multibar-overlay {
  position: fixed;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 100;
}

.available-items-multibar {
  width: 40rem;
  max-width: calc(100vw - 2rem);
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: auto;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--primary);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  contain: paint;
  -webkit-font-smoothing: antialiased;
  transition: opacity 0.15s ease, visibility 0.15s;
}

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

.available-items-multibar__count {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.available-items-multibar__count-num {
  font-weight: 700;
}

.available-items-multibar__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.available-items-multibar--danger {
  border-color: var(--danger, #dc2626);
}

.multibar-btn {
  padding: 0.4rem 0.875rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
}

.multibar-btn--primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary-dark);
}
.multibar-btn--primary:hover { background: var(--primary-dark); }

.multibar-btn--secondary {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--border);
}
.multibar-btn--secondary:hover { background: var(--surface-sunken); }

.multibar-btn--danger {
  background: var(--danger, #dc2626);
  color: #fff;
}
.multibar-btn--danger:hover { background: var(--danger-dark, #991b1b); }


/* Pack Items view (trips): select | thumb | name | notes | qty | weight | actions */
.pack-list-header--pack-items,
.pack-list-row--pack-items {
  grid-template-columns: 28px 40px 2fr 3fr 60px 80px 48px;
}

/* Statistics: thumb | name | brand | qty | weight | % bar */
.pack-list-header--statistics,
.pack-list-row--statistics {
  grid-template-columns: 40px 3fr 2fr 60px 80px 100px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Category sections — mirror tasks-section */
.optimize-weight-section {
  margin-bottom: 1.5rem;
}

/* Category header bar (% of total) */
.optimize-weight-section__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

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

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

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

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

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

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

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

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

.optimize-item-row__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.optimize-item-row__thumb img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.optimize-item-row__content {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0;
}

.optimize-item-row__name {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.heaviest-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--warning, #f59e0b);
  color: #fff;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.optimize-item-row__meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.optimize-item-row__weight {
  text-align: right;
  flex-shrink: 0;
  padding: 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.optimize-item-row__weight-pct {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
}

.optimize-item-row__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

/* ── Add task circle button */
.btn-add-task {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.btn-add-task:hover {
  background: var(--primary);
  color: var(--text-on-primary);
}

/* When the wrap has tasks the button signals it with a filled background */
.optimize-item-wrap--has-tasks .btn-add-task {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
}

.optimize-item-wrap--has-tasks .btn-add-task:hover {
  opacity: 0.85;
}

/* Inline task creation panel — controlled via [hidden] attribute by Stimulus */
.optimize-item-form-panel {
  padding: 0.65rem 1rem 0.8rem;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-color);
  border-left: 3px solid var(--border-color);
}

.optimize-item-form-panel[hidden] {
  display: none;
}

/* ── Weight bar under each row ─────────────────────────────────────────── */
.optimize-item-bar {
  height: 3px;
  background: var(--border-color);
  overflow: hidden;
}

.optimize-item-bar__fill {
  height: 100%;
  transition: width 0.3s ease;
}

.optimize-item-bar__fill--high   { background: #dc2626; }
.optimize-item-bar__fill--medium { background: #ea8c00; }
.optimize-item-bar__fill--low    { background: var(--primary); }

/* ── Task count badge on toggle button ─────────────────────────────────── */
.optimize-task-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--primary);
  color: var(--text-on-primary, #fff);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.optimize-task-badge--hidden { display: none; }

/* ── Task list below weight bar ─────────────────────────────────────────── */
.optimize-task-list:empty { display: none; }

.optimize-task-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem 0.3rem 0.5rem;
  border-top: 1px solid var(--border-color);
  background: var(--surface-sunken);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.optimize-task-row__hook {
  color: var(--border-color);
  font-size: 0.75rem;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 0.35rem;
  user-select: none;
}

.optimize-task-row__priority {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.optimize-task-row__priority--high   { background: #dc2626; }
.optimize-task-row__priority--medium { background: #ea8c00; }
.optimize-task-row__priority--low    { background: var(--primary); }

.optimize-task-row__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  text-decoration: none;
}

.optimize-task-row__title:hover {
  color: var(--primary);
  text-decoration: underline;
}

.optimize-task-row__complete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.7rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.optimize-task-row__complete:hover {
  border-color: var(--success, #16a34a);
  background: var(--success, #16a34a);
  color: #fff;
}

/* ── Won't-optimize skip row ────────────────────────────────────────────── */
.optimize-item-wrap--skipped {
}

.optimize-all-done-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-success-bg, #d1fae5);
  color: var(--color-success, #059669);
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.optimize-skip-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.85rem;
}

.optimize-skip-row__check {
  color: var(--success, #16a34a);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.optimize-skip-row__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.optimize-skip-row__name {
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.optimize-skip-row__note {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.optimize-skip-row__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--success, #16a34a);
  white-space: nowrap;
  flex-shrink: 0;
}

.optimize-skip-row__undo {
  flex-shrink: 0;
}

/* ── "Won't optimize" divider inside panel ──────────────────────────────── */
.optimize-skip-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.6rem 0 0.4rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.optimize-skip-divider::before,
.optimize-skip-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

/* ── Improved badge (shown after all tasks complete) ────────────────────── */
.optimize-improved-badge {
  display: none;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--success, #16a34a);
  color: #fff;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.optimize-improved-badge--show {
  display: inline;
}

/* Redirect hint shown inside the planner tab (links to dedicated page) */
.optimize-redirect-hint {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

/* ── Option C: three-section layout ────────────────────────────────────── */

.optimize-section {
  margin-bottom: 2rem;
}

.optimize-section__title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-color);
}

.optimize-section__empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 0.75rem 0;
}

/* Section 2 hidden when empty via :has() */
.optimize-section--tasks:has(.optimize-open-tasks-list:empty) {
  display: none;
}

.optimize-section__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* ── Section 1 item row (Option C) ─────────────────────────────────────── */

.optimize-item-wrap--high  { border-left: 3px solid var(--danger, #dc2626); }
.optimize-item-wrap--medium { border-left: 3px solid var(--warning, #f59e0b); }
.optimize-item-wrap--low   { border-left: 3px solid var(--border-color); }

.optimize-item-row__icon {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
}

.optimize-item-row__name-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.optimize-item-row__name-link:hover {
  text-decoration: underline;
}

.optimize-item-row__weight-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Section 2: open tasks list ─────────────────────────────────────────── */

.optimize-open-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.optimize-task-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem 0.35rem 3.25rem;
  border-top: 1px solid var(--border-color);
  background: var(--surface-sunken, var(--surface));
}

.optimize-task-inline__title {
  flex: 1;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.optimize-task-inline__title:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.optimize-open-task-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 4px);
}

.optimize-open-task-row__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 0.1rem;
}

.optimize-open-task-row__item {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.optimize-open-task-row__title {
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.optimize-open-task-row__title:hover {
  text-decoration: underline;
}

/* ── Section 3: all items (collapsible) ─────────────────────────────────── */

.optimize-section--all {
  margin-top: 0.5rem;
}

.optimize-section--all .optimize-item-row {
  border-bottom: 1px solid var(--border-color);
}

.optimize-section__summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0.85rem 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}
.optimize-section__summary::-webkit-details-marker { display: none; }
.optimize-section__summary::before {
  content: '▶';
  font-size: 0.65rem;
  transition: transform 0.15s;
}
details[open] .optimize-section__summary::before {
  transform: rotate(90deg);
}

.optimize-section__summary-count {
  font-weight: 400;
}

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

.optimize-weight-section h3 {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.75rem 0 0.25rem;
}

/* ── All-items row (Section 3) ──────────────────────────────────────────── */

.optimize-all-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.25rem;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border-color);
}

.optimize-all-row:last-child { border-bottom: none; }

.optimize-all-row--skipped {
  opacity: 0.55;
}

.optimize-all-row__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   Packs Index – Empty State & Templates
   ========================================================= */

/* The header is the shared one from application.css — a display-face title
   over a rule — with the subtitle and the button aligned to its baseline.
   The card slab it used to sit in went with the design refresh (#479). */
.packs-index .page-header {
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
}

/* Baseline-aligned only where the header is still a row: application.css
   stacks it below 768px, and an unconditional `flex-end` here outranks that
   and pushes the title to the right edge of the phone. */
@media (min-width: 769px) {
  .packs-index .page-header { align-items: flex-end; }
}

.packs-index .page-header div:first-child h1 {
  margin: 0;
}

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

.packs-index .header-actions {
  flex-shrink: 0;
}

/* Templates section (always visible) */
.templates-section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.templates-section h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0 0 0.35rem 0;
  color: var(--text-primary);
}

.templates-section > p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0 0 1.5rem 0;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.templates-view-all {
  text-align: center;
  padding: 1rem 0;
}

.templates-view-all .btn-secondary {
  display: inline-block;
}

.optimize-all-row__weight {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  font-size: 0.8rem;
  width: 50px;
  text-align: right;
  flex-shrink: 0;
}

.optimize-all-row__pct {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 0.75rem;
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

.optimize-all-row .optimize-item-bar {
  width: 60px;
  flex-shrink: 0;
}



.optimize-form-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}

.optimize-task-form-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.optimize-task-form-row:first-child { margin-top: 0; }

.optimize-task-form-row .form-control { width: auto; }

.optimize-task-title {
  flex: 1;
  min-width: 0;
}

.optimize-task-priority {
  width: 110px;
  flex-shrink: 0;
}

.optimize-task-desc {
  width: 100%;
  resize: vertical;
  font-size: 0.85rem;
}

.optimize-task-form-row .optimize-task-desc {
  width: 100%;
}

.pack-list-row.heaviest {
  background: var(--warning-light, #fffbeb);
  border-left: 3px solid var(--warning, #f59e0b);
}

/* ── Inline stat bar (statistics view) ─────────────────────────────────── */

.stat-bar-inline {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 2px;
}

.stat-bar-inline .stat-bar-fill {
  height: 100%;
  border-radius: 3px;
  min-width: 2px;
}

.pack-list-pct {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pack-list-pct small {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* ── Pack list footer (totals) ─────────────────────────────────────────── */

.pack-list-footer {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-top: 2px solid var(--border);
  font-weight: 600;
  margin-top: 0.25rem;
}

/* ── Statistics view ───────────────────────────────────────────────────── */

.pack-stats-view {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pack-stats-view h3 {
  margin-bottom: 0.5rem;
}

.pack-stat-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.pack-stat-summary {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  background: var(--surface-raised);
  user-select: none;
}

.pack-stat-summary::-webkit-details-marker { display: none; }

.pack-stat-summary::before {
  content: "\25B6";
  font-size: 0.65rem;
  color: var(--text-secondary);
  transition: transform 0.2s;
  flex-shrink: 0;
}

details[open] .pack-stat-summary::before { transform: rotate(90deg); }

.stat-cat-label {
  font-weight: 600;
  flex: 1 0 120px;
}

.stat-cat-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.stat-bar {
  flex-basis: 100%;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  background: var(--primary, #4f46e5);
  border-radius: 4px;
  transition: width 0.3s ease;
  min-width: 2px;
}

.pack-stat-items {
  padding: 0.5rem 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pack-stat-item-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.9rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--border);
}

.pack-stat-item-row:last-child { border-bottom: none; }

.pack-stat-total {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-top: 2px solid var(--border);
  font-weight: 600;
  margin-top: 0.25rem;
}

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

@media (max-width: 640px) {
  .pack-list-header,
  .pack-list-row {
    grid-template-columns: 36px 1fr 60px;
  }

  .pack-list-brand,
  .pack-list-qty,
  .pack-list-pct,
  .pack-list-notes { display: none; }

  .pack-list-header--available,
  .pack-list-row--available {
    grid-template-columns: 36px 1fr 60px;
  }

  .pack-list-header--pack-items,
  .pack-list-row--pack-items {
    grid-template-columns: 36px 1fr 60px;
  }

  .pack-list-header--optimize,
  .pack-list-row--optimize {
    grid-template-columns: 36px 1fr 60px 60px;
  }

  .pack-list-header--statistics,
  .pack-list-row--statistics {
    grid-template-columns: 36px 1fr 60px;
  }
}

/* =============================================================
   Pack subtitle line

   `.trip-meta` is the pack type / transport / limit line under the
   title on packs#show and packs#optimize. It shared one definition
   with the trip-report byline in home.css until #477 moved the blog
   styles out; the article side now has its own `.article-meta`, so
   this is the only caller left and the rule lives beside it.
   ============================================================= */
.trip-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--success);
}
/* =========================================================
   Pack Templates – Gallery & Detail Styles
   ========================================================= */

.pack-templates-index .page-subtitle,
.pack-template-show .page-subtitle {
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.pack-template-show .page-header {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  margin-bottom: 2rem;
  overflow: hidden;
}

.pack-template-show .page-header .header-content {
  display: block;
  padding: 2rem;
  position: relative;
}

.pack-template-show .page-header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  padding-right: 10rem;
}

.header-title-section {
  width: 100%;
}

.pack-template-show .page-header .button_to {
  position: absolute;
  top: 2rem;
  right: 2rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.header-clone-btn {
  width: auto;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  white-space: nowrap;
}

.back-link {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.back-link:hover {
  text-decoration: underline;
}

.pack-template-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: start;
}

.pack-template-gear-list {
  background: transparent;
  border: none;
  padding: 0;
}

.pack-template-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

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

.section-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.item-count {
  background: var(--primary-light);
  color: var(--primary);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.gear-items-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.gear-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.gear-item:hover {
  background: var(--surface-sunken);
}

.gear-item:last-child {
  border-bottom: none;
}

.gear-item-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.gear-item-info {
  flex: 1;
}

.gear-name {
  color: var(--text-primary);
  font-weight: 500;
}

.quantity {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-left: 0.3rem;
}

.gear-weight {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  min-width: 70px;
  text-align: right;
}

/* Other Templates Sidebar */
.other-templates-sidebar {
  background: transparent;
  border: none;
  padding: 0;
}

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

.other-templates-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.other-templates-list .trip-card-wrap {
  flex: 1;
}

@media (max-width: 768px) {
  .pack-template-detail-grid {
    grid-template-columns: 1fr;
  }
  
  .pack-template-show .page-header .header-content {
    padding: 1.5rem;
  }

  .pack-template-show .page-header h1 {
    font-size: 1.5rem;
    padding-right: 0;
  }

  .pack-template-show .page-header .button_to {
    position: static;
    margin-top: 1rem;
  }

  .header-clone-btn {
    width: 100%;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   Hero Graphics – themed gradient banners per pack type
   ========================================================= */

.template-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-repeat: repeat-x;
  background-position: bottom;
}

.template-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpolygon points='0,60 22,28 42,48 66,15 92,42 118,20 146,46 172,24 200,44 200,60' fill='white' fill-opacity='0.16'/%3E%3Cpolygon points='0,60 30,42 58,55 90,34 124,52 156,36 200,54 200,60' fill='white' fill-opacity='0.12'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 200px 60px;
  pointer-events: none;
}

.template-hero__icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.template-hero__icon svg {
  width: 58%;
  height: 58%;
  color: #fff;
}

.template-sidebar-name svg {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.15em;
  margin-right: 0.3rem;
}

.pack-type-icon-cell svg {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

.template-hero--card {
  height: 110px;
}

.template-hero--card .template-hero__icon {
  width: 56px;
  height: 56px;
  font-size: 1.75rem;
}

.template-hero--banner {
  height: 180px;
}

.template-hero--banner .template-hero__icon {
  width: 88px;
  height: 88px;
  font-size: 2.75rem;
}

/* Theme palettes */
.template-hero--sunrise { background: linear-gradient(135deg, #fde68a 0%, #fb923c 55%, #f97316 100%); }
.template-hero--forest  { background: linear-gradient(135deg, #6ee7b7 0%, #059669 55%, #065f46 100%); }
.template-hero--trail   { background: linear-gradient(135deg, #93c5fd 0%, #3b82f6 55%, #1d4ed8 100%); }
.template-hero--summit  { background: linear-gradient(135deg, #c4b5fd 0%, #7c3aed 55%, #4c1d95 100%); }
.template-hero--slate   { background: linear-gradient(135deg, #cbd5e1 0%, #64748b 55%, #334155 100%); }

@media (max-width: 768px) {
  .template-hero--banner {
    height: 130px;
  }

  .template-hero--banner .template-hero__icon {
    width: 64px;
    height: 64px;
    font-size: 2rem;
  }
}

/* Missing-gear check (#280) — scoped: application.css never sets
   flex-direction on .header-actions, so an unscoped `column` here leaked past
   require_self onto every page's header actions. */
.pack-template-show .header-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
}

.template-compare-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.template-compare-form__label {
  font-size: 0.875rem;
  font-weight: 600;
}

.template-compare-form__select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 16rem;
}

.pack-template-compare .compare-weight {
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.pack-template-compare .compare-weight--under  { border-left-color: #3b82f6; }
.pack-template-compare .compare-weight--within { border-left-color: #059669; }
.pack-template-compare .compare-weight--over   { border-left-color: #f97316; }

.pack-template-compare .compare-weight__verdict {
  font-weight: 600;
}

.pack-template-compare .compare-empty {
  color: var(--text-muted);
  padding: 0.75rem 0;
}

@media (max-width: 768px) {
  .pack-template-show .header-actions {
    align-items: stretch;
  }
}
/* =====================================================================
   Tasks — Task Planner styles
   ===================================================================== */

/* Index layout */
.tasks-index {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-lg);
}

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

/* Baseline-aligned only where the header is still a row: application.css
   stacks it below 768px, and an unconditional `flex-end` here outranks that
   and pushes the title to the right edge of the phone. */
@media (min-width: 769px) {
  .tasks-index .page-header { align-items: flex-end; }
}

.tasks-index .page-header__text {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
}

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

/* Overdue badge in header — the one red label on the page, and square like
   every other chip on the brand palette. White on the semantic red clears AA. */
.tasks-overdue-badge {
  display: inline-block;
  background: var(--danger);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  border-radius: 0;
  vertical-align: middle;
}

/* Filter bar */
.tasks-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.tasks-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Status chips. The active one is the only forest fill in the toolbar, and
   it is always the status the rows below were filtered by — the controller
   normalises the param so the two cannot disagree. */
.btn-filter {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-filter:hover {
  color: var(--text-primary);
  border-color: var(--border-sunken);
  text-decoration: none;
}

.btn-filter.active {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary-dark);
}

.btn-filter--type {
  border-style: dashed;
}

.btn-filter--type.active {
  border-style: solid;
}

/* Task list */
.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Task row */
.task-row {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.task-row:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.task-row--completed {
  opacity: 0.65;
}

.task-row--overdue {
  border-left: 3px solid var(--danger);
}

/* Priority stripe */
.task-row__priority {
  width: 4px;
  flex-shrink: 0;
}

.task-priority--high   { background: var(--danger); }
.task-priority--medium { background: var(--accent); }
.task-priority--low    { background: var(--primary); }

/* Row body */
.task-row__body {
  flex: 1;
  padding: 0.75rem 1rem;
  min-width: 0;
}

.task-row__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.task-row__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}

.task-row__title a {
  color: var(--text-primary);
  text-decoration: none;
}

.task-row__title a:hover {
  text-decoration: underline;
}

.task-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--secondary);
}

.task-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.task-meta-item a {
  color: var(--secondary);
}

/* Row actions */
.task-row__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.75rem;
  flex-shrink: 0;
}

/* Badges */
.task-type-badge,
.task-status-badge,
.task-priority-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* The type is a neutral outlined chip, one look for every type: priority
   is the stripe and status is the filled badge, so the type carries no
   colour of its own. */
.task-type-badge {
  background: var(--surface-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-weight: 600;
}

/* Status keeps the badge. Pending and cancelled sit on the sunken ground,
   where muted ink loses AA — they take the darker step. In progress is the
   one sun tint on the page, and it reads in the on-tint ink, never white. */
.task-status--pending     { background: var(--surface-sunken); color: var(--text-muted-on-sunken); }
.task-status--in_progress { background: var(--accent-tint); color: var(--accent-text); }
.task-status--completed   { background: var(--primary-light); color: var(--primary-dark); }
.task-status--cancelled   { background: var(--surface-sunken); color: var(--text-muted-on-sunken); }

.task-overdue-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--danger);
}

/* Detail page */
.task-detail {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.task-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.task-detail__content {
  margin-top: var(--space-lg);
}

.task-detail__section {
  margin-bottom: var(--space-lg);
}

.task-detail__section h2 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.task-detail__meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.task-meta-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
}

.task-meta-label {
  min-width: 9rem;
  font-size: 0.85rem;
  color: var(--secondary);
  font-weight: 500;
}

.task-meta-value {
  font-size: 0.9rem;
}

.task-meta-value a {
  color: var(--primary);
}

.task-detail__back {
  margin-top: var(--space-xl, 2rem);
}

/* Page header actions */
.page-header__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

/* ── Trip Tasks Section (embedded in trip show / edit) ── */
.trip-tasks-section {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  background: var(--surface);
}

.trip-tasks-section--form {
  background: var(--surface-sunken);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-top: 0;
}

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

.trip-tasks-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.trip-tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.trip-tasks-header h2 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0;
}

.trip-tasks-header__link {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: color 0.15s, border-color 0.15s;
}

.trip-tasks-header__link:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
  text-decoration: none;
}

.tasks-list--compact .task-row {
  border-radius: var(--radius-sm);
}

.tasks-list--compact .task-row__title {
  font-size: 0.9rem;
}

.empty-state--inline {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ── Trip Task Cards (tasks index grouped view) ── */
.trip-task-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.trip-task-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.trip-task-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-alt, var(--surface));
}

.trip-task-card__title-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.trip-task-card__name {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trip-task-card__name a {
  color: inherit;
  text-decoration: none;
}

.trip-task-card__name a:hover {
  text-decoration: underline;
}

.trip-task-card__date {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Sun is a background for dark text only — white on it is 2.81:1. */
.trip-task-card__count {
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: 999px;
  min-width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.4rem;
  flex-shrink: 0;
}

.trip-task-card__list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  flex: 1;
}

.trip-task-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
}

.trip-task-item + .trip-task-item {
  border-top: 1px solid var(--border-color);
}

.trip-task-item--overdue .trip-task-item__title {
  color: var(--danger);
}

.trip-task-check {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  transition: color 0.15s;
}

.trip-task-check:hover {
  color: var(--primary);
}

.trip-task-check svg {
  width: 1rem;
  height: 1rem;
}

/* button_to wraps in a <form> — strip default form margins */
.trip-task-item form {
  display: contents;
}

.trip-task-item__title {
  font-size: 0.85rem;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.trip-task-card__footer {
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border-color);
}

.trip-task-card__add-link {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
}

.trip-task-card__add-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* ── Mini task list embedded in trip index cards ────────────────────────── */
.trip-card-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-color);
}

/* When inside a gear card the list sits flush — match card background */
.gear-card-tasks {
  background: var(--surface-sunken);
  margin-top: auto;
}

.trip-card-task-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.trip-card-task-item:last-child {
  border-bottom: none;
}

.trip-card-task-item--overdue .trip-card-task-item__title {
  color: var(--danger);
}

/* button_to wraps in <form> — strip default margins */
.trip-card-task-item form {
  display: contents;
}

.trip-card-task-item__title {
  font-size: 0.8rem;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trip-card-task-item__edit {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.1s;
}

.trip-card-task-item:hover .trip-card-task-item__edit {
  opacity: 1;
}

/* Form variant — flush with section container, no extra card border */
.trip-card-tasks--form {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

/* Empty state inside the list */
.trip-card-tasks-empty {
  color: var(--text-muted);
  font-style: italic;
}

/* ── Quick-add inline row ─────────────────────────────────────────── */
.trip-quick-add-row {
  border-top: 1px solid var(--border-color);
  padding: 0;
}

.trip-quick-add-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  width: 100%;
}

.trip-quick-add-input {
  flex: 1;
  border: none;
  background: none;
  font-size: 0.8rem;
  color: var(--text-primary);
  outline: none;
  padding: 0.1rem 0;
  min-width: 0;
}

.trip-quick-add-input::placeholder {
  color: var(--text-muted);
}

.trip-quick-add-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  padding: 0.1rem;
  border-radius: 50%;
  transition: color 0.15s;
  flex-shrink: 0;
}

.trip-quick-add-btn:hover {
  color: var(--primary);
}

.trip-quick-add-btn svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* ── Microsoft To Do integration banner ─────────────────────────────────── */

/* A white card with the charcoal rule the design gives integrations; the
   check icon sits in a forest tint tile and inherits currentColor. */
.ms-todo-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--surface-dark);
  border-radius: 0;
  padding: 0.9rem 1.25rem;
  margin-bottom: var(--space-lg);
  box-shadow: 0 4px 8px rgba(41, 46, 51, 0.05), 0 1px 3px rgba(41, 46, 51, 0.04);
}

.ms-todo-banner__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--primary-light);
  color: var(--primary-dark);
}

.ms-todo-banner__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.ms-todo-banner__body strong {
  font-size: 0.9rem;
  color: var(--text-primary);
}

.ms-todo-banner__sub {
  font-size: 0.78rem;
  color: var(--secondary);
}

.ms-todo-banner__action {
  flex-shrink: 0;
}

/* ── Tasks index — status tabs ─────────────────────────────────────── */
.tasks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tasks-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tasks-priority-legend {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.tasks-priority-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* The legend swatches match the row stripes exactly. */
.tasks-priority-legend__dot {
  width: 9px;
  height: 9px;
  border-radius: 0;
  flex-shrink: 0;
}

.tasks-priority-legend__dot--high   { background: var(--danger); }
.tasks-priority-legend__dot--medium { background: var(--accent); }
.tasks-priority-legend__dot--low    { background: var(--primary); }

/* ── Tasks index — 3-section layout ───────────────────────────────── */
.tasks-sections {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tasks-section {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.tasks-section__header {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.25rem;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-color);
}

.tasks-section__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tasks-section__title h2 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0;
}

.tasks-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 0;
}

.tasks-section__add {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: color 0.15s;
}

.tasks-section__add:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.tasks-section__list {
  /* rows stack with their own bottom borders */
}

.tasks-section__empty {
  padding: 0.9rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

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

.task-item-row:last-child {
  border-bottom: none;
}

.task-item-row:hover {
  background: var(--surface-sunken);
}

/* Priority is the 4px stripe on the row, in the same three colours as the
   legend: red high, sun medium, forest low. Status stays the badge. */
.task-item-row--high   { border-left-color: var(--danger); }
.task-item-row--medium { border-left-color: var(--accent); }
.task-item-row--low    { border-left-color: var(--primary); }

/* Dim completed / cancelled rows */
.task-item-row--completed { opacity: 0.6; }
.task-item-row--cancelled { opacity: 0.45; }

.task-item-row--completed .task-item-row__title { text-decoration: line-through; }

/* An overdue row also takes a red border. The rows are stacked inside the
   section card, so it is drawn as an inset ring that does not move the
   neighbours; the stripe keeps the row's own priority colour. */
.task-item-row--overdue {
  box-shadow: inset 0 0 0 1px var(--danger);
}
.task-item-row--overdue .task-item-row__title { color: var(--danger); }

/* Complete circle button */
.task-item-row__check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.35rem 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s;
}

.task-item-row__check:hover { color: var(--primary); }

/* button_to wraps in <form> — strip default margins */
.task-item-row__check form { display: contents; }

.task-item-row__check svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* Content — title + meta */
.task-item-row__content {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0;
}

.task-item-row__title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.task-item-row__title:hover { text-decoration: underline; }

.task-item-row__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.1rem;
}

.task-meta-link {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
}

.task-meta-link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

/* Due date */
.task-item-row__due {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.task-item-row__due--overdue {
  color: var(--danger);
  font-weight: 600;
}

/* Row actions — revealed on hover */
.task-item-row__actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s;
}

.task-item-row:hover .task-item-row__actions { opacity: 1; }

.task-item-row__action-btn {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
  white-space: nowrap;
}

.task-item-row__action-btn:hover {
  color: var(--text-primary);
  background: var(--border-color);
  text-decoration: none;
}

/* button_to wraps in <form> — strip default margins */
.task-item-row__actions form { display: contents; }

.task-item-row__action-btn--danger:hover {
  color: var(--danger);
  background: var(--danger-light, #fee2e2);
}
/* =====================================================================
   Gear Categories — index styles
   ===================================================================== */

.gear-categories-index {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* ── Category row (mirrors .task-item-row) ──────────────────────────── */
.gear-cat-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border-color);
  padding: 0.6rem 0.5rem 0.6rem 1.25rem;
  transition: background 0.1s;
  min-width: 0;
}

.gear-cat-row:last-child {
  border-bottom: none;
}

.gear-cat-row:hover {
  background: var(--surface-sunken);
}

/* Icon */
.gear-cat-row__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
  line-height: 1;
}

/* Name + description */
.gear-cat-row__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.gear-cat-row__name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gear-cat-row__desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Gear item count */
.gear-cat-row__count {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Reveal actions on hover (reuses .task-item-row__actions) */
.gear-cat-row .task-item-row__actions {
  opacity: 0;
  transition: opacity 0.12s;
}

.gear-cat-row:hover .task-item-row__actions {
  opacity: 1;
}

/* button_to wraps in <form> — strip default margins */
.gear-cat-row .task-item-row__actions form {
  display: contents;
}
/* =========================================================
   Trips — feature-specific styles

   Mobile overrides are grouped in the Mobile section below.
   Do NOT write a nested "slash-star" comment in this header: CSS comments do
   not nest, so the first close terminates the whole block and the parser then
   discards the rules that follow it. That is what hid the base rules for the
   planner's mobile panel switcher and floating add bar — they were dropped
   from the bundle entirely, so the switcher showed at desktop width.
   ========================================================= */

/* ---------------------------------------------------------
   Mobile planner panel tab switcher
   Two tabs: Gear | Trip Pack — visible only on mobile
   --------------------------------------------------------- */
.planner-mobile-tabs {
  display: none;
}

.planner-mobile-tab {
  flex: 1;
  padding: 0.7rem 1rem;
  border: none;
  background: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  font-family: inherit;
  min-height: 44px;
}

.planner-mobile-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.planner-mobile-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 99px;
  background: var(--primary);
  color: var(--text-on-primary);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0 4px;
  margin-left: 5px;
  vertical-align: middle;
}

/* Floating add-to-pack bar — mobile only, shown when gear is selected */
.planner-mobile-add-bar {
  display: none;
}

/* =============================================================
   Mobile — Trips

   Selectors below are deliberately doubled (`.trip-card.trip-card`).
   application.css is required LAST in the manifest (`*= require_self`), so its
   base rules land after everything in this file. At equal specificity the later
   rule wins, and a media query does not change that — which silently killed
   this entire block. Doubling lifts these to (0,2,0) so they outrank the base.

   Don't collapse them back to a single class. Any NEW rule added here whose
   selector also exists in application.css needs the same treatment.
   ============================================================= */

@media (max-width: 768px) {

  /* ---------------------------------------------------------
     Index: filter tabs horizontally scrollable
     --------------------------------------------------------- */
  .trips-index .article-filters {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 0.4rem;
    margin: 1.25rem 0;
  }

  .trips-index .article-filters::-webkit-scrollbar { display: none; }

  .trips-index .filter-tab {
    padding: 0.55rem 1rem;
    white-space: nowrap;
    font-size: 0.875rem;
    flex-shrink: 0;
  }

  /* Section heading: smaller */
  .trips-section h2 {
    font-size: 0.7rem;
    margin: 0 0 0.875rem;
  }

  /* Grid: tighter gap */
  .trips-grid.trips-grid {
    gap: 1rem;
  }

  /* ---------------------------------------------------------
     Trip card: compact / denser layout on mobile
     --------------------------------------------------------- */
  .trip-card-wrap.trip-card-wrap {
    border-radius: 8px;
  }

  .trip-card.trip-card {
    padding: 0.85rem 1rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
  }

  .trip-card__title.trip-card__title {
    font-size: 1rem;
    margin: 0;
    flex: 1;
    min-width: 0;
    order: 1;
  }

  .trip-weight-row.trip-weight-row {
    order: 1;
    margin-top: 0;
    padding-top: 0;
    font-size: 0.82rem;
    flex-shrink: 0;
  }

  .trip-card__meta.trip-card__meta {
    order: 2;
    margin-bottom: 0;
    width: 100%;
    padding-top: 0.25rem;
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .trip-card__excerpt.trip-card__excerpt {
    font-size: 0.8rem;
    margin: 0;
    order: 3;
    width: 100%;
    color: var(--text-muted);
  }

  .weight-bar.weight-bar {
    width: 100%;
    order: 4;
    margin-top: 0.35rem;
  }

  .trip-card__tags.trip-card__tags {
    order: 5;
    margin-top: 0.3rem;
    gap: 0.3rem;
  }

  .tag.tag {
    font-size: 0.73rem;
    padding: 0.15rem 0.45rem;
  }

  .trip-card-edit-btn.trip-card-edit-btn {
    padding: 0.45rem 0.75rem;
    font-size: 0.78rem;
    min-height: 44px;
  }

  /* Task list on trip card: compact */
  .trip-card-tasks {
    margin: 0;
    padding: 0.5rem 0.75rem;
  }

  /* ---------------------------------------------------------
     Trip detail: inner tab nav (Overview, Planner, etc.)
     horizontally scrollable on mobile
     --------------------------------------------------------- */
  .trip-show .article-filters {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 0;
    margin: 1.25rem 0;
  }

  .trip-show .article-filters::-webkit-scrollbar { display: none; }

  .trip-show .filter-tab {
    padding: 0.6rem 0.875rem;
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Trip page header: condense stats */
  .trip-stat-badge.trip-stat-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
  }

  /* ---------------------------------------------------------
     Mobile planner: panel tab switcher
     Shows one panel at a time (Gear or Pack)
     --------------------------------------------------------- */
  .planner-mobile-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    background: var(--surface);
  }

  /* Columns: single column, panel visibility toggled by JS */
  .planner-columns.planner-columns {
    grid-template-columns: 1fr;
  }

  .planner-col-divider.planner-col-divider {
    display: none;
  }

  /* Default: show gear, hide pack */
  .planner-columns[data-active-panel="gear"] .planner-col--gear,
  .planner-columns:not([data-active-panel]) .planner-col--gear {
    display: flex;
  }

  .planner-columns[data-active-panel="gear"] .planner-col--pack,
  .planner-columns:not([data-active-panel]) .planner-col--pack {
    display: none;
  }

  /* Pack panel active */
  .planner-columns[data-active-panel="pack"] .planner-col--pack {
    display: flex;
  }

  .planner-columns[data-active-panel="pack"] .planner-col--gear {
    display: none;
  }

  /* Full height for active panel */
  .planner-col--gear.planner-col--gear,
  .planner-col--pack.planner-col--pack {
    max-height: calc(100dvh - 220px);
    border-bottom: none;
  }

  /* Floating add-to-pack bar (sticky bottom of planner-box) */
  .planner-mobile-add-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    background: var(--primary);
    color: var(--text-on-primary);
    font-weight: 600;
    font-size: 0.9rem;
    border-top: 2px solid var(--primary-dark);
    transform: translateY(100%);
    transition: transform 0.22s ease;
    pointer-events: none;
    position: sticky;
    bottom: 0;
    z-index: 10;
  }

  .planner-mobile-add-bar.visible {
    transform: translateY(0);
    pointer-events: auto;
  }

  .planner-mobile-add-bar__label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .planner-mobile-add-bar__btn {
    background: var(--surface);
    color: var(--primary-dark);
    border: none;
    border-radius: var(--radius);
    padding: 0.4rem 0.875rem;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    min-height: 36px;
    font-family: inherit;
    flex-shrink: 0;
  }

  /* Planner tab bar: compact on mobile */
  .planner-tab-bar {
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem 0.5rem;
  }

  .planner-tab-bar-search {
    width: 90px;
    flex-shrink: 0;
  }

  /* Category chip arrows: smaller */
  .cat-nav-arrow.cat-nav-arrow {
    width: 22px;
    height: 22px;
    font-size: 1rem;
  }

  /* Gear items: full-width single column on mobile */
  .gear-items.gear-items {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .trip-card.trip-card {
    padding: 0.75rem 0.875rem;
  }

  .trip-card__title.trip-card__title {
    font-size: 0.95rem;
  }

  .planner-mobile-tab {
    font-size: 0.85rem;
    padding: 0.6rem 0.5rem;
  }
}

/* ── Trip Review Wizard ───────────────────────────────────────────────────── */

.review-wizard {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

.review-wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.review-wizard-header__back {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-decoration: none;
  flex-shrink: 0;
}

.review-wizard-header__back:hover {
  color: var(--primary);
}

.review-wizard-header__subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Progress dots */
.review-wizard-dots {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 1.5rem;
}

.review-wizard-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
  transition: background 0.2s, transform 0.2s;
}

.review-wizard-dot--active {
  background: var(--primary);
  transform: scale(1.3);
}

/* Step heading */
.review-wizard-step__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--text-primary);
}

.review-wizard-step__count {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-left: 0.25rem;
}

/* Gear item card */
.review-item-card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.review-item-card__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
}

.review-item-card__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}

.review-item-card__info {
  flex: 1;
  min-width: 0;
}

.review-item-card__name {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-item-card__meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.review-item-card__weight {
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.review-item-card__status-badges {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
}

.review-item-card--summary .review-item-card__header {
  flex-wrap: wrap;
}

.review-item-card__note-text {
  padding: 0.375rem 1rem 0.625rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-color);
}

/* Toggle pill buttons */
.review-item-card__controls {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border-color);
  background: var(--surface-sunken);
}

.review-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  border: 1.5px solid var(--border-color);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}

.review-toggle-btn:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.review-toggle-btn__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.review-toggle-btn--used:has(.review-toggle-btn__input:checked) {
  background: var(--success-light);
  border-color: var(--success);
  color: var(--success);
}

.review-toggle-btn--repair:has(.review-toggle-btn__input:checked) {
  background: #fef3c7;
  border-color: #d97706;
  color: #92400e;
}

/* Notes input below card controls */
.review-item-card__notes {
  display: block;
  width: 100%;
  border: none;
  border-top: 1px solid var(--border-color);
  border-radius: 0;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  background: var(--surface);
  color: var(--text-primary);
  outline: none;
}

.review-item-card__notes:focus {
  background: #fafafa;
  box-shadow: inset 0 0 0 2px var(--primary-light);
}

/* Wrap-up notes */
.review-notes-group {
  margin-bottom: 1.25rem;
}

.review-notes-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
}

.review-notes-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
  white-space: pre-wrap;
}

/* Actions (complete/skip) */
.review-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--border-color);
  margin-top: 0.5rem;
}

/* Wizard footer navigation */
.review-wizard-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  padding-top: 1.5rem;
  margin-top: 0.5rem;
}

.review-wizard-footer__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.review-wizard-footer__skip {
  display: flex;
  justify-content: center;
}

.review-wizard-footer__skip-btn {
  opacity: 0.88;
}

.is-visually-hidden {
  display: none !important;
}

.review-wizard-completed-at {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}

/* ── Completion info box (review show, completed state) ───────────────────── */

.review-completion-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.review-completion-box__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.review-completion-box__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.review-completion-box__date {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.review-completion-box__links {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ── Save-as-pack inline form ──────────────────────────────────────────────── */

.input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.input-row .form-control {
  flex: 1;
  min-width: 0;
}

/* ── Review Summary card (trip show, reviewed status) ──────────────────────── */

.review-summary-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

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

.review-summary-card__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.review-summary-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.review-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.review-summary-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.review-summary-stat__label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.review-summary-stat--warn .review-summary-stat__value  { color: var(--warning, #d97706); }
.review-summary-stat--alert .review-summary-stat__value { color: var(--danger, #dc2626); }

/* ── Unused items card ──────────────────────────────────────────────────────── */

.review-unused-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.review-unused-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border-color);
}

.review-unused-item:last-child {
  border-bottom: none;
}

.review-unused-item__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
}

.review-unused-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.review-unused-item__name {
  font-weight: 600;
  font-size: 0.925rem;
  color: var(--text-primary);
}

.review-unused-item__meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.review-unused-item__note {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-style: italic;
  flex-shrink: 0;
  max-width: 40%;
  text-align: right;
}

/* ── Reviewed pack items list ───────────────────────────────────────────────── */

.reviewed-pack-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.reviewed-pack-list__header,
.reviewed-pack-list__row {
  display: grid;
  grid-template-columns: 1fr 80px 60px 140px 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 1rem;
}

.reviewed-pack-list__header {
  background: var(--bg-subtle);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.reviewed-pack-list__row {
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.reviewed-pack-list__row:last-child { border-bottom: none; }

.reviewed-pack-list__row--flagged {
  background: color-mix(in srgb, var(--color-warning, #f59e0b) 8%, transparent);
}

.reviewed-pack-list__icon {
  margin-right: 0.35rem;
}

.reviewed-pack-list__brand {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-left: 0.35rem;
}

.reviewed-pack-list__col--weight,
.reviewed-pack-list__col--used,
.reviewed-pack-list__col--repair { text-align: center; }

.reviewed-pack-list__col--notes {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}

@media (max-width: 768px) {
  .reviewed-pack-list__header,
  .reviewed-pack-list__row {
    grid-template-columns: 1fr 70px 50px;
  }

  .reviewed-pack-list__col--repair,
  .reviewed-pack-list__col--notes { display: none; }
}

/* ---------------------------------------------------------
   Reviewed Trip Card (index page)
   --------------------------------------------------------- */

.trip-card-wrap--reviewed {
  border: 1px solid var(--border);
  /* application.css declares .trip-card-wrap { background: var(--surface) } and
     is required last, so at equal specificity the card ships white. Kept as the
     stated intent for the day this file wins; do not read it as the rendered
     ground. */
  background: var(--surface-sunken);
}

.trip-card--reviewed {
  --review-card-inset: 1rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-height: auto;
  width: 100%;
}

.trip-card--reviewed .trip-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 0;
  order: 1;
  gap: 0.4rem 0.65rem;
}

.trip-card--reviewed .trip-card__title {
  order: 2;
  font-size: 1.1rem;
  font-weight: 600;
}

.trip-card--reviewed .trip-card__excerpt {
  order: 3;
  width: 100%;
}

.trip-status-badge {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.trip-status-reviewed {
  background: var(--primary-light);
  color: var(--primary-dark);
}

/* ---------------------------------------------------------
   Reviewed Trip Card — header, sections, items, footer
   --------------------------------------------------------- */

.trip-card--reviewed {
  padding: 0;
  gap: 0;
}

.trip-card-reviewed__header {
  width: 100%;
  padding: 0.95rem var(--review-card-inset) 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-bottom: 1px solid var(--border);
}

.trip-card__title-link {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}

.trip-card__title-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

.trip-card-review-date {
  font-size: 0.74rem;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.16rem 0.45rem;
}

.trip-card-review-stats {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  padding: 0.75rem var(--review-card-inset);
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
}

.trip-card-review-stat {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 58px;
  padding: 0.58rem 0.35rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.trip-card-review-stat:first-child {
  border-left: 1px solid var(--border);
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.trip-card-review-stat + .trip-card-review-stat {
  border-left: 1px solid var(--border);
}

.trip-card-review-stat:last-child {
  border-right: 1px solid var(--border);
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.trip-card-review-stat .stat-value {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.trip-card-review-stat .stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
}

.trip-card-review-stat--ok {
  border-top-color: var(--primary);
}

.trip-card-review-stat--ok .stat-value {
  color: var(--primary-dark);
}

.trip-card-review-stat--warn {
  border-top-color: var(--accent);
}

.trip-card-review-stat--warn .stat-value {
  color: var(--accent-text);
}

.trip-card-review-stat--alert {
  border-top-color: var(--danger);
}

.trip-card-review-stat--alert .stat-value {
  color: var(--danger);
}

.trip-card-reviewed__section {
  width: 100%;
  padding: 0.75rem var(--review-card-inset);
  border-bottom: 1px solid var(--border);
}

.trip-card-reviewed__section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.trip-card-reviewed__section-label--warn {
  color: var(--accent-text);
}

.trip-card-reviewed__section-label--alert {
  color: var(--danger);
}

.trip-card-reviewed__item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.trip-card-reviewed__item,
.trip-card-reviewed__task {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  line-height: 1.35;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.trip-card-reviewed__item-icon,
.trip-card-reviewed__task-icon {
  flex-shrink: 0;
  font-size: 0.85rem;
  width: 1.4em;
  text-align: center;
}

.trip-card-reviewed__item-name {
  font-weight: 500;
  color: var(--text-primary);
}

.trip-card-reviewed__item-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

.trip-card-reviewed__item-note::before {
  content: '— ';
}

.trip-card-reviewed__task-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
}

.trip-card-reviewed__task-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

.trip-card-review-notes {
  width: 100%;
  padding: 0.75rem var(--review-card-inset);
  border-bottom: 1px solid var(--border);
}

.trip-card-review-notes--compact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.trip-card-review-notes__entry {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--accent-tint);
  border-left: 4px solid var(--accent);
  border-radius: 0.45rem;
  background: var(--accent-tint);
  box-shadow: 0 1px 0 rgba(41, 46, 51, 0.04);
}

.trip-card-review-notes--compact .trip-card-review-notes__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Sun is a background for dark text only — this is the ink that goes on it. */
  color: var(--accent-text);
  font-weight: 700;
}

.trip-card-review-notes--compact .trip-card-review-notes__text {
  font-size: 0.81rem;
  line-height: 1.4;
  margin: 0;
  color: var(--text-secondary);
}

.trip-card-review-notes__pin {
  font-size: 0.75rem;
  line-height: 1;
}

.trip-card-reviewed__footer {
  padding: 0.65rem 1.25rem;
  display: flex;
  justify-content: flex-end;
}

.trip-card-reviewed__footer-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.trip-card-reviewed__footer-link:hover {
  text-decoration: underline;
}



/* =========================================================
   Trip itinerary — stage table with inline day rows (#493)

   Cell overrides double up the .itinerary-table.data-table prefix on purpose:
   application.css is required *last* (require_self), so its .data-table td and
   .data-table tr:hover td rules would otherwise win on equal specificity.
   ========================================================= */

.itinerary-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.itinerary-toolbar__summary {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.itinerary-summary__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.itinerary-summary__value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.itinerary-frozen-notice {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 0.86rem;
}

/* The stage table is wide by nature. It scrolls inside its own box so the page
   body never scrolls sideways. */
.itinerary-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.itinerary-table {
  min-width: 62rem;
  font-size: 0.86rem;
}

.itinerary-table.data-table th,
.itinerary-table.data-table td {
  padding: 0.55rem 0.7rem;
  vertical-align: top;
}

.itinerary-col--day    { width: 5.5rem; }
.itinerary-col--date   { width: 6rem; white-space: nowrap; }
.itinerary-col--num    { width: 4.5rem; text-align: right; white-space: nowrap; }
.itinerary-col--actions { width: 12rem; }

.itinerary-table.data-table td.itinerary-col--num,
.itinerary-table.data-table th.itinerary-col--num { text-align: right; }

.itinerary-day-number {
  font-weight: 700;
  font-size: 0.95rem;
}

.itinerary-badge {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.itinerary-badge--resupply {
  background: var(--warning-light);
  color: var(--warning);
}

/* A resupply day opens a new food segment, so it reads as a band edge. Both
   states are spelled out because .data-table tr:hover td repaints the row. */
.itinerary-table.data-table .itinerary-row--resupply td,
.itinerary-table.data-table .itinerary-row--resupply:hover td {
  background: var(--warning-light);
}

.itinerary-table.data-table .itinerary-segment-row td,
.itinerary-table.data-table .itinerary-segment-row:hover td {
  background: var(--surface-sunken);
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.itinerary-elevation span { margin-right: 0.35rem; }

.itinerary-accommodation__name { display: block; font-weight: 600; }

.itinerary-accommodation__type,
.itinerary-accommodation__contact,
.itinerary-accommodation__ref,
.itinerary-resupply-note {
  display: block;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.itinerary-accommodation__link {
  font-size: 0.76rem;
  color: var(--primary);
}

.itinerary-notes { max-width: 16rem; }

.itinerary-col--actions form { display: inline-block; margin: 0; }

.itinerary-col--actions > a,
.itinerary-col--actions > form { margin: 0 0.15rem 0.15rem 0; }

/* ── Inline edit panel ─────────────────────────────────────
   One full-width cell rather than a cell per field: a <form> dropped straight
   into a <tbody> gets foster-parented out of the table by the HTML parser. */
.itinerary-table.data-table .itinerary-edit-row td,
.itinerary-table.data-table .itinerary-edit-row:hover td {
  background: var(--surface-raised);
  padding: 0.85rem 1rem;
}

.itinerary-form__errors {
  margin-bottom: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--danger-light);
  color: var(--danger-dark);
  font-size: 0.82rem;
}

.itinerary-form__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.itinerary-form__day { font-weight: 700; }

.itinerary-form__cumulative {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.itinerary-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.6rem 0.8rem;
}

.itinerary-field { display: flex; flex-direction: column; gap: 0.2rem; }

.itinerary-field--wide { grid-column: 1 / -1; }

.itinerary-field--check {
  flex-direction: row;
  align-items: center;
  align-self: end;
}

.itinerary-field label {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}

.itinerary-field--check label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.86rem;
}

.itinerary-field input,
.itinerary-field select,
.itinerary-field textarea {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.86rem;
  font-family: inherit;
}

.itinerary-field--check input[type="checkbox"] { width: auto; }

.itinerary-form__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

@media (max-width: 700px) {
  .itinerary-toolbar { align-items: flex-start; flex-direction: column; }
}


/* =========================================================
   Meals on itinerary days — chips, slot picker, food segments,
   shopping list and rotation fill (#494)

   Class names follow docs/design-system/ds-bundle/patterns/
   itinerary-stage-table.html, which drew this pattern first.
   ========================================================= */

/* Five more columns: four slots plus the day's food weight. */
.itinerary-table { min-width: 92rem; }

.itinerary-col--slot { width: 9.5rem; }

/* ── A meal placed in a slot ─────────────────────────────── */
.meal-chip {
  display: inline-block;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 0.75rem;
  white-space: nowrap;
}

.meal-chip .g {
  margin-left: 0.25rem;
  color: var(--text-muted);
  font-size: 0.65rem;
}

/* Typed into a day rather than picked from the library. Same geometry, dashed
   border, muted ink: a prompt to weigh it, not an error. */
.meal-chip--adhoc {
  border-style: dashed;
  background: var(--surface);
  color: var(--text-muted);
}

.meal-chip--empty { color: var(--text-muted); }

.meal-chip--button {
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}

.meal-chip--button:hover { background: var(--primary-light); }

.meal-slot { max-width: 11rem; }

.meal-slot__add {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
}

.meal-slot__add:hover { text-decoration: underline; }

.itinerary-table.data-table td.meal-slot__weight { color: var(--text-secondary); }

/* ── Food segment band ───────────────────────────────────
   A left border, never a fill: fills do not survive a greyscale print, they
   fight the resupply row's amber, and they carry meaning through hue alone. */
.food-segment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--success);
  background: var(--surface-raised);
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-secondary);
}

.food-segment strong { color: var(--text-primary); }
.food-segment--2 { border-left-color: var(--info); }
.food-segment--3 { border-left-color: var(--warning); }

/* The band sits in a full-width cell, so the cell contributes no padding of
   its own and the border reaches both edges of the table. */
.itinerary-table.data-table .itinerary-segment-row td,
.itinerary-table.data-table .itinerary-segment-row:hover td {
  padding: 0;
  background: transparent;
}

/* ── Slot picker ─────────────────────────────────────────── */
.itinerary-table.data-table .meal-picker-row td,
.itinerary-table.data-table .meal-picker-row:hover td {
  padding: 0.85rem 1rem;
  background: var(--surface-raised);
}

.meal-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.meal-picker__title { font-weight: 700; }

.meal-picker__error {
  margin-bottom: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--danger-light);
  color: var(--danger-dark);
  font-size: 0.82rem;
}

.meal-picker__placed {
  margin: 0 0 0.7rem;
  padding: 0;
  list-style: none;
}

.meal-picker__placed li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  padding: 0.2rem 0;
}

.meal-picker__placed form { display: inline-block; margin: 0; }

.meal-picker__free {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.meal-picker__query {
  flex: 1 1 16rem;
  min-width: 12rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.86rem;
  font-family: inherit;
}

.meal-picker__servings {
  width: 4.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.86rem;
  font-family: inherit;
}

.meal-picker__options {
  max-height: 11rem;
  overflow-y: auto;
  padding: 0.15rem 0;
}

.meal-picker__option { display: inline-block; }
.meal-picker__option form { display: inline-block; margin: 0; }

.meal-picker__hint {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.meal-picker__library-link { color: var(--primary); }

.meal-picker__bulk {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}

.meal-picker__bulk form { margin: 0; }

/* ── Food summary, shopping list and rotation fill ───────── */
.food-stats { margin-top: 0.25rem; }

.itinerary-panels {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-top: 1.75rem;
}

.shopping-list__title,
.rotation-fill__title {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.shopping-list__band { margin: 1rem 0 -1px; }
.shopping-list__band:first-of-type { margin-top: 0; }

.shopping-list__table { font-size: 0.82rem; box-shadow: none; }

.shopping-list__table.data-table td { padding: 0.4rem 0.7rem; }

.shopping-list__table.data-table td.shopping-list__num {
  width: 5rem;
  text-align: right;
  white-space: nowrap;
}

.shopping-list__slots {
  width: 9rem;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.shopping-list__table.data-table .shopping-list__total td,
.shopping-list__table.data-table .shopping-list__total:hover td {
  background: var(--surface-raised);
  font-weight: 700;
}

.rotation-fill__intro,
.rotation-fill__note {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.rotation-fill__note { margin: 0.7rem 0 0; }

.rotation-fill__slots {
  margin: 0 0 0.85rem;
  padding: 0;
  border: 0;
}

.rotation-fill__slots legend,
.rotation-fill__label {
  display: block;
  margin-bottom: 0.35rem;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.rotation-fill__slot {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0.6rem 0.3rem 0;
  font-size: 0.84rem;
}

.rotation-fill__meals {
  max-height: 12rem;
  overflow-y: auto;
  margin-top: 0.4rem;
  padding: 0.3rem 0;
}

.rotation-fill__meal {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0;
  font-size: 0.84rem;
}

.rotation-fill__meal .g {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.rotation-fill__range {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.rotation-fill__range label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.rotation-fill__range input {
  width: 5.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.86rem;
}

.rotation-fill__submit { width: 100%; margin-top: 0.9rem; }

@media (max-width: 900px) {
  .itinerary-panels { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Trip travel legs — outbound and return tables (#495)

   Cell overrides double up the .travel-table.data-table prefix for the same
   reason the itinerary block above does: application.css is required *last*,
   so its .data-table td and .data-table tr:hover td rules would otherwise win
   on equal specificity.
   ========================================================= */

.travel-section { margin-bottom: 1.75rem; }

.travel-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.travel-section__title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.travel-frozen-notice {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--text-secondary);
  font-size: 0.86rem;
}

/* The cabin-allowance warning. The number comes from Pack::TRANSPORT_LIMITS. */
.travel-flight-warning {
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--warning);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--warning-light);
  color: var(--warning-dark);
  font-size: 0.86rem;
}

.travel-flight-warning strong { display: block; }

/* Both tables are wide by nature. They scroll inside their own box so the page
   body never scrolls sideways. */
.travel-table-scroll {
  overflow-x: auto;
  border-radius: var(--radius-sm);
}

.travel-table { min-width: 52rem; }

.travel-table.data-table th,
.travel-table.data-table td {
  padding: 0.5rem 0.75rem;
  font-size: 0.845rem;
  vertical-align: top;
}

.travel-col--time    { width: 6.5rem; white-space: nowrap; }
.travel-col--mode    { width: 7rem; }
.travel-col--private { width: 12rem; }
.travel-col--actions { width: 14rem; }

.travel-table.data-table td.travel-col--time,
.travel-table.data-table th.travel-col--time { text-align: right; }

.travel-leg__time { font-variant-numeric: tabular-nums; }

.travel-leg__sub {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.travel-leg__sub--overnight { color: var(--warning-dark); }

/* A superseded leg stays visible: struck through and dimmed, never deleted. */
.travel-table.data-table .leg--cancelled td,
.travel-table.data-table .leg--cancelled:hover td { color: var(--text-disabled); }

.travel-table.data-table .leg--cancelled s,
.travel-table.data-table .leg--cancelled .travel-leg__sub { color: var(--text-disabled); }

.travel-col--actions form { display: inline-block; margin: 0; }

.travel-col--actions > a,
.travel-col--actions > form { margin: 0 0.15rem 0.15rem 0; }

/* ---- Inline edit panel ---- */

.travel-table.data-table .travel-edit-row td,
.travel-table.data-table .travel-edit-row:hover td {
  background: var(--surface-raised);
  padding: 0.85rem 1rem;
}

.travel-form__errors {
  margin-bottom: 0.7rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--danger-light);
  color: var(--danger-dark);
  font-size: 0.82rem;
}

.travel-form__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.travel-form__direction { font-weight: 700; }

.travel-form__hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.travel-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.65rem 0.85rem;
}

.travel-field { display: flex; flex-direction: column; gap: 0.2rem; }

.travel-field--wide { grid-column: 1 / -1; }

.travel-field--check {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

.travel-field label {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}

.travel-field--check label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.86rem;
}

.travel-field input,
.travel-field select,
.travel-field textarea {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.86rem;
  font-family: inherit;
}

.travel-field--check input[type="checkbox"] { width: auto; }

.travel-form__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

@media (max-width: 700px) {
  .travel-section__header { align-items: flex-start; flex-direction: column; }
}

/* =========================================================
   Printed dossier — the whole plan on one sheet (#496)

   Authored at 794px, which is A4 at 96dpi, so a browser prints it 1:1. On
   screen it is a paper preview: the toolbar above the sheet is the only chrome
   and carries .no-print, and the sheet itself holds no link, button or form
   control — so what prints is the document and nothing else.
   ========================================================= */

.dossier-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.dossier-sheet {
  width: 794px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 2.5rem 3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.78rem;
  line-height: 1.45;
}

.dossier-runhead {
  margin: 0 0 0.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dossier-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
}

.dossier-title {
  margin: 0 0 0.15rem;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dossier-meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.dossier-header__right { text-align: right; }

.dossier-rule {
  border: 0;
  border-top: 1px solid var(--text-primary);
  margin: 0.7rem 0 1.2rem;
}

.dossier-section { margin-bottom: 1.4rem; }

.dossier-section__title {
  margin: 0 0 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-secondary);
}

.dossier-empty {
  margin: 0;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-muted);
}

/* ── Tables ──────────────────────────────────────────────── */

.dossier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.dossier-table th {
  padding: 0.25rem 0.4rem;
  text-align: left;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--text-primary);
}

.dossier-table td {
  padding: 0.25rem 0.4rem;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.dossier-col--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dossier-col--time,
.dossier-col--day,
.dossier-col--date,
.dossier-col--mode { white-space: nowrap; }

.dossier-col--tick { width: 1.4rem; }

.dossier-sub {
  display: block;
  font-size: 0.64rem;
  color: var(--text-muted);
}

.dossier-total-row td { font-weight: 700; }

.dossier-group-row td {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom-color: var(--text-primary);
}

.dossier-grand-row td {
  font-weight: 700;
  border-top: 1px solid var(--text-primary);
  border-bottom: 0;
}

.dossier-tick {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1px solid var(--text-primary);
}

/* The band keeps the itinerary's left rule rather than a fill: on a greyscale
   print the three accents collapse into one another, and a rule plus the band's
   own words still say which carry this is. */
.dossier-segment-row td {
  padding: 0.45rem 0 0.2rem;
  border-bottom: 0;
}

.dossier-band {
  padding: 0.25rem 0.6rem;
  font-size: 0.68rem;
}

/* ── Food figures, shopping list, contacts ───────────────── */

.dossier-figures {
  display: flex;
  gap: 1.5rem;
  margin: 0;
}

.dossier-figures > div { flex: 1 1 0; }

.dossier-figures dt {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.dossier-figures dd {
  margin: 0.1rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.dossier-figures dd.dossier-sub {
  font-size: 0.64rem;
  font-weight: 400;
}

.dossier-shopping {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.dossier-shopping__block { flex: 1 1 220px; }

.dossier-shopping__title {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.dossier-contacts {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 1.5rem;
}

.dossier-contacts__item {
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  font-size: 0.72rem;
  break-inside: avoid;
}

.dossier-contacts__day {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.dossier-contacts__place {
  display: block;
  font-weight: 700;
}

.dossier-contacts__detail {
  display: block;
  color: var(--text-secondary);
}

.dossier-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
  font-size: 0.62rem;
  color: var(--text-muted);
}

@media (max-width: 840px) {
  .dossier-sheet { padding: 1.25rem; }
  .dossier-section { overflow-x: auto; }
  .dossier-header { flex-direction: column; align-items: flex-start; }
  .dossier-header__right { text-align: left; }
  .dossier-contacts { columns: 1; }
}

/* ── Print ───────────────────────────────────────────────── */

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

  .dossier-sheet {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 9.5pt;
  }

  .dossier-section { overflow-x: visible; }
  .dossier-section__title { break-after: avoid; }
  /* The checklist is what you tick off in a hut, not what you read on a train,
     so it starts its own page. */
  .dossier-section--checklist { break-before: page; }

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

  /* Ink, not hue: the accent colours are not asked to survive the print. */
  .dossier-band.food-segment,
  .dossier-band.food-segment--2,
  .dossier-band.food-segment--3 {
    background: transparent;
    border-color: #000;
    border-left-width: 4px;
    color: #000;
  }
}


/* =========================================================
   Itinerary paste import — textarea, column mapping and preview (#497)

   Reuses the stage table classes for the parsed preview; only the page
   frame, the mapping header and the unmatched-meal list are its own.
   Mirrored in docs/design-system/ds-bundle/patterns/itinerary-stage-table.html.
   ========================================================= */

.itinerary-import { max-width: 100%; }

.itinerary-import__title {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.itinerary-import__intro {
  margin: 0 0 0.85rem;
  font-size: 0.86rem;
  color: var(--text-secondary);
  max-width: 70ch;
}

.itinerary-import__textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  white-space: pre;
  overflow-x: auto;
  min-height: 14rem;
}

.itinerary-import__section { margin-top: 1.75rem; }

.itinerary-import__section-title {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* The raw paste with one select per column above it. */
.itinerary-import__columns { font-size: 0.82rem; }

.itinerary-import__columns.data-table th { vertical-align: bottom; }

.itinerary-import__column-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
}

.itinerary-import__columns select {
  min-width: 9rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-family: inherit;
}

.itinerary-import__columns.data-table .itinerary-import__header-line td,
.itinerary-import__columns.data-table .itinerary-import__header-line:hover td {
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-style: italic;
}

.itinerary-import__update { margin-top: 0.75rem; }

.itinerary-import__errors {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--danger-light);
  color: var(--danger-dark);
  font-size: 0.86rem;
}

.itinerary-import__errors ul { margin: 0 0 0.5rem 1.2rem; }

.itinerary-import__errors p { margin: 0; }

.itinerary-table.data-table .itinerary-import__row--error td,
.itinerary-table.data-table .itinerary-import__row--error:hover td {
  background: var(--danger-light);
}

.itinerary-import__row-error { color: var(--danger-dark); }

/* Unmatched meal names, one checkbox each. */
.itinerary-import__unmatched {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.itinerary-import__unmatched-meal {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.86rem;
}

.itinerary-import__slot {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* The itinerary toolbar carries two links once the import exists (#497). */
.itinerary-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/*
















 */
/* NOTE: admin.css is loaded separately in app/views/layouts/admin.html.erb */

/* =========================================================
   PackLite – Application Styles
   Outdoor-inspired light design, no frameworks
   ========================================================= */

/* ---------------------------------------------------------
   Design Tokens – Light Mode
   --------------------------------------------------------- */
:root {
  /* ── Brand palette ──────────────────────────────────────
     The six colours the logo vector declares, plus the ramps derived from them
     in #474. These are the raw values; every semantic token below points at one
     of them, so a hue only ever changes here. */
  --brand-charcoal:      #292e33;
  --brand-charcoal-tint: #e7e8ea;
  --brand-forest:        #3b7a50;
  --brand-forest-dark:   #2f6240;
  --brand-forest-tint:   #eef4ef;
  /* Sun is a background for DARK text only — white on sun is 2.81:1. */
  --brand-sun:           #e08335;
  --brand-sun-tint:      #fbeee0;
  --brand-sun-text:      #96551d;
  --brand-paper:         #fcfbf4;
  --brand-paper-sunken:  #f4f2ea;
  --brand-line:          #e4e1d6;
  --brand-line-soft:     #efece2;
  --brand-line-sunken:   #d8d4c6;
  --brand-ink:           #292e33;
  --brand-ink-muted:     #565c62;
  /* Clears WCAG AA on paper and white only. On --surface-sunken or
     --primary-light it drops to about 4.4:1 — use --text-muted-on-sunken
     there, never this. */
  --brand-ink-subtle:    #6b7178;
  --brand-ink-faint:     #9aa0a6;
  /* The one colour not derived from the vector. Named so it stops drifting. */
  --brand-red:           #dc2626;

  /* Brand */
  --primary:        var(--brand-forest);
  --primary-dark:   var(--brand-forest-dark);
  --primary-light:  var(--brand-forest-tint);
  --secondary:      var(--brand-ink-muted);
  --secondary-dark: var(--brand-charcoal);
  --text-on-primary: var(--brand-paper);

  /* Accent — the only one. Dark text on it, always. */
  --accent:         var(--brand-sun);
  --accent-tint:    var(--brand-sun-tint);
  --accent-text:    var(--brand-sun-text);
  --text-on-accent: var(--brand-charcoal);

  /* Semantic colours */
  --danger:         var(--brand-red);
  --danger-light:   #fee2e2;
  --danger-dark:    #991b1b;
  --warning:        #d97706;
  --warning-light:  #fef3c7;
  --warning-dark:   #92400e;
  --success:        #16a34a;
  --success-light:  #dcfce7;
  --info:           #0284c7;
  --info-light:     #e0f2fe;
  --info-bg:        #dbeafe;
  --info-dark:      #1e40af;
  --orange-light:   #ffedd5;
  --orange-dark:    #9a3412;

  /* Surfaces */
  --nav-bg:         var(--brand-paper);
  --bg:             var(--brand-paper);
  --surface:        #ffffff;
  --surface-raised: var(--brand-paper);
  --surface-sunken: var(--brand-paper-sunken);
  --surface-dark:   var(--brand-charcoal);
  --neutral-tint:   var(--brand-charcoal-tint);

  /* Text */
  --text-primary:   var(--brand-ink);
  --text-secondary: var(--brand-ink-muted);
  --text-muted:     var(--brand-ink-subtle);
  --text-disabled:  var(--brand-ink-faint);
  /* Muted text loses AA on the sunken and tinted grounds; step it up there. */
  --text-muted-on-sunken: var(--brand-ink-muted);
  /* On charcoal, paper at 0.8 for body and 0.6 for meta — never pure white. */
  --text-on-dark:      rgba(252, 251, 244, 0.8);
  --text-on-dark-meta: rgba(252, 251, 244, 0.6);

  /* Borders */
  --border:         var(--brand-line);
  --divider:        var(--brand-line-soft);
  --border-sunken:  var(--brand-line-sunken);
  --border-focus:   var(--brand-forest);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 4px 8px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 8px 16px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.06);

  /* Radius */
  --radius-sm: 0;
  --radius:    0;
  --radius-md: 0;
  --radius-lg: 0;

  /* Transitions */
  --transition:      150ms ease;
  --transition-slow: 250ms ease;

  /* Display face – serif headlines. @font-face lives in fonts.css.erb;
     Georgia is the metric-compatible fallback during the swap window and
     on any platform the woff2 does not reach. */
  --font-display:   'Newsreader', Georgia, 'Times New Roman', serif;

  /* Legacy aliases – keep old markup working */
  --primary-color:   var(--primary);
  --secondary-color: var(--secondary);
  --danger-color:    var(--danger);
  --success-color:   var(--success);
  --warning-color:   var(--warning);
  --light-gray:      var(--surface-sunken);
  --border-color:    var(--border);
  --text-color:      var(--text-primary);
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.6;
  background-color: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Typography scale */
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.25; color: var(--text-primary); }
h1 { font-size: 1.875rem; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem;   letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
p  { color: var(--text-secondary); }

.container {
  padding: 1.5rem 1rem;
}

/* ---------------------------------------------------------
   Header & Nav
   --------------------------------------------------------- */
.header {
  background: var(--brand-paper);
  color: var(--text-primary);
  padding: 0;
  box-shadow: 0 1px 3px rgba(41,46,51,0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
}

.public-header {
  background: var(--brand-paper);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(41,46,51,0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.nav,
.public-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: 64px;
  transition: min-height 0.25s ease, padding 0.25s ease;
}

.nav-brand,
.public-nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* The mark carries the brand; the wordmark beside it only has to name it.
   800 at -0.025em fought the mark for attention. */
.nav-brand h1,
.nav-brand-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.3125rem;
  font-weight: 600;
  color: var(--primary-dark);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
  padding: 0.25rem;
}

.nav-logo svg,
.nav-logo .nav-logo-img {
  display: block;
  height: auto;
}

/* Only the uploaded raster needs blending — its white plate has to sink into the
   paper bar. The inline vector mark carries exact brand colours; multiplying
   them against the bar shifts every one of them. */
.nav-logo .nav-logo-img {
  mix-blend-mode: multiply;
}

.nav-brand-text {
  font-size: 1.3125rem;
  font-weight: 600;
  color: var(--primary-dark);
  letter-spacing: -0.01em;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.2s ease, max-width 0.25s ease;
}

.nav-brand-link:hover {
  text-decoration: none;
}

.admin-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--danger);
  color: white;
  border-radius: var(--radius-sm);
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 0.25rem;
  align-items: center;
  flex: 1;
}

.nav-menu li {
  display: flex;
  align-items: center;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2px;
  background: var(--primary);
  transition: transform var(--transition);
}

.nav-link:hover {
  color: var(--primary-dark);
  background: rgba(41,46,51,0.05);
  text-decoration: none;
}

.nav-link:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.nav-link--active {
  background: var(--primary);
  color: var(--text-on-primary);
  font-weight: 600;
}

.nav-link--active::after {
  display: none;
}

.nav-link--active:hover {
  background: var(--primary-dark);
  color: var(--text-on-primary);
}

.nav-link--admin {
  font-size: 0.8rem;
  color: var(--danger);
  background: rgba(220,38,38,0.08);
  font-weight: 600;
}

.nav-link--admin:hover {
  background: rgba(220,38,38,0.15);
  color: var(--danger-dark);
}

.nav-link--admin::after {
  display: none;
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-shrink: 0;
}

.nav-username,
.nav-user__name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}

.nav-user__avatar {
  font-size: 1.125rem;
  line-height: 1;
}

.nav-user__text {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user__name:hover {
  background: rgba(41,46,51,0.05);
  color: var(--primary-dark);
  text-decoration: none;
}

.public-nav__links {
  display: flex;
  gap: 0.25rem;
  flex: 1;
}

.public-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Language dropdown ─────────────────────────────────── */
.lang-dropdown {
  position: relative;
}

.lang-dropdown__toggle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.lang-dropdown__toggle:hover {
  background: var(--surface-raised);
  border-color: var(--text-muted);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.lang-dropdown__code {
  letter-spacing: 0.04em;
  font-weight: 600;
}

.lang-dropdown__code-abbr {
  letter-spacing: 0.04em;
  font-weight: 600;
  display: inline;
}

.lang-dropdown__code-abbr--hidden {
  display: none;
}

.lang-dropdown__code-full {
  font-weight: 500;
  display: none;
}

.lang-dropdown__code-full--visible {
  display: inline;
}

.lang-dropdown__caret {
  font-size: 0.7rem;
  opacity: 0.5;
  transition: transform var(--transition);
}

.lang-dropdown__toggle:hover .lang-dropdown__caret {
  opacity: 0.8;
}

.lang-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  padding: 0.5rem;
  z-index: 100;
}

.lang-dropdown__menu--open {
  display: block;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lang-dropdown__form {
  margin: 0;
}

.lang-dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.875rem;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-primary);
  text-align: left;
  transition: background var(--transition);
}

.lang-dropdown__item:hover {
  background: var(--surface-raised);
}

.lang-dropdown__item--active {
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
}

.btn-sm {
  padding: 0.4rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Logout button */
.btn-logout {
  background: var(--primary);
  color: var(--text-on-primary);
  border: 1px solid var(--primary-dark);
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  transition: background var(--transition);
  white-space: nowrap;
}
.btn-logout:hover { background: var(--primary-dark); }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.footer {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--brand-paper);
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: 3rem;
  border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-small,
.btn-warning,
.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
  white-space: nowrap;
  user-select: none;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-success:hover {
  text-decoration: none;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary-dark);
}
.btn-primary:hover { background: var(--primary-dark); }

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

.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:hover { filter: brightness(0.88); }

.btn-warning {
  background: var(--warning);
  color: #fff;
}
.btn-warning:hover { filter: brightness(0.88); }

.btn-success {
  background: var(--success);
  color: #fff;
}
.btn-success:hover { filter: brightness(0.88); }

.btn-small {
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
}

button:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
.form-container {
  max-width: 600px;
  margin: 2rem auto;
  background: var(--surface);
  padding: 2rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.form-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.locale-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.locale-picker__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.locale-picker__option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: background var(--transition), border-color var(--transition);
  user-select: none;
}

.locale-picker__option:hover {
  background: var(--surface-raised);
  border-color: var(--text-muted);
}

.locale-picker__option:has(:checked) {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

.locale-picker__option--active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

.form-control {
  width: 100%;
  padding: 0.45rem 0.75rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59, 122, 80, 0.18);
}

.form-control::placeholder { color: var(--text-disabled); }

textarea.form-control { resize: vertical; min-height: 90px; }

input[type="file"].form-control {
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  color: var(--text-primary);
  background: var(--surface);
  border-color: var(--border);
}

input[type="file"].form-control::file-selector-button {
  background: var(--surface-sunken);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.75rem;
  margin-right: 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background var(--transition);
}

input[type="file"].form-control::file-selector-button:hover {
  background: var(--border);
}

.form-control-small {
  width: 80px;
  padding: 0.4rem 0.5rem;
  font-size: 0.875rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.form-inline {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-section {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.form-section legend {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.form-section--danger {
  background: var(--danger-light);
  border-color: var(--danger);
}

.form-section--danger legend { color: var(--danger); }

.form-errors {
  background: var(--danger-light);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.form-errors ul {
  list-style-position: inside;
  color: var(--danger);
  font-size: 0.875rem;
}

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

.form-check-input {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--primary);
}

.form-check-label {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-secondary);
  cursor: pointer;
}

/* ---------------------------------------------------------
   Flash Messages
   --------------------------------------------------------- */
.flash-messages {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: min(420px, calc(100vw - 2rem));
  pointer-events: none;
}

.alert {
  --alert-accent: var(--primary);

  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  border-radius: 14px 14px 4px 14px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  margin-bottom: 0;
  background: var(--surface);
  color: var(--text-secondary);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
  width: 100%;
  pointer-events: auto;
  position: relative;
  transition: opacity 0.18s ease, transform 0.18s ease;
  animation: slideDownAlert 0.3s ease-out;
}

.alert::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--alert-accent);
  opacity: 0.82;
  flex-shrink: 0;
}

.alert::after {
  content: "";
  position: absolute;
  right: 0.85rem;
  bottom: -0.33rem;
  width: 0.65rem;
  height: 0.65rem;
  background: var(--surface);
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transform: rotate(45deg);
}

.alert-message {
  flex: 1;
  color: var(--text-secondary);
}

.alert-dismissed {
  opacity: 0;
  transform: translateY(-0.5rem);
}

@keyframes slideDownAlert {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------
  Announcement Banner
  --------------------------------------------------------- */
.announcement-banner {
  --announcement-accent: var(--primary);

  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: min(560px, calc(100vw - 2rem));
  padding: 0.7rem 0.85rem;
  margin: 0.75rem 1rem 0.25rem auto;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  border-radius: 14px 14px 4px 14px;
  border: 1px solid transparent;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
  position: relative;
}

.announcement-banner::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--announcement-accent);
  opacity: 0.82;
  flex-shrink: 0;
}

.announcement-banner::after {
  content: "";
  position: absolute;
  right: 0.85rem;
  bottom: -0.33rem;
  width: 0.65rem;
  height: 0.65rem;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transform: rotate(45deg);
}

.announcement-banner.announcement-info {
  --announcement-accent: var(--primary);

  background: var(--surface);
  color: var(--text-secondary);
  border-color: var(--border);
}

.announcement-banner.announcement-info::after {
  background: var(--surface);
  border-color: var(--border);
}

.announcement-banner.announcement-warning {
  --announcement-accent: var(--warning);

  background: var(--surface);
  color: var(--text-secondary);
  border-color: rgba(217, 119, 6, 0.22);
}

.announcement-banner.announcement-warning::after {
  background: var(--surface);
  border-color: rgba(217, 119, 6, 0.22);
}

.announcement-banner.announcement-danger {
  --announcement-accent: var(--danger);

  background: var(--surface);
  color: var(--text-secondary);
  border-color: rgba(220, 38, 38, 0.22);
}

.announcement-banner.announcement-danger::after {
  background: var(--surface);
  border-color: rgba(220, 38, 38, 0.22);
}

.announcement-banner strong {
  color: var(--text-primary);
  font-weight: 700;
  white-space: nowrap;
}

.announcement-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
  color: inherit;
  opacity: 0.6;
  flex-shrink: 0;
}

.announcement-dismiss:hover {
  opacity: 1;
}

.announcement-banner .button_to {
  display: inline;
}

.announcement-banner .button_to form {
  display: inline;
}

.on-behalf-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 1rem;
  background: rgba(217, 119, 6, 0.12);
  border-bottom: 1px solid rgba(217, 119, 6, 0.3);
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.on-behalf-banner .button_to {
  display: inline;
}

.btn-link-inline {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline;
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
}

.alert-notice {
  --alert-accent: var(--success);

  background: var(--surface);
  color: var(--text-secondary);
  border-color: rgba(22, 163, 74, 0.22);
}

.alert-notice::after {
  border-color: rgba(22, 163, 74, 0.22);
}

.alert-alert {
  --alert-accent: var(--danger);

  background: var(--surface);
  color: var(--text-secondary);
  border-color: rgba(220, 38, 38, 0.22);
}

.alert-alert::after {
  border-color: rgba(220, 38, 38, 0.22);
}

.alert-warning {
  --alert-accent: var(--warning);

  background: var(--surface);
  color: var(--text-secondary);
  border-color: rgba(217, 119, 6, 0.22);
}

.alert-warning::after {
  border-color: rgba(217, 119, 6, 0.22);
}

.alert-info {
  --alert-accent: var(--info);

  background: var(--surface);
  color: var(--text-secondary);
  border-color: rgba(2, 132, 199, 0.22);
}

.alert-info::after {
  border-color: rgba(2, 132, 199, 0.22);
}

/* ---------------------------------------------------------
   Error Messages
   --------------------------------------------------------- */
.error-messages {
  background: var(--danger-light);
  border: 1px solid rgba(220, 38, 38, 0.25);
  padding: 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

.error-messages h4 {
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  color: var(--danger);
}

.error-messages ul { margin-left: 1.5rem; }
.error-messages li { font-size: 0.875rem; color: var(--danger); }

/* ---------------------------------------------------------
   Auth Pages
   --------------------------------------------------------- */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 120px);
  padding: 2rem 1rem;
}

.auth-card {
  background: var(--surface);
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 420px;
}

.auth-card h1 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.auth-links {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ---------------------------------------------------------
   Dashboard Hero Photo Banner
   --------------------------------------------------------- */
.dashboard-hero {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(180deg, #87CEEB 0%, #B0D4E8 38%, #6B8E5A 38%, #4A7A3D 52%, #3B6B2E 52%, #2D5A22 68%, #e8e0d4 68%, #d4c9b8 100%);
}

.dashboard-hero__svg {
  position: absolute;
  bottom: 36%;
  left: 0;
  width: 100%;
  height: 65%;
  opacity: 0.6;
}

.dashboard-hero__hiker {
  position: absolute;
  bottom: 30%;
  right: 12%;
  height: 22%;
  opacity: 0.75;
}

.dashboard-hero__text {
  position: absolute;
  bottom: 1rem;
  left: 1.25rem;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

.dashboard-hero__title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.dashboard-hero__subtitle {
  font-size: 0.825rem;
  opacity: 0.9;
  margin-top: 0.2rem;
}

/* ---------------------------------------------------------
   Dashboard
   --------------------------------------------------------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: var(--surface);
  padding: 1.1rem 1.25rem;
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  text-align: left;
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}

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

.stat-card h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.stat-number {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0.3rem 0;
}

.stat-detail {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.stat-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
}

.stat-link:hover { text-decoration: underline; }

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

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

/* ---------------------------------------------------------
   Page Headers
   --------------------------------------------------------- */
/* A title and a rule, not a slab — the same treatment the landing page and the
   blog give their headings. Per-screen overrides that want a card still win on
   specificity (`.packs-index .page-header`). */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  background: none;
  color: var(--text-primary);
  padding: 0 0 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.header-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------
   Filter tabs — shared between Articles and Trips
   --------------------------------------------------------- */

.article-filters {
  display: flex;
  gap: 0.5rem;
  margin: 2rem 0;
  border-bottom: 1px solid var(--border);
}

.filter-tab {
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.filter-tab:hover {
  color: var(--text-primary);
  background: var(--surface-sunken);
  text-decoration: none;
}

.filter-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.filter-tab--pro::after {
  content: 'PRO';
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 3px;
  padding: 1px 3px;
  margin-left: 3px;
  vertical-align: super;
}

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

.trips-index,
.packs-index {
  max-width: 1200px;
  margin: 0 auto;
}

/* Section lanes */
.trips-section {
  margin-bottom: 2.5rem;
}

.trips-section h2 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.trips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

/* Trip card – article-card style */
.trip-card-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.trip-card-wrap:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.07);
}

.trip-card {
  padding: 1.5rem;
  text-decoration: none;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.trip-card:hover { text-decoration: none; }

.trip-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.875rem;
}

.trip-date {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.trip-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.trip-card__excerpt {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 0.75rem;
}

.trip-weight-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
}

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

/* The number beside the bar. Neutral while there is room; it only takes a
   colour once the bar does, and then it matches it. */
.trip-weight-note {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Sun is a background for dark text only, so the "nearly there" note reads in
   the on-tint ink rather than in the accent itself. */
.trip-weight-note--close {
  color: var(--accent-text);
  font-weight: 600;
}

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

.trip-notes {
  margin: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.trip-notes p {
  margin: 0.25rem 0 0;
}

.weight-bar {
  background: var(--divider);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.weight-progress {
  background: var(--primary);
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Forest under the target, sun in the last tenth of it, red past it. The band
   comes from TripsHelper#trip_weight_band, not from Trip#weight_status. */
.weight-progress--over  { background: var(--danger); }
.weight-progress--close { background: var(--accent); }
.weight-progress--under { background: var(--primary); }

/* Tags row */
.trip-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.tag {
  padding: 0.2rem 0.6rem;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  border-radius: 4px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
}

/* Trip card wrap – article-card style */
.trip-card-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.trip-card-wrap:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.07);
}

/* Edit/Clone button at bottom of trip card */
.trip-card-edit-btn {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.01em;
  font-family: inherit;
}

/* When trip-card-edit-btn is inside a form (button_to), style the form wrapper */
.button_to {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.trip-card-edit-btn:hover {
  background: var(--primary);
  color: var(--text-on-primary);
  text-decoration: none;
}

/* Status badge */
.trip-status-badge,
.pack-type-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.6em;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.trip-status-planning    { background: var(--neutral-tint); color: var(--text-primary); }
.trip-status-packed      { background: var(--primary-light); color: var(--primary-dark); }
.trip-status-in_progress { background: var(--accent-tint); color: var(--accent-text); }
/* Muted ink loses AA on the sunken ground — see --brand-ink-subtle. */
.trip-status-completed   { background: var(--surface-sunken); color: var(--text-muted-on-sunken); }
.trip-status-reviewed    { background: var(--primary-light); color: var(--primary-dark); }

/* Trips summary bar */
.trips-summary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.trips-summary-sep { color: var(--text-muted); }
.trips-summary-next strong { color: var(--text-primary); }

/* Nudge: no upcoming trips but past trips exist */
.trips-nudge {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  background: var(--surface-sunken);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.trips-nudge p { margin: 0; color: var(--text-secondary); }


/* Gear */
.gear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.gear-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(41,46,51,0.09), 0 1px 3px rgba(41,46,51,0.05);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

a.gear-card:hover,
div.gear-card:hover,
.gear-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transform: translateY(-2px);
  text-decoration: none;
}

.gear-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 0.75rem;
}

.gear-category {
  background: var(--light-gray);
  border: 1px solid var(--border);
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  width: fit-content;
}

.gear-catalog-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.catalog-browse-area {
  margin-bottom: 1.75rem;
}

.catalog-browse-area__title {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

a.catalog-browse-badge {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.catalog-browse-badge:hover {
  border-color: var(--primary-color);
}

.gear-weight {
  color: var(--primary);
  font-size: 1rem;
  font-weight: 600;
}

.gear-total-weight {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.filters {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

/* ---------------------------------------------------------
   Tables
   --------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.gear-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 0.9rem;
}

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

/* The cells read quiet so the two things worth scanning — the item's name and
   its weight — are the only ones carrying ink. */
.gear-table td {
  color: var(--text-secondary);
}

.gear-table td[data-field="name"] {
  color: var(--text-primary);
  font-weight: 600;
}

/* Weight is the only bold column. Both weight cells are weights, so both take
   it; quantity and trip counts stay plain. */
.gear-table td[data-field="weight"],
.gear-table td[data-field="total"] {
  font-weight: 700;
  color: var(--primary-dark);
}

.gear-table th {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  background: var(--surface-sunken);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}

.gear-table th a {
  color: inherit;
  text-decoration: none;
}

.gear-table th a:hover {
  color: var(--primary);
}

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

.category-all-added {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0.4rem 0.5rem;
  margin: 0;
}

.gear-table tr:last-child td { border-bottom: none; }
.gear-table tr:hover td { background: var(--surface-sunken); }

/* ---------------------------------------------------------
   Gear Items Index — filter bar, view toggles, bulk actions
   --------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  margin-bottom: 0.5rem;
}

.filter-group   { display: flex; align-items: center; gap: 0.25rem; }
.filter-search  { flex: 1 1 200px; }
.filter-weight  { gap: 0.3rem; }

.filter-input {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--text-primary);
  background: var(--surface-raised);
  width: 100%;
}
.filter-input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.filter-input--sm { width: 70px; }

.filter-select {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
}

.btn-search { padding: 0.45rem 0.9rem; }
.btn-clear  {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 0.3rem;
}
.btn-clear:hover { text-decoration: underline; }

.toggle-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Filter bar sub-components */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.filter-label { font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; }

.filter-advanced {
  display: none;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.filter-advanced.open { display: flex; }

.filter-advanced-toggle { position: relative; white-space: nowrap; }
.filter-advanced-toggle.open { border-color: var(--primary); color: var(--primary); }

.badge-dot {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}
.filter-advanced-toggle.has-advanced .badge-dot { display: block; }

.filter-pill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.88rem;
  cursor: pointer;
  user-select: none;
  background: var(--surface);
  color: var(--text-primary);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filter-pill-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-pill-toggle:has(input:checked) {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-decoration: none;
}
.filter-chip a { color: var(--text-muted); text-decoration: none; font-weight: 700; }
.filter-chip a:hover { color: var(--danger); }
.filter-chip--clear { border-color: var(--danger); color: var(--danger); }
.filter-chip--clear:hover { background: var(--danger); color: var(--text-on-primary); }

/* View controls: summary + grid/table toggle */
.view-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.gear-summary { color: var(--text-secondary); font-size: 0.9rem; }
.view-toggle  { display: flex; gap: 0.25rem; }

.view-btn {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.875rem;
  background: var(--surface);
  transition: background var(--transition), color var(--transition);
}
.view-btn.active {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
}

/* Bulk selection bar */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  color: var(--accent-text);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}
.bulk-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.bulk-actions-end { margin-left: auto; }

/* Extra gear-item card helpers */
.gear-card-wrap { position: relative; display: flex; flex-direction: column; }

/* Custom selection checkbox — top-left corner of card */
.card-select-area {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 3;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.card-select-area:hover { border-color: var(--primary); }

/* Native checkbox hidden but remains keyboard-accessible */
.card-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.card-select-tick {
  font-size: 0.85rem;
  font-weight: 700;
  color: transparent;
  line-height: 1;
  user-select: none;
  transition: color 0.1s;
}

/* Selected state — filled checkbox + bold card ring */
.gear-card-wrap:has(.item-checkbox:checked) .card-select-area {
  background: var(--primary);
  border-color: var(--primary);
}
.gear-card-wrap:has(.item-checkbox:checked) .card-select-tick { color: var(--text-on-primary); }
.gear-card-wrap:has(.item-checkbox:checked) .gear-card {
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 3px rgba(59,122,80,0.18);
}

.col-check   { width: 36px; }
.col-num     { text-align: right; white-space: nowrap; }
.col-actions { position: relative; white-space: nowrap; width: 1%; }

/* ── Row click selection ──────────────────────────────────── */
.gear-table:not(.edit-mode) .gear-row { cursor: pointer; }
.gear-row.is-selected td { background: color-mix(in srgb, var(--primary) 8%, transparent) !important; }

/* ── Row actions dropdown ───────────────────────────────── */
.row-actions { position: relative; display: inline-block; }
.row-actions-btn {
  display: inline-flex; align-items: center; justify-content: center;
  list-style: none; cursor: pointer; padding: 0.2rem 0.5rem;
  border-radius: var(--radius); font-size: 1.25rem; line-height: 1;
  color: var(--text-muted); user-select: none; background: none; border: none;
}
.row-actions-btn::-webkit-details-marker,
.row-actions-btn::marker { display: none; }
.row-actions-btn:hover { background: var(--surface-sunken); color: var(--text-primary); }
.row-actions-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 2px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  min-width: 170px; z-index: 200; padding: 0.25rem 0;
}
.row-actions[open] .row-actions-menu { display: block; }
.row-action-item {
  display: block; padding: 0.5rem 1rem; font-size: 0.875rem;
  color: var(--text-primary); text-decoration: none;
  background: none; border: none; width: 100%; text-align: left;
  cursor: pointer; white-space: nowrap;
}
.row-action-item:hover { background: var(--surface-sunken); }
.row-action-danger { color: var(--danger, #dc2626); }
.row-action-danger:hover { background: var(--danger-light, #fee2e2); color: var(--danger, #dc2626); }
.row-action-divider { height: 1px; background: var(--border); margin: 0.25rem 0; }

/* Card title */
.gear-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Text content wrapper — padding lives here so photo bleeds edge-to-edge */
.gear-card-content {
  padding: 0.75rem 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

/* Photo thumbnail — full-bleed at top */
.gear-card-thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

/* Placeholder for items without a photo */
.gear-card-thumb--empty {
  height: 140px;
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.gear-card-icon { font-size: 2.5rem; opacity: 0.4; }

/* Always-visible edit button — below card body, never requires selecting */
.gear-card-edit-btn {
  display: block;
  padding: 0.45rem 0.75rem;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-top: 1px solid var(--border);
  border-radius: 0 0 10px 10px;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.01em;
}
.gear-card-edit-btn:hover {
  background: var(--primary);
  color: #fff;
  text-decoration: none;
}

.item-link   { color: var(--primary-dark); text-decoration: none; font-weight: 500; }
.item-link:hover { text-decoration: underline; }
/* Neutral on purpose: in the catalog table the weight is the only coloured
   column, so the category reads as a chip rather than a second signal. */
.category-badge {
  background: var(--surface-sunken);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 0.15rem 0.5rem;
  border-radius: 0;
  font-size: 0.78rem;
  white-space: nowrap;
}

.gear-brand,
.gear-total-weight,
.gear-trips { margin: 0; font-size: 0.8rem; color: var(--text-secondary); }

/* data-table – used in gear_imports list (mirrors admin-table styling) */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.data-table th,
.data-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.data-table th {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  background: var(--surface-sunken);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface-raised); }
.col-bar { width: 30%; }

/* Inline bar chart used on Statistics page */
.stat-bar-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.stat-bar {
  height: 10px;
  background: var(--primary);
  border-radius: var(--radius-sm);
  min-width: 2px;
  flex-shrink: 0;
}
.stat-bar--under   { background: var(--success); }
.stat-bar--close   { background: var(--warning); }
.stat-bar--over    { background: var(--danger); }
.stat-bar--unknown { background: var(--secondary); }
.stat-bar-label { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }

/* ---------------------------------------------------------
   Badges
   --------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

.badge-admin    { background: #fff3e0; color: #e65100; }
.badge-user     { background: var(--success-light); color: var(--success); }
.badge-active   { background: var(--success-light); color: var(--success); }
.badge-inactive { background: var(--danger-light);  color: var(--danger); }
.badge-you      { background: var(--info-light);    color: var(--info); }

/* Breadcrumb */
.breadcrumb-link {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-top: 0.2rem;
}
.breadcrumb-link:hover { color: var(--primary); text-decoration: underline; }

/* Utility */
.text-muted   { color: var(--text-muted); font-size: 0.85rem; }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-center  { text-align: center; }

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

/* ---------------------------------------------------------
   Detail / Show Pages
   --------------------------------------------------------- */
.trip-show, .gear-show {
  background: var(--surface);
  padding: 2rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

/* Table container for admin tables */
.table-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: auto;
  box-shadow: var(--shadow-sm);
}

.trip-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.trip-gear-section, .add-gear-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--light-gray);
  border-radius: 0;
}

/* Detail Pages */
.gear-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.detail-group {
  background: var(--light-gray);
  padding: 1.5rem;
  border-radius: 0;
}

.detail-group dl {
  margin-top: 1rem;
}

.detail-group dt {
  font-weight: 600;
  margin-top: 0.75rem;
}

.detail-group dd {
  margin-left: 1rem;
  color: #666;
}

.gear-usage {
  margin: 2rem 0;
}

.trip-list {
  list-style: none;
  padding-left: 0;
}

.trip-list li {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.trip-list a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.trip-list a:hover {
  text-decoration: underline;
}

/* Gear Tags */
.gear-tag {
  display: inline-block;
  background: var(--primary-color);
  color: white;
  padding: 0.15rem 0.6rem;
  border-radius: 0;
  font-size: 0.8rem;
  margin: 0.1rem 0.25rem 0.1rem 0;
}

/* Responsive */
@media (max-width: 900px) {
  .drag-drop-container { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav {
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    min-height: auto;
    gap: 0.5rem;
  }

  .nav-menu { flex-wrap: wrap; gap: 0; }
  .nav-link { padding: 0.5rem 0.75rem; font-size: 0.8rem; }

  .page-header { flex-direction: column; align-items: flex-start; }
  .form-row   { grid-template-columns: 1fr; }
  .stats-row  { grid-template-columns: 1fr 1fr; }
  .container  { padding: 1rem 0.75rem; }

  .announcement-banner {
    align-items: flex-start;
    margin: 0.75rem auto 0.35rem;
    width: min(100% - 1rem, 680px);
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.5rem; }
  .stats-row  { grid-template-columns: 1fr; }
  .trips-grid { grid-template-columns: 1fr; }
  .filter-bar      { flex-direction: column; align-items: stretch; }
  .view-controls   { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
  .view-toggle     { width: 100%; }
  .view-btn        { flex: 1; text-align: center; }
}

/* ---------------------------------------------------------
   Drag and Drop Planner
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   Collapsible trip card
   --------------------------------------------------------- */
.trip-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 1rem;
}

.trip-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  background: var(--surface);
}

.trip-card-title-group {
  flex: 1;
  min-width: 0;
}
.trip-card-title-group h1 {
  margin: 0 0 0.2rem;
  font-size: 1.4rem;
}
.trip-card-title-group .trip-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.trip-card-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.trip-stats-inline {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.trip-stat-badge {
  border-radius: 99px;
  padding: 2px 9px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--primary-light);
  color: var(--primary);
  white-space: nowrap;
}
.trip-stat-badge--under { background: rgba(34,197,94,0.12); color: #16a34a; }
.trip-stat-badge--close  { background: rgba(245,158,11,0.12); color: #b45309; }
.trip-stat-badge--over   { background: rgba(239,68,68,0.12);  color: #dc2626; }

.trip-card-chevron {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--transition), transform var(--transition);
  flex-shrink: 0;
}
.trip-card-chevron:hover { border-color: var(--primary); }
.trip-card-chevron svg {
  width: 12px;
  height: 12px;
  transition: transform 0.25s ease;
}
.trip-card--collapsed .trip-card-chevron svg { transform: rotate(-90deg); }

/* Collapsible body */
.trip-card-body {
  overflow: hidden;
  max-height: 1200px;
  transition: max-height 0.35s ease;
  border-top: 1px solid var(--border);
}
.trip-card--collapsed .trip-card-body {
  max-height: 0;
}

.trip-card-body .trip-description {
  padding: 0.75rem 1.25rem 0;
}

.trip-card-body .overview-section {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.trip-card-body .overview-section:last-child {
  border-bottom: none;
}

/* Single-card planner box */
.planner-box {
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  margin-top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------
   Planner top bar (spans full width above columns)
   --------------------------------------------------------- */
.planner-topbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.planner-topbar-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

.planner-topbar-search {
  flex: none;
  width: 72px;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface);
}

/* Override category-nav-bar styles when inside topbar */
.planner-topbar-nav.category-nav-bar {
  flex: 1;
  border-top: none;
  background: transparent;
  padding: 0;
  min-width: 180px;
}

.planner-topbar-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  flex-shrink: 0;
  margin: 0;
  white-space: nowrap;
}



.planner-columns {
  display: grid;
  grid-template-columns: 1fr 2.5rem 1fr;
}

/* Both columns */
.planner-col {
  padding: 1.25rem;
}

/* Left column – Gear */
.planner-col--gear {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  background: var(--surface-sunken);
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Center divider column */
.planner-col-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sunken);
  position: relative;
}
.planner-col-divider::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--border);
}

/* Right column – Trip Pack */
.planner-col--pack {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  background: var(--surface-sunken);
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Column cartoon header */
.planner-col-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border);
}
.planner-col-header h2 {
  margin: 0;
  color: var(--primary);
}
.col-cartoon {
  width: 48px;
  height: 48px;
  color: var(--primary);
  flex-shrink: 0;
  opacity: 0.85;
}

/* Scrollable inner areas – grow to fill column, shrink if needed */
.wizard-scroll-area,
.pack-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Footer rows pinned at the bottom of each column */
.wizard-col-foot {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  flex-shrink: 0;
  background: var(--surface-sunken);
}

/* Bidirectional badge on the column divider – doubles as an add button */
.col-divider-badge {
  position: relative;
  z-index: 1;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--primary);
  color: var(--text-on-primary);
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--surface-sunken);
  box-shadow: 0 2px 10px rgba(41,46,51,0.22);
  cursor: default;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.col-divider-badge svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* Active state: items selected – becomes clickable */
.col-divider-badge--active {
  cursor: pointer;
  box-shadow: 0 2px 18px rgba(0,0,0,0.38);
}
.col-divider-badge--active:hover { transform: scale(1.15); }

/* Icon toggle */
.divider-icon--right,
.divider-icon--left { display: none; }

.col-divider-badge--add .divider-icon--both  { display: none; }
.col-divider-badge--add .divider-icon--right { display: block; }

.col-divider-badge--remove .divider-icon--both { display: none; }
.col-divider-badge--remove .divider-icon--left { display: block; }

/* Selection count badge */
.divider-count {
  position: absolute;
  top: -5px;
  right: -5px;
  /* The one thing on this screen asking for attention. Sun is a background
     for dark text only — white on it is 2.81:1. */
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: 99px;
  font-size: 0.62rem;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

.planner-col--gear h2,
.planner-col--pack h2 {
  margin-bottom: 0.5rem;
  color: var(--primary);
}

/* Legacy classes kept for pack planner (packs/show) */
.available-gear-panel,
.trip-gear-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.available-gear-panel {
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.available-gear-panel h2,
.trip-gear-panel h2 {
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.help-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.review-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.review-cta__start {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  min-width: 220px;
}

.review-cta__mark-reviewed {
  opacity: 0.88;
}

.review-cta__skip-hint {
  margin-top: 0.75rem;
  margin-bottom: 0;
  font-size: 0.9rem;
}

.review-cta__skip-hint a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.review-cta__skip-hint a:hover {
  color: var(--text-primary);
}

/* Planner available-gear list (flex column of category groups) */
.planner-gear-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.gear-category-group h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gear-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

/* Drag-and-drop gear card (inside planner – slightly different than list .gear-card) */
.available-gear-panel .gear-card,
.planner-col--gear .gear-card {
  background: var(--surface);
  /* White cards on the sunken ground need the darker hairline to separate. */
  border: 1.5px solid var(--border-sunken);
  border-radius: 10px;
  padding: 0.65rem;
  gap: 0.35rem;
  overflow: visible;
  box-shadow: none;
  cursor: default;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.gear-card.draggable { cursor: grab; }
.gear-card.draggable:active { cursor: grabbing; }

.gear-card.dragging {
  opacity: 0.45;
  border-style: dashed;
}

.gear-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 122, 80, 0.15);
  transform: translateY(-2px);
}

.gear-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.gear-card-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.gear-card-header strong {
  font-size: 0.9rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gear-card-brand {
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.available-gear-panel .gear-weight {
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--surface);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
}

/* Weights are what the planner is for, so they are the one coloured figure on
   either card. Forest-dark rather than forest: it sits on white inside the
   sunken columns and has to hold up at 0.9rem. */
.planner-col--gear .gear-weight,
.planner-col--pack .gear-weight {
  color: var(--primary-dark);
  font-weight: 700;
  background: none;
  padding: 0;
}

.gear-card-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.gear-card-notes {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.2rem;
}

/* Filter bar */
.gear-filter-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.gear-search-input {
  flex: 1;
  min-width: 120px;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0;
  font-size: 0.9rem;
}

.gear-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 122, 80, 0.18);
}

.gear-category-filter {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
}

.gear-category-filter:focus {
  outline: none;
  border-color: var(--primary-color);
}

.gear-no-results {
  color: var(--text-muted);
  text-align: center;
  padding: 1.5rem 0;
  font-size: 0.95rem;
}

/* Selected state */
.gear-card.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(59, 122, 80, 0.22);
}

/* Multiselect action bar */
.gear-multiselect-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 2px solid var(--primary);
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  border-radius: 0;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
}

.multiselect-count {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.multiselect-actions {
  display: flex;
  gap: 0.5rem;
}

.trip-gear-drop-zone {
  min-height: 380px;
  border: 2px dashed transparent;
  border-radius: var(--radius);
  padding: 1rem;
  transition: border-color 0.2s, background 0.2s;
}

.trip-gear-drop-zone.drag-over {
  border-color: var(--primary);
  background: var(--primary-light);
}

.empty-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  color: var(--text-muted);
  text-align: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem;
}

.empty-pack-svg {
  width: 80px;
  height: 80px;
  color: var(--border);
  opacity: 0.7;
  margin-bottom: 0.25rem;
}

.empty-drop-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

.trip-gear-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.trip-category-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.category-header {
  font-size: 1rem;
  color: var(--secondary-color);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 0.5rem;
}

.trip-gear-item {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.9rem;
  transition: box-shadow var(--transition);
}

.trip-gear-item:hover { box-shadow: var(--shadow); }
.trip-gear-item.packed { background: var(--success-light); border-color: rgba(22,163,74,0.3); }

.trip-gear-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.trip-gear-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.packed-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  flex: 1;
}

.packed-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.packed-checkbox input[type="checkbox"]:checked + .gear-name {
  text-decoration: line-through;
  opacity: 0.7;
}

.gear-name {
  font-weight: 500;
  font-size: 1rem;
}

.gear-quantity {
  font-size: 0.9rem;
  color: var(--text-secondary);
  background: var(--light-gray);
  padding: 0.25rem 0.75rem;
  border-radius: 0;
}

.trip-gear-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.gear-weight-each,
.gear-weight-total {
  padding: 0.25rem 0.5rem;
  background: var(--light-gray);
  border-radius: 0;
}

.gear-weight-total {
  font-weight: 500;
  color: var(--primary-color);
}

.btn-remove {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0;
  transition: all 0.2s;
}

.btn-remove:hover {
  background: var(--danger-light);
  transform: scale(1.15);
}


@media (max-width: 768px) {
  .drag-drop-container { grid-template-columns: 1fr; }
  .planner-columns { grid-template-columns: 1fr; }
  .planner-col-divider { display: none; }
  .planner-col--gear {
    border-bottom: 1px solid var(--border);
    max-height: 70vh;
  }
  .planner-col--pack { max-height: 70vh; }
  .gear-items { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Trip Pack Page – Tab navigation
   --------------------------------------------------------- */
.page-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem;
}

.page-tab {
  padding: 0.6rem 1.25rem;
  border: none;
  background: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition), border-color var(--transition);
}

.page-tab:hover { color: var(--primary); }
.page-tab.active {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

/* ---------------------------------------------------------
   Trip Pack Panel – distinct background
   --------------------------------------------------------- */
.trip-gear-panel {
  background: var(--surface-raised);
  overflow: hidden;
}

.stat-cartoon {
  width: 26px;
  height: 26px;
  color: var(--primary);
  flex-shrink: 0;
}

.pack-weight-bar-track {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin: 0.25rem 0 0.1rem;
}
.pack-weight-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--primary);
  transition: width 0.4s ease;
}
.pack-weight-bar-fill--under { background: var(--success, #22c55e); }
.pack-weight-bar-fill--close { background: var(--warning, #f59e0b); }
.pack-weight-bar-fill--over  { background: var(--danger, #ef4444); }

/* ---------------------------------------------------------
   Packed gear cards (same .gear-card layout as available)
   --------------------------------------------------------- */
.trip-gear-panel .gear-card,
.packed-gear-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem;
  gap: 0.35rem;
  overflow: visible;
  box-shadow: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform 0.25s ease-in, opacity 0.25s ease-in;
  cursor: pointer;
  position: relative;
}

.packed-gear-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.packed-gear-card.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.packed-gear-card.removing {
  transform: translateX(60px);
  opacity: 0;
  pointer-events: none;
}

.packed-gear-card.packed {
  border-color: var(--primary);
  background: var(--primary-light);
}

.packed-gear-card.packed .packed-label {
  color: var(--primary-dark);
  font-weight: 600;
}

.packed-card-thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.trip-gear-panel .gear-weight {
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
}

/* Packed status footer row */
.packed-card-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.packed-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.packed-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.packed-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.gear-qty-badge {
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--primary-light);
  color: var(--primary);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Quantity +/- stepper on packed card */
.gear-qty-stepper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: default;
}

.qty-step-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-sunken);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.qty-step-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}

.qty-value {
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 1.5rem;
  text-align: center;
  color: var(--text-primary);
}

.qty-total-weight {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Planning notes input directly on card */
.gear-card-notes-row {
  margin-top: 0.4rem;
  cursor: default;
}

.gear-card-notes-input,
.gear-card-notes-row .form-control--sm {
  width: 100%;
  cursor: text;
}

.gear-card-notes-display {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Edit icon button on packed card — sits in the header row */
.btn-card-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.75rem;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity var(--transition), background var(--transition), border-color var(--transition);
}

.packed-gear-card:hover .btn-card-edit,
.btn-card-edit:hover {
  opacity: 1;
  background: var(--primary-light);
  border-color: var(--primary);
}

/* Inline edit form */
.inline-edit-form {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}

.inline-edit-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.inline-edit-label {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  gap: 0.2rem;
}

.inline-edit-label--notes { flex: 1; min-width: 100px; }

.form-control--sm {
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  width: 4rem;
}

.inline-edit-label--notes .form-control--sm { width: 100%; }

/* Notes inputs inside list rows should fill their grid cell */
.pack-list-notes .form-control--sm,
.pack-list-notes .inline-notes { width: 100%; }

.inline-edit-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------
   Category nav bar (replaces wizard dots + add-to-pack)
   --------------------------------------------------------- */
.category-nav-bar {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  display: flex;
  align-items: center;
  /* A flex item defaults to min-width:auto, so without this the chip row
     refuses to shrink below its content and pushes the whole planner box
     sideways at mobile width — .category-nav-chips never gets to scroll. */
  min-width: 0;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
}

.category-nav-chips {
  flex: 1;
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
  min-width: 0;
}
.category-nav-chips::-webkit-scrollbar { display: none; }

.category-nav-chip {
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  background: none;
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.category-nav-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.category-nav-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-primary);
  font-weight: 600;
}
.category-nav-chip--all {
  border-style: dashed;
}
.category-nav-chip--all.active {
  border-style: solid;
}

.cat-nav-arrow {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: none;
  border: 1.5px solid var(--border);
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  line-height: 1;
  transition: border-color var(--transition), color var(--transition);
}
.cat-nav-arrow:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}
.cat-nav-arrow:disabled { opacity: 0.3; cursor: default; }

/* ---------------------------------------------------------
   Wizard step navigation
   --------------------------------------------------------- */
.wizard-step {
  padding: 0.5rem 0 0.75rem;
}

.wizard-step-header {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  margin-bottom: 0.75rem;
  padding: 0.4rem 0.75rem;
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  border-radius: 0 6px 6px 0;
}

.wizard-step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
}

.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  margin-top: 0;
}

.wizard-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.wizard-step-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.step-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}

.step-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  display: inline-block;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  padding: 2px;
  box-sizing: content-box;
  margin: -2px;
}

.step-dot:hover { background: var(--primary-hover, var(--primary)); transform: scale(1.3); }
.step-dot.active { background: var(--primary); }

.dot-nav-btn {
  background: none;
  border: none;
  padding: 0 2px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: color var(--transition);
}
.dot-nav-btn:hover:not(:disabled) { color: var(--primary); }
.dot-nav-btn:disabled { opacity: 0.3; cursor: default; }

.wizard-buttons {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.btn-outline {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: none;
  cursor: pointer;
  color: var(--text-secondary);
  transition: border-color var(--transition), color var(--transition);
}
.btn-outline:hover, .btn-outline.active {
  border-color: var(--primary);
  color: var(--primary);
}

/* Load from Pack step styles */
.wizard-load-pack,
.wizard-save-pack {
  margin-bottom: 1rem;
}

.load-pack-form,
.save-pack-form {
  display: contents;
}

.load-pack-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* Always-visible multiselect bar */
.gear-multiselect-bar--always {
  display: flex !important;
  margin-top: 0.75rem;
}

/* ---------------------------------------------------------
   Overview tab
   --------------------------------------------------------- */
.overview-panel {
  max-width: 700px;
}

.overview-panel h2 {
  margin-bottom: 1.25rem;
  color: var(--primary);
}

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

.overview-section {
  margin-bottom: 2rem;
}

.overview-section h3 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  padding-bottom: 0;
  border-bottom: none;
}

.category-weight-row {
  display: grid;
  grid-template-columns: 8rem 1fr 4rem 2.5rem;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.cat-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weight-bar-track {
  height: 8px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.weight-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  transition: width 0.4s ease;
  min-width: 2px;
}

.cat-weight {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}

.cat-pct {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: right;
}

.missing-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.missing-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .category-weight-row { grid-template-columns: 6rem 1fr 3rem 2rem; gap: 0.4rem; }
  .wizard-nav { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------
   Profile Page
   --------------------------------------------------------- */
.profile-page {
  max-width: 800px;
  margin: 0 auto;
}

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

.profile-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

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

.profile-label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.profile-value {
  color: var(--text-primary);
  font-size: 0.9375rem;
}

.plan-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.plan-badge--free {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.plan-badge--pro {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.plan-badge--premium {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: white;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat {
  background: var(--surface);
  padding: 1.25rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  text-align: center;
}

.stat__value {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

.profile-locale-card {
  margin-top: 1.5rem;
}

/* ── Billing page ──────────────────────────────────────────────────────── */

.billing-page {
  max-width: 860px;
  margin: 0 auto;
}

.billing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--surface);
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}

.billing-banner--pro {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  border-color: var(--primary);
  background: var(--primary-light);
}

.billing-banner__left {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.billing-banner__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.billing-banner__plan {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
}

.billing-banner--pro .billing-banner__plan {
  color: var(--primary-dark);
}

.billing-banner__desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.billing-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.billing-plan-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.billing-plan-card--pro {
  border-color: var(--primary);
}

.billing-plan-card--current {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.billing-plan-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.billing-plan-card__name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.billing-plan-card__badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
}

.billing-plan-card__badge--current {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.billing-plan-card__badge--popular {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.billing-plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.billing-plan-card__amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.billing-plan-card__period {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.billing-plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.billing-plan-card__feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.billing-plan-card__feature--no {
  color: var(--text-muted);
}

.bpf-icon {
  flex-shrink: 0;
  width: 1.1rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.billing-plan-card__feature--yes .bpf-icon {
  color: var(--success, #2e7d32);
}

.billing-plan-card__feature--no .bpf-icon {
  color: var(--text-muted);
}

.billing-plan-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

.billing-plan-card__annual-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

@media (max-width: 600px) {
  .billing-plans {
    grid-template-columns: 1fr;
  }

  .billing-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .profile-stats {
    grid-template-columns: 1fr;
  }
  
  .profile-actions {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------
   Inline Gear Editing Styles
   --------------------------------------------------------- */

/* Edit mode table styles */
.gear-table.edit-mode tbody td[data-field]:not([data-field="actions"]):not([data-field="trips"]):not([data-field="total"]) {
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
}

.gear-table.edit-mode tbody td[data-field]:not([data-field="actions"]):not([data-field="trips"]):not([data-field="total"]):hover {
  background-color: var(--primary-light);
  box-shadow: inset 0 0 0 1px var(--primary);
}

/* Inline edit inputs */
.inline-edit-input,
.inline-edit-select {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius);
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text-primary);
  font-family: inherit;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

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

/* Saving and saved states */
.gear-table td.saving {
  background-color: var(--warning-light);
  animation: pulse 1s ease-in-out infinite;
}

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

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

/* Add row button */
.btn-add-row {
  margin-top: 1rem;
  width: 100%;
  padding: 0.75rem;
  font-size: 0.95rem;
}

/* Inline add form */
.inline-add-form {
  padding: 1rem 0;
}

.inline-add-fields {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.inline-add-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text-primary);
  flex: 1 1 150px;
}

.inline-add-input--sm {
  flex: 0 1 80px;
}

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

#add-row-form {
  /* Muted text loses AA on this ground — see --brand-ink-subtle. */
  --text-muted: var(--text-muted-on-sunken);
  background: var(--surface-sunken);
}

#add-row-form td {
  border-bottom: none;
}

/* Edit mode button states */
.btn-success {
  background-color: var(--success);
  color: #fff;
  border: 1px solid var(--success);
}

.btn-success:hover {
  background-color: var(--success-dark, #157347);
  border-color: var(--success-dark, #157347);
}

/* ── Checklist page (also used for print) ─────────────────────────────── */

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

.checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border);
}

.checklist-header__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--text-primary);
}

.checklist-header__sub {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

.checklist-header__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.checklist-actions {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.checklist-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.checklist-category-row th,
.checklist-category-row td {
  background-color: var(--brand-green, #4a7c59);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.4rem 0.6rem;
  text-align: left;
}

.checklist-col-headers th {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.checklist-row td {
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border-light, #e8e8e8);
  vertical-align: top;
}

.checklist-row--packed td {
  color: var(--text-muted);
}

/* `.checklist-check` used to style a text glyph in the packed column and
   `.checklist-check--done` styled its ticked state. Both were left behind when
   that column became a real checkbox, and neither appears in any template. The
   name is now the label wrapping the checkbox — see the mobile section at the
   foot of this file. */

.checklist-subtotal-row td {
  padding: 0.3rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  background-color: var(--surface-alt, #f5f5f3);
}

.checklist-col--subtotal-label {
  text-align: right;
}

col.checklist-col--packed { width: 2.5rem; }
col.checklist-col--weight { width: 5rem; }
col.checklist-col--qty    { width: 3rem; }

.checklist-col--packed { text-align: center; }
.checklist-col--name   { min-width: 8rem; }
.checklist-col--notes  { color: var(--text-muted); font-size: 0.85rem; }
.checklist-col--weight { text-align: right; }
.checklist-col--qty    { text-align: center; }

/* Form reset inside packed checkbox cell */
.checklist-col--packed form { display: contents; }
.checklist-col--packed input[type="checkbox"] { cursor: pointer; width: 1rem; height: 1rem; }

.checklist-grand-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.6rem;
  border-top: 2px solid var(--border);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Checklist tasks section ─────────────────────────────── */
.checklist-tasks-section {
  margin-top: 2rem;
}

.checklist-tasks-header-row td {
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.6rem;
  border-top: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.checklist-tasks-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.checklist-task-row td {
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border-light, #e8e8e8);
  vertical-align: middle;
}

.checklist-task-col--complete {
  width: 2.5rem;
  text-align: center;
}

.checklist-task-col--complete form { display: contents; }

.checklist-task-complete {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 50%;
  transition: color 0.15s;
}

.checklist-task-complete:hover { color: var(--color-success, #16a34a); }

.checklist-task-complete svg {
  width: 1rem;
  height: 1rem;
}

.checklist-task-col--title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.checklist-task-priority {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.checklist-task-priority--high   { background: #dc2626; }
.checklist-task-priority--medium { background: #ea8c00; }
.checklist-task-priority--low    { background: var(--border-color); border: 1px solid var(--text-muted); }

.checklist-task-title { flex: 1; }

.checklist-task-title--overdue { color: var(--danger); }

.checklist-task-context {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.checklist-task-col--due {
  text-align: right;
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
  width: 5rem;
}

.checklist-task-due--overdue {
  color: var(--danger);
  font-weight: 600;
}

.checklist-tasks-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Print styles ─────────────────────────────────────────────────────── */

.print-only { display: none; }

@media print {
  .no-print,
  .header,
  .footer,
  .checklist-actions,
  .layouts-flash {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .container {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  .checklist-page {
    max-width: 100%;
    padding: 0;
  }

  .checklist-header {
    border-bottom-color: #000;
  }

  .checklist-category-row th {
    background-color: #2a5234 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .checklist-table,
  .checklist-row td,
  .checklist-col-headers th {
    border-color: #aaa;
  }

  .checklist-subtotal-row td {
    background-color: #f0f0f0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  a[href]::after {
    content: none !important;
  }
}


/* =============================================================
   Mobile Navigation — Hamburger + Drawer
   ============================================================= */

/* Hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background var(--transition);
}

.nav-hamburger:hover {
  background: rgba(41, 46, 51, 0.06);
}

.nav-hamburger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Animated X when open */
.nav--open .nav-hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav--open .nav-hamburger__bar:nth-child(2) {
  opacity: 0;
}
.nav--open .nav-hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer — hidden by default */
.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 2px solid var(--primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 200;
  overflow-y: auto;
  max-height: calc(100dvh - 64px);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

/* Overlay — hidden by default */
.mobile-menu__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 199;
  backdrop-filter: blur(2px);
}

/* Open state */
.nav--open .mobile-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav--open .mobile-menu__overlay {
  display: block;
}

.nav__list,
.mobile-menu__list {
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
}

.mobile-menu__list {
  border-bottom: 1px solid var(--border);
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  padding: 0.875rem 1.25rem;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  min-height: 44px;
  transition: background var(--transition), color var(--transition);
}

.mobile-menu__link:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
  text-decoration: none;
}

.mobile-menu__link.nav-link--active {
  color: var(--primary);
  font-weight: 700;
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
  padding-left: calc(1.25rem - 3px);
}

.mobile-menu__link--admin {
  color: var(--danger);
}

.mobile-menu__link--admin:hover {
  background: rgba(220, 38, 38, 0.08);
}

/* Profile row — links to user settings */
.mobile-menu__profile {
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
}

.mobile-menu__profile-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  color: var(--text-primary);
  text-decoration: none;
  min-height: 52px;
  transition: background var(--transition), color var(--transition);
}

.mobile-menu__profile-link:hover {
  background: var(--surface-sunken);
  color: var(--primary);
  text-decoration: none;
}

.mobile-menu__profile-avatar {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.mobile-menu__profile-name {
  flex: 1;
  font-weight: 500;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-menu__profile-chevron {
  font-size: 1.25rem;
  color: var(--text-muted);
  flex-shrink: 0;
  line-height: 1;
}

/* Language switcher — flat pill buttons (no dropdown; avoids overflow clipping) */
.mobile-menu__lang {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
  flex-wrap: wrap;
}

.mobile-menu__lang-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.mobile-menu__lang-options {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.mobile-menu__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  font-family: inherit;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
  min-height: 36px;
}

.mobile-menu__lang-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.mobile-menu__lang-btn--active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

/* Footer row — logout or login/signup */
.mobile-menu__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
}

.mobile-menu__logout-btn {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  transition: background var(--transition);
  min-height: 44px;
}

.mobile-menu__logout-btn:hover {
  background: var(--primary-dark);
}

/* Public footer: login + signup side by side */
.mobile-menu__footer--public {
  gap: 0.5rem;
}

.mobile-menu__footer-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  background: var(--surface);
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  min-height: 44px;
  text-decoration: none;
  transition: background var(--transition);
}

.mobile-menu__footer-link:hover {
  background: var(--surface-sunken);
  text-decoration: none;
}

.mobile-menu__footer-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  min-height: 44px;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition);
}

.mobile-menu__footer-btn:hover {
  background: var(--primary-dark);
  text-decoration: none;
}

/* =============================================================
   Mobile — Scroll-shrink compact header
   Applied via .header--scrolled added by MobileNavController
   ============================================================= */

@media (max-width: 768px) {
  /* Compact nav on mobile by default — less padding than desktop */
  .nav,
  .public-nav {
    min-height: 56px;
  }

  /* Compact state when user has scrolled past 50 px */
  .header--scrolled .nav,
  .header--scrolled .public-nav {
    min-height: 44px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  /* Fade out the brand text when scrolled (logo remains visible) */
  .header--scrolled .nav-brand-text {
    opacity: 0;
    max-width: 0;
  }

  /* Update mobile-menu max-height when header is shorter */
  .header--scrolled .mobile-menu {
    max-height: calc(100dvh - 44px);
  }

  /* Slightly deeper shadow to reinforce depth when scrolled */
  .header--scrolled,
  .public-header.header--scrolled {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 1px 0 var(--border);
  }
}

/* =============================================================
   Mobile — Global responsive overrides
   Breakpoints:
     tablet    ≤ 900px
     mobile    ≤ 768px
     mobile-sm ≤ 480px
   ============================================================= */

@media (max-width: 900px) {
  /* Two-column grids collapse to single column */
  .card-grid-2col,
  .gear-grid-2col,
  .stats-2col {
    grid-template-columns: 1fr;
  }

  /* Form rows collapse to single column */
  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* Show hamburger; hide desktop nav items */
  .nav-hamburger { display: flex; }
  .nav-menu      { display: none; }
  .nav-user      { display: none; }

  /* Public header: hide desktop links/actions, show hamburger */
  .public-nav__links   { display: none; }
  .public-nav__actions { display: none; }

  /* Show mobile drawer and overlay at this breakpoint */
  .mobile-menu        { display: block; }
  /* Adjust max-height now that mobile nav is 56px instead of 64px */
  .mobile-menu        { max-height: calc(100dvh - 56px); }

  /* Ensure headers are the positioning context for the drawer */
  .header,
  .public-header {
    position: sticky;
    top: 0;
    overflow: visible;
  }

  /* Touch-friendly buttons */
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-danger {
    min-height: 44px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  /* Tables — allow horizontal scroll instead of breaking layout */
  .table-wrapper,
  .gear-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Page header action buttons stack below heading */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
  }

  /* Card grids collapse to single column */
  .card-grid,
  .gear-grid {
    grid-template-columns: 1fr;
  }

  /* Filter bar stacks vertically */
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-bar input,
  .filter-bar select {
    width: 100%;
  }

  /* Stat strips collapse to two columns */
  .stats-row {
    grid-template-columns: 1fr 1fr;
  }

  /* Flash messages full-width */
  .flash {
    border-radius: 0;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
  }
}

@media (max-width: 480px) {
  /* Single-column stats on very small screens */
  .stats-row {
    grid-template-columns: 1fr;
  }

  /* Nav brand text hides to save space (logo remains) */
  .nav-brand-text {
    display: none;
  }

  /* Tighter container padding */
  .container {
    padding: 0.75rem 0.625rem;
  }

  /* Full-width primary actions */
  .btn-primary--block,
  .form-actions .btn-primary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Trip / pack cards full-width */
  .trips-grid,
  .packs-grid {
    grid-template-columns: 1fr;
  }

  /* Reduce heading scale on very small screens */
  h1 { font-size: 1.375rem; }
  h2 { font-size: 1.25rem; }
}

/* ── Pack cards ────────────────────────────────────────────────────────── */

.packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

.packs-summary {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

.packs-summary__stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.packs-summary__value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}

.packs-summary__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.pack-card-wrap {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s, box-shadow 0.18s;
}

.pack-card-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
}

.pack-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.25rem;
  text-decoration: none;
  color: var(--text-primary);
  flex: 1;
}

.pack-card:hover { text-decoration: none; }

.pack-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.pack-card__title-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pack-card__name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  color: var(--text-primary);
}

.pack-card__type-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.pack-card__transport {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.pack-card__stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.pack-card__stat {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.pack-card__stat strong {
  color: var(--text-primary);
}

.pack-card__limit {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.pack-card__bar {
  margin-top: 0.25rem;
}

.pack-card__actions {
  display: flex;
  border-top: 1px solid var(--border);
}

.pack-card__action-btn {
  flex: 1;
  padding: 0.55rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
}

.pack-card__action-btn + .pack-card__action-btn {
  border-left: 1px solid var(--border);
}

.pack-card__action-btn:hover {
  background: var(--surface-raised);
  color: var(--text-primary);
  text-decoration: none;
}

.pack-card__action-btn--danger:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   Mobile companion UX (#453 Phase 2)

   The desktop layout stays the baseline; everything below is a max-width
   override, per the convention in docs/plans/mobile-browser-support.md.
   Breakpoints: 768 px (mobile), 480 px (mobile-sm).

   Scope note: these styles serve the *companion* journeys — checking a packing
   list, adding gear, getting between the four core sections. Planning surfaces
   (the pack planner, the optimizer, admin) are deliberately left alone; they
   are big-screen work, and squeezing them onto a phone is a different and much
   larger job.
   ══════════════════════════════════════════════════════════════════════════ */

/* Visually hidden but available to screen readers. Used for the checklist
   checkbox labels, whose visible text lives in the adjacent cell. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Bottom navigation ──────────────────────────────────────────────────── */

/* Desktop keeps the horizontal nav bar; this only exists below the breakpoint. */
.bottom-nav { display: none; }

@media (max-width: 768px) {
  .bottom-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Under the drawer overlay (199) so an open menu covers it, above content. */
    z-index: 150;
    background: var(--surface);
    border-top: 1px solid var(--border);
    /* Clears the iOS home indicator without leaving a gap on other devices. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  }

  .bottom-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    /* Comfortably past the 44 px touch-target floor. */
    min-height: 56px;
    padding: 0.4rem 0.25rem;
    background: none;
    border: 0;
    font: inherit;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
  }

  .bottom-nav__link--active { color: var(--primary); }

  .bottom-nav__icon {
    display: block;
    width: 24px;
    height: 24px;
  }

  .bottom-nav__icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .bottom-nav__label {
    font-size: 0.7rem;
    line-height: 1.1;
    /* A long label ("Statistiken") must not push the row taller. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Keep the last screenful clear of the fixed bar — but only on pages that
     actually have one. The class is set by the application layout when signed
     in; signed-out pages, admin and the phone layout never render the nav and
     would otherwise carry 56 px of dead space. */
  body.has-bottom-nav {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Floating action button ─────────────────────────────────────────────── */

.fab { display: none; }

@media (max-width: 768px) {
  .fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 1rem;
    /* Sits above the bottom nav rather than on top of it. */
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 1rem);
    z-index: 160;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--text-on-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    text-decoration: none;
  }

  .fab__icon {
    display: block;
    width: 24px;
    height: 24px;
  }

  .fab__icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}

/* An open drawer covers the screen; a button floating over it looks broken. */
.nav--open ~ .container .fab,
.nav--open ~ main .fab {
  display: none;
}

/* ── Packing progress ───────────────────────────────────────────────────── */

.checklist-progress {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 1rem 0;
}

.checklist-progress__bar {
  height: 8px;
  border-radius: 4px;
  /* Bar tracks are the soft line, not the forest tint — the fill is the forest. */
  background: var(--divider);
  overflow: hidden;
}

.checklist-progress__fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.2s ease;
}

.checklist-progress__text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Hidden until the controller reports a failed save. */
.checklist-save-error { display: none; }

.checklist-page--error .checklist-save-error {
  display: block;
  margin: 0 0 1rem;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  background: #fdecec;
  color: #8a1c1c;
  font-size: 0.9rem;
}

/* ── Checklist tick target ──────────────────────────────────────────────── */

.checklist-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The label is the tap target, not just the 16 px native box. */
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.checklist-check input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.checklist-check__box {
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  transition: background 0.15s, border-color 0.15s;
}

/* The tick: a rotated corner of a border, which gives a real checkmark. Drawn
   always and revealed on check, so toggling costs no layout. */
.checklist-check__box::after {
  content: "";
  display: block;
  width: 6px;
  height: 11px;
  margin: 0 auto;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
  opacity: 0;
}

.checklist-check input:checked + .checklist-check__box {
  background: var(--primary);
  border-color: var(--primary);
}

.checklist-check input:checked + .checklist-check__box::after { opacity: 1; }

.checklist-check input:focus-visible + .checklist-check__box {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Checklist as cards on mobile ───────────────────────────────────────── */

@media (max-width: 768px) {
  .checklist-progress {
    position: sticky;
    /* Below the sticky header, which sits at 100. */
    top: 0;
    z-index: 90;
    margin: 0 0 1rem;
    padding: 0.75rem 0;
    background: var(--bg);
  }

  /* A five-column table does not survive 375 px. Same markup, restacked as
     cards, so print and desktop keep the table they were designed around. */
  .checklist-table,
  .checklist-table tbody,
  .checklist-table tr,
  .checklist-table td {
    display: block;
    width: auto;
  }

  .checklist-table thead,
  .checklist-table colgroup { display: none; }

  /* Qualified with the table so it outranks `.checklist-table tr { display: block }`
     above — a bare `.checklist-row` loses that tie and the cards stay stacked. */
  /* One card per item: tick, name, and the two numbers on a single line, with
     any note wrapping underneath. Named areas rather than auto-placement,
     because the cells arrive in table order (tick, name, notes, weight, qty)
     and the note belongs on the second row. */
  .checklist-table tr.checklist-row {
    display: grid;
    grid-template-columns: 44px 1fr auto auto;
    grid-template-areas:
      "check name  qty weight"
      "check notes notes notes";
    align-items: center;
    column-gap: 0.5rem;
    padding: 0.35rem 0.25rem;
    border-bottom: 1px solid var(--border);
  }

  /* The cells draw the card, so their own rules must not draw it again. */
  .checklist-row td {
    padding: 0;
    border-bottom: 0;
    vertical-align: middle;
  }

  .checklist-row .checklist-col--packed { grid-area: check; }

  .checklist-row .checklist-col--name {
    grid-area: name;
    font-weight: 600;
    line-height: 1.3;
  }

  .checklist-row .checklist-col--qty {
    grid-area: qty;
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  .checklist-row .checklist-col--weight {
    grid-area: weight;
    min-width: 3.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  .checklist-row .checklist-col--notes {
    grid-area: notes;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
  }

  /* An empty note must not reserve its row. */
  .checklist-row .checklist-col--notes:empty { display: none; }

  .checklist-row--packed .checklist-col--name {
    text-decoration: line-through;
    color: var(--text-muted);
  }

  /* The desktop table uses a solid green band as a group header. Between cards
     that reads as a block of colour rather than a label, so on mobile it becomes
     plain text — and the background has to go with the white text it was paired
     with, or the muted colour below lands on green and is unreadable. */
  .checklist-category-row td {
    padding: 1rem 0 0.35rem;
    background: none;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
  }

  /* Per-category subtotals are a planning detail; the grand total below is the
     number that matters while packing. Qualified with the table for the same
     reason as the row rule above — `.checklist-table tr` would otherwise win. */
  .checklist-table tr.checklist-subtotal-row { display: none; }
}

/* ── Page headers ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Title beside actions costs most of the screen before any content appears.
     Stacked, the trip header goes from roughly half a viewport to a third. */
  .page-header {
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 0.65rem;
    margin-bottom: 1rem;
  }

  .page-header h1 {
    margin: 0;
    font-size: 1.4rem;
  }

  /* Without this the badges are flex items in a row sized by the Edit/Delete
     buttons, so `stretch` pulls a 20 px pill up to 44 px and border-radius:99px
     turns it into a circle. */
  .header-actions { align-items: center; }
}

/* ── Tab rows scroll rather than crush ──────────────────────────────────── */

@media (max-width: 768px) {
  /* A trip has six tabs. Wrapping them makes a two-line block that pushes the
     content down; squashing them makes six unreadable stubs. Scrolling keeps
     each one full size and legible. */
  .article-filters {
    margin: 1.25rem 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .article-filters::-webkit-scrollbar { display: none; }

  .filter-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.75rem 1rem;
    white-space: nowrap;
  }
}

/* ── Forms as full-width sheets ─────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Side-by-side field pairs stack; nothing useful fits in half of 375 px. */
  .form-row { display: block; }

  .form-row > * + * { margin-top: 1rem; }

  /* 16 px is the threshold below which iOS Safari zooms the viewport on focus,
     and it does not zoom back out afterwards. */
  .form-control,
  .filter-input,
  .filter-select {
    min-height: 44px;
    font-size: 16px;
  }

  /* The submit/cancel pair becomes a bar pinned above the bottom nav, so a long
     form does not have to be scrolled to the end before it can be saved. */
  .form-actions {
    position: sticky;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 80;
    display: flex;
    /* The base rule wraps; at this width that stacks the pair into two
       full-width rows and eats half the remaining screen. */
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin: 1.5rem -1rem 0;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
  }

  /* `1 1 0` rather than `1 1 auto`: sizing from content would give "Create Gear
     item" three times the width of "Cancel". */
  .form-actions > * {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-align: center;
  }

  /* Room to scroll the last field clear of the pinned action bar. */
  form { padding-bottom: 1rem; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
  /* .bottom-nav lives inside .header, which the print block above already hides. */
  .fab,
  .checklist-progress,
  .checklist-save-error {
    display: none !important;
  }
}