/* Borrow — mobile first. Warm paper, ink and a festival-rust accent.
   Every text colour meets WCAG AA (4.5:1) and form edges 3:1, in both
   themes. Type is Atkinson Hyperlegible, built for easy reading. */

:root {
  --paper: #f6f1e9;
  --card: #fffdf8;
  --ink: #1a1612;
  --muted: #5c5247;
  --line: #e4dacb;
  --field: #8f8274;
  --accent: #b13d17;
  --accent-ink: #ffffff;
  --accent-soft: #f8e1d6;
  --ok: #1d6b43;
  --ok-soft: #dcefe3;
  --out: #7a4a05;
  --out-soft: #f8e7c6;
  --bad: #a61f17;
  --bad-soft: #fbdcd8;
  --on-bad: #ffffff;
  --radius: 14px;
  --shadow: 0 1px 0 rgb(31 26 20 / 6%), 0 6px 18px -10px rgb(31 26 20 / 25%);
  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --tabs-height: 64px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12100e;
    --card: #1d1a17;
    --ink: #f6f1e9;
    --muted: #bdb2a5;
    --line: #36302a;
    --field: #7d7166;
    --accent: #ff8f63;
    --accent-ink: #1a0f0a;
    --accent-soft: #4a2718;
    --ok: #86d9a8;
    --ok-soft: #16301f;
    --out: #f5c46e;
    --out-soft: #3a2b10;
    --bad: #ff9b90;
    --bad-soft: #47201c;
    --on-bad: #1a0f0a;
    --shadow: 0 1px 0 rgb(0 0 0 / 30%);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  /* No grey flash on tap; our own :active states give feedback instead. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100dvh;
  /* Stop the page bouncing behind fixed bars and sheets. */
  overscroll-behavior-y: none;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 var(--font);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 640px;
  margin: 0 auto;
  /* Clear of the notch / status bar when opened from the home screen. */
  padding: calc(16px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(var(--tabs-height) + 32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  outline: none;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 1.75rem;
  font-weight: 800;
}

h2 {
  font-size: 1.15rem;
  font-weight: 750;
}

h3 {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.row > * {
  flex: 1 1 0;
  min-width: 0;
}

.row--wrap {
  flex-wrap: wrap;
}

.row--wrap > * {
  flex: 1 1 auto;
  white-space: nowrap;
}

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

.small {
  font-size: 0.875rem;
}

.prewrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.loading,
.empty {
  color: var(--muted);
  padding: 24px 0;
  text-align: center;
}

.error-box {
  background: var(--bad-soft);
  color: var(--bad);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
}

.notice {
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 650;
}

.notice--overdue {
  width: 100%;
  border: 0;
  background: var(--bad-soft);
  color: var(--bad);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.button:disabled {
  opacity: 0.55;
  cursor: progress;
}

.button--primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.button--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--field);
}

.button--danger {
  background: transparent;
  color: var(--bad);
  border-color: var(--bad-soft);
}

.button--wide {
  width: 100%;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.page-header__actions .icon-button {
  margin-left: 0;
}

/* Forms */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label,
.choices legend {
  font-weight: 700;
  font-size: 0.95rem;
}

input:not([type="radio"]),
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1.5px solid var(--field);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

/* Lighter than typed text so an empty box doesn't look filled in, but still readable. */
::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

input[type="file"] {
  padding: 10px;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: none;
}

[aria-invalid="true"] {
  border-color: var(--bad) !important;
}

.field__hint {
  color: var(--muted);
  font-size: 0.85rem;
}

.field__error {
  color: var(--bad);
  font-size: 0.875rem;
  font-weight: 650;
}

.code-input {
  font: 700 1.75rem/1 var(--mono);
  letter-spacing: 0.4em;
  text-align: center;
}

.choices {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choices legend {
  margin-bottom: 8px;
  padding: 0;
}

.choice {
  position: relative;
}

.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
}

.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--field);
  border-radius: 999px;
  background: var(--card);
  font-weight: 600;
  font-size: 0.95rem;
}

.choice input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.choice input:focus-visible + span {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Welcome (sign in / join) */

.welcome {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 12vh;
}


.welcome h1 {
  margin-bottom: 8px;
  font-size: 2.4rem;
}

.welcome__sent {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.welcome__sent strong {
  color: var(--ink);
}

.welcome input:not([type="radio"]) {
  min-height: 56px;
  font-size: 1.1rem;
}

.welcome .code-input {
  min-height: 72px;
}

.welcome__foot {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

/* Browse */

.browse {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.browse__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
}

.browse__summary {
  font-weight: 600;
}

/* Search and categories stay put while the list scrolls under them. */
.browse__tools {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 -16px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
}

.search {
  position: relative;
  display: block;
}

.search .icon {
  position: absolute;
  left: 14px;
  top: 50%;
  translate: 0 -50%;
  color: var(--muted);
}

.search input {
  padding-left: 44px;
  border-radius: 999px;
}

.hero .icon {
  width: 40px;
  height: 40px;
  stroke-width: 1.4;
}

/* Luggage-tag status */

/* Page header */

.page-header {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 48px;
}

.page-header h1 {
  flex: 1;
  min-width: 0;
  font-size: 1.5rem;
  overflow-wrap: anywhere;
}

.page-header__actions {
  display: flex;
  margin-right: -10px;
}

/* Item */

.hero {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  font-size: 3rem;
}

.instructions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 12px;
  border-left: 3px solid var(--line);
}

.access {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
}

.access__details {
  font: 700 1.15rem/1.4 var(--mono);
}

.access__note {
  font-size: 0.8rem;
  opacity: 0.75;
}

.panel {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.panel--accent {
  background: var(--accent-soft);
  box-shadow: none;
}

/* Booking and skill lists */

.bookings,
.skills {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.bookings li + li,
.skills li + li {
  border-top: 1px solid var(--line);
}

.bookings a {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  text-decoration: none;
}

.bookings__dates {
  font-weight: 750;
}

/* The owner's own block: dates and "Kept for you", with Unblock on the right. */
.bookings__block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 14px;
}

.bookings__block > span {
  display: flex;
  flex-direction: column;
}

/* Booking ticket */

.ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  border-top: 6px solid var(--line);
}

.ticket--confirmed,
.ticket--returned {
  border-top-color: var(--ok);
}

.ticket--requested,
.ticket--picked_up {
  border-top-color: var(--out);
}

.ticket--overdue,
.ticket--declined {
  border-top-color: var(--bad);
}

.ticket__status {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.ticket__dates {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Tab bar */

.tabs {
  position: fixed;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}

.tabs[hidden] {
  display: none;
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 52px;
  justify-content: center;
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.tab .icon {
  width: 24px;
  height: 24px;
}

/* Add opens a chooser rather than a page, so it's a button. */
button.tab {
  border: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

.tab[aria-current="page"],
.tab[aria-current="true"] {
  color: var(--accent);
}

/* Toasts */

.toasts {
  position: fixed;
  inset: auto 16px calc(var(--tabs-height) + 16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast {
  max-width: 480px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 650;
  box-shadow: var(--shadow);
}

@media (min-width: 720px) {
  .tabs {
    inset: 0 auto auto 50%;
    translate: -50% 0;
    width: 360px;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px;
  }

  main {
    padding-top: 96px;
  }

  .toasts {
    bottom: 24px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .tile__photo,
  .button {
    transition: transform 120ms ease;
  }

  .tile:active .tile__photo,
  .button:active {
    transform: scale(0.98);
  }
}

/* ── Category tints: one hue per category, for icons, chips and placeholders ── */

.cat {
  --h: 20;
  background: hsl(var(--h) 70% 92%);
  color: hsl(var(--h) 60% 30%);
}

.cat--sound { --h: 14; }
.cat--power { --h: 42; }
.cat--lighting { --h: 52; }
.cat--shelter { --h: 150; }
.cat--camp { --h: 26; }
.cat--kitchen { --h: 195; }
.cat--garden { --h: 100; }
.cat--tools { --h: 215; }
.cat--transport { --h: 265; }
.cat--decor { --h: 330; }
.cat--other { --h: 35; }

@media (prefers-color-scheme: dark) {
  .cat {
    background: hsl(var(--h) 28% 18%);
    color: hsl(var(--h) 70% 76%);
  }
}

/* ── Chips ── */

.chips {
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 2px 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px 0 10px;
  border: 1.5px solid var(--field);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
}

.chip[aria-checked="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* ── Browse switch: Gear · Skills & services ── */

.switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1.5px solid var(--field);
  border-radius: 999px;
  background: var(--card);
}

.switch__option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 650;
  text-decoration: none;
}

.switch__option[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
}

/* ── Loading skeletons ── */

.bone {
  display: block;
  width: 70%;
  height: 0.9em;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line) 25%, color-mix(in srgb, var(--line) 45%, var(--card)) 50%, var(--line) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

.bone--title { width: 55%; height: 1.1em; }
.bone--tag { width: 30%; height: 1.2em; border-radius: 999px; }
.bone--heading { width: 60%; height: 1.75rem; }
.bone--block { width: 100%; height: 120px; border-radius: var(--radius); }
.bone--short { width: 40%; }

@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

/* ── Empty shed ── */

.empty-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 20px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.empty-hero__title {
  font-size: 1.2rem;
  font-weight: 800;
}

/* ── Skills & services ── */

/* Open requests: a sideways strip of cards that runs to the screen edges,
   with the next card peeking in so it's clear there's more. Every card is
   as tall as the tallest, with its reactions and buttons along the bottom. */
.asks__strip {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 0 -16px;
  padding: 2px 16px 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 16px;
  scrollbar-width: thin;
  list-style: none;
}

.ask {
  position: relative;
  display: flex;
  flex: 0 0 min(17rem, 82%);
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow-wrap: anywhere;
  scroll-snap-align: start;
}

/* The whole card opens the request's page: its title's link reaches over
   it, under the reactions and buttons, which keep their own taps. The focus
   ring goes round the card, inside it, where the strip doesn't clip it. */
.ask__open {
  text-decoration: none;
}

.ask__open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.ask__open:focus-visible {
  outline: none;
}

.ask__open:focus-visible::after {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.ask :is(.reaction, .ask__comments, .button) {
  position: relative;
  z-index: 1;
}

/* A sorted request steps back: no lift, just an outline. */
.ask--sorted {
  border: 1px solid var(--line);
  background: transparent;
  box-shadow: none;
}

.ask__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}

.ask__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--out-soft);
  color: var(--out);
  font-size: 0.85rem;
  font-weight: 700;
}

.ask__tag--learn {
  background: var(--accent-soft);
  color: var(--accent);
}

.ask__tag--sorted {
  background: var(--ok-soft);
  color: var(--ok);
}

.ask__tag .icon {
  width: 16px;
  height: 16px;
}

.ask__who,
.ask__details {
  font-size: 0.95rem;
}

.ask__details {
  color: var(--muted);
}

.ask__when {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 700;
}

.ask__when .icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

/* On a day: its date and time, shown under When? once it's picked. */
.help-when__day {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.help-when__day > .field {
  flex: 1 1 9rem;
}

/* A card shows the start of a long title or details; the request's page has the rest. */
.ask > strong,
.ask__details {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.ask > strong {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.ask__details {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.ask .button {
  min-height: 44px;
}

.ask__actions {
  margin-top: 8px;
}

.ask__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.asks__fold {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 14px;
}

.asks__fold .icon {
  color: var(--ok);
}

/* Reactions: a pill per emoji, with how many. Yours is filled in. */
.reactions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reactions__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.reaction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 44px;
  min-height: 40px;
  padding: 0 7px;
  border: 1.5px solid var(--field);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  cursor: pointer;
  touch-action: manipulation;
}

.reaction[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.reaction__count {
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.reaction__count:empty {
  display: none;
}

.reactions__who {
  font-size: 0.95rem;
}

.reactions__who:empty {
  display: none;
}

.ask .reactions {
  margin-top: auto;
  padding-top: 6px;
}

/* "2 comments", under the reactions on a card. */
.ask__comments {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 700;
  text-underline-offset: 3px;
}

/* ── A help request's own page ── */

.help-page__summary {
  gap: 8px;
}

.comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.comment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.comment__head time {
  font-size: 0.875rem;
}

/* A small bin in the top corner of your own comment; the tap area stays
   36 px but doesn't push the card taller. */
.comment__remove {
  width: 36px;
  height: 36px;
  margin: -8px -10px -8px auto;
  color: var(--muted);
}

.comment__remove .icon {
  width: 18px;
  height: 18px;
}

.comments-empty {
  padding: 0;
}

.comment-form {
  gap: 10px;
}

.comment-form .button {
  align-self: flex-end;
}

/* Skills: one short row each, the whole row a button that opens the sheet. */
.skill__open {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  padding: 8px 14px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.skill__open > .icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--muted);
}

.skill__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Who, then as much of the details as fits on one line. */
.skill__line {
  overflow: hidden;
  font-size: 0.95rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Skills by category: a card each, closed until its heading is tapped. The
   heading is the category and a count, then everyone in it on one line. */
.skill-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skill-group {
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.skill-group > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 8px 18px 8px 14px;
  cursor: pointer;
  list-style: none;
}

.skill-group > summary::after {
  flex: none;
  color: var(--muted);
}

.skill-group__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.skill-group__who {
  overflow: hidden;
  font-size: 0.95rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Open, its rows sit in the same card under a rule. */
.skill-group > .skills {
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: none;
  box-shadow: none;
}

.skill-sheet__who {
  margin-top: -6px;
  font-weight: 700;
}

/* A list's heading with a short Offer or Ask link beside it. */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-head .button {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
}

/* ── Menus: the Add chooser, and links on Me ── */

.menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  text-decoration: none;
}

button.menu__link {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.menu__link > .icon {
  width: 26px;
  height: 26px;
  color: var(--accent);
}

.menu__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Brand mark ── */

.brand {
  display: block;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 8px 14px rgb(177 61 23 / 35%));
}

/* ── Item page ── */

.item__description {
  font-size: 1.05rem;
}

details.howto {
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

details.howto > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

details.howto > summary::-webkit-details-marker,
.skill-group > summary::-webkit-details-marker {
  display: none;
}

details.howto > summary::after,
.skill-group > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate 150ms ease;
}

details.howto[open] > summary::after,
.skill-group[open] > summary::after {
  rotate: 225deg;
  translate: 0 3px;
}

details.howto[open] {
  padding-bottom: 16px;
}

details.howto > :not(summary) {
  margin: 12px 16px 0;
}

/* Book button that follows you down the page until the form is in view. */
.cta-bar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabs-height) + 12px + env(safe-area-inset-bottom));
  z-index: 8;
  width: min(100% - 32px, 608px);
  translate: -50% 0;
  transition: opacity 160ms ease, translate 160ms ease;
}

.cta-bar .button {
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / 45%);
}

/* Room at the bottom of item pages so the borrow bar never covers content. */
.item:has(.cta-bar) {
  padding-bottom: 72px;
}

/* ── Availability calendar ── */

.cal {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal__weekdays span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.cal__day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.cal__month {
  position: absolute;
  top: 2px;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.cal__day--past {
  background: transparent;
  color: var(--muted);
  opacity: 0.55;
  cursor: default;
}

.cal__day--booked {
  background: repeating-linear-gradient(-45deg, var(--bad-soft) 0 5px, transparent 5px 10px);
  color: var(--bad);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Kept by the owner: taken, like a booking, but in neutral grey. */
.cal__day--blocked {
  background: repeating-linear-gradient(-45deg, var(--line) 0 5px, transparent 5px 10px);
  color: var(--muted);
  text-decoration: line-through;
  cursor: not-allowed;
}

.cal__day--requested::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--out);
}

.cal__day--middle {
  background: var(--accent-soft);
  border-radius: 4px;
}

.cal__day--start,
.cal__day--end,
.cal__day--single {
  background: var(--accent);
  color: var(--accent-ink);
}

.cal__day--start { border-radius: 10px 4px 4px 10px; }
.cal__day--end { border-radius: 4px 10px 10px 4px; }

.cal__day--start .cal__month,
.cal__day--end .cal__month,
.cal__day--single .cal__month {
  color: inherit;
}

.cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

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

.cal__key::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.cal__key--requested::before {
  background: radial-gradient(circle at 50% 75%, var(--out) 2.5px, var(--paper) 3px);
}

.cal__key--booked::before {
  background: repeating-linear-gradient(-45deg, var(--bad-soft) 0 3px, transparent 3px 6px);
  border-color: var(--bad-soft);
}

.cal__key--blocked::before {
  background: repeating-linear-gradient(-45deg, var(--line) 0 3px, transparent 3px 6px);
}

.booking-form__chosen {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.booking-form__manual summary {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
}

.booking-form__manual[open] summary {
  margin-bottom: 10px;
}

/* ── Booking timeline and next step ── */

.timeline {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__step {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.timeline__step + .timeline__step::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--line);
}

.timeline__dot {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
}

.timeline__step--done {
  color: var(--ok);
}

.timeline__step--done .timeline__dot {
  border-color: var(--ok);
  background: var(--ok);
}

.timeline__step--done + .timeline__step::before {
  background: var(--ok);
}

.timeline__step--current {
  color: var(--ink);
}

.timeline__step--current .timeline__dot {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.timeline__step--stopped {
  color: var(--bad);
}

.timeline__step--stopped .timeline__dot {
  border-color: var(--bad);
  background: var(--bad);
}

/* Check-out and check-in: the photo and note kept at pick-up and return,
   and the folded fields that add them. */
.handover {
  padding: 14px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.handover__entry {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.handover__entry + .handover__entry {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.handover__photo img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 10px;
}

.handover-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.handover-form__fields[hidden] {
  display: none;
}

/* An item's history, and the link to it from the item page. */
.history-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.history__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One card per time it was borrowed, with what was kept inside it. */
.history__entry {
  gap: 0;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.history__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  color: inherit;
  text-decoration: none;
}

.history__entry .handover {
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: none;
}

/* Return reports: the borrower's pick at return, the tag that shows it, and
   the open ones on the item page. */
.return-report {
  gap: 8px;
}

.return-report .choices {
  margin: 0;
}

.report-tag {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 750;
  background: var(--ok-soft);
  color: var(--ok);
}

.report-tag--heads_up {
  background: var(--out-soft);
  color: var(--out);
}

.report-tag--needs_fixing {
  background: var(--bad-soft);
  color: var(--bad);
}

.reports__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.reports__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 16px;
}

.reports__item + .reports__item {
  border-top: 1px solid var(--line);
}

.reports__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.next-step {
  padding: 12px 14px;
  border-left: 4px solid var(--accent);
  border-radius: 4px 12px 12px 4px;
  background: var(--card);
  font-size: 1.02rem;
  font-weight: 600;
}

/* ── Add/edit form ── */

hr {
  width: 100%;
  margin: 4px 0;
  border: 0;
  border-top: 2px dashed var(--line);
}

.reveal {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reveal[hidden] {
  display: none;
}

.photo-pick {
  position: relative;
  border-color: var(--field) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 120px;
  overflow: hidden;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}

.photo-pick:focus-within {
  border-color: var(--accent);
}

.photo-pick__preview .icon {
  width: 40px;
  height: 40px;
}

.photo-pick__preview:has(img) {
  position: absolute;
  inset: 0;
}

.photo-pick__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-pick__preview:has(img) + .photo-pick__caption {
  position: absolute;
  bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(0 0 0 / 60%);
  color: #fff;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Tab bar extras ── */

.tab {
  position: relative;
}

.tab--new .icon {
  box-sizing: content-box;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  stroke-width: 2.2;
}

.tab__badge {
  position: absolute;
  top: 4px;
  left: calc(50% + 6px);
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 2px solid var(--paper);
  border-radius: 999px;
  background: var(--bad);
  color: var(--on-bad);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

@media (min-width: 720px) {
  .browse__tools {
    top: 72px;
  }

  .cta-bar {
    bottom: 24px;
  }

  .tab {
    flex-direction: row;
    gap: 6px;
    min-height: 40px;
  }

  .tab .icon {
    width: 20px;
    height: 20px;
  }

  .tab--new .icon {
    padding: 2px 8px;
  }

  .tab__badge {
    top: 2px;
    left: auto;
    right: 6px;
  }
}

/* ── Motion ── */

@media (prefers-reduced-motion: no-preference) {
  main > section {
    animation: rise 180ms ease-out;
  }

  .toast {
    animation: rise 200ms ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bone {
    animation: none;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.bookings__row--overdue {
  border-left: 4px solid var(--bad);
}

.bookings__row--overdue span:last-child {
  color: var(--bad);
  font-weight: 700;
}

/* ── Bigger targets for the main actions ── */

.button--big {
  min-height: 56px;
  font-size: 1.1rem;
}

.input--big {
  font-size: 1.15rem;
  font-weight: 650;
}

.link-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ── Bottom sheet ── */

body.sheet-open {
  overflow: hidden;
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgb(20 15 10 / 45%);
}

.sheet__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: var(--card);
  box-shadow: 0 -10px 40px -10px rgb(0 0 0 / 40%);
  outline: none;
}

.sheet__grip {
  display: block;
  width: 40px;
  height: 5px;
  margin: 0 auto 6px;
  border-radius: 999px;
  background: var(--line);
}

.sheet__close {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
}

.sheet__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sheet__title {
  padding-right: 44px;
  font-size: 1.3rem;
}

.sheet .cal__day {
  min-height: 38px;
}

.sheet textarea {
  margin-top: 4px;
}

/* The damage rule, agreed before the tap that borrows. */
.borrow__rule {
  padding: 10px 12px;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 0 4px;
  text-align: center;
}

.done__tick {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
}

.done__tick .icon {
  width: 34px;
  height: 34px;
  stroke-width: 2.4;
}

@media (min-width: 720px) {
  .sheet {
    align-items: center;
  }

  .sheet__panel {
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sheet {
    animation: fade 160ms ease-out;
  }

  .sheet__panel {
    animation: slide-up 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
  }
}

@keyframes fade {
  from { opacity: 0; }
}

@keyframes slide-up {
  from { transform: translateY(40px); opacity: 0.6; }
}

/* ── Category grid ── */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.cat-grid legend {
  margin-bottom: 8px;
  padding: 0;
  font-weight: 700;
  font-size: 0.95rem;
}

.cat-grid__option {
  position: relative;
  background: var(--card);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 6px 2px;
  border: 2px solid transparent;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.cat-grid__option input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.cat-grid__option .icon {
  width: 24px;
  height: 24px;
}

/* Neutral until picked, then the category's own colour. */
.cat-grid__option:has(input:checked) {
  border-color: currentcolor;
  background: hsl(var(--h) 70% 92%);
  color: hsl(var(--h) 60% 30%);
}

@media (prefers-color-scheme: dark) {
  .cat-grid__option:has(input:checked) {
    background: hsl(var(--h) 28% 18%);
    color: hsl(var(--h) 70% 76%);
  }
}

.cat-grid__option:has(input:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.cat-grid .field__error {
  grid-column: 1 / -1;
}

/* ── Folded sections in the add form ── */

.summary-card {
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.summary-card > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 16px;
  cursor: pointer;
  list-style: none;
}

.summary-card > summary::-webkit-details-marker {
  display: none;
}

.summary-card > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate 150ms ease;
}

.summary-card[open] > summary::after {
  rotate: 225deg;
  translate: 0 3px;
}

.summary-card__label {
  flex: none;
  font-weight: 750;
}

.summary-card__value {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-card[open] {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 16px;
}

.summary-card[open] > :not(summary) {
  margin: 0 16px;
}

/* The save button stays reachable at the bottom of the add/edit forms. */
.item-form,
.skill-form,
.help-form,
.report {
  padding-bottom: 72px;
}

.summary-card[open] > .choices,
.summary-card[open] > .reveal > .choices {
  margin-top: 10px;
}

/* ── Photo tiles (browse and My gear) ── */

.hero {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero img,
.tile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tiles > .empty-hero,
.tiles > .empty,
.tiles > .error-box {
  grid-column: 1 / -1;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
}

.tile__frame {
  position: relative;
  margin-bottom: 6px;
}

.tile__photo {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
}

.tile__photo .icon {
  width: 40px;
  height: 40px;
  stroke-width: 1.4;
}

.tile--overdue .tile__photo {
  outline: 3px solid var(--bad);
  outline-offset: -3px;
}

.tile__title {
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.tile__meta {
  color: var(--muted);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile--skeleton .tile__photo {
  background: var(--line);
}

.badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 3px 9px;
  overflow: hidden;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge--out {
  background: var(--out-soft);
  color: var(--out);
}

.badge--overdue {
  background: var(--bad);
  color: var(--on-bad);
}

.browse__header {
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
}

.browse__count {
  color: var(--muted);
  font-size: 1.1rem;
  font-weight: 750;
}

.notice--overdue[aria-pressed="true"] {
  background: var(--bad);
  color: var(--on-bad);
}

@media (min-width: 560px) {
  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── My stuff ── */

.requests {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.request {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.request__text {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.request__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.request__actions .button {
  min-height: 44px;
}

.account {
  justify-content: center;
  border-top: 0;
}

/* Your mobile: a card at the top while it's missing, then one quiet line
   (above Sign out from the next visit, so nothing jumps when you save). */
.mobile--ask {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.mobile__fields {
  display: flex;
  gap: 10px;
}

.mobile__fields input {
  flex: 1;
  min-width: 0;
}

.mobile__number {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 8px;
}

/* Phone notifications on Me: a button to turn them on, the iPhone's
   home-screen steps, then a switch per kind. */
.notifications .button {
  align-self: flex-start;
}

.steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.4em;
}

.steps .icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: 2px;
  vertical-align: -0.15em;
}

.toggles {
  display: grid;
  margin: 0;
  padding: 0;
  border: 0;
}

.toggles legend {
  margin-bottom: 4px;
  padding: 0;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.toggle__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

/* A switch drawn on the checkbox itself, so it stays a real control. */
.toggle input {
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 2px solid var(--field);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  appearance: none;
}

.toggle input::before {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--field);
  content: "";
}

.toggle input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.toggle input:checked::before {
  translate: 20px 0;
  background: var(--accent-ink);
}

/* Text fields show focus by their border; a switch needs the ring back. */
.toggle input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .toggle input,
  .toggle input::before {
    transition: translate 150ms ease, background 150ms ease, border-color 150ms ease;
  }
}

/* ── Booking page ── */

.booking:has(.cta-bar) {
  padding-bottom: 72px;
}

.ticket .timeline {
  margin-top: 14px;
}

.ticket__note {
  margin-top: 6px;
  padding-left: 10px;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-style: italic;
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 24px;
}

.links .link-button {
  color: var(--muted);
}

.next-step--overdue {
  border-left-color: var(--bad);
  background: var(--bad-soft);
  color: var(--bad);
}

/* ── Add form: photo square beside the name ── */

.name-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: start;
}

.name-row .photo-pick {
  height: 88px;
  gap: 2px;
  font-size: 0.8rem;
}

.name-row .photo-pick__preview .icon {
  width: 28px;
  height: 28px;
}

.name-row .input--big {
  min-height: 88px;
  font-size: 1.25rem;
}

.name-row .photo-pick__preview:has(img) + .photo-pick__caption {
  bottom: 6px;
  padding: 2px 8px;
  font-size: 0.78rem;
}

/* ── Item page: one short list of facts ── */

.info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.info li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 4px 16px;
  font-weight: 650;
}

.info li + li {
  border-top: 1px solid var(--line);
}

.info .icon {
  color: var(--muted);
}

.info__status--out {
  color: var(--out);
}

.info__status--overdue {
  background: var(--bad-soft);
  color: var(--bad);
}

.info__status .icon {
  color: inherit;
}

.info__status--fixing {
  background: var(--bad-soft);
  color: var(--bad);
}

/* ── Phone feel ── */

/* Long-pressing buttons and tabs shouldn't select their text or pop a menu. */
button,
.button,
.tab,
.chip,
.choice,
.cat-grid__option,
.tile,
.ask__open,
.cal__day {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

@media (max-width: 719px) {
  .browse__tools {
    top: env(safe-area-inset-top);
  }
}

.sheet__panel {
  padding-top: 0;
  overscroll-behavior: contain;
}

/* A wide, easy-to-grab handle: drag it down to close the sheet. */
.sheet__handle {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 28px;
  margin: 0 -16px 4px;
  touch-action: none;
  cursor: grab;
}

.sheet__handle .sheet__grip {
  margin: 0;
}

.sheet__panel {
  transition: transform 180ms ease;
}

/* ── Install card ── */

.install {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 44px 12px 12px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.install__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
}

.install p {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.install .icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}

.install .button {
  flex: none;
  min-height: 40px;
}

.install__close {
  position: absolute;
  top: 4px;
  right: 4px;
  margin: 0;
}

/* ── Offline notice ── */

/* Sits just above the tab bar, clear of headings, until the signal is back. */
.offline {
  position: fixed;
  bottom: calc(var(--tabs-height) + 12px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 30;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 8px 14px;
  translate: -50% 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: var(--shadow);
}

/* ── Item funds: goals with a bar each ── */

.goals {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.goals h2,
.goals__fees {
  margin: 0;
}

.goals__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.goal {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.goal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.goal__name {
  font-weight: 700;
}

.goal__text {
  flex: none;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.goal--done .goal__text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ok);
}

.goal--done .goal__text .icon {
  width: 18px;
  height: 18px;
}

.goal__bar {
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--line);
}

/* Filled by --share, set from the script: 0 to 1. Scaled rather than
   sized, so it animates cheaply. */
.goal__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: var(--accent);
  transform: scaleX(var(--share, 0));
  transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
  .goal__fill {
    transition: transform 400ms ease-out;
  }
}

.goal--done .goal__fill {
  background: var(--ok);
}

.goal__mine {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.goal > .link-button {
  min-height: 36px;
  align-self: flex-start;
}

.chip-ins {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chip-ins h3 {
  margin: 0;
}

.chip-ins ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.chip-in__who {
  flex: 1 1 100%;
  min-width: 0;
  font-weight: 600;
}

.chip-in .button {
  flex: 1;
}

/* The Goals card on the add/edit form */
.goal-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.goal-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.goal-row__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto;
  gap: 8px;
  align-items: center;
}

.goal-row__amount {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

.goal-row__amount input {
  min-width: 0;
}

/* The switch itself is .toggle, as on Me. */
.goal-row__fees {
  min-height: 36px;
  padding: 0;
  border-top: 0;
  font-size: 0.95rem;
}

.goal-row__raised {
  font-size: 0.9rem;
}

.goal-rows + .link-button {
  align-self: flex-start;
}