/* iPhone Board — approved September 16, 2026.
   Shared by the main phone showcase and the approved color reference.
   Scoped to Board only; retain the canonical chassis, icons and live controls. */
.phone-v2-board {
  --board-forest: #213b2f;
  --board-champagne: #d6be8e;
  --board-mobile-card: linear-gradient(120deg, #365244, #2d463a);
  --board-mobile-ink: #f3efdf;
  --board-mobile-muted: #c0cbbb;
  --board-bronze: linear-gradient(145deg, #e1cda5, #ccb183);
}
.phone-v2-board .phone-v2-board-app { color: #f3efdf; background: radial-gradient(ellipse at 15% 0, #73875c1f, transparent 62%), linear-gradient(135deg, #284535, var(--board-forest) 55%, #1a3228); padding: 40px 4px 61px; }
.phone-v2-board .phone-v2-board-masthead { padding: 4px 10px 6px; min-height: 40px; }
.phone-v2-board .phone-v2-board-masthead::after { right: 10px; left: 10px; background: #d1b78233; }
.phone-v2-board .phone-v2-board-title { color: #f3efdf; font-size: 22px; }
.phone-v2-board .phone-v2-board-title em { color: var(--board-champagne); }
.phone-v2-board .phone-v2-board-profile { background: var(--person-jimmy); }
.phone-v2-board .phone-v2-board-filters { gap: 10px; margin: 3px 5px 0; }
.phone-v2-board .phone-v2-board-filters > button { color: #bcc6ae; font-size: 8px; min-height: 26px; }
.phone-v2-board .phone-v2-board-filters > button.active { color: #f7e7c5; }
.phone-v2-board .phone-v2-board-filters > button.active::after { background: var(--board-champagne); }
.phone-v2-board .phone-v2-board-feed { gap: 8px; margin-top: 6px; padding: 0 0 9px; }
/* On the compact phone, ivory is an ink/accent—not a full-feed surface.
   Keep the approved spacing and photo sizes; vary only the mobile palette. */
.phone-v2-board .phone-v2-board-post { gap: 7px; padding: 9px; border-color: #d1b78229; border-radius: 10px; color: var(--board-mobile-ink); background: var(--board-mobile-card); box-shadow: 0 3px 9px #0c231b24, inset 0 1px 0 #f6f2e708; }
.phone-v2-board .phone-v2-board-post.is-sponsored { background: linear-gradient(120deg, #3a5142, #304438); border-color: #d1b78242; }
/* Trending identity: a quiet gold halo behind the upper-right label.
   A background layer stays within the card and cannot intercept a control. */
.phone-v2-board .phone-v2-board-post.is-trending {
  background:
    radial-gradient(ellipse 76px 52px at calc(100% - 20px) 18px,
      rgba(232, 184, 83, .22) 0%, rgba(232, 184, 83, .10) 38%, rgba(232, 184, 83, 0) 100%),
    var(--board-mobile-card);
}
.phone-v2-board .phone-v2-board-source > i { width: 20px; height: 20px; border-radius: 50%; border-color: #18342622; box-shadow: inset 0 1px 0 #ffffff26; }
.phone-v2-board .phone-v2-board-source > i.is-bucket { background: #f3efdf14; }
.phone-v2-board .phone-v2-board-source > i.is-lauren { background: var(--person-lauren); }
.phone-v2-board .phone-v2-board-source > i.is-friend { background: #876d46; }
.phone-v2-board .phone-v2-board-source > i.is-united { background: #334a63; }
.phone-v2-board .phone-v2-board-source strong { color: var(--board-mobile-ink); font-size: 8px; }
.phone-v2-board .phone-v2-board-source time { color: var(--board-mobile-muted); font-size: 6px; }
.phone-v2-board .phone-v2-board-post:not(.is-friend) > header > b { color: var(--board-champagne); border: 0; padding: 0; background: transparent; font-size: 5.5px; }
/* Lived keeps the main site's warm pill, border and inset from styles.css. */
.phone-v2-board .phone-v2-board-post.is-friend > header > b { font-size: 5.5px; }
.phone-v2-board .phone-v2-board-post.is-sponsored > header > b { color: var(--board-champagne); }
.phone-v2-board .phone-v2-board-post.is-trending > header > b { color: #f1d6a0; }
.phone-v2-board .phone-v2-board-post-body { grid-template-columns: 40% minmax(0,1fr); min-height: 84px; gap: 9px; }
.phone-v2-board .phone-v2-board-post-body > div { padding-inline-end: 0; }
.phone-v2-board .phone-v2-board-post-body figure { height: 86px; min-height: 0; }
.phone-v2-board .phone-v2-board-post-body figure img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone-v2-board .phone-v2-board-post-body figure.phone-v2-board-portrait { background: #2b4445; }
.phone-v2-board .phone-v2-board-portrait::before { content: ''; position: absolute; inset: -12px; background: url('/assets/shared-shipwreck-kauai.webp') center / cover; filter: blur(10px); opacity: .25; }
.phone-v2-board .phone-v2-board-post-body figure.phone-v2-board-portrait img { object-fit: contain; }
.phone-v2-board .phone-v2-board-portrait::after { display: none; }
.phone-v2-board .phone-v2-board-post-body small, .phone-v2-board .phone-v2-board-route > small { color: var(--board-champagne); font-size: 5.5px; line-height: 1.35; }
.phone-v2-board .phone-v2-board-post-body h4, .phone-v2-board .phone-v2-board-route h4 { margin-top: 5px; color: var(--board-mobile-ink); font: 500 13px/1.1 Newsreader, Georgia, serif; letter-spacing: -.2px; }
.phone-v2-board .phone-v2-board-post-body p, .phone-v2-board .phone-v2-board-route p { color: var(--board-mobile-muted); font-size: 6.5px; line-height: 1.4; }
.phone-v2-board .phone-v2-board-action, .phone-v2-board .phone-v2-board-action.is-quiet { position: relative; appearance: none; display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; justify-self: end; gap: 3px; max-width: 100%; min-height: 18px; padding: 3px 6px; border-radius: 5px; font-size: 6.5px; line-height: 1; color: #4f3c24; background: var(--board-bronze); border: 1px solid #baa172; box-shadow: inset 0 1px 0 #fff6df66; cursor: pointer; }
/* A quiet visual footprint without making the preview harder to tap. */
.phone-v2-board .phone-v2-board-action::after { content: ''; position: absolute; inset: -3px; border-radius: 8px; }
.phone-v2-board .phone-v2-board-action:hover { background: #e4cda3; }
.phone-v2-board .phone-v2-board-action.is-added { color: #e5edda; border-color: #a8bd8e80; background: #263e30; box-shadow: none; }
.phone-v2-board .phone-v2-board-action i { font-size: 8px; }
.phone-v2-board .phone-v2-board-route { padding-inline: 0; }
.phone-v2-board .phone-v2-board-route > span > strong { color: var(--board-mobile-ink); font-size: 22px; }
.phone-v2-board .phone-v2-board-route > span > i { background: var(--board-champagne); }
.phone-v2-board .phone-v2-board-route > span > i::after { border-color: var(--board-champagne); }
.phone-v2-board .phone-v2-tabbar { background: linear-gradient(180deg, #365443ed, #182f24f5); border-color: #c9b48b40; }
.phone-v2-board .phone-v2-tabbar > span.active { color: #f0d8a7; }
.phone-v2-board .phone-v2-board-app :is(button, [role="button"]):focus-visible { outline: 1px solid #d1b782; outline-offset: 2px; }
.phone-v2-board .phone-v2-board-post :is(button, [role="button"]):focus-visible { outline-color: #f3dfb3; }