/* ═══════════════════════════════════════════════════════════════════════════
   YOUR VISION — THE SWISS GRID  (owner pick, 2026-09-23)

   The owner chose version 7 of ten redesigns of the Vision ("Vision · Swiss
   Grid, branded"): every label in a left column, every answer in a right
   column, a large Crimson Pro numeral per section, and the section navigator
   as a strip across the top instead of a side gutter that only existed at
   1400px and wider (portal.css:7658 hid it below that).

   It is a SKIN, not a rebuild. No field, id, name, handler, validation rule
   or save path changes — the one markup change is a `data-n` on each
   `.sec-hdr`, which the numeral reads. Everything is scoped to #tab-briefing,
   so the panel looks the same wherever portal-event-setup.js mounts it, and
   nothing outside the Vision is touched.

   Colour, type, radius and states come from EVORRAH_BRAND_SYSTEM_V15 ch.08:
     · Crimson Pro 200/300/400 for numerals, titles and card names; Inter
       300/400/500 for everything that has a job. No Montserrat here.
     · Linen ground, Alabaster rest panels, Onyx at the §8.2 opacities.
     · Deep Crimson only on the next step (Next, Send) and links.
     · A chosen card or chip is marked in ONYX, never crimson — red stays
       "press this" (§8.1, ch.09 "the accent as decoration").
     · Radius 0 everywhere except inputs (2px); no shadows, no gradients.
     · Warnings are an Amber RULE beside Onyx text — never small amber words
       (§8.5). Errors are Terracotta words under the field (§8.10).

   ⚠ `!important` appears only where the rule it replaces carries one
   (portal.css:5069–5094 inputs, :4460 .sec-num, the pager's injected sheet
   is beaten by specificity alone). Each is marked.
   ═══════════════════════════════════════════════════════════════════════════ */

#tab-briefing{
  --vs-lbl: 220px;
  --vs-gap: 40px;
  --vs-indent: calc(var(--vs-lbl) + var(--vs-gap));
  container: vs / inline-size;
}

/* ── The navigator: a strip across the top, at every width ────────────────── */
#tab-briefing .form-wrap{ padding-left: 0 !important; }   /* portal.css:7678 is !important */
#tab-briefing .brief-section-nav{display: block !important; /* portal.css:7658 hides it below 1400px */
  position: relative; top: auto; float: none; width: auto; margin: 0 0 48px; padding: 0; line-height: 1;}
body:not(.d6) #tab-briefing .brief-section-nav{font-family: var(--sans); font-size: var(--text-sm); letter-spacing: 0; border-bottom: 1px solid var(--ch8-onyx-20);}
#tab-briefing .bsn-title,
#tab-briefing .bsn-foot{ display: none; }
#tab-briefing .bsn-list{
  display: flex; gap: 0; margin: 0; padding: 0; list-style: none;
  border-left: 0; overflow-x: auto; scrollbar-width: none;
}
#tab-briefing .bsn-list::-webkit-scrollbar{ display: none; }
#tab-briefing .bsn-list > li{ flex: none; }
#tab-briefing .bsn-item{
  display: flex; align-items: center; gap: 8px;
  padding: 16px 12px 14px; margin: 0;
  border: 0; border-bottom: 2px solid transparent;
  background: none; white-space: nowrap;
  font: 400 var(--text-sm)/1 var(--sans); letter-spacing: .02em;
  color: var(--ch8-onyx-62);
  transition: color 120ms cubic-bezier(.22,.61,.36,1), border-color 120ms cubic-bezier(.22,.61,.36,1);
}
#tab-briefing .bsn-item:hover{ color: var(--ch8-onyx); background: none; }
#tab-briefing .bsn-item.active,
#tab-briefing .bsn-item.bsn-active{ color: var(--ch8-onyx); border-bottom-color: var(--ch8-onyx); background: none; }
/* Paged, the pager's .bsn-active is the truth; the scroll-spy .active can be left on an earlier step. */
body.brief-paged #tab-briefing .bsn-item.active:not(.bsn-active){ color: var(--ch8-onyx-62); border-bottom-color: transparent; }
#tab-briefing .bsn-item:focus-visible{ outline: 2px solid var(--ch8-crimson); outline-offset: -2px; }
#tab-briefing .bsn-num,
#tab-briefing .bsn-item.done .bsn-num{
  width: auto; flex: none; opacity: 1;
  font: 500 var(--text-xs)/1 var(--sans); letter-spacing: .04em;
  font-variant-numeric: tabular-nums; color: inherit;
}
#tab-briefing .bsn-item.done{ color: var(--ch8-onyx-78); }
#tab-briefing .bsn-item.done .bsn-num::before{ content: none; }
/* Done is a Moss dot beside the section's name — §8.10: a dot only where a word is present. */
#tab-briefing .bsn-item.done::after{
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ch8-moss); flex: none;
}
#tab-briefing .bsn-item.bsn-optional > span:last-child::after{ content: none; }

