/* ============================================================
   vth-data-privacy.css — layout for the Data & Privacy section

   Source of truth: Claude Design project
   "VTH: Mark's ReSkin — Data & Privacy" (cd0178cc-383a-4bee-a9dc-70f14288a731),
   file `Data & Privacy v2 - Overlays.dc.html`.

   SCOPE OF THIS FILE: page layout only. Every primitive — buttons, badges,
   cards, inputs, tables, modals, alerts, chips, the dropdown, the pager — comes
   from vth-reskin.css + vth-components.css and is NOT redefined here. If you
   find yourself writing a rule for a control rather than for where things sit on
   the page, it belongs in the shared layer instead.

   Load order: vth-tokens -> vth-reset -> vth-reskin -> vth-components -> THIS.

   Two traps this file has to keep clearing, both measured rather than guessed:

   1) `vth-reset.css` declares `.vth h1..h6` and `.vth p` at (0,1,1). A component
      class is only (0,1,0) and LOSES regardless of load order, so every rule
      below that sets margin/colour/line-height on a real <p> or heading is
      prefixed with `.vth-dp ` to reach (0,2,0). Skip that and the symptom is not
      subtle: the hero title rendered #131313 on the dark blue gradient.
   2) `.vth{line-height:1.5}` inflates anything small and pill-shaped that does
      not set its own line-height. Small labels here set one explicitly.

   Breakpoints use the design's own scale: 1240 / 1080 / 1040 / 980 / 760 / 560.
   Every fractional grid track is `minmax(0,1fr)`, never `1fr` — `1fr` is
   `minmax(auto,1fr)` and that `auto` is a min-content floor, so one long
   unbreakable string pushes the page sideways instead of reflowing.
   ============================================================ */

/* ---- Page ------------------------------------------------------------- */

.vth-dp{display:flex;flex-direction:column;gap:var(--space-5);width:100%;min-width:0;}

/* vth-reskin.css dropped the card shadow; the design carries one on the panels
   here. Set locally rather than diverging on the shared file. */
.vth-dp .vth-card{box-shadow:var(--shadow-xs);}

/* ---- Hero -------------------------------------------------------------
   Base is the shared `.vth-hero`; only the stat tiles are page-specific. --- */

.vth-dp-hero__copy{min-width:0;}
.vth-dp-hero__stats{margin-left:auto;display:flex;gap:10px;flex:none;}
.vth-dp-stat{background:rgba(255,255,255,.12);border-radius:14px;padding:10px 16px;min-width:104px;}
.vth-dp-stat__value{font-size:var(--type-size-xl);font-weight:var(--weight-bold);line-height:1.2;}
.vth-dp-stat__label{font-size:var(--type-size-2xs);line-height:1.4;color:rgba(255,255,255,.75);}

@media (max-width:980px){
  .vth-hero{flex-wrap:wrap;}
  .vth-dp-hero__stats{margin-left:0;width:100%;}
}
@media (max-width:560px){
  .vth-dp-hero__stats{flex-direction:column;}
  .vth-dp-stat{width:100%;}
}

/* ---- Action cards ----------------------------------------------------- */

.vth-dp__cards{display:grid;gap:var(--space-4);align-items:stretch;}
.vth-dp__cards--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.vth-dp__cards--3{grid-template-columns:repeat(3,minmax(0,1fr));}

.vth-dp-card{background:var(--surface-card);border:1.5px solid var(--border-subtle);border-radius:18px;
  padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);min-width:0;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;}
.vth-dp-card:hover{border-color:var(--vth-blue);transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,24,40,.08);}
.vth-dp-card--danger:hover{border-color:var(--vth-red);}

.vth-dp-card__head{display:flex;align-items:center;gap:var(--space-3);}
.vth-dp .vth-dp-card__text{margin:0;font-size:13.5px;line-height:20px;color:var(--text-subtle);flex:1;}
.vth-dp .vth-dp-card__text strong{color:var(--text-primary);font-weight:var(--weight-semibold);}
.vth-dp-card__foot{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;padding-top:var(--space-1);}
.vth-dp-card__foot-note{font-size:var(--type-size-2xs);line-height:1.4;color:var(--text-subtle);}
/* The "Available" pill sits at the end of the card head. */
.vth-dp-card__head .vth-badge{margin-left:auto;flex:none;}

