/* ═══════════════════════════════════════════════════════════════════════════
   UI v2 — Home screen

   All colour comes from the tokens in style.css. No hex values here.
   ═══════════════════════════════════════════════════════════════════════════ */

.home-scroll {
  flex: 1;
  overflow-y: auto;
  background: var(--surface);
  /* clears the bottom bar plus the raised add button that overhangs it */
  padding-bottom: calc(var(--bottomnav-height) + 34px);
}

/* ── header ──────────────────────────────────────────────────────────────── */
/* Carries the promise line only — the wordmark lives in the top bar. The extra
   bottom padding is the room the action cards overlap into. */
.home-header {
  background: var(--surface-header);
  color: var(--text-on-dark);
  padding: 6px var(--uni_margin) 26px;
}

.home-promise {
  font-size: var(--text-sm);
  opacity: .82;
}

/* The strapline artwork. Width-capped rather than height-set: the SVG is
   13:1, so sizing by height makes it enormous on a wide phone and tiny on a
   narrow one. A max-width plus auto height keeps it the same size everywhere
   and centred whatever the viewport. */
.home-strapline {
  display: block;
  width: 62%;
  max-width: 230px;
  height: auto;
  margin: 2px auto 0;
}

/* ── borrow / lend ───────────────────────────────────────────────────────── */
/* Pulled up over the navy band. The search card used to do this; without the
   overlap the band and the cards read as two stacked blocks with a hard edge. */
.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 var(--uni_margin);
  margin-top: -14px;
}

.home-action {
  /* Two per row. A basis of 0 would fit all four on one line at about 90px
     each; half the row minus half the gap wraps them 2 + 2. */
  flex: 1 1 calc(50% - 6px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 15px 14px;
  border: none;
  border-radius: var(--radius-card);
  color: var(--text-on-brand);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease-out;
}

.home-action:active { transform: scale(.97); }
.home-action--borrow { background: var(--action-borrow); }
.home-action--lend   { background: var(--action-lend); }

/* Background only: the near-white ink comes from .home-action, the same as
   Borrow and Lend.
   ⚠ Near-white on this blue is 2.73:1 — the deliberate brand choice style.css
   describes where it defines --text-on-brand, and the same trade the orange
   (2.19:1) and green (2.24:1) cards make. It was tried in navy at 5.71:1 and
   put back: the four cards are one row and read as a set, and legibility bought
   by inking one of them differently costs more than it buys.
   An older comment here claimed the card already carried navy. It never did. */
.home-action--connect {
  background: var(--action-connect);
}

/* The only dark card, so this is the one that inverts: navy on navy is
   invisible, white on navy is 15.9:1. */
.home-action--request {
  background: var(--action-request);
  color: var(--text-on-dark);
}

.home-action--request .s { opacity: .8; }
.home-action--connect .s { opacity: .93; }
.home-action .k { font-size: var(--text-base); font-weight: var(--weight-heavy); }
.home-action .s { font-size: var(--text-xs); opacity: .93; }

/* ── section headers ─────────────────────────────────────────────────────── */
.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 22px var(--uni_margin) 10px;
}

.home-section-head h2 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-heavy);
  color: var(--text-primary);
}

.home-section-action {
  background: none;
  border: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
}

/* ── newly added / free to keep rails ────────────────────────────────────── */
/* Flagged: replaced .home-grid (two fixed columns), 2026-09-16. A sideways rail
   of up to ten, newest on the left. Cards are 42% of the width so two and a
   slice of the third show — the slice is what says it moves, so there are no
   dots — and one or two items sit at the same width rather than stretching.
   Snaps a card to the page margin, which scroll-padding keeps where the
   headings start. The rail keeps the side margin, so a swipe never starts at
   the screen edge where Android's back gesture lives. */
.home-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--uni_margin);
  padding: 0 var(--uni_margin) 8px;
  scrollbar-width: none;
}
.home-rail::-webkit-scrollbar { display: none; }

/* More to swipe to: the cards fade out over the right edge, as if the rail
   carries on past the screen. A mask rather than a cream overlay, so it needs
   no wrapper and matches whatever is behind it. home.js sets the class. */
.home-rail--more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}

.home-rail > .home-card {
  flex: 0 0 42%;
  scroll-snap-align: start;
}

.home-card--more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
}

.home-card-more-chev { font-size: var(--text-lg); line-height: 1; }

.home-card {
  position: relative;
  height: 150px;
  border: none;
  padding: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-sunken);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.home-card-photo,
.home-row-photo { background: var(--surface-sunken); }

.home-card-photo { position: absolute; inset: 0; }
.home-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* no-photo fallback: tier-1 category icon */
.thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sunken);
  color: var(--brand-navy-soft);
}

.home-card-photo.thumb--icon i { font-size: 40px; opacity: .55; }

.home-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 29, 54, 0) 18%, rgba(12, 29, 54, .55) 52%, rgba(12, 29, 54, .90) 100%);
}

.home-card-tag {
  position: absolute;
  top: 9px;
  left: 9px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-heavy);
  padding: 4px 8px;
  border-radius: var(--radius-pill);
}

.home-card-text {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 9px;
  color: var(--text-on-dark);
  text-align: left;
}

.home-card-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  /* item descriptions are free text and can be long — clamp so they never
     push the owner line out of the card */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-card-owner { font-size: var(--text-xs); opacity: .92; margin-top: 2px; }

/* ── borrowing / lending rows ────────────────────────────────────────────── */
.home-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 var(--uni_margin);
}

.home-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--surface-raised);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.home-row-photo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  flex: none;
}

.home-row-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-row-photo.thumb--icon i { font-size: 22px; opacity: .55; }

.home-row-mid { flex: 1; min-width: 0; }