/* ── A section: numeral in the left column, the question on the right ─────── */
#tab-briefing .sec-hdr{
  display: grid; grid-template-columns: var(--vs-lbl) minmax(0, 1fr); column-gap: var(--vs-gap);
  margin: 0 0 48px; padding: 0; text-align: left;
}
#tab-briefing .sec-hdr::before{
  content: attr(data-n);
  grid-column: 1; grid-row: 1 / span 4;
  font: 200 5.5rem/.8 var(--serif); letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--ch8-onyx);
}
#tab-briefing .sec-hdr > *{ grid-column: 2; min-width: 0; }
body:not(.d6) #tab-briefing .sec-num,
body:not(.d6) #tab-briefing .sec-num > span{
  font: 500 var(--text-micro)/1.5 var(--sans) !important;   /* portal.css:4460 forces 700 */
  letter-spacing: .22em; text-transform: uppercase; color: var(--ch8-onyx-62);
}
#tab-briefing .sec-num{ display: block; margin: 0 0 14px; }
#tab-briefing .sec-num > span{ white-space: nowrap; }      /* "(optional)" no longer wraps alone */
#tab-briefing .sec{ padding-left: 0 !important; padding-right: 0 !important; }   /* the panel already carries the gutter */
/* portal.css:5059 sizes the title with !important, and a room rule sets it in the sans — both answered here. */
#tab-briefing .sec-title{margin: 0 !important; text-wrap: balance;}
body:not(.d6) #tab-briefing .sec-title{font: 300 var(--h2)/1.06 var(--serif) !important; letter-spacing: -.015em !important; color: var(--ch8-onyx); text-transform: none;}
body:not(.d6) #tab-briefing .sec-title em{ font: inherit !important; font-style: normal !important; color: var(--ch8-onyx-62) !important; }
#tab-briefing .sec-desc{
  margin: 16px 0 0; max-width: 60ch;
  font: 300 var(--text-md)/1.6 var(--sans); color: var(--ch8-onyx-78);
}
#tab-briefing .sec-desc strong,
#tab-briefing .sec-desc em{ font-weight: 400; font-style: normal; color: var(--ch8-onyx); }

/* ── A field is one row: label + hint left, the answer right ──────────────── */
/* Floats, not a grid: a grid puts the hint on row 2, BELOW the tallest answer on row 1 (the
   venue-style chips pushed their own hint 90px down). Floated, the label and its hint stack in
   the left column from the top whatever the answer column holds; flow-root contains them. */
#tab-briefing .fld{ display: flow-root; margin: 0 0 32px; }
/* ⚠ NEVER set `display` on `.fld > *`: the field's error, warning and an inline <script> are
   children that must stay hidden until their own code shows them. Only the controls are made block. */
#tab-briefing .fld > *{ margin-left: var(--vs-indent); min-width: 0; }
#tab-briefing .fld > :is(input,select,textarea){ display: block; }
#tab-briefing .fld > script{ display: none !important; }
#tab-briefing .fld > * + *{ margin-top: 8px; }
#tab-briefing .fld > input,
#tab-briefing .fld > select,
#tab-briefing .fld > textarea{ width: calc(100% - var(--vs-indent)) !important; }
#tab-briefing .fld > .fld-lbl{ float: left; clear: left; width: var(--vs-lbl); margin: 0 !important; padding-top: 13px; }
#tab-briefing .fld > .fld-lbl + .fld-hint{ float: left; clear: left; width: var(--vs-lbl); margin: 6px 0 0 !important; }
#tab-briefing .fld > .fld-lbl + *:not(.fld-hint),
#tab-briefing .fld > .fld-lbl + .fld-hint + *{ margin-top: 0; }
/* A row of two fields reads as two rows — the grid has one label column. */
#tab-briefing .fld-row{ display: block; margin: 0; }
#tab-briefing .fld-row > .fld{ width: auto; flex: none !important; }
/* Anything that is not a field row (a card grid, the palette, the story) sits in the answer column,
   and a field nested inside one of those is stacked — there is no second label column in there. */
