/* ==========================================================================
   Pre-COP31 — Pacific identity layer

   app.css supplies the structure: shell, cards, tables, forms, dark mode.
   This file supplies the *identity*: the palette, the cloth patterns and the
   components that exist only in this platform — badges, the scanner verdict
   screen, Participant 360 and the Command Centre.

   Design intent (spec §67, §84): the palette is taken from the Pacific
   Pre-COP31 mark itself and from nothing else — the ocean blue that dominates
   it (#0070D0), the deep royal navy of the wordmark (#003090) and the single
   green of the island (#00A050). Blue carries the authority; the
   green is an accent and appears where something is *good* — a granted scan, a
   confirmed accreditation — never as decoration. Masi (tapa) geometry appears
   as texture on brand surfaces only, never as wallpaper behind reading matter.

   There is no purple anywhere in this platform. Section 15 exists to hold that
   true against the inherited stylesheet, which is full of it.
   ========================================================================== */

/* ────────────────────────── 1. Palette override ────────────────────────── */

:root,
[data-theme="light"] {
  --brand:        #0059b3;     /* ocean blue — the institutional colour */
  --brand-2:      #0070d0;     /* lighter ocean — accents and gradients */
  --brand-soft:   #e7f1fa;
  --brand-deep:   #003090;     /* royal navy — headers, the darkest band */
  --reef:         #00854a;     /* the mark's green, darkened enough to read */
  --reef-2:       #00a050;     /* the mark's green exactly, for fills */
  --sand:         #f4efe5;     /* warm neutral for public surfaces */
  --coral:        #e00010;     /* the red in the mark — genuine urgency only */

  --bg:           #f3f6fa;
  --surface:      #ffffff;
  --surface-2:    #f7fafd;
  --sidebar:      #072a55;
  --sidebar-hover:#0d3d73;
  --sidebar-text: #9db8d6;

  --bs-primary:     #0059b3;
  --bs-primary-rgb: 0,89,179;
}

[data-theme="dark"] {
  --brand:        #4aa8ee;
  --brand-2:      #79c4f7;
  --brand-soft:   #0c2540;
  --brand-deep:   #05192f;
  --reef:         #4cc084;
  --reef-2:       #00a050;
  --sand:         #1a1815;
  --coral:        #ef7f74;

  --bg:           #060f1a;
  --surface:      #0e1b2a;
  --surface-2:    #132436;
  --sidebar:      #030a14;
  --sidebar-hover:#0d2038;

  --line:         #1b3149;
  --line-2:       #26415d;

  --bs-primary:     #4aa8ee;
  --bs-primary-rgb: 74,168,238;
}

/* The masi band, re-woven in the mark's palette: ocean triangles, a reef-green
   counterpoint, and both diamonds taken straight off the logo. The base file's
   version is indigo; overriding the image rather than the shape keeps one
   source of truth for the geometry. */
.pc-masi {
  background-color: #e8f1f9;
  background-image: url("data:image/svg+xml,%3Csvg width='76' height='26' viewBox='0 0 76 26' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='76' height='26' fill='%23e8f1f9'/%3E%3Cpath d='M0 26 L19 5 L38 26 Z' fill='%23a9caea'/%3E%3Cpath d='M38 0 L57 21 L76 0 Z' fill='%23cbe6d5'/%3E%3Cpolygon points='19,12 22.5,15.5 19,19 15.5,15.5' fill='%230059b3'/%3E%3Cpolygon points='57,7 60.5,10.5 57,14 53.5,10.5' fill='%2300a050'/%3E%3C/svg%3E");
  border-color: #d2e3f2;
}
[data-theme="dark"] .pc-masi {
  background-color: #0c1f33;
  background-image: url("data:image/svg+xml,%3Csvg width='76' height='26' viewBox='0 0 76 26' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='76' height='26' fill='%230c1f33'/%3E%3Cpath d='M0 26 L19 5 L38 26 Z' fill='%231d4470'/%3E%3Cpath d='M38 0 L57 21 L76 0 Z' fill='%23174435'/%3E%3Cpolygon points='19,12 22.5,15.5 19,19 15.5,15.5' fill='%2379c4f7'/%3E%3Cpolygon points='57,7 60.5,10.5 57,14 53.5,10.5' fill='%2300a050'/%3E%3C/svg%3E");
  border-color: #17304a;
}

/* ─────────────────────────── 2. Government mark ────────────────────────── */

.pc-crest {
  display: inline-flex; align-items: center; gap: .6rem;
}
.pc-crest-mark {
  width: 2.1rem; height: 2.1rem; flex: none;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff; display: grid; place-items: center;
  font-size: .95rem; box-shadow: var(--shadow-xs);
}
.pc-crest-text { line-height: 1.15; }
.pc-crest-title {
  font-weight: 800; letter-spacing: -.02em; font-size: 1rem; color: var(--ink);
}
.pc-crest-sub {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}

/* The ministry attribution line that appears under headers and in footers.
   Small, uppercase, never competing with the conference name above it. */
.pc-ministry {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}

/* ───────────────────────────── 3. Hero band ────────────────────────────── */

.pc-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 55%, var(--brand-2) 100%);
  color: #fff;
  padding: clamp(2.6rem, 7vw, 5.5rem) 0;
}
.pc-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--tapa); background-size: 132px 132px; opacity: .26;
}
/* A horizon line: the ocean reference that stops the gradient reading as a
   generic corporate header. */
.pc-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5.5rem;
  background: radial-gradient(120% 100% at 50% 100%, rgba(255,255,255,.16), transparent 70%);
  pointer-events: none;
}
.pc-hero > * { position: relative; z-index: 1; }
.pc-hero h1 {
  color: #fff; font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(2rem, 5.4vw, 3.9rem); line-height: 1.03;
}
.pc-hero-dates {
  font-size: clamp(.95rem, 1.6vw, 1.2rem); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.9);
}
.pc-hero-lede { color: rgba(255,255,255,.86); max-width: 42rem; font-size: 1.02rem; }

/* ────────────────────────── 4. Participant badge ───────────────────────── */
/* Sized to a real conference badge: 86 × 122 mm, the common CR100 insert.
   Fixed millimetres, not percentages — this element exists to be printed, and
   a badge that is "responsive" is a badge that comes out of the printer the
   wrong size for the holder. */