@media (max-width:1080px){ .vth-dp__cards--3{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:760px){ .vth-dp__cards--2,.vth-dp__cards--3{grid-template-columns:minmax(0,1fr);} }

/* ---- Destructive outline button ---------------------------------------
   The shared set has `--danger` (solid red) but no outline variant, and the
   design uses an outlined red for "Request Deletion" — a solid red block on a
   card reads as a warning banner rather than an action. Worth promoting into the
   shared layer; kept here so vth-components.css stays byte-identical to the file
   it was copied from.

   (0,2,0) mirrors the shared variants and is what clears vth-reset.css's
   `.vth button{background:none;border:none}` at (0,1,1) — and `.vth a{color:...}`
   for the anchor form, which is how this button is actually used. Without it the
   control renders as bare blue text with no border at all. */
.vth-btn.vth-btn--danger-outline{background:var(--surface-page);color:var(--vth-red);border-color:var(--vth-red);}
.vth-btn.vth-btn--danger-outline:hover{background:var(--pc-red-50);color:var(--vth-red);}

/* ---- Tinted icon tile -------------------------------------------------
   A rounded square holding one glyph, tinted per severity. `.vth-avatar` in
   vth-reskin.css is a photo avatar (object-fit/cover), not this. --------- */

.vth-dp-tile{width:44px;height:44px;border-radius:var(--radius-lg);display:grid;place-items:center;flex:none;}
.vth-dp-tile--blue{background:var(--surface-blue-soft);color:var(--vth-blue);}
.vth-dp-tile--yellow{background:var(--pc-yellow-100);color:var(--pc-yellow-800);}
.vth-dp-tile--red{background:var(--pc-red-100);color:var(--vth-red);}
.vth-dp-tile--green{background:var(--pc-green-100);color:var(--pc-green-800);}
.vth-dp-tile--muted{background:var(--surface-muted);color:var(--text-subtle);}
.vth-dp-tile--md{width:38px;height:38px;border-radius:11px;}
.vth-dp-tile--sm{width:34px;height:34px;border-radius:10px;}
.vth-dp-tile--xs{width:32px;height:32px;border-radius:10px;}
.vth-dp-tile--round{width:38px;height:38px;border-radius:50%;}
.vth-dp-tile--lg{width:62px;height:62px;border-radius:50%;}

/* ---- Inline strips ----------------------------------------------------- */

.vth-dp-note{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-lg);
  background:var(--surface-muted);font-size:12.5px;line-height:1.45;color:var(--text-subtle);}
.vth-dp-note strong{color:var(--text-primary);font-weight:var(--weight-semibold);}
.vth-dp-note--red{background:var(--pc-red-50);color:var(--pc-red-800);}
.vth-dp-note--red strong{color:var(--pc-red-800);}

/* A neutral variant of the shared `.vth-alert`, for a request that is closed and
   carries no severity. vth-reskin.css ships info/success/warning/error only. */
.vth-alert--muted{background:var(--surface-muted);border-color:var(--border-light);color:var(--text-subtle);}
.vth-dp .vth-alert p{margin:0;font-size:13.5px;line-height:20px;}
.vth-dp .vth-alert__title{font-size:var(--type-size-xs);font-weight:var(--weight-semibold);margin-bottom:4px;}
.vth-dp-alert__icon{display:flex;flex:none;padding-top:1px;}

/* Dashed "keep this for your records" box. */
.vth-dp-ref{padding:14px 16px;border:1.5px dashed var(--border-default);border-radius:14px;
  font-size:12.5px;line-height:20px;color:var(--text-subtle);}
.vth-dp-ref strong{color:var(--text-primary);font-weight:var(--weight-semibold);}

.vth-dp-kicker--red{color:var(--vth-red);}
.vth-dp-kicker--green{color:var(--pc-green-800);}

/* ---- SAR history: filter row ------------------------------------------ */

.vth-dp-filters{display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;
  gap:var(--space-3);align-items:end;margin-bottom:18px;}
.vth-dp-filters .vth-field{margin:0;min-width:0;}

@media (max-width:1080px){ .vth-dp-filters{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .vth-dp-filters{grid-template-columns:minmax(0,1fr);} }

/* ---- SAR history: table ------------------------------------------------ */

.vth-dp-table__when{display:flex;flex-direction:column;gap:2px;}
.vth-dp-table__when span{display:flex;align-items:center;gap:6px;}
.vth-dp-table__when .vth-icon{color:var(--text-muted);}
.vth-dp-table__date{font-size:13.5px;color:var(--text-primary);}
.vth-dp-table__time{font-size:var(--type-size-2xs);color:var(--text-subtle);}
.vth-dp-table__id{font-weight:var(--weight-semibold);color:var(--text-primary);}
.vth-dp-table__action{text-align:right;width:80px;}

/* ---- Overlays ----------------------------------------------------------
   Base is the shared `.vth-modal__*`; these two are the page's own geometry:
   a wide panel and a two-column body. -------------------------------------- */

.vth-dp-modal--wide{max-width:min(1060px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;overflow:hidden;}
.vth-dp-modal__cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start;
  padding:var(--space-5);overflow-y:auto;}
/* `.vth-modal__head` is justify-content:space-between, which is right for its
   two-child (title + close) shape but spreads this one's three children —
   icon tile, titles, close — across the full width. The close button carries
   margin-left:auto, so packing from the start is all that is needed. */
.vth-dp-modal__head{gap:var(--space-3);align-items:center;justify-content:flex-start;padding:var(--space-4) var(--space-5);}
.vth-dp-modal__titles{min-width:0;}
.vth-dp-modal__title{font-size:17px;line-height:24px;font-weight:var(--weight-semibold);}
.vth-dp-modal__step{font-size:12.5px;line-height:1.4;color:var(--text-subtle);}
/* (0,2,0): `vth-reset.css`'s `.vth button{margin:0}` is (0,1,1) and beats a
   single class, so a plain `.vth-dp-modal__close{margin-left:auto}` does not
   push the close button to the right — it sits against the title instead. */
.vth-dp .vth-dp-modal__close{margin-left:auto;}
.vth-dp-modal__cta{display:flex;justify-content:center;padding-top:22px;}

@media (max-width:1040px){ .vth-dp-modal__cols{grid-template-columns:minmax(0,1fr);} }
@media (max-width:560px){
  .vth-dp-modal--wide{max-height:100vh;border-radius:0;}
}

/* "What's Included" grid */
.vth-dp-included{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;}
.vth-dp-included__item{display:flex;gap:var(--space-3);align-items:flex-start;}
.vth-dp-included__title{font-size:15px;line-height:22px;font-weight:var(--weight-semibold);color:var(--text-primary);}
.vth-dp .vth-dp-included__body{margin:2px 0 0;font-size:13px;line-height:19px;color:var(--text-subtle);}

@media (max-width:760px){ .vth-dp-included{grid-template-columns:minmax(0,1fr);} }

.vth-dp-hr{height:1px;background:var(--border-subtle);margin:22px 0;border:0;}

/* Grey side rail inside a modal */
.vth-dp-side{background:var(--surface-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:18px;}
.vth-dp-side__head{display:flex;align-items:center;gap:9px;margin-bottom:var(--space-4);color:var(--vth-blue);}
.vth-dp .vth-dp-side__head h2{margin:0;font-size:var(--type-size-lg);line-height:26px;font-weight:var(--weight-semibold);}
.vth-dp-side__list{display:flex;flex-direction:column;gap:var(--space-3);}

.vth-dp-info{display:flex;gap:var(--space-3);padding:14px;border:1px solid var(--border-subtle);
  border-radius:14px;background:var(--surface-page);}
.vth-dp-info__title{font-size:14.5px;line-height:21px;font-weight:var(--weight-semibold);color:var(--text-primary);}
.vth-dp .vth-dp-info__body{margin:3px 0 0;font-size:13px;line-height:19px;color:var(--text-subtle);}

/* Numbered steps */
.vth-dp-steps{display:flex;flex-direction:column;gap:18px;}
.vth-dp-steps--tight{gap:14px;}
.vth-dp-step{display:flex;gap:var(--space-3);}
.vth-dp-step__n{width:30px;height:30px;border-radius:50%;background:var(--surface-blue-soft);
  color:var(--vth-blue);display:grid;place-items:center;flex:none;
  font-size:13px;line-height:1;font-weight:var(--weight-bold);}
.vth-dp-steps--tight .vth-dp-step__n{width:28px;height:28px;font-size:12.5px;}
.vth-dp-step__title{font-size:14.5px;line-height:21px;font-weight:var(--weight-semibold);color:var(--text-primary);}
.vth-dp .vth-dp-step__body{margin:3px 0 0;font-size:13px;line-height:19px;color:var(--text-subtle);}
.vth-dp-steps--tight .vth-dp-step__title{font-size:var(--type-size-xs);line-height:21px;}
.vth-dp .vth-dp-steps--tight .vth-dp-step__body{font-size:12.5px;}

/* Queued confirmation panel */
.vth-dp-queued{background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:20px;
  padding:26px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.vth-dp .vth-dp-queued__title{margin:18px 0 8px;font-size:22px;line-height:30px;font-weight:var(--weight-semibold);}
.vth-dp .vth-dp-queued__body{margin:0;max-width:520px;font-size:var(--type-size-xs);line-height:22px;color:var(--text-subtle);}
.vth-dp .vth-dp-queued__body strong{color:var(--text-primary);font-weight:var(--weight-semibold);}
.vth-dp-queued .vth-alert{text-align:left;margin-top:22px;width:100%;}
.vth-dp-queued .vth-btn{margin-top:22px;}
.vth-dp-queued .vth-dp-ref{margin-top:22px;width:100%;text-align:left;}

/* ---- Request drawer ---------------------------------------------------- */

.vth-dp-drawer-scrim{position:fixed;inset:0;z-index:1010;background:rgba(19,19,19,.45);
  display:flex;justify-content:flex-end;}
.vth-dp-drawer{width:min(520px,100%);height:100%;background:var(--surface-page);
  box-shadow:-14px 0 40px rgba(16,24,40,.2);display:flex;flex-direction:column;}
.vth-dp-drawer__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--border-subtle);flex:none;}
.vth-dp-drawer__title{font-size:var(--type-size-base);line-height:23px;font-weight:var(--weight-semibold);}
.vth-dp-drawer__meta{font-size:12.5px;line-height:1.4;color:var(--text-subtle);}
.vth-dp-drawer__body{padding:var(--space-5);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-4);}