#tab-briefing .sec > :not(.sec-hdr):not(.fld):not(.fld-row):not(.sec-body):not(.bp-nav),
#tab-briefing .sec-body > :not(.fld):not(.fld-row){ margin-left: var(--vs-indent); }
/* Nested inside an answer-column block there is no second label column: stack. */
#tab-briefing .sec > :not(.sec-hdr):not(.fld):not(.fld-row):not(.sec-body) .fld > *,
#tab-briefing .sec-body > :not(.fld):not(.fld-row) .fld > *{ float: none; width: auto; margin-left: 0; padding-top: 0; }
#tab-briefing .sec > :not(.sec-hdr):not(.fld):not(.fld-row):not(.sec-body) .fld > :is(input,select,textarea),
#tab-briefing .sec-body > :not(.fld):not(.fld-row) .fld > :is(input,select,textarea){ width: 100% !important; }
#tab-briefing .sec > :not(.sec-hdr):not(.fld):not(.fld-row):not(.sec-body) .fld > .fld-lbl + .fld-hint,
#tab-briefing .sec-body > :not(.fld):not(.fld-row) .fld > .fld-lbl + .fld-hint{ width: auto; margin: 4px 0 0 !important; }

body:not(.d6) #tab-briefing .fld-lbl{
  display: block;
  font: 500 var(--text-xs)/1.5 var(--sans) !important; letter-spacing: .18em !important; text-transform: uppercase !important;
  color: var(--ch8-onyx-62) !important;
}
#tab-briefing .fld-lbl span{ letter-spacing: .12em; color: var(--ch8-onyx-48); font-weight: 500; }
#tab-briefing .fld-hint{
  display: block;
  font: 300 var(--text-sm)/1.55 var(--sans); font-style: normal; letter-spacing: 0; text-transform: none;
  color: var(--ch8-onyx-78); max-width: 52ch;
}

#tab-briefing .fld > .fld-hint:not(.fld-lbl + .fld-hint){ margin-left: var(--vs-indent); }
#tab-briefing .fld > .fld-hint:first-child{ margin-left: 0; }
#tab-briefing .fld > .fld-hint:first-child + .fld-hint{ margin-left: 0; margin-top: 4px; }

/* Inputs — §8.10: Linen ground, 1px Onyx 20%, radius 2px, 12×14, Inter 300.
   portal.css:5069–5094 draws them as !important underlines, so these answer in kind.
   This sheet loads just BEFORE portal-v15.css (v15 must stay last — its 44px touch floor); every
   selector starts at #tab-briefing, so specificity, not order, is what wins here. */
