/* VOLURR — P7.13 · the methodology and integrity centre.
   ================================================================================================
   A reading surface, styled as one: a single measured column, generous line height, and no
   decoration competing with the text. The palette is taken entirely from the app's tokens, so it
   follows the reader's theme rather than declaring one of its own. */

.vmethod {
  position: fixed; inset: 0; z-index: var(--z-overlay, 1000);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-7, 16px);
  background: var(--scrim, color-mix(in srgb, #000 62%, transparent));
  backdrop-filter: blur(2px);
}
.vmethod-sheet {
  display: flex; flex-direction: column;
  inline-size: min(720px, 100%); max-block-size: min(86vh, 900px);
  background: var(--bg2, #0b0f1a); color: var(--txt, #eef2fa);
  border: 1px solid var(--line, #1e2536); border-radius: var(--rad-lg, 14px);
  box-shadow: var(--el-4);
  overflow: hidden;
}
.vmethod-hd {
  display: flex; align-items: center; gap: var(--sp-5, 12px);
  padding: var(--sp-7, 16px);
  border-block-end: 1px solid var(--line, #1e2536);
  /* the header stays put while the body scrolls: a reader deep in the text keeps the way out */
  flex: 0 0 auto;
}
.vmethod-hd h2 { margin: 0; flex: 1; font-size: 15px; font-weight: 650; }
.vmethod-x {
  flex: 0 0 auto; inline-size: 30px; block-size: 30px; border-radius: var(--rad-sm, 9px);
  display: grid; place-items: center; cursor: pointer; font-size: 13px;
  background: transparent; color: var(--t-muted, #7a839a);
  border: 1px solid var(--line, #1e2536);
}
.vmethod-x:hover { color: var(--txt, #eef2fa); border-color: var(--line-3, #1e2536); }
.vmethod-x:focus-visible,
.vmethod-link:focus-visible {
  outline: 2px solid var(--brand, #e23b3b); outline-offset: 2px;   /* keyboard readers get a mark */
}

.vmethod-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: var(--sp-7, 16px);
  display: flex; flex-direction: column; gap: var(--sp-7, 16px);
}
.vmethod-sec { flex: 0 0 auto; }        /* a flex child that shrinks clips its own paragraph */
.vmethod-sec h3 {
  margin: 0 0 var(--sp-2, 6px); font-size: 12px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand, #e23b3b);
}
.vmethod-sec p {
  margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--t-secondary, #bcc5d8);
  max-inline-size: 64ch;                /* running text stays at a readable measure */
}
.vmethod-ver {
  flex: 0 0 auto; padding-block-start: var(--sp-5, 12px);
  border-block-start: 1px solid var(--line, #1e2536);
  font-size: 11.5px; color: var(--t-muted, #7a839a);
}
.vmethod-ver code {
  font: 500 11px/1.5 var(--vt-mono, var(--font-mono, ui-monospace, monospace));
  color: var(--t-secondary, #bcc5d8); word-break: break-all;
}

/* The link that every verified surface carries. Deliberately a button and not a styled span: it
   opens a dialog, so it must be reachable by keyboard and announced as a control. */
.vmethod-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--t-muted, #7a839a);
  text-decoration: underline; text-underline-offset: 3px;
}
.vmethod-link:hover { color: var(--brand, #e23b3b); }

@media (max-width: 560px) {
  .vmethod { padding: 0; align-items: flex-end; }
  .vmethod-sheet { max-block-size: 92vh; border-radius: var(--rad-lg, 14px) var(--rad-lg, 14px) 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vmethod { backdrop-filter: none; }
}

:root[data-theme="light"] .vmethod-sheet,
:root[data-theme="light"] .vmethod-x { background: var(--card); color: var(--txt); }