.pc-badge {
  width: 86mm; height: 122mm;
  background: var(--surface); color: #0f172a;
  border-radius: 3mm; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow); border: 1px solid var(--line);
  page-break-inside: avoid; break-inside: avoid;
}
.pc-badge-head {
  background: var(--badge-band, #0059b3); color: var(--badge-ink, #fff);
  padding: 4mm 5mm 3mm; position: relative; overflow: hidden;
}
.pc-badge-head::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--tapa); background-size: 74px 74px; opacity: .3;
}
.pc-badge-head > * { position: relative; z-index: 1; }
.pc-badge-conf {
  font-size: 3.4mm; font-weight: 800; letter-spacing: -.01em; line-height: 1.1;
}
.pc-badge-host {
  font-size: 2.2mm; letter-spacing: .09em; text-transform: uppercase;
  opacity: .85; margin-top: .4mm;
}
.pc-badge-body {
  flex: 1; padding: 4mm 5mm 2mm; display: flex; flex-direction: column;
  align-items: center; text-align: center; min-height: 0;
}
.pc-badge-photo {
  width: 26mm; height: 26mm; border-radius: 50%; object-fit: cover;
  border: 0.8mm solid var(--badge-band, #0059b3); background: #e2e8f0;
  display: grid; place-items: center; font-size: 8mm; font-weight: 700;
  color: var(--badge-band, #0059b3); flex: none;
}
.pc-badge-name {
  font-size: 5.4mm; font-weight: 800; line-height: 1.12; margin-top: 2.5mm;
  letter-spacing: -.02em; color: #0f172a;
}
.pc-badge-name.long  { font-size: 4.6mm; }
.pc-badge-name.longer{ font-size: 3.9mm; }
.pc-badge-role  { font-size: 2.9mm; color: #475569; margin-top: .8mm; line-height: 1.25; }
.pc-badge-org   { font-size: 3.1mm; font-weight: 600; color: #0f172a; margin-top: 1.2mm; line-height: 1.2; }
.pc-badge-country {
  font-size: 2.7mm; letter-spacing: .14em; text-transform: uppercase;
  color: #64748b; margin-top: .8mm; font-weight: 600;
}
.pc-badge-cat {
  margin-top: auto; align-self: stretch;
  background: var(--badge-band, #0059b3); color: var(--badge-ink, #fff);
  font-size: 3.2mm; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  padding: 1.8mm 2mm; text-align: center;
}
.pc-badge-foot {
  display: flex; align-items: center; gap: 3mm; padding: 3mm 5mm 4mm;
  background: #fff;
}
.pc-badge-qr { width: 21mm; height: 21mm; flex: none; display: block; }
.pc-badge-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 2.7mm; color: #334155; line-height: 1.5; text-align: left;
}
.pc-badge-ref strong { display: block; font-size: 3.2mm; color: #0f172a; }

/* Reverse face */
.pc-badge-back { justify-content: space-between; }
.pc-badge-back-body {
  padding: 5mm; font-size: 2.8mm; line-height: 1.5; color: #334155; flex: 1;
}
.pc-badge-back-body h4 {
  font-size: 3.2mm; font-weight: 800; margin: 0 0 1.5mm; color: #0f172a;
}
.pc-badge-emergency {
  background: #fef2f2; border-top: 0.5mm solid #fecaca; color: #991b1b;
  padding: 3mm 5mm; font-size: 2.6mm; font-weight: 600; text-align: center;
}

/* The digital badge in the portal: same identity, screen proportions. */
.pc-digital-badge {
  max-width: 24rem; margin: 0 auto; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-lg); background: var(--surface);
}
.pc-digital-qr {
  background: #fff; padding: 1.4rem; display: grid; place-items: center;
}
.pc-digital-qr img { width: 100%; max-width: 15rem; height: auto; display: block; }

/* ───────────────────── 5. Scanner verdict screen (§22) ─────────────────── */
/* Read across a room, in a doorway, on a phone held at arm's length. Colour is
   never the only signal — each state has an icon and a word, because a
   colour-blind officer must not have to guess, and phone screens in sunlight
   wash colour out long before they wash out contrast. */

.pc-verdict {
  border-radius: var(--radius); overflow: hidden; color: #fff;
  box-shadow: var(--shadow-lg);
}
.pc-verdict-head {
  padding: 1.6rem 1.4rem; text-align: center; position: relative; overflow: hidden;
}
.pc-verdict-head::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--tapa); background-size: 96px 96px; opacity: .18;
}
.pc-verdict-head > * { position: relative; z-index: 1; }
.pc-verdict-icon { font-size: 3.2rem; line-height: 1; }
.pc-verdict-title {
  font-size: clamp(1.35rem, 4.2vw, 2rem); font-weight: 800;
  letter-spacing: .04em; margin: .5rem 0 0; color: #fff;
}
.pc-verdict-reason { font-size: .95rem; opacity: .92; margin-top: .35rem; }

.pc-verdict.granted .pc-verdict-head { background: linear-gradient(135deg, #047857, #10b981); }
.pc-verdict.denied  .pc-verdict-head { background: linear-gradient(135deg, #991b1b, #dc2626); }
.pc-verdict.review  .pc-verdict-head { background: linear-gradient(135deg, #b45309, #f59e0b); }

.pc-verdict-body { background: var(--surface); color: var(--ink); padding: 1.2rem 1.1rem; }
.pc-verdict-action {
  background: var(--surface-2); border-top: 1px solid var(--line);
  padding: .85rem 1.1rem; font-size: .88rem; color: var(--ink-2);
}

/* The person, big enough to check against the face in front of you. */
.pc-scan-person { display: flex; gap: 1rem; align-items: center; }
.pc-scan-photo {
  width: 5.2rem; height: 5.2rem; border-radius: 12px; object-fit: cover;
  flex: none; background: var(--surface-2); display: grid; place-items: center;
  font-size: 1.6rem; font-weight: 700; color: var(--muted);
  border: 2px solid var(--line);
}
.pc-scan-name { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.pc-scan-meta { font-size: .88rem; color: var(--muted); }

/* Scanner shell: minimal chrome, large targets, thumb-reachable actions. */
.pc-scanner-stage {
  background: #000; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 1 / 1; max-height: 26rem; position: relative;
}
.pc-scanner-stage video, .pc-scanner-stage canvas { width: 100% !important; height: 100% !important; object-fit: cover; }
.pc-scan-reticle {
  position: absolute; inset: 14%; border: 3px solid rgba(255,255,255,.85);
  border-radius: 18px; pointer-events: none;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.35);
}
.pc-scan-reticle::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px;
  background: var(--brand-2); box-shadow: 0 0 12px var(--brand-2);
  animation: pcScanLine 2.4s ease-in-out infinite;
}
@keyframes pcScanLine {
  0%, 100% { transform: translateY(-6.5rem); opacity: .3; }
  50%      { transform: translateY(6.5rem);  opacity: 1; }
}
.pc-op-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; min-height: 6.5rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-weight: 700; font-size: .92rem; text-align: center; padding: 1rem .6rem;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.pc-op-btn i { font-size: 1.7rem; color: var(--brand); }
.pc-op-btn:hover { border-color: var(--brand); box-shadow: var(--shadow); color: var(--ink); }
.pc-op-btn:active { transform: scale(.98); }

/* ────────────────────── 6. Participant 360 (§29, §30) ──────────────────── */

.pc-journey {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}
.pc-journey-step {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .7rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
}
.pc-journey-step.done {
  background: var(--brand-soft); color: var(--brand); border-color: transparent;
}
[data-theme="dark"] .pc-journey-step.done { color: var(--brand-2); }
.pc-journey-step.pending { opacity: .62; }
.pc-journey-sep { color: var(--line-2); font-size: .8rem; }

/* Timeline. The rail is a border on the list, so entries can be any height
   and the line still runs continuously behind them. */
.pc-tl { list-style: none; margin: 0; padding: 0 0 0 1.6rem; border-left: 2px solid var(--line); }
.pc-tl li { position: relative; padding: 0 0 1.15rem .3rem; }
.pc-tl li::before {
  content: ''; position: absolute; left: -2.05rem; top: .38rem;
  width: .72rem; height: .72rem; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--brand);
}
.pc-tl li.muted::before { border-color: var(--line-2); }
.pc-tl-time {
  font-size: .74rem; color: var(--muted); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pc-tl-label { font-weight: 600; font-size: .92rem; }
.pc-tl-detail { font-size: .82rem; color: var(--muted); }

/* Zone access grid — a yes/no board, not a table to read. */
.pc-access-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.pc-access-item {
  display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface-2); font-size: .86rem; font-weight: 600;
}
.pc-access-item i { font-size: 1.05rem; }
.pc-access-item.yes { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.pc-access-item.no  { color: var(--muted); }

/* ────────────────────── 7. Command Centre (§49, §78) ───────────────────── */
/* Operational, not decorative: dense numbers, a live pulse, and a feed that is
   plainly a log rather than an animation. */

.pc-cc {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  border-radius: var(--radius); color: #fff; padding: 1.3rem;
  position: relative; overflow: hidden;
}
.pc-cc::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--tapa); background-size: 118px 118px; opacity: .2;
}
.pc-cc > * { position: relative; z-index: 1; }
.pc-cc-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.pc-cc-stat {
  background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-sm); padding: .85rem .9rem;
}
.pc-cc-value {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.pc-cc-label {
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  opacity: .82; margin-top: .3rem; font-weight: 600;
}
.pc-cc-sub { font-size: .74rem; opacity: .7; margin-top: .15rem; }

.pc-feed { list-style: none; margin: 0; padding: 0; }
.pc-feed li {
  display: flex; gap: .7rem; padding: .55rem 0;
  border-bottom: 1px dashed var(--line); font-size: .86rem;
}
.pc-feed li:last-child { border-bottom: 0; }
.pc-feed-time {
  font-variant-numeric: tabular-nums; color: var(--muted);
  font-size: .78rem; font-weight: 600; flex: none; width: 4.2rem;
}
/* Rows the poller has just added, so a watcher can see what is new without
   the whole list moving. */
.pc-feed li.fresh { animation: pcFresh 2.4s ease-out; }
@keyframes pcFresh {
  from { background: color-mix(in srgb, var(--brand) 14%, transparent); }
  to   { background: transparent; }
}

/* ───────────────────────── 8. Programme cards ──────────────────────────── */

.pc-prog-day {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg); padding: .7rem 0 .5rem;
  border-bottom: 2px solid var(--brand);
  margin-bottom: .9rem;
}
.pc-prog-day h3 { margin: 0; font-size: 1.05rem; letter-spacing: -.02em; }

.pc-prog-item {
  display: grid; grid-template-columns: 6.2rem 1fr auto; gap: 1rem;
  padding: .95rem 1rem; border: 1px solid var(--line);
  border-left: 4px solid var(--evt, var(--brand));
  border-radius: var(--radius-sm); background: var(--surface);
  margin-bottom: .6rem; transition: box-shadow .15s ease, transform .15s ease;
}
.pc-prog-item:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.pc-prog-time {
  font-weight: 700; font-size: .88rem; font-variant-numeric: tabular-nums;
  color: var(--ink-2); line-height: 1.35;
}
.pc-prog-title { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.pc-prog-meta { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
@media (max-width: 640px) {
  .pc-prog-item { grid-template-columns: 1fr; gap: .35rem; }
  .pc-prog-item > :last-child { justify-self: start; }
}

/* Pillar and category chips take their colour from the row's own data, so a
   pillar renamed and recoloured in Administration needs no CSS change. */
.pc-chip {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .17rem .55rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  background: color-mix(in srgb, var(--chip, #64748b) 14%, transparent);
  color: var(--chip, #64748b);
  border: 1px solid color-mix(in srgb, var(--chip, #64748b) 28%, transparent);
}
[data-theme="dark"] .pc-chip {
  background: color-mix(in srgb, var(--chip, #64748b) 24%, transparent);
  color: color-mix(in srgb, var(--chip, #64748b) 70%, white);
}

/* ─────────────────────── 9. Announcement severities ────────────────────── */

.pc-notice {
  border-radius: var(--radius-sm); padding: .85rem 1rem;
  border-left: 4px solid var(--nc, var(--info)); background: var(--surface-2);
  display: flex; gap: .7rem; align-items: flex-start;
}
.pc-notice i { color: var(--nc, var(--info)); font-size: 1.1rem; margin-top: .1rem; }
.pc-notice-title { font-weight: 700; }
.pc-notice.info      { --nc: #0284c7; }
.pc-notice.notice    { --nc: #0059b3; }
.pc-notice.important { --nc: #d97706; }
.pc-notice.urgent    { --nc: #dc2626; background: color-mix(in srgb, #dc2626 8%, var(--surface)); }
.pc-notice.urgent .pc-notice-title { color: #dc2626; }

/* ──────────────────────────── 10. Venue map ────────────────────────────── */

.pc-map {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(160deg, #e8f1f9, #f3f6fa);
  border: 1px solid var(--line); aspect-ratio: 16 / 10;
}
[data-theme="dark"] .pc-map { background: linear-gradient(160deg, #0c1f33, #060f1a); }
.pc-map-marker {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  cursor: pointer;
}
.pc-map-pin {
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: .85rem;
  background: var(--brand); box-shadow: 0 2px 8px rgba(0,0,0,.28);
  border: 2px solid #fff;
}
.pc-map-marker.desk   .pc-map-pin { background: #0284c7; }
.pc-map-marker.media  .pc-map-pin { background: #dc2626; }
.pc-map-marker.medical .pc-map-pin { background: #16a34a; }
.pc-map-marker.transport .pc-map-pin { background: #b45309; }
.pc-map-label {
  font-size: .66rem; font-weight: 700; background: var(--surface);
  padding: .1rem .4rem; border-radius: 4px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--ink);
}
.pc-map-marker.active .pc-map-pin { outline: 3px solid var(--brand-2); }

/* ─────────────────────────── 11. Certificate ───────────────────────────── */

.pc-cert {
  background: #fff; color: #0f172a; padding: 3rem;
  border: 10px solid var(--brand); border-radius: 4px;
  text-align: center; position: relative; max-width: 60rem; margin: 0 auto;
}
.pc-cert::before {
  content: ''; position: absolute; inset: .55rem;
  border: 1.5px solid color-mix(in srgb, var(--brand) 40%, transparent);
  pointer-events: none;
}
.pc-cert-eyebrow {
  letter-spacing: .3em; text-transform: uppercase; font-size: .78rem;
  color: var(--brand); font-weight: 700;
}
.pc-cert-name {
  font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.02em;
  margin: 1.2rem 0 .3rem; border-bottom: 2px solid var(--line); display: inline-block;
  padding: 0 2rem .5rem;
}
.pc-cert-event { font-size: 1.25rem; font-weight: 700; margin-top: 1rem; }

/* ──────────────────────────── 12. Print rules ──────────────────────────── */

@media print {
  /* Everything that is navigation, action or chrome disappears. What remains
     is the artefact: a badge sheet, an attendance list, a certificate. */
  .pc-topbar, .pc-sidebar, .pc-page-head, .pc-backdrop, .no-print,
  .btn, .alert, nav, footer, .pc-masi { display: none !important; }
  .pc-main   { margin: 0 !important; padding: 0 !important; }
  .pc-shell  { display: block !important; }
  body       { background: #fff !important; }
  .pc-card   { border: none !important; box-shadow: none !important; }

  .pc-badge {
    box-shadow: none; border: 1px solid #cbd5e1;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .pc-badge-sheet {
    display: grid !important; grid-template-columns: repeat(2, 86mm);
    gap: 6mm; justify-content: center;
  }
  .pc-cert { border-width: 10px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* A table split across pages is unreadable without its header repeated, and
     an attendance register is exactly the document that runs to twelve pages. */
  thead { display: table-header-group; }
  tr, .pc-prog-item { page-break-inside: avoid; }
  a[href]::after { content: ''; }   /* no printed URLs cluttering a register */
}

/* Badge sheet on screen: same grid, so what you see is what prints. */
.pc-badge-sheet {
  display: grid; grid-template-columns: repeat(auto-fill, 86mm);
  gap: 6mm; justify-content: center;
}

/* ───────────────────────────── 13. Utilities ───────────────────────────── */

.pc-num { font-variant-numeric: tabular-nums; }
.pc-truncate-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-dot-live {
  display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--success); animation: pcPulse 2s ease-in-out infinite;
}
@keyframes pcPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); }
  50%      { opacity: .75; box-shadow: 0 0 0 .38rem transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-dot-live, .pc-scan-reticle::after, .pc-feed li.fresh { animation: none !important; }
}

/* ─────────────────────── 14. Official marks in the shell ───────────────────
   The event mark replaces the typographic crest wherever it has been uploaded.
   It sits on a white plate rather than the brand gradient: the logo carries its
   own colour, and a coloured tile behind it muddies both. */

/* The event mark is a horizontal lockup — PACIFIC / PRECOP31 / FIJI-TUVALU
   stacked across roughly 2.6 : 1 — so it must not be forced into the square
   tile the typographic crest uses. Height is fixed and width follows the
   artwork; squeezing it into a square shrinks the wordmark to the point where
   the words stop being words. */
.pc-crest-mark-img {
  width: auto !important; height: 2.1rem; aspect-ratio: auto;
  background: #fff !important;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: .16rem .36rem;
  display: block;
}
.pc-crest-mark-img img { height: 100%; width: auto; object-fit: contain; display: block; }

[data-theme="dark"] .pc-crest-mark-img { background: #fff !important; border-color: transparent; }

/* The public shell puts the mark on the brand bar, so it needs the same plate. */
.lp-navbar .pc-crest-mark-img { border-color: rgba(255,255,255,.35); }

/* Paired marks — arms on the left, event mark on the right — as used on the
   public hero and the sign-in panel. The arms are line art that reads on any
   ground; the event mark is blue-on-transparent and needs its white plate. */
.pc-marks { display: flex; align-items: center; gap: 1.15rem; }
.pc-marks img { display: block; }
.pc-marks .arms { height: 3.6rem; width: auto; }
.pc-marks .event {
  height: 3rem; width: auto;
  background: #fff; border-radius: 8px; padding: .42rem .62rem;
  box-shadow: 0 6px 18px -8px rgba(5,25,47,.7);
}

/* ──────────────────── 15. Sign-in — the two-column panel ─────────────────
   The inherited .pc-auth-split is only a max-width; the markup it wraps is a
   pitch panel and a form, which want to sit side by side on a wide display and
   stack on a phone. That layout is written here rather than in the base file
   because it is this platform's screen, not AttendFlow's.

   .pc-auth is a flex *column* (the navbar and masi trim sit at their natural
   height at the top), so the split needs margin:auto to centre in what's left
   rather than align-items on the parent, which would lay the trim out beside
   the form. */

.pc-auth-split {
  width: 100%; max-width: 68rem; margin: auto;
  padding: 34px 18px; position: relative; z-index: 1;
  display: grid; gap: clamp(1.5rem, 4vw, 3.25rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62em) {
  .pc-auth-split { grid-template-columns: 1.05fr .95fr; }
}

/* Inside the split the pitch panel is a left column, not the small centred
   header the base file styles it as. */
.pc-auth-split .pc-auth-brand {
  text-align: left; margin-bottom: 0;
  border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.2rem);
  background: linear-gradient(150deg,
              rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(255,255,255,.14);
}
/* .pc-band lays its tapa in a ::before at inset 0 and lifts `> .container`
   above it. The panel's child is a plain div, so it needs lifting here or the
   cloth prints over the words. */
.pc-auth-split .pc-auth-brand > * { position: relative; z-index: 1; }

/* On a phone the pitch is below the form: somebody signing in on the concourse
   wants the fields first, and the panel is context, not an obstacle. */
@media (max-width: 61.99em) {
  .pc-auth-split { display: flex; flex-direction: column-reverse; }
  .pc-auth-split .pc-auth-brand { width: 100%; }
}

/* The form column inside the split is a column of the grid, so the base file's
   auto margins would strand it against the pitch panel. */
.pc-auth-split .pc-auth-wrap {
  max-width: 30rem; margin: 0; padding: 0; width: 100%;
}
@media (max-width: 61.99em) {
  .pc-auth-split .pc-auth-wrap { margin: 0 auto; }
}

/* The tapa runner behind the whole screen is masked to the left third, which
   is where the pitch panel now sits. Thin it so the panel reads. */
.pc-auth::before { opacity: .3; }

/* Bootstrap ships `code` in pink (#d63384). Every reference the platform shows
   a person — PC31-000002, BDG-TY85ZYW, a credential token — is marked up as
   code, so that default puts a colour on screen that is in no part of the
   Pre-COP31 identity. References are identifiers, not warnings: ink weight
   carries them, and the brand carries the ones that are links. */
:root, [data-theme="light"] { --bs-code-color: #003090; }
[data-theme="dark"]         { --bs-code-color: #79c4f7; }
code { color: var(--bs-code-color); }
a > code, code a { color: inherit; }

/* ══════════════ 16. Public chrome — nav, reveals, footer, controls ═══════
   Shared by every public page so the homepage's visual language does not stop
   at the homepage. The homepage's own composition lives in home.css. */

/* ── Skip link ── */
.pc-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 2000;
  background: var(--brand); color: #fff; font-weight: 700;
  padding: .6rem 1rem; border-radius: 0 0 10px 10px; text-decoration: none;
  transition: top .18s ease;
}
.pc-skip:focus { top: 0; color: #fff; outline: 3px solid #fff; outline-offset: 2px; }

/* ── Navigation ─────────────────────────────────────────────────────────
   Over a hero the bar is glass: the panel behind it is a designed image and a
   solid strip across the top of it wastes the best part of the page. Past the
   hero it takes its own ground, because text needs a background it can be read
   against, not a tint of whatever happens to scroll underneath. */
.pc-nav {
  transition: background .35s ease, backdrop-filter .35s ease,
              box-shadow .35s ease, padding .28s ease;
}
.pc-nav-over {
  background: transparent !important;
  box-shadow: none !important;
  padding: .85rem 0;
}
.pc-nav-over::after { opacity: 0 !important; }     /* no masi over the hero */
.pc-nav-over.is-solid {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--brand-deep) 92%, transparent) 0%,
              color-mix(in srgb, var(--brand)      92%, transparent) 100%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 30px -14px rgba(3, 20, 44, .75) !important;
  padding: .42rem 0;
}
.pc-nav-over.is-solid::after { opacity: .3 !important; }

/* Underline that grows from the centre — an active state that animates in
   rather than appearing fully formed. */
.pc-nav-link { position: relative; }
.pc-nav-link::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: -.32rem; height: 2px;
  background: #fff; border-radius: 2px; opacity: .9;
  transition: left .26s cubic-bezier(.22,1,.36,1), right .26s cubic-bezier(.22,1,.36,1);
}
.pc-nav-link:hover::after, .pc-nav-link:focus-visible::after { left: 0; right: 0; }
.pc-nav-link.is-active { font-weight: 700; }
.pc-nav-link.is-active::after { left: 0; right: 0; }

/* ── Mobile menu ── */
.pc-nav-burger {
  width: 2.4rem; height: 2.4rem; flex: none; border: 0; padding: 0;
  background: rgba(255,255,255,.14); border-radius: 10px;
  display: grid; place-content: center; gap: 4px; cursor: pointer;
}
.pc-nav-burger span {
  display: block; width: 1.05rem; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .18s ease;
}
.pc-nav-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pc-nav-burger.is-open span:nth-child(2) { opacity: 0; }
.pc-nav-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.pc-nav-panel {
  overflow: hidden; max-height: 0; opacity: 0;
  background: var(--brand-deep);
  transition: max-height .34s cubic-bezier(.22,1,.36,1), opacity .22s ease;
}
.pc-nav-panel.is-open { max-height: 22rem; opacity: 1; }
.pc-nav-panel a {
  display: block; padding: .8rem 1.1rem; color: rgba(255,255,255,.88);
  text-decoration: none; font-weight: 600; border-top: 1px solid rgba(255,255,255,.1);
}
.pc-nav-panel a:hover, .pc-nav-panel a:focus-visible { background: rgba(255,255,255,.1); color: #fff; }
.pc-nav-panel a.is-active { color: #fff; box-shadow: inset 3px 0 0 var(--reef-2); }

/* ── Scroll reveal ──────────────────────────────────────────────────────
   Gated on .pc-js, which only exists when scripting is running. Without it
   nothing here applies and the page is simply visible — a reveal system that
   can leave content hidden is a bug wearing a design's clothes. */
.pc-js [data-reveal] {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.pc-js [data-reveal="up"]    { transform: translate3d(0, 34px, 0); }
.pc-js [data-reveal="left"]  { transform: translate3d(-38px, 0, 0); }
.pc-js [data-reveal="right"] { transform: translate3d(38px, 0, 0); }
.pc-js [data-reveal="scale"] { transform: scale(.94); }
.pc-js [data-reveal="fade"]  { transform: none; }
.pc-js [data-reveal].is-in   { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pc-js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Footer ─────────────────────────────────────────────────────────────
   Deep ocean rather than the usual flat charcoal, closed with the same wave
   the homepage opens with, so the page ends in the language it began in. */
:root, [data-theme="light"] {
  --pc-footer-wave-1: #0a3f86;
  --pc-footer-wave-2: #062a5c;
}
[data-theme="dark"] {
  --pc-footer-wave-1: #0a2444;
  --pc-footer-wave-2: #05192f;
}

.pc-footer { position: relative; margin-top: auto; }
.pc-footer-wave {
  display: block; width: 100%; height: clamp(56px, 7vw, 108px);
  margin-bottom: -1px;                    /* no hairline between wave and body */
  background: transparent;
}
.pc-footer-body {
  background:
    radial-gradient(140% 90% at 12% 0%, rgba(0,160,80,.16), transparent 58%),
    linear-gradient(168deg, #062a5c 0%, #04203f 55%, #03182f 100%);
  color: rgba(255,255,255,.8);
  padding: clamp(2.2rem, 5vw, 3.6rem) 0 0;
  position: relative; overflow: hidden;
}
.pc-footer-body::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--tapa); background-size: 150px 150px; opacity: .16;
}
.pc-footer-body > .container { position: relative; z-index: 1; }

.pc-footer-marks .arms  { height: 3.1rem; }
.pc-footer-marks .event { height: 2.5rem; }
.pc-footer-lede { color: rgba(255,255,255,.9); font-size: 1.02rem; max-width: 28rem; }

.pc-footer-h {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--reef-2); margin-bottom: .8rem;
}
.pc-footer a { color: rgba(255,255,255,.76); text-decoration: none; }
.pc-footer a:hover, .pc-footer a:focus-visible { color: #fff; text-decoration: underline; }
.pc-footer li { margin-bottom: .42rem; }

.pc-footer-base {
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 1.1rem 0 1.4rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  color: rgba(255,255,255,.62);
}
.pc-footer-host { color: rgba(255,255,255,.5); }

/* ── Back to top ────────────────────────────────────────────────────────
   Built out of the identity rather than dropped on top of it: the ocean
   gradient, the reef green as the glow, and an arrow that draws itself. */
.pc-totop {
  position: fixed; right: clamp(.9rem, 2.5vw, 1.75rem); bottom: clamp(.9rem, 2.5vw, 1.75rem);
  width: 3.1rem; height: 3.1rem; padding: 0; border: 0; border-radius: 50%;
  z-index: 1040; cursor: pointer;
  background: linear-gradient(140deg, var(--brand-2) 0%, var(--brand) 55%, var(--brand-deep) 100%);
  box-shadow: 0 10px 26px -8px rgba(0,48,144,.62), 0 0 0 0 rgba(0,160,80,.5);
  opacity: 0; transform: translateY(14px) scale(.86);
  transition: opacity .34s cubic-bezier(.22,1,.36,1), transform .34s cubic-bezier(.22,1,.36,1),
              box-shadow .3s ease;
}
.pc-totop.is-in { opacity: 1; transform: none; }
.pc-totop:hover, .pc-totop:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -10px rgba(0,48,144,.7), 0 0 0 6px rgba(0,160,80,.22);
}
.pc-totop:focus-visible { outline: 3px solid var(--reef-2); outline-offset: 3px; }
.pc-totop svg { width: 100%; height: 100%; display: block; }
.pc-totop-ring {
  fill: none; stroke: rgba(255,255,255,.34); stroke-width: 1.5;
  stroke-dasharray: 126; stroke-dashoffset: 126;
  transition: stroke-dashoffset .7s cubic-bezier(.22,1,.36,1);
}
.pc-totop.is-in .pc-totop-ring { stroke-dashoffset: 0; }
.pc-totop-arrow {
  fill: none; stroke: #fff; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.pc-totop:hover .pc-totop-arrow { animation: pcArrowNudge .9s ease-in-out infinite; }

@keyframes pcArrowNudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}

@media (prefers-reduced-motion: reduce) {
  .pc-totop { transition: opacity .2s linear; transform: none !important; }
  .pc-totop-ring { transition: none; stroke-dashoffset: 0; }
  .pc-totop:hover .pc-totop-arrow { animation: none; }
}

/* A nav asked to float over a hero must not also occupy a strip of the page
   above it — sticky positioning still takes its space in flow, which is what
   pushes the hero down and leaves white ground behind transparent links. Over
   a hero it is taken out of flow entirely; the hero's own top padding is what
   keeps the copy clear of it. */
.pc-has-overlay-nav .pc-nav-over {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
}

/* ── Footer, corrected ───────────────────────────────────────────────────
   Two faults, both visible the moment anyone looked at it. The masi tile was
   scaled to 150px over a dark ground, at which size its corner triangles line
   up across the band and read as a row of chevrons rather than as cloth. And
   the green light was washing the whole panel to teal — the same mistake as
   the ocean band above it, and the same fix: a highlight in one corner, not a
   tint over everything. */
.pc-footer-body {
  background:
    radial-gradient(30rem 20rem at 8% 6%, rgba(0,160,80,.12), transparent 62%),
    linear-gradient(168deg, #062a5c 0%, #04203f 55%, #03182f 100%);
}
.pc-footer-body::before {
  background-size: 96px 96px;
  opacity: .07;
}
/* The wave has to arrive at the colour the panel actually starts with, or
   there is a visible step across the full width of the page. */
:root, [data-theme="light"] {
  --pc-footer-wave-1: #0a3f86;
  --pc-footer-wave-2: #062a5c;
}

/* ── Footer trim ─────────────────────────────────────────────────────────
   A flat woven masi band, replacing the wave that used to close the page.

   Two reasons it changed. The hero already carries three waves within a screen
   of it, and a second, unrelated wave motif a few sections later reads as a
   template reaching for the same trick twice. And the band is a chance to put
   the cultural motif at full strength rather than as a texture at seven per
   cent — the same weave as the badge, the letterhead and the section trims,
   in the footer's own navy so it sits IN the panel rather than as a pale strip
   above it. */
.pc-footer-trim {
  height: 18px; width: 100%;
  background-color: #03182f;
  background-image: url("data:image/svg+xml,%3Csvg width='76' height='26' viewBox='0 0 76 26' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='76' height='26' fill='%2303182f'/%3E%3Cpath d='M0 26 L19 5 L38 26 Z' fill='%23062a5c'/%3E%3Cpath d='M38 0 L57 21 L76 0 Z' fill='%230a3f86'/%3E%3Cpolygon points='19,12 22.5,15.5 19,19 15.5,15.5' fill='%230070d0'/%3E%3Cpolygon points='57,7 60.5,10.5 57,14 53.5,10.5' fill='%2300a050'/%3E%3C/svg%3E");
  background-size: 52px 18px; background-repeat: repeat-x;
  border-top: 1.5px solid rgba(255,255,255,.1);
}


/* ── The arms in the header ──────────────────────────────────────────────
   Line art on a dark bar, so no white plate: the Coat of Arms is drawn to sit
   on its own and a tile behind it only makes a sticker of it. Slightly taller
   than the old square mark because it is a detailed device — below about
   2.2rem the supporters and the canoe turn to mud. */
.pc-navarms {
  display: block; flex: none;
  height: 2.35rem; width: auto;
  line-height: 0;
}
.pc-navarms img { height: 100%; width: auto; display: block; }
@media (max-width: 35.99em) { .pc-navarms { height: 2rem; } }

/* Register sits in the bar as a solid button — the primary action on the site,
   and previously only reachable from a footer link. */
.pc-nav-register { white-space: nowrap; }
@media (max-width: 40.99em) { .pc-nav-register .bi { margin-right: 0 !important; } }

/* On a phone the bar was carrying brand + theme toggle + Register + Sign in +
   burger, which came to fifteen pixels more than the screen and pushed the
   whole page sideways. Sign in is the one that goes: it is already the first
   item in the burger panel, and the visitor who has not registered outnumbers
   the one coming back to sign in by a very long way. */
@media (max-width: 34.99em) {
  .pc-nav .lp-btn-ghost { display: none; }
}

/* ── Work waiting, in the sidebar ────────────────────────────────────────
   A count on the menu item that has something in it, and a slow pulse while
   it is not zero. This is the difference between a list of twenty places and
   a list of the two that need a decision today.

   The pulse is deliberately slow and small — it is a signal at the edge of
   attention, not something blinking at an officer for eight hours. It stops
   entirely once the queue is empty, and under reduced-motion it never runs;
   the number is the information, the movement only draws the eye to it. */
.pc-nav a { position: relative; }

.pc-nav-count {
  margin-left: auto;
  min-width: 1.45rem; height: 1.45rem; padding: 0 .4rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--coral); color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 0 rgba(224, 0, 16, .55);
  animation: pcWaiting 2.6s ease-out infinite;
}
@keyframes pcWaiting {
  0%   { box-shadow: 0 0 0 0    rgba(224, 0, 16, .5); }
  70%  { box-shadow: 0 0 0 .5rem rgba(224, 0, 16, 0); }
  100% { box-shadow: 0 0 0 0    rgba(224, 0, 16, 0); }
}

/* The item itself leans very slightly toward the reader while it holds work. */
.pc-nav a.has-work span:first-of-type { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .pc-nav-count { animation: none; }
}

/* ── "Start here" ────────────────────────────────────────────────────────
   The four steps of running the conference, in order, on the dashboard. Any
   step with work waiting is pulled forward by colour and a count; the rest
   stay quiet. Dismissed once and it never returns. */
.pc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }

.pc-step {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: .9rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  transition: border-color .2s ease, background .2s ease;
}
.pc-step.has-work {
  border-color: color-mix(in srgb, var(--coral) 45%, transparent);
  background: color-mix(in srgb, var(--coral) 5%, var(--surface));
}
.pc-step.is-done { opacity: .72; }

.pc-step-n {
  width: 1.9rem; height: 1.9rem; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  font-weight: 800; font-size: .8rem;
}
.pc-step.has-work .pc-step-n { background: var(--coral); }
.pc-step.is-done  .pc-step-n { background: var(--reef); }

.pc-step-body  { min-width: 0; }
.pc-step-title { font-weight: 700; color: var(--ink); }
.pc-step-text  { font-size: .9rem; color: var(--muted); line-height: 1.55; margin-top: .1rem; }

.pc-step-badge {
  display: inline-block; margin-left: .45rem;
  padding: .12rem .5rem; border-radius: 999px;
  background: var(--coral); color: #fff;
  font-size: .66rem; font-weight: 800; letter-spacing: .02em;
  vertical-align: .1em;
}

/* The scanner is a two-step screen and now says so: choose the context, then
   scan. Somebody handed a scanner at a door has seconds to work it out. */
.pc-scan-step {
  display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: .78rem; font-weight: 800;
  vertical-align: .06em; margin-right: .3rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   DataTables inside a card
   ══════════════════════════════════════════════════════════════════════════
   The Bootstrap 5 renderer emits a .dt-container holding three Bootstrap
   `.row`s: controls, then the table, then info and paging. Left alone the
   control rows sit flush against the card edge with no gutter of their own,
   so the panel reads as three stacked fragments. These rules give the two
   control rows the card's own padding and rule them off from the table.

   Selectors target `> .row` rather than DataTables' own .dt-layout-* classes:
   the Bootstrap integration replaces those with plain grid rows, so styling
   the documented class names silently matches nothing. */
.pc-dt > .row {
  margin: 0; --bs-gutter-x: 0; align-items: center; gap: .75rem;
}
.pc-dt > .row:first-child,
.pc-dt > .row:last-child { padding: .75rem 1.05rem; }
.pc-dt > .row:first-child { border-bottom: 1px solid var(--line); }
.pc-dt > .row:last-child  { border-top: 1px solid var(--line); }
.pc-dt > .row > [class^="col"] { padding: 0; }
.pc-dt > .row:nth-child(2) { margin: 0; gap: 0; }

/* "25" and "per page" are a select and a label side by side in one div. The
   select is a .form-select, which Bootstrap makes display:block/width:100% —
   so without this the label drops onto a second line under the box. */
.pc-dt .dt-length { display: flex; align-items: center; gap: .5rem; }
.pc-dt .dt-length select { width: auto; display: inline-block; flex: 0 0 auto; }
.pc-dt .dt-length label { margin: 0; white-space: nowrap; font-size: .8125rem; color: var(--muted); }

.pc-dt .dt-search { display: flex; justify-content: flex-end; }
.pc-dt .dt-search input { min-width: 16rem; max-width: 100%; }
.pc-dt .dt-info { font-size: .8125rem; color: var(--muted); padding: 0; }

/* The pager. Without the Bootstrap 5 renderer these were bare grey blocks. */
.pc-dt .pagination { margin: 0; }
.pc-dt .page-link {
  border-radius: var(--radius-sm); margin-left: .25rem;
  border-color: var(--line-2); color: var(--ink-2);
  background: var(--surface); font-size: .8125rem; padding: .35rem .7rem;
}
.pc-dt .page-item.active .page-link {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.pc-dt .page-item.disabled .page-link { color: var(--muted); opacity: .5; }
.pc-dt .page-link:hover { background: var(--surface-2); border-color: var(--brand); }

/* Sorting affordance: a column you can sort should look like one. */
.pc-dt table.dataTable thead th.dt-orderable-asc,
.pc-dt table.dataTable thead th.dt-orderable-desc { cursor: pointer; }

/* On a phone the two control rows stack rather than squeeze. */
@media (max-width: 575.98px) {
  .pc-dt > .row:first-child,
  .pc-dt > .row:last-child { padding: .7rem .85rem; }
  .pc-dt .dt-search input { min-width: 0; width: 100%; }
  .pc-dt > .row > [class^="col"] { width: 100%; text-align: left !important; }
  .pc-dt .dt-search { justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Sidebar rail (collapsed navigation)
   ══════════════════════════════════════════════════════════════════════════
   Collapsing narrows the sidebar to its icons rather than hiding it, so the
   navigation never disappears from under someone mid-task — and the pending-
   work counts stay visible, which is the whole reason they exist. */
/* The class goes on <html>, not <body>, so an inline head script can restore
   the collapsed state before first paint — <body> does not exist yet at that
   point, and applying it afterwards makes the whole page jump sideways on
   every single load. */
.pc-rail { --sidebar-w: 76px; }

.pc-sidebar { transition: width .2s ease, flex-basis .2s ease; }

.pc-rail .pc-nav { padding: 0 12px; }
.pc-rail .pc-nav a { justify-content: center; padding: 11px 0; position: relative; }
.pc-rail .pc-nav a > span:not(.pc-nav-count) { display: none; }
.pc-rail .pc-nav a i { width: auto; font-size: 1.15rem; }
.pc-rail .pc-sidebar-foot { display: none; }

/* A group heading with no room for words becomes a rule, so the grouping is
   still legible as grouping. */
.pc-rail .pc-nav-label {
  font-size: 0; padding: 10px 18px 4px; height: 1px; overflow: hidden;
}
.pc-rail .pc-nav-label::after {
  content: ''; display: block; height: 1px; background: var(--line);
}

/* In the rail the count has no row to sit at the end of, so it pins to the
   icon's corner the way a notification badge does. */
.pc-rail .pc-nav-count {
  position: absolute; top: 3px; right: 8px; margin: 0;
  min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; font-size: .6rem;
}

/* The desktop collapse control has no purpose below 992px, where the sidebar
   is already a drawer with its own toggle. */
@media (max-width: 991.98px) {
  #pcSidebarCollapse { display: none !important; }
  .pc-rail { --sidebar-w: 252px; }
}

/* ── Activation outcome pages ─────────────────────────────────────────────
   One large mark carries the whole message before any text is read: this
   worked, or it did not and here is what to do. */
.pc-activate-mark {
  width: 4.5rem; height: 4.5rem; margin: 0 auto;
  border-radius: 50%; display: grid; place-content: center;
  font-size: 2rem; line-height: 1;
}
.pc-activate-mark.success { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.pc-activate-mark.info    { background: color-mix(in srgb, var(--info) 16%, transparent);    color: var(--info); }
.pc-activate-mark.warning { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.pc-activate-mark.danger  { background: color-mix(in srgb, var(--danger) 14%, transparent);  color: var(--danger); }

.pc-ref {
  background: var(--surface-2); border: 1px solid var(--line);
  padding: .25rem .6rem; border-radius: var(--radius-sm);
  font-size: .95rem; letter-spacing: .04em;
}

/* ── Notification inbox ───────────────────────────────────────────────────
   Unread rows carry weight and a tinted ground; read ones recede but stay,
   so this morning's dismissed item can still be found this afternoon. */
.pc-notif-list { list-style: none; margin: 0; padding: 0; }

.pc-notif {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.pc-notif:last-child { border-bottom: 0; }
.pc-notif.is-unread { background: color-mix(in srgb, var(--brand) 5%, transparent); }

.pc-notif-dot {
  width: .6rem; height: .6rem; border-radius: 50%; margin-top: .45rem;
  flex: none; background: var(--muted);
}
.pc-notif-dot.important { background: var(--coral); }
.pc-notif-dot.warning   { background: var(--warning); }
.pc-notif-dot.info      { background: var(--brand); }

.pc-notif-subject { font-weight: 600; font-size: .9rem; color: var(--ink); }
.pc-notif.is-unread .pc-notif-subject { font-weight: 700; }
.pc-notif-body { font-size: .85rem; color: var(--ink-2); margin-top: .15rem; }
.pc-notif-time { font-size: .75rem; color: var(--muted); margin-top: .3rem; }

/* The topbar bell. The count is the whole point of it, so it is legible at a
   glance and only present when it is not zero. */
.pc-bell { position: relative; }
.pc-bell-count {
  position: absolute; top: 1px; right: 0;
  min-width: 1.05rem; height: 1.05rem; padding: 0 .22rem;
  border-radius: 999px; background: var(--coral); color: #fff;
  font-size: .62rem; font-weight: 800; line-height: 1.05rem;
  text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--surface);
}

/* ══════════════════════════════════════════════════════════════════════════
   Programme: view switcher and calendar
   ══════════════════════════════════════════════════════════════════════════
   Laid out entirely on the server; this is grid and colour only. On a phone
   the seven columns become one, because seven columns on a 390px screen is
   seven columns nobody can read. */

.pc-viewswitch {
  display: inline-flex; margin-bottom: 1.1rem;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface);
}
.pc-viewswitch a {
  padding: .45rem 1rem; font-size: .85rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
  border-right: 1px solid var(--line-2);
}
.pc-viewswitch a:last-child { border-right: 0; }
.pc-viewswitch a:hover { background: var(--surface-2); }
.pc-viewswitch a.is-active { background: var(--brand); color: #fff; }

.pc-cal {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.pc-cal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--line);
}
.pc-cal-title { margin: 0; font-size: 1.05rem; font-weight: 700; }

.pc-cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.pc-cal-weekdays span {
  padding: .5rem; text-align: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

.pc-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.pc-cal-week.is-single { grid-template-columns: 1fr; }

.pc-cal-day {
  min-height: 7.5rem; padding: .5rem;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .3rem;
}
.pc-cal-day:nth-child(7n) { border-right: 0; }
.pc-cal-week.is-single .pc-cal-day { border-right: 0; min-height: 12rem; }
.pc-cal-day.is-muted { background: var(--surface-2); opacity: .6; }
.pc-cal-day.is-today { background: color-mix(in srgb, var(--brand) 7%, transparent); }

.pc-cal-daynum { display: flex; align-items: baseline; gap: .4rem; }
.pc-cal-daynum a {
  font-weight: 700; font-size: .9rem; color: var(--ink); text-decoration: none;
}
.pc-cal-day.is-today .pc-cal-daynum a {
  background: var(--brand); color: #fff;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: inline-grid; place-content: center; font-size: .8rem;
}
/* The weekday name only earns its place in the stacked phone layout, where
   the column headings are gone. */
.pc-cal-dow { display: none; font-size: .7rem; font-weight: 700;
              text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.pc-cal-event {
  display: block; text-decoration: none;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-left: 3px solid var(--brand);
  border-radius: 5px; padding: .3rem .45rem;
  font-size: .76rem; line-height: 1.3; color: var(--ink);
}
.pc-cal-event:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.pc-cal-time { font-weight: 700; color: var(--brand); margin-right: .3rem; }
.pc-cal-name { display: inline; }
.pc-cal-meta {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-top: .25rem; font-size: .72rem; color: var(--muted);
}
.pc-cal-state {
  padding: .05rem .4rem; border-radius: 999px; font-weight: 700; font-size: .68rem;
  background: var(--surface-2); color: var(--muted);
}
.pc-cal-state-register { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.pc-cal-state-waitlist { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.pc-cal-state-full,
.pc-cal-state-closed,
.pc-cal-state-past    { background: var(--surface-2); color: var(--muted); }

.pc-cal-none { color: var(--muted); font-size: .85rem; margin: .5rem 0 0; }

/* Below 768px the grid stops being a grid. Seven columns on a phone is seven
   columns nobody can read, and empty days are noise — so the stacked view
   drops them and names the days it keeps. */
@media (max-width: 767.98px) {
  .pc-cal-weekdays { display: none; }
  .pc-cal-week, .pc-cal-week.is-single { grid-template-columns: 1fr; }
  .pc-cal-day { min-height: 0; border-right: 0; }
  .pc-cal-day:not(.has-events) { display: none; }
  .pc-cal-dow { display: inline; }
  .pc-cal-event { font-size: .82rem; padding: .45rem .6rem; }
}

/* ── "Where I stand" strip ────────────────────────────────────────────────
   Four numbers, each answering a question a delegate actually asks and each
   a link to the thing it counts. A number that cannot be clicked is trivia. */
.pc-glance {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.pc-glance-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem .9rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none;
  transition: border-color .15s, transform .15s;
}
a.pc-glance-item:hover { border-color: var(--brand); transform: translateY(-1px); }
.pc-glance-item > .bi { font-size: 1.35rem; color: var(--muted); flex: none; }

.pc-glance-item.ok    > .bi { color: var(--success); }
.pc-glance-item.warn  > .bi { color: var(--warning); }
.pc-glance-item.alert > .bi { color: var(--coral); }
.pc-glance-item.warn  { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); }
.pc-glance-item.alert { border-color: color-mix(in srgb, var(--coral) 45%, var(--line)); }

.pc-glance-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.pc-glance-value { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }