/* ==========================================================================
   The couple's front page
   ==========================================================================
   Every other screen in the portal is a working document. This one is their
   wedding — the page they open on their phone to show somebody.

   The hero only goes full height on Home. Everywhere else it collapses to a
   band, because 400px of photograph between a couple and their run sheet is
   decoration in the way of the thing they came for.
   ========================================================================== */

/* The photo band. Full bleed, its own space, at full strength — the couple
   chose it and they should be able to see it. */
.portal-cover {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  height: clamp(210px, 34vh, 360px);
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
}

/* Only the last strip fades, so the band ends without a ruled line across it. */
.portal-cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 78px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ground, #fff));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .portal-cover::after {
    background: linear-gradient(to bottom, rgba(21, 16, 18, 0), #151012);
  }
}

.portal-head { transition: padding .25s ease; }

.portal-head.is-full { padding-top: 60px; padding-bottom: 48px; }

/* With the photo above it, the hero's own gradient would be a second wash on
   top of a fade. Drop it and let the photo do the work. */
/* No negative pull. The logo sat inside the photo's fade and came out
   half-dissolved — it needs to start on clean ground. */
.portal-head.has-photo {
  margin-top: 0;
  padding-top: 26px;
  background: none;
}


/* ---------- the map ------------------------------------------------------- */

