/* V/TO (Vision/Traction Organizer) — 2026-10. Global, every class prefixed "vto-". Clean rounded cards on the
   app's tokens; light and dark via the existing variables. Final visual pass pending the approved 90.io
   reference screenshots. */
.vto-page { max-width: 1240px; }
.vto-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 0 14px; }
.vto-head h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin: 0; }
.vto-status { color: var(--muted); font-size: .9em; margin-top: 4px; }
.vto-status b { color: var(--ink); }
.vto-seg { display: inline-flex; background: var(--surface2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.vto-seg button { all: unset; cursor: pointer; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .9em; color: var(--muted); }
.vto-seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 32, 48, .12); }
.vto-seg button:focus-visible, .vto-expander:focus-visible, .vto-info:focus-visible, .vto-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vto-banner { border-radius: 14px; padding: 12px 16px; margin: 0 0 14px; background: var(--surface2); border: 1px solid var(--line); }
.vto-banner.draft { border-color: #d9a441; background: color-mix(in srgb, #f5c26b 18%, var(--surface)); }
.vto-banner.off { border-style: dashed; }
.vto-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vto-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(16, 32, 48, .04); min-width: 0; }
.vto-card.wide { grid-column: 1 / -1; }
.vto-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.vto-card-head h3 { margin: 0; font-size: 1.08em; font-weight: 800; }
.vto-card-tools { display: flex; gap: 8px; align-items: center; }
.vto-sub { color: var(--muted); font-size: .85em; margin-top: 2px; }
.vto-link { all: unset; cursor: pointer; color: var(--accent); font-weight: 700; font-size: .9em; }
.vto-empty { color: var(--muted); margin: 4px 0; }
.vto-values { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.vto-desc { display: block; color: var(--muted); font-size: .9em; font-weight: 400; }
.vto-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.vto-dl dt { color: var(--muted); font-size: .85em; }
.vto-dl dd { margin: 0; font-weight: 600; }
.vto-tagline { margin: 12px 0 0; font-weight: 700; color: var(--accent); }
.vto-figures { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.vto-fig { background: var(--surface2); border-radius: 12px; padding: 8px 12px; min-width: 110px; }
.vto-fig span { display: block; color: var(--muted); font-size: .78em; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.vto-fig b { font-size: 1.15em; }
.vto-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.vto-chip { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: .85em; color: var(--muted); }
.vto-chip b { color: var(--ink); }
.vto-label { font-size: .72em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 12px 0 4px; }
.vto-group { font-weight: 700; margin-top: 6px; }
.vto-list { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.vto-text { margin: 0; }
.vto-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vto-who { color: var(--muted); font-size: .85em; margin-left: 4px; }
.vto-pill { display: inline-block; font-size: .72em; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: var(--surface2); color: var(--muted); margin-left: 4px; }
.vto-pill.warn { background: color-mix(in srgb, #f5c26b 35%, var(--surface)); color: var(--ink); }
.vto-pill.ok { background: var(--accent-soft); color: var(--accent); }
.vto-note { color: var(--muted); font-size: .8em; margin: 10px 0 0; }
.vto-table { width: 100%; border-collapse: collapse; font-size: .9em; margin: 4px 0 8px; }
.vto-table th, .vto-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vto-table td small { color: var(--muted); }
.vto-revs { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; }
.vto-form { display: grid; gap: 10px; }
.vto-form label { display: grid; gap: 4px; font-size: .85em; color: var(--muted); font-weight: 600; }
.vto-form input, .vto-form textarea, .vto-form select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; width: 100%; box-sizing: border-box; }
.vto-form textarea { min-height: 90px; field-sizing: content; }
.vto-form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.vto-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.vto-help { color: var(--muted); font-size: .8em; }
.vto-drop { border: 2px dashed var(--line); border-radius: 16px; padding: 22px; text-align: center; position: relative; background: var(--surface2); }
.vto-drop.over { border-color: var(--accent); }
.vto-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.vto-docs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.vto-docs li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.vto-docs .meta { color: var(--muted); font-size: .8em; }
.vto-docline { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 8px 0 14px; font-size: .92em; }
.vto-doccard { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; background: var(--surface2); }
.vto-doccard-main { min-width: 0; flex: 1 1 260px; display: grid; gap: 4px; justify-items: start; }
.vto-doccard-kicker { font-size: .75em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.vto-doccard-title { font-size: 1.15em; font-weight: 700; overflow-wrap: anywhere; }
.vto-doccard .meta { color: var(--muted); font-size: .85em; overflow-wrap: anywhere; }
.vto-doccard .vto-pill { margin-left: 0; }
.vto-doccard-extract { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px dashed var(--line); padding-top: 10px; }
.vto-subhead { margin: 18px 0 4px; }
.vto-publish { margin-top: 16px; }
.vto-err { color: #b42318; font-weight: 600; }
@media (max-width: 820px) {
    .vto-grid, .vto-two { grid-template-columns: minmax(0, 1fr); }
    .vto-card { padding: 14px; border-radius: 14px; }
    .vto-dl { grid-template-columns: 1fr; }
}

/* Checkpoint D: publish blocked while imported values await review; Review V/TO version banner (room). */
.vto-blocked { margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warn, #b7791f) 12%, transparent); color: var(--text); font-weight: 600; }
.vtobasis { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line, rgba(0,0,0,.12)); background: var(--panel, transparent); font-size: 15px; }
.vtotext { white-space: pre-wrap; margin: 6px 0; }

/* Wide financial tables scroll inside their own card on a phone — never the page (visual review V1). */
.vto-tablewrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vto-tablewrap .vto-table { margin: 0; }
.vto-grid > * { min-width: 0; }
abbr[title] { text-decoration: none; cursor: help; }

.vto-card li .meta { color: var(--muted); font-size: .85em; }
.vto-confirmall { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 14px; padding: 12px 14px; margin: 6px 0 10px; }
.vto-card-head .vto-pill { margin-left: 8px; }

/* One-page V/TO (2026-10-10; order 2026-10-11): current V/TO → Vision → Traction → Review & Publish → previous V/TOs → permissions. */
.vto-section { margin-bottom: 16px; }
.vto-card-head h2 { margin: 0; font-size: 1.15em; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.vto-doccard-date { font-size: .95em; }
.vto-addform { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.vto-written-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.vto-expander { all: unset; cursor: pointer; display: flex; align-items: flex-start; gap: 10px; flex: 1 1 260px; min-width: 0; }
.vto-expander .meta { display: block; color: var(--muted); font-size: .85em; font-weight: 400; overflow-wrap: anywhere; }
.vto-written-title { display: block; font-size: 1.15em; font-weight: 800; }
.vto-chev { font-size: 1.1em; line-height: 1.4; color: var(--accent); width: 1em; }
.vto-info { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface2); color: var(--muted); font-size: 13px; font-weight: 800; font-style: italic; font-family: Georgia, serif; }
.vto-info[aria-expanded=true] { border-color: var(--accent); color: var(--accent); }
.vto-infobox { border: 1px solid var(--line); background: var(--surface2); border-radius: 12px; padding: 10px 14px; margin: 0 0 10px; }
.vto-infobox p { margin: 4px 0; }
.vto-reviewsum { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.vto-reviewsum .vto-pill { margin-left: 0; }
.vto-reviewsum button.vto-pill { font: inherit; font-size: .72em; font-weight: 700; border: 0; cursor: pointer; padding: 3px 10px; }
.vto-reviewsum button.vto-pill::after { content: " \203A"; }
@media (hover: hover) { .vto-reviewsum button.vto-pill:hover { filter: brightness(.95); text-decoration: underline; } }
.vto-reviewsum button.vto-pill:focus-visible, .vto-revgroup > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vto-revgroup { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin-top: 10px; background: var(--surface); scroll-margin-top: 12px; }
.vto-revgroup > summary { cursor: pointer; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 2px; list-style: none; }
.vto-revgroup > summary::-webkit-details-marker { display: none; }
.vto-revgroup > summary > b { grid-column: 1; }
.vto-revgroup > summary > .meta { grid-column: 1 / -1; }
.vto-revgroup > summary::after { content: "Show \25BE"; grid-column: 2; grid-row: 1; align-self: center; white-space: nowrap; font-size: .8em; font-weight: 700; color: var(--accent); }
.vto-revgroup[open] > summary::after { content: "Hide \25B4"; }
.vto-revgroup > summary .meta { color: var(--muted); font-size: .85em; font-weight: 400; }
@media (max-width: 600px) { .vto-reviewsum button.vto-pill { padding: 6px 12px; } }
.vto-revgroup[open] > summary { margin-bottom: 4px; }

/* Vision and Traction (2026-10-11) — the same written V/TO on /vision and in the Quarterly room (VtoWrittenView).
   Two clearly separate parts: a tinted panel with a strong uppercase heading in its own colour. */
.vto-part { border-radius: 22px; padding: 18px; margin: 0 0 18px; border: 1px solid var(--line); }
.vto-part-vision { --part: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.vto-part-traction { --part: var(--ink); background: var(--surface2); }
.vto-part-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0 0 14px; padding: 0 2px 10px; border-bottom: 3px solid var(--part); }
.vto-part-head h2 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--part); }
.vto-part-tag { color: var(--muted); font-weight: 600; font-size: 1.05em; }
.vto-card-foot { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.vto-prompt { margin: 0 0 6px; font-style: italic; color: var(--muted); }
.vto-subcap { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.vto-readnote { margin-bottom: 16px; border-color: var(--accent); }
.vto-readnote h3 { margin: 0 0 6px; font-size: 1.08em; font-weight: 800; }
.vto-readnote p { margin: 6px 0; }
.vto-review .vto-card { background: var(--surface); }
.vto-review > .vto-card-head { margin-bottom: 12px; flex-wrap: wrap; }
.vto-review > .vto-card-head .vto-pill { white-space: nowrap; }
.vto-room-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.vto-room-top .vtobasis { margin: 0; flex: 1 1 320px; }
@media (max-width: 820px) { .vto-part { padding: 12px; border-radius: 16px; } }

/* In-page PDF viewer (VtoPdfViewer): over the page, no popup; full screen on a phone. */
html.vto-viewer-open { overflow: hidden; }
.vto-viewer { position: fixed; inset: 0; z-index: 1000; display: flex; padding: 12px; background: rgba(10, 16, 24, .55); }
.vto-viewer-panel { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 1800px; margin: 0 auto; background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(10, 16, 24, .3); }
.vto-viewer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.vto-viewer-title { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; }
.vto-viewer-title b { overflow-wrap: anywhere; }
.vto-viewer-title span { color: var(--muted); font-size: .85em; }
.vto-viewer-body { flex: 1; min-height: 0; background: var(--surface2); }
.vto-viewer-body iframe { display: block; width: 100%; height: 100%; border: 0; }
.vto-viewer-fallback { max-width: 520px; margin: 0 auto; padding: 48px 20px; text-align: center; }
@media (max-width: 700px) { .vto-viewer { padding: 0; } .vto-viewer-panel { border-radius: 0; } }

/* Quarterly room live views (2026-10-13): long-term issues with a solve checkbox, add row, YTD note. */
.vto-lt-live li { list-style-position: outside; }
.vto-lt-row { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.vto-lt-row input[type=checkbox] { width: 22px; height: 22px; margin-top: 2px; flex: none; cursor: pointer; }
.vto-lt-add { display: flex; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }
.vto-lt-add .field { flex: 1 1 220px; min-width: 0; }
.vto-ytd { margin: 4px 0 10px; }
/* Long Core Focus / Niche text wraps inside its card at mid widths (iPad landscape overflowed by 44px, 2026-10-14). */
.vto-dl { grid-template-columns: max-content minmax(0, 1fr); }
.vto-dl dd { overflow-wrap: break-word; }