/* ---------------------------------------------------------------------------
   C&C — the wedding ledger. A loose sheet pulled out of the journal:
   cream paper, ledger ruling, taped tabs, red ribbon when it's tied shut.
   Uses the site's tokens from style.css (sheet/ink/ember/red/blue/etc).
--------------------------------------------------------------------------- */

/* The ledger is an app screen, like Rise & Fall: the page itself never
   scrolls — only the rows area does. That way the title, tabs, toolbar and
   label shelf sit physically above the scroll region and cannot move, no
   matter what the site's global overflow rules do to position:sticky. */
body[data-page="cc"] {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body[data-page="cc"] .shell { flex: 0 0 auto; }
body[data-page="cc"] main.cc-root { animation: none; }

.cc-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1240px;
  margin: 12px auto 16px;
  padding: 0 14px;
}

/* ---- the sheet ---------------------------------------------------------- */

.cc-sheet {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 300px 160px at 12% 6%, rgba(138, 90, 20, 0.07), transparent 60%),
    radial-gradient(ellipse 240px 200px at 88% 92%, rgba(138, 90, 20, 0.09), transparent 65%),
    var(--sheet);
  border: 1px solid rgba(80, 60, 30, 0.35);
  border-radius: 3px;
  box-shadow: 0 18px 50px var(--sheet-shadow), 0 2px 0 rgba(255, 255, 255, 0.25) inset;
  padding: 26px 30px 40px 44px;
  color: var(--ink);
}
/* stitched binding holes down the left edge */
.cc-sheet::before {
  content: "";
  position: absolute;
  left: 14px; top: 20px; bottom: 20px;
  width: 6px;
  background-image: radial-gradient(circle 3px, rgba(43, 34, 22, 0.35) 55%, transparent 60%);
  background-size: 6px 34px;
  background-repeat: repeat-y;
}

/* ---- header ------------------------------------------------------------- */

/* Title, tabs and the current tab's toolbar: a plain block above the scroll
   region — nothing to un-stick. */
.cc-sticky { flex: 0 0 auto; }

#cc-app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#cc-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;   /* never a sideways scrollbar — the paper zooms to fit */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  /* keep row content clear of the scrollbar */
  padding-right: 6px;
}
#cc-locked, #cc-loading { overflow-y: auto; }

/* ---- the permanent two-page split ---------------------------------------
   LEFT page: header, tabs and the open section. RIGHT page: the guest list,
   always - it is no longer a tab. */
.cc-split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
}
.cc-half {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.cc-guesthead {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--red);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
/* The guest side scrolls its rows vertically, but the trifold must be able
   to hang out past the book's edge when unfolded. A scrollport clips, so the
   clip edge is pushed ~900px past the paper: the open sheet never reaches
   it, and the (off-paper) scrollbar is simply hidden - the wheel scrolls. */
#cc-guestside {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin-right: -900px;
  padding-right: 900px;
  scrollbar-width: none;
}
#cc-guestside::-webkit-scrollbar { display: none; }
/* narrow windows: the two pages stack, guest list below */
@media (max-width: 1000px) {
  .cc-split { grid-template-columns: 1fr; row-gap: 26px; }
  #cc-guestside { margin-right: 0; padding-right: 0; }
}

.cc-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--red);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.cc-head h1 {
  font-family: var(--serif);
  font-size: 1.9rem;
  margin: 0;
  letter-spacing: 0.02em;
}
.cc-head h1 .amp { color: var(--red); font-style: italic; padding: 0 2px; }
.cc-head .cc-note {
  font-family: var(--hand);
  color: var(--ink-3);
  font-size: 0.95rem;
  transform: rotate(-1.2deg);
}
.cc-saved {
  margin-left: auto;
  font-family: var(--hand);
  font-size: 0.9rem;
  color: var(--brass);
  opacity: 0;
  transition: opacity 0.35s;
}
.cc-saved.on { opacity: 1; }
.cc-saved.err { color: var(--red); }

/* ---- the taped index tabs ----------------------------------------------- */

.cc-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}
.cc-tabs button {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid rgba(80, 60, 30, 0.4);
  border-radius: 2px;
  padding: 7px 16px 6px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
  transform: rotate(-0.6deg);
}
.cc-tabs button:nth-child(2n) { transform: rotate(0.7deg); }
/* a bit of tape over each tab */
.cc-tabs button::after {
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  width: 34px; height: 10px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(255, 252, 240, 0.45);
  border: 1px solid rgba(120, 100, 60, 0.2);
}
.cc-tabs button:hover { color: var(--ink); border-color: var(--ember); }
.cc-tabs button[aria-selected="true"] {
  background: var(--sheet);
  color: var(--red);
  border-bottom-color: var(--sheet);
  box-shadow: none;
  transform: rotate(0deg) translateY(1px);
}

