/* Self-hosted so no page depends on a third-party host: no render-blocking
   cross-origin fetch, and no giver's IP reaches anyone but this server.
   Karantina and Assistant are both SIL Open Font License 1.1. */

@font-face {
  font-family: 'Karantina';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/karantina-700-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Karantina';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/karantina-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karantina';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/karantina-700-latin.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;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/assistant-400-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/assistant-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/assistant-400-latin.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;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/assistant-600-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/assistant-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/assistant-600-latin.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;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/assistant-700-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/assistant-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/assistant-700-latin.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;
}

/* dibs-it — the "Scrapbook" system. Paper ground, polaroid tiles, washi tape,
   rubber-stamp claim state. Karantina display over Assistant body. Hebrew, RTL,
   mobile-first. Every value here comes from the approved design canvas. */

:root {
  --paper: #fffdf6;
  --card: #ffffff;
  --ink: #23201c;
  --ink-soft: #6b625a; /* 5.6:1 on paper — the floor for meta text */
  --accent: #c2410c;   /* titles, prices, links. 5.1:1 on paper */
  --action: #facc15;   /* primary button fill and tape. Ink on it: 11.4:1 */
  --yours: #15803d;    /* only ever means "you are bringing this". 4.8:1 */
  --claimed: #15803d;  /* owner page only: someone is bringing this gift */
  --whatsapp: #15803d; /* the share button; same green, different meaning */
  --stamp: #b91c1c;    /* the taken stamp, and destructive actions. 6.4:1 */
  --paper-dim: #f6f2e6;
  --line-dim: #d9d2c6;
  --shadow: 0 3px 10px rgba(35, 32, 28, 0.13);
  /* Kit token names, adopted alongside the existing ones above (values already
     matched, so this is a naming exercise, not a re-theme). */
  --surface-page: var(--paper);
  --text-title: var(--accent);
  --fill-1: #f97316;
  --fill-2: #0ea5e9;
  --fill-3: #22c55e;
  --fill-4: #a855f7;
  --fill-5: #ec4899;
  --fill-6: #14b8a6;
  --tape-fill: rgba(250, 204, 21, 0.55);
  --stamp-plate: var(--paper);
  --dot-ink: rgba(35, 32, 28, 0.05);
  --control-min: 44px;
  /* .dibs-straight — every tilt ships flat by default. Flip a value below
     (degrees, matching the kit) to bring the scattered-photo look back. Tape
     keeps its own fixed angle regardless of these. */
  --tilt-1: 0deg; /* kit value: -1.4deg */
  --tilt-2: 0deg; /* kit value:  1.2deg */
  --tilt-3: 0deg; /* kit value:  1.6deg */
  --tilt-4: 0deg; /* kit value: -1.1deg */
  --tilt-5: 0deg; /* kit value: -1.7deg */
  --tilt-6: 0deg; /* kit value:  1.3deg */
  /* Webfonts with real fallbacks: with Karantina blocked, Hebrew must land on a face
     that ships Hebrew glyphs — Impact and Arial Narrow do not — and every display
     line-height below must leave room for a normal-width face, or two-line headings
     overlap. */
  --font-display: "Karantina", "Noto Sans Hebrew", "Arial Hebrew", Impact, system-ui, sans-serif;
  --font-body: "Assistant", "Noto Sans Hebrew", "Arial Hebrew", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--surface-page);
  /* The paper ground carries a 14px dot grid at 5% ink. */
  background-image: radial-gradient(var(--dot-ink) 1px, transparent 1px);
  background-size: 14px 14px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100dvh;
}

a { color: var(--accent); }
a:hover { color: #9a3412; }

/* ---- chrome ---- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 10px;
  padding-inline: max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-left));
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 5;
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  text-decoration: none;
  color: var(--accent);
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  /* viewport-fit=cover is declared, so keep content clear of the notch and home bar. */
  padding-block: 18px calc(64px + env(safe-area-inset-bottom));
  padding-inline: max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-left));
}

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

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.05;
  margin: 0;
  color: var(--text-title);
  /* An unbroken 120-char list name must wrap, not scroll the page sideways —
     and as a flex item in .page-head it must be allowed to shrink first. */
  overflow-wrap: anywhere;
  min-width: 0;
}
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.05;
  margin: 0 0 6px;
}
h3 { margin: 0; }

