/* Risk assessment templates (#/risk and #/risk/<id>). Premium feature "risk".
   Builds on the shared cards, download cards (.dl-card), badges, inputs and the
   segmented control. Levels: Low is neutral, Medium is amber (needs attention),
   High is red. Gold stays for Premium only, so nothing here is gold. */

/* ---------------- the list ---------------- */

.rk-intro { display: grid; gap: 12px; margin-bottom: 8px; }
.rk-privacy > .i { color: var(--ink-2); }
.rk-grid-cards { align-items: stretch; }
.rk-card { height: 100%; }
.rk-card h3 { margin-top: 4px; }
.rk-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.rk-kind {
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.rk-why { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.rk-lbl { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.rk-cite { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.rk-cite .badge { flex: none; }
.rk-req { background: var(--cover); color: var(--cover-cream); border-color: var(--cover); }
.rk-related { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.rk-related .i { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ink-3); }
.rk-none p { margin: 0; color: var(--ink-2); max-width: var(--measure); }

/* ---------------- the form: top cards ---------------- */

.rk-top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); margin-bottom: 18px; align-items: start; }
.rk-privacy + .rk-top { margin-top: 18px; }
.rk-about .rk-meta { margin-bottom: 10px; }
.rk-purpose { margin: 0 0 14px; color: var(--ink); max-width: var(--measure); line-height: 1.6; }
.rk-facts { margin: 0; display: grid; gap: 10px; }
.rk-facts > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.rk-facts dt { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.rk-facts dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.rk-facts a { color: var(--blue); }

.rk-result { position: sticky; top: calc(var(--top-h, 60px) + 16px); }
.rk-result-h { font-family: var(--font-serif); font-weight: 500; font-size: 20px; margin: 0 0 12px; }
.rk-overall { margin-bottom: 12px; }
.rk-overall .rk-level { font-size: 15px; min-height: 34px; padding: 0 16px; }
.rk-lines { list-style: none; margin: 0; padding: 0; }
.rk-lines li { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.rk-lines li:first-child { border-top: 0; padding-top: 0; }
.rk-lines .rk-sum { justify-content: flex-start; }
.rk-concerns { margin: 10px 0 0; color: var(--amber-ink); }
.rk-live { margin: 10px 0 0; }

/* ---------------- levels ---------------- */

.rk-level {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 11px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; font-variant-numeric: tabular-nums;
}
.rk-level.lv-low { background: var(--surface-3); color: var(--ink-2); border-color: var(--line-2); }
.rk-level.lv-mid { background: var(--amber-soft); color: var(--amber-ink); border-color: var(--amber-line); }
.rk-level.lv-high { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
.rk-level.lv-none { background: transparent; color: var(--ink-3); border: 1px dashed var(--line-2); font-weight: 500; }
.rk-count { font-weight: 600; font-size: 13.5px; }
.rk-count.lv-low { color: var(--ink-2); }
.rk-count.lv-mid { color: var(--amber-ink); }
.rk-count.lv-high { color: var(--red); }

/* ---------------- sections ---------------- */

.rk-form { display: grid; gap: 18px; margin-top: 18px; }
.rk-form .card + .card { margin-top: 0; }
.rk-sec .card-head { align-items: flex-start; flex-wrap: wrap; }
.rk-sec .card-head h2 { display: flex; align-items: baseline; gap: 10px; }
.rk-sec .card-head .sub { max-width: var(--measure); }
.rk-n {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; flex: none;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; background: var(--surface-3); color: var(--ink-2); transform: translateY(-2px);
}
.rk-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.rk-total { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rk-total b { font-family: var(--font-serif); font-weight: 500; font-size: 22px; color: var(--ink); margin-left: 2px; }
.rk-forced { color: var(--red); font-weight: 600; }

/* questions with Yes / No / N/A */
.rk-qs { list-style: none; margin: -6px -22px 0; padding: 0; }
.rk-q {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px 16px;
  padding: 12px 22px; border-top: 1px solid var(--line); transition: background var(--dur-1) var(--ease);
}
.rk-q:first-child { border-top: 0; }
.rk-qtext { font-size: 15px; line-height: 1.5; color: var(--ink); }
.rk-help { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.rk-flag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-left: 4px; border-radius: 999px; vertical-align: 1px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; background: var(--red-soft); color: var(--red); border: 1px solid var(--red-line); white-space: nowrap;
}
.rk-pts { font-size: 12.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; }
.rk-q.is-concern { background: var(--amber-wash); box-shadow: inset 3px 0 0 var(--amber); }
.rk-q.is-flag { background: var(--red-soft); box-shadow: inset 3px 0 0 var(--red); }
.rk-seg { flex: none; }
.rk-seg button { min-width: 46px; min-height: 34px; }
.rk-seg button.on[data-v="yes"], .rk-seg button.on[data-v="no"], .rk-seg button.on[data-v="na"] { background: #fff; color: var(--ink); }

/* how to read the total */
.rk-bands { display: grid; gap: 0; margin: 14px 0 0; border: 1px solid var(--line); border-radius: var(--r-plate-sm, 12px); overflow: hidden; }
.rk-band { display: grid; grid-template-columns: 56px auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.rk-band:first-child { border-top: 0; }
.rk-band .rk-level { justify-self: start; }
.rk-band .rk-range { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rk-band.on { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--ink); }
.rk-band.on .rk-btext { color: var(--ink); }

/* likelihood x impact grid */
.rk-scale { margin: 0 0 12px; max-width: none; }
.rk-mx { display: grid; gap: 0; }
.rk-mx-head, .rk-mx-row { display: grid; grid-template-columns: minmax(0, 1.5fr) 130px 120px 92px minmax(0, 1.4fr); gap: 10px; align-items: center; }
.rk-mx-head { padding: 0 0 8px; border-bottom: 1.5px solid var(--rule-2, #4A463F); font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.rk-mx-row { padding: 10px 0; border-top: 1px solid var(--line); }
.rk-mx-head + .rk-mx-row { border-top: 0; }
.rk-mx-name { font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.rk-mx-cell .input, .rk-mx-note .input { min-height: 40px; padding: 7px 10px; font-size: 14px; }
.rk-mx-risk { display: flex; align-items: center; }
.rk-mx .rk-tlbl { display: none; }

/* plain fields */
.rk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.rk-fields .field + .field { margin-top: 0; }
.rk-fields .rk-wide { grid-column: 1 / -1; }
.rk-fields textarea.input { min-height: 96px; }

/* typed tables (people, drugs, actions) */
.rk-table { display: grid; gap: 8px; }
.rk-thead, .rk-trow { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 8px; }
.rk-thead { padding-bottom: 6px; border-bottom: 1.5px solid var(--rule-2, #4A463F); font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.rk-tcell { display: block; min-width: 0; }
.rk-tcell .input { min-height: 40px; padding: 7px 10px; font-size: 14px; }
.rk-table .rk-tlbl { display: none; }
.rk-add { margin-top: 10px; }

/* sign-off */
.rk-sign { display: grid; gap: 14px; }
.rk-signrow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 190px; gap: 10px 16px; align-items: end; }
.rk-signrow .field + .field { margin-top: 0; }
.rk-role { font-weight: 600; color: var(--ink); padding-bottom: 12px; }

.rk-notes { padding: 0 4px; }
.rk-notes p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); max-width: var(--measure); font-style: italic; }

/* the sticky action bar */
.rk-bar {
  position: sticky; bottom: 12px; z-index: 5; margin-top: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px 12px 18px; background: rgba(255, 255, 255, .96); border-radius: var(--r-plate-md, 16px);
  box-shadow: 0 0 0 1px var(--line), 0 14px 30px -12px rgba(22, 34, 44, .32);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.rk-bar-level { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rk-bar-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------------- narrower screens ---------------- */

@media (max-width: 1180px) {
  .rk-mx-head { display: none; }
  .rk-mx-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "name name name" "l i risk" "note note note"; gap: 8px 10px; padding: 14px 0; }
  .rk-mx-head + .rk-mx-row { border-top: 0; }
  .rk-mx-row:first-of-type { border-top: 0; }
  .rk-mx-name { grid-area: name; font-weight: 600; }
  .rk-mx-row > .rk-mx-cell:nth-of-type(1) { grid-area: l; }
  .rk-mx-row > .rk-mx-cell:nth-of-type(2) { grid-area: i; }
  .rk-mx-risk { grid-area: risk; align-self: end; padding-bottom: 6px; }
  .rk-mx-note { grid-area: note; }
  .rk-mx .rk-tlbl { display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
}
@media (max-width: 960px) {
  .rk-top { grid-template-columns: 1fr; }
  .rk-result { position: static; }
}
/* the Ask button floats at the bottom left on tablets and phones: the bar sits beside it, not under it */
@media (max-width: 900px) {
  .rk-bar { bottom: calc(16px + env(safe-area-inset-bottom)); margin-left: 68px; min-height: 56px; }
}
@media (max-width: 760px) {
  .rk-thead { display: none; }
  .rk-trow { grid-template-columns: 1fr; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-plate-sm, 12px); background: var(--surface-2); }
  .rk-table .rk-tlbl { display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
  .rk-fields { grid-template-columns: 1fr; }
  .rk-signrow { grid-template-columns: 1fr 1fr; }
  .rk-role { grid-column: 1 / -1; padding-bottom: 0; }
  .rk-facts > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 640px) {
  .rk-qs { margin: -6px -18px 0; }
  .rk-q { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 18px; }
  .rk-q .rk-qtext { grid-column: 1 / -1; }
  .rk-q .rk-seg { justify-self: start; }
  .rk-q .rk-pts { grid-column: 2; grid-row: 2; }
  .rk-sec .card-head .rk-sum { justify-content: flex-start; width: 100%; }
  .rk-band { grid-template-columns: 44px minmax(0, 1fr); }
  .rk-band .rk-btext { grid-column: 1 / -1; }
  .rk-bar { padding: 8px; gap: 6px; }
  .rk-bar-level { width: 100%; padding: 0 4px; }
  .rk-bar-btns { width: 100%; justify-content: stretch; gap: 6px; flex-wrap: nowrap; }
  .rk-bar-btns .btn { flex: 1 1 auto; padding-left: 10px; padding-right: 10px; }
  .rk-bar-btns #rk-clear, .rk-hide-sm { display: none; }
  .rk-st-note { display: none; }
  .rk-cite { flex-wrap: wrap; }
}

/* ---------------- print: the form on paper ---------------- */

@media print {
  .rk-bar, .rk-add, .rk-privacy, .rk-live, .page-actions, .crumbs { display: none !important; }
  .rk-top { grid-template-columns: 1fr; }
  .rk-result { position: static; }
  .rk-sec, .rk-q, .rk-mx-row, .rk-trow, .rk-signrow { break-inside: avoid; }
  .rk-q.is-concern, .rk-q.is-flag { background: #fff !important; }
  .rk-seg { background: none; }
  .rk-seg button { border: 1px solid #999; color: #999; }
  .rk-seg button.on { border-color: #000; color: #000; font-weight: 700; box-shadow: none; }
  .input { border-color: #999 !important; box-shadow: none !important; }
}