/* The participant flow and the admin form browser (B3). Loaded after the
   shell's inline styles (main.py PAGE), which set the dark surface, the
   system font, and the link color; this file only adds the flow's pieces.
   Controls and choice rows are at least 44px tall (NN/g touch targets, 1cm
   by 1cm); everything is one column. */

/* The forms' themes as custom properties (round 6, 2026-10-14; themes.py
   is the source: Typeform's four colors per theme and the derived roles,
   these two blocks generated from it and kept equal by a test). The
   defaults are PJRFTh "MPF Module Theme" (the styling step's values,
   measured on the live Typeform page 2026-10-13): Open Sans; the #262626
   surface; question text gold, answer text white, buttons blue with white
   text and an 8px radius. The body class names the other theme (6lPNE6
   "Plain Blue" on the ten Time Management forms: Karla on white, teal
   answers and buttons). Welcome, statement, and ending screens centered,
   question screens left (both themes' screens and fields alignments). The
   theme applies to the flow pages alone: this file loads only there. */
body { --font: "Open Sans", system-ui, sans-serif; --display-font: var(--font); --bg: #262626; --question: #ffc300; --answer: #ffffff; --description: #ffffff; --muted: #999999; --button: #0080ff; --button-text: #ffffff; --button-hover: #1a8dff; --button-disabled: #3a4a58; --button-disabled-text: #99aabb; --surface: #181818; --border: #444444; --border-strong: #555555; --focus-ring: rgba(255, 255, 255, 0.35); --checked-bg: #ffffff; --checked-text: #262626; --checked-row: #12212e; --key-border: #3a5a75; --error-border: #aa5555; --track: #2a2a2a; --error: #ff9999; --error-mark-text: #111111; --back-border: #666666; --back-disabled: #666666; }
body.theme-plain-blue { --font: Karla, system-ui, sans-serif; --display-font: var(--font); --bg: #ffffff; --question: #3d3d3d; --answer: #4fb0ae; --description: #3d3d3d; --muted: #777777; --button: #4fb0ae; --button-text: #ffffff; --button-hover: #3f9d9b; --button-disabled: #c9dedd; --button-disabled-text: #7a8b8a; --surface: #f3f9f9; --border: #cfe3e2; --border-strong: #b8d6d4; --focus-ring: rgba(79, 176, 174, 0.35); --checked-bg: #4fb0ae; --checked-text: #ffffff; --checked-row: #e4f3f2; --key-border: #b8d6d4; --error-border: #e0a9a3; --track: #e4efee; --error: #c0392b; --error-mark-text: #ffffff; --back-border: #9fc9c7; --back-disabled: #b8c4c3; }
body.theme-library { --font: Figtree, system-ui, sans-serif; --display-font: Literata, Georgia, serif; --bg: #f3f7f8; --question: #14282e; --answer: #14282e; --description: #14282e; --muted: #536a71; --button: #0f6f80; --button-text: #ffffff; --button-hover: #0a5361; --button-disabled: #c9d9dc; --button-disabled-text: #7a8b8a; --surface: #ffffff; --border: #d3dfe2; --border-strong: #b9cacd; --focus-ring: rgba(15, 111, 128, 0.35); --checked-bg: #0f6f80; --checked-text: #ffffff; --checked-row: #dcedf0; --key-border: #b9cacd; --error-border: #e0a9a3; --track: #e7eff1; --error: #c0392b; --error-mark-text: #ffffff; --back-border: #9fc1c7; --back-disabled: #b8c4c3; }
@media (prefers-color-scheme: dark) { body.theme-library:not(.scheme-light) { --font: Figtree, system-ui, sans-serif; --display-font: Literata, Georgia, serif; --bg: #0d1a1e; --question: #e6f0f2; --answer: #e6f0f2; --description: #e6f0f2; --muted: #9db3b9; --button: #5cc3d3; --button-text: #062a31; --button-hover: #8ad8e4; --button-disabled: #2a4248; --button-disabled-text: #7f969b; --surface: #142529; --border: #2a4248; --border-strong: #3a565d; --focus-ring: rgba(92, 195, 211, 0.35); --checked-bg: #5cc3d3; --checked-text: #062a31; --checked-row: #1d3b42; --key-border: #3a565d; --error-border: #aa5555; --track: #1b3136; --error: #ff9999; --error-mark-text: #111111; --back-border: #3a565d; --back-disabled: #2a4248; } }
body.theme-library.scheme-dark { --font: Figtree, system-ui, sans-serif; --display-font: Literata, Georgia, serif; --bg: #0d1a1e; --question: #e6f0f2; --answer: #e6f0f2; --description: #e6f0f2; --muted: #9db3b9; --button: #5cc3d3; --button-text: #062a31; --button-hover: #8ad8e4; --button-disabled: #2a4248; --button-disabled-text: #7f969b; --surface: #142529; --border: #2a4248; --border-strong: #3a565d; --focus-ring: rgba(92, 195, 211, 0.35); --checked-bg: #5cc3d3; --checked-text: #062a31; --checked-row: #1d3b42; --key-border: #3a565d; --error-border: #aa5555; --track: #1b3136; --error: #ff9999; --error-mark-text: #111111; --back-border: #3a565d; --back-disabled: #2a4248; }
/* By class, not bare `body`: the page template's inline block styles the
   admin pages' body after this file and would win on source order. */
body.theme-mpf, body.theme-plain-blue, body.theme-library { font-family: var(--font); background: var(--bg); color: var(--answer); }
.flow-head { padding: 0.8em 0 0.4em; }
/* Preview only: the visible way back to the surface the preview was
   opened from (the player pages' "all videos" link); never on /w/. */
.return { margin: 0.8em 0 0; font-size: 0.9em; }
.return a { color: #8cf; text-decoration: none; }
.return a:hover, .return a:focus-visible { text-decoration: underline; }
.flow-title { color: var(--muted); font-size: 0.9em; margin: 0 0 0.4em; }
.progress { display: flex; align-items: center; gap: 0.8em; }
.progress .bar { flex: 1 1 auto; height: 6px; background: var(--track); border-radius: 3px; overflow: hidden; }
.progress .bar i { display: block; height: 100%; background: var(--answer); width: 0; transition: width 0.3s ease; }

.banner { background: #2b2410; border: 1px solid #806a1f; color: #f2d98a; border-radius: 6px; padding: 0.5em 0.8em; margin: 0.6em 0; }
.banner.preview { background: #12212e; border-color: #2f5c85; color: #cfe8ff; }
/* The preview's real test submit: set apart from the participant's screen
   in the banner's amber, the button held until the confirmation is ticked. */
.test-submit { margin: 1.6em auto 0; max-width: 40em; padding: 0.9em 1.1em; background: #2b2410; border: 1px solid #806a1f; border-radius: 6px; color: #f2d98a; }
.test-submit h2 { font-size: 1.05em; margin: 0 0 0.5em; }
.test-submit .note { color: #e6d3a3; }
.test-submit .confirm { display: flex; gap: 0.6em; align-items: flex-start; margin: 0.8em 0; cursor: pointer; }
.test-submit .confirm input { margin-top: 0.3em; width: 1.1em; height: 1.1em; }
.test-submit .form-actions { margin: 0; }
.test-submit button.real { background: #d9a441; color: #111; }
.test-submit button.real[disabled] { opacity: 0.5; cursor: default; }

/* width: 100% because the shell is a flex column (above): an item with auto
   side margins would otherwise shrink to its content. */
.screen { max-width: 46em; width: 100%; box-sizing: border-box; margin: 1.2em auto 2em; font-size: 1.1em; }
.screen.kind-statement, .screen.welcome, .screen.ending { max-width: 60em; }
/* The short screens (welcome, statement, ending) sit in the middle of the
   viewport as Typeform's blocks do (operator, 2026-10-19); question screens
   stay at the top, where a tall step (a video, a labeled scale) reads from
   its first line. The shell fills the viewport (the template's body padding
   is 1.2em at the foot) and the short screen's auto margins center it. */
body.theme-mpf .shell, body.theme-plain-blue .shell, body.theme-library .shell { display: flex; flex-direction: column; min-height: calc(100dvh - 1.2em); }
/* A statement with a player stays at the top (operator, 2026-10-19, after
   measuring the row's travel): the player is taller than the floor, so a
   centered one put the row 218px below the questions' at a 960x1025 window. */
.screen.kind-statement:not(:has(.video)), .screen.welcome, .screen.ending { margin: auto; padding: 1.2em 0 2em; }
.group-header { color: var(--question); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.6em; }
.question { display: flex; flex-direction: column; gap: 0.7em; }
.qnum { display: block; color: var(--answer); font-size: 0.75em; font-weight: 600; }
h1.qtitle { font-size: 1.35em; font-weight: 400; line-height: 1.35; margin: 0; color: var(--question); }
/* The welcome and ending titles as the live page sets them: 26px over 34px,
   weight 400, centered with the rest of the screen. */
.screen.welcome h1.qtitle, .screen.ending h1.qtitle { font-size: 26px; line-height: 34px; }
.screen.welcome, .screen.ending, .screen.kind-statement { text-align: center; }
.screen.welcome .form-actions, .screen.ending .form-actions, .screen.kind-statement .form-actions { justify-content: center; }
.qdesc { color: var(--description); margin: 0; line-height: 1.5; }
.req { color: var(--error); font-weight: 700; margin-left: 0.15em; }
.opt { color: var(--muted); font-size: 0.8em; font-weight: 400; margin-left: 0.3em; }
.hint { color: var(--muted); font-size: 0.85em; }
.video { margin: 0.4em 0; }
/* The welcome's picture above the title (round 1b, 2026-10-10), as Typeform's
   stack layout places it: centered, never wider than the column, its own
   height (the markup carries the measured dimensions). */
/* The welcome picture scales to the window (2026-10-23, after the operator saw Typeform's landing statement keep its title, picture, and button in view
   at a quarter-screen window): never more than 40 percent of the viewport's height, the ratio kept (width and height auto against both maxima),
   never cropped (the logo is used whole; contain, not cover). The dvh line is the mobile-aware unit; the vh line before it is the fallback. */
.welcome-image { display: block; width: auto; height: auto; max-width: min(720px, 100%); max-height: min(432px, 40vh); max-height: min(432px, 40dvh); object-fit: contain; margin: 1em auto; }
.welcome-image-note { margin: 0 0 1em; }
/* The participant video page (2026-10-23): a step's title above its video when a form has several. */
.video-page .video-title { font-size: 1.05em; font-weight: 600; margin: 1.2em 0 0; }
/* The video page's masthead is the catalog's (operator, 2026-10-23): the logo on its white plate at the left,
   the module's title beside it in the theme's display face and the description color (white on the dark schemes;
   with no questions on the page the gold question color beside the white prompt looked wrong). The row stays at
   the top while a multi-video page scrolls. */
.video-masthead { position: sticky; top: 0; z-index: 2; background: var(--bg); max-width: 60em; margin: 0 auto; padding: 0.8em 0.5em 0.6em; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.video-masthead img { display: block; width: 166px; height: auto; background: #ffffff; padding: 8px 10px; border-radius: 6px; }
.video-masthead h1 { flex: 1 1 320px; min-width: 0; margin: 0; font-family: var(--display-font); font-size: 1.5em; font-weight: 400; line-height: 1.2; color: var(--description); }
body.theme-library .video-masthead h1 { font-weight: 600; }  /* the catalog's heading weight */
/* Stacked (the title no longer fits beside the logo, as on a phone; operator, 2026-10-23): the header dissolves
   into the shell's column, the logo becomes a centered block that scrolls off on its own, and the title alone
   is sticky, centered on the theme's ground. Wide, the whole row above stays sticky with the logo in it. */
@media (max-width: 540px) {
  .video-masthead { display: contents; }
  .video-masthead img { align-self: center; margin: 1em auto 0; }
  /* flex: auto, not the row's 320px basis, which in the column would be the title's height. */
  .video-masthead h1 { flex: 0 0 auto; position: sticky; top: 0; z-index: 2; background: var(--bg); align-self: stretch; text-align: center; padding: 0.5em 0.5em; font-size: 1.2em; }
}
.video-page .video-title { color: var(--description); }
.video-note { color: var(--muted); margin: 0; }
/* A missing local rendition's stand-in: the thumbnail at the video's own
   aspect ratio, sized like the player. */
.video-placeholder { display: block; width: 100%; object-fit: cover; background: #000; border-radius: 4px; margin-bottom: 0.5em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The inline password prompt (operator, 2026-10-09): in the player's slot on
   a video screen, in the controls' place elsewhere, and the whole of the
   full-page gate. A dark well like a player's, so the eye lands where the
   video will be; the label is visible (NN/g: a placeholder is not a label);
   the button is the form's only submit, so Enter means unlock. The well
   stays a player's black box on both themes (round 6: it stands where the
   video will play); its button is the theme's. */
.unlock { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6em; text-align: center;
          background: #000; border: 1px solid #333; border-radius: 4px; padding: 2.2em 1.5em; box-sizing: border-box; }
/* In the player's slot the prompt is the player's box: the rendition's
   aspect ratio (inline, from the step), full width, so the swap to the
   player moves nothing (operator, 2026-10-09). */
.video .unlock { width: 100%; max-width: 60em; margin: 0 auto; }
.form-actions .unlock-button { background: var(--button); color: var(--button-text); border: 1px solid var(--button); font-weight: 600; }
.form-actions .unlock-button:hover { background: var(--button-hover); }
.unlock-button[disabled] { opacity: 0.6; cursor: default; }
.unlock-title { font-size: 1.25em; font-weight: 650; color: #fff; margin: 0; }
.unlock-text { color: #ccc; margin: 0; max-width: 32em; line-height: 1.5; }
.unlock .error { justify-content: center; }
.unlock-label { color: #ddd; font-weight: 600; margin-top: 0.6em; }
.unlock-input { font: inherit; font-size: 1em; color: #eee; background: #181818; border: 1px solid #555; border-radius: 6px;
                padding: 0.55em 0.8em; width: 100%; max-width: 20em; box-sizing: border-box; }
.unlock-input:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.unlock .form-actions { margin-top: 0.4em; justify-content: center; }
.gate-page { max-width: 36em; margin-top: 3em; }

.control { display: flex; flex-direction: column; gap: 0.5em; }
.control .text { font: inherit; font-size: 1em; color: var(--answer); background: var(--surface); border: 1px solid var(--border-strong);
                 border-radius: 6px; padding: 0.6em 0.8em; min-height: 44px; width: 100%; box-sizing: border-box; }
.control .text:focus { outline: none; border-color: var(--answer); box-shadow: 0 0 0 2px var(--focus-ring); }
.control textarea.long { min-height: 8em; resize: vertical; }
.control .number { max-width: 12em; }
.has-error .text { border-color: var(--error); }

.choices { display: flex; flex-direction: column; gap: 0.5em; }
.choice { display: flex; align-items: center; gap: 0.7em; min-height: 44px; padding: 0.45em 0.8em;
          background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; line-height: 1.35; }
.choice:hover { border-color: var(--answer); }
.choice:focus-within { border-color: var(--answer); box-shadow: 0 0 0 2px var(--focus-ring); }
.choice input { width: 1.2em; height: 1.2em; margin: 0; flex: 0 0 auto; accent-color: var(--answer); }
.choice .key { flex: 0 0 auto; min-width: 1.6em; text-align: center; font-size: 0.75em; color: var(--answer);
               border: 1px solid var(--key-border); border-radius: 3px; padding: 0.05em 0.2em; }
.choice .label { flex: 1 1 auto; }
.choice.other { flex-wrap: wrap; }
.choice.other .other-text { flex: 1 1 12em; min-height: 36px; padding: 0.35em 0.6em; }
.has-error .choice { border-color: var(--error-border); }

/* Scales: one markup, three layouts chosen by the scale's own width
   (operator, 2026-09-08). The base rules are the middle case, a row of
   numbered buttons with the anchors listed beneath, which is also what a
   browser without container queries shows. Wide: each anchor's text sits
   under its own button and the legend hides. Narrow: a vertical list of
   full-width buttons carrying number and text, the readable orientation
   when five or more 44px targets no longer fit across. Breakpoints differ
   by step count: the wide case for 10 and 11 steps needs about 80em and in
   practice never triggers. Em here is the scale's own font size. */
.scale { container-type: inline-size; }
.scale .steps { display: flex; gap: 0.4em; }
.scale .step { flex: 1 1 0; min-width: 44px; display: flex; flex-direction: column; align-items: stretch; gap: 0.35em;
               position: relative; cursor: pointer; }
.scale .step input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.scale .step-n { display: flex; align-items: center; justify-content: center; min-height: 48px;
                 background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-weight: 600; }
.scale .step:hover .step-n, .scale .step:focus-within .step-n { border-color: var(--answer); }
.scale .step:has(input:checked) .step-n { background: var(--checked-bg); color: var(--checked-text); border-color: var(--checked-bg); font-weight: 650; }
.scale .step-text { display: none; }
.scale .anchors { list-style: none; padding: 0; margin: 0.5em 0 0; color: var(--question); font-size: 0.9em;
                  display: flex; flex-direction: column; gap: 0.2em; }
.scale .anchor-n { color: var(--question); }
.scale .anchor-n::after { content: " \2192"; }
.scale .step.star .step-n { font-size: 0; }
.scale .step.star .step-n::before { content: "\2605"; font-size: 1.5rem; color: #666; }
.scale .step.star:has(input:checked) .step-n { background: var(--surface); border-color: #f5c542; }
.scale .step.star:has(input:checked) .step-n::before, .scale .step.star.lit .step-n::before { color: #f5c542; }
/* Wide: text under its own button. */
@container (min-width: 40em) {
  .scale:is(.steps-5, .steps-6, .steps-7) .step-text { display: block; text-align: center; color: var(--question); font-size: 0.85em; line-height: 1.3; }
  .scale:is(.steps-5, .steps-6, .steps-7) .anchors { display: none; }
}
@container (min-width: 80em) {
  .scale:is(.steps-10, .steps-11) .step-text { display: block; text-align: center; color: var(--question); font-size: 0.85em; line-height: 1.3; }
  .scale:is(.steps-10, .steps-11) .anchors { display: none; }
}
/* Narrow: a vertical list. */
@container (max-width: 16.99em) {
  .scale:is(.steps-5, .steps-6, .steps-7) .steps { flex-direction: column; gap: 0.5em; }
  .scale:is(.steps-5, .steps-6, .steps-7) .step { flex-direction: row; align-items: center; gap: 0.6em; min-height: 44px;
                                                   padding: 0.45em 0.8em; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
  .scale:is(.steps-5, .steps-6, .steps-7) .step:hover, .scale:is(.steps-5, .steps-6, .steps-7) .step:focus-within { border-color: var(--answer); }
  .scale:is(.steps-5, .steps-6, .steps-7) .step:has(input:checked) { background: var(--checked-row); border-color: var(--answer); }
  .scale:is(.steps-5, .steps-6, .steps-7) .step-n { min-height: 0; background: none; border: none; min-width: 1.6em;
                                                     justify-content: flex-start; color: var(--answer); }
  .scale:is(.steps-5, .steps-6, .steps-7) .step:has(input:checked) .step-n { background: none; color: var(--answer); }
  .scale:is(.steps-5, .steps-6, .steps-7) .step-text { display: inline; color: var(--question); font-size: 1em; }
  .scale:is(.steps-5, .steps-6, .steps-7) .anchors { display: none; }
  .scale .step.star .step-n { min-height: 48px; background: var(--surface); border: 1px solid var(--border); justify-content: center; }
}
@container (max-width: 35.99em) {
  .scale:is(.steps-10, .steps-11) .steps { flex-direction: column; gap: 0.5em; }
  .scale:is(.steps-10, .steps-11) .step { flex-direction: row; align-items: center; gap: 0.6em; min-height: 44px;
                                          padding: 0.45em 0.8em; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
  .scale:is(.steps-10, .steps-11) .step:hover, .scale:is(.steps-10, .steps-11) .step:focus-within { border-color: var(--answer); }
  .scale:is(.steps-10, .steps-11) .step:has(input:checked) { background: var(--checked-row); border-color: var(--answer); }
  .scale:is(.steps-10, .steps-11) .step-n { min-height: 0; background: none; border: none; min-width: 1.6em;
                                            justify-content: flex-start; color: var(--answer); }
  .scale:is(.steps-10, .steps-11) .step:has(input:checked) .step-n { background: none; color: var(--answer); }
  .scale:is(.steps-10, .steps-11) .step-text { display: inline; color: var(--question); font-size: 1em; }
  .scale:is(.steps-10, .steps-11) .anchors { display: none; }
}

.subquestion { display: flex; flex-direction: column; gap: 0.4em; margin-top: 0.4em; }
.sublabel { font-weight: 600; color: var(--description); }

.error { color: var(--error); margin: 0; display: flex; align-items: center; gap: 0.5em; }
.error-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em;
              border-radius: 50%; background: var(--error); color: var(--error-mark-text); font-weight: 700; font-size: 0.85em; flex: 0 0 auto; }

/* The form actions: Back and OK or Submit. OK comes first in the markup
   (the form's default button, so Enter never means Back) and Back first
   visually. */
.form-actions { display: flex; align-items: center; gap: 0.8em; margin-top: 1.4em; flex-wrap: wrap; }
.form-actions button, .form-actions .link { font: inherit; font-size: 1em; min-height: 44px; padding: 0.5em 1.4em; border-radius: 8px;
                                            cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
/* The theme's button with its text color, weight 600 (the live page's
   14px at its x-small screens; 1em here keeps the 44px touch target). */
.form-actions .next, .form-actions .submit, .form-actions .link { background: var(--button); color: var(--button-text); border: 1px solid var(--button); font-weight: 600; }
.form-actions .next:hover, .form-actions .submit:hover, .form-actions .link:hover { background: var(--button-hover); }
.form-actions .next[disabled], .form-actions .submit[disabled] { background: var(--button-disabled); border-color: var(--button-disabled); color: var(--button-disabled-text); cursor: default; }
.form-actions .back { order: -1; background: transparent; color: var(--answer); border: 1px solid var(--back-border); }
.form-actions .back:hover { border-color: var(--button); color: var(--button); }
.form-actions .back[disabled] { color: var(--back-disabled); border-color: var(--border); cursor: default; }

/* The content well's floor (operator, 2026-09-08): at desktop widths a
   screen's content block has a minimum height, so the form actions land
   at the same place from step to step; content taller than the floor (a
   long choice list) pushes them down for that screen only. Statement
   screens (the video) keep their own height, endings have no actions, and
   narrow widths have no floor: the actions follow the content. */
@media (min-width: 52em) {
  .screen:not(.kind-statement):not(.ending) .question { min-height: 26em; }
  /* A group's intro screen (its title and description, before its
     questions) is the content, not a heading over content: centered in
     the floor's height, the row where every question's is; the submit
     screen ("Ready to submit?") the same way (operator, 2026-10-19). The group header above a grouped question lives inside
     the block since the same day, so the floor counts it. */
  .screen.kind-group .question, .screen.submit .question { justify-content: center; }
}

/* The preview panel: collapsible, remembered per tab (preview.js). */
.panel { max-width: 60em; margin: 1em auto 3em; background: #161616; border: 1px solid #333; border-radius: 6px; font-size: 0.9em; }
.panel summary { cursor: pointer; padding: 0.6em 0.9em; color: #8cf; font-weight: 650; }
.panel section { padding: 0.4em 0.9em 0.6em; border-top: 1px solid #262626; }
.panel h3 { margin: 0.2em 0 0.4em; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; color: #999; }
.panel ul, .panel ol { margin: 0.2em 0; padding-left: 1.4em; line-height: 1.5; }
.panel code { background: #222; padding: 0 0.3em; border-radius: 3px; word-break: break-all; }
.panel-json { background: #111; border: 1px solid #2a2a2a; border-radius: 4px; padding: 0.6em; overflow-x: auto; max-height: 24em; }
.panel-title { color: #ccc; }
.panel-jump select { font: inherit; background: #181818; color: #ddd; border: 1px solid #555; border-radius: 4px; padding: 0.3em; max-width: 100%; }
.panel-jump button { font: inherit; background: #8cf; color: #111; border: none; border-radius: 4px; padding: 0.35em 0.9em; cursor: pointer; }

/* The form browser. The whole card opens the preview: the title is the
   link and its stretched pseudo-element covers the card; the badges sit
   above that layer so they stay their own targets (toggletips). Tabled
   rows have no link and render muted, like the browse page's unavailable
   cards. */
.form-list { list-style: none; padding: 0; margin: 0.6em 0; display: flex; flex-direction: column; gap: 0.5em; }
.form-row { position: relative; background: #1a1a1a; border: 1px solid #333; border-radius: 6px; padding: 0.6em 0.8em;
            display: flex; flex-direction: row; align-items: flex-start; gap: 0.8em; }
.form-body { display: flex; flex-direction: column; gap: 0.3em; flex: 1 1 auto; min-width: 0; }
/* The form's picture, a landmark per row (operator, 2026-09-12); the empty
   slot keeps titles aligned on the nine forms without a video. */
.form-thumb { flex: 0 0 auto; display: block; width: 96px; height: 54px; object-fit: cover; border-radius: 4px; background: #000; }
@media (max-width: 640px) { .form-thumb { width: 64px; height: 36px; } }
.form-row.served:hover, .form-row.served:focus-within { border-color: #8cf; }
.form-row.tabled { opacity: 0.7; }
/* A row showing a tip rises above its siblings (forms.js sets tip-up), so
   the box paints over the rows below instead of under their badges. */
.form-row.tip-up { z-index: 5; }
.form-main { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; }
.form-title { font-weight: 600; }
a.form-title { color: #8cf; text-decoration: none; }
/* No hover underline (operator, 2026-09-12): the bold link-colored title
   and the row's hover outline already say the card is the target. Keyboard
   focus keeps its underline. */
a.form-title:focus-visible { text-decoration: underline; }
a.form-title.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.form-id { color: #999; font-size: 0.85em; }
.form-facts { font-size: 0.85em; display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.form-facts .series { color: #bbb; }
.tipwrap { position: relative; display: inline-block; z-index: 2; }
/* An author display rule outranks the browser's default styling of the
   hidden attribute; say it explicitly (the link marks are hidden until a
   pasted test link binds a token to the card, 2026-09-12). */
.tipwrap[hidden] { display: none; }
.badge.tip { font: inherit; font-size: 0.85em; cursor: pointer; background: transparent; border: 1px solid #555; color: #bbb;
             border-radius: 3px; padding: 0.1em 0.45em; min-height: 28px; }
.badge.tip:hover, .badge.tip:focus-visible { border-color: #8cf; color: #ddd; }
.badge.tip.tabled { border-color: #999; color: #999; }
.badge.tip.warn { border-color: #d9a441; color: #f5c542; }
.badge.tip.typeform.active { border-color: #6c6; color: #6c6; }
.badge.tip.typeform.closed { border-color: #777; color: #aaa; }
.badge.tip.state.open-state { border-color: #6c6; color: #6c6; }
.badge.tip.state.closed-state { border-color: #777; color: #aaa; }
.badge.tip.state.handoff { border-color: #f5c542; color: #f5c542; }
.tipbox { display: none; position: absolute; top: 100%; left: 0; margin-top: 0.35em; z-index: 6; width: max-content; max-width: 24em;
          background: #232323; border: 1px solid #555; border-radius: 6px; padding: 0.5em 0.75em; color: #ddd;
          font-size: 0.85em; line-height: 1.45; text-align: left; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
.tipwrap.open .tipbox, .tipwrap.hover:not(.dismissed) .tipbox, .tipwrap:has(> .badge.tip:focus-visible) .tipbox { display: block; }
/* The shown wrap rises above its sibling badges (all wraps sit at 2), and
   its row above the rows below (.form-row.tip-up), so nothing paints over the box. */
.tipwrap.open, .tipwrap.hover:not(.dismissed), .tipwrap:has(> .badge.tip:focus-visible) { z-index: 7; }
/* The gap between badge and box belongs to the box, so a mouse moving down
   to read never leaves the wrap. */
.tipbox::before { content: ""; position: absolute; left: 0; right: 0; top: -0.4em; height: 0.4em; }
@media (max-width: 640px) { .tipbox { max-width: 80vw; } }
/* The second strip (states) sits under the series strip; both keep the
   shell's fixed pill height, so the header height is fixed at any width. */
.filters-states { margin-top: 0; padding-top: 0; }
/* The test-hubtoken pill at the strip's end: the search pill's metrics, a
   fixed width (no growth on focus, so the states strip never moves), an
   amber border while it holds a value. */
.qwrap.tokenwrap, .qwrap.tokenwrap:focus-within { flex: 0 0 14em; max-width: 100%; }
#hubtoken { font: inherit; font-size: 0.9em; height: 2.1em; padding: 0 2em 0 0.8em; background: #1a1a1a; color: #ddd; border: 1px solid #444; border-radius: 999px; width: 100%; }
#hubtoken:focus { outline: none; border-color: #8cf; }
.tokenwrap.has-value #hubtoken { border-color: #d9a441; }
#hubtokenclear { position: absolute; right: 0.35em; top: 50%; transform: translateY(-50%); display: none; background: none; border: none; color: #999;
                 font-size: 1em; line-height: 1; padding: 0.25em 0.4em; cursor: pointer; }
#hubtokenclear:hover { color: #8cf; }
.tokenwrap.has-value #hubtokenclear { display: block; }
/* The Test links panel (HUB's per-form tokens) and the mark on a linked card. */
.test-links { margin: 0.6em 0 0.8em; padding: 0.5em 0.9em 0.7em; background: #1a1a1a; border: 1px solid #333; border-radius: 6px; }
.test-links summary { cursor: pointer; color: #8cf; font-weight: 600; }
.test-links summary .note { font-weight: 400; }
#testlinks { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 0.9em; background: #111; color: #ddd; border: 1px solid #444; border-radius: 4px; padding: 0.4em 0.6em; resize: vertical; }
#testlinks:focus { outline: none; border-color: #8cf; }
.testlinks-actions { margin: 0.5em 0; }
.testlinks-actions button { font: inherit; font-size: 0.9em; background: #181818; color: #ddd; border: 1px solid #555; border-radius: 999px; padding: 0.3em 0.9em; cursor: pointer; }
.testlinks-actions button:hover { border-color: #8cf; color: #8cf; }
.recognized { margin: 0.3em 0 0.4em; padding-left: 1.4em; line-height: 1.7; }
.recognized-link { color: #8cf; text-decoration: underline; text-decoration-color: #d9a441; text-underline-offset: 0.15em; }
.recognized-link:hover { color: #fff; }
.recognized code { color: #f5c542; }
.problems { margin: 0.3em 0 0; padding-left: 1.4em; color: #f5c542; }
.badge.tip.test-link { border-color: #d9a441; color: #f5c542; }
/* The copy-link badge (2026-09-14): dashed until copied, green for a moment
   after, amber when the clipboard refused. */
.badge.tip.copy-link { border-style: dashed; }
.badge.tip.copy-link.copied { border-style: solid; border-color: #6c6; color: #6c6; }
.badge.tip.copy-link.failed { border-style: solid; border-color: #d9a441; color: #f5c542; }
.form-row.linked { border-color: #806a1f; }
/* The submissions link (B5): navigation on a text label styled as an
   obvious link, never a mark (the archive rounds' ruling), on every served
   card; forms.js appends the count. It sits above the stretched title
   link's layer so it stays its own target. */
.form-history { position: relative; z-index: 2; color: #8cf; text-decoration: underline; text-underline-offset: 0.15em; white-space: nowrap; }
.form-history:hover, .form-history:focus-visible { color: #fff; }
/* The history page: one collapsible panel per submission, the newest open;
   the outcome's result is a colored word, never a category of its own. */
.hist-title { margin: 0.6em 0 0.2em; font-size: 1.15em; }
.hist-title .form-id { font-size: 0.8em; }
.panel.hist { max-width: none; margin: 0.8em 0; }
.panel.hist summary code { font-size: 0.9em; }
.hist-root { color: #999; }
.hist-received { color: #6c6; font-weight: 600; }
.hist-skipped { color: #aaa; }
.hist-failed, .hist-mismatch { color: #f77; font-weight: 600; }
.hist-none { color: #999; }
.hist-match { color: #6c6; }
.panel.hist table.facts td, .panel.hist table.facts th { padding: 0.3em 0.5em; }
.panel.hist table.hist-answers td:nth-child(2) { min-width: 14em; }
.panel.hist table.hist-answers td:nth-child(3) { white-space: pre-wrap; min-width: 10em; }

@media (max-width: 640px) {
  .screen { font-size: 1.05em; margin-top: 0.8em; }
  .scale .steps { flex-wrap: wrap; }
  .scale .step { flex: 1 1 18%; }
  /* Phones (operator, 2026-10-19): the title and progress at the top, the
     row at the foot of the viewport, the content centered between them;
     content taller than the viewport starts under the header and pushes
     the row down with it. In flow, never fixed: nothing covers an input,
     and when the keyboard opens the dvh-sized shell shrinks and the
     content re-centers. Mechanics: the screen fills the shell as a flex
     column, and two auto top margins, the first content child's and the
     row's, split the free space, which centers the content above the row.
     body[class] outranks the wide-screen centering rules above. The
     primary button spans the row; Back keeps its word, compact. */
  body[class] .screen, body[class] .screen.welcome, body[class] .screen.ending, body[class] .screen.kind-statement { flex: 1 1 auto; display: flex; flex-direction: column; margin: 0 auto; padding: 0.8em 0 1em; }
  .screen > input:last-of-type + *, .screen.ending > .question { margin-top: auto; }
  .screen > .form-actions { margin-top: auto; padding-top: 1.4em; }
  .screen > .form-actions .next, .screen > .form-actions .submit, .screen > .form-actions .link { flex: 1 1 auto; justify-content: center; }
  .screen > .form-actions .back { flex: 0 0 auto; }
}

/* Form Analytics. Tiles and charts on the shell's surface; the two charts
   are single-hue bars (static/form-analytics.js), each with a table view
   beside it; ranked lists link to previews. */
.sub { color: #bbb; }
.tiles { display: grid; gap: 0.8em; grid-template-columns: repeat(auto-fill, minmax(13em, 1fr)); margin: 1em 0 1.4em; }
.tile { background: #1a1a1a; border: 1px solid #333; border-radius: 6px; padding: 0.7em 0.9em; }
.tile b { display: block; font-size: 1.5em; font-weight: 650; color: #eee; }
.tile .k { color: #aaa; font-size: 0.85em; line-height: 1.35; display: block; margin-top: 0.15em; }
.panel-chart { background: #1a1a1a; border: 1px solid #333; border-radius: 6px; padding: 0.8em 1em; margin: 0 0 1.2em; }
.panel-chart h2, .fa-section > h2 { font-size: 1.05em; font-weight: 600; color: #eee; margin: 0.2em 0 0.6em; }
.chart { width: 100%; height: 20em; }
#chart-series { height: 22em; }
.tableview { margin-top: 0.4em; }
.tableview summary { cursor: pointer; color: #8cf; font-size: 0.9em; }
.ranked { margin: 0; padding-left: 1.6em; line-height: 1.5; }
.ranked li { display: flex; flex-wrap: wrap; gap: 0.2em 0.8em; align-items: center; padding: 0.15em 0; }
/* Pictures on the analytics rows: linked where the title is, never a
   second tab stop for the same target. */
.thumb { display: block; object-fit: cover; border-radius: 3px; background: #000; }
.thumb.empty { display: inline-block; }
.thumb-link { display: inline-block; line-height: 0; flex: 0 0 auto; }
table.facts td.thumb-col, table.facts th.thumb-col { width: 64px; padding-right: 0; }
.ranked .rank-title { flex: 1 1 14em; }
.ranked .rank-detail { flex: 0 0 auto; white-space: nowrap; }
/* Wide tables scroll inside their own box: the page must never scroll
   sideways (a 776px document at 420px unstuck the header on a phone). */
.tablewrap { overflow-x: auto; max-width: 100%; margin: 0.4em 0 1.4em; }
table.facts { width: 100%; border-collapse: collapse; font-size: 0.9em; margin: 0; }
table.facts th, table.facts td { text-align: left; padding: 0.4em 0.6em; border-bottom: 1px solid #2e2e2c; vertical-align: top; }
table.facts th { color: #bbb; font-weight: 600; }
table.facts th.num, table.facts td.num { text-align: right; }
table.sortable th { cursor: pointer; user-select: none; white-space: nowrap; }
table.sortable th.sorted::after { content: " \25BE"; color: #8cf; }
table.sortable th.sorted[aria-sort="ascending"]::after { content: " \25B4"; }
.badge.tabled { border-color: #999; color: #999; }
.tableview table { width: auto; }

/* Form Analytics: the section nav under the tabs, the video dashboard's
   secscroll pattern (paddles and fades only while the row overflows, the
   exhausted side disabled in place; pills keep a 2.1em box so the header
   height is fixed at any width), sections offset by the measured header
   height (--headh, set by static/form-analytics.js), and the table filter
   pill with the dashboard's clear-button affordance. */
.secscroll { position: relative; display: flex; align-items: center; }
.secnav { display: flex; gap: 0.4em; overflow-x: auto; flex: 1 1 0; min-width: 0; padding: 0.7em 0 0.7em; scrollbar-width: none; }
.secnav::-webkit-scrollbar { display: none; }
.secnav a { color: #c3c2b7; text-decoration: none; font-size: 0.9em; height: 2.1em; display: inline-flex; align-items: center; padding: 0 0.8em;
            border: 1px solid transparent; border-radius: 999px; flex: 0 0 auto; white-space: nowrap; }
.secnav a:hover { color: #8cf; border-color: #8cf; }
.secnav a.on { color: #8cf; border-color: #8cf; background: #12212e; }
.secnav-btn { display: none; flex: 0 0 auto; width: 1.4em; height: 2.1em; align-items: center; justify-content: center; background: none; border: none;
              color: #8cf; font-size: 0.9em; line-height: 1; padding: 0; cursor: pointer; }
.secnav-btn[disabled] { color: #555; cursor: default; }
.secscroll.has-overflow .secnav-btn { display: inline-flex; }
.secscroll.can-right .secnav { -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.6em), transparent); mask-image: linear-gradient(to right, black calc(100% - 1.6em), transparent); }
.secscroll.can-left .secnav { -webkit-mask-image: linear-gradient(to right, transparent, black 1.6em); mask-image: linear-gradient(to right, transparent, black 1.6em); }
.secscroll.can-left.can-right .secnav { -webkit-mask-image: linear-gradient(to right, transparent, black 1.6em, black calc(100% - 1.6em), transparent);
                                        mask-image: linear-gradient(to right, transparent, black 1.6em, black calc(100% - 1.6em), transparent); }
.fa-section { scroll-margin-top: var(--headh, 9em); margin: 0 0 1.8em; }
/* The last section keeps a viewport of height under the header, so a
   filter that empties the table cannot shorten the document, clamp the
   scroll, and drag the search box down the screen (operator, 2026-09-12). */
#forms.fa-section { min-height: calc(100vh - var(--headh, 9em)); min-height: calc(100dvh - var(--headh, 9em)); }
.fa-section .tiles { margin-top: 0.6em; }
.fa-search { position: relative; display: inline-flex; vertical-align: middle; margin: 0.2em 0 0.6em; }
.fa-search input { font: inherit; font-size: 0.9em; height: 2.1em; padding: 0 1.9em 0 0.8em; background: #181818; color: #ddd; border: 1px solid #555; border-radius: 6px; min-width: 16em; max-width: 100%; }
.fa-search input:focus { outline: none; border-color: #8cf; }
.fa-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.fa-search-clear { position: absolute; right: 0.3em; top: 50%; transform: translateY(-50%); display: none; background: none; border: none; color: #c3c2b7;
                   font-size: 1em; line-height: 1; padding: 0.25em 0.4em; cursor: pointer; }
.fa-search-clear:hover { color: #8cf; }
.fa-search.has-value .fa-search-clear { display: block; }
.fa-count { margin-left: 0.6em; }