/* bridal — page-scoped styles. Owned by this page only.
   Shared primitives live in planner/planner.css and are READ-ONLY from here.
   Scope every rule under [data-view="bridal"] so it cannot leak to another page.

   The screen is two groups — bridesmaids and groomsmen — as tabs, and inside a
   tab: a per-step tally strip, then a card per person. Cards rather than table
   rows because an email in a table column is always truncated, and the person's
   eight checkboxes sit in the same fixed order in every card, so scanning down a
   column of cards still reads like the people × tasks matrix it is.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The view root is a bare <div> from app.js with no layout of its own, so its
   children — stats band, toolbar, panel — would otherwise stack flush against
   each other. This is what was making the header look like it overlapped. */
[data-view="bridal"]{display:flex;flex-direction:column;gap:var(--s6);min-width:0}

[data-view="bridal"] .bp-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ── the strip above the panel: what this screen is, and the export ──────── */
[data-view="bridal"] .bp-bar{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;
  justify-content:space-between;
}
[data-view="bridal"] .bp-bar .note{margin:0}
[data-view="bridal"] .bp-bar .tools{margin-left:auto}

/* ── tabs ────────────────────────────────────────────────────────────────── */
[data-view="bridal"] .bp-tabs{
  display:flex;flex-wrap:wrap;gap:1px;background:var(--line);
  border-bottom:1px solid var(--line);
}
[data-view="bridal"] .bp-tab{
  flex:1 1 12rem;min-width:0;display:grid;gap:.2rem;justify-items:start;
  padding:var(--s3) var(--s4);border:0;border-bottom:3px solid transparent;
  background:var(--surface-2);color:var(--muted);font:inherit;text-align:left;cursor:pointer;
  transition:background .15s,color .15s;
}
[data-view="bridal"] .bp-tab b{
  font-family:var(--display);font-weight:400;font-size:1.125rem;color:var(--muted);line-height:1.2;
}
[data-view="bridal"] .bp-tab__n{
  font-size:var(--ft-meta);font-variant-numeric:tabular-nums;
}
[data-view="bridal"] .bp-tab .bar{width:100%;margin-top:.15rem}
[data-view="bridal"] .bp-tab:hover{background:var(--row-hover);color:var(--ink)}
/* Selected is carried by three things at once — the panel-coloured fill, the
   3px rule, and aria-selected — so it never rests on colour alone. */
[data-view="bridal"] .bp-tab[aria-selected=true]{
  background:var(--surface);color:var(--ink);border-bottom-color:var(--rust);
}
[data-view="bridal"] .bp-tab[aria-selected=true] b{color:var(--ink);font-weight:500}
[data-view="bridal"] .bp-tab:focus-visible{outline:2px solid var(--terracotta);outline-offset:-3px}

[data-view="bridal"] .bp-body:focus-visible{outline:2px solid var(--terracotta);outline-offset:-3px}

