/* Styles for the x-risk mitigation value model */

/* Secondary text. Kept dark enough to read at small sizes (about 7.5:1 on white);
   light grays like #777 were hard to read. */
:root {
  --xr-text: #1f2937;
  --xr-muted: #4a5568;
  --xr-accent: #2b6cb0;
  --xr-amber: #b7791f;
}
.muted { color: var(--xr-muted); }

.panel-sidebar {
  overflow-y: auto;
  position: sticky;
  top: var(--quarto-navbar-height, 62px);
  max-height: calc(100vh - var(--quarto-navbar-height, 62px));
  font-size: 0.9rem;
}
.panel-sidebar details summary {
  cursor: pointer;
  color: #2c5282;
  font-size: 0.85rem;
}
.panel-sidebar details > *:not(summary) {
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.4rem 0.5rem;
  background: #f7fafc;
  border-radius: 4px;
  margin-top: 0.4rem;
  color: var(--xr-text);
}
.panel-sidebar h4, .panel-sidebar h5 {
  margin-top: 1rem;
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
  color: #2d3748;
  border-bottom: 1px solid #e2e8f0;
}
.panel-sidebar form { max-width: 100%; }
.panel-sidebar, .panel-fill { min-width: 0; }

/* Labels above controls, full-width inputs: the sidebar is too narrow for side-by-side. */
.panel-sidebar form,
.panel-sidebar form[class] {
  --label-width: 100%;
  --input-width: 100%;
}
.panel-sidebar form { margin-bottom: 0.35rem; }
/* Checkboxes: keep the label and box on one line. */
.panel-sidebar form:has(input[type="checkbox"]) { --label-width: auto; gap: 0.4rem; align-items: center; }
.panel-sidebar form:has(input[type="checkbox"]) > label { margin-bottom: 0; font-weight: 600; flex: 1 1 0; min-width: 0; }
.panel-sidebar form:has(input[type="checkbox"]) > div { flex: 0 0 auto; width: auto; }
.panel-sidebar form > label { margin-bottom: 0.1rem; color: #2d3748; }
.panel-sidebar form input[type="number"] { max-width: 6.5em; }
.sidebar-note { font-size: 0.8rem; color: var(--xr-muted); margin: -0.1rem 0 0.5rem; }

.presets {
  font-size: 0.82rem;
  line-height: 1.5;
  background: #f0f5fb;
  border: 1px solid #d6e2f0;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.6rem;
}

/* ---- Hide/show the settings panel (site.js adds the buttons) ---- */
.settings-toggle {
  font-size: 0.8rem;
  border: 1px solid #a0aec0;
  background: #fff;
  color: #2d3748;
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
}
.settings-toggle:hover, .settings-toggle:focus-visible { background: #edf2f7; border-color: #4a5568; }
/* The sidebar is a Bootstrap card (a flex column), so align rather than float. */
.settings-hide { align-self: flex-end; margin: 0 0 0.3rem; }
.settings-show {
  display: none;
  position: fixed;
  left: 0;
  top: calc(var(--quarto-navbar-height, 62px) + 12px);
  z-index: 1030;
  border-left: none;
  border-radius: 0 6px 6px 0;
  padding: 0.4rem 0.6rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  font-weight: 600;
}
body.settings-hidden .settings-show { display: block; }
body.settings-hidden .layout-sidebar > .panel-sidebar { display: none !important; }
body.settings-hidden .layout-sidebar > .panel-fill { grid-column: 1 / -1 !important; }
body.settings-hidden .layout-sidebar > .panel-fill { padding-left: 2.5rem; }

/* ---- Tooltips (site.js) ---- */
.tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.2em;
  border-radius: 50%;
  border: 1px solid #4a5568;
  color: #2d3748;
  background: #fff;
  font-size: 0.78em;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: 0.1em;
  cursor: help;
  user-select: none;
}
.tip:hover, .tip:focus-visible { background: #2b6cb0; border-color: #2b6cb0; color: #fff; outline: none; }
[data-tip]:not(.tip) { text-decoration: underline dotted #4a5568; text-underline-offset: 3px; cursor: help; }
#xr-tip {
  display: none;
  position: fixed;
  z-index: 2000;
  max-width: min(340px, calc(100vw - 16px));
  padding: 0.5rem 0.65rem;
  background: #1a202c;
  color: #fff;
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.45;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  white-space: normal;
}

/* ---- Results column ---- */
.lede { font-size: 1.02rem; color: var(--xr-text); margin-bottom: 0.6rem; }
.settings-summary {
  font-size: 0.88rem;
  color: var(--xr-text);
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  margin: 0.4rem 0 0.2rem;
}
.settings-summary strong { color: #1a202c; }
.settings-summary .beyond-on { color: #744210; font-weight: 600; }
.settings-summary a { white-space: nowrap; }

/* Where each setting comes from. Text labels carry the meaning; colour only helps scanning. */
.src-line { margin-top: 0.35rem; font-size: 0.85rem; }
.src-title { font-weight: 600; color: #2d3748; margin-right: 0.2rem; }
.src-chip { display: inline-block; border-radius: 10px; padding: 0 0.5rem; margin: 0.1rem 0.1rem; font-size: 0.8rem; border: 1px solid; white-space: nowrap; }
.src-report { background: #ebf8ff; border-color: #90cdf4; color: #1a365d; }
.src-rp2026 { background: #f0fff4; border-color: #9ae6b4; color: #1c4532; }
.src-illustrative { background: #fffaf0; border-color: #f6ad55; color: #7b341e; }
.src-user { background: #faf5ff; border-color: #b794f4; color: #44337a; }
.src-details { display: inline; }
.src-details summary { display: inline; cursor: pointer; color: #2c5282; font-size: 0.82rem; margin-left: 0.3rem; }
.src-details[open] summary { display: block; margin: 0.3rem 0 0; }
.src-table { width: auto; margin-top: 0.3rem; }
.mini-btn {
  font-size: 0.78rem;
  border: 1px solid #a0aec0;
  background: #fff;
  color: #2d3748;
  border-radius: 4px;
  padding: 0.05rem 0.45rem;
  cursor: pointer;
  margin-left: 0.3rem;
}
.mini-btn:hover, .mini-btn:focus-visible { background: #edf2f7; border-color: #4a5568; }
.link-issues {
  border: 1px solid #dd6b20;
  background: #fffaf0;
  color: #2d3748;
  border-radius: 6px;
  padding: 0.45rem 0.8rem;
  margin: 0.4rem 0;
  font-size: 0.9rem;
}
.link-issues ul { margin: 0.2rem 0 0; }
.input-error { font-size: 0.82rem; color: #9b2c2c; font-weight: 600; margin: 0.1rem 0 0.5rem; }
.drivers { font-size: 0.93rem; color: var(--xr-text); margin: 0 0 0.6rem; }
.compare-box { border: 1px solid #b794f4; background: #faf5ff; border-radius: 6px; padding: 0.5rem 0.8rem; margin: 0 0 0.8rem; }
.compare-box table { width: auto; margin: 0.3rem 0; background: transparent; }

/* Quick start (top of the settings panel) */
.quickstart { background: #fff; border: 1px solid #cbd5e0; border-radius: 6px; padding: 0.35rem 0.55rem; margin-bottom: 0.6rem; }
.quickstart > summary { font-weight: 700; color: #2d3748; cursor: pointer; font-size: 0.92rem; }
.qs-q { margin: 0.45rem 0 0.2rem; }
.qs-text { font-size: 0.84rem; font-weight: 600; color: #2d3748; margin-bottom: 0.2rem; line-height: 1.35; }
.qs-opts { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.qs-opts button {
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: left;
  border: 1px solid #a0aec0;
  background: #f7fafc;
  color: #2d3748;
  border-radius: 4px;
  padding: 0.2rem 0.45rem;
  cursor: pointer;
}
.qs-opts button:hover, .qs-opts button:focus-visible { border-color: #2b6cb0; background: #ebf8ff; }
.qs-opts button.on { background: #2b6cb0; border-color: #2b6cb0; color: #fff; font-weight: 600; }
.qs-custom-label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: #2d3748; margin: 0.3rem 0 0; }
.qs-custom { width: 6em; font-size: 0.82rem; padding: 0.1rem 0.3rem; border: 1px solid #a0aec0; border-radius: 4px; }
.qs-note { font-size: 0.78rem; color: #2d3748; background: #fffaf0; border-left: 3px solid var(--xr-amber); padding: 0.2rem 0.4rem; margin-top: 0.3rem; }
.qs-fine, .jump-link {
  background: none;
  border: none;
  padding: 0;
  color: #2c5282;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.qs-fine { font-size: 0.78rem; margin-top: 0.25rem; display: block; }
.qs-fine:hover, .jump-link:hover, .qs-fine:focus-visible, .jump-link:focus-visible { color: #1a365d; }
/* A control the page just jumped to. */
.panel-sidebar form.flash { outline: 3px solid #2b6cb0; outline-offset: 3px; border-radius: 4px; background: #ebf8ff; transition: background 0.3s; }
.mc-line { font-size: 0.8rem; color: #2d3748; margin-top: 0.3rem; border-top: 1px solid #e2e8f0; padding-top: 0.25rem; }

.stat-main { border-color: #805ad5; box-shadow: 0 0 0 1px #805ad5 inset; }
table.compact tr.current-row td, table.compact td.current-cell { background: #fff4e5; font-weight: 600; }
.fig-note { font-size: 0.88em; color: var(--xr-muted); margin-top: 0.3rem; }
.how-to-read { font-size: 0.92rem; color: var(--xr-text); margin: 0.2rem 0 0.5rem; }
.panel-fill h3 { margin-top: 1.8rem; }

/* Shown in place of a result when its switch is off. Don't call this class
   "placeholder": Bootstrap uses that name for loading skeletons and paints the
   text over in solid gray. */
.switch-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  border: 1px dashed var(--xr-amber);
  background: #fffaf0;
  color: var(--xr-text);
  border-radius: 6px;
  padding: 0.55rem 0.8rem;
  margin: 0.3rem 0 0.6rem;
}
.switch-prompt p { margin: 0; flex: 1 1 18rem; }
.switch-prompt button, .share-actions button {
  border: 1px solid var(--xr-amber);
  background: #fff;
  color: #744210;
  font-weight: 600;
  border-radius: 4px;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}
.switch-prompt button:hover, .switch-prompt button:focus-visible { background: #feebc8; }

.beyond-panel {
  border: 2px solid var(--xr-amber);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  margin-top: 1rem;
  background: #fffaf0;
}
.beyond-panel h4 { border-bottom: 1px solid var(--xr-amber); color: #744210; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin: 0.6rem 0 1rem;
}
.stat {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  background: #fff;
}
.stat .label { font-size: 0.78rem; color: #2d3748; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.stat .value { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #1a202c; }
.stat .note { font-size: 0.8rem; color: var(--xr-muted); }

table.compact { font-size: 0.85rem; }
table.compact td, table.compact th { padding: 0.25rem 0.5rem; font-variant-numeric: tabular-nums; }
table.compact tfoot td { color: var(--xr-muted); }
td.match-ok { background: #e6fffa; }
td.match-warn { background: #fffbea; }
td.match-bad { background: #fff5f5; }

/* ---- Share and submit ---- */
.share-box {
  border: 1px solid #cbd5e0;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  background: #fff;
  margin: 0.5rem 0 1rem;
}
.share-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0.6rem; }
.share-actions button { border-color: #2b6cb0; color: #2c5282; }
.share-actions button:hover, .share-actions button:focus-visible { background: #ebf4ff; }
.share-actions a.btn-like {
  border: 1px solid #2b6cb0;
  border-radius: 4px;
  padding: 0.25rem 0.7rem;
  font-weight: 600;
  color: #2c5282;
  text-decoration: none;
  background: #fff;
}
.share-actions a.btn-like:hover { background: #ebf4ff; }
.share-feedback { font-size: 0.85rem; color: #22543d; min-height: 1.2em; }
textarea.share-summary {
  width: 100%;
  min-height: 9.5em;
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.8rem;
  color: var(--xr-text);
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  padding: 0.4rem;
}
#xr-submit-form label { display: block; font-weight: 600; font-size: 0.9rem; color: #2d3748; margin: 0.5rem 0 0.15rem; }
#xr-submit-form label .muted { font-weight: 400; }
#xr-submit-form input[type="text"], #xr-submit-form input[type="email"], #xr-submit-form textarea {
  width: 100%;
  max-width: 40rem;
  border: 1px solid #a0aec0;
  border-radius: 4px;
  padding: 0.3rem 0.45rem;
  font-size: 0.92rem;
}
#xr-submit-form textarea { min-height: 5em; }
#xr-submit-form .consent { display: flex; gap: 0.45rem; align-items: flex-start; font-weight: 400; max-width: 40rem; }
#xr-submit-form .consent input { margin-top: 0.3rem; }
#xr-submit-form button[type="submit"] {
  margin-top: 0.7rem;
  border: 1px solid #2b6cb0;
  background: #2b6cb0;
  color: #fff;
  font-weight: 600;
  border-radius: 4px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}
#xr-submit-form button[type="submit"]:disabled { opacity: 0.6; cursor: wait; }
.submit-status { font-size: 0.9rem; margin-top: 0.4rem; }
.submit-status.ok { color: #22543d; }
.submit-status.err { color: #9b2c2c; font-weight: 600; }
.visually-hidden-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Shared scenarios page ---- */
.scenario-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.7rem 0.9rem; margin: 0.6rem 0; background: #fff; }
.scenario-card h4 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.scenario-card .meta { font-size: 0.85rem; color: var(--xr-muted); }

/* ---- Status tables (About page) ---- */
td.status-strong { color: #22543d; font-weight: 600; }
td.status-partial { color: #744210; font-weight: 600; }
td.status-none { color: #9b2c2c; font-weight: 600; }

/* ---- Context page lineage list ---- */
.lineage { border-left: 3px solid #cbd5e0; padding-left: 0.9rem; margin: 0.8rem 0 1.2rem; }
.lineage p { margin: 0.35rem 0; }

.annotator-frame { width: 300px !important; max-width: 300px !important; }

@media (max-width: 991px) {
  body.settings-hidden .layout-sidebar > .panel-fill { padding-left: 0; }
}
@media (max-width: 767px) {
  .layout-sidebar, .panel-fill.panel-grid { display: block; }
  .layout-sidebar .panel-sidebar { position: static !important; max-height: none !important; }
  main table { display: block; max-width: 100%; overflow-x: auto; }
  .settings-show { top: auto; bottom: 12px; }
}