.section-title { margin-top: 6px; color: var(--accent); font-size: 21px; }
.lede { color: var(--ink-soft); margin: 4px 0 12px; font-size: 14px; }
.hint { color: var(--ink-soft); font-size: 13px; margin: 4px 0 12px; }
.alt { margin-top: 16px; color: var(--ink-soft); }
.eyebrow {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ---- polaroid surfaces ---- */

/* Every card in the app is a polaroid: white paper, soft ink shadow, no rounding. */
.card,
.polaroid {
  background: var(--card);
  border-radius: 0;
  box-shadow: var(--shadow);
  padding: 14px;
}

/* Washi tape: yellow at 55%, dashed side edges, one per tile, top centre. */
.tape {
  position: absolute;
  top: -9px;
  inset-inline-start: 50%;
  transform: translateX(50%) rotate(-3deg);
  width: 58px;
  height: 19px;
  background: var(--tape-fill);
  border-inline: 1px dashed rgba(180, 140, 20, 0.35);
  z-index: 1;
  pointer-events: none;
}

.hero { padding: 8px 2px 0; }
.hero h1 { margin: 2px 0 6px; font-size: 44px; line-height: 1.05; }
.hero .lede { margin-bottom: 0; }

.empty { text-align: center; color: var(--ink-soft); }
/* Not scoped to .empty: the delete-confirmation card leans on it too. */
.big { font-size: 1.2rem; color: var(--ink); font-weight: 700; margin: 0 0 6px; }

.error {
  background: #fdecea;
  border: 2px solid var(--stamp);
  color: var(--stamp);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 0 14px;
  font-weight: 600;
}

/* ---- forms ---- */

label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], input[type="tel"] {
  width: 100%;
  font: inherit;
  /* Never below 16px: these inputs sit inside 13px labels, and under 16px iOS Safari
     zooms the viewport on focus. */
  font-size: 16px;
  color: inherit;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 9px 16px;
  margin-bottom: 12px;
  min-height: var(--control-min);
}

input[type="file"] {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--paper-dim);
  border: 2px dashed var(--ink);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 12px;
  min-height: var(--control-min);
}

/* Solid accent: ≥3:1 against paper, card and the yellow action fill (WCAG 1.4.11). */
input:focus-visible, .btn:focus-visible, .tab:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Numbered polaroid rows in the create/add forms. The badge counts only the rows
   inside #items, so the single-row edit form stays unnumbered. */
.item-row {
  border: 0;
  margin: 0 0 16px;
  position: relative;
}
#items { counter-reset: gift-row; }
#items .item-row { counter-increment: gift-row; }
#items .item-row::before {
  content: counter(gift-row);
  /* Decorative to a screen reader — the alternative-text form marks it as such.
     Browsers without the slash syntax drop this line and keep the plain one above. */
  content: counter(gift-row) / "";
  position: absolute;
  top: -10px;
  inset-inline-end: 14px;
  /* min-width, not width: row numbers reach three digits (MAX_LIST_ITEMS is 100). */
  min-width: 26px;
  padding: 0 6px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--action);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
#items .item-row:nth-child(odd) { transform: rotate(var(--tilt-1)); }
#items .item-row:nth-child(even) { transform: rotate(var(--tilt-2)); }
.item-row label { margin-bottom: 5px; }
.item-row input { margin-bottom: 10px; }
.row-2 { display: flex; gap: 10px; }
.row-2 label { flex: 1; min-width: 0; }
.file input { margin-bottom: 0; }

/* Two ways into the same list; on a narrow phone they wrap instead of squashing. */
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* The annotate row only exists to keep a hidden id paired with its fields. */
.annotate-row .item-row { margin: 0; }
.annotate-row:nth-child(odd) .item-row { transform: rotate(var(--tilt-3)); }
.annotate-row:nth-child(even) .item-row { transform: rotate(var(--tilt-4)); }

/* The camera picker: one big dashed target, per the camera artboard. */
.picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 20px;
  border: 3px dashed var(--ink);
  border-radius: 22px;
  box-shadow: none;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
}
.picker-icon {
  width: 68px;
  height: 68px;
  border-radius: 999px;
  background: var(--action);
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.picker-title { font-weight: 700; }
.picker input { margin: 0; max-width: 100%; }

/* Upload progress: inserted by the compression script once the (already-shrunk)
   request is actually sending -- never before, so a fast upload never flashes it. */
.upload-progress { margin: 10px 0; }
.upload-progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--paper-dim);
  border: 1px solid var(--line-dim);
  overflow: hidden;
}
.upload-progress-fill { height: 100%; width: 0%; background: var(--action); }
.upload-progress-label { color: var(--ink-soft); font-size: 13px; margin: 4px 0 0; }