.home-row-title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-row-sub { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; }

/* ── state pills (shared) ────────────────────────────────────────────────── */
.state-pill {
  font-size: var(--text-xs);
  font-weight: var(--weight-heavy);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.state-pill--available { background: var(--state-available); color: var(--state-available-text); }
.state-pill--lent      { background: var(--state-lent);      color: var(--state-lent-text); }
/* Green for the thing you hold, orange for the thing you gave out. One pill
   used to serve both, so "Your borrowing" and "Your lending" looked alike. */
.state-pill--borrowed  { background: var(--state-borrowed);  color: var(--state-borrowed-text); }
.state-pill--given     { background: var(--state-given);     color: var(--state-given-text); }

/* An availability pill takes the colour of the side of the exchange it is on —
   orange where you are the lender, green where you are the borrower — matching
   .search--* and .browse-tree--*, which already mark the two sides that way.
   Lent, borrowed and given are states in their own right and keep their own
   colour; only the neutral "this is available" pill follows its surroundings. */
.state-pill--available.state-pill--lending {
  background: var(--state-lent);
  color: var(--state-lent-text);
}
/* .state-pill--mine used to live here — blue, for "their item, in your hands".
   That is the same state Home calls "Borrowed", so both its users now take
   .state-pill--borrowed above and the app says it one way. */


/* ═══════════════════════════════════════════════════════════════════════════
   UI v2 — first run (no connections yet)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Before there is anybody to share with, Home is the invite panel with one
   line of explanation above it. The panel brings its own styling from
   connections.css — this is only the sentence and the room around it. */
.first-run-intro {
  padding: 20px var(--uni_margin) 4px;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.first-run-intro strong {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.first-run-invite { padding-bottom: var(--uni_margin); }


/* A give-away among the newly-added. Off-white like every other tag — the 🎁
   in front of the words is what marks it out, and it is repeated in the card
   title below. The green fill this used to carry put near-white text at
   2.2:1, which was the least legible thing on the screen. */
/* Same ground as Available — the gift mark is what tells them apart. */
.home-card-tag--give {
  background: var(--surface-raised);
  color: var(--text-primary);
}

.gift-icon {
  color: var(--action-borrow);
  margin-right: 5px;
}

/* One line, whatever the phone. "For a dinner party" fits a 390px screen's
   card with 8px to spare and wraps onto two lines at 360px, where it would
   cover the photo; cut short there instead. */
.home-rail .home-card-tag {
  max-width: calc(100% - 12px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── forum (admin-only, in development) ───────────────────────────────────
   No new colour: the raised surface and navy ink every other list already
   uses. This is scaffolding, not a fifth thing the app does. */
.home-forum {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 2 * var(--uni_margin));
  margin: 18px var(--uni_margin) 8px;
  padding: 14px 16px;
  background: var(--surface-raised);
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease-out;
}

.home-forum:active { transform: scale(.98); }

.home-forum i { font-size: var(--text-xl); color: var(--text-muted); }

.home-forum-label {
  flex: 1;
  font-size: var(--text-md);
  font-weight: var(--weight-heavy);
}

.home-forum-chev {
  font-style: normal;
  font-size: var(--text-xl);
  color: var(--text-muted);
}


/* ── how Nabble works ──────────────────────────────────────────────────────
   Three things, said once, dismissed with the × and remembered on the account.
   Sits under the four cards where the mockup puts it. */
.how-panel {
  position: relative;
  /* Held to the width of the cards above it: on a wide window the panel used to
     stretch the full screen and leave the × marooned in the far corner, which
     is what looked wrong outside the phone-sized bench. */
  max-width: 520px;
  margin: var(--item_gap) auto 0;
  padding-inline: 20px;
  width: calc(100% - 2 * var(--uni_margin));
  padding: 18px 20px 20px;
  background: var(--surface-raised);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.how-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--surface-sunken);
  font: inherit;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--text-primary);
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.how-close:focus-visible { outline: 2px solid var(--action-connect); outline-offset: 2px; }
.how-title {
  margin: 0 28px 10px 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.how-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.how-steps b { font-weight: var(--weight-bold); color: var(--text-primary); }

/* ⚠ .empty-card and .empty-card--tappable stood here — the 150px square a
   drawing sat in on an empty Newly added or Free to keep rail. Both rails use
   the row below now, so nothing referenced these; removed rather than left as
   a style with no markup. The rule they carried is worth keeping in mind if a
   square empty cell ever comes back: it reserved 26px at the top on both rails,
   marked or not, so the give-away tag had somewhere to sit without the two
   rails drawing at different sizes. */

/* ── the row that stands in for a record ───────────────────────────────────
   Your borrowing and Your lending before there is anything in either: the same
   height, shadow and pill position as the row that will replace it, with a
   drawn bubble where the item's name goes. */
/* Room under the row for the tail, which hangs below the bubble's box rather
   than being squeezed inside it. It scales with the bubble, so this is sized
   for the tallest sentence a row is likely to carry rather than for today's. */
.home-row--empty {
  gap: 10px;
  padding-bottom: 22px;
}
/* The box is the body of the bubble and nothing else — its height is the text's
   height, and the outline is drawn to match. */
.empty-bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
}
.empty-bubble-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The tail is outside the viewBox. Without this the browser clips it. */
  overflow: visible;
}
.empty-bubble-svg path {
  fill: none;
  stroke: var(--brand-navy);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* Inside the bubble, clear of the wobble. The outline is hand-drawn and not
   level: its bottom edge rides as high as 91% of the box on the right, so the
   bottom padding is the larger one. */
.empty-bubble-line {
  position: relative;
  padding: 9px 18px 14px 18px;
  font-size: var(--text-sm);
  line-height: 1.25;
  color: var(--text-secondary);
}