.vth-dp-block{border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-4);}
.vth-dp-block__head{display:flex;align-items:center;gap:9px;margin-bottom:var(--space-3);}
.vth-dp .vth-dp-block__head h3{margin:0;font-size:15px;line-height:22px;font-weight:var(--weight-semibold);}
.vth-dp-block__count{margin-left:auto;font-size:var(--type-size-2xs);line-height:1;font-weight:var(--weight-medium);
  padding:4px 10px;border-radius:var(--radius-pill);border:1px solid var(--border-subtle);color:var(--text-subtle);}
.vth-dp .vth-dp-block__hint{margin:var(--space-3) 0 0;padding:var(--space-3);border:1.5px dashed var(--border-default);
  border-radius:var(--radius-lg);font-size:12.5px;line-height:19px;color:var(--text-subtle);}
.vth-dp-block .vth-btn{margin-top:14px;}

.vth-dp-files{display:flex;flex-direction:column;gap:var(--space-2);}
.vth-dp-file{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--radius-lg);
  background:var(--surface-subtle);font-size:13.5px;color:var(--text-primary);}
.vth-dp-file > .vth-icon{color:var(--text-muted);}
.vth-dp-file__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vth-dp-file .vth-btn{margin-top:0;}

.vth-dp .vth-dp-onward__title{margin:0 0 4px;font-size:15px;line-height:22px;font-weight:var(--weight-semibold);}
.vth-dp .vth-dp-onward__blurb{margin:0 0 var(--space-3);font-size:13px;line-height:19px;color:var(--text-subtle);}
.vth-dp-onward__list{display:flex;flex-direction:column;gap:10px;}
.vth-dp-onward__item{display:flex;gap:var(--space-3);padding:14px;border:1px solid var(--border-subtle);
  border-radius:14px;align-items:flex-start;}
.vth-dp-onward__item-title{font-size:var(--type-size-xs);font-weight:var(--weight-semibold);}
.vth-dp .vth-dp-onward__item-body{margin:3px 0 10px;font-size:12.5px;line-height:19px;color:var(--text-subtle);}
.vth-dp .vth-dp-onward__item-body strong{color:var(--text-primary);font-weight:var(--weight-semibold);}

/* "What's erased vs kept" rows */
.vth-dp-kv{display:flex;flex-direction:column;gap:var(--space-3);}
.vth-dp-kv__item{display:flex;gap:var(--space-3);align-items:flex-start;}
.vth-dp-kv__title{font-size:var(--type-size-xs);line-height:21px;font-weight:var(--weight-semibold);}
.vth-dp .vth-dp-kv__body{margin:2px 0 0;font-size:12.5px;line-height:19px;color:var(--text-subtle);}

.vth-dp-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.vth-dp-actions__note{font-size:var(--type-size-2xs);line-height:1.4;color:var(--text-subtle);}

/* ---- Coming-soon placeholder pages ------------------------------------ */

.vth-dp-soon{padding:48px var(--space-6);text-align:center;}
.vth-dp .vth-dp-soon__title{margin:18px 0 8px;font-size:22px;line-height:30px;font-weight:var(--weight-semibold);}
.vth-dp .vth-dp-soon p{margin:0 auto;max-width:520px;font-size:var(--type-size-xs);line-height:22px;color:var(--text-subtle);}
.vth-dp-soon__icon{margin:0 auto;}

/* ---- Body scroll lock while an overlay is open ------------------------ */

body.vth-dp-locked{overflow:hidden;}

/* ---- Delete My Account ------------------------------------------------
   Layout only. The panels are the shared `.vth-card`, the timeline reuses
   `.vth-dp-kv`, and the side rail is `.vth-dp-side` — the same pieces the
   export modal is built from.

   Three controls DO get rules here because the shared layer has no equivalent
   and vth-components.css must stay byte-identical to the file it was copied
   from: the breadcrumb, the reason radio card, and the acknowledgement
   checkbox. All three are candidates for promotion into the shared layer the
   next time it is regenerated. ---------------------------------------------- */