/* ── the group's own head: role make-up + add ────────────────────────────── */
[data-view="bridal"] .bp-head{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center;
  justify-content:space-between;padding:var(--s4) var(--s5) 0;
}
[data-view="bridal"] .bp-roles{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .4rem;
}
[data-view="bridal"] .bp-roles li{
  display:inline-flex;align-items:baseline;gap:.3rem;font-size:var(--ft-meta);color:var(--muted);
  border:1px solid var(--line);border-radius:2px;padding:.15rem .5rem;background:var(--surface-2);
}
[data-view="bridal"] .bp-roles b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
[data-view="bridal"] .bp-roles em{font-style:normal;color:var(--rust);font-weight:700}
[data-view="bridal"] .bp-roles li[data-state=short]{border-color:var(--terracotta);background:#FBF1EA}
[data-view="bridal"] .bp-roles li[data-state=over]{border-color:var(--gold);background:#FDFAF0}
[data-view="bridal"] .bp-roles li[data-state=over] em{color:var(--gold-ink)}

/* ── the tally strip: the column question, answered ──────────────────────── */
[data-view="bridal"] .bp-tallies{padding:var(--s4) var(--s5) 0}
[data-view="bridal"] .bp-tallies__h{
  font-family:var(--ui);font-size:var(--ft-label);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 var(--s2);
}
[data-view="bridal"] .bp-tallies ul{
  list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:2px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
}
[data-view="bridal"] .bp-tallies li{
  background:var(--surface);padding:var(--s2) var(--s3);display:grid;gap:.2rem;min-width:0;
}
[data-view="bridal"] .bp-tallies__k{
  font-size:var(--ft-meta);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
[data-view="bridal"] .bp-tallies__n{
  font-family:var(--display);font-size:1.125rem;line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
[data-view="bridal"] .bp-tallies__n i{font-style:normal;font-size:.8125rem;color:var(--muted)}
/* What the step means, shown once per group rather than on all eleven cards.
   A two-word label can't carry it — "Paid" read three different ways. */
[data-view="bridal"] .bp-tallies li small{
  font-size:var(--ft-label);line-height:1.35;color:var(--muted);
}
/* "everyone" is said by the numbers reading 5/5; the tint only repeats it */
[data-view="bridal"] .bp-tallies li[data-all=true]{background:#F3F8F3}
[data-view="bridal"] .bp-tallies li[data-all=true] .bp-tallies__n{color:var(--good)}

/* ── the card grid ───────────────────────────────────────────────────────── */
/* Column count is explicit rather than auto-fill: a card's useful width is
   ~340–460px, and auto-fill at 1680 lands on four narrow columns that clip
   every email — the exact thing this layout exists to fix. */
[data-view="bridal"] .bp-grid{
  display:grid;align-items:start;gap:var(--s4);padding:var(--s5);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:720px){
  [data-view="bridal"] .bp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1440px){
  [data-view="bridal"] .bp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

[data-view="bridal"] .bp-card{
  container-type:inline-size;container-name:bpcard;
  display:flex;flex-direction:column;gap:.15rem;min-width:0;
  padding:var(--s3) var(--s4) var(--s4);
  background:var(--surface);border:1px solid var(--line);border-radius:3px;
}
[data-view="bridal"] .bp-card:focus-within{border-color:var(--taupe);box-shadow:var(--shadow)}

[data-view="bridal"] .bp-card__top{
  display:flex;align-items:center;gap:var(--s2);min-width:0;
  padding-bottom:var(--s2);margin-bottom:var(--s1);border-bottom:1px solid var(--line);
}
[data-view="bridal"] .bp-name{flex:1 1 auto;min-width:0}
[data-view="bridal"] .bp-name input{
  font-family:var(--display);font-size:var(--ft-name);line-height:1.2;padding-inline:.3rem;
}
[data-view="bridal"] .bp-del{
  flex:none;width:var(--h-ctl);height:var(--h-ctl);display:grid;place-items:center;
  background:none;border:1px solid transparent;border-radius:2px;color:var(--muted);
  font-size:1.05rem;line-height:1;cursor:pointer;
}
[data-view="bridal"] .bp-del:hover{color:var(--bad);border-color:var(--bad-line);background:#fff}

/* ── one field per line: label, control, and something to tap ────────────── */
/* Tight on purpose: at 2-up the card is ~330px, and every pixel the label
   column and the gaps take is a pixel the email doesn't have to spell itself
   out in. This is exactly enough for adaeze.okonkwo@example.com. */
[data-view="bridal"] .bp-line{display:flex;align-items:center;gap:.4rem;min-width:0}
[data-view="bridal"] .bp-field{
  flex:1 1 auto;min-width:0;display:grid;align-items:center;gap:.4rem;
  grid-template-columns:3.25rem minmax(0,1fr);
}
[data-view="bridal"] .bp-field--notes{
  grid-template-columns:minmax(0,1fr);gap:.1rem;align-items:start;margin-top:var(--s2);
}
[data-view="bridal"] .bp-key{
  font-size:var(--ft-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}

/* A label beside the value costs ~58px, which is the difference between reading
   adaeze.okonkwo@example.com and reading adaeze.okonkwo@ex… So a narrow card
   puts the label above instead. Keyed to the card, not the viewport, because
   the same 1280px window shows 468px cards here and 346px cards at 1024. */
@container bpcard (max-width:23rem){
  [data-view="bridal"] .bp-line{align-items:flex-end}
  [data-view="bridal"] .bp-field{grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
}

/* Quiet until touched: at rest a card reads as a contact card, not as a form.
   `background-color`, not `background` — the shorthand would drop the caret
   planner.css paints on every select. */
[data-view="bridal"] .bp-card input:not([type=checkbox]),
[data-view="bridal"] .bp-card select,
[data-view="bridal"] .bp-card textarea{
  width:100%;height:var(--h-ctl);padding:0 .4rem;font-size:var(--ft-body);
  background-color:transparent;border:1px solid transparent;border-radius:2px;
  text-overflow:ellipsis;
}
[data-view="bridal"] .bp-card select{padding-right:1.4rem}
/* Role, email and phone are the card's secondary line — --ft-meta, which is
   also what makes a 26-character email fit a 2-up card without ellipsis. */
[data-view="bridal"] .bp-line input,
[data-view="bridal"] .bp-line select{font-size:var(--ft-meta)}
[data-view="bridal"] .bp-card textarea{
  height:auto;min-height:calc(var(--h-ctl) + .4rem);padding:.3rem .4rem;
  line-height:var(--lh-ui);resize:vertical;
}
[data-view="bridal"] .bp-card input:not([type=checkbox]):hover,
[data-view="bridal"] .bp-card select:hover,
[data-view="bridal"] .bp-card textarea:hover{border-color:var(--line-strong);background-color:#fff}
[data-view="bridal"] .bp-card input:not([type=checkbox]):focus,
[data-view="bridal"] .bp-card select:focus,
[data-view="bridal"] .bp-card textarea:focus{
  border-color:var(--terracotta);background-color:#fff;outline:none;
  box-shadow:0 0 0 3px rgba(194,112,61,.15);
}
/* Must come after the :focus rule above — that one sets outline:none, and
   :focus-visible is a subset of :focus, so without this a keyboard user gets a
   tinted border and no ring at all. The :not() has to be repeated here or the
   :focus rule is the more specific of the two and wins. */
[data-view="bridal"] .bp-card input:not([type=checkbox]):focus-visible,
[data-view="bridal"] .bp-card select:focus-visible,
[data-view="bridal"] .bp-card textarea:focus-visible{
  outline:2px solid var(--terracotta);outline-offset:1px;
}
[data-view="bridal"] .bp-card ::placeholder{color:var(--muted);opacity:1}

[data-view="bridal"] .bp-act{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  height:var(--h-ctl);min-width:var(--h-ctl);padding:0 .45rem;
  font-size:var(--ft-label);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--rust);background:#fff;border:1px solid var(--line-strong);border-radius:2px;
  text-decoration:none;white-space:nowrap;
}
[data-view="bridal"] .bp-act:hover{background:var(--rust);border-color:var(--rust);color:#fff}

/* ── progress + the eight ticks ──────────────────────────────────────────── */
[data-view="bridal"] .bp-prog{
  display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .6rem;
  margin:var(--s3) 0 var(--s2);
}
[data-view="bridal"] .bp-count{
  font-size:var(--ft-meta);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;
}
[data-view="bridal"] .bp-count b{color:var(--ink);font-weight:700;font-size:var(--ft-body)}
[data-view="bridal"] .bp-prog .bar{flex:1 1 6rem}

/* Fixed two-column order, identical in every card, so "Paid" is always in the
   same place and a column of cards still scans like a matrix. */
[data-view="bridal"] .bp-ticks{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
[data-view="bridal"] .bp-tick{
  display:flex;align-items:center;gap:.45rem;min-height:var(--h-ctl-lg);
  padding:0 .5rem;border:1px solid var(--line);border-radius:2px;background:var(--surface-2);
  font-size:var(--ft-meta);line-height:1.2;color:var(--muted);cursor:pointer;
}
[data-view="bridal"] .bp-tick input[type=checkbox]{
  width:18px;height:18px;accent-color:var(--rust);flex:none;cursor:pointer;
}
[data-view="bridal"] .bp-tick:hover{border-color:var(--line-strong);background:#fff}
/* planner.css has a global `input:focus{outline:none}` (0,1,1) which outranks
   its own `:focus-visible` (0,1,0), so a keyboard user tabbing the checklist
   gets no ring at all. Put it back, scoped. See the report — the shared file
   wants an `input:focus-visible` rule after that one. */
[data-view="bridal"] .bp-tick input[type=checkbox]:focus-visible{
  outline:2px solid var(--terracotta);outline-offset:2px;
}
/* Ticked is a ticked box first; the weight and tint only repeat it. */
[data-view="bridal"] .bp-tick:has(input:checked){
  background:#F3F8F3;border-color:var(--good-line);color:var(--ink);font-weight:700;
}

/* ── in-tab empty, and first run ─────────────────────────────────────────── */
[data-view="bridal"] .bp-none{
  padding:var(--s6) var(--s5);text-align:center;display:grid;justify-items:center;gap:var(--s3);
  color:var(--muted);font-size:var(--ft-body);
}
[data-view="bridal"] .bp-empty{
  padding:var(--s7) var(--s5);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
}
[data-view="bridal"] .bp-empty h2{font-size:1.375rem}
[data-view="bridal"] .bp-empty p{
  max-width:46ch;color:var(--muted);font-size:var(--ft-body);line-height:var(--lh-ui);
}
[data-view="bridal"] .bp-empty__lead{margin-top:var(--s3)}
[data-view="bridal"] .bp-empty__tasks{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.35rem;max-width:34rem;
}
[data-view="bridal"] .bp-empty__tasks li{
  font-size:var(--ft-meta);color:var(--muted);background:var(--surface-2);
  border:1px solid var(--line);border-radius:2px;padding:.2rem .55rem;
}
/* The checklist on the first-run screen, as the three sets it really is:
   what everybody does, then what each side does on top. One flat cloud of
   twelve chips would say "everyone does all of this", which is the exact
   thing this screen now has to stop saying. Auto-fit rather than three fixed
   columns — with only shared steps configured there is one set, and it should
   not sit in a third of the width with two empty columns beside it. */
[data-view="bridal"] .bp-sets{
  display:grid;gap:var(--s5) var(--s6);width:100%;max-width:52rem;margin-top:var(--s2);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
}
[data-view="bridal"] .bp-set{display:grid;justify-items:center;gap:var(--s3);align-content:start}
[data-view="bridal"] .bp-set h3{
  margin:0;font-family:var(--ui);font-size:var(--ft-label);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
[data-view="bridal"] .bp-empty__acts{
  display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s3);
}
[data-view="bridal"] .bp-empty__target{font-size:var(--ft-meta)}

/* ── phone ───────────────────────────────────────────────────────────────── */
/* --h-ctl is already 44px under this breakpoint via planner.css, so every field
   and every Call / Email link becomes a touch target without repeating a size. */
@media (max-width:639px){
  [data-view="bridal"] .bp-bar .tools{width:100%}
  [data-view="bridal"] .bp-bar .tools .btn{flex:1}
  [data-view="bridal"] .bp-tab{flex:1 1 100%;padding:var(--s3)}
  [data-view="bridal"] .bp-head{padding:var(--s3) var(--s3) 0}
  [data-view="bridal"] .bp-head .btn{width:100%}
  [data-view="bridal"] .bp-tallies{padding:var(--s4) var(--s3) 0}
  [data-view="bridal"] .bp-tallies ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-view="bridal"] .bp-grid{padding:var(--s3);gap:var(--s3)}
  [data-view="bridal"] .bp-card{padding:var(--s2) var(--s3) var(--s3)}
  [data-view="bridal"] .bp-tick{padding:0 .35rem;gap:.35rem}
  [data-view="bridal"] .bp-empty{padding:var(--s6) var(--s4)}
  [data-view="bridal"] .bp-empty__acts{width:100%;flex-direction:column}
}

@media print{
  [data-view="bridal"] .bp-bar,
  [data-view="bridal"] .bp-act,
  [data-view="bridal"] .bp-del,
  [data-view="bridal"] .bp-head .btn{display:none !important}
  [data-view="bridal"] .bp-grid{grid-template-columns:repeat(2,1fr)}
}