#tab-briefing .fld-input,
#tab-briefing .fld-select,
#tab-briefing .fld-textarea,
#tab-briefing .pd-input,
#tab-briefing textarea,
#tab-briefing input[type="text"],
#tab-briefing input[type="email"],
#tab-briefing input[type="tel"],
#tab-briefing input[type="number"],
#tab-briefing input[type="date"],
#tab-briefing input[type="url"]{min-height: 44px; padding: 12px 14px !important;}
body:not(.d6) #tab-briefing .fld-input,
body:not(.d6) #tab-briefing .fld-select,
body:not(.d6) #tab-briefing .fld-textarea,
body:not(.d6) #tab-briefing .pd-input,
body:not(.d6) #tab-briefing textarea,
body:not(.d6) #tab-briefing input[type="text"],
body:not(.d6) #tab-briefing input[type="email"],
body:not(.d6) #tab-briefing input[type="tel"],
body:not(.d6) #tab-briefing input[type="number"],
body:not(.d6) #tab-briefing input[type="date"],
body:not(.d6) #tab-briefing input[type="url"]{background-color: var(--ch8-linen) !important; border: 1px solid var(--ch8-onyx-20) !important; border-radius: 2px !important; font: 300 var(--text-base)/1.4 var(--sans) !important; letter-spacing: 0 !important; color: var(--ch8-onyx) !important; box-shadow: none !important;}
#tab-briefing .fld-select{ padding-right: 36px !important; }
#tab-briefing textarea{ min-height: 120px; line-height: 1.6 !important; }
#tab-briefing .fld-input::placeholder,
#tab-briefing textarea::placeholder{ color: var(--ch8-onyx-48); font-style: normal; }
body:not(.d6) #tab-briefing .fld-input:hover,
body:not(.d6) #tab-briefing .fld-select:hover,
body:not(.d6) #tab-briefing textarea:hover{ border-color: var(--ch8-onyx-34) !important; }
#tab-briefing .fld-input:focus,
#tab-briefing .fld-select:focus,
#tab-briefing .fld-textarea:focus,
#tab-briefing .pd-input:focus,
#tab-briefing textarea:focus,
#tab-briefing input:focus{/* §8.9: a 3px inset ring, border included */;}
body:not(.d6) #tab-briefing .fld-input:focus,
body:not(.d6) #tab-briefing .fld-select:focus,
body:not(.d6) #tab-briefing .fld-textarea:focus,
body:not(.d6) #tab-briefing .pd-input:focus,
body:not(.d6) #tab-briefing textarea:focus,
body:not(.d6) #tab-briefing input:focus{outline: none; border-color: var(--ch8-crimson) !important; box-shadow: inset 0 0 0 2px var(--ch8-crimson) !important;}
body:not(.d6) #tab-briefing .fld-input.err,
body:not(.d6) #tab-briefing .fld-select.err,
body:not(.d6) #tab-briefing textarea.err{ border-color: var(--ch8-terracotta) !important; }
#tab-briefing .fld-err{margin: 0;}
body:not(.d6) #tab-briefing .fld-err{font: 500 var(--text-xs)/1.5 var(--sans) !important; letter-spacing: 0; text-transform: none; color: var(--ch8-terracotta) !important;}
/* Attention: an Amber rule beside Onyx words (§8.5 — never small amber type). */
#tab-briefing .fld-date-warn,
#tab-briefing .fld-warn-msg{padding: 2px 0 2px 12px !important; margin: 0 !important;}
body:not(.d6) #tab-briefing .fld-date-warn,
body:not(.d6) #tab-briefing .fld-warn-msg{font: 300 var(--text-sm)/1.5 var(--sans) !important; font-style: normal; color: var(--ch8-onyx-78) !important; background: none !important; border: 0 !important; border-left: 2px solid var(--ch8-amber) !important; border-radius: 0 !important;}