/* Rendered as a <div role="navigation">, never a <nav>: Materialize styles the
   bare element (`nav{background-color:#ee6e73}`) and vth-reset.css does not
   neutralise it, so a <nav> here paints a full-width salmon band across the top
   of the page. Measured, not theorised. */
.vth-dp-crumbs{display:flex;align-items:center;gap:8px;font-size:var(--type-size-xs);
  line-height:1.4;color:var(--text-subtle);}
.vth-dp .vth-dp-crumbs a{color:var(--text-subtle);}
.vth-dp .vth-dp-crumbs a:hover{color:var(--vth-blue);}
.vth-dp-crumbs__here{color:var(--vth-blue);font-weight:var(--weight-semibold);}
.vth-dp-crumbs .vth-icon{color:var(--text-muted);}

/* Inline skin for the shared overlay components.

   vth-data-export-request and vth-account-deletion-request each render one body
   in two skins: `.vth-modal__panel` when opened as a dialog, this when dropped
   onto a page. The modal panel supplies the card chrome; inline has to supply its
   own, or the flow renders as loose text on the page background.

   Both directives point at this class. The export one used to name
   `.vth-dp-export`, which was never defined — invisible today only because the
   public page that mounts it inline does not exist yet. */
.vth-dp-inline{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-xs);}

/* The component body: main column + side rail, collapsing to one at 1040.
   `.vth-dp-modal__cols` is shared with the export overlay — see the Overlays
   section above. `--single` is for the step that drops the rail, so the main
   column takes the full width instead of leaving a 330px gap. */
.vth-dp-modal__cols--single{grid-template-columns:minmax(0,1fr);}

/* The panel head shared by all three steps: tile, title, blurb. */
.vth-dp-panel__head{display:flex;gap:14px;align-items:flex-start;}
.vth-dp-panel__titles{min-width:0;}
.vth-dp .vth-dp-panel__title{margin:0 0 4px;font-size:var(--type-size-lg);line-height:26px;
  font-weight:var(--weight-semibold);}
.vth-dp .vth-dp-panel__blurb{margin:0;font-size:13.5px;line-height:20px;color:var(--text-subtle);}
.vth-dp .vth-dp-panel__section{margin:24px 0 12px;font-size:17px;line-height:24px;
  font-weight:var(--weight-semibold);}
.vth-dp-panel__req{color:var(--vth-red);}

/* Reason picker — a radio in a card, two up.

   Built from <button role="radio">, NOT <input type="radio">, and that is a
   deliberate retreat rather than a shortcut. The platform theme
   (themes/the_training_hub/new_themes/css/style.css) does not merely style
   radios — it UN-HIDES them:
     [type="radio"]:not(:checked),[type="radio"]:checked{opacity:1;position:static}
   at (0,2,0), plus a 20px appearance:none box, plus a whole `+ label::before/
   ::after` construction. A visually-hidden real input therefore renders as a
   second visible circle beside ours (measured at 20x8px, opacity 1), and every
   rule that would suppress it has to out-specify a moving target.

   A <button> inside `.vth` has exactly one reset rule against it and is already
   keyboard-operable, so role="radio" + aria-checked buys the same semantics with
   none of the cascade fight. Same reasoning for the acknowledgement below. */
.vth-dp-reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
/* (0,2,0) to clear `.vth button{background:none;border:none}` at (0,1,1). */
.vth-dp .vth-dp-reason{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;
  padding:12px 16px;border:1.5px solid var(--border-default);border-radius:14px;
  background:var(--surface-page);font-family:var(--font-sans);font-size:14.5px;line-height:1.35;
  color:var(--text-primary);text-align:left;cursor:pointer;min-width:0;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;}
.vth-dp .vth-dp-reason:hover{border-color:var(--vth-blue);}
.vth-dp .vth-dp-reason:focus{outline:none;border-color:var(--vth-blue);box-shadow:var(--shadow-focus-blue);}
.vth-dp .vth-dp-reason.is-selected{border-color:var(--vth-blue);background:var(--surface-blue-soft);
  box-shadow:var(--shadow-focus-blue);}
.vth-dp-reason__dot{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border-default);
  background:var(--surface-page);display:grid;place-items:center;flex:none;}
.vth-dp-reason.is-selected .vth-dp-reason__dot{border-color:var(--vth-blue);}
.vth-dp-reason__dot::after{content:"";width:10px;height:10px;border-radius:50%;background:transparent;}
.vth-dp-reason.is-selected .vth-dp-reason__dot::after{background:var(--vth-blue);}
.vth-dp-reason__label{min-width:0;}

@media (max-width:760px){ .vth-dp-reasons{grid-template-columns:minmax(0,1fr);} }

