/* /team/ section 6, "Their teammate. Your company." (scenes/views.html, scenes/views.js). One company, two
   views: Sarah's settings for her teammate Scribbles, and the owner's People page. A toggle above the card
   switches the card and the list beside it. Everything is scoped under .vw. People are initials tiles,
   teammates the cloud mark in their colour. White, ink, lime only on the highlighter and the small checks;
   green and amber only as small status dots. The cards lay themselves out by their own width (a container
   query), so their text never shrinks. Without JS: Sarah's view only, and her permission rows still work. */

.vw {
  --vw-green: #2bb24c;
  --vw-green-ink: #1c7a34;
  --vw-amber: #e59a0b;
  --vw-amber-ink: #8a5300;
  --vw-red: #d0453a;
  --vw-tile-ring: #d6d6d2;
  --vw-mono: "Geist Mono", ui-monospace, monospace;
}
.vw [hidden] { display: none !important; }
.vw .vw-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The section: copy on the left, toggle and card on the right; stacked below 1180 px (the page's .split). */
.vw .vw-col { display: flex; flex-direction: column; align-items: center; gap: 20px; flex: 1 1 0; min-width: 0; }
.vw .vw-stack, .vw .vw-lists { display: grid; }
.vw .vw-stack { width: 100%; max-width: 600px; }
.vw [data-vw-pane] { grid-area: 1 / 1; min-width: 0; }
.vw .vw-list { display: flex; flex-direction: column; gap: 4px; }
.vw .vw-list-label { color: var(--graphite); }
@media (min-width: 1180.02px) {
  .vw .vw-split { gap: 56px; padding: 130px var(--gutter); }
  .vw .vw-copy { width: min(44vw, 620px); }
}
@media (max-width: 1180px) {
  .vw .vw-copy { width: 100%; max-width: 640px; }
  .vw .vw-col { flex: none; }
}
@media (min-width: 960px) and (max-width: 1179.98px) and (min-height: 600px) {
  .vw .vw-copy { width: 44%; max-width: none; flex-shrink: 0; }
  .vw .vw-col { flex: 1 1 0; min-width: 0; }
  .vw .h2 { font-size: min(5.6vw, calc((100vw - 2 * var(--gutter)) * 0.44 / 7.8)); }
}
/* Phones: the headline keeps its two lines ("Their teammate." is the long one, about 7.6 em). */
@media (max-width: 640px) {
  .vw .h2 { font-size: min(52px, calc((100vw - 2 * var(--gutter)) / 7.8)); }
}

/* Switching views (views.js marks the hidden half inert): the old half fades, the new one rises in. Side by
   side, both cards share one cell, so the toggle never moves. Stacked (the list above, the card below the
   toggle), only the card on show takes room, so nothing sits empty under the shorter one; the lists still
   share a cell, so the toggle stays put under the visitor's finger. */
.vw.is-js [data-vw-pane] { transition: opacity 0.4s ease 0.12s, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) 0.12s, visibility 0s linear 0s; }
.vw.is-js [data-vw-pane][inert] { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity 0.22s ease, transform 0.3s ease, visibility 0s linear 0.3s; }
@media (max-width: 1180px) {
  .vw.is-js .vw-stack > [data-vw-pane][inert] { display: none; }
  @starting-style { .vw.is-js .vw-stack > [data-vw-pane]:not([inert]) { opacity: 0; transform: translateY(10px); } }
}
@media (min-width: 960px) and (max-width: 1179.98px) and (min-height: 600px) {
  .vw.is-js .vw-stack > [data-vw-pane][inert] { display: flex; }
}

/* People: initials in a small rounded square (the page's convention: 34 px, radius 9, mono 12). */
.vw .vw-tile { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--vw-tile-ring); color: var(--ink); font: 600 12px/1 var(--vw-mono); letter-spacing: 0.02em; }
/* With a photo: it covers the letters once it has loaded (views.js); a missing photo leaves the letters. */
.vw .vw-tile { position: relative; overflow: hidden; }
.vw .vw-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; -webkit-user-drag: none; }
.vw .vw-tile:has(img)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); pointer-events: none; }
.vw.is-js .vw-tile img { opacity: 0; transition: opacity 0.3s ease; }
.vw.is-js .vw-tile img.is-in { opacity: 1; }
.vw .vw-mark { display: block; flex-shrink: 0; object-fit: contain; -webkit-user-drag: none; }