/* ── Choices — Linen cards on a hairline; chosen = Onyx, never crimson ────── */
body:not(.d6) #tab-briefing .feeling-card,
body:not(.d6) #tab-briefing .tone-card,
body:not(.d6) #tab-briefing .mat-card,
body:not(.d6) #tab-briefing .tech-card,
body:not(.d6) #tab-briefing .print-opt-card,
body:not(.d6) #tab-briefing .treat-opt,
body:not(.d6) #tab-briefing .type-opt,
body:not(.d6) #tab-briefing .pal-card-v3,
body:not(.d6) #tab-briefing .dp-pill,
body:not(.d6) #tab-briefing .pd-piece-card{
  position: relative;
  background: var(--ch8-linen) !important;
  border: 1px solid var(--ch8-onyx-20) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  color: var(--ch8-onyx);
  transition: border-color 120ms cubic-bezier(.22,.61,.36,1), background-color 120ms cubic-bezier(.22,.61,.36,1);
}
body:not(.d6) #tab-briefing .feeling-card:hover,
body:not(.d6) #tab-briefing .tone-card:hover,
body:not(.d6) #tab-briefing .mat-card:hover,
body:not(.d6) #tab-briefing .tech-card:hover,
body:not(.d6) #tab-briefing .print-opt-card:hover,
body:not(.d6) #tab-briefing .treat-opt:hover,
body:not(.d6) #tab-briefing .type-opt:hover,
body:not(.d6) #tab-briefing .pal-card-v3:hover,
body:not(.d6) #tab-briefing .dp-pill:hover{
  border-color: var(--ch8-onyx-34) !important;
  background: color-mix(in srgb, var(--ch8-onyx) 4%, var(--ch8-linen)) !important;
}
body:not(.d6) #tab-briefing .feeling-card.selected,
body:not(.d6) #tab-briefing .tone-card.selected,
body:not(.d6) #tab-briefing .mat-card.selected,
body:not(.d6) #tab-briefing .tech-card.selected,
body:not(.d6) #tab-briefing .print-opt-card.selected,
body:not(.d6) #tab-briefing .treat-opt.selected,
body:not(.d6) #tab-briefing .type-opt.selected,
body:not(.d6) #tab-briefing .pal-card-v3.selected,
body:not(.d6) #tab-briefing .dp-pill.dp-on{
  border-color: var(--ch8-onyx) !important;
  box-shadow: inset 0 0 0 1px var(--ch8-onyx) !important;
  background: var(--ch8-linen) !important;
}
/* The card's own ✓, square and Onyx. */
#tab-briefing .feeling-card.selected::after,
#tab-briefing .tone-card.selected::after,
#tab-briefing .mat-card.selected::after,
#tab-briefing .tech-card.selected::after,
#tab-briefing .print-opt-card.selected::after,
#tab-briefing .treat-opt.selected::after,
#tab-briefing .pal-card-v3.selected::after{
  content: '✓'; position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 20px; height: 20px; background: var(--ch8-onyx); color: var(--ch8-linen);
  font: 500 11px/20px var(--sans); text-align: center; border-radius: 0;
}
/* Card names in the serif; descriptions in the sans. */
body:not(.d6) #tab-briefing .feeling-name,
body:not(.d6) #tab-briefing .mat-card-name,
body:not(.d6) #tab-briefing .tech-name,
body:not(.d6) #tab-briefing .print-opt-name,
body:not(.d6) #tab-briefing .treat-label,
body:not(.d6) #tab-briefing .pal-card-name-v3,
body:not(.d6) #tab-briefing .pd-piece-name,
body:not(.d6) #tab-briefing .sc-chapter-title,
body:not(.d6) #tab-briefing .upload-ttl{
  font: 400 var(--h3)/1.3 var(--serif) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--ch8-onyx) !important;
}
body:not(.d6) #tab-briefing .feeling-desc,
body:not(.d6) #tab-briefing .mat-card-desc,
body:not(.d6) #tab-briefing .tech-desc,
body:not(.d6) #tab-briefing .print-opt-desc,
body:not(.d6) #tab-briefing .treat-desc,
body:not(.d6) #tab-briefing .pal-card-mood-v3,
body:not(.d6) #tab-briefing .type-lbl,
body:not(.d6) #tab-briefing .upload-sub{
  font: 300 var(--text-sm)/1.55 var(--sans) !important; font-style: normal !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--ch8-onyx-78) !important;
}
body:not(.d6) #tab-briefing .feeling-quote{ font: italic 300 var(--text-sm)/1.5 var(--serif) !important; color: var(--ch8-onyx-62) !important; }
body:not(.d6) #tab-briefing .type-lbl-name,
body:not(.d6) #tab-briefing .tone-card-name,
body:not(.d6) #tab-briefing .mat-card-feel,
body:not(.d6) #tab-briefing .sc-chapter-num,
body:not(.d6) #tab-briefing .pal-card-hexes,
body:not(.d6) #tab-briefing .pal-hex-chip{
  font: 500 var(--text-micro)/1.5 var(--sans) !important; letter-spacing: .22em !important; text-transform: uppercase !important;
  color: var(--ch8-onyx-62) !important;
}
body:not(.d6) #tab-briefing .tone-card-sample{ font: italic 300 1.15rem/1.4 var(--serif) !important; color: var(--ch8-onyx) !important; }
body:not(.d6) #tab-briefing .tech-demo{ background: var(--ch8-alabaster) !important; border-radius: 0 !important; box-shadow: none !important; background-image: none !important; }
body:not(.d6) #tab-briefing .tech-demo-name{ background-image: none !important; }
body:not(.d6) #tab-briefing .pal-strip-v3,
body:not(.d6) #tab-briefing .pal-card-strips,
body:not(.d6) #tab-briefing .feeling-bar,
body:not(.d6) #tab-briefing .mat-card-swatch{ border-radius: 0 !important; }