/* Acknowledgement. Same construction and the same reason as the radio above —
   the theme's `[type="checkbox"] + label::before/::after` rules are every bit as
   intrusive as its radio ones. */
.vth-dp .vth-dp-ack{display:flex;gap:12px;align-items:flex-start;width:100%;margin-top:20px;
  padding:0;border:none;background:none;font-family:var(--font-sans);text-align:left;cursor:pointer;}
.vth-dp-ack__box{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--border-default);
  background:var(--surface-page);color:#fff;display:grid;place-items:center;flex:none;margin-top:1px;
  transition:background .15s ease,border-color .15s ease;}
.vth-dp-ack.is-checked .vth-dp-ack__box{background:var(--vth-blue);border-color:var(--vth-blue);}
.vth-dp .vth-dp-ack:focus{outline:none;}
.vth-dp .vth-dp-ack:focus .vth-dp-ack__box{box-shadow:var(--shadow-focus-blue);border-color:var(--vth-blue);}
.vth-dp-ack__tick{visibility:hidden;}
.vth-dp-ack.is-checked .vth-dp-ack__tick{visibility:visible;}
.vth-dp-ack__text{font-size:var(--type-size-xs);line-height:21px;color:var(--text-secondary);}
.vth-dp-ack__text strong{color:var(--text-primary);font-weight:var(--weight-semibold);}

/* Footer row: the commit action and the way out, always side by side. */
.vth-dp-commit{display:flex;align-items:center;gap:20px;margin-top:22px;flex-wrap:wrap;}
.vth-dp .vth-dp-commit .vth-lnk{font-size:15px;}

/* The field-level message under the reason grid / above the button. */
.vth-dp .vth-dp-formerror{margin:12px 0 0;font-size:13px;line-height:19px;color:var(--vth-red);}

/* Step 3. `.vth-dp-queued` is the export's centred confirmation; this one is
   left-aligned because it is read, not celebrated. */
.vth-dp-done__head{display:flex;gap:14px;align-items:center;}
.vth-dp-done__chip{margin-top:6px;}
.vth-dp .vth-dp-done__note{margin:20px 0 0;font-size:var(--type-size-xs);line-height:22px;
  color:var(--text-secondary);max-width:640px;}
.vth-dp .vth-dp-done__note strong{color:var(--text-primary);font-weight:var(--weight-semibold);}

/* ---- Employer Transfer -------------------------------------------------
   Layout only. The panels are `.vth-dp-inline` + `.vth-dp-modal__cols`, the rail is
   `.vth-dp-side`, the steps reuse `.vth-dp-kv` — all shared with the export and
   deletion flows. Only these two are new. -------------------------------------- */

/* Field helper text, under an input rather than over it. `.vth-field__error` already
   exists for the error case; this is the neutral one, and it has to be prefixed to
   clear `vth-reset.css`'s `.vth p` at (0,1,1). */
.vth-dp .vth-dp-help{margin:8px 0 0;font-size:12.5px;line-height:19px;color:var(--text-subtle);}

/* "Request sent to X on DATE" + the pending pill, which wrap together under the
   heading rather than being pushed apart. */
.vth-dp-waiting__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13.5px;line-height:1.5;color:var(--text-subtle);}
.vth-dp-waiting__meta strong{color:var(--text-primary);font-weight:var(--weight-semibold);}

/* ---- The PUBLIC "Manage your data" page --------------------------------
   The only page in this module without the app shell around it, so it carries its
   own header, hero and step trail. Everything BELOW those — the three flows — is the
   same components the signed-in pages use, so there is nothing here for them.

   `.vth-pub` is a sibling scope to `.vth-dp`, not a replacement: the page still sits
   inside `.vth`, so the reset and the shared components apply exactly as usual.
   ------------------------------------------------------------------------- */

/* THE PUBLIC PAGE SHAPE.

   Every public page on this platform is the same shape: a full-width band, and inside
   it a centred container that keeps the content off both edges. The theme gets that
   from `<section>` + `.container` (86% of the viewport, capped, auto margins, 15px
   gutters below the tablet break). This page needs the same shape and cannot use
   those two classes:

     - `section{padding:100px 0}` in the landing-page theme is a global element rule,
       so borrowing `<section>` would import 100px of vertical padding we do not want
       and could only remove by fighting it.
     - `.container` is declared in bootstrap.css AND the landing theme AND Materialize,
       with different widths, and which one wins depends on the page's asset order.
       Golden rule 1 says do not touch those files; the way not to touch them is not
       to depend on them.

   So the metrics are reproduced here, namespaced. The SHELL matches the theme's
   container exactly, at every width, so this page's gutters line up with the header
   and footer around it — that alignment is what makes a page look like it belongs to
   the site. The design's 1320px cap then goes on the content column inside the
   shell, which is where the design applies it; below about a 1530px viewport the
   shell is already narrower than that and the cap does nothing. */