/* ---- toolbars ------------------------------------------------------------ */

.cc-bar-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.cc-bar-tools input[type="search"] {
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--line);
  padding: 4px 2px;
  width: 200px;
}
.cc-bar-tools input[type="search"]:focus { outline: none; border-bottom-color: var(--ember); }
.cc-add {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sheet);
  background: var(--brass);
  border: none;
  border-radius: 2px;
  padding: 7px 14px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.cc-add:hover { filter: brightness(1.1); }

/* the label shelf */
.cc-labelshelf {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 3px;
}
.cc-labelshelf .t {
  font-family: var(--hand);
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-right: 4px;
}

/* ---- chips (labels) ------------------------------------------------------ */

.cc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid rgba(80, 60, 30, 0.35);
  border-radius: 2px;
  padding: 2px 7px;
  white-space: nowrap;
}
.cc-chip .x {
  cursor: pointer;
  color: var(--ink-3);
  font-weight: 700;
  border: none;
  background: none;
  padding: 0 1px;
  font-size: 0.75rem;
  line-height: 1;
}
.cc-chip .x:hover { color: var(--red); }
.cc-chipadd {
  font-family: var(--sans);
  font-size: 0.72rem;
  width: 86px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--line);
  padding: 2px;
}
.cc-chipadd:focus { outline: none; border-bottom-color: var(--ember); }

/* ---- the ledger tables --------------------------------------------------- */

/* Only become a scroll box when the table truly can't fit — a sticky header
   cannot stick inside an overflow container, so wide screens keep overflow
   visible and get sticky column headers. */
.cc-scroll { overflow-x: visible; }
@media (max-width: 1237px) { .cc-scroll { overflow-x: auto; } }

/* ---- the trifold guest paper --------------------------------------------- */
/* A separate piece of paper taped into the ledger. Folded, only the names
   panel shows; unfolding swings a printed flap open to reveal the next panel.
   Its taped names edge never slides when the sheet widens. */

.cc-trifold {
  position: relative;
  margin: 6px 0 34px;
  isolation: isolate;
}

