/* The public Dynamic Risk Assessment form. Phone first. Builds on base.css and form.css.
   Taken from the approved prototype (docs/dynamic-risk-assessment/prototype/css/form.css
   and dra.css). Keep the two in step. */

.topbar .sub { overflow-wrap: anywhere; }

/* ---------- Progress: where the person is in the form ---------- */
.progress { margin: 0 0 14px; }
.progress-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.progress-top .step-name { font-family: 'Funnel Sans', sans-serif; font-size: 15px; font-weight: 600; color: var(--blueprint-blue); }
.progress-top .step-count { font-size: 11.5px; color: var(--heritage-grey); white-space: nowrap; }
.bar { display: flex; gap: 4px; }
.bar span { flex: 1; height: 4px; border-radius: 4px; background: var(--border); }
.bar span.done { background: var(--blueprint-blue); }
.bar span.now { background: var(--hero-red); }

/* ---------- Read-only automatic fields ---------- */
.auto-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 0 4px; }
.auto { background: var(--page-bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.auto .caps { display: block; }
.auto b { font-size: 12.5px; color: var(--blueprint-blue); font-weight: 600; }

/* ---------- Picked answers are dark blue, never red, so "No" never looks like an error ---------- */
.dra .tile.on { background: rgba(0, 39, 63, 0.06); border-color: var(--blueprint-blue); color: var(--blueprint-blue); }
.dra .tile.on .hint { color: var(--blueprint-blue); }
.tilegrid.four { grid-template-columns: repeat(4, 1fr); }
.tilegrid.one { grid-template-columns: 1fr; }
.tile.left { text-align: left; }
.tile .big { display: block; font-family: 'Funnel Sans', sans-serif; font-size: 18px; font-weight: 700; }
.tilegrid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tilegrid.five .tile { padding: 10px 4px; font-size: 12px; }

/* ---------- Tick lists in two columns on wider screens ---------- */
.choice-group.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.dra .choice input:checked ~ .box { border-color: var(--blueprint-blue); background: var(--blueprint-blue); }
.dra .choice.on { background: rgba(0, 39, 63, 0.05); border-color: var(--border); }

/* ---------- Follow-ups that open under an answer ---------- */
.follow { margin-top: 10px; padding: 12px 14px; border-left: 3px solid var(--blueprint-blue); background: var(--page-bg); border-radius: 0 8px 8px 0; }
.follow .q-label { font-size: 12.5px; }
.follow .sub-q + .sub-q, .follow .q-help + .sub-q { margin-top: 10px; }
.sub-q { display: block; }
/* One missing document's owner, name, email and date [D14]. */
.follow .row-owner + .row-owner, .follow .sub-q + .row-owner, .follow .row-owner + .sub-q { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.row-owner .sub-q + .sub-q { margin-top: 8px; }
.ctrl-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ctrl { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: #fff; }
.ctrl-name { font-size: 12.5px; font-weight: 600; color: var(--blueprint-blue); margin-bottom: 6px; }
.ctrl.invalid { border-color: var(--readable-red); }

/* ---------- One row per document or check ---------- */
.item-row { padding: 12px 0; border-bottom: 1px solid var(--divider); }
.item-row:last-child { border-bottom: none; }
.item-name { font-size: 13px; font-weight: 600; color: var(--blueprint-blue); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.item-row .tile { padding: 9px 6px; font-size: 12px; }
.item-row.invalid .item-name { color: var(--readable-red); }
.attach { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.attach svg { width: 13px; height: 13px; }

/* ---------- Review screen ---------- */
.sum-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider); align-items: start; }
.sum-row:last-child { border-bottom: none; }
.sum-row .caps { padding-top: 2px; }
.sum-row .sum-v { font-size: 13px; overflow-wrap: anywhere; }
.sum-row .sum-v b { color: var(--blueprint-blue); font-weight: 600; }
.sum-list { margin: 0; padding-left: 18px; }
.sum-list li { margin-bottom: 3px; }
.who { list-style: none; margin: 0; padding: 0; }
.who li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.who li svg { width: 15px; height: 15px; color: var(--heritage-grey); flex: 0 0 auto; }
.declare .choice { border: 1px solid var(--border); background: #fff; padding: 12px 14px; }
.switch-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; font-size: 12px; color: var(--heritage-grey); }
.switch-link .link { min-height: 44px; }

/* ---------- Result screens ---------- */
.result-id { font-family: 'Funnel Sans', sans-serif; font-size: 15px; font-weight: 700; color: var(--blueprint-blue); margin-bottom: 4px; }
.state-card .reasons { text-align: left; max-width: 520px; margin: 0 auto 20px; }
.state-card .who-note { font-size: 12px; color: var(--heritage-grey); margin: 0 auto 20px; max-width: 46ch; }
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.reasons { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.reasons li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; }
.reasons li svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
.reasons li.no svg { color: var(--readable-red); }
.reasons li.warn svg { color: #B38600; }

/* ---------- Minor or Major tiles carry the Microsoft Form definitions ---------- */
.tilegrid.sizes .tile { text-align: left; padding: 14px; font-weight: 600; color: var(--blueprint-blue); display: flex; flex-direction: column; justify-content: flex-start; }
.tilegrid.sizes .tile .hint { font-weight: 400; color: var(--text-grey); margin-top: 6px; line-height: 1.5; }
.btn.on-choice { border-color: var(--blueprint-blue); color: var(--blueprint-blue); background: rgba(0, 39, 63, 0.06); }

/* ---------- Errors on follow-ups, control boxes and rows ---------- */
.sub-q.invalid > .err, .ctrl.invalid > .err, .item-row.invalid > .err { display: block; }
.sub-q.invalid .fld, .ctrl.invalid .fld { border-color: var(--readable-red); }
.item-row.invalid .tile { border-color: var(--readable-red); }

/* ---------- Risk matrix: 5x5, the bands of the form version's matrix copy ---------- */
.matrix { display: grid; grid-template-columns: 74px repeat(5, 1fr); gap: 3px; max-width: 340px; font-family: 'Funnel Sans', sans-serif; }
.mx-corner { font-family: 'Montserrat', sans-serif; font-size: 9.5px; line-height: 1.25; color: var(--heritage-grey); align-self: end; }
.mx-h { font-size: 11px; font-weight: 700; color: var(--heritage-grey); text-align: center; align-self: center; }
.mx-c { height: 30px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; opacity: 0.55; }
.mx-c.low { background: var(--galvanizing-green); color: #fff; }
.mx-c.medium { background: var(--thin-yellow); color: var(--blueprint-blue); }
.mx-c.high { background: var(--hero-red); color: #fff; }
.mx-c.on { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blueprint-blue); font-weight: 700; }
.mx-key { display: flex; gap: 16px; margin-top: 8px; font-size: 11.5px; flex-wrap: wrap; }
.mx-key span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sw.low { background: var(--galvanizing-green); }
.sw.medium { background: var(--thin-yellow); }
.sw.high { background: var(--hero-red); }
.score-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.score-fig { font-family: 'Funnel Sans', sans-serif; font-size: 28px; font-weight: 700; color: var(--blueprint-blue); line-height: 1; }
.score-cap { font-size: 11.5px; color: var(--heritage-grey); }

/* ---------- Files and links ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--page-bg); border: 1px solid var(--border); border-radius: 20px; padding: 2px 4px 2px 10px; font-size: 11.5px; max-width: 100%; overflow-wrap: anywhere; }
.chip svg { width: 12px; height: 12px; flex: 0 0 auto; }
.chip .icon-btn { width: 28px; height: 28px; border: none; background: transparent; }
.attach-box { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.attach-box .upload-pick input { display: none; }
.attach-box .link-row { align-self: stretch; }
.link-row { display: flex; gap: 8px; }
.link-row .fld { flex: 1; min-width: 0; }
.photo-error { font-size: 11.5px; font-weight: 600; color: var(--readable-red); margin-top: 7px; }

/* ---------- Actions under each screen ---------- */
.actions-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 0; }
.actions-bar .btn-group { display: flex; align-items: center; gap: 12px; }
.missing { font-size: 11.5px; font-weight: 600; color: var(--readable-red); }
.banner { border: 1px solid var(--border); border-left: 3px solid var(--readable-red); border-radius: 8px; background: #fff; padding: 11px 14px; font-size: 12.5px; font-weight: 600; color: var(--readable-red); margin-bottom: 14px; }
/* Through a Revise link: which assessment is being revised (approved prototype, public/form.html). */
.banner.info { border-left-color: var(--blueprint-blue); font-weight: 400; color: var(--text-grey); }
.banner.info strong { color: var(--blueprint-blue); }
.hidden { display: none !important; }

/* ---------- Toast: top right, so it never covers the button at the bottom ---------- */
.toast {
  position: fixed; right: 16px; top: 16px; z-index: 300; display: none; align-items: center; gap: 10px;
  background: var(--blueprint-blue); color: #fff; border-radius: 8px; padding: 12px 18px;
  font-size: 12.5px; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 39, 63, 0.2); max-width: min(420px, calc(100vw - 32px));
}
.toast.show { display: flex; }
.toast svg { width: 16px; height: 16px; flex: 0 0 auto; }

@media (max-width: 520px) {
  .tile, .btn, .choice { min-height: 44px; }
  .tilegrid.four { grid-template-columns: 1fr 1fr; }
  .tilegrid.sizes { grid-template-columns: 1fr; }
  .tilegrid.keep { grid-template-columns: repeat(3, 1fr); }
  /* Five matrix labels do not fit across a phone: one row each, number then label. */
  .tilegrid.five { grid-template-columns: 1fr; gap: 8px; }
  .tilegrid.five .tile { display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 14px; font-size: 13px; }
  .tilegrid.five .tile .big { font-size: 16px; min-width: 14px; }
  .choice-group.cols { grid-template-columns: 1fr; }
  .auto-row { grid-template-columns: 1fr; }
  .sum-row { grid-template-columns: 1fr auto; }
  .sum-row .caps { grid-column: 1 / -1; }
  .actions-bar { flex-direction: column-reverse; align-items: stretch; }
  .actions-bar .btn-group { flex-direction: column-reverse; align-items: stretch; }
  .actions-bar .btn { width: 100%; justify-content: center; }
}

/* ---------- Email this PDF to others, on the result screen [issue 32] ---------- */
.share { text-align: left; max-width: 420px; margin: 0 auto 20px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.share-title { font-size: 13px; font-weight: 600; color: var(--blueprint-blue); margin: 0 0 4px; }
.share-help { font-size: 12px; color: var(--heritage-grey); margin: 0 0 10px; }
.share-boxes { display: flex; flex-direction: column; gap: 8px; }
.share-boxes .fld.bad { border-color: var(--readable-red); }
.share.invalid > .err { display: block; }
.share-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; }
.share-done { font-size: 12px; color: var(--galvanizing-green); margin: 10px 0 0; }
.share-done:empty, .share-sent:empty { display: none; }
.share-sent { font-size: 12px; color: var(--text-grey); margin: 4px 0 0; overflow-wrap: anywhere; }