/* "Let Evorrah choose" — the recommended way out, an Alabaster rest panel (§8.10 card). */
#tab-briefing .pal-default-opt,
#tab-briefing .type-opt-default{display: grid; gap: 6px; text-align: left; padding: 28px 52px 28px 28px !important; margin: 0 0 24px !important; max-width: none !important; width: 100% !important; position: relative;}
body:not(.d6) #tab-briefing .pal-default-opt,
body:not(.d6) #tab-briefing .type-opt-default{background: var(--ch8-alabaster) !important; border: 1px solid transparent !important; border-radius: 0 !important; box-shadow: none !important;}
/* palDefaultOpt's three lines carry inline Montserrat / Libre Baskerville / retired gold — answered with !important. */
#tab-briefing .pal-default-opt{ display: block !important; }
body:not(.d6) #tab-briefing .pal-default-opt:hover,
body:not(.d6) #tab-briefing .type-opt-default:hover{ border-color: var(--ch8-onyx-34) !important; }
body:not(.d6) #tab-briefing .pal-default-opt.selected,
body:not(.d6) #tab-briefing .type-opt-default.selected{ border-color: var(--ch8-onyx) !important; box-shadow: inset 0 0 0 1px var(--ch8-onyx) !important; }
body:not(.d6) #tab-briefing .pal-default-opt > span:first-child > span:nth-child(1),
body:not(.d6) #tab-briefing .type-opt-default .type-lbl-name{
  font: 500 var(--text-micro)/1.5 var(--sans) !important; letter-spacing: .22em !important; text-transform: uppercase !important;
  color: var(--ch8-onyx-62) !important;
}
body:not(.d6) #tab-briefing .pal-default-opt > span:first-child > span:nth-child(2),
body:not(.d6) #tab-briefing .type-default-title{
  font: 300 var(--h2-sm)/1.1 var(--serif) !important; letter-spacing: -.01em !important; color: var(--ch8-onyx) !important;
  text-transform: none !important;
}
#tab-briefing .pal-default-opt > span:first-child > span:nth-child(3),
#tab-briefing .type-opt-default .type-lbl{max-width: 56ch;}
body:not(.d6) #tab-briefing .pal-default-opt > span:first-child > span:nth-child(3),
body:not(.d6) #tab-briefing .type-opt-default .type-lbl{font: 300 var(--text-base)/1.55 var(--sans) !important; color: var(--ch8-onyx-78) !important;}
#tab-briefing .pal-default-mark,
#tab-briefing .type-opt-default .type-mark{position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; display: grid; place-items: center; line-height: 1; opacity: 1 !important;}
body:not(.d6) #tab-briefing .pal-default-mark,
body:not(.d6) #tab-briefing .type-opt-default .type-mark{font-size: 11px !important; border: 1px solid var(--ch8-onyx-34); color: transparent !important; background: transparent;}
body:not(.d6) #tab-briefing .pal-default-opt.selected .pal-default-mark,
body:not(.d6) #tab-briefing .type-opt-default.selected .type-mark{ background: var(--ch8-onyx); border-color: var(--ch8-onyx); color: var(--ch8-linen) !important; }
#tab-briefing .type-opt:not(.type-opt-default) .type-mark{ display: none; }
#tab-briefing .type-opts{ display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
#tab-briefing .type-opts > .type-opt-default{ grid-column: 1 / -1; margin: 0 0 12px !important; }
#tab-briefing .type-see-more{ display: inline-block; margin: 16px 0 0 !important; }
#tab-briefing .type-opt.selected:not(.type-opt-default)::after{
  content: '✓'; position: absolute; top: 12px; right: 12px; width: 20px; height: 20px;
  background: var(--ch8-onyx); color: var(--ch8-linen); font: 500 11px/20px var(--sans); text-align: center;
}

/* Chips a client toggles — square, a hairline; on = an Onyx fill with Linen type. */
/* (portal one format, 2026-09-27) .vs-chip, .pal-mode-btn and .sc-dot are scoped off the portal:
   there they are the direction's chips (portal-d6.css, "the Vision questionnaire") and take its
   30px / 44px — this forced padding held them at 37px on a mouse. */
#tab-briefing .lang-opt,
#tab-briefing .emb-pill,
body:not(.d6) #tab-briefing .vs-chip,
body:not(.d6) #tab-briefing .pal-mode-btn,
#tab-briefing .pd-unit-btn,
#tab-briefing .pd-global-unit-btn,
body:not(.d6) #tab-briefing .sc-dot{min-height: 44px; padding: 10px 16px !important;}
body:not(.d6) #tab-briefing .lang-opt,
body:not(.d6) #tab-briefing .emb-pill,
body:not(.d6) #tab-briefing .vs-chip,
body:not(.d6) #tab-briefing .pal-mode-btn,
body:not(.d6) #tab-briefing .pd-unit-btn,
body:not(.d6) #tab-briefing .pd-global-unit-btn,
body:not(.d6) #tab-briefing .sc-dot{border: 1px solid var(--ch8-onyx-20) !important; border-radius: 0 !important; background: var(--ch8-linen) !important; box-shadow: none !important; font: 400 var(--text-sm)/1.2 var(--sans) !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--ch8-onyx-78) !important;}
body:not(.d6) #tab-briefing .lang-opt:hover,
body:not(.d6) #tab-briefing .emb-pill:hover,
body:not(.d6) #tab-briefing .vs-chip:hover,
body:not(.d6) #tab-briefing .pal-mode-btn:hover,
body:not(.d6) #tab-briefing .pd-unit-btn:hover{ border-color: var(--ch8-onyx-34) !important; color: var(--ch8-onyx) !important; }
body:not(.d6) #tab-briefing .lang-opt.selected,
body:not(.d6) #tab-briefing .emb-pill.selected,
body:not(.d6) #tab-briefing .vs-chip.vs-chip-on,
body:not(.d6) #tab-briefing .pal-mode-btn.active,
body:not(.d6) #tab-briefing .pd-unit-btn.pd-unit-active,
body:not(.d6) #tab-briefing .pd-global-unit-btn.pd-unit-active,
body:not(.d6) #tab-briefing .sc-dot.sc-active,
body:not(.d6) #tab-briefing .sc-dot.sc-cur{
  background: var(--ch8-onyx) !important; border-color: var(--ch8-onyx) !important; color: var(--ch8-linen) !important;
}
#tab-briefing .pal-mode-toggle{display: inline-flex !important; gap: 8px; margin: 0 0 24px !important; max-width: none !important;}
body:not(.d6) #tab-briefing .pal-mode-toggle{border: 0 !important; background: none !important;}