.cc-paper {
  --pp: #f4ecd4;            /* this paper is a touch whiter than the ledger */
  --pp-crease: rgba(84, 62, 28, 0.38);
  position: relative;
  display: inline-block;
  vertical-align: top;
  background:
    radial-gradient(ellipse 220px 120px at 85% 4%, rgba(138, 90, 20, 0.06), transparent 60%),
    var(--pp);
  border: 1px solid rgba(80, 60, 30, 0.45);
  border-radius: 2px;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.3);
  perspective: 2200px;
  transform-origin: left top;
}
@media (prefers-color-scheme: dark) {
  .cc-paper { --pp: #e2d5b0; }
}

/* the tape holding it into the journal */
.cc-tape {
  position: absolute;
  top: -9px;
  width: 52px; height: 16px;
  background: rgba(255, 252, 240, 0.5);
  border: 1px solid rgba(120, 100, 60, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  z-index: 6;
  pointer-events: none;
}
.cc-tape.a { left: 22px; transform: rotate(-4deg); }
.cc-tape.b { right: 30px; transform: rotate(3deg); }

/* the reveal window: clips columns, but is NOT a scroll container (clip, not
   hidden/auto), so the column headers can stay sticky while rows scroll */
.cc-clip {
  overflow-x: clip;
  overflow-y: visible;
  width: 166px;             /* applyFold() sets the real fold width */
  will-change: width;
}

table.cc-ledger.cc-gtable {
  width: 1044px;            /* exact sum of GCOLS in cc.js */
  table-layout: fixed;
}
table.cc-gtable th { background: var(--pp); }
table.cc-gtable input[type="text"],
table.cc-gtable input[type="number"] { min-width: 0; }
/* crease lines where the panels fold (columns 3 and 8) */
table.cc-gtable th:nth-child(3), table.cc-gtable td:nth-child(3),
table.cc-gtable th:nth-child(8), table.cc-gtable td:nth-child(8) {
  border-left: 1px dashed var(--pp-crease);
  background-image: linear-gradient(90deg, rgba(60, 40, 10, 0.06), transparent 16px);
}

/* the folded right edge — click to unfold */
.cc-unfoldedge {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 22px;
  border: none;
  border-left: 1px dashed var(--pp-crease);
  background: linear-gradient(90deg, rgba(60, 40, 10, 0.1), rgba(60, 40, 10, 0.02) 60%);
  color: var(--ink-3);
  font-size: 0.85rem;
  cursor: pointer;
  z-index: 5;
  padding: 10px 0 0;
  text-align: center;
  align-items: flex-start;
}
.cc-unfoldedge:hover { color: var(--ember); background: linear-gradient(90deg, rgba(138, 90, 20, 0.16), rgba(138, 90, 20, 0.03) 60%); }

/* The swinging panel is a real clipped print of the table, with a plain
   ruled-paper back. It turns around the exact column crease like a miniature
   gate-fold sheet instead of fading a blank rectangle over widening content. */
.cc-flap {
  position: absolute;
  top: 0;
  z-index: 30;
  transform-origin: left center;
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: transform;
}
.cc-flap-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--pp);
  border: 1px solid rgba(80, 60, 30, 0.4);
  box-shadow: -10px 2px 20px rgba(0, 0, 0, 0.22);
}
.cc-flap-front::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 22px;
  background: linear-gradient(90deg, rgba(54, 34, 8, 0.15), transparent);
  pointer-events: none;
}
.cc-flap-back {
  transform: rotateY(180deg);
  background:
    linear-gradient(90deg, rgba(54, 34, 8, 0.14), transparent 24px),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(120, 95, 50, 0.08) 30px 31px),
    var(--pp);
}
.cc-flap-print {
  position: absolute;
  top: 0;
  width: 1044px;
  overflow: visible;
  pointer-events: none;
}
.cc-flap-print table.cc-gtable { width: 1044px; }
.cc-flap-print table.cc-gtable th { position: static !important; }
.cc-flap.opening { transform: rotateY(-179deg); }
.cc-flap.opening.go {
  transform: rotateY(0deg);
  transition: transform 640ms cubic-bezier(.22, .72, .18, 1);
}
.cc-flap.closing { transform: rotateY(0deg); }
.cc-flap.closing.go {
  transform: rotateY(-179deg);
  transition: transform 640ms cubic-bezier(.55, .04, .72, .32);
}
@media (prefers-reduced-motion: reduce) {
  .cc-flap { display: none; }
  .cc-clip { transition: none !important; }
}

/* fold controls in the toolbar */
.cc-foldctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.cc-foldctl b {
  font-family: var(--hand);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink-3);
}
.cc-foldctl button {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid rgba(80, 60, 30, 0.4);
  border-radius: 2px;
  padding: 5px 12px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.cc-foldctl button:hover:not(:disabled) { color: var(--ember); border-color: var(--ember); }
.cc-foldctl button:disabled { opacity: 0.4; cursor: default; }
table.cc-ledger {
  width: 100%;
  border-collapse: separate;   /* collapsed borders don't travel with sticky th */
  border-spacing: 0;
  font-size: 0.87rem;
}
table.cc-ledger th {
  /* sticks to the top of #cc-page's own scrollport */
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--sheet);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 2px solid var(--ember);
  white-space: nowrap;
}
table.cc-ledger td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.cc-ledger tr:nth-child(2n) td { background: rgba(138, 90, 20, 0.04); }
table.cc-ledger tr:hover td { background: rgba(138, 90, 20, 0.08); }

table.cc-ledger input[type="text"],
table.cc-ledger input[type="number"],
table.cc-ledger input[type="url"] {
  font-family: var(--serif);
  font-size: 0.87rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 4px 1px;
  width: 100%;
  min-width: 70px;
}
table.cc-ledger input:focus {
  outline: none;
  border-bottom: 1px solid var(--ember);
}
table.cc-ledger input.num { text-align: right; min-width: 56px; }
table.cc-ledger input.kids { min-width: 40px; width: 48px; text-align: center; }
table.cc-ledger select {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 3px 2px;
  cursor: pointer;
  max-width: 110px;
}
table.cc-ledger select:hover, table.cc-ledger select:focus {
  border-color: var(--line);
  outline: none;
  background: var(--sheet);
}
/* colour the decisive answers like pencil marks */
select.mark-yes   { color: var(--brass) !important; font-weight: 700; }
select.mark-no    { color: var(--red)   !important; font-weight: 700; }
select.mark-maybe { color: var(--ember) !important; font-weight: 700; }
select.side-claire { color: var(--red)  !important; font-weight: 700; }
select.side-chris  { color: var(--blue) !important; font-weight: 700; }