.home-heading {
  margin: 34px 0 12px;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ⚠️ A REAL HEADING, NOT A LABEL — 15 September.
   Gee, on the row holding Book a Call, the budget sheet and the handbook:
   *"it needs a big heading."* The shared `.home-heading` above is a .68rem
   uppercase caption, which is right over the map of tabs (those tiles say what
   they are) and far too quiet over three documents she wants read.

   Display face, sentence case, and the brand pink rule under it — the same
   treatment the couple's own section headings already get. */
.home-heading.is-big {
  margin: 40px 0 14px;
  color: var(--ink, #2a2126);
  font-family: var(--display, Georgia, serif);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: none;
}

.home-heading.is-big::after {
  content: '';
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 9px;
  border-radius: 2px;
  background: var(--v-pink, #e8197a);
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 12px;
}

.home-card {
  position: relative;
  display: block;
  padding: 20px 22px 18px;
  border-radius: var(--radius);
  background: var(--cat-tint, var(--surface-soft));
  text-decoration: none;
  transition: transform .14s ease, box-shadow .16s ease;
}

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

.home-card-label {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.home-card-note {
  display: block;
  margin-top: 3px;
  color: var(--cat, var(--ink-soft));
  font-size: .82rem;
  font-weight: 600;
}

/* Marks the ones that leave the platform, so nobody is surprised by a new tab. */
.home-card-out {
  position: absolute;
  top: 16px;
  right: 16px;
  color: var(--cat, var(--ink-faint));
  font-size: .8rem;
}


/* ---------- who to call --------------------------------------------------- */

.home-planner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
  padding: 20px 24px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--pink-tint) 0%, #fdf6f9 50%, var(--teal-tint) 100%);
}

.home-planner img {
  width: auto;
  max-width: 130px;
  height: 42px;
  object-fit: contain;
}

.home-planner > div { display: grid; }

.home-planner strong {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: -.02em;
}

.home-planner span { color: var(--ink-soft); font-size: .85rem; }

.home-planner-ways {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.home-planner-ways a {
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .8);
  color: var(--ink);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.home-planner-ways a:hover { background: #fff; }


@media (max-width: 620px) {
  .portal-head.is-full { padding-top: 40px; padding-bottom: 34px; }
  .home-planner-ways { margin-left: 0; }
}


/* ==========================================================================
   Who to pay
   ==========================================================================
   The couple makes these transfers themselves, so the account details have to
   be on the page rather than in an email they have to go and find.
   ========================================================================== */

.pay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 12px;
}

.pay-card {
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.pay-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.pay-card-who {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.pay-card-amt {
  color: var(--pink-deep);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pay-card-due {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: .8rem;
}

.pay-card-bank {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.pay-card-bank dt {
  color: var(--ink-faint);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-self: center;
}

/* Tabular figures and generous tracking: these get read aloud and typed into
   a banking app, one digit at a time. */
.pay-card-bank dd {
  margin: 0;
  font-size: .93rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  word-break: break-word;
}

/* ---- NOT YET — a supplier the couple must not pay ------------------------
   Migration 117. Tiffany, on a Zoom with Gee, 15 September: "Well, which
   invoices do I pay?" Her pay list showed every supplier with money owing and
   said nothing about whether the figure was settled.

   ⚠️ THE SUPPLIER AND THE AMOUNT STAY VISIBLE and only the bank details go.
   Hiding the card would mean she does not know the cost is coming, and would
   make her budget and her pay list disagree. Tangerine is the app's "needs
   attention" family, which is exactly what this is. */
.pay-card.is-waiting {
  background: var(--c-coral-tint);
  border-color: var(--c-coral);
}

.pay-card.is-waiting .pay-card-amt { color: var(--ink-soft); }

.pay-card-flag {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--c-coral);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Gee made this line ready (1 Oct) — blue = go, the same chip as her budget. */
.pay-card-flag.is-ready { background: #1d4ed8; }
/* Gee marked it a deposit (1 Oct) — magenta (her pick), the same chip as her budget. */
.pay-card-flag.is-deposit { background: #c026d3; }
/* On hold — the same filled red as her budget's chip (1 Oct), not the coral. */
.pay-card-flag.is-held { background: #be123c; }
/* Cash on the day (20 Oct, migration 161) — the same coral pink as her budget. */
.pay-card-flag.is-cash { background: #f43f5e; }

/* Her words, not ours — "Waiting on final hours". It is the whole answer to
   the question Tiffany asked, so it is not a muted footnote. */
.pay-card-why {
  margin-top: 7px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--c-coral);
}

.pay-card-held {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--c-coral);
  font-size: .8rem;
  color: var(--ink-soft);
}

/* ---------- owing, and nobody knows the account yet -----------------------
   🛑 THESE CARDS USED NOT TO EXIST. howToPayHtml filtered out any line with no
   BSB or PayID, so on 16 September Tiffany owed 13 suppliers and her list drew
   11 — Metropolis $12,163.75 and Church Music $440 were simply absent, a fifth
   of what she owed. The biggest payment on the wedding was the one she could
   not see.

   ⚠️ IT BORROWS `is-waiting`'s SHAPE ON PURPOSE. The two states are siblings —
   "Gee says not yet" and "we do not know where to send it" — and a couple
   should read them the same way: the supplier and the amount are real, the
   account is not here yet, do not transfer anything. A second visual language
   would make one of them look like an error and the other like a decision. */
.pay-card.is-noaccount {
  background: var(--c-coral-tint);
  border-color: var(--c-coral);
}

.pay-card.is-noaccount .pay-card-amt { color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   A document card that carries a password.

   🛑 THE WRAPPER IS THE GRID ITEM NOW, NOT THE CARD — for cards that have a
   password. The card is an <a>, so the password cannot live inside it: tapping
   it would open the website instead of letting anyone copy it. A link with no
   password still renders as a bare .home-card and is untouched.

   ⚠️ NOT `display: contents`. That would hand the grid TWO children — the card
   and the password — and the password would take a column of its own.
   --------------------------------------------------------------------------- */
.home-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.home-card-wrap > .home-card { flex: 1 1 auto; }

.home-card-pass {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 4px;
}

.home-card-pass > .k {
  color: var(--ink-faint);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* The password itself is the thing they came for, so it is the readable part:
   monospace, full ink, and selectable. */
.home-card-pass > code {
  color: var(--ink);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .82rem;
  font-weight: 600;
  user-select: all;
  word-break: break-all;
}