/* ---- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--control-min);
  padding: 10px 22px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-wide { width: 100%; }
/* Yellow, never white text — ink on action is 11.4:1. */
.btn-primary, .btn-claim { background: var(--action); color: var(--ink); }
.btn-ghost { background: transparent; }
.btn-whatsapp { background: var(--whatsapp); color: #fff; margin-top: 6px; }
.btn-danger { border-color: var(--stamp); color: var(--stamp); }
.btn-release { border-style: dashed; border-color: var(--yours); color: var(--yours); }

/* The add-a-row button reads as "more of the same", dashed like the photo targets. */
#add-item { width: 100%; border-style: dashed; }

.logout { margin: 0; }
.logout .btn { min-height: 44px; padding: 8px 16px; font-size: 13px; }

/* ---- dashboard ---- */

.list-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.list-card { padding: 0; }
.list-card:nth-child(odd) { transform: rotate(var(--tilt-1)); }
.list-card:nth-child(even) { transform: rotate(var(--tilt-2)); }
.list-card a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
}
.list-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  /* A flex item: allowed to shrink, and an unbroken name wraps instead of scrolling. */
  overflow-wrap: anywhere;
  min-width: 0;
}
.meta { color: var(--ink-soft); font-size: 13px; font-weight: 600; }

/* ---- owner: share card ---- */

.share { transform: rotate(var(--tilt-5)); }
.share .share-url {
  background: var(--paper-dim);
  border: 1px dashed var(--line-dim);
  border-radius: 8px;
  padding: 9px 10px;
  word-break: break-all;
  direction: ltr;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  margin: 0 0 4px;
}

/* ---- owner: gift rows (single column — phone numbers must stay legible) ---- */

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

.gift { padding: 12px; }
.gift-list .gift:nth-child(odd) { transform: rotate(var(--tilt-6)); }
.gift-list .gift:nth-child(even) { transform: rotate(var(--tilt-1)); }

.gift-head { display: flex; gap: 12px; align-items: flex-start; }
.gift-head .gift-img {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  object-fit: cover;
}
.gift-text { flex: 1; min-width: 0; }
.gift-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.1;
  overflow-wrap: break-word;
}
.gift-meta {
  margin: 5px 0 0;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
}
.price { color: var(--accent); font-weight: 700; }
.qty {
  background: var(--paper-dim);
  border-radius: 999px;
  padding: 1px 10px;
}
.store-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: 6px;
  padding: 2px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.gift-delete { margin: 0; }
.gift-actions { display: flex; gap: 8px; margin-top: 11px; }
.gift-actions .btn-ghost { flex: 1 1 auto; }

/* The gift glyph placeholder, on a rotating decorative fill. Never carries text. */
.gift-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.tone-0 { background: var(--fill-1); }
.tone-1 { background: var(--fill-2); }
.tone-2 { background: var(--fill-3); }
.tone-3 { background: var(--fill-4); }
.tone-4 { background: var(--fill-5); }
.tone-5 { background: var(--fill-6); }

/* ---- owner: claim state box ---- */

