/* Live meeting desk: the live indicator and the Zoom app surface. */
.quiet-dot.live-dot{background:#c2372b;box-shadow:0 0 0 3px rgba(194,55,43,.18)}
#viewer:disabled{opacity:1;cursor:default}

/* Zoom app surface: a narrow side panel inside a meeting. Only the cards and
   the card being read -- no side column, no headline copy, no navigation. */
body.surface-zoom .meeting-nav,
body.surface-zoom .page-intro,
body.surface-zoom .app-header nav,
body.surface-zoom .list-end{display:none}
body.surface-zoom .app-shell{display:block;min-height:0}
body.surface-zoom .app-header{padding:8px 12px;gap:8px}
body.surface-zoom .brand img{width:24px;height:24px}
body.surface-zoom main#main{padding:10px 12px;max-width:none}
body.surface-zoom .meeting-strip{margin-bottom:8px}
body.surface-zoom .toolbar{margin-bottom:8px}
body.surface-zoom .content-grid{display:block}
body.surface-zoom .desk-columns{display:flex;flex-direction:column;gap:12px}
/* Fit the Zoom panel's width: nothing wider than the panel. */
body.surface-zoom{overflow-x:hidden}
body.surface-zoom #viewer-caption{display:none !important}
body.surface-zoom .viewer-label select{min-width:0;max-width:120px}
body.surface-zoom .toolbar{flex-wrap:wrap}
body.surface-zoom .segmented{display:flex;width:100%}
body.surface-zoom .segmented button{flex:1;min-width:0;padding-left:4px;padding-right:4px}
/* The Zoom panel drops two lines the tabs already say (Kellan, 9/29): "To-dos
   assigned to you. See the full meeting record" and the counts line above the
   columns. The counts line stays for screen readers and as the focus target
   navigation lands on, so it is visually hidden rather than removed. */
body.surface-zoom #personal-context{display:none !important}
body.surface-zoom .section-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;margin:0;padding:0}
body.surface-zoom .desk-column,body.surface-zoom .card{min-width:0;max-width:100%}
body.surface-zoom .card h3{overflow-wrap:anywhere}
/* This meeting / All meetings, above the meeting picker. */
.zoom-scope{margin:0 0 10px}
/* On the web the switch sizes to its buttons, like My to-dos / Everything;
   phones and the Zoom panel keep the full-width segmented control. */
@media(min-width:701px){body:not(.surface-zoom) .zoom-scope{width:fit-content}}
/* No name picked: the picker says so (classic .me.unset). Token colour, so dark mode follows. */
.viewer-label.unset select{border-color:var(--red);color:var(--red)}
.session-help.warn{color:var(--red)}
/* Person colours (#13): owner badge and person chips. White text on
   a person's colour is a token so the dark generator never flips it. */
:root{--on-person:white}
.avatar.colored{background:var(--owner);color:var(--on-person)}
/* Ownership remains in the named avatar; all card edges share hover/selection. */
/* Tracker #12: reader Details and quiet to-do badges. */
.detail-facts dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:8px 0;font-size:13px}
.detail-facts dt{color:var(--muted)}
.detail-facts dd{margin:0;overflow-wrap:anywhere}
.detail-facts .detail-id{font-family:var(--mono);font-size:12px}
.detail-history{margin:4px 0 0;padding-left:18px;font-size:13px}
.detail-history small{display:block;color:var(--muted);font-size:12px}
.todo-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.todo-badge{font-size:12px;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.todo-badge.overdue,.todo-badge.high{color:var(--red);border-color:var(--red)}
.todo-badge.warn{color:var(--orange);border-color:var(--orange)}
/* "Send to Claude" session overlay (Kanton, 2026-09-23). */
.send-dialog{border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:16px;width:min(440px,calc(100vw - 32px));max-height:80vh;overflow:auto}
.send-dialog::backdrop{background:rgb(0 0 0 / 45%)}
.send-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px}
.send-dialog-head h2{font-size:18px;margin:0}
.send-group{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.send-group-title{font-size:12px;color:var(--muted);margin:6px 0 0}
.send-session{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);text-align:left;cursor:pointer}
.send-session:hover:not(:disabled),.send-session:focus-visible{border-color:var(--orange)}
.send-session:disabled{opacity:.55;cursor:not-allowed}
.send-session-name{font-weight:600;overflow-wrap:anywhere}
.send-session-meta{font-size:12px;color:var(--muted);white-space:nowrap}
.send-empty{color:var(--muted);font-size:13px;margin:10px 0 0}
body.surface-zoom .send-dialog{width:calc(100vw - 16px);max-width:none;padding:12px}
/* Reader actions: three buttons in one row, each opening an overlay (2026-09-23). */
.action-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.action-button{font-size:13px}
/* Send to Claude on each card in the list. */
.card-foot{flex-wrap:wrap}
.card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.card-action{font-size:12px;padding:6px 12px}
.action-button[aria-disabled=true]{opacity:.5;cursor:not-allowed}
body.surface-zoom .action-button{flex:1 1 auto}
.person-option .send-session-name{display:inline-flex;align-items:center;gap:8px}
.person-dot{width:10px;height:10px;border-radius:50%;background:var(--chip,var(--muted));flex:none}
.person-option[aria-current=true]{opacity:.6}
/* #41: a card open where the reader replaces the list (Zoom, <=1100px):
   the list's controls act on nothing visible, so they go; the reader's top
   bar ("<- Back to cards" + the meeting) is the one way back. */
body.reader-replaces :is(.page-intro,.meeting-strip,.toolbar,.type-nav,.cards-pane,#zoom-scope,#zoom-tabs,#week-pick,.meeting-nav,.list-end){display:none !important}
body.reader-replaces .reader{position:static;width:100%;max-width:none;box-shadow:none;overflow:visible}
body.reader-replaces main#main{padding-right:0}
.reader-top .reader-meeting{font-size:12px;color:var(--muted);margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Shared scope track and consistent theme/picker affordances. */
.segmented{background:var(--paper);border:1px solid var(--line);padding:3px;gap:2px;border-radius:8px}
.segmented button{border-color:transparent;border-radius:5px;font-weight:500}
.segmented button[aria-pressed=true]{background:var(--surface);border-color:var(--line);box-shadow:none;color:var(--ink)}
#viewer{appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23888888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 12px}
/* The name picker sits beside the theme toggle; the view tabs stay centred between the brand and that pair. */
.app-header nav{margin-inline:auto}