/* Palette families — underline tabs, the site's own nav idiom. */
#tab-briefing .pal-tabs{ display: flex; flex-wrap: wrap; gap: 0 24px; border: 0; border-bottom: 1px solid var(--ch8-onyx-20); background: none; }
#tab-briefing .pal-tab{margin-bottom: -1px; min-height: 0; flex: none !important;}
body:not(.d6) #tab-briefing .pal-tab{padding: 12px 0 10px !important;}   /* inside the portal a pal-tab is a d6 chip (2026-09-27) */
body:not(.d6) #tab-briefing .pal-tab{border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: none !important; font: 400 var(--text-sm)/1 var(--sans) !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--ch8-onyx-62) !important;}
body:not(.d6) #tab-briefing .pal-tab.active{ color: var(--ch8-onyx) !important; border-bottom-color: var(--ch8-onyx) !important; }

/* ── Buttons — §8.10 ───────────────────────────────────────────────────────── */
body:not(.d6) #tab-briefing .bp-next,
body:not(.d6) #tab-briefing .submit-btn,
body:not(.d6) #tab-briefing #dpContinueBtn{min-height: 44px; padding: 12px 24px !important;}
body:not(.d6) #tab-briefing .bp-next,
body:not(.d6) #tab-briefing .submit-btn,
body:not(.d6) #tab-briefing #dpContinueBtn{background: var(--ch8-crimson) !important; color: var(--ch8-linen) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none; font: 500 var(--text-sm)/1 var(--sans) !important; letter-spacing: .16em !important; text-transform: uppercase !important;}
body:not(.d6) #tab-briefing .bp-next:hover,
body:not(.d6) #tab-briefing .submit-btn:hover,
body:not(.d6) #tab-briefing #dpContinueBtn:hover{ background: color-mix(in srgb, var(--ch8-crimson) 92%, var(--ch8-onyx)) !important; }
body:not(.d6) #tab-briefing .bp-back,
body:not(.d6) #tab-briefing .sc-next-btn,
body:not(.d6) #tab-briefing .wheel-add-btn,
body:not(.d6) #tab-briefing .pal-regen-btn{min-height: 44px; padding: 12px 24px !important;}
body:not(.d6) #tab-briefing .bp-back,
body:not(.d6) #tab-briefing .sc-next-btn,
body:not(.d6) #tab-briefing .wheel-add-btn,
body:not(.d6) #tab-briefing .pal-regen-btn{background: transparent !important; color: var(--ch8-onyx) !important; border: 0 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ch8-onyx) 35%, transparent) !important; border-radius: 0 !important; font: 500 var(--text-sm)/1 var(--sans) !important; letter-spacing: .16em !important; text-transform: uppercase !important;}
body:not(.d6) #tab-briefing .bp-back:hover,
body:not(.d6) #tab-briefing .sc-next-btn:hover,
body:not(.d6) #tab-briefing .wheel-add-btn:hover,
body:not(.d6) #tab-briefing .pal-regen-btn:hover{ background: color-mix(in srgb, var(--ch8-onyx) 4%, transparent) !important; }
body:not(.d6) #tab-briefing .bp-count{ font: 500 var(--text-micro)/1 var(--sans) !important; letter-spacing: .22em !important; color: var(--ch8-onyx-62) !important; }
#tab-briefing .bp-nav{ border-top: 1px solid var(--ch8-onyx-20); padding-top: 24px; margin-top: 48px; }
#tab-briefing .type-see-more,
#tab-briefing .dp-bar-clear,
#tab-briefing .pal-preview-change,
#tab-briefing .font-picker-hide{padding: 0 !important; min-height: 0; cursor: pointer;}
body:not(.d6) #tab-briefing .type-see-more,
body:not(.d6) #tab-briefing .dp-bar-clear,
body:not(.d6) #tab-briefing .pal-preview-change,
body:not(.d6) #tab-briefing .font-picker-hide{background: none !important; border: 0 !important; font: 400 var(--text-sm)/1.4 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ch8-crimson) !important; text-decoration: underline; text-underline-offset: 3px;}

