body[data-surface="dark"]{background:var(--brand-navy-dark)}
[data-surface="dark"] .ex-sheet{background:var(--brand-navy);border-color:rgba(157,182,204,.22)}
[data-surface="dark"] .ex-plate{background:var(--brand-paper);border-color:rgba(157,182,204,.30)}
[data-surface="dark"] .progress__track{background:rgba(157,182,204,.22)}
[data-surface="dark"] .progress__fill{background:var(--brand-teal)}
[data-surface="dark"] .btn--primary{background:var(--brand-white);border-color:var(--brand-white);color:var(--brand-navy)}
[data-surface="dark"] .btn--primary:hover{background:var(--brand-teal-light);border-color:var(--brand-teal-light)}
[data-surface="dark"] .btn--ghost{color:#CFE6F3;border-color:rgba(157,182,204,.42)}
[data-surface="dark"] .choice,[data-surface="dark"] .scale__option{background:rgba(255,255,255,.05);border-color:rgba(157,182,204,.28)}
[data-surface="dark"] .choice:hover,[data-surface="dark"] .scale__option:hover{border-color:var(--brand-teal)}
[data-surface="dark"] .choice[data-selected="true"],[data-surface="dark"] .scale__option[data-selected="true"]{background:rgba(0,168,203,.18);border-color:var(--brand-teal)}
[data-surface="dark"] .choice__label,[data-surface="dark"] .scale__label,[data-surface="dark"] .scale__number{color:#fff}
[data-surface="dark"] .choice__detail,[data-surface="dark"] .scale__detail{color:#9DB6CC}
[data-surface="dark"] .choice__marker{border-color:rgba(157,182,204,.55)}
[data-surface="dark"] .scale__rung{background:rgba(157,182,204,.28)}
[data-surface="dark"] .scale__rung[data-on="true"]{background:var(--brand-teal)}
[data-surface="dark"] .text-field,[data-surface="dark"] .listbox__trigger,[data-surface="dark"] textarea{background:rgba(255,255,255,.06);border-color:rgba(157,182,204,.35);color:#fff}
[data-surface="dark"] .text-field::placeholder,[data-surface="dark"] textarea::placeholder{color:#7594AF}
[data-surface="dark"] .listbox__panel{background:var(--brand-navy-dark);border-color:rgba(157,182,204,.35)}
[data-surface="dark"] .listbox__option[aria-selected="true"],[data-surface="dark"] .listbox__option:hover{background:rgba(0,168,203,.20)}
[data-surface="dark"] .ex-masthead__title,[data-surface="dark"] .ex-exit{color:#CFE6F3}

[data-surface="dark"] .ex-evidence__figure{color:#fff}
[data-surface="dark"] .ex-evidence__note,[data-surface="dark"] .ex-margin__body{color:#9DB6CC}
[data-surface="dark"] .ex-dimensions p{color:#7594AF}
[data-surface="dark"] .ex-dimensions li b{color:#CFE6F3}
[data-surface="dark"] .ex-dimensions li span{color:#9DB6CC}
[data-surface="dark"] .ex-dimensions li[data-current="true"] b,[data-surface="dark"] .ex-dimensions li[data-current="true"] span{color:var(--brand-teal)}
[data-surface="dark"] .ex-folio{color:rgba(157,182,204,.30)}
[data-surface="dark"] .ex-runninghead__edition{color:#9DB6CC}
[data-surface="dark"] .hint,[data-surface="dark"] .field__hint{color:#9DB6CC}
[data-surface="dark"] .field__legend,[data-surface="dark"] .question-ref{color:#CFE6F3}
[data-surface="dark"] .error{color:#FFB4A2}

[data-surface="dark"] .ex-dimensions li{background:rgba(255,255,255,.06);border-color:rgba(157,182,204,.28)}
[data-surface="dark"] .ex-dimensions li b{color:#CFE6F3}
[data-surface="dark"] .ex-dimensions li span{color:#9DB6CC}
[data-surface="dark"] .ex-dimensions li[data-complete="true"]{background:rgba(0,168,203,.16);border-color:rgba(0,168,203,.45)}
[data-surface="dark"] .ex-dimensions li[data-current="true"]{background:var(--brand-teal);border-color:var(--brand-teal)}
[data-surface="dark"] .ex-dimensions li[data-current="true"] b,[data-surface="dark"] .ex-dimensions li[data-current="true"] span{color:var(--brand-navy-dark)}

/* Legibility on navy. Measured contrast against the sheet (#002F65):
   .lead was inheriting the light-theme muted ink at 1.31:1. */
[data-surface="dark"] .lead{color:#CFE6F3}
/* The eyebrow is a label, and every other small-caps label in the design is
   teal: the margin chapter, the fold headings, the panel titles. It was the only
   grey one, which is also why the asset class position was hard to see. */
[data-surface="dark"] .eyebrow{color:var(--brand-teal)}
[data-surface="dark"] .actions__note{color:#9DB6CC}
[data-surface="dark"] .ex-chapter{color:var(--brand-teal)}
[data-surface="dark"] .scene__title,[data-surface="dark"] .ex-margin__title{color:#fff}

/* ---------------------------------------------------------------------------
   Root cause fix. The [data-surface="dark"] block in tokens.css redefines the
   foreground tokens but leaves every background and line token light, so any
   rule using var(--bg-sunken) — notably the executive hover state — painted a
   near-white panel under white text. Redefining the surface tokens fixes every
   such rule at once, including states not individually overridden here.
   --------------------------------------------------------------------------- */
[data-surface="dark"]{
  --bg:#001E44;
  --bg-raised:#002F65;
  --bg-sunken:#0A3A72;
  --line:rgba(157,182,204,.22);
  --line-strong:rgba(157,182,204,.34);
}
[data-surface="dark"] .choice:hover,[data-surface="dark"] .scale__option:hover{background:rgba(255,255,255,.10);border-color:var(--brand-teal)}
[data-surface="dark"] .choice[data-selected="true"],[data-surface="dark"] .scale__option[data-selected="true"]{background:rgba(0,168,203,.18);border-color:var(--brand-teal);box-shadow:inset 3px 0 0 0 var(--brand-teal)}
[data-surface="dark"] .choice[data-selected="true"]:hover,[data-surface="dark"] .scale__option[data-selected="true"]:hover{background:rgba(0,168,203,.26)}
[data-surface="dark"] .choice[data-selected="true"] .choice__label,[data-surface="dark"] .scale__option[data-selected="true"] .scale__label{color:#fff}
[data-surface="dark"] .choice[data-selected="true"] .choice__marker{border-color:var(--brand-teal)}
[data-surface="dark"] .scale__option[data-selected="true"] .scale__rung[data-on="true"]{background:var(--brand-teal)}
[data-surface="dark"] .scale__option:hover .scale__rung[data-on="true"]{background:#CFE6F3}

/* The tick was invisible, not absent. Measured live: .choice__marker painted
   #002F65 and .choice__dot / .choice__check painted #002F65 too, so a selected
   option showed a highlighted row and an apparently empty box. The marker needs
   its own contrast, independent of the surface tokens. */
[data-surface="dark"] .choice__marker{background:rgba(255,255,255,.10);border-width:1.5px;border-color:rgba(157,182,204,.60)}
[data-surface="dark"] .choice__dot{background:#fff}
[data-surface="dark"] .choice__check{color:#fff}
[data-surface="dark"] .choice[data-selected="true"] .choice__marker{background:var(--brand-teal);border-color:var(--brand-teal)}
[data-surface="dark"] .choice[data-selected="true"] .choice__dot{background:#001E44}
[data-surface="dark"] .choice[data-selected="true"] .choice__check{color:#001E44}
[data-surface="dark"] .choice:hover .choice__marker{border-color:var(--brand-teal)}
[data-surface="dark"] .consent input[type=checkbox]{accent-color:var(--brand-teal);width:18px;height:18px}

/* One affordance for every selected option: a white tick on a filled box, the
   same mark and the same brand teal the consent control draws natively via
   glyph both give way to it, so nothing reads as half-selected. */
[data-surface="dark"] .choice__dot,[data-surface="dark"] .choice--check .choice__check{display:none}
[data-surface="dark"] .choice[data-selected="true"] .choice__marker{background:var(--brand-teal);border-color:var(--brand-teal)}
[data-surface="dark"] .choice[data-selected="true"] .choice__marker::after{content:"";place-self:center;width:5px;height:9px;margin-top:-2px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

/* ---------------------------------------------------------------------------
   Question guidance. Three tiers per option: the published definition, how to
   judge it, and what it looks like in practice. Each tier steps back visually
   so the option stays scannable and the help is there for whoever wants it.
   --------------------------------------------------------------------------- */
[data-surface="dark"] .choice__judge,[data-surface="dark"] .choice__example,[data-surface="dark"] .scale__example{
  display:block;margin-top:.35rem;font-size:.82rem;line-height:1.45;
}
[data-surface="dark"] .choice__judge{color:#BFD6E6}
[data-surface="dark"] .choice__example,[data-surface="dark"] .scale__example{color:#8FAAC2;font-style:italic}
[data-surface="dark"] .choice[data-selected="true"] .choice__judge{color:#E4F1F8}
[data-surface="dark"] .choice[data-selected="true"] .choice__example,
[data-surface="dark"] .scale__option[data-selected="true"] .scale__example{color:#CFE6F3}
[data-surface="dark"] .lead{max-width:62ch}

/* Glossary. A dialog rather than a page, so a part-finished response is never
   navigated away from. */
.ex-glossary-open{
  margin-left:auto;margin-right:1.25rem;padding:.4rem .85rem;border-radius:999px;
  border:1px solid rgba(157,182,204,.42);background:transparent;color:#CFE6F3;
  font:inherit;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
.ex-glossary-open:hover{border-color:var(--brand-teal);color:#fff}
.gloss{
  width:min(56rem,92vw);max-height:86vh;padding:0;border:1px solid rgba(157,182,204,.34);
  border-radius:14px;background:#002F65;color:#E9F2F8;overflow:auto;
}
.gloss::backdrop{background:rgba(0,18,40,.72)}
.gloss__inner{padding:2rem 2.4rem 2.6rem}
.gloss__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.gloss__eyebrow{margin:0;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#9DB6CC}
.gloss__close{width:2.2rem;height:2.2rem;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer}
.gloss__close:hover{background:var(--brand-teal);color:#001E44}
.gloss h2{margin:2rem 0 .6rem;font-size:1.12rem;color:#fff}
.gloss h2:first-of-type{margin-top:0}
.gloss p{margin:.5rem 0;line-height:1.6;color:#CFE6F3}
.gloss__source{font-size:.82rem;color:#9DB6CC}
.gloss__list{margin:.6rem 0 0}
.gloss__list dt{margin-top:.9rem;font-weight:700;color:#fff}
.gloss__list dd{margin:.2rem 0 0;line-height:1.6;color:#CFE6F3}
.gloss__list dd em{color:#9DE0F0;font-style:italic}
.gloss__chain{margin:.6rem 0 0;padding-left:1.1rem}
.gloss__chain li{margin:.45rem 0;line-height:1.6;color:#CFE6F3}
.gloss__chain b{color:var(--brand-teal);margin-right:.35rem}
.gloss__chain i{color:#9DB6CC}
@media (max-width:640px){.gloss__inner{padding:1.4rem 1.2rem 1.8rem}.ex-glossary-open{margin-right:.6rem}}

/* The name is set with PdM raised. The wrapper keeps its own casing, because
   several places in the design uppercase their text - the running head, the
   eyebrow, the pull-quote citation - and a brand mark should not be flattened
   to OPTIMALPDM by a styling rule. */
/* !important is deliberate. Several stylesheets uppercase their containers -
   the running head, the eyebrow, the access gate chrome - and some of those
   selectors outrank this one. A brand mark must not be flattened to OPTIMALPDM
   by whichever rule happens to win. */
.brand-name{text-transform:none !important;white-space:nowrap}
.brand-pdm{font-size:.62em;line-height:1;vertical-align:.42em;letter-spacing:.02em}

/* Welcome page. The opening screen has to establish what the assessment is, what
   it is built on and what the respondent gets, before asking for anything. */
[data-surface="dark"] .scene--welcome .lead{max-width:64ch}
.w-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.6rem 2rem;margin-top:2.2rem}
.w-panel__title{margin:0 0 .7rem;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brand-teal)}
.w-panel__list{margin:0;padding-left:1.05rem}
[data-surface="dark"] .w-panel__list li{margin:.4rem 0;line-height:1.55;font-size:.92rem;color:#CFE6F3}
.w-standards{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid rgba(157,182,204,.24)}
.w-standards__list{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.7rem}
.w-standards__list li{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:.4rem 1.2rem;align-items:baseline}
[data-surface="dark"] .w-standards__list b{color:#fff;font-size:.9rem}
[data-surface="dark"] .w-standards__list span{color:#9DB6CC;font-size:.88rem;line-height:1.5}
[data-surface="dark"] .w-standards__note{margin-top:1.1rem;font-size:.82rem;line-height:1.55;color:#8FAAC2}
@media (max-width:720px){.w-standards__list li{grid-template-columns:1fr;gap:.15rem}}

/* ---------------------------------------------------------------------------
   Responsive pass. Measured at 390, 753 and desktop widths. Nothing overflowed
   horizontally, so this is about crowding rather than breakage: the masthead
   carried four items on a phone, the standards table kept a fixed label column
   too far down, and the welcome panels stayed two-up when the column was too
   narrow to read comfortably.
   --------------------------------------------------------------------------- */
/* The stage is not the viewport. At 1024 the margin column leaves the stage only
   about 500px wide, so a 900px breakpoint never fires where it is needed. The
   two-column standards table therefore stays collapsed until the viewport is wide
   enough for the stage itself to carry it. */
@media (max-width: 1200px){
  .w-standards__list li{grid-template-columns:1fr;gap:.15rem}
}
@media (max-width: 900px){
  .w-standards{margin-top:2rem}
}
@media (max-width: 860px){
  .ex-masthead .ex-exit{display:none}
}
@media (max-width: 700px){
  .w-panels{grid-template-columns:1fr;gap:1.5rem;margin-top:1.8rem}
  .ex-glossary-open{margin-right:.5rem;padding:.34rem .72rem;font-size:.7rem;letter-spacing:.06em}
  .ex-runninghead__edition{font-size:.66rem;letter-spacing:.07em;line-height:1.35}
  [data-surface="dark"] .scene--welcome .lead{font-size:1rem;line-height:1.62}
  .w-panel__title{font-size:.72rem}
  [data-surface="dark"] .w-panel__list li{font-size:.9rem}
  [data-surface="dark"] .w-standards__list b{font-size:.86rem}
  [data-surface="dark"] .w-standards__list span{font-size:.85rem}
  .gloss{width:100%;max-width:100%;max-height:94vh;border-radius:12px}
  .gloss h2{font-size:1.02rem;margin-top:1.6rem}
  .gloss__chain{padding-left:1rem}
  [data-surface="dark"] .choice__judge,[data-surface="dark"] .choice__example,[data-surface="dark"] .scale__example{font-size:.8rem}
}
@media (max-width: 480px){
  .ex-glossary-open{padding:.3rem .6rem;font-size:.64rem}
  [data-surface="dark"] .w-panel__list li{line-height:1.5}
}

/* ---------------------------------------------------------------------------
   Wide screens. The sheet is hard-capped at 1180px in executive.css, so a large
   monitor was left with a 618px reading column and a great deal of empty navy
   either side. Prose stays at its 40rem measure, because a wider line is harder
   to read, not easier. The structured blocks - the three panels, the standards
   table and the assurance line - take the width instead, which also puts all
   three panels on one row rather than leaving a hole under the third.
   --------------------------------------------------------------------------- */
@media (min-width: 1400px){
  :root{ --shell-max: 1420px; }
  .ex-sheet{ width: min(1420px, calc(100% - var(--gutter) * 2)); }
  .ex-main{ grid-template-columns: 84px minmax(0, 820px) 300px; justify-content: center; }
  .ex-stage .scene--welcome{ max-width: none; }
  .scene--welcome .eyebrow,
  .scene--welcome .scene__display,
  .scene--welcome .lead{ max-width: 40rem; }
}
@media (min-width: 1700px){
  :root{ --shell-max: 1560px; }
  .ex-sheet{ width: min(1560px, calc(100% - var(--gutter) * 2)); }
  .ex-main{ grid-template-columns: 96px minmax(0, 880px) 320px; }
}
/* Between those widths only two panels fit, so the third spans the row rather
   than sitting beside a gap. */

/* ---------------------------------------------------------------------------
   The opening sections fold. Collapsed, the whole screen fits without scrolling,
   so the action is reachable immediately and the supporting detail is one click
   away for whoever wants it.
   --------------------------------------------------------------------------- */
.w-folds{display:flex;flex-direction:column;gap:.5rem;margin-top:1.6rem;border-top:1px solid rgba(157,182,204,.22)}
.w-fold{border-bottom:1px solid rgba(157,182,204,.22)}
.w-fold__summary{
  list-style:none;cursor:pointer;padding:.85rem .2rem;display:flex;align-items:center;gap:.6rem;
  font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brand-teal);
}
.w-fold__summary::-webkit-details-marker{display:none}
.w-fold__summary::before{
  content:"";width:.55rem;height:.55rem;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .18s ease;margin-left:.15rem;
}
.w-fold[open] > .w-fold__summary::before{transform:rotate(45deg)}
.w-fold__summary:hover{color:#fff}
.w-fold__summary:focus-visible{outline:2px solid var(--brand-teal);outline-offset:2px}
.w-fold > .w-panel__list,.w-fold > .w-standards__list{padding-bottom:1.1rem}
.w-fold > .w-standards__note{padding-bottom:1.2rem}
@media (prefers-reduced-motion: reduce){.w-fold__summary::before{transition:none}}

/* Measured at 1440x900: chrome takes 312px, and the title, the two paragraphs,
   the folds and the assurance line need about 800 more. The action cannot be
   lifted above the fold by trimming without gutting the context, so it is pinned
   to the bottom of the view instead. It still sits inline at the end of a short
   page; the gradient stops the text running under it. */
.scene--welcome .actions{
  position:sticky;bottom:0;z-index:5;margin-top:.25rem;padding:1rem 0 1.15rem;
  background:linear-gradient(to top, var(--bg-raised) 66%, rgba(0,47,101,0));
}
.scene--welcome .actions__note{margin-bottom:0}
/* Small trims so the page is short as well as reachable. */
.scene--welcome .stack--loose{gap:1.25rem}
@media (min-width: 1000px){ .scene--welcome .scene__display{font-size:2.15rem;line-height:1.14} }

/* The fold list carries a marker. These are five discrete items a reader scans,
   not a passage they read, so a list is right - but base.css strips the marker,
   which left indented sentences with no affordance and paragraph-like spacing.
   Same 4px teal square the assurance line already uses, and tighter leading. */
.w-fold > .w-panel__list{list-style:none;margin:0;padding-left:0}
.w-fold > .w-panel__list li{position:relative;padding-left:1rem;margin:.25rem 0;line-height:1.48}
.w-fold > .w-panel__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;background:var(--brand-teal);
}

/* One editorial device for every fold: a short term, then the explanation, set
   the same way as the standards table. A bulleted run of full sentences of
   uneven length reads as a utility list; term and description reads as a
   reference document, which is what this is. The term is the anchor, so the
   marker is dropped rather than competing with it. */
.w-deflist{list-style:none;margin:.35rem 0 0;padding:0;display:grid;gap:.75rem}
.w-deflist li{display:grid;grid-template-columns:minmax(9rem,13rem) 1fr;gap:.35rem 1.2rem;align-items:baseline}
[data-surface="dark"] .w-deflist b{color:#fff;font-size:.9rem;font-weight:600;letter-spacing:.01em}
[data-surface="dark"] .w-deflist span{color:#9DB6CC;font-size:.88rem;line-height:1.55}
.w-fold > .w-deflist{padding-bottom:1.3rem}
@media (max-width: 1200px){
  .w-deflist li{grid-template-columns:1fr;gap:.12rem}
  [data-surface="dark"] .w-deflist b{font-size:.86rem}
}

/* Attribution sits as a footnote rather than in the running text. */
.gloss__fn{font-size:.7em;vertical-align:.45em;color:var(--brand-teal);margin-left:.1em}
[data-surface="dark"] .gloss__footnote,.gloss__footnote{
  margin-top:1rem;padding-top:.6rem;border-top:1px solid rgba(157,182,204,.18);
  font-size:.78rem;color:#8FAAC2;
}
.gloss__footnote sup{margin-right:.3em;color:var(--brand-teal)}

/* A selection that commits the respondent to more questions says so, in a panel
   rather than in small print, and updates as the selection changes. */
/* The notice is an interruption, not a row in the list. It has to read as a
   different kind of object from a choice, so it carries a label and a full
   border rather than only a heavier tint, which a selected choice already uses. */
.field__notice{
  position:relative;
  margin-top:1.6rem;padding:1.15rem 1.3rem 1.2rem;
  border:1px solid rgba(0,168,203,.55);border-left:4px solid var(--brand-teal);
  background:rgba(0,168,203,.16);
  font-size:.92rem;line-height:1.6;
  box-shadow:0 2px 18px rgba(0,0,0,.22);
}
.field__notice::before{
  content:"Before you continue";
  display:block;margin-bottom:.5rem;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-teal);
}
[data-surface="dark"] .field__notice{color:#EAF6FB}
/* --brand-teal-light is a near-white (#E0F6FB), which flattens the label into
   body text. A true light teal keeps the accent and clears contrast at 11px. */
[data-surface="dark"] .field__notice::before{color:#5FD0E8}

/* A reference pointer inside a question. It has to read as a link rather than a
   button, because it goes to an explanation and changes nothing. */
.lead__link{
  appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;color:var(--brand-teal);
  text-decoration:underline;text-underline-offset:.18em;
  text-decoration-color:rgba(0,168,203,.55);cursor:pointer;
}
.lead__link:hover,.lead__link:focus-visible{color:#5FD0E8;text-decoration-color:#5FD0E8}
[data-surface="dark"] .lead__link{color:#5FD0E8;text-decoration-color:rgba(95,208,232,.6)}

/* The closing record. Rows, not cards: the respondent is checking a list, not
   reading a result, so the value has to be scannable down a single column. */
.summary{display:block;margin:0;border-top:1px solid rgba(157,182,204,.22)}
.summary__row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:1rem 2rem;align-items:baseline;
  padding:.95rem 0;border-bottom:1px solid rgba(157,182,204,.22);
}
.summary__label{margin:0;font-size:.92rem;line-height:1.45;color:#9DB6CC}
.summary__value{margin:0;font-size:1.05rem;line-height:1.4;font-weight:600;color:#fff}
.summary__note{display:block;margin-top:.28rem;font-size:.84rem;font-weight:400;line-height:1.5;color:#9DB6CC}
[data-surface="dark"] .summary__label{color:#9DB6CC}
[data-surface="dark"] .summary__value{color:#fff}

/* Stacked below the reading measure, where two columns would leave the value
   orphaned from the label it belongs to. */
@media (max-width:640px){
  .summary__row{grid-template-columns:minmax(0,1fr);gap:.3rem;padding:.85rem 0}
  .summary__label{font-size:.86rem}
  .summary__value{font-size:1rem}
}

/* Free-text capture. A note is offered once per section rather than once per
   question: seventy boxes would add length without adding readable material. */
.note-field__input{width:100%;min-height:9rem;resize:vertical}
.note-field__caution{margin-top:.6rem}
.note-inline{
  margin-top:1.1rem;padding:1rem 1.15rem;
  border-left:3px solid rgba(0,168,203,.55);background:rgba(255,255,255,.04);
}
.note-inline label{display:block;margin-bottom:.45rem;font-size:.86rem;font-weight:600;color:#CFE6F3}
.note-inline textarea{width:100%;resize:vertical}
.note-inline .hint{margin-top:.45rem;font-size:.8rem}

/* Facilitated capture has to be visible for the whole session. A note taken by
   a facilitator and reported as the client's own words is a provenance problem,
   not a cosmetic one. */
.capture-badge{
  display:inline-block;margin-left:.9rem;padding:.28rem .6rem;
  border:1px solid rgba(0,168,203,.55);border-radius:2px;
  background:rgba(0,168,203,.14);
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#5FD0E8;vertical-align:middle;
}
@media (max-width:640px){
  .capture-badge{display:block;margin:.5rem 0 0}
}