/* --topbar is the height of the top bar with its hairline. Below 1024 px the progress bar makes it taller. It is set on
   the root of the survey page, whose scroll padding keeps whatever takes focus clear of the top bar, and of the
   self-screen's bar while that is on the page (--pick-bar is its height, kept by screener.js). */
:root:has(.shell) { --topbar: 65px; scroll-padding-top: calc(var(--topbar) + var(--s-4)); }
:root:has(.pick__bar) { scroll-padding-bottom: var(--pick-bar, 0px); }
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); height: 64px; padding-inline: var(--gutter); }
.topbar__meta { display: flex; align-items: center; gap: var(--s-5); font-size: 13px; color: var(--ink-2); }
.topbar__saved::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--ink); vertical-align: 1px; }
.topbar__menu { display: none; }
.topbar .bar { display: none; }

.shell__body { flex: 1; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }
.shell__rail { position: sticky; top: var(--topbar); align-self: start; height: calc(100vh - var(--topbar)); overflow: auto; padding: var(--s-7) var(--s-5) var(--s-7) var(--gutter); border-right: 1px solid var(--line); }
.shell__main { min-width: 0; padding: var(--s-8) var(--gutter) var(--s-10) clamp(24px, 6vw, 96px); }

.screen { max-width: 980px; }
.screen__head { margin-bottom: var(--s-7); }
.screen__head .label { display: block; margin-bottom: var(--s-3); }
.screen__title:focus { outline: none; }
.screen__lead { margin-top: var(--s-4); max-width: var(--measure); }
.screen__nav { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.screen__nav .error { margin-left: auto; }
.screen-enter { animation: enter var(--dur) var(--ease); }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.field.is-missing .field__label { color: var(--accent); }
/* The words under a marked part's label, legend, job name or tool question. A tool category's question sits in a row
   of its own, so its words take a line of their own under it. */
[data-key] .error { margin-top: var(--s-1); }
.gridq__sub .error { margin-bottom: var(--s-2); }
.card__head { flex-wrap: wrap; row-gap: 0; }
.card__head > .error { flex-basis: 100%; }

.rules { max-width: var(--measure); border-top: 1px solid var(--line); counter-reset: rule; }
.rules li { display: grid; grid-template-columns: 48px 1fr; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); counter-increment: rule; font-size: 18px; line-height: 1.45; }
.rules li::before { content: counter(rule, decimal-leading-zero); padding-top: 5px; font-size: 11px; font-weight: 500; letter-spacing: .09em; color: var(--ink-2); }

@media (max-width: 1023px) {
  :root:has(.shell) { --topbar: 67px; }
  .shell__body { grid-template-columns: 1fr; }
  .shell__rail { display: none; }
  .shell__rail.is-open { display: block; position: fixed; inset: var(--topbar) 0 0 0; z-index: 15; height: auto; padding: var(--s-6) var(--gutter); border: 0; background: var(--paper); }
  .topbar__menu { display: inline-flex; }
  .topbar .bar { display: block; }
  .topbar__saved { display: none; }
  .shell__main { padding: var(--s-7) var(--gutter) var(--s-9); }
}

/* Beyond the plan's rules, each needed for behaviour the plan asks for:
   .btn and .field set display, which would otherwise show elements marked hidden;
   the navigation row wraps rather than squeezing its message on a phone;
   the open rail drops the align-self it has in the grid, which would stop it reaching the bottom of the window. */
.screen__nav { flex-wrap: wrap; }
@media (max-width: 1023px) {
  .shell__rail.is-open { align-self: auto; }
}

.pick { border-top: 1px solid var(--line); }
.pick__group > .label { display: block; padding: var(--s-6) 0 var(--s-3); }
.pick__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: center; padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.pick__row .small { margin-top: 2px; max-width: 56ch; }
.pick__bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); margin-top: var(--s-6); padding: var(--s-4) 0; border-top: 1px solid var(--ink); background: var(--paper); font-size: 15px; }
.opt__mark--n { font-size: 11px; font-weight: 500; line-height: 1; }
.opt__mark--n::after { display: none; }
.gridq-blocks { display: none; }
@media (max-width: 900px) {
  .pick__row { grid-template-columns: 1fr; gap: var(--s-3); }
}
@media (max-width: 640px) {
  .gridq--plain { display: none; }
  .gridq-blocks { display: block; }
  .gridq-blocks > * + * { margin-top: var(--s-5); }
}

/* Beyond the brief's rules for Task 4, each needed for what its fields showed in the browser:
   rank rows are buttons, so their text lines up as in the other rows, a chosen row is outlined as a chosen option is,
   and focus shows above the neighbouring rows;
   a segment that wraps keeps single hairlines and a straight left edge;
   while the rail takes its width, a self-screen row stacks until it is wide enough for its two columns;
   the choice of the main one holds whole option texts, which on a narrow screen take a line each and wrap. */