/* The toggle: two halves, an ink thumb that slides under the chosen one. */
.vw .vw-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 380px; padding: 4px; border-radius: 999px; background: #f2f2f0; }
.vw .vw-thumb { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--ink); box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.55); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1); }
.vw[data-view="owner"] .vw-thumb { transform: translateX(100%); }
.vw .vw-seg { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 6px 14px 6px 10px; border: 0; border-radius: 999px; background: none; color: var(--graphite); font-weight: 600; font-size: 15px; line-height: 20px; white-space: nowrap; cursor: pointer; transition: color 0.3s ease; -webkit-tap-highlight-color: transparent; }
.vw .vw-seg[aria-pressed="true"] { color: #fff; cursor: default; }
.vw .vw-seg[aria-pressed="false"]:hover { color: var(--ink); }
.vw .vw-seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.vw .vw-seg .vw-tile { width: 26px; height: 26px; border-radius: 7px; font-size: 9.2px; }
.vw .vw-seg[aria-pressed="true"] .vw-tile:has(img.is-in)::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.vw .vw-seg[aria-pressed="true"] .vw-tile { box-shadow: none; }

/* The cards. */
.vw .vw-pane { display: flex; flex-direction: column; align-items: stretch; }
.vw .vw-card { position: relative; width: 100%; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: var(--card-shadow); text-align: left; container: vwcard / inline-size; }
.vw .vw-try { margin-top: 16px; text-align: center; color: var(--graphite); }
.vw .vw-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px 16px; border-bottom: 1px solid var(--hair); }
.vw .vw-head-mark { width: 54px; height: 32px; }
.vw .vw-head-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.vw .vw-head-title { font-weight: 700; font-size: 18px; line-height: 23px; letter-spacing: -0.015em; }
.vw .vw-head-of { font-weight: 500; color: var(--muted); white-space: nowrap; }
.vw .vw-head-yt { display: none; }
.vw .vw-head-sub, .vw .vw-label { font-family: var(--vw-mono); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.vw .vw-head-sub { text-transform: none; letter-spacing: 0.02em; font-weight: 500; font-size: 12px; line-height: 16px; }
.vw .vw-sarah .vw-head-sub { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-size: 11px; line-height: 14px; }
.vw .vw-me { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-weight: 500; font-size: 13px; line-height: 16px; color: var(--graphite); }
.vw .vw-me .vw-tile { width: 28px; height: 28px; border-radius: 7.5px; font-size: 9.9px; }

/* Sarah's view: her accounts, where she talks to Scribbles, and what Scribbles may do. */
.vw .vw-sec { display: flex; flex-direction: column; gap: 10px; padding: 16px 22px 0; }
.vw .vw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vw .vw-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px 6px 9px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px var(--ring); font-weight: 500; font-size: 14px; line-height: 18px; }
.vw .vw-chip img { display: block; width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; -webkit-user-drag: none; }
.vw .vw-chip .vw-chip-device { width: 22px; height: 22px; margin: -2px -1px -2px -2px; }
.vw .vw-chip-mark { width: 24px; height: 14px; flex-shrink: 0; }
.vw .vw-ok { display: block; width: 14px; height: 14px; flex-shrink: 0; }
.vw .vw-chip .vw-ok { margin-left: 1px; }

.vw .vw-perms { gap: 0; padding-top: 18px; }
.vw .vw-perms .vw-label { margin-bottom: 4px; }
.vw .vw-perm { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.vw .vw-perm:last-child { border-bottom: 0; }
.vw .vw-perm-what { min-width: 0; font-weight: 500; font-size: 15px; line-height: 20px; }
/* Allowed / Ask me first / Never: real radio buttons (so they work without JS), drawn as one segmented control. */
.vw .vw-seg3 { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 312px; flex-shrink: 0; padding: 3px; border-radius: 11px; background: #f2f2f0; }
.vw .vw-seg3 input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.vw .vw-seg3 label { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 6px; border-radius: 8px; color: var(--graphite); font-weight: 500; font-size: 13px; line-height: 16px; white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.vw .vw-seg3 label:hover { color: var(--ink); }
.vw .vw-seg3 label[data-v="allow"] { --c: var(--vw-green); }
.vw .vw-seg3 label[data-v="ask"] { --c: var(--vw-amber); }
.vw .vw-seg3 label[data-v="never"] { --c: var(--vw-red); }
.vw .vw-seg3 input:checked + label { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.2); cursor: default; }
.vw .vw-seg3 input:checked + label::before { content: ""; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--c); }
.vw .vw-seg3 input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 1px; }
.vw .vw-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 13px 22px 15px; border-top: 1px solid var(--hair); font-size: 13px; line-height: 18px; color: var(--muted); }
.vw .vw-saved { margin-left: auto; color: var(--vw-green-ink); font-family: var(--vw-mono); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; transition: opacity 0.3s ease; }
.vw .vw-saved.is-on { opacity: 1; }