/* `<section>` IS A PADDED ELEMENT ON THIS PAGE. The landing-page theme declares
   `section{padding:100px 0}` (80px below the desktop break) as a bare ELEMENT rule,
   and that sheet is loaded on every public page — so unlike the signed-in Data &
   Privacy pages, every `<section>` inside `.vth` here inherits 80–100px of vertical
   padding it never asked for. It is the same trap as `<nav>` and Materialize's
   salmon band, and `vth-reset.css` does not cover it either.

   A component that sets its own `padding` is already safe (a class beats an element
   selector), which is most of them. These two are the ones on this page that leave
   padding to a child, so they need it said explicitly.

   IF YOU ADD A `<section>` TO THIS PAGE: give it padding through its own class, or
   add it here. Do not "fix" this with a blanket `.vth-pub section{padding:0}` — at
   (0,2,0) that outranks every component class and flattens the panels and cards. */
.vth-pub .vth-card,
.vth-pub .vth-pub-panel__aside{padding:0;}

.vth-pub-page{width:100%;background:var(--surface-subtle);}
.vth-pub-shell{width:86%;max-width:1680px;margin:0 auto;min-width:0;}
@media (max-width:992px){ .vth-pub-shell{width:calc(100% - 30px);} }
@media (max-width:600px){ .vth-pub-shell{width:auto;margin:0 15px;} }

.vth-pub{display:flex;flex-direction:column;gap:var(--space-5);width:100%;min-width:0;
  max-width:1320px;margin:0 auto;padding:var(--space-10) 0 var(--space-16);}

/* There is no page chrome here: layouts.app supplies the real public header and
   footer for a guest, the same as login, sign-up and reset-password. The only strip
   this page owns is the way OUT of a verification, which has nowhere else to live —
   this page is used on shared machines far more often than the portal is. */
.vth-pub__exit{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);
  flex-wrap:wrap;}

/* The design centres the whole hub column and caps the hero narrower than the cards
   beneath it, so the headline reads as a headline rather than a full-width banner. */
.vth-pub__hero{text-align:center;max-width:760px;margin:0 auto;
  display:flex;flex-direction:column;gap:var(--space-3);}
/* (0,2,0) — `vth-reset.css` sets `.vth h1..h6` at (0,1,1) and would otherwise win. */
.vth-pub .vth-pub__hero h1{margin:0;font-size:38px;line-height:46px;font-weight:var(--weight-bold);}
.vth-pub .vth-pub__hero p{margin:0;font-size:var(--type-size-base);line-height:26px;color:var(--text-subtle);}

/* The four-step trail. Wraps to two rows rather than scrolling: it is orientation,
   not navigation, and a horizontally scrolling breadcrumb is worse than a wrapped one. */
.vth-pub-trail{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;}
.vth-pub-trail__step{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;
  border-radius:var(--radius-pill);border:1.5px solid var(--border-light);
  background:var(--surface-card);color:var(--text-subtle);
  font-size:13px;line-height:1;font-weight:var(--weight-semibold);}
.vth-pub-trail__step.is-active{background:var(--surface-blue-soft);color:var(--vth-blue);border-color:var(--vth-blue);}
.vth-pub-trail__n{width:18px;height:18px;border-radius:50%;background:var(--surface-muted);
  color:var(--text-muted);display:grid;place-items:center;font-size:10.5px;font-weight:var(--weight-bold);flex:none;}
.vth-pub-trail__step.is-done .vth-pub-trail__n,
.vth-pub-trail__step.is-active .vth-pub-trail__n{background:var(--vth-blue);color:#fff;}
.vth-pub-trail .vth-icon{color:var(--text-muted);}

/* Choose-a-service cards. */
.vth-pub-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);}
/* Straight off the design: 24px padding, a 12px gap, a 16px radius and the softest
   shadow in the set. Text is LEFT aligned even though the column around it is
   centred — the hero is a statement and the cards are things to read. */
.vth-pub-card{background:var(--surface-card);border:1px solid var(--border-light);border-radius:16px;
  box-shadow:var(--shadow-xs);padding:var(--space-6);display:flex;flex-direction:column;
  gap:var(--space-3);min-width:0;text-align:left;width:100%;font-family:var(--font-sans);
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;}
/* 46px, not the module's default 44px tile — the design sizes this one up because it
   is the only icon on the page carrying a card on its own. */
.vth-pub .vth-pub-card__tile{width:46px;height:46px;border-radius:12px;}
.vth-pub .vth-pub-card{border-color:var(--border-light);}
.vth-pub-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(16,24,40,.1);}
.vth-pub .vth-pub-card__title{margin:0;font-size:19px;line-height:27px;font-weight:var(--weight-semibold);}
.vth-pub .vth-pub-card__body{margin:0;font-size:13.5px;line-height:21px;color:var(--text-subtle);flex:1;}

