/* Driver statements and office reviews (0479-0482).
 *
 * Nine class names, all of them prefixed, all of them new: checked against every stylesheet and
 * every module in both apps before being used. A rule written on a name something else already
 * answers to is how one line on the shared .fold-body shut every fold in this portal.
 *
 * Everything structural is drawn with the portal's own vocabulary instead -- .panel, .fold,
 * .form-grid, .checkbox-stack, .checkbox-card, .definition-grid, .metric-grid, .button-ghost --
 * so the burgundy premium layer restyles these screens along with the rest and there is no second
 * design to keep in step. What is left here is the handful of things a statement has and nothing
 * else does: somebody's own words, a signature under them, and a list of attachments with a note
 * on each saying who may see it.
 *
 * Colours come from the tokens, never as literals, so both themes resolve as a set. NOT wrapped in
 * @media screen: unlike a reflection or a gleam, a man's account and the name under it are the
 * content, and they have to print. */

/* HIS OWN WORDS, SET APART FROM OUR DESCRIPTION OF THEM. The quote is the only part of this that an
   examiner reads closely, and a paragraph that looks like the rest of the page gets skimmed. */
.statement-quote {
  margin: .55rem 0 .85rem;
  padding: .8rem .95rem;
  border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0;
  background: var(--surface-alt);
  color: var(--ink-700);
  font-size: .95rem;
  line-height: 1.6;
  white-space: pre-wrap;   /* he typed his own paragraphs; they are kept as he typed them */
  overflow-wrap: anywhere; /* a registration or a reference with no spaces must not widen the page */
}

.statement-answer { display: grid; gap: .35rem; }

/* The reference, on the fold's own summary line. SCOPED TO THIS PANEL BY ID, because .eyebrow and
   .fold-heading belong to every fold in the portal: one unscoped rule on .fold-body once shut every
   fold there is. DS-0003 was breaking into "DS-" and "0003" at a phone's width. */
#driver-statements .fold-summary .eyebrow { white-space: nowrap; }

/* And the title beside it, which is a vocabulary label rather than a headline: "Roadside stop /
   DVSA / police" offers a break at each slash, and a phone took all of them, turning one fold into
   an eight line column. One line with an ellipsis, because every one of those words is written out
   again inside the fold, under "What he was asked". Scoped to this panel for the same reason as
   the rule above it. */
#driver-statements .fold-summary .fold-heading h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ON A PHONE THE TITLE GETS THE WHOLE LINE. The ellipsis above is right while the status sits
   beside the heading, and at 390 px the pill and the date left so little room that one of these
   read "Roa...". A truncation that shows three letters is not a shorter title, it is a title
   nobody can read, so at this width the status drops to a line of its own and the words come
   back. Scoped to this panel, like everything else that touches a shared fold. */
@media (max-width: 560px) {
  #driver-statements .fold-summary { flex-wrap: wrap; }
  #driver-statements .fold-summary .fold-heading { flex: 1 1 100%; }
  #driver-statements .fold-summary .fold-heading h3 { white-space: normal; overflow: visible; }
  #driver-statements .fold-summary .fold-status { margin-left: auto; }
}

/* The free-text box under a list of tick boxes, inside the same fieldset. .action-form already
   stacks a label over its field and makes it full width; this only puts air between the last tick
   box and it, so the two do not read as one row. */
.statement-other { display: block; margin-top: .7rem; }

.statement-heading {
  margin: 1.25rem 0 .2rem;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.statement-heading:first-child { margin-top: .25rem; }

/* The name and the moment, which is what a signature is on this platform: not a drawn squiggle. */
.statement-signature {
  margin: .35rem 0 0;
  font-size: .9rem;
  color: var(--ink-600);
}
.statement-signature strong { color: var(--ink-900); }

/* The words he actually signed, kept with the signature and printed under it. Quieter than his
   account, because it is the form's language and not his. */
.statement-declaration {
  margin: .3rem 0 0;
  padding-left: .75rem;
  border-left: 1px solid var(--line);
  font-style: italic;
  line-height: 1.5;
}

.statement-withdrawn {
  margin: 0 0 .6rem;
  padding: .6rem .8rem;
  border: 1px solid var(--warn-line, var(--line));
  border-radius: 10px;
  background: var(--warn-soft);
  color: var(--ink-700);
  font-size: .9rem;
}

/* ---- the attachments ------------------------------------------------------------------------- */

.statement-files { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; gap: .4rem; }

.statement-file {
  display: flex;
  flex-wrap: wrap;          /* on a laptop at 1280 the share pill and two buttons do not fit a line */
  align-items: center;
  gap: .4rem .6rem;
  padding: .45rem .6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-alt);
}
.statement-file > button:first-child { font-weight: 600; text-align: left; }
.statement-file .muted { flex: 1 1 8rem; }