/* Your view: the People page. */
.vw .vw-people { display: flex; flex-direction: column; padding: 2px 22px 14px; }
.vw .vw-row { display: grid; grid-template-columns: 40px minmax(0, 132px) minmax(0, 1fr); grid-template-areas: "tile who mates" "tile who status"; align-items: center; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.vw .vw-row:focus { outline: none; }
.vw .vw-row > .vw-tile { grid-area: tile; width: 40px; height: 40px; border-radius: 10.5px; font-size: 13.5px; }
.vw .vw-who { grid-area: who; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vw .vw-who b { font-weight: 600; font-size: 15px; line-height: 19px; }
.vw .vw-who span { font-size: 13px; line-height: 17px; color: var(--muted); }
.vw .vw-mates { grid-area: mates; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.vw .vw-mate { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 5px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ring); font-weight: 600; font-size: 13px; line-height: 17px; }
.vw .vw-mate .vw-mark { width: 32px; height: 19px; }
.vw .vw-status { grid-area: status; display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--graphite); font-size: 13px; line-height: 17px; }
.vw .vw-status i { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--vw-green); }
/* The open seat, and Priya's row once she is invited. */
.vw .vw-open { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 66px; margin-top: 10px; padding: 12px 14px; border: 1.5px dashed var(--vw-tile-ring); border-radius: 14px; }
.vw .vw-invite { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 16px; font-size: 14px; }
.vw .vw-open-text { font-size: 13px; line-height: 17px; color: var(--muted); }
.vw .vw-new { min-height: 66px; margin-top: 10px; border-bottom: 0; }
.vw .vw-pick { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px; border: 1.5px dashed #c9c9c5; border-radius: 8px; color: var(--graphite); font-weight: 500; font-size: 13px; line-height: 17px; }
.vw .vw-sent { color: var(--ink); font-weight: 500; }

.vw .vw-week { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "label text marks"; align-items: center; gap: 8px 14px; padding: 14px 22px; border-top: 1px solid var(--hair); }
.vw .vw-week > .vw-label { grid-area: label; }
.vw .vw-week-text { grid-area: text; color: var(--graphite); font-size: 15px; line-height: 20px; }
.vw .vw-week-text b { color: var(--ink); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vw .vw-week-marks { grid-area: marks; display: flex; gap: 2px; }
.vw .vw-week-marks .vw-mark { width: 32px; height: 19px; }

.vw .vw-ask { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "logo text acts"; align-items: center; gap: 10px 14px; padding: 16px 22px; border-top: 1px solid var(--hair); }
/* Who is asking (Scribbles), and where (a small Instagram badge on the corner). */
.vw .vw-ask-logo { grid-area: logo; align-self: start; position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ring); }
.vw .vw-ask-av { display: block; width: 38px; height: 22.5px; object-fit: contain; -webkit-user-drag: none; }
.vw .vw-ask-app { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--ring); }
.vw .vw-ask-app img { display: block; width: 12px; height: 12px; }
.vw .vw-ask-text { grid-area: text; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vw .vw-ask-label { display: inline-flex; align-items: center; gap: 8px; color: var(--vw-amber-ink); }
.vw .vw-ask-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--vw-amber); box-shadow: 0 0 0 3px rgba(229, 154, 11, 0.18); transition: background 0.3s ease, box-shadow 0.3s ease; }
.vw .vw-ask-what { font-weight: 600; font-size: 15px; line-height: 20px; letter-spacing: -0.005em; }
.vw .vw-ask-note { color: var(--muted); font-size: 13px; line-height: 18px; }
.vw .vw-ask-acts { grid-area: acts; display: flex; gap: 8px; }
.vw .vw-ask-acts button { min-height: 38px; padding: 0 16px; font-size: 14px; }
.vw .vw-ask[data-state="approved"] .vw-ask-label, .vw .vw-ask[data-state="none"] .vw-ask-label { color: var(--vw-green-ink); }
.vw .vw-ask[data-state="approved"] .vw-ask-dot, .vw .vw-ask[data-state="none"] .vw-ask-dot { background: var(--vw-green); box-shadow: 0 0 0 3px rgba(43, 178, 76, 0.18); }
.vw .vw-ask[data-state="declined"] .vw-ask-label, .vw .vw-ask[data-state="never"] .vw-ask-label { color: var(--graphite); }
.vw .vw-ask[data-state="declined"] .vw-ask-dot, .vw .vw-ask[data-state="never"] .vw-ask-dot { background: #a3a3a0; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06); }

.vw .vw-private { display: flex; align-items: center; gap: 10px; padding: 13px 22px 15px; border-top: 1px solid var(--hair); color: var(--graphite); font-size: 13px; line-height: 18px; }
.vw .vw-private svg { flex-shrink: 0; color: var(--ink); }

/* Narrow cards (phones, and the side-by-side tablet layout). */
@container vwcard (max-width: 539.98px) {
  .vw .vw-perm { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0; }
  .vw .vw-seg3 { width: 100%; }
  .vw .vw-seg3 label { min-height: 38px; }
  .vw .vw-week { grid-template-columns: auto auto; grid-template-areas: "label marks" "text text"; justify-content: space-between; }
  .vw .vw-ask { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "logo text" ". acts"; }
}
@container vwcard (max-width: 459.98px) {
  .vw .vw-head, .vw .vw-sec, .vw .vw-foot, .vw .vw-people, .vw .vw-week, .vw .vw-ask, .vw .vw-private { padding-left: 16px; padding-right: 16px; }
  .vw .vw-head { gap: 10px; padding-top: 16px; padding-bottom: 14px; }
  .vw .vw-head-mark { width: 46px; height: 27px; }
  .vw .vw-head-title { font-size: 17px; line-height: 22px; }
  .vw .vw-head-of { display: none; }
  .vw .vw-head-yt { display: inline; }
  .vw .vw-me-name { display: none; }
  .vw .vw-chip { font-size: 13.5px; }
  .vw .vw-row { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "tile who" ". mates" ". status"; align-items: start; }
  .vw .vw-who { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-height: 40px; align-content: center; }
  .vw .vw-mates { margin-top: -4px; }
  .vw .vw-open { min-height: 0; }
  .vw .vw-new { min-height: 0; }
  .vw .vw-ask { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "logo text" "acts acts"; gap: 12px; }
  .vw .vw-ask-acts button { flex: 1; min-height: 42px; }
}

@container vwcard (max-width: 339.98px) {
  .vw .vw-week { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "text" "marks"; }
}

/* Motion: the rows rise in when the People page appears, Priya's row arrives, the status dots breathe. */
@media (prefers-reduced-motion: no-preference) {
  .vw.is-js .vw-pane:not([inert]) .vw-row { animation: vw-rise 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both; animation-delay: calc(0.18s + var(--i, 0) * 0.06s); }
  .vw.is-js .vw-pane:not([inert]) .vw-row.is-fresh { animation-delay: 0s; }
  .vw.is-live .vw-status i { animation: vw-breathe 2.4s ease-in-out infinite; }
  @keyframes vw-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes vw-breathe { 50% { opacity: 0.35; } }
}
@media (prefers-reduced-motion: reduce) {
  .vw.is-js [data-vw-pane], .vw.is-js [data-vw-pane][inert], .vw .vw-thumb, .vw .vw-seg, .vw .vw-seg3 label, .vw .vw-saved, .vw .vw-ask-dot { transition: none; }
}
@media (hover: none) {
  .vw .vw-seg[aria-pressed="false"]:hover { color: var(--graphite); }
  .vw .vw-seg3 label:hover { color: var(--graphite); }
  .vw .vw-seg3 input:checked + label:hover { color: var(--ink); }
}