button.opt { text-align: left; }
.opt[aria-pressed="true"] { border-color: var(--ink); z-index: 2; }
.opt:focus-visible { z-index: 3; }
.seg { padding: 1px 0 0 1px; }
.seg__item, .seg__item:first-child { margin: -1px 0 0 -1px; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .pick__row { grid-template-columns: 1fr; gap: var(--s-3); }
}
@media (max-width: 900px) {
  .field__help + .seg > .seg__item { flex-basis: 100%; min-width: 0; }
  .field__help + .seg > .seg__item span { height: auto; min-height: 44px; padding-block: 10px; white-space: normal; text-align: center; }
}

/* Start and finish */
.end__part { max-width: var(--measure); padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.end__part > .h3 { margin-bottom: var(--s-4); }
.end__part .btn { margin-top: var(--s-4); }
.end__part .input { margin-top: var(--s-4); font-size: 14px; color: var(--ink-2); }
.end__part .note { margin-top: var(--s-3); }
.panel label { display: block; margin-top: var(--s-5); font-size: 14px; color: var(--ink-2); }
.panel .input { margin-top: var(--s-2); margin-bottom: var(--s-5); }
.panel .error, .panel .note { margin-bottom: var(--s-4); }
.panel p { margin-top: var(--s-3); }
.panels + .note { margin-top: var(--s-5); }
/* Beyond the brief's rules: the given ones leave the buttons at the foot of a single panel touching the text above and each other.
   They sit in a row, as in the survey's navigation, a step below the text and close under a note that speaks of them.
   The start page ends with what start.js draws, so that holds the space above the footer that other pages get from their last section. */
.panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-5); }
.panel__actions .btn { align-self: auto; margin-top: 0; }
.panel .note + .panel__actions { margin-top: 0; }
.start { padding-bottom: clamp(56px, 8vw, 112px); }

/* Section screens */
.key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); margin-bottom: var(--s-6); border-top: 1px solid var(--line); }
.key > div { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
.key dt { font-weight: 500; }
.key dd { color: var(--ink-2); }
.gridq tr.is-missing > th { color: var(--accent); }
.jobcards { display: none; }
.jobcards .opt__text b { font-weight: 500; }
.jobcards .opt__text .small { display: block; }
.jobcards .card.is-missing { border-color: var(--accent); z-index: 1; position: relative; }
@media (max-width: 900px) {
  .key { grid-template-columns: 1fr; }
  .gridq--jobs { display: none; }
  .jobcards { display: block; }
}
/* Beyond the brief's rules for the section screens, each needed for what the screens showed in the browser:
   a job's question of the right amount of AI that is still open when Continue is refused is marked as a job row is;
   the eight ways of doing a job share the width the job column leaves, (100% - 36%) / 8 each, so every way is
   the same size and the marks sit at equal intervals, where the table's own sizing made one column twice another;
   the second row's label keeps the table's cell padding from the hairline above it, where it sat almost on the line;
   a part brought into view when Continue is refused keeps a little space below the top bar, which the page's scroll
   padding already clears, so a tall card shows its job. */
.gridq__sub.is-missing .label, .jobcards .is-missing > .label { color: var(--accent); }
.gridq--jobs thead th { width: 8%; }
.gridq__sub > td { padding-top: var(--s-3); }
[data-key] { scroll-margin-top: var(--s-4); }
/* The header row of the jobs table stays in view under the top bar while the table scrolls under it, on the table's
   surface and above the rows and their segments. The table draws its borders cell by cell, since only then does a cell
   that stays in view take its hairlines along; the last row's hairline closes the table at the bottom.
   A radio reached with the keyboard is scrolled clear of the header, which would otherwise hide it. */
.gridq--jobs { border-collapse: separate; border-bottom: 0; }
.gridq--jobs thead > tr > * { position: sticky; top: var(--topbar); z-index: 4; background: var(--surface); }
.gridq--jobs td input { scroll-margin-top: calc(var(--topbar) + var(--s-9)); }

/* Tools */
.tool .chips { margin-top: var(--s-3); }
.tool__names { margin-bottom: var(--s-3); }
.tool__more { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.tool__more > .label { display: block; margin-bottom: var(--s-5); }
.tool__more .field + .field { margin-top: var(--s-6); }
.tool__more .field__label { font-size: 17px; }
.tool.is-missing { border-color: var(--accent); position: relative; z-index: 1; }
/* Beyond the brief's rules for Task 6, each needed for what the tools screen showed in the browser:
   a card whose list is open sits above the next card, which a missing mark would otherwise raise over the list;
   the note about the first name keeps the same space from the first question as the label keeps from it;
   on a phone, a choice too long for the width wraps inside its segment, and the segments stack as the main-one choice does. */
.tool:has(.ta__list:not([hidden])) { position: relative; z-index: 2; }
.tool__more > .note { margin-bottom: var(--s-5); }
@media (max-width: 640px) {
  .tool__more .seg__item { flex-basis: 100%; min-width: 0; }
  .tool__more .seg__item span { height: auto; min-height: 44px; padding-block: 10px; white-space: normal; text-align: center; }
}