.cc-del {
  border: none;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 5px;
}
.cc-del:hover { color: var(--red); }

td.cc-chips-cell { min-width: 170px; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* checkbox as an inked tick */
table.cc-ledger input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--brass);
  cursor: pointer;
}

/* ---- ticking rows + the mass-change bar ---------------------------------- */

th.selcell, td.selcell { width: 28px; padding: 3px 2px 3px 6px; }
table.cc-ledger tr.sel td { background: rgba(46, 110, 85, 0.13) !important; }

.cc-massbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 8px 10px;
  background: rgba(46, 110, 85, 0.09);
  border: 1px solid var(--brass);
  border-radius: 3px;
}
.cc-massbar b {
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--brass);
  letter-spacing: 0.04em;
}
.cc-massbar select {
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--ink-2);
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 4px 3px;
  cursor: pointer;
}
.cc-massbar select:hover, .cc-massbar select:focus { border-color: var(--brass); outline: none; }
.cc-massbar .cc-chipadd { width: 108px; }
.cc-massbar #cc-selclear {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 4px 10px;
  cursor: pointer;
  margin-left: auto;
}
.cc-massbar #cc-selclear:hover { color: var(--red); border-color: var(--red); }

/* totals line under the wedding list */
.cc-totals {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px solid var(--ember);
  font-family: var(--serif);
}
.cc-totals b { font-size: 1.05rem; }
.cc-totals .lbl {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
}
.cc-totals .over  b { color: var(--red); }
.cc-totals .under b { color: var(--brass); }

.cc-empty {
  font-family: var(--hand);
  color: var(--ink-3);
  padding: 22px 6px;
  transform: rotate(-0.8deg);
}

/* ---- stats --------------------------------------------------------------- */

.cc-scope {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-left: auto;
}
.cc-scope button {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--ink-3);
  padding: 6px 12px;
  cursor: pointer;
}
.cc-scope button[aria-pressed="true"] { background: var(--ember); color: var(--sheet); }

.cc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 14px 0 20px;
}
.cc-tile {
  background: var(--panel);
  border: 1px solid rgba(80, 60, 30, 0.35);
  border-radius: 3px;
  padding: 12px 14px 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
  position: relative;
}
.cc-tile:nth-child(2n)  { transform: rotate(0.5deg); }
.cc-tile:nth-child(2n+1){ transform: rotate(-0.5deg); }
.cc-tile .lbl {
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cc-tile .val {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.cc-tile .sub { font-family: var(--hand); font-size: 0.78rem; color: var(--ink-3); }

.cc-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px 34px;
}
.cc-chart h4 {
  font-family: var(--serif);
  font-size: 0.98rem;
  margin: 0 0 2px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.cc-chart .sub {
  font-family: var(--hand);
  font-size: 0.78rem;
  color: var(--ink-3);
  margin: 0 0 8px;
}
.cc-legend {
  display: flex;
  gap: 14px;
  font-family: var(--sans);
  font-size: 0.7rem;
  color: var(--ink-2);
  margin: 4px 0 6px;
}
.cc-legend i {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: -1px;
}

.cc-hbar {
  display: grid;
  grid-template-columns: 108px 1fr 34px;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.cc-hbar .l {
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-hbar .track {
  height: 14px;
  border-left: 2px solid var(--ink-3);
  position: relative;
}
.cc-hbar .track i {
  position: absolute;
  left: 0; top: 1px; bottom: 1px;
  border-radius: 0 4px 4px 0;
  background: var(--ember);
  min-width: 2px;
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.cc-hbar:hover .track i { filter: brightness(1.15); }
.cc-hbar .v {
  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
}

/* ---- wedding party board ------------------------------------------------- */

.cc-pairs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 3px;
}
.cc-pairs .t { font-family: var(--hand); font-size: 0.85rem; color: var(--ink-3); }
.cc-pairs .none { font-family: var(--hand); font-size: 0.82rem; color: var(--ink-3); }
.cc-chip.pair { font-size: 0.74rem; padding: 3px 9px; }
.c-claire { color: var(--red); }
.c-chris { color: var(--blue); }

.cc-sideless {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--red);
  margin: 0 0 12px;
}

.cc-party {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 760px) { .cc-party { grid-template-columns: 1fr; } }

.cc-pcol h4 {
  font-family: var(--serif);
  font-size: 1.05rem;
  margin: 0;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--line);
}
.cc-pcol h4.claire { border-bottom-color: var(--red); color: var(--red); }
.cc-pcol h4.chris { border-bottom-color: var(--blue); color: var(--blue); }
.cc-pcol .sub {
  font-family: var(--hand);
  font-size: 0.78rem;
  color: var(--ink-3);
  margin: 2px 0 8px;
}

.cc-pcard {
  background: var(--panel);
  border: 1px solid rgba(80, 60, 30, 0.4);
  border-radius: 3px;
  padding: 5px 10px 6px;
  margin-bottom: 7px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  position: relative;
  transform: rotate(-0.35deg);
  line-height: 1.35;   /* the site's roomy 1.7 bloats these little cards */
}
.cc-pcard:nth-child(2n) { transform: rotate(0.4deg); }
/* tape at the top corner */
.cc-pcard::after {
  content: "";
  position: absolute;
  top: -6px; right: 14px;
  width: 34px; height: 11px;
  transform: rotate(3deg);
  background: rgba(255, 252, 240, 0.45);
  border: 1px solid rgba(120, 100, 60, 0.2);
}
.cc-pcard.maybe {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}
.cc-pcard .n {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 1px;
}
.cc-pcard .n .pm {
  font-family: var(--hand);
  font-weight: 400;
  font-size: 0.76rem;
  color: var(--ink-3);
  margin-left: 8px;
}
.cc-pcard .row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 0;
}
.cc-pcard select {
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 1px 2px;
  cursor: pointer;
  max-width: 200px;
}
.cc-pcard select:hover, .cc-pcard select:focus {
  border-color: var(--line);
  background: var(--sheet);
  outline: none;
}
.cc-pcard .plbl { color: var(--ember); font-size: 0.95rem; }

.cc-padd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 7px 8px;
  border: 1px dashed var(--line);
  border-radius: 3px;
}
.cc-padd .pick {
  flex: 1;
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-2);
  background: transparent;
  border: none;
  cursor: pointer;
  min-width: 0;
}
.cc-padd .pick:focus { outline: none; }
.cc-padd button {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sheet);
  background: var(--brass);
  border: none;
  border-radius: 2px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.cc-padd button[data-addas="maybe"] { background: var(--ember); }