/* ── Uploads, story, palette preview, pieces, submit ──────────────────────── */
body:not(.d6) #tab-briefing .upload-zone{
  background: var(--ch8-linen) !important; border: 1px dashed color-mix(in srgb, var(--ch8-onyx) 35%, transparent) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
body:not(.d6) #tab-briefing .upload-zone:hover,
body:not(.d6) #tab-briefing .upload-zone.drag-over{ border-color: var(--ch8-onyx) !important; background: color-mix(in srgb, var(--ch8-onyx) 4%, var(--ch8-linen)) !important; }
body:not(.d6) #tab-briefing .upload-ico{ color: var(--ch8-onyx-62) !important; }
#tab-briefing .upload-grid .fld{ margin-bottom: 0; }
body:not(.d6) #tab-briefing .pal-selected-preview,
body:not(.d6) #tab-briefing .pal-preview-inner,
body:not(.d6) #tab-briefing .dp-bar,
body:not(.d6) #tab-briefing .pd-piece-hdr{
  background: var(--ch8-alabaster) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
body:not(.d6) #tab-briefing .pal-preview-name{ font: 400 var(--h3)/1.3 var(--serif) !important; color: var(--ch8-onyx) !important; }
#tab-briefing .dp-bar{ padding: 14px 20px !important; }
body:not(.d6) #tab-briefing .dp-bar-txt{ font: 300 var(--text-sm)/1.4 var(--sans) !important; color: var(--ch8-onyx-78) !important; }
#tab-briefing .dp-bar-txt strong,
#tab-briefing .dp-bar-txt b{ font: 300 1.5rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--ch8-onyx); }
body:not(.d6) #tab-briefing .col-hex,
body:not(.d6) #tab-briefing .wheel-picked-hex{ font-family: ui-monospace, Menlo, Consolas, monospace !important; }
body:not(.d6) #tab-briefing .submit-block{ border: 1px solid var(--ch8-onyx-20) !important; border-radius: 0 !important; background: var(--ch8-linen) !important; box-shadow: none !important; }
body:not(.d6) #tab-briefing .submit-ttl{ font: 300 var(--h2-sm)/1.1 var(--serif) !important; letter-spacing: -.01em !important; color: var(--ch8-onyx) !important; }
#tab-briefing .submit-ttl em{ font-style: normal; color: var(--ch8-onyx-62); }
body:not(.d6) #tab-briefing .submit-fine-print{ font: 300 var(--text-sm)/1.55 var(--sans) !important; color: var(--ch8-onyx-62) !important; }

/* ── Narrow: one column, the numeral above the question ───────────────────── */
@container vs (max-width: 720px){
  #tab-briefing .sec-hdr{ grid-template-columns: minmax(0, 1fr); }
  #tab-briefing .fld > *{ float: none !important; width: auto; margin-left: 0; padding-top: 0; }
  #tab-briefing .fld > :is(input,select,textarea){ width: 100% !important; }
  #tab-briefing .fld > .fld-lbl + .fld-hint{ width: auto; margin: 4px 0 0 !important; }
  #tab-briefing .sec-hdr::before{ grid-row: auto; font-size: 3.4rem; margin-bottom: 16px; }
  #tab-briefing .sec-hdr > *{ grid-column: 1; }
  #tab-briefing .sec > :not(.sec-hdr):not(.fld):not(.fld-row):not(.sec-body):not(.bp-nav),
  #tab-briefing .sec-body > :not(.fld):not(.fld-row){ margin-left: 0; }
  #tab-briefing .brief-section-nav{ margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce){
  #tab-briefing *{ transition-duration: 120ms !important; }
}