@media (max-width:980px){ .vth-pub-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:680px){ .vth-pub-cards{grid-template-columns:minmax(0,1fr);} }

/* The centred verify panel, and the reassurance rail beside it. */
.vth-pub-split{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-start;}
.vth-pub-panel{flex:1 1 520px;min-width:0;background:var(--surface-card);
  border:1px solid var(--border-light);border-radius:var(--radius-xl);box-shadow:var(--shadow-xs);
  padding:var(--space-6);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);}
.vth-pub-panel__aside{flex:0 1 380px;min-width:300px;}
.vth-pub-panel__icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none;}
.vth-pub .vth-pub-panel h2{margin:8px 0 0;font-size:24px;line-height:32px;font-weight:var(--weight-semibold);}
.vth-pub .vth-pub-panel__lead{margin:0;font-size:var(--type-size-xs);line-height:22px;
  color:var(--text-subtle);text-align:center;}
.vth-pub-panel__field{width:100%;text-align:left;margin-top:18px;}

/* Six single-character boxes. A `letter-spacing` trick on one input is tempting and
   breaks the moment a password manager or an autofill touches it.

   THE SELECTOR IS DOUBLED ON PURPOSE. `vth-components.css` sizes every text input in
   the design system with `.vth .vth-input.vth-input` — (0,3,0), deliberately high so
   it clears Materialize — and that fixes height to 44px, font-size to 14px and
   padding to 0 12px. A code box is not a text field: at 44px with 14px text the six
   cells read as six empty inputs, and `width:100%` from `.vth-input` lets flex
   stretch them to whatever the panel is wide. So this needs (0,4,0), and `flex:none`
   to hold the width. */
.vth-pub-otp{display:flex;gap:10px;margin-top:20px;}
.vth .vth-pub-otp .vth-input.vth-input{width:52px;flex:none;height:60px;padding:0;
  text-align:center;font-size:22px;font-weight:var(--weight-semibold);border-radius:12px;}

@media (max-width:420px){
  .vth-pub-otp{gap:6px;}
  .vth .vth-pub-otp .vth-input.vth-input{width:42px;height:52px;font-size:19px;}
}

/* The hub's own pieces, from the design: a red hero title, a CTA on each service
   card, the numbered "How verification works" strip, and the two reassurance cards. */

/* (0,2,0): `vth-reset.css` sets `.vth h1..h6` at (0,1,1) and would otherwise win. */
.vth-pub .vth-pub__title{color:var(--vth-red);}

/* The card is the click target and the CTA is a <span> styled as a button — a
   <button> inside a <button> is invalid HTML and browsers recover by hoisting the
   inner one out of the outer, which silently breaks the card's own click. */
/* THE DESIGN'S PILL, and only here. `vth-components.css` re-scales every `.vth-btn`
   in the module to 48px with a 12px radius, which is right for the signed-in pages
   and wrong for this one: the design draws these three CTAs as 44px pills, and the
   public side of this platform is pill-shaped throughout (the landing theme's own
   buttons are `border-radius:40px`). This file loads after vth-components.css, so a
   (0,2,0) rule here lands without touching the module scale. */
.vth-pub .vth-pub-card__cta,
.vth-pub .vth-pub-card--static .vth-btn{height:44px;padding:0 22px;font-size:14.5px;
  border-radius:var(--radius-pill);border-width:1.5px;}

.vth-pub-card__cta{align-self:flex-start;margin-top:var(--space-1);pointer-events:none;}
.vth-pub-card--static{cursor:default;}
.vth-pub-card--static:hover{transform:none;box-shadow:var(--shadow-xs);}
/* The static cards' own button IS interactive, unlike the service cards' label. */
.vth-pub-card--static .vth-btn{align-self:flex-start;pointer-events:auto;}
/* A flow this account cannot use — hidden client-side would be worse: the card
   explains what the option IS, and only the route into it is closed. */
.vth-pub-card.is-unavailable{opacity:.55;cursor:default;}
.vth-pub-card.is-unavailable:hover{transform:none;box-shadow:var(--shadow-xs);}

.vth-pub-cards--2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:760px){ .vth-pub-cards--2{grid-template-columns:minmax(0,1fr);} }

.vth-pub-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);
  margin-top:var(--space-4);}
.vth-pub-step{display:flex;gap:var(--space-3);background:var(--surface-subtle);
  border:1px solid var(--border-subtle);border-radius:14px;padding:18px;min-width:0;}
@media (max-width:820px){ .vth-pub-steps{grid-template-columns:minmax(0,1fr);} }