.cc-padd button:hover { filter: brightness(1.1); }

/* ---- locked / loading ---------------------------------------------------- */

.cc-locked {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 90px 30px 100px;
}
.cc-locked .ribbon {
  position: absolute;
  left: -12%; right: -12%;
  height: 34px;
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(232, 200, 120, 0.28) 34px 37px),
    linear-gradient(180deg, #8f2820, var(--bookmark) 55%, #5e130e);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}
.cc-locked .ribbon.a { top: 44%; transform: rotate(7deg); }
.cc-locked .ribbon.b { top: 44%; transform: rotate(-7deg); }
.cc-locked .seal {
  position: relative;
  z-index: 2;
  width: 108px; height: 108px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #b8443a, #7e1f18 58%, #55120d);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(126, 31, 24, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--gilt);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transform: rotate(-6deg);
}
.cc-locked h2 {
  position: relative;
  z-index: 2;
  font-family: var(--serif);
  margin: 0 0 6px;
}
.cc-locked p {
  position: relative;
  z-index: 2;
  font-family: var(--hand);
  color: var(--ink-2);
  margin: 4px 0;
}
.cc-locked .why {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
}
.cc-locked a { color: var(--ember); }

.cc-loading {
  text-align: center;
  font-family: var(--hand);
  color: var(--ink-3);
  padding: 70px 0;
}

@media (max-width: 700px) {
  .cc-sheet { padding: 18px 14px 20px 26px; }
  .cc-hbar { grid-template-columns: 84px 1fr 30px; }
}

/* role badge on wedding-party cards */
.cc-pcard .prole {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ember);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: 2px;
}

/* the small breakdown after a stat bar's number (members +spouses +kids) */
.cc-hbar .vnote {
  font-size: 0.72em;
  font-weight: 400;
  color: var(--ink-3);
  white-space: nowrap;
}

/* the "likely to come" toggle - cycles likely / doubtful / unmarked */
.cc-likely {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.cc-likely.l-likely   { color: #2e6e55; border-color: #2e6e55; background: rgba(46, 110, 85, 0.08); }
.cc-likely.l-doubtful { color: var(--red); border-color: var(--red); background: rgba(163, 51, 39, 0.07); }