.claim {
  margin-top: 11px;
  padding: 10px 11px;
  border-radius: 10px;
  background: var(--paper-dim);
}
.claim form { margin: 0; }
.claim .claim-state {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--claimed);
}
/* On a gift nobody has taken: present but quiet. */
.claim .claim-free { color: var(--ink-soft); }
/* Owner-only: the claimers' numbers. LTR so a phone number is not mirrored. */
.claimers { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.claimer {
  direction: ltr;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%236b625a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"/></svg>');
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 21px;
}

/* ---- giver: the polaroid gallery ---- */

.gift-grid {
  list-style: none;
  margin: 0;
  padding: 9px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
  align-items: start;
}

.tile { position: relative; }
/* Cycles with the tone rotation. Shipped flat — see --tilt-1..6 above. */
.tile:nth-child(6n + 1) { transform: rotate(var(--tilt-1)); }
.tile:nth-child(6n + 2) { transform: rotate(var(--tilt-2)); }
.tile:nth-child(6n + 3) { transform: rotate(var(--tilt-3)); }
.tile:nth-child(6n + 4) { transform: rotate(var(--tilt-4)); }
.tile:nth-child(6n + 5) { transform: rotate(var(--tilt-5)); }
.tile:nth-child(6n + 6) { transform: rotate(var(--tilt-6)); }

.tile .polaroid {
  padding: 9px 9px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gift-photo { position: relative; }
.gift-photo .gift-img {
  display: flex;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* The rubber stamp: overprints the photo and says nothing about who or how many. */
.stamp-wrap {
  position: absolute;
  inset: 0;
  background: rgba(255, 253, 246, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stamp-wrap .claim-state {
  margin: 0;
  /* A solid paper plate under the stamp: the scrim alone leaves red-on-photo contrast
     at the mercy of whatever picture sits underneath. */
  background: var(--stamp-plate);
  transform: rotate(-9deg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  color: var(--stamp);
  border: 3px solid var(--stamp);
  border-radius: 4px;
  padding: 0 10px;
}

/* Green tag: only ever means "you are bringing this". */
.claim-mine {
  position: absolute;
  top: 7px;
  inset-inline-end: 7px;
  margin: 0;
  max-width: calc(100% - 14px);
  background: var(--yours);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  padding: 2px 9px;
  border-radius: 3px;
  transform: rotate(4deg);
}

/* Link-out to the store: a paper circle over the photo's corner, 44px hit target. */
.store-link {
  position: absolute;
  bottom: 7px;
  inset-inline-start: 7px;
  width: var(--control-min);
  height: var(--control-min);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.tile .gift-text {
  padding: 9px 2px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}
.tile .gift-name {
  font-size: 22px;
  /* A long name clamps to two lines without breaking the tile. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile.taken .gift-name { color: var(--ink-soft); }
.tile .gift-meta { margin: 0; }
.tile form { margin-top: auto; }
.tile .btn { font-size: 14px; padding-inline: 10px; }

.claim-form { display: flex; flex-direction: column; gap: 8px; }
.claim-phone { margin: 0; font-size: 12px; color: var(--ink-soft); }
.claim-phone input { margin-bottom: 0; font-size: 16px; }

/* Who this device is, and how to stop being them. */
.identity { padding: 12px 14px; transform: rotate(var(--tilt-2)); }
/* Same minimum target as every other control — this summary gates release-from-another-device.
   align-content centres the text in modern browsers; older ones just top-align it. */
.identity summary { font-weight: 700; cursor: pointer; min-height: var(--control-min); align-content: center; }
.identity-note { margin: 8px 0; color: var(--ink-soft); font-size: 13px; }
.identity form { margin: 0; }
.identity .claim-form { align-items: stretch; }

/* A small link above the gallery/rows, only rendered when there is something
   taken to hide. Names the count — never a claimer. */
.list-controls { margin: -4px 0 0; font-size: 13px; }
.hide-toggle { font-weight: 700; }

/* ---- giver: photo-less gifts, full-width rows below the gallery ---- */

.gift-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rows-heading { margin-top: 4px; }
.row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.row-text { flex: 1 1 200px; min-width: 0; }
.row.taken .gift-name { color: var(--ink-soft); }
.row-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.row-actions form { margin: 0; }
/* Same badge role as the gallery's rubber stamp, without a photo to overprint. */
.gift-rows .claim-state {
  display: inline-block;
  margin: 4px 0 0;
  padding: 1px 10px;
  border: 2px solid var(--stamp);
  border-radius: 999px;
  color: var(--stamp);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
}
.row-mine {
  display: inline-block;
  margin: 4px 0 0;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--yours);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
}

/* ---- giver: the phone step, once above the list rather than per tile ---- */

.phone-step-note { margin: 0 0 10px; font-weight: 700; }
.phone-step .claim-form { margin-bottom: 4px; }

/* ---- editing ---- */

.rename label { margin-bottom: 8px; }
.row-inline { display: flex; gap: 10px; align-items: flex-start; }
/* Flex items default to min-width:auto, which lets a long name push past the card. */
.row-inline input { margin-bottom: 0; min-width: 0; }
.row-inline .btn { flex: 0 0 auto; white-space: nowrap; }

.current-photo { display: flex; gap: 12px; align-items: center; margin: 4px 0 10px; }
.current-photo .gift-img {
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  object-fit: cover;
  box-shadow: var(--shadow);
}
.checkbox { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
/* The global input rule does not enumerate checkboxes, so this sets the whole box:
   24px is a real touch target inside its labelled row, not the ~13px default. */
.checkbox input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.danger-zone { margin: 10px 0 0; text-align: center; }
.danger-zone a { color: var(--stamp); font-weight: 600; }

/* ---- auth: one polaroid card with a tab switch ---- */

.auth {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  min-height: calc(100dvh - 170px);
  padding-block: 10px;
}
.auth-brand { text-align: center; }
.auth-brand h1 { font-size: 58px; line-height: 1.05; }
.auth-brand .lede { margin: 12px 0 0; }
.auth-tilt { position: relative; transform: rotate(var(--tilt-4)); }
/* For a heading assistive tech needs on a page whose visual answer is the active tab. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.auth-card { padding: 18px; }
.auth-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--paper-dim);
  border-radius: 999px;
  margin-bottom: 16px;
}
.tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-min);
  border: 2px solid transparent;
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.tab-active { background: var(--action); border-color: var(--ink); }
.auth-note {
  margin: 0 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: center;
}

/* ---- narrow phones: one column, nothing scrolls sideways ---- */

@media (max-width: 359px) {
  .gift-grid { grid-template-columns: minmax(0, 1fr); }
  .row-2 { flex-direction: column; gap: 0; }
}

@media (min-width: 620px) {
  .list-grid { grid-template-columns: 1fr 1fr; }
}