/* View as... and the Roles tour (spec 2026-10-02 D18, §4.7), as in the approved mockups
   (docs/superpowers/mockups/2026-10-02-pursuit-desk-mockups.html). Loaded after styles.css. */
.app { position: relative; }   /* the View as popover sits under the top bar */
/* styles.css --amber (#8a6a1f) is 4.30:1 on --amber-bg; the mockup's #7a5c18 is 5.31:1 (AA). */
.va-strip, .va-pop, .tour { --amber: #7a5c18; }
.seg-narrow { display: none; }

.va-strip { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 7px 18px; background: var(--amber-card); border-bottom: 1px solid var(--amber-line); font-size: 12.5px; }
.va-label { font: 600 11px var(--mono); letter-spacing: .08em; color: var(--amber); }
.va-cant { color: var(--amber); display: inline-flex; gap: 5px; align-items: center; min-width: 0; }
.va-strip .cap-btn { margin-left: auto; min-height: 30px; padding: 3px 10px; }

.va-pop { position: absolute; top: 52px; right: 12px; z-index: 25; width: 400px; max-width: calc(100% - 24px); max-height: 70vh; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(29,28,26,.12); }
.va-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 0 14px; font: 600 15px var(--serif); }
.va-pop .x { border: 0; background: transparent; color: var(--mute); font-size: 20px; cursor: pointer; min-width: 40px; min-height: 40px; border-radius: 6px; }
.va-intro { margin: 2px 14px 10px; font-size: 12.5px; color: var(--mute); line-height: 1.45; }
.va-list { border-top: 1px solid var(--line); }
.va-row { display: grid; gap: 4px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; padding: 10px 14px; cursor: pointer; font: inherit; color: var(--ink); min-height: 56px; }
.va-row:hover { background: var(--faint); }
.va-row.cur { background: var(--blue-bg); }
.va-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.va-name { font-weight: 600; font-size: 13.5px; }
.va-title { font-size: 12px; color: var(--mute); }
.va-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rchip { font: 500 11px var(--mono); background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-line); border-radius: 4px; padding: 0 6px; white-space: nowrap; }
.rchip.ghost { background: var(--faint); color: var(--ghost); border-color: var(--line); }
.va-line { font-size: 12px; line-height: 1.45; color: var(--ink); }
.va-line .k { font-weight: 600; }
.va-line.cant, .va-line .needs { color: var(--amber); }
.va-more { color: var(--ghost); font-size: 11.5px; }
.pill-viewing { font: 600 10.5px var(--mono); letter-spacing: .08em; background: var(--ink); color: #fff; border-radius: 999px; padding: 1px 8px; }
.tag-guided { font: 500 10.5px var(--mono); letter-spacing: .06em; color: var(--ghost); }
.va-legend { padding: 9px 14px; font-size: 12px; color: var(--mute); border-bottom: 1px solid var(--line-soft); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.va-foot { padding: 10px 14px 12px; display: grid; gap: 8px; font-size: 12px; color: var(--mute); line-height: 1.5; }
.va-foot p { margin: 0; }
.va-foot .cap-btn { justify-self: end; }
/* WHAT {FIRST} GETS: top of the conversation column for the eight non-quick people */
.va-gets { --amber: #7a5c18; display: grid; gap: 10px; padding: 12px 0 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; }
.va-gets .r-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.va-gets ul.acc { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.va-gets ul.acc li { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; line-height: 1.4; }
.va-gets ul.acc li.no { color: var(--mute); }
.va-gets .ck { color: #3d7a4e; font-weight: 600; flex: none; width: 12px; }
.va-gets .needs { color: var(--amber); }
.va-gets .ph { margin-left: auto; font: 400 10.5px var(--mono); color: var(--ghost); white-space: nowrap; }

/* Narrow laptops and tablets in portrait (801-940px): the top bar stays on one 52px line and
   does not wrap, and .app clips it, so with the third segment it would run past the right edge.
   The segment shows its short label ("Others ▾" / "Teodora ▾"), the VIEWING AS label goes as it
   does on phones, and the firm name may shorten with an ellipsis. :has(.seg-narrow) keeps the
   older two-button top bar as it was. */
@media (max-width: 940px) {
  .seg-wide { display: none; }
  .seg-narrow { display: inline; }
  .topbar:has(.seg-narrow) .viewing-label { display: none; }
  .topbar:has(.seg-narrow) .firm { min-width: 0; overflow: hidden; }
  .topbar:has(.seg-narrow) .firm-name { overflow: hidden; text-overflow: ellipsis; }
}
/* Laptops (941-1400px): with the "Roles tour" link and a long third segment ("Sunniva ·
   Contracts admin ▾", .va-seg.active) the top bar wrapped inside its 52px line at 1280px. Only
   then the page counter gives way, as it already does at 1100px, and the firm name may shorten
   with an ellipsis; with the short "View as… ▾" (the Principal path) the bar is unchanged. */
@media (max-width: 1400px) {
  .topbar:has(.va-seg.active) .sync { display: none; }
  .topbar:has(.tour-link) .firm { min-width: 0; overflow: hidden; }
  .topbar:has(.tour-link) .firm-name, .topbar:has(.tour-link) .viewing-label { white-space: nowrap; }
  .topbar:has(.tour-link) .firm-name { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 1100px) {
  .topbar:has(.va-seg.active) .viewing-label { display: none; }   /* else the firm name shrinks to nothing near 941px */
}
/* Phones: the third segment shows a first name, and the list becomes a bottom sheet. */
@media (max-width: 800px) {
  .seg-wide { display: none; }
  .seg-narrow { display: inline; }
  .va-strip { padding-left: 12px; padding-right: 12px; }
  .va-pop { position: fixed; top: auto; left: 16px; right: 16px; bottom: 16px; width: auto; max-width: none; max-height: 80dvh; z-index: 70; }
  .va-pop .x { min-width: 44px; min-height: 44px; }
}
/* Touch: the strip's Change button is 40px tall, like every other control (styles.css). */
@media (pointer: coarse), (max-width: 800px) {
  .va-strip .cap-btn { min-height: 40px; }
}

/* Roles tour: a page of its own (state.view === 'tour'), max width 1080px. */
.app.tour-mode { display: block; overflow-y: auto; }
.tour-mode .side-btn { display: none; }
.tour-link { border: 0; background: none; color: var(--blue); font: 500 12px var(--sans); text-decoration: underline; cursor: pointer; padding: 4px 2px; white-space: nowrap; }
.bnav.tour-back { border-color: var(--paper); background: var(--paper); color: var(--ink); font-weight: 600; }
.band { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.band .k { font: 500 11px var(--mono); letter-spacing: .12em; color: var(--mute); }
.band p { margin: 0; flex: 1 1 300px; font-size: 14px; line-height: 1.5; }
.tour { max-width: 1080px; margin: 0 auto; padding: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }   /* wide matrix tables scroll inside .sc-scroll, never the page */
.tour h3 { margin: 0; font: 600 22px/1.25 var(--serif); }
.tour h3:focus, .endcard p:focus { outline: none; }
.tour-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tour .link-btn { font-size: 13px; }   /* Exit tour and the end card's Back, as in the mockup */
.tsteps { display: flex; gap: 6px; flex-wrap: wrap; }
.tstep { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: var(--mute); font: 500 12px var(--sans); border-radius: 999px; padding: 4px 11px 4px 5px; cursor: pointer; min-height: 34px; }
.tstep .tnum { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--faint); font: 600 11px var(--mono); }
.tstep.on { border-color: var(--blue); color: var(--blue); }
.tstep.on .tnum { background: var(--blue); color: #fff; }
.tstep.done .tnum { background: var(--blue-bg); color: var(--blue); }
.tour-seg { display: none; }
.tcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tcard { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tc-name { font-weight: 600; font-size: 14px; }
.tc-title { font-size: 12px; color: var(--mute); margin-top: -6px; }
.tc-rows { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 7px; }
.tc-rows li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 7px; font-size: 12.5px; line-height: 1.45; }
.tc-rows .l { font-weight: 500; }
.tc-rows .v { grid-column: 2; color: var(--mute); font-size: 12px; }
.tc-rows li.rm .v, .tc-rows li.lk .v { color: var(--amber); }
.tc-rows .ck { color: #3d7a4e; }
.tc-foot { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.tour .why { border-left: 3px solid var(--blue); background: var(--blue-bg); padding: 9px 12px; font-size: 13.5px; line-height: 1.5; border-radius: 0 6px 6px 0; }
.demo-line { font: 400 11.5px var(--mono); color: var(--ghost); }
.tnav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tnav a.cap-btn { text-decoration: none; }
.dots { display: flex; gap: 6px; margin-right: auto; }
.tdot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--blue-line); background: var(--card); padding: 0; cursor: pointer; }
.tdot.on { background: var(--blue); border-color: var(--blue); }
.tour .cap-btn:disabled { opacity: .45; cursor: default; }
table.mx { width: 100%; border-collapse: collapse; font: 400 12.5px var(--sans); }
table.mx th { text-align: left; font: 500 11px var(--mono); letter-spacing: .06em; color: var(--mute); padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.mx th.c { text-align: center; white-space: normal; min-width: 72px; line-height: 1.25; }
table.mx td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.mx td.y { color: #3d7a4e; text-align: center; font-weight: 600; }
table.mx td.n { color: var(--ghost); text-align: center; }
.tour .sc-scroll { position: relative; max-width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }   /* the mockup's table box; relative keeps the absolute .sr labels inside the scroller */
.mx .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.endcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: grid; gap: 12px; }
.endcard p { margin: 0; font: 500 20px/1.35 var(--serif); }

/* Tablets and phones: one person at a time behind a switch (each button at least 40px tall). */
@media (max-width: 900px) {
  .tcards { grid-template-columns: 1fr; }
  .tour-seg { display: flex; }
  .tour-seg .seg { flex: 1; min-height: 40px; }
  .tcard:not(.sel) { display: none; }
}
@media (max-width: 800px) {
  .tour { padding: 14px 12px; }
  .tstep, .tour .cap-btn { min-height: 40px; }
}
@media (pointer: coarse), (max-width: 800px) {
  .tour-link { min-height: 40px; padding: 4px 8px; }
  .tour .link-btn { min-height: 40px; padding: 4px 8px; }   /* Exit tour x, the end card's Back */
}

/* Roles tour steps 2-5 (phase 1d): lens cards, as in the approved mockup's Roles tour. */
.tcard.restricted { background: var(--amber-card); border-color: var(--amber-line); }
.tc-rows li.blk { color: var(--amber); }
.tc-rows li.tc-wait { display: block; color: var(--ghost); font: 400 12px var(--mono); }
.fake-btn { display: inline-block; background: var(--blue); color: #fff; border-radius: 5px; padding: 2px 9px; font: 500 11.5px var(--sans); }
.tour .sublbl { font: 500 11px var(--mono); letter-spacing: .08em; color: var(--mute); margin-top: 4px; }
.tc-chip { cursor: default; margin-left: 4px; }