/* WHO MAY SEE IT, ON THE ROW. An office file is internal unless somebody pressed to share it, and
   the one place that can be read wrongly is a list where that is not written on each line. */
.statement-file-share { flex: 0 0 auto; }

@media (max-width: 560px) {
  .statement-file { align-items: flex-start; }
  .statement-file .muted { flex-basis: 100%; }
}

/* A sheet of these in a print or a PDF: no fills, no hover affordances, nothing that reads as
   something to press on paper. */
@media print {
  .statement-quote, .statement-file, .statement-withdrawn { background: none; }
  .statement-file { border-color: #999; }
  .statement-files button, .statement-attach, .statement-review,
  .statement-issue, .statement-withdraw { display: none; }
}

/* A case keeps the original statement intact and adds a separate action lifecycle. */
#driver-statements .driver-case { min-width: 0; }
#driver-statements .driver-case [hidden] { display: none !important; }
.driver-case-steps {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem;
  list-style: none; padding: 0 0 1rem; margin: .25rem 0 1rem;
  border-bottom: 1px solid var(--line);
}
.driver-case-steps li { display: flex; align-items: center; gap: .5rem; min-width: 0; color: var(--ink-500); font-size: .78rem; line-height: 1.35; }
.driver-case-steps li > span {
  display: grid; place-items: center; width: 1.65rem; height: 1.65rem; flex: 0 0 1.65rem;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface-alt); font-weight: 700;
}
.driver-case-steps li.is-done { color: var(--ink-900); }
.driver-case-steps li.is-done > span { background: var(--primary); border-color: var(--primary); color: #fff; }
.driver-case-tabs { display: flex; gap: .3rem; padding: .25rem; margin-bottom: 1.3rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-alt); }
.driver-case-tabs button {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: .65rem .8rem; border: 1px solid transparent;
  border-radius: 10px; background: transparent; color: var(--ink-600); font: inherit; font-size: .9rem; font-weight: 650; line-height: 1.35; cursor: pointer;
}
.driver-case-tabs button[aria-selected="true"] { background: var(--surface); color: var(--primary); border-color: var(--line); box-shadow: 0 2px 6px rgb(0 0 0 / .05); }
.driver-case-tabs button:hover { color: var(--primary); }
.driver-case-tabs button:focus-visible, .driver-case-add > summary:focus-visible, .driver-case-complete > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.driver-case-tabs button > span { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; margin-left: .35rem; padding: 0 .25rem; border-radius: 8px; background: var(--surface-alt); font-size: .75rem; }
.driver-case-tab-panel { min-width: 0; padding: .1rem .2rem .5rem; }
.driver-case-tab-panel > .statement-heading:first-child { margin: 0 0 .7rem; }
.driver-case-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0 0 .8rem; }
.driver-case-section-head h4, .driver-case-closure h4 { margin: 0; font-size: 1rem; color: var(--ink-900); }
.driver-case-section-head p { margin: .35rem 0 0; max-width: 48rem; }
.driver-case-count { flex: 0 0 auto; min-width: 2rem; text-align: center; border: 1px solid var(--line); border-radius: 999px; padding: .2rem .55rem; color: var(--ink-700); font-size: .8rem; font-weight: 650; }
.driver-case-events { margin: 1.4rem 0; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.driver-case-event-list { display: grid; gap: .7rem; }
.driver-case-event-list article { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-alt); }
.driver-case-event-list article > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; font-size: .88rem; }
.driver-case-event-list article > div > span { color: var(--ink-500); }
.driver-case-event-list article p { margin: .5rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-700); line-height: 1.55; }
.driver-case-empty { margin: 0; padding: 1rem; border: 1px dashed var(--line); border-radius: 12px; color: var(--ink-500); font-size: .9rem; }
.driver-case-add { margin: 1rem 0 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-alt); }
.driver-case-add > summary { padding: .85rem 1rem; cursor: pointer; color: var(--primary); font-size: .92rem; font-weight: 650; min-height: 44px; }
.driver-case-add[open] > summary { border-bottom: 1px solid var(--line); }
.driver-case-add > .action-form { margin: 0; padding: 1rem; border: 0; background: transparent; }
.driver-case .action-form label > span, .driver-case .action-form legend { line-height: 1.45; }
.driver-case .action-form select, .driver-case .action-form input:not([type="checkbox"]), .driver-case .action-form textarea { min-width: 0; max-width: 100%; }
.driver-case .action-form input[type="checkbox"] { flex-shrink: 0; }
.driver-case-actions { display: grid; gap: .8rem; }
.driver-case-action { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-alt); }
.driver-case-action.is-complete { border-left: 3px solid var(--success, #3a8b66); }
.driver-case-action-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.driver-case-action-head > div { min-width: 0; }
.driver-case-action-head h4 { margin: .25rem 0 .5rem; font-size: 1rem; line-height: 1.45; color: var(--ink-900); overflow-wrap: anywhere; }
.driver-case-action-head .eyebrow { font-size: .68rem; }
.driver-case-action-head .pill { flex: 0 0 auto; }
.driver-case-action-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.15rem; color: var(--ink-500); font-size: .82rem; line-height: 1.5; }
.driver-case-action-meta strong { font-weight: 600; color: var(--ink-700); }
.driver-case-action-note { margin: .85rem 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; line-height: 1.6; }
.driver-case-pass { margin: .6rem 0; color: var(--ink-900); font-size: .85rem; font-weight: 650; }
.driver-case-complete { margin-top: .85rem; }
.driver-case-complete > summary { cursor: pointer; color: var(--primary); font-size: .85rem; font-weight: 650; padding: .4rem 0; }
.driver-case-complete > .action-form { margin: .5rem 0 0; }
.driver-case-plan { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; background: var(--surface-alt); }
.driver-case-plan strong { color: var(--ink-900); font-size: .95rem; }
.driver-case-plan p { margin: .3rem 0 0; }
.driver-case-plan .button { flex: 0 0 auto; }
.driver-case-decision { display: grid; gap: .3rem; margin: .1rem 0 .7rem; }
.driver-case-decision strong { color: var(--primary); font-size: 1rem; }
.driver-case-closure { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.driver-case-closure > p { margin: .55rem 0; line-height: 1.6; }
.driver-case-blockers { margin: .8rem 0; padding-left: 1.2rem; color: var(--ink-600); font-size: .86rem; line-height: 1.65; }
.driver-case-close-note { padding: .7rem .9rem; background: var(--surface-alt); border-radius: 10px; color: var(--ink-500); font-size: .85rem; }
.driver-case-form-error { color: var(--danger, #b42335); font-size: .9rem; }
@media (max-width: 760px) {
  #driver-statements > .panel-header { align-items: stretch; flex-direction: column; }
  #driver-statements > .panel-header > .button { width: 100%; white-space: normal; }
  .driver-case-steps { gap: .25rem; }
  .driver-case-steps li { flex-direction: column; text-align: center; gap: .35rem; font-size: .68rem; }
  .driver-case-tabs { flex-wrap: wrap; }
  .driver-case-tabs button { flex-basis: calc(50% - .3rem); font-size: .88rem; }
  .driver-case .form-grid { grid-template-columns: minmax(0, 1fr); }
  .driver-case .checkbox-stack.two-columns { grid-template-columns: minmax(0, 1fr); }
  .driver-case-plan { align-items: stretch; flex-direction: column; gap: .75rem; }
  .driver-case-action-head { flex-wrap: wrap; }
  .driver-case-action-head > div { flex: 1 1 100%; }
}
@media (max-width: 460px) {
  .driver-case-tab-panel { padding-inline: 0; }
  .driver-case-add > .action-form, .driver-case-action { padding: .8rem; }
  .driver-case .action-form select, .driver-case .action-form input:not([type="checkbox"]), .driver-case .action-form textarea { font-size: 16px; min-height: 44px; }
  .driver-case .button { min-height: 44px; white-space: normal; }
  #driver-statements .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .driver-case-tabs, .driver-case-steps, .driver-case-add, .driver-case-complete, .case-close-form, .driver-case-plan { display: none !important; }
  #driver-statements .driver-case [data-case-panel][hidden] { display: block !important; }
  .driver-case-action { break-inside: avoid; background: none; }
}