.qr-signin-card{padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2);display:flex;flex-direction:column;align-items:flex-start;gap:12px}.qr-signin-card h4,.qr-signin-card h1,.qr-signin-card p{margin:0}.qr-signin-card p{color:var(--dim);line-height:1.5}.qr-signin-card button{min-height:44px;white-space:normal}.qr-signin-image{width:224px;max-width:100%;height:auto;border-radius:12px;background:white}.qr-match{font-size:36px;letter-spacing:.2em;font-variant-numeric:tabular-nums;color:var(--accent)}.qr-phone{min-height:100dvh;box-sizing:border-box;display:grid;place-items:center;padding:calc(env(safe-area-inset-top) + 24px) 20px calc(env(safe-area-inset-bottom) + 24px);background:var(--bg-0);color:var(--text)}.qr-phone>.qr-signin-card{width:min(100%,420px);box-sizing:border-box;padding:28px;gap:20px}.qr-phone h1{font-size:28px}.qr-signin-card [role=alert]{color:var(--text)}

.qr-signin-launch{margin-top:24px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2);display:flex;flex-direction:column;gap:16px}.qr-signin-launch h4{margin:0 0 8px}.qr-signin-launch p{margin:0;color:var(--dim);line-height:1.5}.qr-signin-launch button{align-self:flex-start;min-height:44px}.qr-dialog-overlay{position:fixed;inset:0;z-index:1800;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));background:#080611b3;backdrop-filter:blur(8px);box-sizing:border-box;overflow:auto}.qr-dialog{width:min(460px,100%);max-height:100%;overflow:auto;background:var(--bg-1);color:var(--text);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 90px #0007;animation:qr-arrive .2s ease-out}.qr-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border-bottom:1px solid var(--line)}.qr-dialog h2{font-size:23px;margin:5px 0 0}.qr-dialog header button{min-width:44px;min-height:44px;font-size:24px}.qr-eyebrow{font-size:10px;letter-spacing:.15em;font-weight:700;color:var(--dim)}.qr-dialog-content{border:0;border-radius:0;background:transparent;padding:24px;align-items:center;text-align:center;gap:20px}.qr-dialog-content .qr-signin-image{width:240px}.qr-login-option{display:flex;flex-direction:column;gap:18px;margin:20px 0}.qr-login-option button{width:100%;min-height:48px}.qr-login-option span{text-align:center;font-size:12px;color:var(--dim)}.qr-camera{position:relative;width:100%;aspect-ratio:1;background:var(--bg-0);border:1px solid var(--line);border-radius:16px;overflow:hidden}.qr-camera video{width:100%;height:100%;object-fit:cover}.qr-camera>span{position:absolute;inset:14%;border:2px solid var(--accent);border-radius:12px;pointer-events:none}.qr-photo{position:relative;display:block;overflow:hidden;min-height:44px;box-sizing:border-box;padding:12px 16px;cursor:pointer}.qr-photo input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.qr-photo:focus-within{outline:2px solid var(--accent);outline-offset:3px}.qr-phone small{color:var(--dim)}@keyframes qr-arrive{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.qr-dialog{animation:none}}

/* The mobile shell fixes body; give scanner screens their own scroll area. */
.qr-phone{height:100dvh;overflow-y:auto;display:flex;flex-direction:column;align-items:center;overscroll-behavior:contain}.qr-phone>.qr-signin-card{flex-shrink:0;margin-block:auto}
/* Avatars and presence (Avatar.tsx). One size scale for the whole app:
   xs 20, sm 24, md 32 (default), lg 40, xl 80. Initials scale with the size. */
.avatar {
  --av: 32px;
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--av);
  height: var(--av);
  border-radius: 50%;
  --av-face: linear-gradient(135deg, var(--teal), var(--blue));
  background: var(--av-face);
  color: var(--on-media);
  font-size: calc(var(--av) * 0.4);
  font-weight: var(--fw-bold);
}
.avatar.xs { --av: 20px; }
.avatar.sm { --av: 24px; }
.avatar.lg { --av: 40px; }
.avatar.xl { --av: 80px; }
/* Photos: clipped to a circle once, with a one-pixel bleed that hides the rim
   older circle-cropped uploads were saved with. */
.avatar.has-photo { background: transparent; }
.av-img { position: absolute; inset: -1px; display: block; width: calc(100% + 2px); max-width: none; height: calc(100% + 2px); object-fit: cover; clip-path: circle(calc(50% - 1px)); }

/* Presence: a dot in a hole cut out of the face, so whatever the avatar sits on
   (glass, gradients, a profile banner) shows around it. The face is a masked
   layer behind the initials; the dot itself sits outside the hole's mask. */
.avatar.has-presence {
  /* Whole pixels, so the gap stays even at any zoom: 20 → 6, 24 → 7, 32 → 10, 40 → 12. */
  --dot: round(calc(var(--av) * 0.3), 1px);
  --dot-gap: 2px;
  --dot-inset: 0px;
  --hole: radial-gradient(circle at calc(100% - var(--dot-inset) - var(--dot) / 2) calc(100% - var(--dot-inset) - var(--dot) / 2),
    transparent calc(var(--dot) / 2 + var(--dot-gap)), #000 calc(var(--dot) / 2 + var(--dot-gap) + 0.5px));
  isolation: isolate;
  background: none;
}
.avatar.xl.has-presence { --dot: 18px; --dot-gap: 4px; --dot-inset: 2px; }
.avatar.has-presence::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--av-face); -webkit-mask: var(--hole); mask: var(--hole); }
.avatar.has-presence.has-photo::before { content: none; }
.avatar.has-presence .av-img { -webkit-mask: var(--hole); mask: var(--hole); }
.avatar-presence {
  position: absolute;
  right: var(--dot-inset);
  bottom: var(--dot-inset);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
}
/* The same colours for the dot on an avatar and the standalone status dot. */
:is(.avatar-presence, .presence-dot).online { background: var(--online); }
:is(.avatar-presence, .presence-dot).idle { background: var(--idle); }
:is(.avatar-presence, .presence-dot).dnd { background: var(--dnd); }
:is(.avatar-presence, .presence-dot).offline { background: var(--offline); }
/* Someone offline: a row sets --av-fade and the face fades with it, never the dot
   (the dot's colour is the state). */
.avatar.has-presence::before, .avatar.has-presence .av-img { opacity: var(--av-fade, 1); }
.avatar.has-presence { color: color-mix(in srgb, var(--on-media) calc(var(--av-fade, 1) * 100%), transparent); }
.presence-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.presence-dot.reconnecting { background: var(--warning); }

/* A group conversation: two faces offset diagonally inside one avatar's square,
   so group rows keep the same icon column as everyone else. */
.avatar-group { --group: 32px; position: relative; flex-shrink: 0; width: var(--group); height: var(--group); }
.avatar-group.xs { --group: 20px; }
.avatar-group.sm { --group: 24px; }
.avatar-group.lg { --group: 40px; }
.avatar-group > .avatar { --av: calc(var(--group) * 0.68); position: absolute; top: 0; left: 0; }
.avatar-group > .avatar + .avatar { top: auto; right: 0; bottom: 0; left: auto; }
/* The front face sits in a hole cut out of the back one (2px clear), like the presence dot. */
.avatar-group > .ag-back { --hole: radial-gradient(circle at calc(var(--group) * 0.66) calc(var(--group) * 0.66), transparent calc(var(--group) * 0.34 + 2px), #000 calc(var(--group) * 0.34 + 2.5px)); -webkit-mask: var(--hole); mask: var(--hole); }
/* Everyone past the first person, counted on a neutral face: a mid grey that holds
   about 3:1 against rows (plain, hover, selected) in every theme, with the count
   in the row colour and never under 10px. */
.avatar-group > .ag-more { --av-face: color-mix(in srgb, var(--text) 64%, var(--bg-1)); background: var(--av-face); color: var(--bg-1); font-size: max(10px, calc(var(--av) * 0.5)); letter-spacing: -0.04em; }
.member-activity{display:flex;align-items:center;gap:5px;min-width:0;max-width:100%;margin-top:3px;color:var(--dim);font-size:11px;line-height:15px;user-select:none}.member-activity>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-activity>i{font-size:10px;flex:none;color:var(--accent);opacity:.8}.member-activity.activity-away>i{color:var(--dim)}.member-activity-unavailable{font-size:10px;font-weight:400;color:var(--dim);padding:0 12px 8px}
/* Links inside messages: plain web links and Kelp Pup document chips (MessageLink.tsx). */
.msg-link { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.msg-link:hover { text-decoration: underline; }

.message-document-link {
  --link-tint: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: min(260px, 100%);
  height: 22px;
  padding: 0 7px;
  vertical-align: middle;
  line-height: 18px;
  border: 1px solid color-mix(in srgb, var(--link-tint) 16%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--link-tint) 7%, var(--bg-1));
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: border-color 140ms ease, background 140ms ease;
}
.message-document-link.is-whiteboard { --link-tint: var(--teal); }
.message-document-link.is-chart { --link-tint: var(--blue); }
.message-document-link.is-build { --link-tint: var(--orange); }
/* A build's name is the evidence (its revision and result): wrap it rather than cut it. */
.message-document-link.is-build { max-width: min(360px, 100%); height: auto; min-height: 22px; white-space: normal; }
.message-document-link.is-build .mdl-name { white-space: normal; overflow-wrap: anywhere; }
.message-document-link:hover {
  border-color: color-mix(in srgb, var(--link-tint) 50%, var(--line));
  background: color-mix(in srgb, var(--link-tint) 13%, var(--bg-1));
  text-decoration: none;
}
.message-document-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.message-document-link .mdl-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 13px; color: var(--link-tint); font-size: 11px;
}
.message-document-link .mdl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 550; line-height: 18px; }
.message-document-link .mdl-arrow { flex: 0 0 auto; margin-left: 1px; font-size: 9px; color: var(--dim); opacity: .7; }
.message-document-link:hover .mdl-arrow { color: var(--link-tint); }
@media (prefers-reduced-motion: reduce) { .message-document-link { transition: none; } }

/* A Currents card link in a message (MessageLink.tsx CardUnfurl): labels, title, "Board · List", the due
   date and the assignees, as this reader may see them. On its own line under the text. */
.card-unfurl {
  --cu-bg: color-mix(in srgb, var(--accent) 5%, var(--bg-1));
  display: flex; gap: 10px; align-items: flex-start;
  width: min(460px, 100%); margin: 6px 0; padding: 12px; box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: var(--radius-md);
  background: var(--cu-bg); color: var(--text); text-decoration: none; white-space: normal;
  transition: border-color 140ms ease;
}
.card-unfurl:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); text-decoration: none; }
.card-unfurl:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The icon tile sits 12px in from the top and the left, and the first line (the label row, or the title's
   first line) has a 24px line box centred on it. */
.card-unfurl .cu-icon {
  flex: none; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-1)); color: var(--accent); font-size: 12px;
}
.card-unfurl .cu-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
/* The labels are the board card's row (KbLabelRow, kanban.css), on the 24px first line. */
.card-unfurl .cu-labels { margin-bottom: 0; min-height: 24px; }
/* Titles can be long: three lines at most. */
.card-unfurl .cu-title {
  font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.card-unfurl:not(.has-labels):not(.is-muted) .cu-title { margin-top: calc((24px - var(--fs-md) * 1.35) / 2); }
.card-unfurl .cu-meta { font-size: var(--fs-sm); line-height: 1.35; color: var(--dim); overflow-wrap: anywhere; }
.card-unfurl .cu-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; min-height: 22px; }
.card-unfurl .cu-due {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg-0); color: var(--dim);
  font-size: var(--fs-sm); line-height: 1; white-space: nowrap;
}
.card-unfurl .cu-due.is-soon { color: var(--text); border-color: color-mix(in srgb, var(--warning) 55%, var(--line)); }
.card-unfurl .cu-due.is-overdue { color: #fff; background: var(--danger); border-color: transparent; }
.card-unfurl .cu-due.is-done { color: var(--text); border-color: color-mix(in srgb, var(--success) 55%, var(--line)); }
.card-unfurl .cu-due.is-done i { color: var(--success); }
.card-unfurl .cu-people { margin-left: auto; display: inline-flex; align-items: center; }
.card-unfurl .cu-people > * { box-shadow: 0 0 0 2px var(--cu-bg); }
.card-unfurl .cu-people > * + * { margin-left: -5px; }
/* More than three people: the board's "+N" face, the size of an avatar beside it. */
.card-unfurl .cu-more {
  width: 20px; height: 20px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line); background: var(--bg-3); color: var(--dim); font-size: 10px; font-weight: var(--fw-semibold);
}
/* Nothing to show (loading, a card you can't open, an archived card): one quiet line. */
.card-unfurl.is-muted { --cu-bg: var(--bg-1); align-items: center; border-color: var(--line); }
.card-unfurl.is-muted .cu-icon { background: var(--bg-2); color: var(--dim); }
.card-unfurl.is-muted .cu-title { font-weight: var(--fw-regular); color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .card-unfurl { transition: none; } }

/* A card in the Currents digest (MessageLink.tsx CardChip): the title (cut first), then the due phrase, then
   the arrow 8px after it. No breadcrumb. Inline, so the line break after it (each link is on its own line)
   doesn't add an empty line: the chips of a group stack 4px apart. */
.card-chip {
  display: inline-flex; align-items: center; gap: 8px; vertical-align: middle;
  width: max-content; max-width: min(460px, 100%); min-height: 32px; margin: 2px 0; padding: 0 12px; box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-1)); color: var(--text); text-decoration: none; white-space: nowrap;
  transition: border-color 140ms ease;
}
.card-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); text-decoration: none; }
.card-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.card-chip .cc-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.card-chip .cc-due { flex: none; font-size: var(--fs-sm); color: var(--dim); }
.card-chip .cc-arrow { flex: none; font-size: 9px; color: var(--dim); }
.card-chip.is-muted { border-color: var(--line); background: var(--bg-1); }
.card-chip.is-muted .cc-title { font-weight: var(--fw-regular); color: var(--dim); }
.message-document-link.is-mywork { --link-tint: var(--accent); }
@media (prefers-reduced-motion: reduce) { .card-chip { transition: none; } }
.kp-date{display:block;min-width:0;margin-top:6px}.kp-date .kp-date-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:40px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg-0);color:var(--text);font:inherit;cursor:pointer;text-align:left}.kp-date-trigger span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kp-date-trigger i{color:var(--dim)}.kp-date-trigger:hover{background:var(--hover)}.kp-date-trigger{transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast)}.kp-date-trigger[aria-expanded=true],.kp-date-trigger:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.kp-date-popover{position:fixed;z-index:100090;box-sizing:border-box;overflow:auto;padding:12px 12px 8px;background:color-mix(in srgb,var(--text) 6%,var(--pop-bg,var(--bg-2)));border:1px solid var(--ctl-line);border-radius:var(--radius-md);box-shadow:var(--shadow-2);color:var(--text);font-size:14px;user-select:none;overscroll-behavior:contain}.kp-date-popover *{box-sizing:border-box}.kp-date-popover button{font:inherit;color:var(--text);background:transparent;border:0;border-radius:7px;min-height:32px;cursor:pointer}.kp-date-popover button:hover{background:var(--hover)}.kp-date-popover button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.kp-date-popover button:disabled{opacity:.3;cursor:default}.kp-date-heading{display:flex;align-items:center;gap:3px;margin-bottom:12px}.kp-date-heading>button{flex:0 0 28px;padding:4px;font-size:10px}.kp-date-heading>.kp-select{flex:1;min-width:0}.kp-date-heading>.kp-select:nth-last-child(2){flex:0 0 76px}.kp-date-heading .kp-select-trigger{height:var(--control-sm);min-height:var(--control-sm);padding:0 8px;font-size:12px;gap:5px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--text) 4%,var(--pop-bg,var(--bg-2)));border:1px solid color-mix(in srgb,var(--text) 22%,transparent)}.kp-date-popover table{table-layout:fixed;width:100%;border-collapse:separate;border-spacing:2px}.kp-date-popover th{font-size:12px;color:var(--dim);font-weight:500;height:28px}.kp-date-popover td{text-align:center;padding:0}.kp-date-popover td button{display:block;width:36px;height:36px;margin:0 auto;padding:0;border:0;border-radius:50%;font-size:13px;font-variant-numeric:tabular-nums}.kp-date-popover .outside{color:var(--dim)}.kp-date-popover button[aria-current=date]{box-shadow:inset 0 0 0 1.5px var(--accent)}.kp-date-popover button.selected{background:var(--accent);color:var(--on-accent,#fff);font-weight:600}.kp-date-footer{border-top:1px solid var(--line);margin-top:0;padding-top:8px;display:flex;justify-content:space-between}.kp-date-footer button{min-height:36px;padding:0 10px;font-size:13px}.kp-date-footer button:first-child{color:var(--accent)}
/* One editable time, with the shared themed menu for complete-time choices. */
.kp-time-field{display:block;min-width:0}.kp-time{display:flex;align-items:center;min-width:0;margin-top:6px;padding:0;background:var(--bg-0);border:1px solid var(--line);border-radius:10px;color:var(--text)}.kp-time input[type=text]{width:100%;min-width:0;flex:1;margin:0!important;padding:10px 11px!important;border:0!important;border-radius:10px;background:transparent!important;color:var(--text);font:inherit;font-variant-numeric:tabular-nums;box-shadow:none!important;outline:none!important;user-select:text}.kp-time>.kp-time-choices{flex:0 0 34px;width:34px!important;min-width:0;margin:0!important}.kp-time .kp-select-trigger{width:100%;min-height:38px;border:0!important;background:transparent!important;padding:8px!important;justify-content:center!important;box-shadow:none}.kp-time .kp-select-trigger>span{display:none}.kp-time .kp-select-trigger>i{font-size:10px;color:var(--dim)}.kp-time .kp-select-trigger:hover{background:var(--hover)!important}.kp-time{transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}.kp-time:focus-within,.kp-time:has([aria-expanded=true]){border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}.kp-time .kp-select-trigger:focus-visible,.kp-time .kp-select-trigger[aria-expanded=true]{box-shadow:none}.kp-time-error{display:block;margin-top:6px;color:var(--text);font-size:12px;line-height:1.5}
@media(pointer:coarse){.kp-date-popover button{min-height:38px}}
/* Calendar invitations (CalendarInvite.tsx): the invite and proposal cards in Calendar bot DMs, the
   propose-time dialog, guests' answers in the event popover, Pending invitations, the chip states and
   the Calendar rail badge. Gaps are 8px or 12px on both axes. */

/* The card, laid out as a Currents card unfurl (messageLinks.css). */
.cal-invite-card {
  --ci-bg: color-mix(in srgb, var(--accent) 5%, var(--bg-1));
  display: flex; gap: 12px; align-items: flex-start;
  width: min(512px, 100%); margin: 6px 0; padding: 12px; box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: var(--radius-md);
  background: var(--ci-bg); color: var(--text); white-space: normal;
}
.cal-invite-card .ci-icon {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-1)); color: var(--accent); font-size: 12px;
}
.cal-invite-card .ci-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cal-invite-card .ci-title {
  font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 24px; color: var(--text);
  text-decoration: none; overflow-wrap: anywhere;
}
.cal-invite-card a.ci-title:hover { text-decoration: underline; }
.cal-invite-card .ci-when { font-size: var(--fs-sm); line-height: 1.4; color: var(--text); }
.cal-invite-card .ci-proposed-time { font-weight: var(--fw-semibold); }
.cal-invite-card .ci-when.is-stale, .cal-invite-card .ci-was { color: var(--dim); text-decoration: line-through; }
.cal-invite-card .ci-meta { font-size: var(--fs-sm); line-height: 1.4; color: var(--dim); overflow-wrap: anywhere; }
.cal-invite-card .ci-note { font-size: var(--fs-sm); line-height: 1.4; color: var(--dim); font-style: italic; overflow-wrap: anywhere; }
.cal-invite-card.is-muted { --ci-bg: var(--bg-1); border-color: var(--line); }
.cal-invite-card.is-muted .ci-icon { background: var(--bg-2); color: var(--dim); }
.ci-arrow { margin-right: 6px; color: var(--accent); font-weight: var(--fw-semibold); }

/* Actions are outlined buttons; a status is plain text with its icon. */
.ci-actions, .ci-decide, .ci-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cal-invite-card :is(.ci-actions, .ci-decide, .ci-status-row) { margin-top: 8px; }
.ci-actions button, .ci-decide button, .ci-change {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 6px 12px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); color: var(--text);
  font: inherit; font-size: 13px; line-height: 18px; white-space: nowrap; text-decoration: none; cursor: pointer;
}
.ci-actions button:hover:not(:disabled), .ci-decide button:hover:not(:disabled), .ci-change:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); text-decoration: none; }
.ci-actions button > i { font-size: 11px; }
.ci-actions .ci-answer.is-going > i { color: var(--success); }
.ci-actions .ci-answer.is-maybe > i { color: var(--warning); }
.ci-actions .ci-answer.is-no > i { color: var(--danger); }
.ci-actions .ci-propose > i { color: var(--dim); }
.ci-actions button[aria-pressed=true] { background: color-mix(in srgb, var(--accent) 14%, var(--bg-1)); border-color: var(--accent); }
.ci-actions button:disabled, .ci-decide button:disabled { opacity: .6; cursor: default; }
.ci-primary { background: var(--accent) !important; border-color: transparent !important; color: var(--bg-0) !important; font-weight: 600; }
.ci-status { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--text); }
.ci-status > i { font-size: 12px; color: var(--dim); }
.ci-status.is-going > i { color: var(--success); }
.ci-status.is-maybe > i { color: var(--warning); }
.ci-status.is-no > i { color: var(--danger); }
.ci-status.is-proposed > i { color: var(--accent); }
.ci-status-row .ci-status + .ci-change { margin-left: 4px; }
.ci-error { font-size: 12px; line-height: 1.4; color: var(--danger); }
:is(.ci-actions button, .ci-decide button, .ci-change, .cal-invite-card a.ci-title):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Propose new time, laid out as Create event: an icon and title over a divider, the composer's pickers at
   its field height, and a footer strip. One 16px gap between the fields. */
.cal-propose-dialog {
  position: fixed; inset: 0; width: min(440px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; box-sizing: border-box; overflow: visible;
  border: 1px solid var(--line); border-radius: 16px; background: var(--bg-1); color: var(--text); box-shadow: 0 18px 50px #0004;
}
.cal-propose-dialog::backdrop { background: #0908119c; }
.cal-propose-dialog form { display: flex; flex-direction: column; }
.cal-propose-dialog header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cal-propose-dialog header > i { font-size: 18px; color: var(--accent); }
.cal-propose-dialog h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 24px; }
.cal-propose-dialog .cal-propose-close { width: 36px; height: 36px; margin-left: auto; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--dim); font-size: 18px; cursor: pointer; }
.cal-propose-close:hover { background: var(--hover); color: var(--text); }
.cal-propose-body { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px; }
.cal-propose-dialog .cal-propose-body > *, .studio-calendar .cal-propose-dialog .cal-propose-body > * { margin: 0; }
.cal-propose-event { display: flex; flex-direction: column; gap: 4px; font-size: 15px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.cal-propose-event small { font-size: 13px; font-weight: 400; color: var(--dim); }
.cal-propose-dialog .kp-date, .cal-propose-dialog .kp-time { margin-top: 0; }
.cal-propose-dialog .kp-date-trigger { min-height: 44px; border-radius: 8px; font-size: 15px; }
.cal-propose-dialog .kp-time { min-height: 44px; border-radius: 8px; font-size: 15px; }
.cal-propose-dialog .kp-time input { min-height: 42px; }
.cal-propose-times { display: grid; grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); align-items: center; gap: 8px; }
.cal-propose-times > span { text-align: center; color: var(--dim); }
.cal-propose-dialog textarea {
  min-height: 72px; resize: vertical; padding: 11px 12px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-0); color: var(--text); font: inherit; font-size: 15px; line-height: 1.5;
}
.cal-propose-dialog textarea::placeholder { color: var(--dim); }
.cal-propose-dialog textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-propose-error { font-size: 13px; color: var(--danger); }
.cal-propose-dialog footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; }
.cal-propose-dialog footer button { min-height: 44px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); font-size: 14px; cursor: pointer; }
.cal-propose-dialog footer button:disabled { opacity: .5; cursor: default; }

/* Guests' answers in the event popover. The organizer has a star, not an answer's dot. */
.cal-responses { width: 100%; }
.cal-responses .cal-response-counts { margin: 0 0 12px; font-size: 12px; font-weight: 600; color: var(--text); }
.cal-responses ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cal-responses li { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: center; }
.cal-response-dot { justify-self: center; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--dim); }
.cal-response-org { justify-self: center; font-size: 10px; color: var(--accent); }
.cal-responses li.is-going .cal-response-dot { background: var(--success); border-color: var(--success); }
.cal-responses li.is-maybe .cal-response-dot { background: var(--warning); border-color: var(--warning); }
.cal-responses li.is-no .cal-response-dot { background: var(--danger); border-color: var(--danger); }
.cal-responses li.is-proposed .cal-response-dot { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 35%, transparent); }
.cal-response-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 12px; }
.cal-response-name b { font-weight: 500; overflow-wrap: anywhere; }
.cal-response-name small { color: var(--dim); font-size: 12px; }
.cal-response-note, .cal-response-proposal { grid-column: 2; font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.cal-response-note { font-style: italic; }
.cal-response-proposal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cal-response-proposal > span:first-child { display: inline-flex; align-items: center; color: var(--text); }

/* The popover: the guest's answer, then the reminder with Join and Copy link, 8px apart in each group. */
.cal-rsvp > .ci-actions, .cal-rsvp > .ci-status-row { margin-top: 8px; }
.studio-calendar .cal-detail-panel .cal-detail-actions { gap: 8px; }
.studio-calendar .cal-detail-panel .cal-detail-actions > .kp-select { margin: 0; }
.studio-calendar .cal-detail-panel .cal-detail-title small, .studio-calendar .cal-detail-panel .cal-detail-title p { font-size: 12px; }

/* Pending invitations: the sidebar entry (a sidebar row, 14px) and the list (at most 720px wide). */
.studio-calendar .cal-sidebar-invites {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 8px 12px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); font-size: 14px; text-align: left;
}
.studio-calendar .cal-sidebar-invites[aria-pressed=true] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.cal-sidebar-invites > i { color: var(--dim); }
.cal-sidebar-invites > span:first-of-type { flex: 1; }
.cal-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
  border-radius: 999px; background: var(--accent); color: var(--bg-0); font-size: 11px; font-weight: 700; line-height: 1;
}
.cal-view-stage > .cal-pending { max-width: 720px; padding: 24px 24px 0; }
.studio-calendar .cal-pending > h2 { display: flex; align-items: center; gap: 12px; font-weight: 400; font-size: 27px; margin: 0 0 12px; }
.cal-pending-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cal-line, var(--line)); }
.studio-calendar .cal-pending-open { flex: 1 1 240px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 0; text-align: left; background: none; border: 0; }
.studio-calendar .cal-pending-open:hover b { text-decoration: underline; }
.cal-pending-open b { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }
.cal-pending-open small { font-size: 12px; color: var(--dim); }
.cal-view-stage > .cal-pending + .cal-inbox { max-width: 720px; padding-top: 24px; }
.studio-calendar .cal-pending + .cal-inbox > h2 { font-size: 18px; font-weight: 500; margin-bottom: 8px; }
@container (max-width: 700px) { .cal-view-stage > .cal-pending { padding: 18px 14px 0; } }

/* The "Show: Declined" switch is a view filter, apart from the calendars. */
.cal-calendar-filters.cal-view-filter { margin-top: 24px; }
.cal-calendar-filters .source-declined { --event-color: var(--dim); }

/* Chips: an unanswered invitation is dashed, Maybe is striped, Declined is a grey fill, struck through, with
   muted text that keeps 4.5:1 (no fade). The organizer's event with a proposed time has an accent dot. */
.cal-workspace :is(.cal-timed-event, .cal-daylong-event, .cal-month-event, .cal-agenda-event, .cal-list-event).rsvp-pending {
  border-style: dashed; border-color: var(--event-color); background: color-mix(in srgb, var(--event-color) 5%, var(--cal-bg, var(--bg-1)));
}
.cal-workspace :is(.cal-timed-event, .cal-daylong-event, .cal-month-event, .cal-agenda-event, .cal-list-event).rsvp-maybe {
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--event-color) 12%, transparent) 6px 12px);
}
.cal-workspace :is(.cal-timed-event, .cal-daylong-event, .cal-month-event, .cal-agenda-event, .cal-list-event).rsvp-no {
  --declined-text: color-mix(in srgb, var(--text) 72%, var(--cal-bg, var(--bg-1)));
  border-color: color-mix(in srgb, var(--dim) 35%, var(--cal-bg, var(--bg-1))); border-left-color: color-mix(in srgb, var(--dim) 70%, var(--cal-bg, var(--bg-1)));
  background: color-mix(in srgb, var(--dim) 9%, var(--cal-bg, var(--bg-1))); color: var(--declined-text);
}
.cal-workspace :is(.cal-timed-event, .cal-daylong-event, .cal-month-event, .cal-agenda-event, .cal-list-event).rsvp-no :is(b, span, small) { color: var(--declined-text); }
.cal-workspace :is(.cal-timed-event, .cal-daylong-event, .cal-month-event, .cal-agenda-event, .cal-list-event).rsvp-no :is(b, span) { text-decoration: line-through; }
.cal-workspace .has-proposal { position: relative; }
.cal-workspace .has-proposal::after { content: ''; position: absolute; right: 6px; bottom: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--cal-bg, var(--bg-1)); }

/* The Calendar rail icon's pending count. */
.bubble:has(> .bubble-badge) { position: relative; }
.bubble-badge {
  position: absolute; top: 6px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--bg-1);
}
.studio-switcher .bubble-badge { position: static; margin-left: auto; }

/* Inside the calendar, its own button reset (calendar.css .studio-calendar button) would strip these. */
.studio-calendar :is(.ci-actions, .ci-decide) button, .studio-calendar .ci-change { min-height: 32px; padding: 6px 12px; gap: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); font-size: 12px; }
.studio-calendar :is(.ci-actions, .ci-decide) button:hover:not(:disabled), .studio-calendar .ci-change:hover { background: var(--bg-1); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.studio-calendar .ci-actions button[aria-pressed=true] { background: color-mix(in srgb, var(--accent) 14%, var(--bg-1)); border-color: var(--accent); color: var(--text); }
.studio-calendar .ci-decide .ci-primary:hover { filter: brightness(1.05); }

/* Touch: answers are 44px, Accept · Maybe · Decline one equal row, Propose new time below. */
@media (pointer: coarse) {
  .ci-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ci-actions .ci-propose { grid-column: 1 / -1; }
  .ci-actions button, .ci-decide button, .ci-change, .studio-calendar :is(.ci-actions, .ci-decide) button, .studio-calendar .ci-change { min-height: 44px; }
}

/* Settings: Calendar's block under Currents', spaced as Currents' own. */
.kb-notify-settings + .kb-notify-settings { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }

/* "Cancel event" a little nearer the text colour, for 4.5:1 in dark and light. */
.studio-calendar .cal-detail-panel .cal-danger { color: color-mix(in srgb, var(--red, #e58086) 82%, var(--text)); }

/* Propose dialog: every field 44px, in the DM and in Calendar alike, and one focus ring on a time field
   (its wrapper's, as in Create event), never a second one on the chevron. */
.cal-propose-dialog .kp-date-trigger, .studio-calendar .cal-propose-dialog .kp-date-trigger { height: 44px; min-height: 44px; padding: 10px 12px; }
.cal-propose-dialog .kp-time, .studio-calendar .cal-propose-dialog .kp-time { height: 44px; min-height: 44px; box-sizing: border-box; }
.cal-propose-dialog .kp-time input, .studio-calendar .cal-propose-dialog .kp-time input { height: 42px; min-height: 0; padding: 0 12px; box-sizing: border-box; }
.cal-propose-dialog .kp-time .kp-select-trigger, .studio-calendar .cal-propose-dialog .kp-time .kp-select-trigger { height: 42px; min-height: 0; }
.cal-propose-dialog .kp-time :is(input, .kp-select-trigger):is(:focus, :focus-visible, [aria-expanded=true]) { outline: none !important; box-shadow: none !important; }
.cal-propose-dialog .kp-time:is(:focus-within, :has([aria-expanded=true])) { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

/* The popover: the reminder on its own row, then Join · Copy link · Edit · Cancel on one row below it. */
.studio-calendar .cal-detail-panel .cal-reminder-row { margin-top: 20px; }
.studio-calendar .cal-detail-panel .cal-reminder-row + .cal-detail-actions { margin-top: 8px; }
.studio-calendar .cal-detail-panel .cal-detail-actions { flex-wrap: wrap; }
.studio-calendar .cal-detail-panel .cal-detail-actions > :is(button, a) { white-space: nowrap; }
.studio-calendar .cal-detail-panel .cal-reminder-row .kp-select { display: inline-block; width: auto; margin: 0; }
.studio-calendar .cal-detail-panel .cal-reminder-row .kp-select-trigger { min-height: 36px; font-size: 12px; color: var(--text); }

/* Pending: your own event's row is one button, opening the event to answer the proposal. */
.studio-calendar .cal-pending-open.is-whole { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cal-pending-open.is-whole > span:first-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-pending-chevron { margin-left: 4px; font-size: 11px; color: var(--dim) !important; }

/* Pending: "Dismiss all" beside the heading, and a × on each row. Neither answers the invite. */
.cal-pending-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.studio-calendar .cal-pending-head > h2 { display: flex; align-items: center; gap: 12px; font-weight: 400; font-size: 27px; margin: 0; }
.studio-calendar .cal-dismiss-all { min-height: 36px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: var(--text); white-space: nowrap; }
.studio-calendar .cal-pending-row { flex-wrap: nowrap; }
.studio-calendar .cal-pending-row > .ci-actions, .studio-calendar .cal-pending-row > .ci-status { flex: none; flex-wrap: nowrap; }
.studio-calendar .cal-pending-row > .cal-pending-open:not(.is-whole) { flex: 1 1 0; }
.studio-calendar .cal-pending-dismiss { flex: none; width: 32px; min-height: 32px; height: 32px; padding: 0; color: var(--dim); }
.studio-calendar .cal-pending-dismiss:hover { color: var(--text); }
@container (max-width: 700px) {
  .studio-calendar .cal-pending-row { position: relative; flex-wrap: wrap; }
  .studio-calendar .cal-pending-row > .ci-actions { flex: 1 1 100%; flex-wrap: wrap; }
  /* The × sits in the row's top-right corner, beside the title. */
  .studio-calendar .cal-pending-row > .cal-pending-open { padding-right: 44px; }
  .studio-calendar .cal-pending-dismiss { position: absolute; top: 12px; right: 0; }
}

.emoji-studio-overlay{position:fixed;inset:0;z-index:1600;display:flex;align-items:center;justify-content:center;padding:24px;background:#090710aa;backdrop-filter:blur(8px);animation:es-fade .18s ease-out}.emoji-studio-modal{width:min(1100px,100%);height:min(850px,calc(100dvh - 48px));min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 100px #0006;animation:es-enter .24s cubic-bezier(.2,.8,.2,1);background:var(--bg-1);color:var(--text)}.emoji-studio-overlay.is-closing{animation:es-fade .16s ease-in reverse both}.is-closing .emoji-studio-modal{animation:es-enter .16s ease-in reverse both}
.emoji-studio{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;font-size:13px}.emoji-studio button{font:inherit;cursor:pointer;color:var(--text);border:1px solid var(--line);background:var(--bg-2);border-radius:9px;padding:8px 12px;transition:background .16s,border-color .16s,transform .16s}.emoji-studio button:hover{background:var(--bg-3)}.emoji-studio button:disabled{opacity:.45;cursor:default}.emoji-studio button:focus-visible,.emoji-studio input:focus-visible,.es-open-button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.emoji-studio a{color:var(--accent)}
.es-header{display:flex;align-items:center;gap:16px;padding:24px 28px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 10% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 65%)}.es-brand-mark{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;font-size:32px;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--bg-2));rotate:-8deg}.es-header small{font-size:10px;letter-spacing:.13em;color:var(--dim);font-weight:700}.es-header h2{margin:4px 0;font-size:25px;letter-spacing:-.6px}.es-header p{margin:4px 0 0;color:var(--dim)}.es-header .es-close{margin-left:auto;width:36px;height:36px;font-size:22px;padding:0}
.es-tabs{display:flex;gap:4px;align-items:center;padding:10px 24px;border-bottom:1px solid var(--line)}.es-tabs button{border-color:transparent;background:transparent;font-weight:650}.es-tabs [aria-pressed=true]{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg-2))}.es-tabs>span{margin-left:auto;color:var(--dim);font-size:11px}.es-body{display:grid;grid-template-columns:minmax(0,1fr) 292px;min-height:0;flex:1}.es-browse{min-width:0;min-height:0;display:flex;flex-direction:column;padding:20px;gap:14px}.es-sources{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.es-sources button{text-align:left;padding:10px;min-width:0}.es-sources strong,.es-sources small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.es-sources strong{font-size:12px}.es-sources small{font-size:10px;color:var(--dim);margin-top:5px}.es-sources [aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,var(--bg-2))}
.es-search{display:flex;align-items:center;gap:10px}.es-search>i{color:var(--dim)}.es-search>input{min-width:0;flex:1;width:100%;border:1px solid var(--line);background:var(--bg-2);border-radius:10px;height:38px;box-sizing:border-box;padding:0 12px;color:var(--text);font:inherit}.es-search>.kp-select{max-width:180px}.es-result-label{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);gap:8px}.es-result-label small{font-size:10px}.es-grid-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:3px 4px 5px 3px}.es-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:9px}.emoji-studio .es-tile{padding:10px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;border-color:transparent;background:color-mix(in srgb,var(--bg-2) 70%,transparent)}.es-tile:hover{transform:translateY(-2px)}.emoji-studio .es-tile[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--bg-2))}.es-tile>span:not(.emoji-studio-art){font-size:10px;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.es-tile>small{font-size:9px;color:var(--dim)}.emoji-studio-art{position:relative;width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.emoji-studio-art img,.emoji-studio-art canvas{display:block;object-fit:contain;width:100%;height:100%;image-rendering:auto}.emoji-studio-art.large{width:128px;height:128px}.emoji-art-missing{font-size:36px;color:var(--dim)}.emoji-studio-art.large>button{position:absolute;bottom:-12px;font-size:10px;white-space:nowrap}
.es-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:12px;color:var(--dim);font-size:10px}.es-pagination button{font-size:11px;padding:7px 10px}.es-inspector{border-left:1px solid var(--line);padding:20px;min-height:0;overflow:auto;background:color-mix(in srgb,var(--bg-0) 45%,var(--bg-1));display:flex;flex-direction:column}.es-preview-stage{min-height:174px;flex-shrink:0;border:1px solid var(--line);border-radius:18px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),var(--bg-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px}.es-preview-stage .switch{border:none;background:transparent;font-size:10px;display:flex;align-items:center;gap:8px;padding:3px}.emoji-studio .switch-track{display:inline-block;position:relative;background:var(--bg-3);width:27px;height:15px;border-radius:10px;border:1px solid var(--line)}.emoji-studio .switch-track>span{position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:var(--dim);transition:transform .16s}.emoji-studio [aria-checked=true] .switch-track{background:var(--accent)}.emoji-studio [aria-checked=true] .switch-track>span{transform:translateX(12px);background:var(--bg-1)}
.es-inspector h3{font-size:17px;margin:18px 0 4px;overflow-wrap:anywhere;text-transform:capitalize}.es-byline{font-size:11px;color:var(--dim);margin:0 0 20px}.es-shortcut{display:block;font-size:11px;font-weight:600}.es-shortcut>div{display:flex;align-items:center;gap:3px;border:1px solid var(--line);background:var(--bg-2);padding:8px 10px;border-radius:10px;margin-top:7px}.es-shortcut input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:13px monospace;padding:0}.es-shortcut>div:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}.es-hint,.es-field-error{font-size:10px;line-height:1.5;color:var(--dim);margin:6px 0 0}.es-field-error{color:#f399ab}.es-chat-preview{display:flex;gap:9px;padding:14px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;margin:18px 0}.es-chat-preview strong{font-size:10px}.es-chat-preview strong small{font-size:8px;color:var(--dim);font-weight:400}.es-chat-preview p{font-size:11px;display:flex;align-items:center;gap:5px;margin:6px 0}.es-chat-preview .emoji-studio-art{width:22px;height:22px}.es-reaction-preview{display:inline-flex;gap:5px;align-items:center;font-size:10px;border:1px solid var(--accent);padding:3px 6px;border-radius:8px;background:color-mix(in srgb,var(--accent) 14%,var(--bg-2))}.es-reaction-preview .emoji-studio-art{width:16px;height:16px}
.es-import-actions{display:flex;flex-direction:column;gap:7px}.emoji-studio .es-primary{background:var(--accent);color:var(--bg-0);font-weight:750;border-color:transparent;padding:11px 14px;box-shadow:0 4px 20px color-mix(in srgb,var(--accent) 15%,transparent)}.emoji-studio .es-primary:hover{filter:brightness(1.08)}.emoji-studio .es-remove{border:none;background:transparent;color:var(--dim);font-size:10px}.es-credit{font-size:10px;color:var(--dim);line-height:1.6;margin:16px 0 0}.es-success{position:relative;font-size:11px;color:var(--accent);padding:12px 0;overflow:hidden;animation:es-bump .35s ease-out}.es-success:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#ffffff44,transparent 65%);animation:es-sheen .7s ease-out both;pointer-events:none}
.es-inspector-empty{margin:auto 0;text-align:center;padding:24px 0}.es-inspector-empty>div{font-size:70px;color:var(--accent);rotate:-12deg}.es-inspector-empty h3{font-size:24px;line-height:1.2;text-transform:none;letter-spacing:-.5px}.es-inspector-empty p{line-height:1.6;font-size:12px;color:var(--dim);margin:16px 0 22px}.es-inspector-empty>span{padding:8px 10px;border:1px dashed var(--line);border-radius:8px;font:10px monospace;color:var(--dim)}.es-error{padding:10px 24px;background:color-mix(in srgb,#e3688b 12%,var(--bg-2));font-size:12px}.es-error button{margin-left:10px;padding:3px 8px}.es-footnote{border-top:1px solid var(--line);padding:9px 24px;font-size:10px;color:var(--dim);display:flex;justify-content:space-between}.es-drop{padding:28px 16px!important;text-align:center;border-style:dashed!important;background:transparent!important}.es-drop>span{display:block;font-size:32px;color:var(--accent);margin-bottom:10px}.es-drop>strong{font-size:16px}.es-drop p{font-size:12px;color:var(--dim)}.es-drop small{font-size:10px;color:var(--dim)}.es-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 20px;gap:8px;min-height:180px}.es-empty>span{font-size:40px;color:var(--accent)}.es-empty strong{font-size:17px}.es-empty p{color:var(--dim);font-size:12px;line-height:1.6}.es-skeleton{min-height:100px;border-radius:12px;background:linear-gradient(110deg,var(--bg-2) 25%,var(--bg-3) 45%,var(--bg-2) 65%);background-size:250% 100%;animation:es-load 1.5s infinite}.es-work-status{color:var(--dim);font-size:12px}.es-mobile-back{display:none}
.es-open-button{display:block;width:100%;padding:11px;border:0;border-top:1px solid var(--line);background:var(--bg-2);color:var(--accent);font:inherit;font-size:12px;font-weight:600;cursor:pointer;border-radius:0 0 10px 10px}.es-settings-launch{padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}.es-settings-launch h3{margin-top:0}.es-settings-launch p{color:var(--dim);line-height:1.6}
@keyframes es-enter{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@keyframes es-fade{from{opacity:0}to{opacity:1}}@keyframes es-load{to{background-position:-150% 0}}@keyframes es-bump{0%{transform:scale(.97);opacity:0}70%{transform:scale(1.02)}100%{transform:scale(1);opacity:1}}@keyframes es-sheen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media(max-width:760px){.emoji-studio-overlay{padding:8px}.emoji-studio-modal{height:calc(100dvh - 16px);border-radius:16px}.es-header{padding:16px;gap:12px}.es-header h2{font-size:22px}.es-brand-mark{width:42px;height:42px;font-size:26px;border-radius:13px}.es-header p{font-size:11px}.es-tabs{padding:8px;gap:2px}.es-tabs button{font-size:11px;padding:8px}.es-tabs>span{display:none}.es-body{position:relative;display:flex;flex-direction:column}.es-browse{flex:1;padding:12px;gap:10px}.es-sources{gap:5px;grid-template-columns:repeat(2,minmax(0,1fr))}.es-sources button{padding:8px}.es-sources small{display:none}.es-search{flex-wrap:wrap;gap:6px}.es-search>input{flex-basis:55%}.es-search>i{display:none}.es-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.es-grid .emoji-studio-art{width:52px;height:52px}.es-inspector{display:none}.es-inspector.has-choice{display:flex;position:absolute;inset:0;z-index:5;background:var(--bg-1);border:0;padding:16px 24px;animation:es-enter .18s ease-out}.es-mobile-back{display:block;align-self:flex-start;margin-bottom:12px}.es-preview-stage{min-height:140px}.es-inspector h3{margin-top:12px}.es-byline{margin-bottom:12px}.es-preview-stage .emoji-studio-art.large{width:104px;height:104px}.es-chat-preview{margin:12px 0}.es-footnote{padding:8px 12px;font-size:9px}.es-result-label small{display:none}.es-credit{margin-top:12px}.es-error{padding:8px 12px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.emoji-studio-overlay,.emoji-studio-modal,.es-inspector.has-choice,.es-skeleton,.es-success,.es-success:after{animation:none!important}.emoji-studio button,.emoji-studio .switch-track>span{transition:none}.es-tile:hover{transform:none}}

.es-sources{grid-template-columns:repeat(5,minmax(0,1fr))}.es-provider-note{font-size:11px;color:var(--dim);padding:8px 10px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;gap:8px}.es-provider-note button{margin-left:auto}.es-report{border-top:1px solid var(--line);margin-top:12px;padding-top:10px;font-size:11px}.es-report>button{background:transparent;border:0;color:var(--dim);padding:4px 0}.es-report p{color:var(--dim);line-height:1.5}.es-report-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.es-reports{overflow:auto;min-height:0;padding:2px 4px}.es-reports-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.es-reports h3{margin:0}.es-reports p{color:var(--dim);font-size:12px;line-height:1.5}.es-reports article{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 12px;border:1px solid var(--line);border-radius:12px;margin:8px 0;background:var(--bg-2)}.es-reports article strong{overflow-wrap:anywhere}.es-reports article p{margin:5px 0}.es-reports article a{font-size:11px}.es-reports .es-empty{padding:24px 12px}
@media(max-width:760px){.es-sources{display:flex;overflow-x:auto;flex-shrink:0;padding:2px 2px 6px}.es-sources button{min-width:116px;flex-shrink:0}.es-tabs{flex-wrap:wrap}.es-reports article{align-items:flex-start;flex-direction:column}.es-provider-note{font-size:10px}.es-footnote{line-height:1.4}}

.es-reports-body{grid-template-columns:minmax(0,1fr)}.es-reports-body .es-inspector{display:none}.es-reports-body .es-reports{width:100%;max-width:900px;align-self:center;box-sizing:border-box}

.es-body{grid-template-columns:minmax(0,1fr) 340px}.es-reports-body{grid-template-columns:minmax(0,1fr)}
.es-chat-preview{gap:12px;padding:16px 12px}
.es-chat-preview>div:last-child{min-width:0}.es-chat-preview strong{font-size:14px;font-weight:650;line-height:1.4}.es-chat-preview strong small{font-size:11px;margin-left:6px;white-space:nowrap}
.es-chat-preview p{font-size:16px;line-height:1.6;margin:4px 0 8px;flex-wrap:wrap;gap:6px}.es-chat-preview .cemoji-frame{height:1.4em;width:calc(1.4em * var(--emoji-aspect,1))}
.es-chat-preview .es-reaction-preview{display:inline-flex;font-size:20px;gap:5px;padding:3px 10px;border-radius:12px;line-height:1.3}
.es-chat-preview .es-reaction-preview .cemoji-frame{height:24px;width:calc(24px * var(--emoji-aspect,1))}.es-reaction-preview .cnt{font-size:13px;font-weight:600;color:var(--dim)}
@media(max-width:760px){.es-chat-preview{padding:14px 10px}.es-chat-preview .avatar.es-preview-avatar{--av:32px}.es-inspector.has-choice{padding-left:18px;padding-right:18px}}

/* Keep the studio entry point reachable independently of the emoji grid. */
.emoji-popover{display:flex;flex-direction:column;overflow:hidden;background:var(--bg-2)}
.emoji-picker-body{flex:1;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain}
.emoji-picker-body>div{height:100%;min-height:0}
.emoji-picker-body em-emoji-picker{width:100%;height:100%;min-height:0;max-width:100%}
.emoji-popover>.es-open-button{flex:none;min-height:42px;box-sizing:border-box;white-space:normal}

/* The studio lives inside the visible viewport, below iOS system chrome. */
.emoji-studio-overlay{top:var(--es-vv-top,0px);left:var(--es-vv-left,0px);right:auto;bottom:auto;width:var(--es-vv-width,100vw);height:var(--es-vv-height,100dvh);box-sizing:border-box;padding:max(24px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px))}
.emoji-studio-modal{height:min(850px,100%);max-height:100%;box-sizing:border-box}
.es-header,.es-tabs,.es-footnote,.es-search,.es-result-label,.es-pagination{flex-shrink:0}.es-footer-mobile{display:none}
@media(max-width:760px){
 .emoji-studio-overlay{padding:calc(max(0px,env(safe-area-inset-top,0px) - var(--es-vv-top,0px)) + 8px) max(8px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 8px) max(8px,env(safe-area-inset-left,0px));backdrop-filter:blur(5px)}
 .emoji-studio-modal{height:100%;width:100%;border-radius:20px}
 .es-header{padding:8px 12px;gap:10px}.es-header small,.es-header p{display:none}.es-header h2{font-size:20px;margin:0;letter-spacing:-.4px}.es-brand-mark{width:32px;height:32px;font-size:22px;border-radius:10px}.es-header .es-close{width:44px;height:44px;flex-shrink:0;background:transparent;border-color:transparent;font-size:26px}
 .es-tabs{padding:4px 8px;flex-wrap:nowrap;gap:2px;overflow-x:auto}.es-tabs button{min-height:44px;padding:8px;font-size:12px;white-space:nowrap;flex-shrink:0}
 .es-browse{padding:10px;gap:10px}.es-sources{gap:6px;padding-bottom:2px;scrollbar-width:none}.es-sources button{min-width:0;min-height:40px;padding:8px 12px;border-radius:20px}.es-sources strong{font-size:12px}
 .es-search{flex-wrap:nowrap;gap:8px}.es-search>input{flex:1;min-width:0;font-size:16px;height:44px;flex-basis:0}.es-search>.kp-select{max-width:140px}.es-search .kp-select-trigger{min-height:44px}.es-result-label{font-size:11px;padding-inline:2px}
 .es-grid{gap:8px}.emoji-studio .es-tile{padding:12px 6px 10px;border-radius:12px}.es-tile>span:not(.emoji-studio-art){font-size:11px}.es-tile>small{font-size:10px}
 .es-pagination{padding-top:8px;font-size:11px}.es-pagination button{min-height:44px;padding:8px 10px}
 .es-footnote{min-height:32px;padding:6px 12px;align-items:center;gap:12px;font-size:11px}.es-footer-description{display:none}.es-footer-mobile{display:inline}.es-footnote a{white-space:nowrap}
 .has-selection .es-tabs{display:none}.es-inspector.has-choice{padding:0 16px 16px;overscroll-behavior:contain;scroll-padding:60px 0 80px;-webkit-overflow-scrolling:touch}
 .es-mobile-back{position:sticky;top:0;z-index:2;min-height:44px;align-self:stretch;text-align:left;margin:0 -4px 10px;padding:10px 4px!important;background:var(--bg-1)!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important}
 .es-shortcut input{font-size:16px;min-height:24px}.es-import-actions{position:sticky;bottom:0;z-index:1;padding:10px 0;background:var(--bg-1);border-top:1px solid var(--line)}.es-import-actions button{min-height:44px}
 .emoji-studio-overlay[data-keyboard=true]{padding-bottom:8px}.emoji-studio-overlay[data-keyboard=true] .es-tabs,.emoji-studio-overlay[data-keyboard=true] .es-sources,.emoji-studio-overlay[data-keyboard=true] .es-pagination,.emoji-studio-overlay[data-keyboard=true] .es-footnote{display:none}
}
/* The shortcut box shows focus on its frame (:focus-within), so its input draws no second ring. */
.emoji-studio .es-shortcut input:focus-visible{outline:0}
/* The upload queue: each image with its own shortcut, and Add all for the lot. */
.es-queue-actions{display:flex;flex-wrap:wrap;gap:8px}
.es-queue-item{display:flex;flex-direction:column;gap:6px;min-width:0}
.es-queue-name{display:flex;align-items:center;gap:2px;min-width:0;height:28px;padding:0 6px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);color:var(--dim);font-size:11px;box-sizing:border-box}
.es-queue-name>input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--text);font:inherit;padding:0;outline:none}
.es-queue-name:focus-within{border-color:var(--accent)}
span.es-queue-name{justify-content:center;color:var(--text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.es-queue-item.has-error .es-queue-name{border-color:var(--danger)}
.es-queue-error{color:var(--danger);font-size:10px;line-height:1.3}
.build-station{--build-good:var(--success,#57ce9d);--build-warn:var(--warning,#efc16b);--build-bad:var(--danger,#f27d8d);--build-tone:var(--build-good);position:relative;flex-shrink:0;margin:12px;padding:12px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 8%,var(--bg-2)),var(--bg-2));box-shadow:0 6px 22px #00000010;user-select:none;animation:build-arrive .35s ease both;color:var(--text);font-size:11px}
.build-station .tone-good,.build-station.tone-good{--build-tone:var(--build-good)}.build-station .tone-warn,.build-station.tone-warn{--build-tone:var(--build-warn)}.build-station .tone-bad,.build-station.tone-bad{--build-tone:var(--build-bad)}.build-station .tone-offline,.build-station.tone-offline{--build-tone:var(--dim)}
.build-station button{font:inherit;color:inherit;cursor:pointer}.build-station button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.build-station-main{display:block;width:100%;padding:0;text-align:left;border:0;background:none}.build-station-eyebrow{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:10px;letter-spacing:.09em;font-weight:750}.build-station-eyebrow i{color:var(--accent);margin-right:4px}.build-mode{font-size:8px;letter-spacing:.06em;color:var(--dim);padding:3px 5px;border:1px solid var(--line);border-radius:5px}
.build-station-summary{display:flex;align-items:center;gap:10px;margin:14px 0 12px}.build-orbit{width:52px;height:52px;flex-shrink:0;position:relative;color:var(--build-tone);transition:color .4s}.build-orbit svg{width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:3}.build-orbit-track{stroke:var(--line)}.build-orbit-value{stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1),stroke .4s}.build-orbit>span{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:750;font-variant-numeric:tabular-nums}.build-orbit.indeterminate svg{animation:build-spin 3s linear infinite}.build-station-title{min-width:0;flex:1}.build-station-title strong{display:block;font-size:13px;font-weight:700;line-height:1.4}.build-station-title small{display:block;font-size:10px;line-height:1.6;color:var(--dim);font-variant-numeric:tabular-nums}.build-expand{font-size:8px;color:var(--dim)}.build-stage-caption{color:var(--dim);font-size:10px;line-height:1.4;margin:-3px 0 12px}
.build-telemetry{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:10px;color:var(--dim)}.build-health{display:flex;align-items:center;gap:5px;color:var(--build-tone)}.build-health b{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 7px color-mix(in srgb,currentColor 25%,transparent)}.build-telemetry>span:last-child i{margin-right:3px}.build-storage{height:3px;background:var(--line);border-radius:5px;overflow:hidden;margin:8px 0}.build-storage span{display:block;height:100%;background:color-mix(in srgb,var(--accent) 55%,var(--dim));transition:width 1s ease;border-radius:5px}.build-storage.low span{background:var(--build-bad)}.build-resource-row{display:flex;justify-content:space-between;color:var(--dim);font-size:9px;font-variant-numeric:tabular-nums}.build-resource-row b{font-weight:550;color:var(--text)}
.build-station-details{max-height:290px;overflow-y:auto;overscroll-behavior:contain;padding-top:14px;margin-top:12px;border-top:1px solid var(--line);animation:build-arrive .22s ease}.build-detail-heading{font-size:9px;font-weight:750;letter-spacing:.05em}.build-detail-heading span{display:block;font-weight:400;color:var(--dim);margin-top:3px}.build-station-details p{color:var(--dim);font-size:11px;line-height:1.6;margin:10px 0}.build-detail-facts span{display:flex;justify-content:space-between;gap:5px;margin:6px 0;color:var(--dim)}.build-detail-facts b{font-weight:500;color:var(--text);max-width:65%;overflow:hidden;text-overflow:ellipsis}.build-copy{display:flex;justify-content:space-between;width:100%;background:var(--bg-3);border:1px solid var(--line);border-radius:7px;padding:7px 9px;margin:10px 0 15px}.build-history{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}.build-history i{color:var(--build-tone)}.build-history small{display:block;color:var(--dim);margin-top:3px;font-size:9px}.build-schedule{color:var(--dim);font-size:9px;line-height:1.5;margin-top:10px}
.build-toast{position:absolute;bottom:calc(100% + 10px);left:-8px;right:-8px;display:flex;align-items:center;gap:9px;border:1px solid color-mix(in srgb,var(--build-tone) 40%,var(--line));border-radius:12px;padding:12px 10px;background:var(--bg-2);box-shadow:0 8px 30px #0004;z-index:20;animation:build-toast-in .45s cubic-bezier(.16,1,.3,1) both,build-toast-out .4s ease 7.6s forwards}.build-toast>i{color:var(--build-tone);font-size:18px}.build-toast span{flex:1}.build-toast strong{display:block;font-size:11px}.build-toast small{display:block;color:var(--dim);font-size:10px;line-height:1.5;margin-top:3px}.build-toast button{border:0;background:none;font-size:19px;color:var(--dim);padding:3px}.build-stale-note{border-left:2px solid var(--build-warn);padding-left:8px}
@keyframes build-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes build-toast-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}@keyframes build-spin{to{transform:rotate(270deg)}}
@media(prefers-reduced-motion:reduce){.build-station,.build-station *{animation:none!important;transition:none!important}}

@keyframes build-toast-out{to{opacity:0;transform:translateY(-4px)}}
.build-monitor-notice{display:flex;gap:7px;align-items:center;padding:9px;margin:0 0 12px;border:1px solid color-mix(in srgb,var(--build-tone) 40%,var(--line));border-radius:8px;color:var(--build-tone);background:color-mix(in srgb,var(--build-tone) 7%,var(--bg-2));font-size:10px;animation:build-arrive .25s ease}
.build-monitor-details{margin:12px 0 16px}.build-maintenance-controls{padding:10px 0;border-bottom:1px solid var(--line)}.build-maintenance-controls label{display:block;font-size:10px;color:var(--dim)}.build-maintenance-controls input{display:block;box-sizing:border-box;width:100%;margin:6px 0 8px;border:1px solid var(--line);border-radius:7px;background:var(--bg-3);color:var(--text);padding:8px;font-size:11px;user-select:text}.build-maintenance-controls button:disabled{opacity:.5;cursor:default}
@media(prefers-reduced-motion:reduce){.build-monitor-notice{animation:none}}

/* The dock in the sidebar, above the user panel. Folded, it is one line (state,
   progress, CL, time); open, it is the full card with its details, scrolling inside
   itself so the channels above keep their room. */
.build-station.build-dock{margin:var(--sp-2);padding:0}
.build-station.build-dock.open{padding:var(--sp-3);max-height:min(50vh,480px);overflow-y:auto;overscroll-behavior:contain}
.build-dock.open .build-station-details{max-height:none;overflow:visible}
.build-dock-line{display:flex;align-items:center;gap:var(--sp-2);width:100%;min-height:var(--control-md);padding:0 var(--sp-3);border:0;background:none;text-align:left;font-size:var(--fs-sm);line-height:var(--lh-tight)}
.build-dock-line strong{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--fw-semibold)}
.build-dock-line small{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.build-dock-line>i{flex:none;color:var(--dim);font-size:var(--fs-xs)}
.build-dock-orbit{width:16px;height:16px;flex:none;color:var(--build-tone);transition:color .4s}
.build-dock-orbit svg{width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:6}
/* At 16px the track must show on every theme, or a part-full ring reads as a spinner. */
.build-dock-orbit .build-orbit-track{stroke:color-mix(in srgb,var(--text) 22%,transparent)}
.build-dock-orbit.indeterminate svg{animation:build-spin 3s linear infinite}
@media(max-width:760px){.build-dock-line{min-height:var(--control-touch)}.build-dock .build-copy,.build-dock .kp-select-trigger,.build-dock .build-maintenance-controls input{min-height:var(--control-touch)}.build-dock .build-maintenance-controls input{font-size:16px}.build-dock .build-toast button{min-width:var(--control-touch);min-height:var(--control-touch)}}
@media(prefers-reduced-motion:reduce){.build-dock-orbit.indeterminate svg{animation:none}}

.build-station{position:relative}.build-fullscreen-entry{position:absolute;right:10px;top:7px;width:28px;height:28px;display:grid;place-items:center;z-index:1;border:1px solid var(--line);border-radius:8px;color:var(--dim);background:var(--bg-2);cursor:pointer;transition:color .15s,background .15s,transform .15s}.build-fullscreen-entry:hover{color:var(--text);background:var(--bg-3);transform:scale(1.06)}.build-station-eyebrow{padding-right:30px}
.build-display-shell{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}.build-display-shell::backdrop{background:#17152a}
.build-display{--bg-1:#1b1931;--bg-2:#23203e;--line:#534570;--text:#f8f6ff;--dim:#c8ade8;--accent:#c99bfa;--mint:#27e6b4;--coral:#ff787e;--amber:#f6c962;--state:var(--accent);--bd-unit:min(1vw,1.77777778dvh);position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:radial-gradient(ellipse at 65% 10%,#24203d 0%,var(--bg-1) 70%);color:var(--text);font:500 clamp(15px,calc(var(--bd-unit)*1.48),58px)/1.35 'Inter',system-ui,sans-serif;box-sizing:border-box;overflow:hidden;user-select:none;font-variant-numeric:tabular-nums;animation:bd-enter .18s ease-out}
.build-display{display:grid;grid-template-rows:9% 53% 18% 20%}.build-display::backdrop{background:#17152a}.build-display *{box-sizing:border-box}.build-display .good{color:var(--mint)}.build-display .warn{color:var(--amber)}.build-display .bad{color:var(--coral)}.build-display .active{color:var(--accent)}.build-display .muted{color:var(--dim)}.build-display.bd-good{--state:var(--mint)}.build-display.bd-bad{--state:var(--coral)}.build-display.bd-warn{--state:var(--amber)}.build-display.bd-muted{--state:var(--dim)}.build-display h1,.build-display h2,.build-display p{margin:0}.build-display h2{font-size:.68em;letter-spacing:.19em;font-weight:750}.build-display small{font-size:.65em;color:var(--dim)}.build-display button:focus-visible,.bd-pips span:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.bd-header{display:flex;align-items:center;gap:1em;padding:0 3.7%;border-bottom:1px solid var(--line);position:relative}.bd-brand{display:flex;align-items:center;gap:1.1em;white-space:nowrap}.bd-brand>i{font-size:1.7em;color:var(--accent)}.bd-brand>strong{font-size:1.6em;letter-spacing:-.025em;font-weight:850}.bd-brand>span{padding-left:1.4em;border-left:1px solid var(--line);color:var(--dim);font-size:.77em;letter-spacing:.22em}.bd-host{display:flex;align-items:center;justify-content:flex-end;gap:1.1em;margin-left:auto;white-space:nowrap;font-size:.8em;padding-right:1.7em}.bd-host>span{color:var(--dim)}.bd-status{border-left:1px solid var(--line);padding-left:1.1em;display:flex;gap:.7em;align-items:center}.bd-exit{position:absolute;right:.65%;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--dim);border-radius:.4em;width:1.8em;height:1.8em;font-size:.9em;opacity:.45;cursor:pointer;transition:opacity .15s,background .15s}.bd-exit:hover,.bd-exit:focus-visible{opacity:1;background:#ffffff12}
.bd-main{display:grid;grid-template-columns:67% 33%;padding:calc(var(--bd-unit)*1.6) 3.7% calc(var(--bd-unit)*1.4);min-height:0}.bd-build{min-width:0;padding-right:3.7%;display:flex;flex-direction:column;justify-content:space-between;gap:.55em}.bd-headline{display:flex;align-items:center;gap:1.55em;min-height:4.1em}.bd-headline>div{min-width:0}.bd-headline h1{font-size:clamp(28px,calc(var(--bd-unit)*4.85),188px);line-height:1.1;letter-spacing:-.04em;font-weight:850;text-wrap:balance}.bd-headline p{font-size:1.05em;color:var(--dim);font-weight:650;margin-top:.2em}.bd-state-icon{flex-shrink:0;width:3.4em;height:3.4em;border:.23em solid var(--state);border-radius:50%;display:grid;place-items:center;color:var(--state);font-size:1em}.bd-state-icon>i{font-size:1.65em}.bd-state-icon.is-active{border:0;font-size:1.1em}.bd-state-icon.is-active>i{font-size:3em;animation:bd-spin 3s linear infinite}.bd-build-detail{min-height:0}.bd-progress-caption{display:flex;justify-content:space-between;align-items:baseline;gap:1em;color:var(--dim);margin-bottom:.35em;font-size:.85em}.bd-progress-caption strong{font-size:1.95em;font-weight:850;color:var(--text)}.bd-progress{height:1.05em;background:#4a3e68;border-radius:1em;overflow:hidden}.bd-progress>b{height:100%;display:block;background:linear-gradient(90deg,#b994ed,var(--accent));border-radius:inherit;transition:width .6s ease}.bd-progress.indeterminate>b{width:22%;animation:bd-sweep 2.4s ease-in-out infinite}.bd-timing{display:flex;justify-content:space-between;align-items:baseline;color:var(--dim);font-size:.85em;margin-top:.5em}.bd-timing strong{color:var(--text);font-size:1.25em;margin-right:.3em}.bd-state-note{border-left:2px solid var(--state);padding:.3em 0 .3em 1.1em}.bd-state-note h2{font-size:1.2em;letter-spacing:0;margin-bottom:.2em}.bd-state-note p{font-size:.82em;color:var(--dim);max-width:44em}.bd-failure{border:1px solid var(--coral);background:#ff787e0b;border-radius:.5em;padding:.6em 1em}.bd-failure>span{color:var(--coral);font-weight:750;text-transform:uppercase;letter-spacing:.12em;font-size:.7em}.bd-failure h2{font-size:1.32em;line-height:1.22;letter-spacing:-.015em;margin:.2em 0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.bd-failure p{font-size:.8em;color:var(--dim)}
.bd-pipeline{list-style:none;display:flex;justify-content:space-between;padding:0;margin:.2em 0 0;gap:0}.bd-pipeline li{position:relative;flex:1;text-align:center;font-size:.78em;display:flex;flex-direction:column;align-items:center;color:var(--dim)}.bd-pipeline li:before{content:'';height:.16em;background:#594a78;position:absolute;top:1.18em;right:calc(50% + 1.55em);width:calc(100% - 3.1em)}.bd-pipeline li:first-child:before{display:none}.bd-pipeline li.done+li.done:before,.bd-pipeline li.done+li.current:before,.bd-pipeline li.done+li.failed:before{background:var(--mint)}.bd-pipeline li>span{border:.15em solid #806b9e;width:2.55em;height:2.55em;border-radius:50%;display:grid;place-items:center;margin-bottom:.25em}.bd-pipeline li.pending>span>i,.bd-pipeline li.unknown>span>i{visibility:hidden}.bd-pipeline li.done>span{background:var(--mint);border-color:var(--mint);color:#202039}.bd-pipeline li.current>span{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 .16em #c99bfa25}.bd-pipeline li.failed>span{background:var(--coral);border-color:var(--coral);color:#202039}.bd-pipeline li.failed b{color:var(--coral)}.bd-pipeline li.stopped>span{color:var(--amber);border-color:var(--amber)}.bd-pipeline small{min-height:1.35em;font-size:.6em}.bd-pipeline .stale{opacity:.6}.bd-last-ready{display:flex;align-items:center;gap:.7em;font-size:.73em;min-height:1.5em;color:var(--dim)}.bd-last-ready>i{font-size:1.3em;color:var(--mint)}.bd-last-ready b{color:var(--text)}
.bd-machine{border-left:1px solid var(--line);padding-left:8%;display:flex;flex-direction:column;justify-content:space-between;gap:.3em}.bd-machine h2{font-size:.85em}.bd-metric>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:.8em}.bd-metric span{font-size:.76em;letter-spacing:.05em;color:var(--dim)}.bd-metric strong{font-size:1.22em;font-weight:800}.bd-meter{height:.9em;border-radius:1em;background:#3c3458;margin-top:.3em;overflow:hidden}.bd-meter b{height:100%;display:block;border-radius:inherit;background:var(--accent);transition:width .7s ease}.bd-metric:nth-of-type(1) .bd-meter b{background:var(--mint)}.bd-throughput{font-size:.62em;color:var(--dim);border-top:1px solid var(--line);margin-top:.4em;padding-top:.35em}.bd-disk{display:flex;gap:.8em;align-items:center;font-weight:750;font-size:1.04em}.bd-disk>i{color:var(--accent)}.bd-freshness{font-size:.57em!important}
.bd-context{border-block:1px solid var(--line);padding:calc(var(--bd-unit)*1.4) 3.7%;display:grid;grid-template-columns:33% 27% 19% 21%;align-items:stretch;min-height:0}.bd-context>div{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:0 10%;border-left:1px solid var(--line)}.bd-context>div:first-child{border-left:0;padding:0 10% 0 0}.bd-context>div:nth-child(n+3){align-items:center;text-align:center;padding:0 5%}.bd-context strong{font-size:2.1em;font-weight:850;line-height:1.2;white-space:nowrap;letter-spacing:-.04em}.bd-context h2{font-size:.57em;white-space:nowrap}.bd-context small{font-size:.56em;margin-top:.25em}.bd-context .bd-next>strong{font-size:1.85em}.bd-pips{display:flex;gap:.6em;margin:.65em 0 .3em}.bd-pips>span{border-radius:50%;width:1.02em;height:1.02em;display:grid;place-items:center;background:currentColor;flex-shrink:0}.bd-pips i{color:#242039;font-size:.55em}.bd-success svg{width:100%;height:1.65em;overflow:visible}.bd-success polyline{stroke:var(--accent);stroke-width:2;fill:none}.bd-success circle{fill:var(--accent)}
.bd-footer{padding:calc(var(--bd-unit)*.85) 3.7% var(--bd-unit);display:flex;flex-direction:column;justify-content:space-between;gap:.3em;min-height:0}.bd-perforce h2{font-size:.59em;display:flex;align-items:center;gap:1em;margin-bottom:.25em}.bd-perforce h2>i{color:var(--mint);font-size:1.1em}.bd-perforce h2 small{letter-spacing:0;font-weight:500;font-size:.95em}.bd-change{display:flex;align-items:center;gap:1.1em;font-size:.71em;min-width:0;height:1.8em;animation:bd-enter .2s ease-out}.bd-change>i{font-size:.7em;color:var(--dim)}.bd-change>b{color:var(--accent);width:4.1em;flex-shrink:0}.bd-change>strong{width:8em;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9em}.bd-description{overflow:hidden;white-space:nowrap;color:var(--dim);min-width:0;mask-image:linear-gradient(90deg,#000 97%,transparent)}.bd-description>span{display:inline-block;white-space:nowrap}.bd-description.overflowing>span{animation:bd-marquee var(--marquee-time) ease-in-out infinite}.bd-perforce>p{color:var(--dim);font-size:.72em;padding:.2em 0}.bd-bottom{display:flex;align-items:center;justify-content:space-between;gap:1em}.bd-schedule{display:flex;align-items:center;gap:.8em;font-size:.64em;color:var(--dim)}.bd-schedule i{font-size:1.35em}.bd-services{display:flex;align-items:center;gap:.8em}.bd-service{display:flex;gap:.8em;align-items:center;white-space:nowrap;border:1px solid currentColor;border-radius:3em;padding:.55em 1.1em;font-size:.65em}.bd-service>span{color:var(--dim)}.bd-service b{color:var(--text)}.bd-service.good b{color:var(--mint)}.bd-service.bad b{color:var(--coral)}.bd-service.warn b{color:var(--amber)}.bd-service small{font-size:.9em}
@keyframes bd-enter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@keyframes bd-spin{to{rotate:360deg}}@keyframes bd-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(560%)}}@keyframes bd-marquee{0%,20%{transform:translateX(0)}75%,90%{transform:translateX(var(--travel))}100%{transform:translateX(0)}}
@media(max-width:900px),(max-aspect-ratio:4/3){.build-display{display:flex;flex-direction:column;overflow-y:auto;font-size:16px;min-height:100dvh;height:100dvh}.bd-header{padding:18px 24px;flex-wrap:wrap;gap:12px}.bd-brand>span{font-size:.65em}.bd-host{margin-left:0;font-size:.7em}.bd-main{grid-template-columns:1fr;padding:25px;gap:24px}.bd-build{padding-right:0;gap:24px}.bd-headline{gap:18px}.bd-headline h1{font-size:clamp(30px,6vw,50px)}.bd-headline p{font-size:.9em}.bd-state-icon{width:2.8em;height:2.8em}.bd-machine{border-left:0;border-top:1px solid var(--line);padding:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:20px}.bd-machine h2{grid-column:1/-1}.bd-context{grid-template-columns:1fr 1fr;padding:20px;gap:24px}.bd-context>div,.bd-context>div:first-child{padding:0 8px;border:0}.bd-context>div:nth-child(n+3){align-items:flex-start;text-align:left}.bd-context small{font-size:.65em}.bd-pips{gap:.45em}.bd-footer{padding:20px;gap:22px}.bd-bottom{flex-wrap:wrap;gap:18px}.bd-services{flex-wrap:wrap;gap:12px}.bd-service{font-size:.7em}.bd-change{font-size:.7em;gap:.6em}.bd-change>strong{width:6em}.bd-failure h2{font-size:1.4em}.bd-pipeline small{font-size:.65em}}
@media(prefers-reduced-motion:reduce){.build-display,.build-display *{animation:none!important;transition:none!important}.bd-description>span{display:block;overflow:hidden;text-overflow:ellipsis}.bd-progress.indeterminate>b{width:100%;opacity:.25}}

.bd-failure{padding:.5em .9em}.bd-failure h2{font-size:1.22em;-webkit-line-clamp:2}.bd-failure-path{font-size:.82em;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:.15em 0}.bd-perforce h2>i{color:inherit}

.bd-failure h2,.bd-failure-path{user-select:text}.bd-description:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media(max-width:900px),(max-aspect-ratio:4/3){.build-display>header,.build-display>main,.build-display>section,.build-display>footer{flex-shrink:0}}

@media(max-width:900px),(max-aspect-ratio:4/3){.bd-machine>.bd-metric:nth-of-type(3){grid-column:1/-1}}

/* Keep long Perforce descriptions inside the ticker, not the grid's intrinsic width. */
.build-display{grid-template-columns:minmax(0,1fr)}
.build-display>*,.bd-perforce{min-width:0}
.bd-description{flex:1 1 0%;max-width:100%}
.bd-state-note p{overflow-wrap:anywhere}
.bd-progress-caption>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-panel{padding:24px;overflow:auto;min-height:0;color:var(--text);max-width:1100px;width:100%;box-sizing:border-box}.ds-title,.ds-row{display:flex;align-items:center;justify-content:space-between;gap:18px}.ds-title{margin-bottom:24px}.ds-title>i{font-size:32px;color:var(--accent)}.ds-eyebrow{font-size:10px;letter-spacing:.12em;opacity:.65;font-weight:700}.ds-panel h2{font-size:24px;margin:6px 0}.ds-panel h3{font-size:15px;margin:0 0 8px}.ds-panel p{font-size:13px;line-height:1.6;opacity:.8;margin:6px 0 12px}.ds-card{border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:16px;background:var(--bg-1)}.ds-streams{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-bottom:20px}.ds-stream{display:flex;align-items:center;text-align:left;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:transparent;color:inherit;transition:background .18s,border-color .18s}.ds-stream.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.ds-stream span{flex:1;min-width:0}.ds-stream strong,.ds-stream small{display:block;overflow-wrap:anywhere}.ds-stream small,.ds-panel small{font-size:11px;opacity:.65;margin-top:4px}.ds-panel label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600}.ds-panel input,.ds-panel select{min-width:0;width:100%;box-sizing:border-box;background:var(--bg-0);border:1px solid var(--line);color:inherit;border-radius:8px;padding:10px;font:inherit}.ds-grow{flex:1}.ds-branch{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin:16px 0}.ds-panel .ds-hint{font-size:12px;opacity:.65}.ds-panel code{overflow-wrap:anywhere;font-size:12px}.ds-review{border-top:1px solid var(--line);margin-top:20px;padding-top:20px}.ds-paths{max-height:350px;overflow:auto;margin:16px 0}.ds-path{padding:12px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px}.ds-path>div:first-child{min-width:0;flex:1}.ds-path small{display:block}.ds-choices{display:flex;gap:4px;flex-shrink:0}.ds-choices button{padding:8px;border:1px solid var(--line);background:transparent;color:inherit;border-radius:8px;font-size:12px}.ds-choices button[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 24%,transparent);border-color:var(--accent)}.ds-panel button{cursor:pointer}.ds-panel button:disabled{opacity:.45;cursor:default}.ds-panel button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.ds-alert,.ds-success{border-radius:10px;padding:14px;margin-bottom:16px;font-size:13px;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid var(--line)}.ds-alert{border-color:#de887c}.ds-receipt{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:12px}.ds-receipt>div{flex:1;min-width:0}.ds-receipt p{margin:4px 0;overflow-wrap:anywhere}.ds-reveal{animation:ds-enter .22s ease-out}@keyframes ds-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.ds-panel{padding:14px}.ds-card{padding:14px}.ds-row,.ds-path{flex-wrap:wrap}.ds-branch{grid-template-columns:1fr}.ds-choices{width:100%}.ds-choices button{flex:1}}@media(prefers-reduced-motion:reduce){.ds-reveal{animation:none}.ds-stream{transition:none}}
.dd-workspace-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--bg-1);flex-shrink:0}.dd-workspace-bar>i{color:var(--dim)}.dd-workspace-bar label{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--dim);min-width:0;flex:1}.dd-workspace-bar select{max-width:520px;min-width:0;flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg-0);color:var(--text);font:inherit}.dd-workspace-bar select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(max-width:600px){.dd-workspace-bar{flex-wrap:wrap}.dd-workspace-bar label{flex-basis:80%}.dd-workspace-bar>button{margin-left:auto}}
/* Drydock studio surfaces. The repository's palette follows every Kelp Pup theme. */
.dd-studio{--dd-ease:cubic-bezier(.22,1,.36,1);container-type:inline-size;min-height:0;overflow:hidden}
.dd-studio button,.dd-studio a,.dd-studio summary{transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.dd-studio :is(button,a,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dd-studio .dd-head{height:58px;padding:0 20px;gap:12px;background:var(--bg-2)}
.dd-studio .dd-head>.hash{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.dd-studio .dd-head h1{font-size:16px;letter-spacing:-.3px;margin:0 4px 0 0}
.dd-studio .dd-head-meta{font-size:11px;margin-left:0}
.dd-studio .dd-depot-sel{padding:0;background:none;border:0;min-width:130px;max-width:260px}
.dd-studio .dd-workspace-bar{padding:8px 20px;background:var(--bg-2);gap:10px;font-size:12px;min-height:40px}
.dd-studio .dd-workspace-bar label{flex:initial;max-width:600px}
.dd-studio .dd-workspace-bar .kp-select{min-width:0}
.dd-studio .dd-workspace-bar>button{margin-left:auto;white-space:nowrap}
.dd-studio .dd-toolbar{min-height:58px;padding:9px 20px;gap:10px;background:var(--bg-1);flex-wrap:wrap}
.dd-studio .dd-tool{display:inline-flex;flex-direction:row;gap:8px;min-width:0;min-height:36px;padding:8px 12px;font-size:12px;font-weight:600;white-space:nowrap}
.dd-studio .dd-latest{border:1px solid var(--line);background:var(--bg-2);color:var(--text);position:relative;overflow:hidden}
.dd-studio .dd-latest.available{border-color:color-mix(in srgb,var(--accent) 65%,var(--line));background:color-mix(in srgb,var(--accent) 16%,var(--bg-2));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent)}
.dd-latest.available::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 75%);transform:translateX(-110%);animation:dd-sheen 1.5s ease-out 1;pointer-events:none}
.dd-latest b{font-size:10px;padding:2px 6px;border-radius:6px;background:var(--accent);color:var(--bg-0);font-variant-numeric:tabular-nums}
.dd-update-label{font-size:11px;color:var(--dim);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-search{display:flex;align-items:center;gap:8px;flex:1;min-width:180px;max-width:380px;margin-left:auto;border:1px solid var(--line);background:var(--bg-2);border-radius:9px;padding:0 10px;color:var(--dim)}
.dd-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent)}
.dd-studio .dd-toolbar .dd-filter{background:none;border:0;box-shadow:none;outline:none;max-width:none;width:100%;padding:9px 0;margin:0;min-width:0;font-size:12px}
.dd-search>button{border:0;background:none;color:var(--dim);cursor:pointer}
.dd-project-menu{position:relative}.dd-project-menu summary{list-style:none;cursor:pointer;padding:8px 12px;border-radius:8px;color:var(--dim)}.dd-project-menu summary::-webkit-details-marker{display:none}
.dd-project-menu[open] summary{background:var(--hover);color:var(--text)}
.dd-project-menu>div{position:absolute;right:0;top:38px;z-index:35;display:grid;width:220px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);box-shadow:0 12px 40px #0004;animation:dd-panel-enter .16s var(--dd-ease)}
.dd-project-menu :is(button,label){display:block;text-align:left;font:inherit;font-size:12px;padding:10px;border:0;border-radius:7px;background:none;color:var(--text);cursor:pointer}
.dd-project-menu :is(button,label):hover{background:var(--hover)}
.dd-studio .dd-addr{min-height:37px;padding:6px 20px;gap:4px;font-family:inherit;font-size:11px;background:var(--bg-1)}
.dd-studio .dd-addr button{color:var(--dim);padding:3px 5px;border-radius:5px}
.dd-studio .dd-addr button:hover{color:var(--text);background:var(--hover);text-decoration:none}
.dd-updating{margin-left:auto;color:var(--dim);font:11px system-ui}.dd-mobile-folders{display:none}
.dd-studio .dd-body{grid-template-columns:var(--dd-tree-width,238px) 4px minmax(0,1fr) auto;position:relative;overflow:hidden}
.dd-studio .dd-tree{padding:0;background:color-mix(in srgb,var(--bg-2) 60%,var(--bg-1));border:0;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.dd-tree-title{height:46px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 18px}
.dd-eyebrow{font-size:10px;letter-spacing:.1em;font-weight:700;color:var(--dim)}
.dd-virtual{flex:1;min-height:0;overflow:auto;overflow-anchor:none;scrollbar-gutter:stable;position:relative}
.dd-virtual-space{position:relative;min-width:0}.dd-virtual-item{position:absolute;left:0;right:0}
.dd-virtual.moving .dd-virtual-item{transition:top .2s var(--dd-ease);animation:dd-row-enter .2s var(--dd-ease)}
.dd-virtual.moving .dd-virtual-space{transition:height .2s var(--dd-ease)}
.dd-folder-row{height:32px;margin:1px 6px;display:flex;align-items:center;gap:8px;padding-right:10px;border-radius:7px;cursor:pointer;font-size:12px;position:relative}
.dd-folder-row:hover{background:var(--hover)}.dd-folder-row.selected{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--text)}
.dd-folder-row>i{color:var(--accent);font-size:12px}.dd-folder-row>span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.dd-folder-row>small{color:var(--dim);font-size:10px;font-variant-numeric:tabular-nums}
.dd-folder-toggle{padding:0;flex-shrink:0;width:14px;height:26px;background:none;border:0;color:var(--dim);cursor:pointer;font-size:9px}
.dd-folder-toggle i{display:block;transition:transform .2s var(--dd-ease)}.dd-folder-toggle.open i{transform:rotate(90deg)}.dd-folder-toggle:disabled{visibility:hidden}
.dd-resizer{cursor:col-resize;touch-action:none;background:var(--line);opacity:.45;transition:background .15s,opacity .15s}.dd-resizer:hover,.dd-resizer:focus-visible{background:var(--accent);opacity:1}
.dd-studio .dd-tabs{min-height:46px;flex-shrink:0;gap:2px;padding:5px 12px;overflow-x:auto;white-space:nowrap;background:var(--bg-1)}
.dd-studio .dd-tabs button{font-size:12px;padding:8px 10px;position:relative;display:inline-flex;align-items:center;gap:7px}
.dd-studio .dd-tabs button.on{background:color-mix(in srgb,var(--accent) 11%,transparent)}
.dd-tabs button.on::after{content:'';height:2px;background:var(--accent);position:absolute;bottom:-5px;left:10px;right:10px;border-radius:2px;animation:dd-row-enter .2s var(--dd-ease)}
.dd-file-browser{display:flex;flex-direction:column;flex:1;min-height:0;animation:dd-panel-enter .18s var(--dd-ease)}
.dd-list-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;min-height:45px;font-size:12px}.dd-list-heading strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dd-list-heading>span{font-size:11px;color:var(--dim);white-space:nowrap}
.dd-studio .dd-file-row,.dd-studio .dd-folder-file{grid-template-columns:minmax(0,1fr) 116px 68px 30px;height:44px;padding:0 12px;gap:12px;margin:1px 8px;font-size:12px;cursor:pointer}
.dd-studio .dd-folder-file{width:calc(100% - 16px);text-align:left;background:none;border:0;color:var(--text)}
.dd-studio .dd-file-row>.p,.dd-studio .dd-folder-file>.p{display:flex;align-items:center;font-family:inherit;font-size:12px;min-width:0;gap:10px}
.dd-studio .dd-row .dd-fic{margin:0;flex-shrink:0;font-size:15px}.dd-studio .dd-folder-file .dd-fic{color:var(--accent)}
.dd-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:550}
.dd-file-name small{display:block;color:var(--dim);font-size:10px;overflow:hidden;text-overflow:ellipsis;font-weight:400}
.dd-file-status{color:var(--dim);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-file-status>span{display:inline-flex;align-items:center;gap:5px;max-width:100%}.dd-state-chip{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:3px 7px;border-radius:5px}
.dd-studio .dd-file-row .s,.dd-studio .dd-folder-file .s{grid-column:auto;visibility:visible;font-size:10px;text-align:right}
.dd-icon-button{display:inline-grid;place-items:center;width:30px;height:30px;flex-shrink:0;border:0;background:none;color:var(--dim);border-radius:7px;cursor:pointer}
.dd-icon-button:hover{background:var(--hover);color:var(--text)}.dd-row-menu{opacity:0}.dd-file-row:hover .dd-row-menu,.dd-file-row:focus-within .dd-row-menu,.dd-file-row.sel .dd-row-menu{opacity:1}
.dd-inspector{width:0;overflow:hidden;background:var(--bg-2);transition:width .22s var(--dd-ease);border-left:0 solid var(--line);min-height:0}
.dd-inspector.open{width:320px;border-left-width:1px}.dd-inspector-inner{width:320px;height:100%;display:flex;flex-direction:column;padding:18px;box-sizing:border-box}
.dd-inspector header{display:flex;align-items:center;justify-content:space-between}.dd-inspector h2{font-size:18px;line-height:1.4;overflow-wrap:anywhere;margin:14px 0 4px;letter-spacing:-.3px}
.dd-path-link{background:none;border:0;padding:0;text-align:left;color:var(--dim);font-size:11px;overflow-wrap:anywhere;cursor:pointer}
.dd-inspector-meta{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0;font-size:10px;color:var(--dim)}.dd-inspector-meta>span{padding:4px 7px;background:var(--bg-1);border-radius:5px}
.dd-inspector-actions{display:flex;gap:8px;margin-bottom:20px}.dd-inspector-tabs{display:flex;border-bottom:1px solid var(--line);gap:14px;margin-bottom:14px}
.dd-inspector-tabs button{border:0;border-bottom:2px solid transparent;background:none;padding:8px 2px;color:var(--dim);cursor:pointer;font:inherit;font-size:12px}.dd-inspector-tabs button[aria-pressed=true]{color:var(--text);border-bottom-color:var(--accent)}
.dd-inspector-content{flex:1;overflow:auto;min-height:0;animation:dd-panel-enter .18s var(--dd-ease)}.dd-inspector-content pre{font-size:11px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.dd-image-preview{position:relative}.dd-image-preview img{display:block;width:100%;height:auto;object-fit:contain;border-radius:8px;transition:opacity .2s}.dd-image-preview .dd-skeleton{position:absolute;inset:0}
.dd-binary-preview{display:flex;align-items:center;flex-direction:column;padding:25px 10px;gap:14px;text-align:center;color:var(--dim);font-size:12px;line-height:1.6}.dd-binary-preview>i{font-size:40px;opacity:.5}.dd-binary-preview p{margin:0}
.dd-revision{display:flex;flex-direction:column;gap:7px;border-left:2px solid var(--line);margin:0 0 18px 2px;padding:0 0 0 14px;font-size:12px}.dd-revision small,.dd-revision span{color:var(--dim);font-size:10px}.dd-revision strong{font-weight:550;overflow-wrap:anywhere;line-height:1.5}.dd-revision a{color:var(--accent);font-size:10px}
.dd-disclosure{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .2s var(--dd-ease),opacity .16s}.dd-disclosure.open{grid-template-rows:1fr;opacity:1}.dd-disclosure>div{overflow:hidden;min-height:0}
.dd-skeleton{padding:18px;flex:1;min-width:0;animation:dd-skeleton-appear .16s .12s both}
.dd-skeleton-row{display:flex;gap:14px;align-items:center;height:45px}.dd-skeleton-row :is(i,span,b){display:block;position:relative;overflow:hidden;background:color-mix(in srgb,var(--dim) 12%,transparent);border-radius:5px;height:9px}
.dd-skeleton-row i{width:22px;height:22px;flex-shrink:0}.dd-skeleton-row b{width:38px;margin-left:auto}.dd-skeleton-row :is(i,span,b)::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--text) 10%,transparent),transparent);transform:translateX(-110%);animation:dd-sheen 1.7s ease-in-out infinite}
.dd-skeleton.cards{padding:0}.dd-skeleton.cards .dd-skeleton-row{height:90px;border:1px solid var(--line);border-radius:12px;margin:10px 0;padding:16px}
.dd-studio .dd-pending,.dd-studio .dd-changes,.dd-studio .ds-panel{animation:dd-panel-enter .18s var(--dd-ease)}
.dd-studio .dd-pending{padding:12px}.dd-studio .dd-ptoolbar{padding:2px 4px 14px;border:0}.dd-studio .dd-clgroup{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden}
.dd-studio .dd-clhead{padding:12px;font-size:12px;gap:10px;flex-wrap:wrap}.dd-studio .dd-clhead .dd-cico{color:var(--accent)}.dd-studio .dd-clhead .desc{flex-basis:40%;min-width:120px;order:-1;flex-grow:1;font-weight:600}.dd-studio .dd-clhead>.num{font-size:10px;color:var(--dim)}.dd-studio .dd-clhead>.who{font-size:10px}.dd-studio .dd-clhead .cnt{margin-left:auto}
.dd-studio .dd-row.prow{padding:10px 14px!important;border-radius:0;font-size:11px;min-height:38px;background:color-mix(in srgb,var(--bg-2) 50%,transparent)}
.dd-studio .dd-row.prow .p{font-size:11px}.dd-studio .dd-row.prow .dd-pdepot{display:none}
.dd-studio .dd-cl{background:transparent;border-color:var(--line);padding:16px;grid-template-columns:65px minmax(0,1fr);border-radius:10px}.dd-studio .dd-cl .num{font-size:11px;font-weight:600;color:var(--dim)}.dd-studio .dd-cl .desc{font-size:13px;font-weight:600}.dd-studio .dd-cl .meta{grid-column:2;font-size:11px;white-space:normal}
.dd-studio .ds-panel{max-width:none;padding:24px}.dd-studio .ds-panel h2{font-size:22px;letter-spacing:-.4px}.dd-studio .ds-panel .ds-card{background:color-mix(in srgb,var(--bg-2) 45%,transparent)}
.dd-shelf-card{border:1px solid var(--line);border-radius:12px;margin:0 0 12px;overflow:hidden}.dd-shelf-head{display:flex;align-items:center;gap:14px;width:100%;border:0;background:none;color:var(--text);text-align:left;padding:16px;cursor:pointer}.dd-shelf-head>i{color:var(--accent)}.dd-shelf-head>span{flex:1;min-width:0}.dd-shelf-head strong{font-size:13px;display:block;overflow-wrap:anywhere}.dd-shelf-head small{font-size:11px;color:var(--dim);display:block;margin-top:7px}
.dd-shelf-files{padding:0 16px 16px}.dd-shelf-files>div{display:flex;gap:12px;align-items:center;padding:10px 0;font-size:12px;border-top:1px solid var(--line)}.dd-shelf-files>div>span{flex:1;min-width:0;overflow-wrap:anywhere}.dd-shelf-files a{color:var(--accent)}.dd-shelf-files small{color:var(--dim)}.dd-shelf-files details{font-size:11px;color:var(--dim);line-height:1.7;margin-top:15px}.dd-shelf-files code{display:block;overflow-wrap:anywhere;margin-top:10px}
.dd-inline-error{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:10px 18px;font-size:12px;line-height:1.6;background:color-mix(in srgb,var(--accent) 7%,var(--bg-2));flex-wrap:wrap}
.dd-studio .dd-empty{gap:10px;min-height:160px}.dd-studio .dd-empty h3{font-size:15px;color:var(--text);margin:8px 0 0}.dd-studio .dd-empty p{font-size:12px;max-width:350px;line-height:1.7;margin:0}
.dd-studio .dd-toast{animation:dd-toast-in .22s var(--dd-ease);max-width:calc(100% - 40px);box-sizing:border-box;line-height:1.5;text-align:center}
.dd-studio .dd-backdrop{animation:dd-skeleton-appear .16s}.dd-studio .dd-modal{animation:dd-panel-enter .2s var(--dd-ease);border-radius:16px;padding:22px}
@keyframes dd-sheen{to{transform:translateX(110%)}}
@keyframes dd-skeleton-appear{from{opacity:0}to{opacity:1}}
@keyframes dd-panel-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes dd-row-enter{from{opacity:0;translate:0 -3px}to{opacity:1;translate:0 0}}
@keyframes dd-toast-in{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
@container (max-width:1050px){.dd-inspector{position:absolute;right:0;top:0;bottom:0;z-index:12;box-shadow:-12px 0 40px #0002}.dd-studio .dd-body{grid-template-columns:var(--dd-tree-width,210px) 4px minmax(0,1fr)}.dd-head-meta{display:none}}
@container (max-width:720px){.dd-studio .dd-body{grid-template-columns:minmax(0,1fr)}.dd-studio .dd-tree,.dd-studio .dd-resizer{display:none}.dd-studio .folders-visible .dd-tree{display:flex;position:absolute;inset:0 auto 0 0;width:280px;max-width:90%;z-index:15;box-shadow:10px 0 30px #0003;background:var(--bg-2);animation:dd-panel-enter .18s}.dd-mobile-folders{display:inline-block}.dd-studio .dd-head{padding:0 12px;gap:7px}.dd-studio .dd-head>.hash{display:none}.dd-studio .dd-workspace-bar{padding:7px 12px}.dd-studio .dd-workspace-bar label{flex:1;max-width:100%}.dd-studio .dd-workspace-bar label>.kp-select{flex:1;min-width:0}.dd-studio .dd-toolbar{padding:9px 12px;gap:8px}.dd-search{flex-basis:100%;max-width:none;order:5}.dd-update-label{flex:1;max-width:none;text-align:right;font-size:10px}.dd-studio .dd-latest span{display:inline}.dd-studio .dd-tabs{padding:5px 8px}.dd-studio .dd-file-row,.dd-studio .dd-folder-file{grid-template-columns:minmax(0,1fr) 64px 28px;padding:0 8px;gap:8px}.dd-file-status{display:none}.dd-row-menu{opacity:1}.dd-studio .dd-file-row .s,.dd-studio .dd-folder-file .s{grid-column:2}.dd-list-heading{padding:12px}.dd-list-heading>span{font-size:10px}.dd-studio .ds-panel{padding:18px 12px}.dd-phint{display:none}.dd-inspector.open{width:min(360px,100%)}.dd-inspector-inner{width:100%}.dd-studio .dd-clhead .dd-cl-ws{max-width:150px}.dd-studio .dd-clhead .desc{flex-basis:75%}.dd-studio .dd-clhead .who{display:none}}
@media(prefers-reduced-motion:reduce){.dd-studio *,.dd-studio *::before,.dd-studio *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.dd-stage{display:flex;flex-direction:column;flex:1;min-height:0;transition:opacity .09s,translate .09s}.dd-stage.leaving{opacity:0;translate:0 3px}
.dd-presence{display:contents}.dd-presence.leaving .dd-backdrop{animation:dd-skeleton-appear .16s reverse both}.dd-presence.leaving .dd-modal{animation:dd-panel-enter .16s reverse both}
.dd-virtual.moving .dd-row-exit{pointer-events:none;animation:dd-row-leave .18s both;z-index:1}
@keyframes dd-row-leave{to{opacity:0;translate:0 -8px;clip-path:inset(0 0 100% 0)}}
@media(prefers-reduced-motion:reduce){.dd-virtual.moving .dd-row-exit{display:none}.dd-stage.leaving{translate:none}}

.dd-studio .dd-workspace-context{padding:0;border:0;min-height:0;background:none;max-width:420px;min-width:0;flex-shrink:1}.dd-studio .dd-workspace-context label{min-width:0;max-width:100%;display:flex;gap:10px;align-items:center}.dd-studio .dd-workspace-context .kp-select{min-width:0;max-width:300px}
.dd-studio .dd-file-row>.p,.dd-studio .dd-folder-file>.p{font-size:13px}.dd-file-status,.dd-studio .dd-file-row .s,.dd-studio .dd-folder-file .s{font-size:11px}
@container(max-width:900px){.dd-studio .dd-head{height:auto;min-height:58px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.dd-studio .dd-workspace-context{flex-basis:100%;max-width:none;order:5;padding-top:6px}.dd-studio .dd-workspace-context .kp-select{max-width:none;flex:1}.dd-studio .dd-head-spacer{min-width:0}.dd-studio .dd-head .dd-depot-sel{min-width:100px;max-width:50%}.dd-studio .dd-workspace-context label{flex:1}.dd-head-meta{display:none}}

.dd-pending-files,.dd-shelf-filelist{display:flex;min-height:0;max-height:308px}
.dd-studio .dd-pending-files .prow{height:42px;width:100%;text-align:left;color:var(--text);border:0;cursor:pointer}
.dd-shelf-files>.dd-shelf-filelist{display:flex;padding:0;border:0}.dd-shelf-file{display:flex;align-items:center;gap:12px;height:44px;border-bottom:1px solid var(--line);font-size:12px}.dd-shelf-file>span{min-width:0;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.dd-shelf-file a{padding:10px}

.dd-studio .dd-clhead{display:grid;grid-template-columns:18px 18px minmax(0,1fr) auto 30px;gap:6px 10px;padding:14px}
.dd-studio .dd-clhead>.dd-folder-toggle{grid-column:1;grid-row:1}.dd-studio .dd-clhead>.dd-cico{grid-column:2;grid-row:1}.dd-studio .dd-clhead>.desc,.dd-studio .dd-clhead>.dd-desc-edit{grid-column:3;grid-row:1;font-size:13px;min-width:0;text-align:left;order:0;margin:0}.dd-studio .dd-clhead>button.desc{border:0;padding:0;background:none;color:var(--text);font-weight:600;cursor:text}.dd-studio .dd-clhead>button.desc:disabled{opacity:1;cursor:default}
.dd-cl-context{grid-column:3;grid-row:2;display:flex;gap:12px;min-width:0;color:var(--dim);font-size:11px}.dd-cl-context>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dd-cl-context>span:first-child{flex-shrink:0}
.dd-cl-submit{grid-column:4;grid-row:1}.dd-cl-more{grid-column:5;grid-row:1}.dd-studio .dd-clhead>.cnt{grid-column:4;grid-row:2;margin:0;text-align:right;font-size:10px}
@container(max-width:720px){.dd-studio .dd-clhead{grid-template-columns:16px minmax(0,1fr) auto 28px;gap:6px;padding:10px}.dd-studio .dd-clhead>.dd-cico{display:none}.dd-studio .dd-clhead>.desc,.dd-studio .dd-clhead>.dd-desc-edit,.dd-cl-context{grid-column:2}.dd-cl-submit,.dd-studio .dd-clhead>.cnt{grid-column:3}.dd-cl-more{grid-column:4}.dd-cl-context{font-size:10px;gap:8px}.dd-cl-context>span:last-child{display:none}}

.dd-studio .dd-row.prow .p{display:flex;align-items:center;gap:9px;min-width:0}.dd-pending-path{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dd-studio .dd-row.prow .dd-fic,.dd-studio .dd-row.prow .dd-ftype{flex-shrink:0}

.dd-workspace-list{display:grid;gap:10px}.dd-workspace-entry{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;padding:6px;background:var(--bg-1)}.dd-workspace-entry.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--bg-1))}.dd-workspace-select{display:flex;align-items:flex-start;gap:14px;min-width:0;flex:1;padding:12px;border:0;background:none;color:var(--text);text-align:left}.dd-workspace-select>span{display:flex;flex-direction:column;gap:6px;min-width:0}.dd-workspace-select>i{color:var(--accent);margin-top:4px}.dd-workspace-select strong{font-size:14px;overflow-wrap:anywhere}.dd-workspace-root{font:12px ui-monospace,monospace;overflow-wrap:anywhere;color:var(--dim)}.dd-workspace-entry>.dd-icon-button{margin:0 8px}.dd-desktop-required{display:flex;gap:16px}.dd-desktop-required>i{font-size:26px;color:var(--accent)}.dd-desktop-required a{display:inline-flex;text-decoration:none;margin:4px 0}
.dd-setup-steps{display:flex;align-items:center;gap:14px;margin-bottom:24px;font-size:12px;color:var(--dim)}.dd-setup-steps>span{border-radius:7px;padding:7px 10px;background:var(--bg-1)}.dd-setup-steps .current{color:var(--text);background:color-mix(in srgb,var(--accent) 20%,var(--bg-1))}.dd-setup-steps>i{font-size:9px}.dd-setup-root-note{display:flex;align-items:center;gap:14px;padding:16px;margin:16px 0;border:1px dashed var(--line);border-radius:9px;font-size:13px}.dd-setup-root-note small{display:block}.dd-remove-workspace .ds-row{margin-top:16px}.dd-studio .ds-title{flex-wrap:wrap}.dd-studio .ds-title>div{flex:1;min-width:190px}.dd-studio .ds-title>button{flex-shrink:0}
.dd-build-path{overflow-wrap:anywhere}.dd-build-readiness,.dd-build-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0}.dd-build-readiness span{padding:5px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:20px;color:var(--dim);font-size:12px}.dd-build-readiness [data-ready=true]{color:var(--accent)}.dd-build-actions button{min-height:38px}.dd-build-actions small{margin-left:8px;color:var(--dim)}.dd-build-package{margin-top:24px}.dd-build-output{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:24px;background:var(--bg-2)}.dd-build-output>.ds-row{padding:12px 16px;flex-wrap:wrap}.dd-build-output time{font-size:12px;color:var(--dim);flex:1}.dd-build-output pre{padding:16px;margin:0;height:320px;overflow:auto;font:12px/1.65 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.dd-build-output>.ds-hint{padding:0 16px}.dd-build-sheen{height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:200% 100%;animation:dd-build-sheen 1.6s linear infinite}@keyframes dd-build-sheen{to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.dd-build-sheen{animation:none}}
.dd-remote{height:100%;overflow:auto;width:100%;padding:20px!important}.dd-remote>.ds-card{margin:16px 0}.dd-remote h3{overflow-wrap:anywhere}.dd-remote pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:280px;overflow:auto;font:12px/1.5 Consolas,monospace}.dd-remote .ds-row{flex-wrap:wrap}.dd-remote .dd-build-actions button{min-height:44px}.dd-remote details{margin-top:12px}

/* Native-style chrome; editing and intentionally copyable content stay selectable. */
:where(.dd-pane,.dd-revision-dialog,.dd-remote){-webkit-user-select:none;user-select:none}
:where(.dd-pane,.dd-revision-dialog,.dd-remote) :is(input,textarea,[contenteditable]:not([contenteditable="false"]),pre,code,[data-selectable-text]){-webkit-user-select:text;user-select:text}
.dd-revision-dialog{margin:auto;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--bg-2);color:var(--text);box-shadow:0 24px 80px #0006}
.dd-revision-dialog::backdrop{background:#0008;backdrop-filter:blur(4px)}
.dd-revision-dialog form{display:grid;gap:18px}.dd-revision-dialog header,.dd-revision-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.dd-revision-dialog h2{margin:6px 0 0}.dd-revision-dialog label{display:grid;gap:8px}.dd-revision-dialog input{padding:12px;border-radius:9px;background:var(--bg-1);color:var(--text);border:1px solid var(--line)}.dd-revision-dialog p{margin:0;line-height:1.5}.dd-revision-scope{overflow-wrap:anywhere;color:var(--dim)}.dd-revision-force{padding:16px;border:1px solid var(--line);border-radius:12px;display:grid;gap:10px}.dd-revision-force p{color:var(--dim);font-size:13px}.dd-revision-dialog footer{justify-content:flex-end}
/* Account-owned display name treatments (DisplayName.tsx). Never applied to
   message content.

   A name style changes the lettering, never the size: system fonts are scaled
   to the app font's x-height (--name-aspect) with font-size-adjust; the two web
   fonts are registered in DisplayName.tsx already scaled and with the app font's
   line metrics. .display-name keeps the surrounding font, so the line box a name
   sits on is always the app font's; .dn draws the name and adds no line height of
   its own. Together no name makes its row taller or shorter than anyone else's
   (tools/chat-look/name-sizes.cjs).
   Needs font-size-adjust and FontFace size-adjust: Chromium 127+ (Edge and the
   desktop app), Safari 17+ (iPadOS 17+). Older browsers show the names unscaled. */
.display-name { overflow-wrap: anywhere; }
.dn { color: var(--name-a, var(--text)); font-size-adjust: var(--name-aspect, 0.5); font-weight: var(--fw-bold); line-height: 0; }
.dn-serif { font-family: Georgia, 'Times New Roman', serif; }
/* A monospace space is a full cell wide; tighten it so names don't look double-spaced. */
.dn-mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: -0.02em; word-spacing: -0.2em; }
.dn-rounded { font-family: 'Trebuchet MS', Verdana, sans-serif; }
/* Only the 600 weight of these is shipped; asking for bold would fake it. While
   the face loads, the name shows in the app font rather than a stand-in script. */
.dn-handwritten { font-family: 'Name Handwritten', var(--sans); font-size-adjust: none; font-weight: var(--fw-semibold); }
.dn-script { font-family: 'Name Script', var(--sans); font-size-adjust: none; font-weight: var(--fw-semibold); }

.dn-gradient { background: linear-gradient(110deg, var(--name-a), var(--name-b)); background-clip: text; -webkit-background-clip: text; color: transparent; }
.dn-neon { text-shadow: 0 0 6px color-mix(in srgb, var(--name-a) 55%, transparent); }
.dn-outline { -webkit-text-stroke: 0.5px var(--bg-0); paint-order: stroke fill; text-shadow: 1px 0 var(--bg-0), -1px 0 var(--bg-0), 0 1px var(--bg-0), 0 -1px var(--bg-0); }
.dn-shadow { text-shadow: 1px 2px 0 color-mix(in srgb, var(--name-b) 45%, var(--bg-0)); }
.dn-animated { background-image: linear-gradient(110deg, var(--name-a) 25%, var(--name-b) 45%, var(--name-a) 65%); background-size: 240% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: name-shimmer 6s var(--ease-loop) infinite; }
@keyframes name-shimmer { 0%, 30% { background-position: 100% 50%; } 75%, 100% { background-position: 0% 50%; } }
@media (prefers-reduced-motion: reduce) { .dn-animated { animation: none; } }
@media (forced-colors: active) { .dn { color: CanvasText; background: none; text-shadow: none; -webkit-text-stroke: 0; animation: none; } }
.composer-link-preview {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 6px 3px;
  min-width: 0;
  user-select: none;
}
.composer-link-preview-label, .composer-link-preview-more {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 22px;
  color: var(--dim);
}
.composer-link-preview-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-height: 84px;
  overflow-y: auto;
  padding: 3px;
  margin: -3px;
}
.composer-link-preview-items .message-document-link { flex: 0 1 auto; }
/* User Settings → Capture, and the one-time shortcut offer. The settings page reuses the voice settings'
   cards, rows and key fields (voiceSettings.css: .vs-*), one column wide, with the same 16px between everything. */
.cap-panel { grid-template-columns: minmax(0, 1fr); }
.profile-editor-layout:has(.profile-editor-preview[data-section='capture']) { grid-template-columns: minmax(0, 1fr); }
.profile-editor-preview[data-section='capture'] { display: none; }

.cap-field { display: flex; flex-direction: column; gap: 8px; }
.vs-key.is-off, .cap-fixed.is-off { opacity: 0.55; }
.cap-fixed { display: inline-flex; justify-content: center; cursor: default; }
.cap-clear {
  flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--dim);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.cap-clear:hover { background: var(--hover); color: var(--text); }
.cap-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The line under a shortcut field. */
.cap-result { margin: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 11.5px; color: var(--dim); }
.cap-result.is-error { color: var(--danger-text, var(--danger)); }
.cap-result kbd { font: 700 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; padding: 3px 6px; border-radius: 6px; background: var(--bg-2); color: var(--text); }
.cap-tag { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-1); font-size: 11px; font-weight: 650; color: var(--dim); }

.cap-folder { display: flex; flex-direction: column; gap: 8px; }
.cap-path {
  display: block; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-1); color: var(--dim);
  font: 12px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cap-fps button { padding: 6px 14px; }

/* The one-time offer to take PrtScn and Win+Shift+S: a card in the corner, not a dialog; typing goes on. */
.cap-offer {
  position: fixed; right: 16px; bottom: 16px; z-index: 1200; width: 320px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 14px;
  background: var(--bg-1); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  animation: cap-offer-in 180ms ease-out;
}
.cap-offer p { margin: 0; font-size: 13.5px; font-weight: 650; line-height: 1.4; color: var(--text); }
.cap-offer p.is-quiet { font-weight: 500; color: var(--dim); }
.cap-offer-actions { display: flex; gap: 12px; }
@keyframes cap-offer-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .cap-offer { animation: none; } }

/* Safe recording mode (safeMode.ts, set from apps/desktop/src/capture/safemode.js): while a recording could show
   this window, every DM is blurred past reading: its list rows (names, faces, previews, badges), the person
   filter, and an open DM whole (header, messages, composer, and a thread beside it). Channels are left alone.
   Instant, clipped to its own box, and inert, so no hover title or click reaches what is hidden. */
html.cap-safe :is(.chan-group.groups .dm-row, .chan-group.people .dm-row, .people-filter) { filter: blur(16px); clip-path: inset(0); pointer-events: none; user-select: none; transition: none; }
html.cap-safe .chat-pane.is-dm { filter: blur(26px); clip-path: inset(0); pointer-events: none; user-select: none; transition: none; }
html.cap-safe:has(.chat-pane.is-dm) .thread-slot { filter: blur(26px); clip-path: inset(0); pointer-events: none; user-select: none; transition: none; }

/* The other places a DM shows: the search results and its filters (the conversation list), the Threads inbox, Catch up, a thread opened
   from the inbox or a search, a toast ("Sent to ..."), the profile card's draft, and what opens over the page: the image viewer, a
   confirm or rename box (a group's name), the people pickers (forward, add people), the thread export, and the capture editors' Send to
   list. These are not DM-only (the viewer shows any image), so they are blurred whenever safe mode is on. */
html.cap-safe :is(.message-search .search-results, .message-search .search-filters, .threads-inbox .thread-inbox-card, .unread-nav .unread-list button, .thread-slot.is-dm, .toast, .profile-card .pc-dm) { filter: blur(20px); clip-path: inset(0); pointer-events: none; user-select: none; transition: none; }
/* The ones that open over the page stay clickable (blurred, but they can be closed): inert, a click would fall through to the page behind. */
html.cap-safe :is(.lb-overlay, .confirm-overlay, .overlay.member-picker, .thread-export-dialog, .ie-picker:not(.ve-offer, .ve-gif)) { filter: blur(20px); clip-path: inset(0); user-select: none; transition: none; }

/* The composer's capture button and its menu (desktop app): its own column right after Attach, the rest of
   the composer's row moves one column along (chat/composer.css lays the row out). Hidden in the phone layout. */
.capture-btn-wrap { position: relative; display: flex; }
.capture-pop { left: 0; }
.composer > .capture-btn-wrap .attach-btn { display: grid; place-items: center; width: var(--control-md); height: var(--control-md); padding: 0; border: 0;
  border-radius: var(--radius-md); background: var(--bg-3); color: var(--text); font-size: var(--fs-lg); }
.composer > .capture-btn-wrap .attach-btn:hover,
.composer > .capture-btn-wrap .attach-btn[aria-expanded='true'] { background: var(--hover); }
@media (min-width: 761px) {
  .composer:has(> .capture-btn-wrap) { grid-template-columns: var(--control-md) var(--control-md) auto var(--control-md) var(--control-md) minmax(0, 1fr) auto; }
  .composer > .capture-btn-wrap { grid-row: 2; grid-column: 2; }
  .composer:has(> .capture-btn-wrap) > .composer-tools { grid-column: 3; }
  .composer:has(> .capture-btn-wrap) > .gif-btn { grid-column: 4; }
  .composer:has(> .capture-btn-wrap) > .emoji-btn { grid-column: 5; }
  .composer:has(> .capture-btn-wrap):not(:has(> .gif-btn)) > .emoji-btn { grid-column: 4; }
  .composer:has(> .capture-btn-wrap) .composer-foot > .composer-enter { grid-column: 6; }
  .composer:has(> .capture-btn-wrap) > .send { grid-column: 7; }
  .composer:has(> .capture-btn-wrap) .composer-foot > .composer-status { grid-column: 1 / 7; }
  .composer:has(> .capture-btn-wrap) .composer-foot > .composer-limit { grid-column: 7; }
}
@media (max-width: 760px) { .composer > .capture-btn-wrap { display: none; } }
.app-shell .app.has-thread {grid-template-columns:var(--sidebar-w,240px) minmax(280px,1fr) auto}
.thread-slot {display:flex;min-height:0;max-width:min(55vw,var(--thread-max,55vw));overflow:hidden}
/* No room for a thread beside a conversation of its minimum width (Chat.tsx): the thread covers the conversation. */
@media(min-width:901px){.app-shell .app.has-thread.thread-over {grid-template-columns:var(--sidebar-w,240px) minmax(0,1fr)}.app.thread-over>:is(.main,.thread-slot) {grid-column:2;grid-row:1}.app.thread-over>.main {visibility:hidden}.app.thread-over>.thread-slot {max-width:none}.app.thread-over .thread-dock {width:100%!important;border-left:0}.app.thread-over .thread-resizer {display:none}}
.thread-dock {display:flex;flex-direction:column;position:relative;min-height:0;max-width:100%;flex-shrink:0;background:var(--bg-1);color:var(--text);border-left:1px solid var(--line);user-select:none;animation:thread-dock-enter var(--dur-base) var(--ease)}
/* The dock's button look skips a post's avatar, its hover toolbar, everything in its body except the post's reaction row and edit form, and the reply box (the channel's Composer): message content (author, quote, mentions, attachments, code) is styled like the channel's (chat/messages.css). :where keeps the specificity. */
.thread-dock :is(button:not(:where(.thread-post > .msg-avatar,.thread-post > .msg-actions button,.thread-post .msg-body button:not(.thread-post-actions *,.thread-edit *),.composer-dock button)),input,textarea) {font:inherit;color:inherit}
.thread-dock button:not(:where(.thread-post > .msg-avatar,.thread-post > .msg-actions button,.thread-post .msg-body button:not(.thread-post-actions *,.thread-edit *),.composer-dock button)),.threads-inbox button {cursor:pointer;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text);transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.thread-dock button:not(:where(.thread-post > .msg-avatar,.thread-post > .msg-actions button,.thread-post .msg-body button:not(.thread-post-actions *,.thread-edit *),.composer-dock button)):hover,.threads-inbox button:hover {background:var(--hover,var(--bg-2))}
.thread-dock button:disabled,.threads-inbox button:disabled {opacity:.4;cursor:default}
.thread-dock :is(button,input,textarea):focus-visible,.threads-inbox button:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
/* 56px like the sidebar's and the conversation's headers (chat/header.css), so they share a baseline. */
.thread-dock-head {display:flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;height:56px;padding:0 16px;border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent)}
.thread-dock-head h2 {margin:0 0 3px;font-size:16px;font-weight:700;letter-spacing:-.02em}
.thread-dock-head>div:first-child {min-width:0}
.thread-dock-head span {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);font-size:11px}
.thread-header-actions {display:flex;gap:2px;align-items:center}
.thread-header-actions button {width:28px;height:28px;flex-shrink:0;font-size:12px}
.thread-preferences {display:flex;gap:8px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.thread-preferences>button {padding:5px 9px;font-size:12px;border-color:var(--line);display:flex;align-items:center;gap:7px}
.thread-preferences .themed-select {margin-left:auto;max-width:170px}
.thread-preferences .kp-select {margin-left:auto;max-width:170px}
.thread-preferences .is-active {color:var(--accent)}
.thread-dock .thread-scroll {padding:12px 16px 18px;flex:1;position:relative;min-height:60px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
/* A post is laid out like a channel message: avatar beside the body (the msg-* classes in chat/messages.css set the type), 16px between posts. */
.thread-dock .thread-post {position:relative;display:flex;gap:var(--sp-3);padding:var(--sp-2) 0;border:0;background:transparent;border-radius:0}
.thread-post > .msg-body {flex:1;min-width:0}
.thread-post .msg-body :is(.msg-reply,.thread-decision-badge) {margin-bottom:var(--sp-1)}
/* The band reaches out into the gutter, so a banded post's avatar and text stay in the column. */
.thread-dock .thread-post:is(.mentions-me,.outgoing.failed) {margin-inline:calc(-1 * var(--sp-2));padding-inline:var(--sp-2);border-radius:var(--radius-md)}
.thread-select {accent-color:var(--accent);width:15px;height:15px;flex-shrink:0;margin-top:var(--sp-3)}
.thread-dock .thread-parent {margin-bottom:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.thread-dock .thread-post.is-selected {background:color-mix(in srgb,var(--accent) 8%,transparent);box-shadow:inset 2px 0 var(--accent);padding-left:10px;padding-right:10px;border-radius:8px}
.thread-decision-badge {display:flex;align-items:center;gap:6px;color:var(--accent);font-size:10px;margin:4px 0 7px}
.thread-decisions {border-bottom:1px solid var(--line);padding:10px 16px;font-size:12px;flex-shrink:0}
.thread-decisions summary {cursor:pointer;color:var(--accent);font-weight:600}
.thread-decisions summary span {color:var(--dim);margin-left:6px}
.thread-decisions>div {max-height:130px;overflow:auto;margin-top:7px}
.thread-decisions button {display:grid;grid-template-columns:1fr auto;text-align:left;width:100%;padding:6px 8px;gap:3px 8px}
.thread-decisions button strong {font-size:10px;color:var(--dim)}
.thread-decisions button span {grid-row:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:12px}
.thread-decisions button i {grid-column:2;grid-row:1 / span 2;align-self:center;color:var(--dim)}
.thread-selection-bar {display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--line);font-size:11px;background:color-mix(in srgb,var(--accent) 6%,var(--bg-1));animation:thread-dock-enter var(--dur-fast) var(--ease)}
.thread-selection-bar>span {margin-right:auto;color:var(--dim)}
.thread-selection-bar button {padding:6px 8px}
.thread-export-dialog {box-sizing:border-box;margin:auto;width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:16px;background:var(--bg-1);color:var(--text);box-shadow:0 24px 90px #0007;overflow:auto;user-select:none;animation:thread-export-enter var(--dur-base) var(--ease)}
.thread-export-dialog::backdrop {background:#080a145f;backdrop-filter:blur(5px);animation:thread-export-backdrop var(--dur-fast) var(--ease)}
.thread-export-dialog header {display:flex;align-items:center;gap:12px;padding:20px;border-bottom:1px solid var(--line)}
.thread-export-icon {display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.thread-export-eyebrow {font-size:9px;letter-spacing:.12em;color:var(--dim)}
.thread-export-dialog h2 {margin:4px 0 0;font-size:17px;letter-spacing:-.02em}
.thread-export-dialog header>button {margin-left:auto}
.thread-export-dialog button,.thread-export-dialog a.btn-primary {border:1px solid transparent;border-radius:8px;padding:8px 11px;font:inherit;font-size:12px;cursor:pointer;text-decoration:none;transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.thread-export-dialog button:not(.btn-primary) {color:var(--text);background:transparent}
.thread-export-dialog button:not(.btn-primary):hover {background:var(--bg-2)}
.thread-export-dialog button:disabled {opacity:.45;cursor:default}
.thread-export-dialog fieldset {display:flex;flex-direction:column;gap:9px;border:0;margin:0;padding:20px;min-width:0}
.thread-export-dialog label {font-size:12px;font-weight:600;margin-top:4px}
.thread-export-dialog input {box-sizing:border-box;width:100%;background:var(--bg-2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px;font:inherit;font-size:13px;user-select:text}
.thread-export-dialog :is(input,button,a):focus-visible {outline:2px solid var(--accent);outline-offset:2px}
.thread-export-dialog .kp-select {width:100%}
.thread-export-dialog footer {display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line)}
.thread-export-audience {display:flex;gap:9px;margin-top:6px;padding:11px;border:1px solid var(--line);border-radius:9px;color:var(--dim);font-size:12px;line-height:1.5}
.thread-export-audience i {margin-top:3px;color:var(--accent)}
.thread-export-preview {font-size:12px;color:var(--dim);margin-top:5px}
.thread-export-preview summary {cursor:pointer;padding:5px 0}
.thread-export-preview blockquote {border-left:2px solid var(--line);padding-left:10px;margin:14px 0;user-select:text;overflow-wrap:anywhere}
.thread-export-preview p {white-space:pre-wrap;max-height:150px;overflow:auto;color:var(--text)}
.thread-export-success {display:flex;align-items:center;flex-direction:column;gap:12px;padding:30px 20px;text-align:center}
.thread-export-success>i {font-size:28px;color:var(--accent)}
.thread-export-success h3,.thread-export-success p {margin:0}
.thread-export-success p {font-size:13px;color:var(--dim)}
@keyframes thread-export-enter {from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:none}}
@keyframes thread-export-backdrop {from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.thread-export-dialog,.thread-export-dialog::backdrop,.thread-selection-bar{animation:none}.thread-export-dialog button{transition:none}}
.thread-post .file-attachment {margin-top:8px}
.thread-dock .thread-divider {display:flex;align-items:center;gap:10px;margin:5px 0;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}
.thread-divider:after {content:'';height:1px;background:var(--line);flex:1}
.thread-post-actions {display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin-top:8px}
.thread-post-actions button {font-size:11px;min-height:25px;min-width:25px;padding:3px 6px;opacity:.65;display:inline-flex;align-items:center;gap:4px}
.thread-post:hover .thread-post-actions button,.thread-post:focus-within .thread-post-actions button {opacity:1}
.thread-post-actions .is-active {background:var(--active,var(--bg-2));border-color:var(--accent);opacity:1}
.thread-dock .thread-context-link {margin-left:auto;font-size:10px}
.thread-unread-divider {display:flex;gap:8px;align-items:center;color:var(--accent);font-size:10px;margin:9px 0}
.thread-unread-divider:before,.thread-unread-divider:after {content:'';height:1px;background:var(--accent);flex:1;opacity:.4}
.thread-empty,.thread-hint {font-size:12px;color:var(--dim);line-height:1.6;padding:10px 0}
.thread-empty {text-align:center;padding:36px 0}.thread-empty span {font-size:11px}
.thread-error {font-size:12px;line-height:1.5;color:var(--text);background:var(--bg-2);border-left:2px solid var(--accent);padding:9px 11px;border-radius:6px}
.thread-load {display:block;margin:12px auto;padding:8px 12px!important;background:var(--bg-2)!important;font-size:12px}
.thread-dock .thread-new-replies {align-self:center;position:absolute;bottom:235px;z-index:2;border:1px solid var(--line);border-radius:20px;background:var(--bg-2);box-shadow:0 5px 20px #0003;font-size:12px;padding:8px 14px}
.thread-edit textarea {width:100%;box-sizing:border-box;min-height:80px;background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:8px;user-select:text}
.thread-edit button {padding:5px 10px;margin:5px 4px 0 0;background:var(--bg-2)}
.thread-resizer {position:absolute;left:-3px;top:0;bottom:0;width:6px;cursor:col-resize;z-index:4;touch-action:none}
.thread-resizer:hover,.thread-resizer:focus-visible {background:color-mix(in srgb,var(--accent) 35%,transparent)}
.channel-threads {position:relative}
.channel-threads.has-unread::after {content:"";position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg-2);pointer-events:none}
.threads-inbox {height:100%;display:flex;flex-direction:column;min-height:0;user-select:none;background:var(--bg-1);color:var(--text)}
.threads-inbox>header {display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.threads-inbox h1 {margin:0 0 5px;font-size:20px}.threads-inbox header p {margin:0;font-size:12px;color:var(--dim)}
.threads-inbox header button {width:32px;height:32px}
.threads-inbox-toolbar {display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid var(--line)}
.threads-inbox-toolbar>span {margin-left:auto;font-size:11px;color:var(--dim)}
.threads-inbox-list {flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-x:none;padding:18px 24px}
.threads-inbox .thread-inbox-card {display:block;width:100%;text-align:left;padding:14px 16px;margin-bottom:10px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);animation:thread-menu-enter var(--dur-fast) var(--ease)}
.threads-inbox .thread-inbox-card.has-unread {border-left:3px solid var(--accent)}
.thread-inbox-meta {display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--dim);margin-bottom:12px}
.thread-inbox-meta span {overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.thread-inbox-content {display:flex;gap:9px;align-items:flex-start}.thread-inbox-content>div {min-width:0}
.thread-inbox-content strong {font-size:12px}.thread-inbox-content p {font-size:13px;line-height:1.5;margin:4px 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.thread-inbox-card footer {display:flex;align-items:center;gap:12px;font-size:11px;color:var(--dim)}.thread-inbox-card footer b {color:var(--accent)}.thread-inbox-card footer>i:last-child {margin-left:auto}
.threads-empty {text-align:center;margin:70px 20px;color:var(--dim)}.threads-empty>i {font-size:32px}.threads-empty h2 {font-size:16px;color:var(--text)}.threads-empty p {font-size:13px}
@keyframes thread-dock-enter {from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
@keyframes thread-menu-enter {from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1200px){.app-shell .app.has-thread {grid-template-columns:var(--sidebar-w,220px) minmax(180px,1fr) auto}.thread-slot {max-width:min(45vw,var(--thread-max,45vw))}}
@media(max-width:900px){.app-shell .app.has-thread {grid-template-columns:var(--sidebar-w,220px) minmax(0,1fr)}.thread-slot {position:fixed;inset:var(--studio-viewport-top,0px) 0 auto;height:var(--studio-viewport-height,100dvh);width:100%;max-width:100%;z-index:90;background:var(--bg-1)}.thread-dock {width:100%!important;max-width:100%;border:0}.thread-resizer {display:none}.thread-dock-head {padding-top:max(12px,env(safe-area-inset-top))}.thread-header-actions button {min-width:36px;height:36px}.thread-header-actions button[aria-label$="thread"] {min-width:32px}.thread-post-actions button {min-height:34px;min-width:30px}.threads-inbox-toolbar>span {display:none}.threads-inbox-list {padding:12px}.thread-slot.tab-hidden {display:none}}
@media(prefers-reduced-motion:reduce){.thread-dock,.threads-inbox .thread-inbox-card {animation:none}.thread-dock *,.threads-inbox * {transition:none!important;scroll-behavior:auto!important}}
@media(max-width:900px){
 .app.has-thread>.sidebar,.app.has-thread>.main {visibility:hidden}
 .app-shell:has(.app.has-thread)>.studio-mobile-header {visibility:hidden}
 .thread-slot {z-index:200;background:var(--bg-0)}
}
.thread-dock .thread-divider {padding-top:0}
.thread-dock .thread-highlight {background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:8px;box-shadow:inset 2px 0 var(--accent);padding-inline:10px}
/* Idea briefs (/design, /fish): the card, thread events, menus, the form, the Charts list and settings.
   output/idea-briefs/SPEC.md and its mockups. Gaps are the spacing tokens, equal on both axes. */

/* Feature tokens: five status colours (text on a tint of themselves) and the two type marks. */
:root {
  --ib-new: color-mix(in srgb, var(--blue) 45%, var(--text));
  --ib-review: var(--warning-text);
  --ib-pitch: color-mix(in srgb, var(--purple) 50%, var(--text));
  --ib-approved: var(--success-text);
  --ib-parked: var(--dim);
  --ib-tint: 16%;
  --ib-tint-base: var(--bg-2);
  --ib-fish: color-mix(in srgb, var(--teal) 60%, var(--text));
  --ib-design: color-mix(in srgb, var(--orange) 55%, var(--text));
  --ib-row-open: color-mix(in srgb, var(--accent) 6%, transparent);
}
[data-scheme='light'] {
  --ib-new: color-mix(in srgb, var(--blue) 80%, var(--text));
  --ib-pitch: #6a3fc9;
  --ib-approved: color-mix(in srgb, var(--success) 78%, var(--text));
  --ib-tint: 12%;
  --ib-tint-base: var(--bg-0);
  --ib-fish: #0f6f63;
  --ib-design: #b2441c;
}
.st-new { --st: var(--ib-new); } .st-in_review { --st: var(--ib-review); } .st-pitch_scheduled { --st: var(--ib-pitch); }
.st-approved { --st: var(--ib-approved); } .st-parked { --st: var(--ib-parked); }
.is-fish { --ib-color: var(--ib-fish); } .is-design { --ib-color: var(--ib-design); }

.ib-spacer { flex: 1; }
.ib-muted { color: var(--dim); }
.ib-pad { padding: var(--sp-5); }
.ib-link { padding: 0; border: 0; background: none; color: color-mix(in srgb, var(--accent) 75%, var(--text)); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; }
[data-scheme='light'] .ib-link { color: var(--accent); }
.ib-link:hover { text-decoration: underline; }

/* Type mark */
.ib-type { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ib-color); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.ib-type > i { font-size: 13px; }

/* Status chip (plain, or a button for leadership with a 44px hit area on a phone) */
.ib-chip { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); height: 24px; padding: 0 var(--sp-3); border: 1px solid transparent; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--st) var(--ib-tint), var(--ib-tint-base)); color: var(--st); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; box-sizing: border-box; }
.ib-chip::before { content: ''; width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.ib-chip.is-button { border-color: color-mix(in srgb, var(--st) 40%, transparent); cursor: pointer; }
.ib-chip.is-button:hover { background: color-mix(in srgb, var(--st) calc(var(--ib-tint) + 8%), var(--ib-tint-base)); }
.ib-chip.is-button > i { font-size: 10px; }
.ib-chip.is-small { height: 20px; padding: 0 var(--sp-2); font-size: var(--fs-xs); }
:is(.ib-chip.is-button, .ib-icon, .ib-btn, .ib-mi, .ib-seg button, .ib-ref, .ib-newbrief, .ib-input, .ib-text-btn, .ib-x, .ib-tile, .ib-gh, .ib-expand, .ib-cname, .ib-rev, .ib-tabs button, .ib-addopt, .ib-chlink, .ib-link):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ib-icon { display: grid; place-items: center; width: var(--control-sm); height: var(--control-sm); flex: none; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-2); color: var(--text); font-size: var(--fs-sm); cursor: pointer; }
.ib-icon:hover { background: var(--hover); }
.ib-icon.is-close { width: var(--control-md); height: var(--control-md); font-size: var(--fs-lg); }
.ib-icon.is-static { cursor: default; }
.ib-icon.is-dismiss { border-color: transparent; background: transparent; color: var(--dim); }

/* ---- The card ---- */
.ib-card { width: min(560px, 100%); box-sizing: border-box; margin: var(--sp-1) 0; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-1); box-shadow: inset 3px 0 0 var(--ib-color); color: var(--text); white-space: normal; }
.ib-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); min-height: var(--control-sm); }
.ib-edited { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--dim); font-size: var(--fs-xs); }
.ib-title { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.ib-contact { margin-top: calc(-1 * var(--sp-2)); color: var(--dim); font-size: var(--fs-sm); }
.ib-kv { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: 0; }
.ib-kv > div { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.ib-kv dt, .ib-label { color: var(--dim); font-size: var(--fs-xs); }
.ib-kv dd { margin: 0; font-weight: var(--fw-semibold); }
.ib-block { display: flex; flex-direction: column; gap: var(--sp-1); }
.ib-long, .ib-body { margin: 0; line-height: var(--lh-body); overflow-wrap: anywhere; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ib-tombstone { display: inline-flex; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0; color: var(--dim); font-size: var(--fs-sm); font-style: italic; }

/* References */
.ib-refs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ib-ref { position: relative; flex: none; width: 96px; height: 64px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-3); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.ib-ref.is-large { width: 112px; height: 80px; }
.ib-ref img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ib-ref.is-link { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--sp-1); padding: 0 var(--sp-2); box-sizing: border-box; font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-decoration: none; }
.ib-ref.is-link > i { color: var(--dim); }
.ib-ref.is-link > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--accent) 75%, var(--text)); }
[data-scheme='light'] .ib-ref.is-link > span { color: var(--accent); }
.ib-play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-media); }
.ib-play > i { display: grid; place-items: center; width: 32px; height: 32px; padding-left: 2px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--media-chip); font-size: 12px; }
.ib-badge { position: absolute; left: var(--sp-1); bottom: var(--sp-1); padding: 1px 6px; border-radius: var(--radius-sm); background: var(--media-chip); color: var(--on-media); font-size: var(--fs-xs); }

/* ---- Thread root and events ---- */
.ib-root { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--line); }
.ib-root .ib-type > i { font-size: 16px; }
.ib-root-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.ib-root-text b { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-root-text small { color: var(--dim); font-size: var(--fs-xs); }
.ib-event { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: var(--sp-3); align-items: center; padding: var(--sp-1) var(--sp-4); color: var(--dim); font-size: var(--fs-sm); }
.ib-event > :is(i, .ib-dot) { justify-self: center; }
.ib-event b { color: var(--text); font-weight: var(--fw-semibold); }
.ib-event time { font-size: var(--fs-xs); }
.ib-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--st); }

/* ---- Menus (a bottom sheet on a phone) ---- */
.ib-menu { position: fixed; z-index: var(--z-menu); min-width: 200px; max-height: min(360px, 60dvh); overflow-y: auto; box-sizing: border-box; padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--pop-bg); box-shadow: var(--shadow-2); outline: none; }
.ib-menu.ib-option-menu { min-width: 240px; }
.ib-mi { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--control-md); padding: 0 var(--sp-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
.ib-mi:hover, .ib-mi.is-on { background: var(--active, var(--hover)); }
.ib-mi .ib-mi-label { flex: 1; }
.ib-mi .ib-dot { width: 8px; height: 8px; }
.ib-menu-search { min-height: var(--control-md); margin-bottom: var(--sp-1); padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-0); color: var(--text); font: inherit; }
.ib-menu-empty { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--line); color: var(--dim); }
.ib-sheet-scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--overlay); }
.ib-menu.is-sheet { left: 0; right: 0; bottom: 0; top: auto; max-height: 70dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--sp-3) var(--sp-3) max(var(--sp-3), env(safe-area-inset-bottom)); }
.ib-menu.is-sheet .ib-mi { min-height: var(--control-touch); }

/* ---- Composer: slash suggestions and New brief ---- */
.slash-pop { max-height: none; padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); background: var(--pop-bg); }
.slash-row { display: grid; grid-template-columns: var(--control-md) 140px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--radius-md); cursor: pointer; }
.slash-row:is(.sel, :hover) { background: var(--active, var(--hover)); }
.slash-icon { display: grid; place-items: center; width: var(--control-md); height: var(--control-md); border-radius: var(--radius-md); background: var(--bg-3); color: var(--ib-color); }
.slash-cmd { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slash-cmd b { color: var(--text); }
.slash-hint, .slash-where { color: var(--dim); }
.slash-where { font-size: var(--fs-sm); }
.slash-row.is-elsewhere :is(.slash-cmd b, .slash-icon) { opacity: .7; }
.composer > .ib-newbrief { grid-row: 2; grid-column: 5; justify-self: start; }
/* The desktop app's capture button adds a column (capture.css): the free one moves to 6. */
@media (min-width: 761px) { .composer:has(> .capture-btn-wrap) > .ib-newbrief { grid-column: 6; } }
.ib-newbrief { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--control-sm); padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-2); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; cursor: pointer; }
.ib-newbrief:hover { background: var(--hover); }

/* The notice only the sender sees */
.ib-notice { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: var(--sp-3); margin: 0 0 var(--sp-2); padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--accent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 7%, var(--bg-1)); }
.ib-notice-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); }
.ib-notice-main { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.ib-notice-head { display: flex; align-items: baseline; gap: var(--sp-2); }
.ib-only { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--dim); font-size: var(--fs-xs); }
.ib-notice-text { line-height: var(--lh-body); }
.ib-chlink { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2); border: 0; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 16%, var(--bg-1));
  color: color-mix(in srgb, var(--accent) 60%, var(--text)); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; }
[data-scheme='light'] .ib-chlink { color: color-mix(in srgb, var(--accent) 85%, var(--text)); }

/* ---- The form ---- */
.ib-scrim { position: fixed; inset: 0; z-index: var(--z-scrim); display: grid; place-items: center; padding: var(--sp-5); box-sizing: border-box; background: var(--overlay); }
.ib-modal { width: min(1000px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--bg-2); box-shadow: var(--shadow-3); color: var(--text); }
.ib-modal.is-small { width: min(420px, 100%); }
.ib-mh { flex: none; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.ib-mh h2 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); white-space: nowrap; }
.ib-mh .ib-type > i { font-size: 20px; }
.ib-tabs { display: flex; gap: var(--sp-2); margin-left: var(--sp-4); }
.ib-tabs button { height: var(--control-md); padding: 0 var(--sp-4); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--dim); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; }
.ib-tabs button.is-on { background: var(--active, var(--hover)); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.ib-mb { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr) 1px 340px; gap: var(--sp-5); padding: var(--sp-5); }
.ib-mb.is-changes { display: block; padding: 0; }
.ib-mb[aria-disabled=true] { opacity: .85; }
.ib-vr { background: var(--line); }
.ib-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.ib-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.ib-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ib-flabel { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.ib-opt { color: var(--dim); font-weight: var(--fw-regular); }
.ib-input { min-height: var(--control-md); box-sizing: border-box; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--bg-0); color: var(--text); font: inherit; font-size: var(--fs-md); width: 100%; }
.ib-input::placeholder, .ib-input input::placeholder { color: var(--dim); }
.ib-input.is-title { min-height: 40px; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.ib-input:focus, .ib-input:focus-within { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ib-input.is-invalid, .ib-seg.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.ib-area { min-height: 88px; padding: var(--sp-3); line-height: var(--lh-body); resize: vertical; display: block; }
.ib-select { justify-content: space-between; text-align: left; cursor: pointer; }
.ib-select.is-placeholder > span { color: var(--dim); }
.ib-select > i { color: var(--dim); font-size: var(--fs-xs); }
.ib-err { display: flex; align-items: center; gap: var(--sp-1); color: var(--danger-text); font-size: var(--fs-sm); }
.ib-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: var(--control-md); padding: 3px; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-0); }
.ib-seg button { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--dim); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap; }
.ib-seg button:hover { color: var(--text); }
.ib-seg button.is-on { background: var(--active, var(--hover)); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); }
.ib-seg button .ib-type { font-size: inherit; letter-spacing: 0; text-transform: none; }
.ib-drop { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 1px dashed color-mix(in srgb, var(--text) 30%, transparent); border-radius: var(--radius-md); color: var(--dim); }
.ib-drop > i { font-size: 20px; }
.ib-drop.is-hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ib-link-input > input { flex: 1; min-width: 0; height: calc(var(--control-md) - 2px); border: 0; background: transparent; color: var(--text); font: inherit; outline: none; }
.ib-link-input > i { color: var(--dim); }
.ib-refs-col { gap: var(--sp-2); }
.ib-reflist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ib-refitem { display: grid; grid-template-columns: 56px minmax(0, 1fr) var(--control-sm); align-items: center; gap: var(--sp-3); padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-1); }
.ib-refitem.is-added { background: color-mix(in srgb, var(--success) 10%, var(--bg-1)); grid-template-columns: 56px minmax(0, 1fr); }
.ib-refitem.is-removed { grid-template-columns: 56px minmax(0, 1fr); }
.ib-refitem.is-removed b { text-decoration: line-through; }
.ib-thumb { position: relative; display: grid; place-items: center; width: 56px; height: 40px; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-3); color: var(--dim); }
.ib-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ib-thumb .ib-play > i { width: 24px; height: 24px; font-size: 10px; }
.ib-refname { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.ib-refname b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-refname small { color: var(--dim); font-size: var(--fs-xs); }
.ib-bar { display: block; height: 4px; border-radius: var(--radius-full); background: var(--bg-3); overflow: hidden; }
.ib-bar > i { display: block; height: 100%; background: var(--accent); }
.ib-x { display: grid; place-items: center; width: var(--control-sm); height: var(--control-sm); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--dim); cursor: pointer; }
.ib-x:hover { background: var(--hover); color: var(--text); }
.ib-mf { flex: none; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); }
.ib-saved { display: flex; align-items: center; gap: var(--sp-2); color: var(--dim); font-size: var(--fs-sm); }
.ib-text-btn { padding: 0 var(--sp-2); height: var(--control-sm); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; }
.ib-text-btn:hover { background: var(--hover); }
.ib-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--control-md); padding: 0 var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-2); color: var(--text); font: inherit; font-weight: var(--fw-semibold); white-space: nowrap; cursor: pointer; }
.ib-btn:hover:not(:disabled) { background: var(--hover); }
.ib-btn.is-small { height: var(--control-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.ib-btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ib-btn.is-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
.ib-btn.is-primary:disabled { background: var(--bg-3); border-color: var(--line); color: var(--dim); cursor: default; }
.ib-pick { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-5); min-height: 0; overflow: hidden; }
.ib-pick-list { display: flex; flex-direction: column; gap: var(--sp-1); overflow-y: auto; max-height: 50dvh; }

/* Changes */
.ib-changes { display: grid; grid-template-columns: 200px 1px minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-5); }
.ib-changes::before { content: ''; grid-column: 2; grid-row: 1; background: var(--line); }
.ib-revs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--sp-1); }
.ib-changes > .ib-col { grid-column: 3; grid-row: 1; }
.ib-rev { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ib-rev.is-on { background: var(--active, var(--hover)); }
.ib-rev small { color: var(--dim); font-size: var(--fs-xs); }
.ib-diff { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-0); line-height: var(--lh-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.ib-diff del { text-decoration: line-through; background: color-mix(in srgb, var(--danger) 18%, var(--bg-0)); }
.ib-diff ins { text-decoration: none; background: color-mix(in srgb, var(--success) 20%, var(--bg-0)); }

/* ---- Charts: the managed page and the list ---- */
.ib-page { overflow: hidden; }
.ib-page-bar { display: none; }
.ib-page-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-5) var(--sp-6); }
.ib-page-doc { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.ib-page-title { display: flex; align-items: center; gap: var(--sp-3); }
.ib-page-title h1 { flex: 1; margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
.ib-synced { display: inline-flex; align-items: center; gap: var(--sp-2); height: 24px; padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-full); color: var(--dim); font-size: var(--fs-sm); white-space: nowrap; }
.ib-embed { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; color: var(--text); }
.ib-filters { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 300px); gap: var(--sp-3); }
.ib-filter { cursor: text; }
.ib-filter > i { color: var(--dim); }
.ib-filter > input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; outline: none; height: calc(var(--control-md) - 2px); }
.ib-colhead, .ib-crow { display: grid; grid-template-columns: 16px 16px minmax(0, 1fr) 170px 170px 64px var(--control-sm); align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); }
.ib-colhead { color: var(--dim); font-size: var(--fs-xs); }
.ib-group { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.ib-gh { display: flex; align-items: center; gap: var(--sp-3); width: 100%; height: 44px; padding: 0 var(--sp-4); border: 0; background: var(--bg-1); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.ib-gh:disabled { cursor: default; }
.ib-gh > i { width: 16px; color: var(--dim); font-size: var(--fs-xs); }
.ib-count { color: var(--dim); font-size: var(--fs-sm); }
.ib-crow { min-height: 44px; border-top: 1px solid var(--line); }
.ib-crow-wrap.is-open { background: var(--ib-row-open); }
.ib-expand, .ib-cname { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.ib-expand { width: 16px; color: var(--dim); font-size: var(--fs-xs); }
.ib-cname { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-cdet, .ib-date { color: var(--dim); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-person { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.ib-person > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-l2 { display: none; }
.ib-thread { position: relative; }
.ib-thread[data-tip]:hover::after, .ib-thread[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + var(--sp-2)); z-index: var(--z-popover); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); background: var(--text); color: var(--bg-0); font-size: var(--fs-sm); white-space: nowrap; box-shadow: var(--shadow-1); pointer-events: none; }
.ib-cdetail { display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-4) 72px; }
.ib-cdetail > p { margin: 0; max-width: 680px; line-height: var(--lh-body); white-space: pre-line; overflow-wrap: anywhere; }

/* Workspace settings › Ideas */
.ib-settings { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.ib-set-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ib-set-field.is-full, .ib-set-rule { grid-column: 1 / -1; }
.ib-set-rule { width: 100%; height: 1px; margin: 0; border: 0; background: var(--line); }
.ib-optlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ib-optc { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--control-sm); padding: 0 var(--sp-1) 0 var(--sp-3); box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.ib-optc[draggable=true] { cursor: grab; }
.ib-optc.is-dragging { opacity: .5; }
.ib-optc > i { width: 12px; color: var(--dim); font-size: var(--fs-xs); text-align: center; }
.ib-optc small { color: var(--dim); font-size: var(--fs-xs); font-weight: var(--fw-regular); }
.ib-optc:has(.fa-box-archive) .ib-optname { color: var(--dim); font-style: italic; }
.ib-optc .ib-x { width: 22px; height: 22px; }
.ib-optc:not(:has(.ib-x)) { padding-right: var(--sp-3); }
.ib-addopt { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--control-sm); padding: 0 var(--sp-3); border: 1px dashed color-mix(in srgb, var(--text) 30%, transparent); border-radius: var(--radius-md); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.ib-addinput { min-height: var(--control-sm); width: 160px; font-size: var(--fs-sm); }

/* ---- Phone ---- */
@media (max-width: 760px) {
  .ib-chip.is-button::after { content: ''; position: absolute; inset: -10px 0; }
  .ib-card .ib-icon { width: var(--control-touch); height: var(--control-touch); }
  .ib-card .ib-edited > span { display: none; }
  .composer > .ib-newbrief { grid-column: 3; height: var(--control-touch); }
  .slash-row { grid-template-columns: var(--control-md) minmax(0, 1fr) auto; }
  .slash-row .slash-hint { display: none; }
  .ib-notice { grid-template-columns: 32px minmax(0, 1fr) auto; padding: var(--sp-3); }
  .ib-notice-av { width: 32px; height: 32px; }
  .ib-scrim { padding: 0; place-items: stretch; }
  .ib-modal { width: 100%; max-height: none; height: 100dvh; border: 0; border-radius: 0; }
  .ib-modal.is-small { height: auto; max-height: 100dvh; align-self: end; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .ib-mh { padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-2); gap: var(--sp-2); min-height: 60px; box-sizing: border-box; }
  .ib-mh h2 { font-size: var(--fs-lg); }
  .ib-mh .ib-type > i { font-size: 16px; }
  .ib-mh .ib-icon.is-close, .ib-mh .ib-btn { width: auto; min-width: var(--control-touch); height: var(--control-touch); }
  .ib-tabs { margin-left: 0; }
  .ib-tabs button { height: var(--control-touch); padding: 0 var(--sp-3); }
  .ib-mb { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4); }
  .ib-row2 { grid-template-columns: 1fr; }
  .ib-input, .ib-select { min-height: var(--control-touch); }
  .ib-link-input > input { height: calc(var(--control-touch) - 2px); }
  .ib-area { min-height: 120px; }
  .ib-seg { height: var(--control-touch); }
  .ib-tiles { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .ib-tile { position: relative; display: grid; place-items: center; width: 72px; height: 72px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-1); color: var(--text); font-size: var(--fs-lg); cursor: pointer; }
  .ib-tile .ib-thumb { position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; }
  .ib-tile-bar { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--accent); }
  .ib-mf { padding: var(--sp-4); }
  .ib-mf .ib-saved { flex: 1; }
  .ib-mf .ib-spacer { display: none; }
  .ib-changes { grid-template-columns: 1fr; padding: var(--sp-4); }
  .ib-changes::before { display: none; }
  .ib-revs, .ib-changes > .ib-col { grid-column: 1; grid-row: auto; }
  .ib-revs { flex-direction: row; overflow-x: auto; }
  .ib-page-bar { display: flex; align-items: center; justify-content: flex-end; height: 60px; flex: none; padding: 0 var(--sp-2); border-bottom: 1px solid var(--line); }
  .ib-page-bar .ib-icon { width: var(--control-touch); height: var(--control-touch); }
  .ib-page-title { display: none; }
  .ib-page-scroll { padding: var(--sp-4); }
  .ib-filters { grid-template-columns: 1fr; }
  .ib-filter { min-height: var(--control-touch); }
  .ib-colhead { display: none; }
  .ib-gh { padding: 0 var(--sp-3); }
  .ib-crow { grid-template-columns: auto minmax(0, 1fr) var(--control-touch); grid-template-rows: auto auto; column-gap: var(--sp-2); row-gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); }
  .ib-crow > .ib-expand, .ib-crow > .ib-cdet, .ib-crow > .ib-person, .ib-crow > .ib-date { display: none; }
  .ib-crow > .ib-type { grid-column: 1; grid-row: 1; }
  .ib-crow > .ib-cname { grid-column: 2; grid-row: 1; }
  .ib-crow > .ib-l2 { display: block; grid-column: 1 / 3; grid-row: 2; color: var(--dim); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ib-crow > .ib-thread { grid-column: 3; grid-row: 1 / 3; width: var(--control-touch); height: var(--control-touch); }
  .ib-cdetail { padding: 0 var(--sp-3) var(--sp-3); }
  .ib-settings { grid-template-columns: 1fr; }
}
.ib-search { display: flex; flex-direction: column; gap: var(--sp-1); }
.ib-search-head { padding: var(--sp-2) var(--sp-3) var(--sp-1); color: var(--dim); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; }
.ib-addopt > i { color: var(--dim); }
.ib-input.is-invalid:is(:focus, :focus-within) { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.ib-set-field .kp-select { width: 100%; }
.ib-set-field .kp-select-trigger > span { flex: 1; }
@media (max-width: 760px) { .ib-card .ib-head { gap: var(--sp-2); } }
/* An error ring replaces the focus ring. */
:is(.ib-input, .ib-seg).is-invalid:focus-visible, .ib-seg.is-invalid:focus-within, .ib-input.is-invalid:focus-visible { outline: none; }
.ib-seg.is-invalid button:focus-visible { outline-offset: -2px; }
/* "Edited" in a thread event reads as a link (the thread panel's own button style aside). */
.thread-dock .ib-event .ib-link, .ib-event .ib-link { padding: 0; border: 0; border-radius: 0; background: none; color: color-mix(in srgb, var(--accent) 75%, var(--text)); font-weight: var(--fw-semibold); text-decoration: none; }
[data-scheme='light'] .thread-dock .ib-event .ib-link, [data-scheme='light'] .ib-event .ib-link { color: var(--accent); }
.thread-dock .ib-event .ib-link:hover, .ib-event .ib-link:hover { background: none; text-decoration: underline; }
.studio-calendar{--cal-bg:var(--bg-0);--cal-surface:var(--bg-1);--cal-raised:var(--bg-2);--cal-text:var(--text);--cal-muted:var(--dim);--cal-line:var(--line);--cal-accent:var(--accent);height:100%;min-height:0;overflow:auto;background:var(--cal-bg);color:var(--cal-text);font-size:13px;user-select:none;container-type:inline-size}
.studio-calendar *{box-sizing:border-box}.studio-calendar button,.studio-calendar input,.studio-calendar textarea{font:inherit}.studio-calendar button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;border:0;padding:8px 12px;border-radius:7px;background:transparent;color:inherit;cursor:pointer}.studio-calendar button:hover{background:color-mix(in srgb,var(--cal-accent) 8%,transparent)}.studio-calendar button:disabled{opacity:.55;cursor:default}.studio-calendar h1,.studio-calendar h2,.studio-calendar h3,.studio-calendar p{margin:0}.studio-calendar small,.cal-muted{color:var(--cal-muted);font-size:11px}.studio-calendar a{color:var(--cal-accent)}.studio-calendar input,.studio-calendar textarea,.studio-calendar .cal-description{user-select:text}.studio-calendar input:not([type=checkbox]),.studio-calendar textarea{display:block;width:100%;background:var(--cal-surface);border:1px solid var(--cal-line);border-radius:10px;color:var(--cal-text);padding:9px 12px;margin-top:6px;font-size:14px}.studio-calendar input[type=checkbox]{width:16px;height:16px;accent-color:var(--cal-accent)}.studio-calendar textarea{resize:vertical}.studio-calendar label{display:block;color:var(--cal-muted);font-size:12px}.studio-calendar .kp-select{margin-top:5px;max-width:100%}.studio-calendar .kp-select-trigger{min-height:37px;border:1px solid var(--cal-line);background:var(--cal-surface)}
.cal-app-head{min-height:52px;display:flex;align-items:center;gap:10px;padding:0 27px;border-bottom:1px solid var(--cal-line)}.cal-app-head>span{font-weight:600;white-space:nowrap}.studio-calendar .cal-icon{width:36px;min-height:36px;flex-shrink:0;padding:6px;position:relative;color:var(--cal-muted)}.cal-count{background:var(--cal-accent);color:var(--cal-bg);font-size:10px;border-radius:10px;min-width:15px;position:absolute;right:0;top:0}.cal-content{padding:28px 30px 0;max-width:1800px;margin:auto}.cal-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.cal-kicker{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--cal-muted)}.studio-calendar h1{font-size:clamp(26px,3cqw,32px);font-weight:600;letter-spacing:-.7px;line-height:1.25;margin:8px 0}.studio-calendar h1>span{font-weight:300;color:var(--cal-muted)}.cal-zone{color:var(--cal-muted);font-size:11px;margin-left:16px}.studio-calendar .cal-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border-radius:8px;background:var(--cal-accent);color:var(--cal-bg);font-weight:600;padding:10px 17px;text-decoration:none;font-size:12px}.studio-calendar .cal-primary:hover{background:var(--cal-accent);filter:brightness(.96)}.cal-toolbar{display:flex;align-items:center;gap:14px;justify-content:space-between;border-bottom:1px solid var(--cal-line);margin-bottom:24px;flex-wrap:wrap}.cal-toolbar>.kp-select{margin-bottom:8px}.cal-tabs{display:flex;gap:23px}.cal-tabs button{position:relative;color:var(--cal-muted);border-radius:0;padding:8px 0 14px;min-height:40px;font-size:12px}.cal-tabs button.active{color:var(--cal-text)}.cal-tabs button.active:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--cal-accent)}.cal-range-nav{display:flex;align-items:center}.cal-range-nav>button{font-size:12px}.cal-footer{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:15px 0;border-top:1px solid var(--cal-line);margin-top:22px;font-size:11px;color:var(--cal-muted)}
.cal-week-days,.cal-all-day,.cal-time-grid{display:grid;grid-template-columns:48px repeat(7,minmax(0,1fr))}.cal-week-days{margin-bottom:14px}.cal-week-days>div{display:flex;align-items:center;justify-content:space-between;padding:0 8px;gap:4px}.cal-week-days>div>span{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--cal-muted)}.cal-week-days b{font-size:25px;font-weight:400;letter-spacing:-.7px}.cal-week-days .today{color:var(--cal-accent)}.cal-all-day{padding-bottom:12px;border-bottom:1px solid var(--cal-line);margin-bottom:15px}.cal-all-day>div{min-width:0;display:flex;flex-direction:column;gap:4px;padding:0 4px}.cal-all-day button{font-size:11px;min-height:26px;padding:4px 6px;text-align:left;justify-content:flex-start;overflow-wrap:anywhere;line-height:1.3;background:color-mix(in srgb,var(--cal-accent) 6%,var(--cal-bg));border-radius:5px}.cal-all-day .cal-away{color:var(--cal-muted);background:var(--cal-surface)}.cal-time-grid{grid-template-rows:minmax(0,1fr);margin-bottom:20px}.cal-hours{position:relative;color:var(--cal-muted);font-size:11px}.cal-hours span{position:absolute;left:0;transform:translateY(-7px);font-variant-numeric:tabular-nums}.cal-day-track{position:relative;border-left:1px solid var(--cal-line);background:repeating-linear-gradient(to bottom,transparent 0,transparent 47px,color-mix(in srgb,var(--cal-line) 60%,transparent) 47px,color-mix(in srgb,var(--cal-line) 60%,transparent) 48px)}.cal-day-track.today{background-color:color-mix(in srgb,var(--cal-accent) 2%,var(--cal-bg))}.cal-now{position:absolute;left:0;right:0;height:1px;background:var(--teal,var(--cal-accent));z-index:1;pointer-events:none}.cal-grid-event{position:absolute;display:flex!important;align-items:stretch!important;justify-content:flex-start!important;flex-direction:column;gap:4px!important;text-align:left;min-height:0!important;padding:7px 7px!important;background:var(--cal-surface)!important;border-radius:6px!important;box-shadow:inset 2px 0 color-mix(in srgb,var(--cal-accent) 40%,var(--cal-surface));overflow:hidden;line-height:1.3}.cal-grid-event b{font-size:12px;font-weight:500;overflow-wrap:anywhere}.cal-grid-event small{font-size:11px;font-variant-numeric:tabular-nums}.cal-grid-event.selected{background:var(--cal-accent)!important;color:var(--cal-bg);box-shadow:none}.cal-grid-event.selected small{color:inherit;opacity:.85}.cal-grid-event.private:not(.selected){border:1px dashed var(--cal-line);box-shadow:none;background:var(--cal-bg)!important}.cal-grid-event.compact{padding:3px 6px!important}.cal-grid-event.compact small{display:none}.cal-week-fallback{display:none}.cal-empty{display:flex;flex-direction:column;gap:13px;align-items:center;justify-content:center;min-height:220px;text-align:center;color:var(--cal-muted)}.cal-empty>i{font-size:25px}.cal-empty h3{color:var(--cal-text);font-size:22px;font-weight:400}.cal-agenda-row{display:grid!important;grid-template-columns:90px 1fr auto;gap:20px!important;width:100%;text-align:left;border-bottom:1px solid var(--cal-line)!important;border-radius:0!important;padding:18px 5px!important}.cal-agenda-row>span:first-child{color:var(--cal-muted);font-size:12px}.cal-agenda-row b{font-size:16px;font-weight:500;display:block}.cal-agenda-row small{display:block;margin-top:5px}.cal-agenda-row.selected{box-shadow:inset 2px 0 var(--cal-accent);background:color-mix(in srgb,var(--cal-accent) 5%,var(--cal-bg))}.cal-agenda-row>i{font-size:12px;color:var(--cal-muted)}
.cal-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.cal-month-weekday{font-size:11px;color:var(--cal-muted);padding:8px}.cal-month-day{min-height:125px;border-top:1px solid var(--cal-line);border-left:1px solid var(--cal-line);padding:7px;min-width:0;display:flex;flex-direction:column;gap:4px}.cal-month-day>span{align-self:flex-end;font-size:13px;margin-bottom:4px}.cal-month-day.outside{opacity:.6}.cal-month-day.today>span{color:var(--cal-accent);font-weight:600}.cal-month-day button{font-size:11px;line-height:1.3;text-align:left;justify-content:flex-start;min-height:24px;padding:3px 4px;border-radius:4px;overflow-wrap:anywhere;background:var(--cal-surface)}.cal-month-day .cal-away{color:var(--cal-muted)}
.cal-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:28px 0}.cal-section-head h2{font-size:24px;font-weight:600;letter-spacing:-.5px;margin-top:5px}.cal-people-table{overflow-x:auto;margin-bottom:19px}.cal-people table{width:100%;border-collapse:collapse;min-width:580px}.cal-people th,.cal-people td{padding:15px 6px;border-bottom:1px solid var(--cal-line);font-size:12px;text-align:center;font-weight:400}.cal-people thead th{font-size:11px;color:var(--cal-muted)}.cal-people th:first-child{text-align:left}.cal-people th .cal-avatar{vertical-align:middle;margin-right:8px}.cal-avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--cal-raised);color:var(--cal-muted);font-size:11px;flex-shrink:0}.cal-away-cell{display:block;border-radius:6px;padding:6px;background:var(--cal-surface);color:var(--cal-accent)}.cal-partial{color:var(--yellow,var(--cal-accent))}
.cal-event-detail{display:flex;flex-wrap:wrap;gap:24px;align-items:center;border-top:1px solid var(--cal-line);padding:25px 0 6px;margin-top:27px}.cal-detail-title{flex:1;min-width:min(240px,100%)}.cal-event-detail h2{font-size:25px;font-weight:500;letter-spacing:-.6px;margin:7px 0}.cal-event-detail p{font-size:12px}.cal-detail-title>small{display:block;margin-top:7px}.cal-detail-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.cal-detail-actions button{font-size:12px}.cal-rsvp>div{display:flex;gap:5px;margin-top:5px}.cal-rsvp button{font-size:12px}.cal-rsvp button[aria-pressed=true],.cal-work-days button[aria-pressed=true]{background:color-mix(in srgb,var(--cal-accent) 9%,var(--cal-bg));color:var(--cal-accent)}.cal-rsvp .kp-select{font-size:11px}.cal-description{width:100%;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}.cal-attendee-list{display:flex;flex-wrap:wrap;gap:15px;width:100%;padding-top:12px}.cal-attendee-list>span{font-size:12px}.cal-attendee-list small{display:block;margin-top:4px}.studio-calendar .cal-danger{color:var(--red,#e58086)}.cal-error{background:color-mix(in srgb,var(--red,#e58086) 8%,var(--cal-bg));color:var(--text);padding:12px 15px;border-radius:7px;margin:10px 0!important;font-size:12px!important;overflow-wrap:anywhere}.cal-secondary{border:1px solid var(--cal-line);border-radius:6px;padding:9px 12px;text-decoration:none;font-size:12px}.cal-inbox{padding:18px 0}.cal-inbox>h2,.cal-preferences>h2{font-weight:400;font-size:27px;margin-bottom:20px}.cal-inbox-row{display:flex!important;justify-content:space-between!important;gap:18px;width:100%;text-align:left;border-bottom:1px solid var(--cal-line)!important;border-radius:0!important;padding:15px 0!important}.cal-inbox-row b{font-weight:500;display:block}.cal-inbox-row small{display:block;margin-top:5px}.cal-inbox-row>span:last-child{font-size:11px;color:var(--cal-muted)}.cal-inbox-row.unread b:before{content:'•';color:var(--cal-accent);margin-right:8px}
.cal-compose-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px}.cal-fields{display:flex;flex-direction:column;gap:16px}.studio-calendar .cal-title-input{border:0;border-bottom:1px solid var(--cal-line);background:transparent;border-radius:0;font-size:23px;padding:5px 0 13px;letter-spacing:-.4px}.cal-form-row{display:flex;gap:15px;flex-wrap:wrap}.cal-form-row>label{flex:1;min-width:110px}.studio-calendar .cal-check{display:flex;align-items:center;gap:9px;color:var(--cal-text);min-height:35px}.cal-section-label,.cal-overlap-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11px;letter-spacing:.035em;color:var(--cal-muted);margin-bottom:13px}.cal-section-label>span{letter-spacing:0}.cal-planning{min-width:0}.cal-search-label{margin:15px 0 10px}.cal-pick-list{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px;max-height:180px;overflow:auto}.cal-pick-list button{font-size:12px;min-height:38px;padding:4px 8px}.cal-pick-list i{font-size:10px;color:var(--cal-muted)}.cal-pick-list .cal-avatar{width:22px;height:22px}.cal-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:22px}.cal-tags>span{font-size:11px;color:var(--cal-muted);margin-right:6px}.cal-tags button{font-size:11px;padding:5px 8px;min-height:26px;background:var(--cal-surface)}.cal-invite-row{display:grid;grid-template-columns:145px minmax(0,1fr);align-items:center;min-height:80px;border-bottom:1px solid var(--cal-line)}.cal-invite-name{display:flex;align-items:center;gap:10px;min-width:0}.cal-invite-name b{font-size:12px;font-weight:500;overflow-wrap:anywhere}.cal-invite-name small{display:block;margin-top:3px;overflow-wrap:anywhere}.cal-invite-actions{display:flex;gap:10px}.cal-invite-actions button{padding:0;font-size:11px;color:var(--cal-accent);min-height:26px}.cal-local-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;align-self:stretch}.cal-local-grid>div{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:7px 1px;min-width:0;font-size:13px;font-variant-numeric:tabular-nums}.cal-local-grid small{text-align:center;overflow-wrap:anywhere}.cal-local-grid .selected{background:color-mix(in srgb,var(--teal,var(--cal-accent)) 7%,var(--cal-bg))}.cal-local-grid .available{color:var(--teal,var(--cal-accent))}.cal-local-grid .uncertain{color:var(--yellow,var(--cal-muted))}.cal-slot-row{display:grid;grid-template-columns:145px minmax(0,1fr);align-items:center;margin-top:14px}.cal-slot-row>span{font-size:11px;color:var(--cal-muted)}.cal-slot-row>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.cal-slot-row button{font-size:12px;padding:8px 0}.cal-slot-row button[aria-pressed=true]{background:color-mix(in srgb,var(--teal,var(--cal-accent)) 9%,var(--cal-bg));color:var(--teal,var(--cal-accent))}.cal-planner-note{margin:20px 0!important;line-height:1.6}.cal-planning>label{margin-bottom:18px}.cal-compose-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--cal-line);margin-top:28px;padding:23px 0;flex-wrap:wrap}.cal-preferences{max-width:620px;padding:20px 0;display:flex;flex-direction:column;gap:20px}.cal-work-days{display:flex;flex-wrap:wrap;gap:7px}
.calendar-timeline{min-width:0;user-select:none}/* The strip lays its items out right to left in priority order (calendar button, next event, who's away, next deadline) on one 40px line; what doesn't fit wraps onto a hidden second line, so the least important goes first and the strip is only as wide as what it shows. */
.cal-timeline-inner{display:flex;flex-flow:row-reverse wrap;gap:40px 8px;align-items:center;height:40px;overflow:hidden}
/* Once measured (CalendarTimeline), items past the ones that fit are dropped outright. */
.cal-timeline-inner[data-fit="1"]>:nth-child(n+2),.cal-timeline-inner[data-fit="2"]>:nth-child(n+3),.cal-timeline-inner[data-fit="3"]>:nth-child(n+4){display:none}.cal-timeline-inner button{display:flex;gap:8px;align-items:center;border:0;background:transparent;color:var(--text);min-height:38px;padding:4px 9px;font-size:12px;border-radius:5px;cursor:pointer;min-width:0;text-align:left}.cal-timeline-inner button:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}.cal-timeline-inner button>span:not(.cal-live-dot){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.cal-timeline-inner small{display:block;font-size:11px;color:var(--dim)}.cal-live-dot{width:5px;height:5px;background:var(--teal,var(--accent));border-radius:50%;flex-shrink:0}.cal-timeline-next small{color:var(--teal,var(--accent))}.cal-timeline-deadline>i{color:var(--accent)}.cal-timeline-away>i{color:var(--dim)}
@container(max-width:1050px){.cal-week{display:none}.cal-week-fallback{display:block}.cal-content{padding:24px 23px 0}.cal-compose-grid{grid-template-columns:220px minmax(0,1fr);gap:24px}.cal-invite-row,.cal-slot-row{grid-template-columns:115px minmax(0,1fr)}.cal-invite-name>.cal-avatar{display:none}}
@container(max-width:700px){.cal-compose-grid{grid-template-columns:1fr;gap:30px}.cal-content{padding:22px 18px 0}.cal-app-head{padding:0 16px;gap:5px}.cal-heading{flex-wrap:wrap}.cal-tabs{gap:18px}.cal-toolbar{gap:5px 10px}.cal-toolbar>.kp-select{width:100%}.cal-toolbar>.kp-select>button{width:100%}.cal-month-day{padding:4px;min-height:115px}.cal-month-day button{font-size:11px;padding:3px 1px}.cal-invite-row,.cal-slot-row{grid-template-columns:135px minmax(0,1fr)}.cal-section-head{flex-wrap:wrap}.cal-range-nav button{padding:5px 7px}.cal-people-table{margin-inline:-5px}.cal-detail-title{min-width:100%}.cal-inbox-row{flex-wrap:wrap}.cal-zone{display:block;margin:6px 0 0}.cal-footer>span:last-child{display:none}}
@container(max-width:430px){.cal-content{padding:20px 13px 0}.cal-app-head>span{font-size:11px}.cal-agenda-row{grid-template-columns:60px 1fr auto;gap:10px!important}.cal-agenda-row b{font-size:14px}.cal-invite-row,.cal-slot-row{grid-template-columns:90px minmax(0,1fr)}.cal-month-day>button{font-size:11px}.cal-month-day{min-height:95px}.cal-month-weekday{padding:3px}.cal-local-grid>div{font-size:12px}}
@media(pointer:coarse){.studio-calendar button,.cal-timeline-inner button{min-height:44px}.studio-calendar input:not([type=checkbox]),.studio-calendar textarea{font-size:16px}.cal-grid-event{min-height:0!important}}
@media(prefers-reduced-motion:no-preference){.studio-calendar button{transition:background .15s,color .15s}}
.studio-calendar-strip{display:flex;flex:0 0 43px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--bg-1)} .studio-calendar-strip>.calendar-timeline{width:100%}
.studio-calendar input.cal-title-input:not([type=checkbox]){border:0;border-bottom:1px solid var(--cal-line);background:transparent;border-radius:0;font-size:23px;padding:5px 0 13px;letter-spacing:-.4px}.cal-fields>label>.kp-select,.cal-planning>label>.kp-select{display:block}.cal-fields>label>.kp-select>button,.cal-planning>label>.kp-select>button{width:100%}.cal-local-grid .uncertain{color:var(--cal-muted)}.cal-local-grid .selected.uncertain{color:var(--cal-text)}

/* Calendar controls use the shared Kelp Pup input and menu geometry. */
.studio-calendar .kp-date-trigger{min-height:40px;border:1px solid var(--line);border-radius:10px;background:var(--bg-1);padding:9px 12px;font-size:13px;justify-content:space-between}.studio-calendar .kp-time{background:var(--bg-1);font-size:13px}.studio-calendar .kp-time>.kp-select{display:inline-flex;margin-top:0}.studio-calendar .kp-time .kp-select-trigger{min-height:38px;justify-content:space-between}.studio-calendar .kp-select-trigger{border-radius:10px;justify-content:space-between}.studio-calendar .kp-date-trigger[aria-expanded=true],.studio-calendar .kp-date-trigger:focus-visible{border-color:var(--accent)}.cal-fields>.cal-form-row>label{min-width:118px}.cal-fields .kp-date-trigger,.cal-fields .kp-time{width:100%}.cal-preferences .kp-time{max-width:230px}

/* Event editor: distinct surfaces separate details, schedule, people and notes. */
.cal-composer{max-width:1280px;margin:0 auto 28px}.cal-editor-heading{margin:24px 0 18px;align-items:center}.cal-editor-heading h2{margin:0;font-size:23px}.cal-composer .cal-compose-grid{grid-template-columns:360px minmax(0,1fr);gap:20px;align-items:start}.cal-editor-column{display:flex;flex-direction:column;gap:18px;min-width:0}.cal-editor-panel{background:var(--bg-2);border:1px solid color-mix(in srgb,var(--text) 13%,var(--line));border-radius:12px;padding:20px;box-shadow:0 2px 7px #0000000c;min-width:0}.cal-editor-panel h3{font-size:14px;font-weight:600;color:var(--text);margin:0}.cal-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.cal-panel-heading>span{font-size:11px;color:var(--dim)}.cal-editor-panel.cal-fields{gap:15px}.cal-editor-panel label{color:var(--text);font-size:12px}.studio-calendar .cal-editor-panel input:not([type=checkbox]),.studio-calendar .cal-editor-panel textarea,.studio-calendar .cal-editor-panel .kp-select-trigger,.studio-calendar .cal-editor-panel .kp-date-trigger,.studio-calendar .cal-editor-panel .kp-time{background:var(--bg-0);border-color:color-mix(in srgb,var(--text) 13%,var(--line))}.studio-calendar .cal-editor-panel .kp-select,.cal-editor-panel label>.kp-select{display:block;width:100%}.studio-calendar .cal-editor-panel .kp-time>.kp-select{display:inline-flex;width:auto}.studio-calendar .cal-editor-panel input.cal-event-name{font-size:18px;font-weight:500;padding:11px 12px}.cal-editor-panel .cal-form-row{gap:12px}.cal-editor-panel .cal-form-row>label{min-width:120px}.cal-editor-panel .cal-check{margin:0;min-height:28px;line-height:1.5}.cal-duration-summary{align-self:flex-start;font-size:11px;color:var(--dim);padding:4px 9px;background:var(--bg-1);border:1px solid var(--line);border-radius:6px;margin-top:-5px}.cal-repeat-fields{padding-top:15px;border-top:1px solid var(--line)}.cal-people-panel .cal-search-label{margin-top:20px}.cal-people-panel .cal-pick-list{gap:6px;margin-top:12px}.cal-people-panel .cal-pick-list button{background:var(--bg-1);border:1px solid var(--line);border-radius:8px;min-height:34px}.cal-people-panel .cal-tags{margin-bottom:20px}.cal-attendee-heading{display:flex;justify-content:space-between;padding:12px 0 9px;border-top:1px solid var(--line);font-size:11px;color:var(--dim)}.cal-people-panel .cal-invite-row{grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:14px 0;min-height:84px}.cal-people-panel .cal-invite-name>.cal-avatar{display:inline-flex}.cal-people-panel .cal-invite-name b{font-size:13px}.cal-invite-local{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:100px}.cal-invite-local strong{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}.cal-availability{font-size:10px;color:var(--dim);background:var(--bg-1);padding:3px 7px;border-radius:5px}.cal-availability.available{color:var(--teal,var(--accent));background:color-mix(in srgb,var(--teal,var(--accent)) 10%,var(--bg-1))}.cal-editor-note{margin-top:14px!important}.cal-notes-panel textarea{margin-top:15px!important;min-height:175px;line-height:1.6}.cal-compose-footer{background:var(--bg-1);border:1px solid var(--line);border-radius:10px;margin-top:20px;padding:14px 18px}.cal-compose-footer>div{display:flex;gap:9px}.cal-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@container(max-width:1050px){.cal-composer .cal-compose-grid{grid-template-columns:320px minmax(0,1fr);gap:16px}.cal-editor-panel{padding:16px}.cal-people-panel .cal-invite-name>.cal-avatar{display:none}}
@container(max-width:760px){.cal-composer .cal-compose-grid{grid-template-columns:minmax(0,1fr)}.cal-editor-panel{padding:18px}.cal-people-panel .cal-invite-name>.cal-avatar{display:inline-flex}}
@container(max-width:430px){.cal-editor-panel{padding:13px}.cal-people-panel .cal-invite-name>.cal-avatar{display:none}.cal-people-panel .cal-invite-row{gap:10px}.cal-invite-local strong{font-size:12px}.cal-editor-panel .cal-form-row{gap:9px}.cal-compose-footer{padding:12px}.cal-compose-footer>span{display:none}}

/* Visible event kinds and paired start/end rows. */
.cal-event-types{min-width:0;border:0;padding:0;margin:0}.cal-event-types legend{padding:0;margin-bottom:8px;color:var(--text);font-size:12px}.cal-event-types>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.cal-editor-panel .cal-type-choice{position:relative;display:flex;align-items:center;gap:9px;min-height:42px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg-1);cursor:pointer;color:var(--dim);font-size:12px}.studio-calendar .cal-type-choice input[type=radio]{position:absolute;width:1px;height:1px;padding:0;opacity:0;margin:0;clip-path:inset(50%);overflow:hidden}.cal-type-choice>i:first-of-type{width:16px;text-align:center;font-size:13px}.cal-type-choice .cal-type-check{margin-left:auto;font-size:9px;visibility:hidden}.cal-editor-panel .cal-type-choice.is-selected{color:var(--text);background:color-mix(in srgb,var(--accent) 12%,var(--bg-0));border-color:color-mix(in srgb,var(--accent) 65%,var(--line))}.cal-type-choice.is-selected>i{color:var(--accent)}.cal-type-choice.is-selected .cal-type-check{visibility:visible}.cal-type-choice:hover{border-color:var(--accent)}.cal-type-choice:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}.cal-schedule-row{min-width:0}.cal-schedule-label{font-size:12px;color:var(--dim)}.cal-schedule-row>div{display:flex;gap:8px;align-items:flex-start}.cal-schedule-row .kp-date{flex:1;min-width:0}.cal-schedule-row .kp-time-field{flex:0 0 114px}.cal-schedule-row .kp-date-trigger{padding:9px 10px}.cal-duration-presets{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:-3px}.studio-calendar .cal-duration-presets button{font-size:11px;border:1px solid var(--line);background:var(--bg-1);border-radius:6px;padding:5px 8px;color:var(--dim)}.studio-calendar .cal-duration-presets button[aria-pressed=true]{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));color:var(--text);background:color-mix(in srgb,var(--accent) 12%,var(--bg-1))}.cal-duration-presets>span{font-size:11px;color:var(--dim);margin-left:auto;font-variant-numeric:tabular-nums}
@container(max-width:430px){.cal-schedule-row .kp-time-field{flex-basis:105px}.cal-event-types>div{gap:6px}.cal-editor-panel .cal-type-choice{padding:9px 7px;gap:6px}}

/* Focused event dialog. The calendar remains visible behind this single surface. */
.studio-calendar .cal-editor-dialog{width:min(1040px,calc(100vw - 48px));max-width:none;max-height:calc(var(--cal-viewport-height,100dvh) - 48px);padding:0;margin:auto;border:1px solid var(--line);border-radius:16px;background:var(--bg-1);color:var(--text);box-shadow:0 18px 50px #0004;overflow:visible;user-select:none;font-size:15px}.cal-editor-dialog::backdrop,.cal-discard-dialog::backdrop{background:#0908119c}.cal-event-form{display:flex;flex-direction:column;max-height:calc(var(--cal-viewport-height,100dvh) - 48px);min-height:0}.studio-calendar .cal-editor-header{display:flex;align-items:center;gap:14px;padding:18px 28px;border-bottom:1px solid var(--line);flex-shrink:0}.cal-editor-header>i{font-size:21px;color:var(--accent)}.studio-calendar .cal-editor-header h2{font-size:18px;font-weight:600;margin:0}.studio-calendar .cal-editor-close{margin-left:auto;width:36px;padding:6px;font-size:19px;color:var(--dim)}.studio-calendar .cal-editor-body{border:0;margin:0;padding:26px 28px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-areas:"title guests" "schedule guests" "meta guests" "notes guests" "settings guests";gap:24px 0;align-items:start;overflow:auto;overscroll-behavior:contain;min-height:0;min-width:0;scrollbar-gutter:stable}.cal-editor-body>*{min-width:0}.cal-editor-title{grid-area:title}.cal-editor-schedule{grid-area:schedule}.cal-editor-meta{grid-area:meta}.cal-editor-guests{grid-area:guests}.cal-editor-description{grid-area:notes}.cal-editor-settings{grid-area:settings}.studio-calendar .cal-editor-dialog h3{font-size:16px;font-weight:500;margin:0 0 12px}.studio-calendar .cal-editor-dialog label{font-size:15px;color:var(--text)}.studio-calendar .cal-editor-dialog input:not([type=checkbox]),.studio-calendar .cal-editor-dialog textarea{font-size:15px;background:transparent;border:1px solid var(--line);border-radius:8px;padding:11px 12px;margin-top:8px;color:var(--text)}.studio-calendar .cal-editor-dialog input::placeholder,.studio-calendar .cal-editor-dialog textarea::placeholder{color:var(--dim)}.studio-calendar .cal-editor-dialog .kp-select{width:100%;margin:8px 0 0;display:block;min-width:0}.studio-calendar .cal-editor-dialog .kp-select-trigger,.studio-calendar .cal-editor-dialog .kp-date-trigger{min-height:44px;padding:10px 12px;border-radius:8px;background:transparent;color:var(--text);font-size:15px;line-height:22px}.cal-editor-dialog .kp-select-trigger>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cal-editor-dialog .kp-date{margin-top:0}.studio-calendar .cal-editor-dialog .kp-time{margin:0;background:transparent;border-radius:8px;font-size:15px}.studio-calendar .cal-editor-dialog .kp-time input{padding:10px!important;min-height:42px}.studio-calendar .cal-editor-dialog .kp-time .kp-select{margin:0;display:flex;width:34px;flex:none}.studio-calendar .cal-editor-dialog .kp-time .kp-select-trigger{min-height:42px}.cal-editor-date-row{display:flex;align-items:center;gap:18px}.cal-editor-date-row>.kp-date{flex:1}.studio-calendar .cal-all-day-switch{display:flex;align-items:center;gap:9px;white-space:nowrap;position:relative;cursor:pointer}.cal-all-day-switch input{position:absolute;opacity:0;width:1px;height:1px}.cal-all-day-switch>span{width:36px;height:22px;border-radius:20px;background:var(--line);padding:3px;display:block;flex:none}.cal-all-day-switch>span::after{content:'';display:block;width:16px;height:16px;border-radius:50%;background:var(--text);transition:transform .12s}.cal-all-day-switch input:checked+span{background:var(--accent)}.cal-all-day-switch input:checked+span::after{transform:translateX(14px);background:var(--bg-0)}.cal-all-day-switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}.studio-calendar .cal-add-end-date{font-size:12px;color:var(--dim);min-height:26px;padding:3px 0;margin-top:3px}.cal-editor-end-date{display:flex;align-items:end;gap:8px;margin-top:12px}.cal-editor-end-date>label{flex:1}.cal-editor-end-date .kp-date{margin-top:8px}.cal-editor-time-row{display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) auto;align-items:center;gap:12px;margin:10px 0 16px}.cal-editor-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}.cal-zone-picker{position:relative;min-width:0}.studio-calendar .cal-zone-picker>.kp-select{margin:0}.cal-occurrence-note{font-size:13px;padding:12px;color:var(--dim)}.cal-recurrence-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;padding:16px 0;border-top:1px solid var(--line)}.studio-calendar .cal-editor-help{font-size:12px;line-height:1.5;color:var(--dim);margin:9px 0 0}.studio-calendar .cal-editor-description textarea{min-height:88px;resize:none;line-height:1.6;overflow:hidden}.cal-editor-settings{border-top:1px solid var(--line)}.studio-calendar .cal-editor-settings>label{display:grid;grid-template-columns:20px auto minmax(0,1fr);align-items:center;gap:12px;min-height:49px;border-bottom:1px solid var(--line);color:var(--dim);font-size:14px}.cal-editor-settings>label>i{font-size:17px}.studio-calendar .cal-editor-settings .kp-select{margin:0;justify-self:end;width:auto;max-width:100%}.studio-calendar .cal-editor-settings .kp-select-trigger{background:none;border:0;min-height:44px;padding:8px 0 8px 10px;font-size:14px}.cal-editor-guests{margin-left:28px;padding-left:26px;border-left:1px solid var(--line);align-self:stretch}.cal-guests-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px}.studio-calendar .cal-guests-heading h3{font-size:20px;font-weight:600;margin:0}.cal-guests-heading>span{color:var(--dim);font-size:13px;white-space:nowrap}.cal-guest-search{position:relative}.cal-guest-search>i{position:absolute;left:12px;top:15px;color:var(--dim);font-size:15px;pointer-events:none}.studio-calendar .cal-guest-search input{margin:0;padding-left:36px;min-height:44px;font-size:14px}.cal-guest-results{position:fixed;max-height:230px;overflow:auto;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px #0004;z-index:4;padding:5px}.cal-guest-results>[role=option]{position:relative;padding:9px 26px 9px 9px;border-radius:5px;cursor:pointer;overflow-wrap:anywhere}.cal-guest-results>[role=option][aria-selected=true]{background:var(--hover)}.cal-guest-results b{font-size:14px;font-weight:500;display:block}.cal-guest-results small{font-size:12px;display:block;margin-top:3px}.cal-guest-results i{position:absolute;right:9px;top:15px;color:var(--dim);font-size:11px}.cal-guest-results p{font-size:13px;color:var(--dim);padding:12px;line-height:1.5}.cal-guest-groups{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 20px}.studio-calendar .cal-guest-groups button{border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:12px;color:var(--dim);min-height:30px}.cal-editor-guest-list{max-height:440px;overflow:auto;scrollbar-width:thin}.cal-guest{display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 10px;padding:12px 0;min-width:0}.cal-guest-avatar{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--accent) 20%,var(--bg-2));font-size:12px;color:var(--text);overflow:hidden}.cal-guest-avatar img{width:100%;height:100%;object-fit:cover}.cal-guest-name b{font-size:14px;font-weight:500;overflow-wrap:anywhere;display:block}.cal-guest-name small{font-size:12px;line-height:1.5;display:block;margin-top:3px}.cal-guest-time{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px;font-size:12px;color:var(--dim)}.cal-guest-time small{font-size:12px}.cal-guest-status{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:1.5}.cal-guest-status>i{display:block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--dim)}.cal-guest-status.is-free>i{background:var(--green,#79bf8c)}.cal-guest-status.is-conflict>i{background:var(--yellow,#d0a568)}.cal-guest-summary{border-top:1px solid var(--line);margin-top:24px;padding-top:22px;display:flex;align-items:start;gap:12px}.cal-guest-summary>i{font-size:26px;color:var(--dim)}.cal-guest-summary.is-free>i{color:var(--green,#79bf8c)}.cal-guest-summary strong{font-size:14px;font-weight:500}.studio-calendar .cal-guest-summary p{font-size:13px;line-height:1.6;color:var(--dim);margin:6px 0 0}.studio-calendar .cal-editor-footer{padding:16px 24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;background:var(--bg-1);border-radius:0 0 16px 16px}.cal-editor-footer>div{display:flex;gap:12px;align-items:center}.studio-calendar .cal-editor-footer button{min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:8px;font-size:14px}.studio-calendar .cal-editor-footer .cal-primary{border-color:transparent;background:var(--accent);color:var(--cal-bg);font-weight:500}.cal-save-error{flex:1 0 100%;font-size:13px}.studio-calendar .cal-discard-dialog{width:min(400px,calc(100vw - 32px));margin:auto;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);color:var(--text);box-shadow:0 15px 40px #0004}.cal-discard-dialog p{margin:12px 0 20px!important;font-size:14px;color:var(--dim)}.cal-discard-dialog>div{display:flex;justify-content:flex-end;gap:8px}.cal-create-slot{position:absolute!important;inset:0!important;width:100%;height:100%;border-radius:0!important;z-index:0}.cal-create-slot:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)!important}.cal-grid-event{z-index:1}.cal-now{pointer-events:none}.studio-calendar .cal-month-create{width:auto;min-height:26px;min-width:26px;padding:3px;border-radius:6px}
@media(min-width:1000px){.cal-guest{grid-template-columns:34px minmax(0,1fr) auto}.cal-guest-time{grid-column:3;grid-row:1/3;flex-direction:column;align-items:flex-end;max-width:122px;text-align:right}.cal-guest-avatar{grid-row:1}.cal-guest-name{grid-column:2}.cal-guest-status{justify-content:flex-end}}
@media(max-width:700px){.studio-calendar .cal-editor-dialog{width:100vw;height:var(--cal-viewport-height,100dvh);max-height:var(--cal-viewport-height,100dvh);top:var(--cal-viewport-top,0px);bottom:auto;border:0;border-radius:0}.cal-event-form{height:100%;max-height:var(--cal-viewport-height,100dvh)}.studio-calendar .cal-editor-header{padding:14px 18px}.studio-calendar .cal-editor-body{display:flex;flex-direction:column;padding:22px 18px;gap:24px;scrollbar-gutter:auto}.cal-editor-body>*{width:100%;flex-shrink:0}.cal-editor-guests{margin:0;padding:22px 0 0;border:0;border-top:1px solid var(--line)}.cal-editor-guest-list{max-height:none;overflow:visible}.cal-editor-two{grid-template-columns:minmax(0,1fr);gap:12px}.cal-editor-meta .cal-editor-two{gap:16px}.cal-editor-date-row{gap:12px}.cal-editor-time-row{gap:8px;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) auto}.studio-calendar .cal-editor-dialog .kp-select-trigger,.studio-calendar .cal-editor-dialog .kp-date-trigger{font-size:14px;padding:10px}.studio-calendar .cal-editor-footer{border-radius:0;padding:12px 16px max(12px,env(safe-area-inset-bottom))}.cal-editor-footer>div{width:100%;justify-content:flex-end}.studio-calendar .cal-editor-footer button{font-size:13px;padding:10px 13px}.cal-editor-header h2{font-size:17px}.cal-guest{grid-template-columns:36px minmax(0,1fr)}.studio-calendar .cal-editor-dialog input:not([type=checkbox]),.studio-calendar .cal-editor-dialog textarea{font-size:16px}.studio-calendar .cal-editor-dialog .kp-time input{padding:8px!important}.studio-calendar .cal-editor-settings>label{gap:8px;font-size:13px}.studio-calendar .cal-editor-settings .kp-select-trigger{font-size:13px}}
@media(prefers-reduced-motion:reduce){.cal-all-day-switch>span::after{transition:none}}

.cal-editor-scroll{overflow:auto;overscroll-behavior:contain;min-height:0;flex:1;scrollbar-gutter:stable}.studio-calendar .cal-editor-body{overflow:visible;scrollbar-gutter:auto}.studio-calendar .cal-editor-dialog .cal-guest-search input:not([type=checkbox]){margin:0;padding-left:36px;font-size:14px}.studio-calendar .cal-zone-picker>.kp-select{position:static}
@media(max-width:700px){.cal-editor-scroll{scrollbar-gutter:auto}.studio-calendar .cal-editor-dialog .cal-guest-search input:not([type=checkbox]){font-size:16px}}

.studio-calendar .cal-editor-dialog,.studio-calendar .cal-editor-footer{background:color-mix(in srgb,var(--bg-1) 76%,var(--bg-0))}.cal-editor-scroll{scroll-padding-block:16px}.cal-guest-results>[role=option]{scroll-margin-block:5px}

/* Recurrence days share the editor's focus, theme and motion conventions. */
.cal-repeat-days{grid-column:1/-1;min-width:0}.cal-repeat-days>span{font-size:14px}.cal-repeat-days>[role=group]{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:10px}.studio-calendar .cal-repeat-days button{min-width:0;min-height:38px;padding:8px 0;border:1px solid var(--line);border-radius:8px;background:var(--bg-1);color:var(--dim);font-size:12px;justify-content:center;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}.studio-calendar .cal-repeat-days button:hover{border-color:var(--accent);color:var(--text)}.studio-calendar .cal-repeat-days button[aria-pressed=true]{border-color:color-mix(in srgb,var(--accent) 70%,var(--line));background:color-mix(in srgb,var(--accent) 19%,var(--bg-1));color:var(--text);box-shadow:inset 0 1px color-mix(in srgb,var(--accent) 16%,transparent)}.studio-calendar .cal-repeat-days button:active{transform:scale(.95)}
@media(prefers-reduced-motion:reduce){.studio-calendar .cal-repeat-days button{transition:none;transform:none}}
/* A Currents deadline's card: where it is and when it's due, above "Open card". */
.cal-source{display:block;font-size:var(--fs-sm);color:var(--dim)}.cal-card-facts{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--cal-muted)}.cal-card-facts li{display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}.cal-card-facts i{flex:none;width:16px;text-align:center}
/* Create-event dialog: one field style, one focus ring, one popover look, one 2-column grid. */
.studio-calendar .cal-editor-dialog{--cal-control:var(--control-md);--cal-field-line:color-mix(in srgb,var(--text) 22%,transparent);--cal-field-fill:color-mix(in srgb,var(--text) 4%,var(--bg-1));--cal-ring:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);font-size:var(--fs-md)}
.studio-calendar .cal-editor-dialog button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Fields: the same border, fill, radius and height on all of them. */
.studio-calendar .cal-editor-dialog :is(input:not([type=checkbox]):not(.kp-time input),textarea,.kp-select-trigger,.kp-date-trigger,.kp-time){box-sizing:border-box;min-height:var(--cal-control);margin:0;border:1px solid var(--cal-field-line);border-radius:var(--radius-md);background:var(--cal-field-fill);color:var(--text);font-size:var(--fs-md);font-weight:400;line-height:20px;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.studio-calendar .cal-editor-dialog :is(input:not([type=checkbox]):not(.kp-time input),.kp-select-trigger,.kp-date-trigger){padding:0 12px}
.studio-calendar .cal-editor-dialog textarea{padding:7px 12px;width:100%;display:block}
.studio-calendar .cal-editor-dialog :is(input:not([type=checkbox]),textarea):focus,.studio-calendar .cal-editor-dialog :is(.kp-select-trigger,.kp-date-trigger):is(:focus-visible,[aria-expanded=true]),.studio-calendar .cal-editor-dialog .kp-time:is(:focus-within,:has([aria-expanded=true])),.studio-calendar .cal-editor-dialog .kp-select-search:focus{outline:none;border-color:var(--accent)!important;box-shadow:var(--cal-ring)}
.studio-calendar .cal-editor-dialog :is(.kp-select-trigger,.kp-date-trigger):focus-visible{outline:none}
.studio-calendar .cal-editor-dialog :is(input,textarea)[aria-invalid=true]{border-color:var(--danger,#e5484d)}
.studio-calendar .cal-editor-dialog .kp-time input{min-height:calc(var(--cal-control) - 2px);padding:0 12px!important}
.studio-calendar .cal-editor-dialog .kp-time .kp-select .kp-select-trigger{min-height:calc(var(--cal-control) - 2px);height:calc(var(--cal-control) - 2px);padding:0;border:0;background:transparent;border-radius:0 var(--radius-md) var(--radius-md) 0;box-shadow:none}
.studio-calendar .cal-editor-dialog .kp-time .kp-select .kp-select-trigger:is(:focus-visible,[aria-expanded=true]){outline:none;box-shadow:none}
.studio-calendar .cal-editor-dialog .kp-select{width:100%;margin:0;display:block;min-width:0}
.studio-calendar .cal-editor-dialog .kp-time .kp-select{width:34px;display:flex}
.studio-calendar .cal-editor-dialog .kp-select-trigger,.studio-calendar .cal-editor-dialog .kp-date-trigger{font-size:var(--fs-md);line-height:20px}
.studio-calendar .cal-editor-dialog input::placeholder,.studio-calendar .cal-editor-dialog textarea::placeholder{color:var(--dim)}
/* Labels: 12px semibold dim, 4px above the field. */
.studio-calendar .cal-editor-dialog label{font-size:var(--fs-sm);font-weight:600;line-height:16px;color:var(--dim)}
.studio-calendar .cal-editor-dialog label>:is(.kp-select,input,textarea,.kp-date,.kp-time-field){margin-top:8px}
/* Title: a normal field at 20px bold. */
.studio-calendar .cal-editor-dialog .cal-editor-title input:not([type=checkbox]):not(.kp-time input){width:100%;min-width:0;font-size:var(--fs-xl);font-weight:700;letter-spacing:0;line-height:24px;text-overflow:ellipsis}
.studio-calendar .cal-editor-dialog .cal-all-day-switch input{position:absolute!important;left:0;top:0;margin:0!important;padding:0!important;width:1px!important;height:1px!important;min-width:0;min-height:0!important;opacity:0!important;border:0}
/* Schedule: two columns, a 16px gap, 16px between rows. */
.studio-calendar .cal-editor-schedule{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cal-editor-schedule>*{min-width:0}
.cal-editor-schedule .cal-editor-date-row,.cal-editor-schedule .cal-editor-two{display:contents}
.studio-calendar .cal-editor-dialog label.cal-all-day-switch{align-self:center;justify-self:start;font-size:var(--fs-md);font-weight:400;color:var(--text);gap:8px}
.cal-all-day-switch>span{background:color-mix(in srgb,var(--text) 22%,var(--bg-1))}
.cal-all-day-switch>span::after{background:#fff;box-shadow:0 1px 2px #0004}
.cal-all-day-switch input:checked+span{background:var(--accent)}
.cal-all-day-switch input:checked+span::after{background:#fff}
.studio-calendar .cal-add-end-date{grid-column:1/-1;justify-self:start;display:flex;align-items:center;height:28px;min-height:28px;margin:-8px 0;padding:0 4px;font-size:13px;color:var(--dim)}
.cal-editor-schedule .cal-editor-end-date{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:end;margin:0}
.cal-editor-end-date>button{justify-self:start;width:var(--cal-control);height:var(--cal-control);display:grid;place-items:center;color:var(--dim);border-radius:var(--radius-md)}
.cal-editor-schedule .cal-editor-time-row{grid-column:1/-1;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;align-items:start;margin:0}
.cal-editor-time-row>i{position:absolute;left:50%;top:calc(var(--cal-control)/2);width:16px;text-align:center;transform:translate(-50%,-50%);font-size:10px;color:var(--dim);pointer-events:none}
.cal-editor-schedule>.cal-error,.cal-editor-schedule>.cal-editor-help,.cal-editor-schedule>.cal-occurrence-note{grid-column:1/-1;margin:0!important}
.cal-zone-picker{min-width:0}
.cal-editor-schedule .cal-recurrence-trigger{min-width:0}
.cal-occurrence-note{font-size:var(--fs-md);color:var(--dim);align-self:center}
.cal-editor-schedule .cal-recurrence-options{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;border:0}
.cal-repeat-days>span{font-size:var(--fs-sm);font-weight:600;color:var(--dim)}
.studio-calendar .cal-repeat-days button{min-height:var(--cal-control);border-color:var(--cal-field-line);background:var(--cal-field-fill);font-size:var(--fs-sm)}
.cal-repeat-days>[role=group]{margin-top:4px}
.studio-calendar .cal-editor-meta .cal-editor-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* Notes and settings */
.studio-calendar .cal-editor-description textarea{min-height:64px;line-height:1.5}
.studio-calendar .cal-editor-dialog .cal-editor-settings>label{display:grid;grid-template-columns:16px auto minmax(0,1fr);column-gap:8px;align-items:center;min-height:0;padding:8px 0;border:0;font-size:var(--fs-md);line-height:20px;font-weight:400;color:var(--dim)}
.studio-calendar .cal-editor-dialog .cal-editor-settings{border-top:0}
.studio-calendar .cal-editor-dialog .cal-editor-settings>label+label{border-top:1px solid var(--ctl-line);padding-top:7px}
.cal-editor-settings>label>i{width:16px;font-size:16px;text-align:center}
.studio-calendar .cal-editor-settings .kp-select{justify-self:end;width:auto;min-width:160px}
.studio-calendar .cal-editor-settings .kp-select-trigger{background:var(--cal-field-fill);border:1px solid var(--cal-field-line);min-height:var(--cal-control);padding:0 12px;font-size:var(--fs-md)}
/* Guests */
.studio-calendar .cal-guests-heading{margin-bottom:12px}
.studio-calendar .cal-guests-heading h3{font-size:var(--fs-lg);font-weight:600;margin:0}
.cal-guest-search>i{top:calc(var(--cal-control)/2);transform:translateY(-50%);font-size:14px}
.studio-calendar .cal-editor-dialog .cal-guest-search input:not([type=checkbox]):not(.kp-time input){padding-left:36px;font-size:var(--fs-md)}
.studio-calendar .cal-editor-dialog .kp-date-popover .kp-date-heading .kp-select-trigger{height:var(--control-sm);min-height:var(--control-sm);padding:0 8px;gap:4px;font-size:var(--fs-sm);line-height:16px}
.cal-guest-results{position:static;max-height:236px;margin-top:4px;padding:4px;overflow:auto;background:color-mix(in srgb,var(--text) 6%,var(--pop-bg,var(--bg-2)));border:1px solid var(--ctl-line);border-radius:var(--radius-md);box-shadow:var(--shadow-2)}
.cal-guest-results>[role=option]{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 4px 0 12px;border-radius:var(--radius-sm);font-size:var(--fs-md);cursor:pointer}
.cal-guest-results>[role=option][aria-selected=true]{background:var(--hover)}
.cal-guest-results b{display:block;flex:none;font-size:var(--fs-md);font-weight:500}
.cal-guest-results small{display:block;flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font-size:var(--fs-sm);color:var(--dim)}
.cal-guest-results i{position:static;flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:12px;color:var(--dim);transition:box-shadow var(--dur-fast),color var(--dur-fast)}
.cal-guest-results>[role=option][aria-selected=true] i{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),var(--cal-ring)}
.cal-guest-results p{padding:8px 12px;font-size:var(--fs-md);margin:0}
.cal-guest-groups{margin:12px 0 16px;gap:8px}
.studio-calendar .cal-guest-groups button{min-height:28px;padding:0 12px;border-color:var(--ctl-line);font-size:var(--fs-sm)}
.cal-editor-guest-list{display:flex;flex-direction:column;gap:8px;max-height:360px}
.cal-guest{display:grid;grid-template-columns:36px minmax(0,1fr) auto 28px;column-gap:10px;align-items:center;padding:0;min-height:36px}
.cal-guest-avatar{grid-column:1;grid-row:auto;width:36px;height:36px}
.cal-guest-name{grid-column:2;grid-row:auto;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
.cal-guest-name b{flex:0 0 100%;font-size:var(--fs-md)}
.cal-guest-name small{display:inline;margin:0;font-size:var(--fs-sm);color:var(--dim)}
.studio-calendar .cal-guest-optional{min-height:20px;padding:0;font-size:var(--fs-sm);color:var(--dim);opacity:0;transition:opacity var(--dur-fast)}
.cal-guest-optional.is-on,.cal-guest:hover .cal-guest-optional,.cal-guest:focus-within .cal-guest-optional{opacity:1}
.cal-guest-optional.is-on{color:var(--text)}
.cal-guest-time{grid-column:3;grid-row:auto;flex-direction:column;flex-wrap:nowrap;align-items:flex-end;gap:0;max-width:130px;text-align:right}
.cal-guest-status{justify-content:flex-end}
.studio-calendar .cal-guest-remove{grid-column:4;display:grid;place-items:center;width:28px;height:28px;min-height:28px;padding:0;border-radius:50%;color:var(--dim)}
.cal-guest-remove:hover{background:var(--hover);color:var(--text)}
.cal-guest-summary{margin-top:16px;padding-top:12px;align-items:center;gap:8px}
.cal-guest-summary>i{width:16px;font-size:16px;text-align:center}
.cal-guest-summary strong{font-size:var(--fs-md);font-weight:500}
/* Header and footer */
.studio-calendar .cal-editor-header{position:relative;z-index:1;padding:14px 28px;transition:box-shadow var(--dur-fast)}
.cal-editor-header.is-scrolled{box-shadow:0 6px 10px -8px var(--shadow-color,#0008)}
.studio-calendar .cal-editor-footer{justify-content:flex-end;padding:12px 28px;transition:box-shadow var(--dur-fast)}
.cal-editor-footer.has-more{box-shadow:0 -6px 10px -8px var(--shadow-color,#0008)}
.studio-calendar .cal-editor-footer button{min-height:var(--cal-control);padding:0 16px;border-radius:var(--radius-md);font-size:var(--fs-md)}
.studio-calendar .cal-editor-footer .cal-primary:hover{background:color-mix(in srgb,var(--accent) 88%,#fff);filter:none}
.studio-calendar .cal-editor-body{padding:24px 28px 16px;gap:16px 0}
/* Phone: touch-size controls, one column for the wide pairs, menus as bottom sheets. */
@media(max-width:700px){
.studio-calendar .cal-editor-dialog{--cal-control:var(--control-touch)}
.studio-calendar .cal-editor-body{padding:20px 16px 16px;gap:16px}
.cal-editor-schedule .cal-editor-two>*{grid-column:1/-1}
.studio-calendar .cal-editor-meta .cal-editor-two{grid-template-columns:minmax(0,1fr)}
.cal-editor-schedule .cal-recurrence-options{grid-template-columns:minmax(0,1fr)}
.studio-calendar .cal-editor-dialog :is(input:not([type=checkbox]):not(.kp-time input),textarea){font-size:16px}
.studio-calendar .cal-editor-dialog .cal-editor-title input:not([type=checkbox]):not(.kp-time input){font-size:var(--fs-xl)}
.studio-calendar .cal-editor-footer{padding:12px 16px max(12px,env(safe-area-inset-bottom))}
.studio-calendar .cal-editor-header{padding:12px 16px}
.cal-editor-dialog .kp-select-menu{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;max-height:60vh!important;padding:8px 8px max(8px,env(safe-area-inset-bottom));border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.cal-editor-dialog .kp-select-option{min-height:var(--control-touch)}
}
@media(prefers-reduced-motion:reduce){.cal-editor-header,.cal-editor-footer,.cal-guest-optional{transition:none}}
/* Leading icons (globe, repeat, calendar) sit 8px from the text; the caret stays on the right. */
.studio-calendar .cal-editor-dialog :is(.kp-select-trigger,.kp-date-trigger){gap:8px}
.cal-editor-dialog .kp-select-trigger>span{flex:1;min-width:0}
.studio-calendar .cal-editor-dialog .kp-date-trigger{justify-content:flex-start}
.cal-editor-dialog .kp-date-trigger>span{flex:1;min-width:0}
.cal-editor-dialog .kp-date-trigger>i{order:-1;flex:none;width:16px;font-size:14px;text-align:center}
.studio-calendar .cal-editor-dialog label>:is(textarea,input:not([type=checkbox])){margin-top:8px!important}
.studio-calendar .cal-editor-dialog .cal-editor-settings>label>.kp-select{margin:0}
/* Shared surfaces and control geometry with the event editor. */
.studio-calendar.cal-workspace{--cal-hour:70px;--cal-columns:106px repeat(7,minmax(118px,1fr));display:grid;grid-template-columns:270px minmax(0,1fr);overflow:hidden;position:relative;background:color-mix(in srgb,var(--bg-0) 86%,var(--bg-1));font-size:14px}.cal-workspace .source-studio{--event-color:var(--accent)}.cal-workspace .source-mine{--event-color:var(--teal,#71b9fa)}.cal-workspace button:focus-visible,.cal-workspace [tabindex]:focus-visible,.cal-workspace input:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.cal-sidebar{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--cal-rule,var(--line));background:color-mix(in srgb,var(--bg-1) 76%,var(--bg-0));padding:24px 20px;gap:24px}.cal-sidebar-identity{display:flex;align-items:center;gap:14px;min-height:30px;font-size:16px}.cal-sidebar-identity>i{color:var(--accent);font-size:24px}.studio-calendar .cal-sidebar-create{width:100%;min-height:44px;font-size:14px;border-radius:8px;gap:10px;font-weight:500}.cal-sidebar-middle{overflow:auto;min-height:0;scrollbar-width:thin}.cal-mini{margin:4px 0 30px}.cal-mini-heading{display:flex;align-items:center;gap:2px;margin-bottom:16px}.studio-calendar .cal-mini-heading h2{font-size:14px;font-weight:500;margin:0;flex:1}.studio-calendar .cal-mini-heading button{min-height:28px;width:26px;padding:4px;font-size:10px;color:var(--dim)}.cal-mini-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px 0}.cal-mini-grid>[role=columnheader]{font-size:11px;color:var(--dim);text-align:center;padding:4px 0 10px}.studio-calendar .cal-mini-grid button{padding:0;min-height:29px;border-radius:0;position:relative;color:var(--text);font-size:12px;font-weight:400}.cal-mini-grid button>span{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%}.cal-mini-grid button.in-range{background:color-mix(in srgb,var(--accent) 9%,transparent)}.cal-mini-grid button.outside{color:color-mix(in srgb,var(--dim) 60%,transparent)}.cal-mini-grid button.today>span{background:var(--accent);color:var(--bg-0)}.cal-mini-grid button.selected:not(.today)>span{box-shadow:inset 0 0 0 1px var(--accent)}.cal-calendar-filters{border:0;margin:0;padding:0}.cal-calendar-filters legend{font-size:13px;color:var(--dim);padding:0;margin-bottom:14px}.studio-calendar .cal-calendar-filters label{display:flex;align-items:center;gap:10px;margin:12px 0;font-size:14px;color:var(--text);cursor:pointer}.cal-calendar-filters input{accent-color:var(--event-color)!important;width:19px!important;height:19px!important;margin:0}.studio-calendar .cal-calendar-filters p{font-size:11px;line-height:1.5;color:var(--dim);margin-top:20px}.cal-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;position:relative}.cal-main-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 24px 18px;flex:none}.cal-main-heading{display:flex;align-items:flex-start;gap:22px;min-width:0;flex-wrap:wrap}.studio-calendar .cal-main-heading h1{font-size:28px;line-height:1.2;font-weight:600;margin:0;letter-spacing:-.6px}.studio-calendar .cal-main-heading p{margin:7px 0 0;color:var(--dim);font-size:13px}.cal-period-nav{display:flex;gap:8px;align-items:center;flex:none}.studio-calendar .cal-period-nav button{border:1px solid var(--cal-rule,var(--line));border-radius:8px;min-height:40px;font-size:14px;padding:8px 13px}.cal-period-nav button:first-child{margin-right:3px;min-width:72px}.cal-main-utilities{display:flex;gap:6px;align-items:center;flex:none}.studio-calendar .cal-main-utilities>button{position:relative;min-width:40px;min-height:40px;padding:8px;font-size:17px;color:var(--dim)}.cal-unread-dot{position:absolute;right:8px;top:6px;border-radius:50%;width:6px;height:6px;background:var(--accent)}.studio-calendar .cal-main-utilities>.cal-toolbar-create{display:none;font-size:13px;color:var(--bg-0);gap:7px;padding:8px 12px}.studio-calendar .cal-drawer-trigger{display:none;min-height:40px;min-width:40px;font-size:17px;padding:8px}.cal-view-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px 16px;border-bottom:1px solid var(--cal-rule,var(--line));flex:none}.cal-view-toolbar nav{display:flex;gap:4px}.studio-calendar .cal-view-toolbar nav button{border:1px solid transparent;border-radius:8px;font-size:14px;padding:8px 15px;min-height:38px;color:var(--dim)}.cal-view-toolbar nav button.active{background:color-mix(in srgb,var(--accent) 14%,var(--bg-1));border-color:color-mix(in srgb,var(--accent) 20%,var(--cal-rule,var(--line)));color:var(--accent);font-weight:500}.studio-calendar .cal-view-toolbar>.kp-select{margin:0;min-width:180px}.studio-calendar .cal-view-toolbar .kp-select-trigger{min-height:40px;background:transparent;border:1px solid var(--cal-rule,var(--line));border-radius:8px;font-size:13px;padding:9px 12px}.cal-view-stage{flex:1;min-height:0;min-width:0;overflow:hidden;display:flex;flex-direction:column}.cal-view-stage.is-scrollable{overflow:auto}.studio-calendar .cal-feed-state{font-size:12px;color:var(--dim);margin:0;padding:8px 24px;border-bottom:1px solid var(--cal-rule,var(--line));flex:none}.studio-calendar .cal-workspace-error{margin:8px 16px!important;flex:none}.cal-view-stage>.cal-inbox,.cal-view-stage>.cal-preferences,.cal-view-stage>.cal-people{padding:24px;max-width:none}.cal-view-stage .cal-section-head{margin-top:0}
/* One scroll surface keeps all seven columns aligned; header and gutter remain sticky. */
.cal-week-viewport{height:100%;overflow:auto;min-height:0;overscroll-behavior:contain;scrollbar-gutter:stable}.cal-week-canvas{min-width:932px;position:relative;min-height:100%}.cal-week-sticky{position:sticky;top:0;z-index:10;background:var(--cal-bg);border-bottom:1px solid var(--cal-rule,var(--line))}.cal-day-headers,.cal-away-strip,.cal-daylong-grid,.cal-week-timegrid{display:grid;grid-template-columns:var(--cal-columns)}.cal-day-headers{height:100px;border-bottom:1px solid var(--cal-rule,var(--line))}.cal-timezone-cell{position:sticky;left:0;z-index:3;display:flex;flex-direction:column;justify-content:center;padding:12px 9px;gap:7px;background:var(--cal-bg);border-right:1px solid var(--cal-rule,var(--line));font-size:12px;min-width:0}.cal-timezone-cell b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cal-timezone-cell span{color:var(--dim);font-size:11px}.cal-day-heading{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid var(--cal-rule,var(--line));gap:3px;min-width:0}.cal-day-heading>span{text-transform:uppercase;font-size:11px;color:var(--dim)}.cal-day-heading>b{display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:24px;line-height:36px;font-weight:400;border-radius:50%}.cal-day-heading.today{background:color-mix(in srgb,var(--accent) 4%,transparent)}.cal-day-heading.today>b{background:var(--accent);color:var(--bg-0)}.cal-day-heading.weekend>span,.cal-day-heading.weekend>b{color:var(--dim)}.cal-day-heading.weekend.today>b{color:var(--bg-0)}.studio-calendar .cal-day-heading>button{font-size:10px;min-height:19px;padding:1px 6px;color:var(--dim)}.cal-day-heading>small{height:19px}.cal-grid-gutter{position:sticky;left:0;z-index:3;background:var(--cal-bg);padding:9px 10px;font-size:11px;color:var(--dim);border-right:1px solid var(--cal-rule,var(--line))}.cal-away-strip{min-height:34px;border-bottom:1px solid var(--cal-rule,var(--line));align-items:center}.cal-away-strip>div{padding:3px 5px;min-width:0}.cal-away-strip>p{grid-column:2/-1;font-size:12px;color:var(--dim);padding:6px 10px}.studio-calendar .cal-away-tag{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:6px;min-width:0;min-height:25px;padding:4px 7px;border-radius:5px;border:0;background:color-mix(in srgb,var(--dim) 9%,transparent);color:var(--dim);font-size:11px;font-weight:400;line-height:17px;white-space:nowrap}.cal-away-tag>i{flex:none;font-size:10px}.cal-away-tag>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cal-away-tag:hover,.cal-away-tag[aria-expanded=true]{background:color-mix(in srgb,var(--dim) 15%,transparent)}.cal-daylong-grid{padding:3px 0;min-height:38px;position:relative}.studio-calendar .cal-daylong-slot{border-right:1px solid var(--cal-rule,var(--line));border-radius:0;padding:0;min-height:0;min-width:0;z-index:0}.studio-calendar .cal-daylong-event{z-index:1;margin:3px 3px;min-height:0;height:26px;min-width:0;display:flex;gap:7px;justify-content:flex-start;padding:3px 9px;border:1px solid color-mix(in srgb,var(--event-color) 45%,var(--cal-rule,var(--line)));border-left:3px solid var(--event-color);border-radius:6px;background:color-mix(in srgb,var(--event-color) 15%,var(--cal-bg));font-size:12px;color:var(--text)}.cal-daylong-event>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left}.cal-daylong-event>i{font-size:10px}.studio-calendar .cal-all-day-more{display:block;margin-left:106px;padding:1px 9px;min-height:23px;color:var(--dim);font-size:11px}.cal-week-timegrid{height:1680px;position:relative}.cal-time-gutter{position:sticky;left:0;height:1680px;z-index:5;background:var(--cal-bg);border-right:1px solid var(--cal-rule,var(--line))}.cal-time-gutter>span{position:absolute;right:14px;font-size:12px;color:var(--dim);transform:translateY(5px);font-variant-numeric:tabular-nums}.cal-grid-track{position:relative;border-right:1px solid var(--cal-rule,var(--line));min-width:0;height:1680px}.cal-grid-track.today{background:color-mix(in srgb,var(--accent) 4%,transparent)}.cal-grid-track.weekend:not(.today){background:color-mix(in srgb,var(--bg-1) 16%,transparent)}.cal-hour-rule{position:absolute;left:0;right:0;height:70px;border-top:1px solid var(--cal-rule,var(--line));pointer-events:none}.cal-hour-rule:after{content:'';position:absolute;left:0;right:0;top:34px;border-top:1px dashed color-mix(in srgb,var(--cal-rule,var(--line)) 60%,transparent)}.studio-calendar .cal-empty-slot{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;min-height:0;z-index:0;background:transparent}.cal-slot-marker{display:none;position:absolute;left:0;right:0;height:17.5px;text-align:right;font-size:10px;padding-right:5px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent);pointer-events:none}.cal-empty-slot:hover>.cal-slot-marker,.cal-empty-slot:focus-visible>.cal-slot-marker{display:block}.studio-calendar .cal-timed-event{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;min-height:0!important;margin:0;border:1px solid color-mix(in srgb,var(--event-color) 35%,var(--cal-rule,var(--line)));border-left:3px solid var(--event-color);border-radius:6px;background:color-mix(in srgb,var(--event-color) 16%,var(--cal-bg));color:var(--text);padding:6px 9px;overflow:hidden;text-align:left;font-size:12px;line-height:16px;box-shadow:none}.cal-timed-event>b{font-weight:600;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:0;line-height:16px}.cal-timed-event>small{font-size:11px;color:var(--dim);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:14px;flex-shrink:0}.cal-timed-event>i{position:absolute;right:5px;top:5px;font-size:10px;color:var(--dim)}.cal-timed-event:has(>i)>b{max-width:calc(100% - 13px)}.studio-calendar .cal-timed-event.short{padding:0 5px;border-top:0;border-bottom:0;border-radius:3px;line-height:12px}.cal-timed-event.short>b{font-size:10px;line-height:12px}.studio-calendar .cal-timed-event.selected{outline:2px solid var(--event-color);outline-offset:-1px;background:color-mix(in srgb,var(--event-color) 26%,var(--cal-bg))}.studio-calendar .cal-timed-event:hover{background:color-mix(in srgb,var(--event-color) 24%,var(--cal-bg))}.studio-calendar .cal-cluster-more{position:absolute;z-index:3;min-height:24px;border-radius:5px;padding:3px;background:var(--bg-2);color:var(--accent);border:1px solid var(--cal-rule,var(--line));font-size:11px}.cal-current-time{position:absolute;left:0;right:0;border-top:1px solid var(--accent);z-index:4;pointer-events:none}.cal-current-time:before{content:'';position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--accent)}.cal-current-time>span{position:absolute;top:-15px;left:8px;background:var(--cal-bg);padding:0 3px;color:var(--accent);font-size:10px;line-height:14px}
/* The same away popover is used in all views and stays inside the viewport. */
.cal-away-popover{position:fixed;z-index:100080;display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--cal-rule,var(--line));border-radius:10px;box-shadow:0 9px 24px #0004;color:var(--text);font-size:13px;font-family:inherit;overflow:hidden;user-select:none}.cal-away-popover:focus-visible,.cal-away-popover :focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.cal-away-popover header{display:flex;align-items:flex-start;justify-content:space-between;padding:14px 12px 10px;gap:8px;flex:none;border-bottom:1px solid var(--cal-rule,var(--line))}.cal-away-popover h3{font-size:13px;line-height:1.5;font-weight:500;margin:0}.cal-away-popover button{min-width:28px;min-height:28px;background:none;border:0;border-radius:5px;color:var(--dim);cursor:pointer}.cal-away-popover button:hover{background:var(--hover)}.cal-away-popover ul{list-style:none;margin:0;padding:7px 12px;overflow:auto;min-height:0;overscroll-behavior:contain}.cal-away-popover li{display:flex;align-items:center;gap:10px;padding:8px 0;min-width:0}.cal-away-avatar{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;flex:none;overflow:hidden;background:color-mix(in srgb,var(--accent) 14%,var(--bg-1));font-size:11px}.cal-away-avatar img{width:100%;height:100%;object-fit:cover}.cal-away-popover li>span:last-child{min-width:0}.cal-away-popover b{font-size:13px;font-weight:500;display:block;overflow-wrap:anywhere}.cal-away-popover small{display:block;font-size:11px;color:var(--dim);line-height:1.5;margin-top:3px}.cal-away-state{padding:10px 20px;font-size:12px;color:var(--dim)}
/* Agenda, Month and People preserve the same date and absence model. */
.cal-agenda-days{padding:10px 24px 28px}.cal-agenda-day{padding:20px 0;border-bottom:1px solid var(--cal-rule,var(--line))}.cal-agenda-day>header{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:12px}.studio-calendar .cal-agenda-day h2{font-size:16px;font-weight:500;margin:0}.cal-agenda-day .cal-away-tag{max-width:300px}.studio-calendar .cal-agenda-event{display:grid;grid-template-columns:140px minmax(0,1fr) 20px;align-items:center;gap:18px;min-height:60px;border-radius:6px;width:100%;text-align:left;padding:10px 14px;margin:6px 0;border-left:3px solid var(--event-color);background:color-mix(in srgb,var(--event-color) 7%,transparent);font-size:13px}.cal-agenda-event>span:first-child{font-variant-numeric:tabular-nums;color:var(--dim)}.cal-agenda-event b{display:block;font-weight:500;font-size:14px;overflow-wrap:anywhere}.cal-agenda-event small{display:block;font-size:12px;color:var(--dim);margin-top:4px}.cal-agenda-event>i{color:var(--dim);font-size:11px}.studio-calendar .cal-agenda-empty{font-size:12px;color:var(--dim);padding:5px 0}.cal-month-scroll{overflow:auto;flex:1;min-height:0}.cal-workspace .cal-month-board{display:grid;grid-template-columns:repeat(7,minmax(115px,1fr));min-width:805px;min-height:100%;border:0;gap:0}.cal-month-board>.cal-month-weekday{position:sticky;top:0;z-index:2;text-align:center;background:var(--cal-bg);border-bottom:1px solid var(--cal-rule,var(--line));padding:12px;font-size:12px;color:var(--dim)}.cal-month-cell{min-width:0;min-height:135px;padding:5px;border-right:1px solid var(--cal-rule,var(--line));border-bottom:1px solid var(--cal-rule,var(--line));display:flex;flex-direction:column;gap:5px}.studio-calendar .cal-month-date{min-height:30px;width:30px;min-width:30px;margin-left:auto;padding:4px;border-radius:50%;font-size:13px}.cal-month-cell.today .cal-month-date{background:var(--accent);color:var(--bg-0)}.cal-month-cell.outside>.cal-month-date{color:var(--dim)}.cal-month-cell .cal-away-tag{font-size:10px;padding:3px 4px;gap:4px}.studio-calendar .cal-month-event{display:flex;align-items:center;justify-content:flex-start;min-height:25px;width:100%;gap:5px;font-size:11px;padding:4px 5px;margin:3px 0;border-radius:4px;text-align:left;border-left:2px solid var(--event-color);background:color-mix(in srgb,var(--event-color) 11%,transparent)}.cal-month-event>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cal-month-event>small{font-size:10px;color:var(--dim);flex:none}.cal-month-event>i{font-size:9px;margin-left:auto}.studio-calendar .cal-month-more{font-size:10px;min-height:24px;color:var(--dim);padding:3px 4px}.studio-calendar .cal-events-dialog{width:min(500px,calc(100vw - 32px));max-height:80dvh;background:var(--bg-1);color:var(--text);border:1px solid var(--cal-rule,var(--line));border-radius:12px;padding:0;overflow:hidden;box-shadow:0 14px 32px #0004}.cal-events-dialog::backdrop,.cal-navigation-drawer::backdrop{background:#09081199}.cal-events-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px;border-bottom:1px solid var(--cal-rule,var(--line))}.cal-events-dialog h2{font-size:18px;font-weight:500;margin:0}.cal-events-dialog>div{max-height:calc(80dvh - 80px);overflow:auto;padding:10px 18px 18px}.studio-calendar .cal-list-event{display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:100%;text-align:left;border-left:3px solid var(--event-color);border-radius:5px;margin:8px 0;padding:10px 12px;background:color-mix(in srgb,var(--event-color) 9%,transparent)}.cal-list-event b{font-size:14px;font-weight:500;overflow-wrap:anywhere}.cal-list-event span,.cal-list-event small{font-size:12px;color:var(--dim)}.studio-calendar .cal-detail-panel{position:absolute;right:var(--cal-panel-right,16px);top:var(--cal-panel-top,130px);z-index:30;width:min(530px,calc(100% - 2 * var(--cal-panel-right,16px)));max-height:calc(100% - var(--cal-panel-top,130px) - 20px);overflow:auto;display:block;margin:0;padding:24px;background:var(--bg-1);border:1px solid var(--cal-rule,var(--line));border-radius:12px;box-shadow:0 12px 30px #0005}.cal-detail-panel>*+*{margin-top:15px}.cal-detail-panel>.cal-close-detail+*{margin-top:0}.studio-calendar .cal-close-detail{position:absolute;right:17px;top:17px;padding:7px;min-width:32px;min-height:32px;color:var(--dim)}.cal-detail-panel>.cal-detail-title{padding-right:20px}.cal-detail-panel .cal-detail-actions{margin-top:20px}.cal-detail-panel .cal-attendee-list{margin-top:20px}.cal-detail-panel:focus{outline:0}.studio-calendar .cal-navigation-drawer{position:fixed;inset:0 auto 0 0;margin:0;width:min(290px,calc(100vw - 30px));max-width:none;height:100dvh;max-height:none;background:var(--bg-1);color:var(--text);border:0;border-right:1px solid var(--cal-rule,var(--line));padding:22px 20px;display:none;overflow:auto}.cal-navigation-drawer[open]{display:flex!important;flex-direction:column;gap:24px}.studio-calendar .cal-close-drawer{position:absolute;right:8px;top:10px;min-width:28px;min-height:28px;padding:4px;color:var(--dim)}.cal-navigation-drawer .cal-sidebar-identity{font-size:15px;padding-right:14px}
@container(max-width:1150px){.cal-sidebar{display:none}.cal-workspace>.cal-main{grid-column:1/-1}.studio-calendar .cal-drawer-trigger{display:inline-flex}.studio-calendar .cal-main-utilities>.cal-toolbar-create{display:inline-flex}.cal-main-heading{gap:12px}.cal-main-header{padding:20px 18px 16px}.cal-view-toolbar{padding:0 18px 14px}.cal-main-utilities{gap:2px}}
@container(max-width:700px){.cal-main-header{padding:14px 12px 12px;gap:8px;flex-wrap:wrap}.cal-main-heading{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;flex:1;min-width:180px}.studio-calendar .cal-main-heading h1{font-size:22px}.studio-calendar .cal-main-heading p{font-size:12px}.cal-period-nav{grid-column:2;gap:6px}.studio-calendar .cal-period-nav button{min-height:34px;padding:6px 10px;font-size:12px}.studio-calendar .cal-drawer-trigger{min-width:32px;min-height:32px;padding:4px;font-size:15px}.cal-main-utilities{flex-wrap:wrap;justify-content:flex-end;max-width:112px}.studio-calendar .cal-main-utilities>.cal-toolbar-create{font-size:11px;min-height:34px;padding:6px 9px;gap:5px}.studio-calendar .cal-main-utilities>button{min-width:34px;min-height:34px;font-size:15px;padding:6px}.cal-main-utilities>.cal-toolbar-create{order:2}.cal-view-toolbar{padding:0 12px 12px;flex-wrap:wrap;gap:8px}.studio-calendar .cal-view-toolbar nav button{min-height:34px;padding:6px 10px;font-size:12px}.studio-calendar .cal-view-toolbar>.kp-select{min-width:0;width:100%;font-size:12px}.studio-calendar .cal-view-toolbar .kp-select-trigger{min-height:34px;font-size:12px;padding:6px 10px}.cal-week-canvas{min-width:932px}.cal-week-viewport{scrollbar-gutter:auto}.cal-agenda-days{padding:0 14px 22px}.studio-calendar .cal-agenda-event{grid-template-columns:80px minmax(0,1fr) 14px;gap:9px;padding:10px;font-size:11px}.cal-agenda-event b{font-size:13px}.cal-agenda-event small{font-size:11px}.cal-view-stage>.cal-inbox,.cal-view-stage>.cal-preferences,.cal-view-stage>.cal-people{padding:18px 14px}.studio-calendar .cal-detail-panel{top:12px;right:8px;width:calc(100% - 16px);max-height:calc(100% - 24px);padding:22px 18px}.cal-day-heading>b{font-size:22px}.cal-workspace .cal-current-time>span{font-size:10px}}

.studio-calendar .cal-timed-event.snug{padding:2px 7px;gap:1px}.cal-timed-event.snug>b{line-height:14px}.cal-timed-event.snug>small{line-height:12px}.cal-timed-event>b{font-size:13px}

/* Calendar finish: quiet charcoal surfaces, clear type and intentional motion. */
.studio-calendar.cal-workspace{--cal-bg:color-mix(in srgb,var(--bg-0) 22%,#15171e);--cal-surface:color-mix(in srgb,var(--bg-1) 27%,#1b1d26);--cal-raised:color-mix(in srgb,var(--bg-2) 28%,#242632);--cal-rule:color-mix(in srgb,var(--text) 12%,transparent);--cal-muted:color-mix(in srgb,var(--text) 68%,var(--cal-bg));--cal-studio:color-mix(in srgb,var(--accent) 62%,#a886f2);--cal-mine:color-mix(in srgb,var(--teal) 30%,#58abed);--cal-line:var(--cal-rule);background:var(--cal-bg);font-family:var(--sans);isolation:isolate}
[data-scheme='light'] .studio-calendar.cal-workspace{--cal-bg:var(--bg-0);--cal-surface:var(--bg-1);--cal-raised:var(--bg-2);--cal-studio:var(--accent);--cal-mine:#327dc2;--cal-muted:var(--dim)}
.cal-workspace .source-studio{--event-color:var(--cal-studio)}.cal-workspace .source-mine{--event-color:var(--cal-mine)}
.cal-workspace .cal-sidebar{padding:24px;gap:28px;background:linear-gradient(145deg,color-mix(in srgb,var(--cal-surface) 95%,var(--accent)),var(--cal-surface) 60%,var(--cal-bg));border-color:var(--cal-rule)}
.cal-workspace .cal-sidebar-identity{font-size:19px;gap:14px;letter-spacing:-.2px}.cal-sidebar-identity b{font-weight:600}.cal-sidebar-identity>i{font-size:26px;color:var(--cal-studio)}
.studio-calendar .cal-primary{background:linear-gradient(115deg,color-mix(in srgb,var(--cal-studio) 86%,white),var(--cal-studio));color:#171020;border:1px solid color-mix(in srgb,var(--cal-studio) 65%,white);box-shadow:inset 0 1px #ffffff22,0 3px 12px #00000014;transition:filter .18s,box-shadow .18s,transform .18s}
.studio-calendar .cal-primary:hover{background:linear-gradient(115deg,color-mix(in srgb,var(--cal-studio) 86%,white),var(--cal-studio));filter:brightness(1.06);box-shadow:inset 0 1px #ffffff33,0 4px 16px color-mix(in srgb,var(--cal-studio) 13%,transparent)}.studio-calendar .cal-primary:active{transform:translateY(1px);filter:brightness(.97)}
.studio-calendar .cal-sidebar-create{height:47px;font-size:15px;border-radius:9px;font-weight:600}.cal-workspace .cal-mini{margin:0 0 38px}.studio-calendar .cal-mini-heading h2{font-size:16px}.cal-mini-heading{margin-bottom:15px}.cal-mini-grid{gap:3px 0}.cal-mini-grid>[role=columnheader]{font-size:13px;color:var(--cal-muted)}.studio-calendar .cal-mini-grid button{font-size:14px;min-height:31px}.cal-mini-grid button>span{width:31px;height:31px;margin:auto}.cal-mini-grid button.in-range{background:color-mix(in srgb,var(--cal-studio) 10%,transparent)}.cal-mini-grid button.in-range:nth-child(7n+1){border-radius:7px 0 0 7px}.cal-mini-grid button.in-range:nth-child(7n){border-radius:0 7px 7px 0}.cal-mini-grid button.today>span{background:linear-gradient(135deg,color-mix(in srgb,var(--cal-studio) 72%,white),var(--cal-studio));color:#171020;box-shadow:0 2px 9px #0002}.cal-mini-grid button.outside{opacity:.48}.cal-mini-grid button:hover>span{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cal-studio) 55%,transparent)}
.cal-calendar-filters legend{font-size:14px;color:var(--cal-muted)}.studio-calendar .cal-calendar-filters label{font-size:16px;gap:12px;margin:16px 0}.cal-calendar-filters input{appearance:none;width:22px!important;height:22px!important;border:1px solid var(--cal-rule);border-radius:5px;background:var(--cal-bg);display:grid;place-content:center;cursor:pointer;transition:background .16s,border-color .16s,box-shadow .16s}.cal-calendar-filters input:checked{background:linear-gradient(135deg,color-mix(in srgb,var(--event-color) 77%,white),var(--event-color));border-color:var(--event-color);box-shadow:inset 0 1px #fff2}.cal-calendar-filters input:checked:after{content:'';display:block;width:10px;height:6px;border-left:2px solid #13151d;border-bottom:2px solid #13151d;transform:rotate(-45deg) translateY(-1px)}
.cal-main-header{padding:24px 30px 18px;background:linear-gradient(100deg,color-mix(in srgb,var(--cal-surface) 35%,transparent),transparent 80%)}.studio-calendar .cal-main-heading h1{font-size:30px;letter-spacing:-.6px;line-height:1.22;font-weight:600}.studio-calendar .cal-main-heading p{font-size:16px;color:var(--cal-muted);margin-top:5px}.cal-main-heading{gap:30px}.studio-calendar .cal-period-nav button{background:linear-gradient(#ffffff02,#ffffff00);border-color:var(--cal-rule);min-height:38px;padding:7px 13px;box-shadow:inset 0 1px #ffffff04}.studio-calendar .cal-main-utilities>button{color:var(--cal-muted);font-size:19px}.cal-view-toolbar{padding:0 30px 14px}.studio-calendar .cal-view-toolbar nav button{font-size:15px;min-height:38px;padding:8px 18px;border-radius:8px;transition:color .16s,background .16s,border-color .16s,box-shadow .16s}.cal-view-toolbar nav button.active{background:linear-gradient(125deg,color-mix(in srgb,var(--cal-studio) 22%,var(--cal-bg)),color-mix(in srgb,var(--cal-studio) 13%,var(--cal-bg)));border-color:color-mix(in srgb,var(--cal-studio) 24%,var(--cal-rule));box-shadow:inset 0 1px #fff1,0 2px 5px #0001;color:color-mix(in srgb,var(--cal-studio) 70%,white)}.studio-calendar .cal-view-toolbar .kp-select-trigger{font-size:14px;min-height:42px;background:color-mix(in srgb,var(--cal-bg) 90%,var(--cal-surface));border-color:var(--cal-rule)}
.cal-day-headers{height:84px}.cal-day-heading{position:relative;gap:1px;padding-bottom:3px}.cal-day-heading>span{font-size:12px;color:var(--cal-muted)}.cal-day-heading>b{font-size:26px;width:40px;height:40px;line-height:40px}.cal-day-heading.today>b{background:linear-gradient(135deg,color-mix(in srgb,var(--cal-studio) 70%,white),var(--cal-studio));color:#171020;box-shadow:0 2px 10px #0002}.cal-day-heading.today,.cal-grid-track.today{background:color-mix(in srgb,var(--cal-studio) 5%,transparent)}.studio-calendar .cal-day-heading>button{position:absolute;bottom:0;opacity:0;transition:opacity .15s;font-size:10px;min-height:15px}.cal-day-heading:hover>button,.cal-day-heading:focus-within>button{opacity:1}.cal-day-heading>small{display:none}.cal-timezone-cell{font-size:14px;padding:13px 20px;gap:4px}.cal-timezone-cell span{font-size:13px;color:var(--cal-muted)}.cal-timezone-cell b{font-weight:600}.cal-grid-gutter{font-size:13px;padding:11px 20px;color:var(--cal-muted)}
.cal-daylong-grid{padding:9px 0;min-height:50px}.studio-calendar .cal-daylong-event{height:32px;margin:0 3px;font-size:14px;font-weight:500;border-radius:6px;padding:4px 12px;border-color:color-mix(in srgb,var(--event-color) 58%,var(--cal-rule));border-left-width:4px;background:linear-gradient(110deg,color-mix(in srgb,var(--event-color) 22%,var(--cal-bg)),color-mix(in srgb,var(--event-color) 12%,var(--cal-bg)));box-shadow:inset 0 1px #ffffff0a}.cal-daylong-grid>.cal-grid-gutter{margin:-9px 0;padding-top:13px}.cal-time-gutter>span{right:29px;font-size:14px;color:var(--cal-muted)}.cal-hour-rule{border-color:var(--cal-rule)}.cal-hour-rule:after{border-color:color-mix(in srgb,var(--text) 6%,transparent)}.cal-grid-track.weekend:not(.today){background:#00000005}.cal-day-heading.weekend>span,.cal-day-heading.weekend>b{color:var(--cal-muted)}
.studio-calendar .cal-timed-event{padding:6px 12px;border-left-width:4px;border-radius:6px;gap:2px;box-shadow:inset 0 1px #ffffff0c,0 2px 4px #00000012;background:linear-gradient(115deg,color-mix(in srgb,var(--event-color) 24%,var(--cal-bg)),color-mix(in srgb,var(--event-color) 14%,var(--cal-bg)));border-color:color-mix(in srgb,var(--event-color) 40%,var(--cal-rule));border-left-color:var(--event-color);transition:background .16s,box-shadow .16s,filter .16s,opacity .16s;will-change:auto}.cal-timed-event>b{font-size:14px;font-weight:600;line-height:18px}.cal-timed-event>small{font-size:13px;line-height:16px;color:color-mix(in srgb,var(--event-color) 23%,var(--cal-muted))}.cal-timed-event>i{font-size:12px;right:8px;top:9px;color:color-mix(in srgb,var(--event-color) 35%,var(--text))}.studio-calendar .cal-timed-event:hover{background:linear-gradient(115deg,color-mix(in srgb,var(--event-color) 32%,var(--cal-bg)),color-mix(in srgb,var(--event-color) 20%,var(--cal-bg)));box-shadow:inset 0 1px #ffffff16,0 4px 12px #0003}.studio-calendar .cal-timed-event.selected{outline:1px solid var(--event-color);outline-offset:1px;box-shadow:0 0 0 3px color-mix(in srgb,var(--event-color) 12%,transparent)}.studio-calendar .cal-timed-event.snug{padding:2px 12px;gap:0}.cal-timed-event.snug>b{font-size:13px;line-height:15px}.cal-timed-event.snug>small{font-size:12px;line-height:13px}.studio-calendar .cal-timed-event.short{padding:0 7px;border-radius:3px}.cal-timed-event.short>b{font-size:11px;line-height:12px}.cal-current-time{border-color:var(--cal-studio)}.cal-current-time:before{background:var(--cal-studio);box-shadow:0 0 0 3px color-mix(in srgb,var(--cal-studio) 10%,transparent)}.cal-current-time>span{font-size:11px;color:var(--cal-studio)}
.studio-calendar .cal-away-tag{background:color-mix(in srgb,var(--cal-muted) 7%,transparent);color:var(--cal-muted);font-size:12px;transition:background .16s,color .16s}.cal-away-strip{background:color-mix(in srgb,var(--cal-surface) 35%,var(--cal-bg))}.cal-away-popover,.cal-events-dialog,.cal-detail-panel{animation:cal-surface-in .18s cubic-bezier(.2,.8,.2,1)}.cal-workspace .cal-detail-panel,.cal-workspace .cal-events-dialog,.cal-workspace .cal-navigation-drawer{background:var(--cal-surface)}.cal-navigation-drawer[open]{animation:cal-drawer-in .22s cubic-bezier(.2,.8,.2,1)}.cal-workspace .cal-month-event{font-size:12px;transition:background .16s}.cal-month-event>small{font-size:11px}.cal-workspace .cal-month-date{font-size:14px}.cal-workspace .cal-agenda-event{transition:background .16s,box-shadow .16s}.cal-agenda-event:hover{box-shadow:inset 0 0 0 1px var(--cal-rule)}
.cal-workspace [data-cal-movable=true]{cursor:grab;touch-action:none}.cal-workspace[data-moving] [data-cal-movable=true]{cursor:progress}.cal-workspace .cal-is-dragging{opacity:.28!important}.cal-drag-active,.cal-drag-active *{cursor:grabbing!important}.cal-drag-preview{position:fixed;z-index:100100;pointer-events:none;padding:5px 10px;border:1px solid var(--accent);border-left:4px solid var(--accent);border-radius:7px;background:color-mix(in srgb,var(--accent) 24%,#191a24);box-shadow:0 9px 30px #0006,inset 0 1px #ffffff22;overflow:visible;color:var(--text);font-size:13px;line-height:18px;max-height:calc(100vh - 20px)}.cal-drag-preview b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cal-drag-preview>span{position:absolute;bottom:calc(100% + 8px);left:0;background:var(--bg-2);border:1px solid var(--line);padding:6px 10px;border-radius:7px;white-space:nowrap;box-shadow:0 4px 16px #0004;color:var(--text);font-size:12px}.cal-move-toast{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid var(--cal-rule);border-radius:10px;background:var(--cal-raised);box-shadow:0 8px 30px #0005;max-width:calc(100% - 32px);font-size:14px;animation:cal-toast-in .2s ease-out}.cal-move-toast>i{color:var(--green)}.cal-move-toast.failed>i{color:var(--orange)}.cal-move-toast button{padding:5px}.cal-workspace .cal-move-dialog{margin:auto;width:min(460px,calc(100vw - 32px));padding:26px;border:1px solid var(--cal-rule);border-radius:14px;background:var(--cal-surface);color:var(--text);box-shadow:0 18px 60px #0007;animation:cal-surface-in .2s ease-out}.cal-move-dialog::backdrop{background:#07081099;backdrop-filter:blur(3px)}.cal-move-dialog>i{color:var(--cal-studio);font-size:22px}.cal-move-dialog h2{font-size:22px;font-weight:600;margin:14px 0 10px}.cal-move-dialog p{font-size:14px;color:var(--cal-muted);margin:10px 0;line-height:1.6}.cal-move-destination{display:flex;align-items:center;gap:10px;font-size:14px;padding:12px 0}.cal-move-dialog>div:last-child{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:24px}.cal-move-dialog button{padding:9px 12px;font-size:13px;border:1px solid var(--cal-rule);border-radius:7px}
@keyframes cal-surface-in{from{opacity:0;transform:translateY(5px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes cal-drawer-in{from{opacity:.6;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}@keyframes cal-toast-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@container(max-width:1150px){.cal-main-header{padding:20px 20px 16px}.cal-main-heading{gap:16px}.cal-view-toolbar{padding:0 20px 14px}}
@container(max-width:700px){.cal-main-header{padding:14px 12px 12px}.studio-calendar .cal-main-heading h1{font-size:23px}.studio-calendar .cal-main-heading p{font-size:13px}.cal-main-heading{gap:8px}.cal-view-toolbar{padding:0 12px 12px}.studio-calendar .cal-view-toolbar nav button{font-size:13px;padding:7px 11px}.cal-workspace .cal-main-utilities>.cal-toolbar-create{color:#171020}.cal-timezone-cell{padding:12px;font-size:13px}.cal-grid-gutter{padding:10px 12px}.cal-time-gutter>span{right:22px;font-size:13px}.cal-daylong-grid>.cal-grid-gutter{padding-top:14px}.cal-move-toast{font-size:13px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.cal-workspace *, .cal-away-popover,.cal-drag-preview{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.cal-workspace .cal-sidebar{gap:24px}.cal-workspace .cal-mini{margin-bottom:28px}.cal-timezone-cell{padding-inline:12px}.cal-workspace .cal-editor-dialog,.cal-workspace .cal-editor-footer{background:var(--cal-surface)}.cal-workspace .cal-editor-dialog{border-color:var(--cal-rule)}

.cal-week-transition{contain:paint;will-change:transform}.cal-week-transition .cal-view-stage{flex:none!important}.cal-week-loading{position:absolute;right:24px;bottom:22px;z-index:21;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--cal-rule);border-radius:8px;background:var(--cal-surface);box-shadow:0 4px 18px #0003;font-size:12px;color:var(--cal-muted)}

.cal-week-viewport{overflow-anchor:none}.cal-week-empty{position:absolute;right:22px;bottom:18px;z-index:11;font-size:12px;color:var(--cal-muted);padding:7px 11px;background:var(--cal-bg);border-radius:7px;pointer-events:none}

.cal-resize-handle{position:absolute;left:0;right:0;bottom:0;height:10px;cursor:ns-resize;touch-action:none;z-index:3;opacity:0}.cal-resize-handle:after{content:'';position:absolute;bottom:2px;left:calc(50% - 9px);width:18px;border-bottom:2px solid currentColor;border-radius:2px}.cal-resize-handle.horizontal{left:auto;top:0;right:0;width:12px;height:auto;cursor:ew-resize}.cal-resize-handle.horizontal:after{left:auto;right:3px;top:calc(50% - 6px);bottom:auto;width:0;height:12px;border-bottom:0;border-right:2px solid currentColor}.cal-timed-event:hover .cal-resize-handle,.cal-timed-event:focus-visible .cal-resize-handle,.cal-daylong-event:hover .cal-resize-handle,.cal-month-event:hover .cal-resize-handle{opacity:.8}.cal-month-event{position:relative}.cal-move-toast .cal-undo{color:var(--accent);font-weight:600;white-space:nowrap;padding:6px 10px;border:1px solid var(--line);border-radius:6px}@media(pointer:coarse){.cal-resize-handle{opacity:.75;height:14px}.cal-resize-handle.horizontal{width:16px;height:auto}}
/* "Set a status" (StatusDialog.tsx): the field, the presets, Clear after. */
.modal.status-dialog { max-width: 440px; overflow: visible; }
.status-dialog .modal-body { display: flex; flex-direction: column; gap: var(--sp-4); overflow: visible; }
.status-field { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-1); }
.status-field:focus-within { border-color: var(--accent); }
.status-field input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; padding: 0 var(--sp-1); }
.status-field input:focus, .status-field input:focus-visible { outline: none; box-shadow: none; }
.status-emoji, .status-reset { flex-shrink: 0; display: grid; place-items: center; width: var(--control-md); height: var(--control-md); border-radius: var(--radius-md); color: var(--dim); font-size: var(--fs-lg); }
.status-emoji:hover, .status-reset:hover { background: var(--hover); color: var(--text); }
.status-reset { font-size: var(--fs-sm); }
.status-presets { display: flex; flex-direction: column; }
/* The preset emoji and words line up with the field's (border, padding, a 36px emoji button, the gap, the input's padding). */
.status-presets button { display: flex; align-items: center; gap: calc(var(--control-md) / 2 - 10px + var(--sp-2) + var(--sp-1)); min-height: var(--control-md); padding: 0 calc(1px + var(--sp-1) + (var(--control-md) - 20px) / 2); border-radius: var(--radius-md); color: var(--text); text-align: left; }
.status-presets button:hover { background: var(--hover); }
.status-presets small { margin-left: auto; color: var(--dim); font-size: var(--fs-sm); }
.status-preset-emoji { width: 20px; text-align: center; }
.status-clear { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); color: var(--dim); font-size: var(--fs-sm); }
.status-dialog .wiz-foot { margin: 0; padding: var(--sp-4) 22px; border-top: 1px solid var(--line); }
.status-actions { display: flex; gap: var(--sp-2); }
/* User Settings → Voice & audio. One spacing value, --vs-gap, between every
   card, row and control; cards pad by it too. Scoped under .vs-panel, with the
   profile editor's generic label/input rules reset where they would clash. */
.vs-panel {
  --vs-gap: 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--vs-gap); align-items: start;
}
.vs-main { display: flex; flex-direction: column; gap: var(--vs-gap); min-width: 0; }
.vs-card, .vs-test {
  display: flex; flex-direction: column; gap: var(--vs-gap); padding: var(--vs-gap);
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg-0);
}
.vs-card header, .vs-test header { display: flex; flex-direction: column; gap: 4px; }
.vs-panel h4 { margin: 0; font-size: 14px; color: var(--text); }
.vs-card header p, .vs-test header p { margin: 0; font-size: 12px; color: var(--dim); line-height: 1.45; }
.vs-label { font-size: 12px; font-weight: 650; color: var(--text); }
.vs-note { margin: 0; font-size: 11.5px; color: var(--dim); line-height: 1.45; }
.vs-note.is-warn { color: var(--orange, #e8964a); }
.vs-row { display: flex; align-items: center; justify-content: space-between; gap: var(--vs-gap); min-height: 24px; }
.profile-editor .modal-body .vs-panel label { margin: 0; display: flex; text-transform: none; letter-spacing: 0; }

/* Noise removal choices. */
.vs-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vs-gap); }
.vs-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; text-align: left;
  border: 1px solid var(--line); border-radius: 11px; background: var(--bg-1); color: var(--dim); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.vs-choice:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.vs-choice[aria-checked='true'] {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-1));
  box-shadow: inset 0 0 0 1px var(--accent);
}
.vs-choice:focus-visible, .vs-segments button:focus-visible, .vs-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vs-choice-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); }
.vs-choice-title em {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 999px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.vs-choice-text { font-size: 11.5px; line-height: 1.4; }

/* Voice: presets, EQ curve and the channel strip knobs. */
.vs-voice > .vs-row { align-items: flex-start; }
.vs-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vs-gap); }
.vs-preset {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 11px; background: var(--bg-1); color: var(--text); font-size: 13px; font-weight: 650;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.vs-preset i {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; font-size: 13px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.vs-preset:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.vs-preset[aria-checked='true'] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-1)); box-shadow: inset 0 0 0 1px var(--accent); }
.vs-preset[aria-checked='true'] i { color: var(--bg-0); background: var(--accent); }
.vs-preset:focus-visible, .vs-knob-dial:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vs-eq { display: block; width: 100%; height: auto; border-radius: 11px; border: 1px solid var(--line); background: var(--bg-1); transition: opacity 0.2s ease; }
.vs-eq.is-off { opacity: 0.45; }
.vs-eq-grid { stroke: color-mix(in srgb, var(--text) 8%, transparent); stroke-width: 1; }
.vs-eq-grid.is-zero { stroke: color-mix(in srgb, var(--text) 20%, transparent); }
.vs-eq-area { fill: url(#vs-eq-fill); }
.vs-eq-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.vs-eq text { fill: var(--dim); font-size: 11px; }
.vs-knob-group { display: flex; flex-direction: column; gap: 8px; }
.vs-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.vs-knobs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vs-gap); }
.vs-knob {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-1); transition: opacity 0.2s ease;
}
.vs-knob.is-off { opacity: 0.45; }
.vs-knob-dial { width: 64px; height: 64px; border-radius: 50%; cursor: ns-resize; touch-action: none; }
.vs-knob.is-off .vs-knob-dial { cursor: default; }
.vs-knob-dial svg { display: block; width: 100%; height: 100%; }
.vs-knob-track, .vs-knob-value { fill: none; stroke-width: 4; stroke-linecap: round; }
.vs-knob-track { stroke: color-mix(in srgb, var(--text) 14%, transparent); }
.vs-knob-value { stroke: var(--accent); }
.vs-knob-face { fill: var(--bg-2); stroke: color-mix(in srgb, var(--text) 12%, transparent); stroke-width: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.vs-knob-tick { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.vs-knob-label { font-size: 11.5px; font-weight: 650; color: var(--text); }
.vs-knob-value-text { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }

/* Segmented controls. */
.vs-segments { display: flex; gap: 4px; padding: 4px; border-radius: 11px; background: var(--bg-1); border: 1px solid var(--line); }
.vs-segments button {
  flex: 1; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 650; color: var(--dim);
  background: transparent; border: 0; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.vs-segments button[aria-checked='true'] { background: var(--bg-2); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.vs-segments button:disabled { opacity: 0.45; cursor: default; }
.vs-segments.is-small button { padding: 6px 8px; font-size: 12px; }
.vs-sensitivity, .vs-ptt, .vs-slider, .vs-device, .vs-listen { display: flex; flex-direction: column; gap: 8px; }
.vs-ptt { gap: var(--vs-gap); }

/* Sliders: a thin track filled up to the thumb. */
.profile-editor .modal-body .vs-panel input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; min-height: 0; height: 20px; padding: 0; margin: 0;
  border: 0; background: transparent; cursor: pointer;
}
.vs-panel input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--vs-fill, 0%), color-mix(in srgb, var(--text) 14%, transparent) var(--vs-fill, 0%));
}
.vs-panel input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.vs-panel input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }
.vs-panel input[type=range]:disabled { cursor: default; opacity: 0.5; }
.vs-slider output { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }

/* Level meters: the live level, and a marker where the mic opens. */
.vs-level { position: relative; height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); }
.vs-level.is-large { height: 14px; }
.vs-level-fill {
  position: absolute; inset: 0; transform-origin: left; transition: transform 60ms linear;
  background: linear-gradient(to right, color-mix(in srgb, var(--dim) 70%, transparent), var(--dim));
}
.vs-level.is-open .vs-level-fill { background: linear-gradient(to right, color-mix(in srgb, var(--green, #3ba55d) 70%, transparent), var(--green, #3ba55d)); }
.vs-level-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; transition: left 0.2s ease; }
.vs-meter-slider { display: flex; flex-direction: column; gap: 6px; }
.vs-meter-slider .vs-level { height: 10px; }
.vs-switch { align-items: center; gap: 8px; font-size: 12px; color: var(--dim); cursor: pointer; }

/* Push-to-talk shortcut. */
.vs-key-actions { display: flex; align-items: center; gap: 10px; }
.vs-key {
  min-width: 132px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-1);
  color: var(--dim); font-size: 12px; font-weight: 650; cursor: pointer;
}
.vs-key kbd {
  font: 700 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--text); padding: 3px 8px; border-radius: 6px;
  background: var(--bg-2); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}
.vs-key.is-recording { border-color: var(--accent); color: var(--accent); animation: vs-recording 1.2s ease-in-out infinite; }
@keyframes vs-recording { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } }
.vs-link { border: 0; background: none; padding: 0; color: var(--dim); font-size: 12px; text-decoration: underline; cursor: pointer; }

/* Devices: two columns of pickers and volumes. */
.vs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vs-gap); }
.vs-allow { align-self: flex-start; }

/* Processing switches. */
.vs-toggle { justify-content: space-between; align-items: center; gap: var(--vs-gap); cursor: pointer; }
.vs-toggle > span { display: flex; flex-direction: column; gap: 2px; }
.vs-toggle strong { font-size: 12.5px; color: var(--text); }
.vs-toggle small { font-size: 11.5px; color: var(--dim); }

.vs-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--vs-gap); font-size: 11.5px; color: var(--dim); }

/* Mic test column. */
.vs-test { position: sticky; top: 0; }
.vs-test-meter { padding: 12px; border-radius: 11px; background: var(--bg-1); border: 1px solid var(--line); transition: border-color 0.15s ease; }
.vs-test-meter.is-open { border-color: color-mix(in srgb, var(--green, #3ba55d) 55%, var(--line)); }
.vs-test-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--dim); min-height: 18px; }
.vs-test-status small { font-size: 11px; color: var(--dim); }
.vs-test-status .is-live { display: inline-flex; align-items: center; gap: 6px; color: var(--green, #3ba55d); font-weight: 650; }
.vs-test-status .is-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }
.vs-test-status .is-error { color: var(--orange, #e8964a); }
.vs-test > .btn-primary, .vs-test > .btn-ghost { width: 100%; min-height: 38px; }

@media (max-width: 760px) {
  .vs-panel { grid-template-columns: minmax(0, 1fr); }
  .vs-test { position: static; order: -1; }
  .vs-choices, .vs-grid { grid-template-columns: minmax(0, 1fr); }
  .vs-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .vs-knobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .vs-level-fill, .vs-level-mark, .vs-choice, .vs-segments button, .vs-preset, .vs-eq, .vs-knob { transition: none; }
  .vs-key.is-recording { animation: none; }
}

/* In User Settings the voice section uses the full width (no profile preview). */
.profile-editor-layout:has(.profile-editor-preview[data-section='voice']) { grid-template-columns: minmax(0, 1fr); }
.profile-editor-preview[data-section='voice'] { display: none; }
/* The call's state (voice/CallState.tsx): the card in place of the stage, the reconnecting banner,
   the sidebar panel's status and actions, the toast, the moderator-mute lock and the blocked-mic
   glyph. Tokens only. Green means live (and speaking), nothing else. */

/* Joining, couldn't join, ended: a card in the middle of the stage. */
.call-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-5); text-align: center; background: transparent; }
.call-panel > * { max-width: 400px; }
/* In the stage: a card in its middle. */
.call-stage > .call-panel { position: relative; flex: none; margin: auto; width: min(448px, calc(100% - 48px)); box-sizing: border-box; border-radius: var(--radius-xl);
  background: var(--pop-bg); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.call-panel-icon { width: 56px; height: 56px; border-radius: var(--radius-full); display: grid; place-items: center; font-size: 22px; color: var(--dim); background: color-mix(in srgb, var(--text) 8%, var(--bg-2)); }
.call-panel-icon.bad { color: var(--danger-text); background: color-mix(in srgb, var(--danger) 16%, var(--bg-2)); }
.call-panel-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text); line-height: var(--lh-tight); max-width: 400px; text-wrap: balance; }
.call-panel .auth-error.call-panel-title { color: var(--text); background: none; border: none; padding: 0; margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.call-panel-text { margin: 0; color: var(--dim); font-size: var(--fs-md); line-height: var(--lh-body); max-width: 400px; display: flex; align-items: center; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
/* Every button pair the same height, top-aligned. */
.call-panel-actions { display: flex; gap: var(--sp-3); align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.call-panel-actions button { height: var(--control-md); min-height: var(--control-md); margin: 0; padding: 0 var(--sp-4); display: inline-flex; align-items: center; gap: var(--sp-2); box-sizing: border-box;
  border-radius: var(--radius-full); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.voice-join.call-panel .call-panel-actions :is(.btn-primary, .btn-ghost) { margin: 0; }
.voice-join.call-panel .call-panel-actions .btn-ghost { background: var(--ctl-bg); border: 1px solid var(--ctl-line); color: var(--text); box-shadow: none; backdrop-filter: none; }
.voice-join.call-panel .call-panel-actions .btn-ghost:hover { background: var(--ctl-bg-hover); }
/* The main action is a solid accent at every width. */
.voice-join.call-panel .call-panel-actions .btn-primary { background: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--text)); color: var(--on-accent); box-shadow: none; backdrop-filter: none; }
.voice-join.call-panel .call-panel-actions .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text)); color: var(--on-accent); }
.call-panel-actions button:disabled { cursor: default; }
/* A countdown on a button is information: --text on a neutral fill, never a faded primary. */
.call-panel-actions .call-countdown { border: 1px solid var(--ctl-line); background: var(--ctl-bg); color: var(--text); }
.call-panel-actions .call-countdown i { color: var(--dim); }
.call-panel-text .call-timer { color: var(--text); }
.call-vc { font-size: 0.85em; opacity: 0.8; }
.call-timer { font-variant-numeric: tabular-nums; }

.call-spinner { width: var(--sp-3); height: var(--sp-3); border-radius: var(--radius-full); border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: call-spin 0.8s linear infinite; flex-shrink: 0; }
.call-spinner.sm { width: var(--sp-2); height: var(--sp-2); }
@keyframes call-spin { to { transform: rotate(360deg); } }

/* Reconnecting: a warning band across the top of the stage, "Reconnecting… 0:07", and after 30 s
   Try now (a 36 px ghost) and Leave. The call under it dims (only avatars and video; names stay readable). */
.call-banner { position: relative; z-index: var(--z-raised); flex: none; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  min-height: 48px; padding: var(--sp-1) var(--sp-3); box-sizing: border-box; color: var(--text); font-size: var(--fs-md);
  background: color-mix(in srgb, var(--warning) 22%, var(--bg-2)); border-bottom: 1px solid color-mix(in srgb, var(--warning) 50%, transparent); }
.call-stage.video > .call-banner { background: color-mix(in srgb, var(--warning) 22%, #15171c); color: var(--stage-video-text); }
.call-banner-icon { color: var(--warning-text); }
.call-stage.video .call-banner-icon { color: #f0b232; }
.call-banner-text { font-weight: var(--fw-bold); }
.call-banner-actions { display: inline-flex; gap: var(--sp-2); margin-left: auto; }
.call-banner-btn { height: var(--control-md); padding: 0 var(--sp-4); border-radius: var(--radius-full); border: 1px solid color-mix(in srgb, var(--warning) 60%, transparent);
  background: transparent; color: inherit; font: inherit; font-weight: var(--fw-semibold); cursor: pointer; }
.call-banner-btn:hover { background: color-mix(in srgb, var(--warning) 18%, transparent); }
.call-banner-btn.danger { border-color: transparent; color: var(--on-danger); background: var(--danger-fill); }
/* Tap targets: 44 px on touch (after 30 s, Leave may be the only way out). */
.call-banner-btn, .call-toast-btn { min-height: 32px; }
.call-toast-x { min-width: 32px; min-height: 32px; }
@media (pointer: coarse) {
  .call-banner-btn, .call-toast-btn { min-height: 44px; }
  .call-toast-x { min-width: 44px; min-height: 44px; }
}
/* "Open this in the Kelp Pup app?" never covers a call (openInApp.ts). */
:root[data-kp-call]:not([data-kp-call='idle']) .kp-open-app { display: none; }
.voice-room[data-call-state='reconnecting'] :is(.vr-stage, .voice-stage, .theater-stage) { pointer-events: none; }
.voice-room[data-call-state='reconnecting'] :is(.puck-av, .vr-tile, .vr-chip-av, .spot, .film-tile .puck-av, .film-cam) { opacity: 0.5; filter: grayscale(0.7); }
.voice-room[data-call-state='reconnecting'] :is(.speaking, .speaking *) { animation: none !important; }
.call-rejoining { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.call-rejoining-stage { flex: 1; opacity: 0.5; }

/* The sidebar panel's status: green only while live, amber while connecting or reconnecting, grey once over. */
.vs-on.warn { color: var(--warning-text); }
.vs-on.bad { color: var(--dim); }
.vs-sub { font-weight: var(--fw-regular); color: var(--dim); }
.vs-choice { display: flex; gap: var(--sp-2); }
.vs-act { flex: 1; height: var(--control-md); border-radius: var(--radius-full); border: 1px solid var(--ctl-line); background: var(--ctl-bg); color: var(--text); font: inherit; font-size: 13px; font-weight: var(--fw-semibold); cursor: pointer; }
.vs-act:hover:not(:disabled) { background: var(--ctl-bg-hover); }
.vs-act:disabled { color: var(--text); cursor: default; font-variant-numeric: tabular-nums; } /* a countdown: information, so full contrast */
@keyframes call-blink { from { opacity: 1; } to { opacity: 0.3; } }
/* The sidebar row of the voice channel you're in: green only while the call is live. */
:root:is([data-kp-call='token'], [data-kp-call='connecting'], [data-kp-call='publishing'], [data-kp-call='reconnecting']) .side-row.in-voice .side-name { color: var(--warning-text); }
:root:is([data-kp-call='token'], [data-kp-call='connecting'], [data-kp-call='publishing'], [data-kp-call='reconnecting']) .in-voice-dot { background: var(--warning); animation: call-blink 1s var(--ease-loop) infinite alternate; }
:root:is([data-kp-call='failed'], [data-kp-call='ended']) .side-row.in-voice .side-name { color: var(--dim); }
:root:is([data-kp-call='failed'], [data-kp-call='ended']) .in-voice-dot { background: var(--offline); }

/* News: top-centre of the main column, under its header; never over the composer. */
.call-toast { position: absolute; left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; align-items: center; gap: var(--sp-3);
  width: max-content; max-width: calc(100% - 2 * var(--sp-4)); /* max-content: with left 50% it would only take half the column */ background: var(--pop-bg); border: 1px solid var(--line); color: var(--text);
  min-height: 52px; box-sizing: border-box; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-radius: var(--radius-full); font-size: var(--fs-md); box-shadow: var(--shadow-3); }
.call-toast > i { flex-shrink: 0; }
.call-toast.success > i { color: var(--success-text); }
.call-toast.warning > i { color: var(--warning-text); }
.call-toast.info > i { color: var(--accent); }
.call-toast-btn { height: var(--control-sm); padding: 0 var(--sp-3); border-radius: var(--radius-full); border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--text)); background: var(--accent); color: var(--on-accent); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap; }
.call-toast-x { width: var(--control-md); height: var(--control-md); border: none; background: none; color: var(--dim); cursor: pointer; border-radius: var(--radius-full); }
.call-toast-x:hover { background: var(--hover); color: var(--text); }

/* Muted by a moderator: a lock on your own mic button, and who did it beside the bar. Listening only
   because the mic is blocked: a ban glyph on the mic button. */
.vctrl, .vs-btn { position: relative; }
.mic-lock, .mic-blocked { position: absolute; right: calc(var(--sp-1) * -1); bottom: calc(var(--sp-1) * -1); width: var(--sp-4); height: var(--sp-4); border-radius: var(--radius-full);
  background: var(--warning); color: #1d1606; font-size: 9px; display: flex; align-items: center; justify-content: center; }
.mic-blocked { background: var(--danger-fill); color: var(--on-danger); }
/* The call (Task 4): its header, stage, tiles, bar, popovers, spotlight, fullscreen, pop-out, the
   sidebar's call panel, the join panel and the phone's call pill. Tokens: tokens.css (--stage-*,
   --ctl-*). One gap everywhere: 12 px (--stage-gap) between tiles, around the stage and the bar,
   equal on both axes. Voice-only stages follow the theme; video sits on a dark panel in every theme. */

/* (This sheet loads before the app's page-wide sheets: where they style the same thing, its selectors
   are the more specific ones.) */
/* ---------- The room and its place in the main column ---------- */
.voice-room { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--main-bg); }
.voice-room, .voice-room .vr-stage, .voice-room .voice-bar { -webkit-user-select: none; user-select: none; }
.voice-room :is(input, textarea, [contenteditable]) { -webkit-user-select: text; user-select: text; }
/* The chat beside the call (default), or the call docked above it (More → Dock above chat). */
.main.call-side { flex-direction: row; }
.main.call-side > .voice-dock.expanded { flex: 1 1 auto; max-height: none; min-height: 0; height: auto; border-bottom: 0; }
.main.call-side .chat-pane { flex: none; width: 360px; min-width: 0; border-left: 1px solid var(--line); }
/* Docked above the chat: a definite height (the stage sizes its tiles from the room it gets), 46% of the
   window unless you've dragged it (dock.ts sets it inline). */
:not(.call-side) > .voice-dock.expanded { height: 46vh; }
.main.call-side.call-chat-hidden .chat-pane { display: none; }
/* (A tablet or a small window, 1180 px or less: the chat replaces the call, as on a phone; Chat.tsx.) */
/* The call's chat says only "Chat" (the call's header names the channel), and no empty-channel intro. */
.main-head.call-chat-head { justify-content: space-between; }
.call-chat-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); }
.main.call-chat .chat-intro { display: none; } /* the call's own chat (beside it, or in its place on a tablet or phone) */
/* In a call, the sidebar's "N mentions below" pill is a row of its own under the list (12 px above and
   below it), not over the list: the list ends above it and the call's people stay in view. */
.sidebar:has(.voice-status) .unread-edge.below:has(.unread-edge-pill) { height: auto; flex: none; padding: var(--sp-3) 0; }
.sidebar:has(.voice-status) .unread-edge.below .unread-edge-pill { transform: none; }
.sidebar:has(.voice-status) .unread-edge.below:has(.unread-edge-pill) + * { margin-top: 0; }
/* The phone: 12 px between the call pill and "Jump to first unread". */
.call-pill ~ .first-unread-button { margin-top: var(--sp-3); }
/* A phone: the call fills the screen; the chat button swaps to the chat (the pill comes back). */
@media (max-width: 760px) {
  .main.call-side > .voice-dock.expanded { max-height: none; }
  .main.call-side .chat-pane { display: none; }
}

/* ---------- Header ---------- */
.call-head { height: 56px; flex: none; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); box-sizing: border-box; border-bottom: 1px solid var(--line); background: var(--surface-head); min-width: 0; }
.ch-title { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.ch-title b { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-title b i { color: var(--dim); font-size: 14px; }
.ch-meta { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-lost { color: var(--warning-text); font-weight: var(--fw-semibold); }
.ch-sp { flex: 1; }
.hbtn { position: relative; flex: none; width: var(--control-md); height: var(--control-md); border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center;
  background: var(--ctl-bg); color: var(--ctl-fg); border: 1px solid var(--ctl-line); border-top-color: var(--ctl-rim); font-size: 14px; cursor: pointer; padding: 0; }
.hbtn:hover { background: var(--ctl-bg-hover); }
.hbtn.on { background: var(--ctl-on-bg); color: var(--ctl-on-fg); border-color: transparent; }
.hbtn[aria-disabled='true'] { opacity: 0.45; cursor: default; }
.hbtn:focus-visible, .q-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hbtn .badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; box-sizing: border-box; padding: 0 4px; border-radius: 8px; background: var(--danger-fill); color: var(--on-danger); font-size: 10px; font-weight: var(--fw-bold); display: grid; place-items: center; }
.q-btn, .call-head .q-btn { position: relative; display: inline-flex; align-items: center; width: auto; height: 24px; padding: 0; margin: 0 0 0 var(--sp-1); /* 8 px from the timer (with the row's 4 px gap) */ border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; }
.q-btn:hover { background: var(--hover); }
.q.qbars { width: auto; height: 12px; display: inline-flex; align-items: flex-end; gap: 2px; border-radius: 0; background: none; }
.qbars i { width: 3px; border-radius: 1px; background: var(--ctl-line); }
.qbars i:nth-child(1) { height: 4px; } .qbars i:nth-child(2) { height: 7px; } .qbars i:nth-child(3) { height: 10px; } .qbars i:nth-child(4) { height: 12px; }
.qbars i.lit { background: var(--success); }
:is(.q-poor, .q-lost, .q-reconnecting) i.lit { background: var(--warning); }
.q-reconnecting i.lit { animation: call-blink 1s var(--ease-loop) infinite alternate; }
.tb-streams { display: flex; gap: var(--sp-2); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tb-stream { display: flex; align-items: center; gap: var(--sp-2); height: var(--control-sm); padding: 0 var(--sp-3); border-radius: var(--radius-full); white-space: nowrap; cursor: pointer;
  border: 1px solid var(--ctl-line); background: var(--ctl-bg); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.tb-stream:hover { background: var(--ctl-bg-hover); }
.tb-stream[aria-selected='true'], .tb-stream[aria-pressed='true'] { background: var(--ctl-on-bg); color: var(--ctl-on-fg); border-color: transparent; }
.tb-stream:focus-visible, .theater-split-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The phone: back, the channel over its count and clock, the connection, the chat. */
.voice-room[data-level='phone'] .call-head { height: 64px; padding: 0 var(--sp-3); }
.voice-room[data-level='phone'] .call-head .hbtn { width: var(--control-touch); height: var(--control-touch); font-size: 16px; }
.voice-room[data-level='phone'] .ch-title { flex-direction: column; align-items: flex-start; gap: 0; }
.voice-room[data-level='phone'] .ch-meta { font-size: var(--fs-sm); }

/* ---------- Stage ---------- */
.call-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; margin: var(--stage-gap) var(--stage-gap) 0; border-radius: var(--radius-lg);
  background: var(--stage-bg); box-shadow: inset 0 0 0 1px var(--stage-tile-line); overflow: hidden; }
.call-stage.video { background: var(--stage-video-bg); box-shadow: none; }

/* Voice only: tiles fill the stage, 12 px from every edge and from each other (Stage.tsx sets the size). */
.voice-stage.audio-only { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: var(--stage-gap); padding: var(--stage-gap); overflow: hidden; }
.voice-stage > :is(.voice-puck, .vr-share) { flex: none; width: var(--pw); height: var(--ph); box-sizing: border-box; aspect-ratio: auto; }
.voice-stage > .voice-puck { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-3);
  border-radius: var(--radius-lg); background: var(--stage-tile); border: 1px solid var(--stage-tile-line); }
.voice-stage > .voice-puck.hand, .film-tile.voice-puck.hand { border-color: color-mix(in srgb, var(--stage-hand) 80%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stage-hand) 80%, transparent); }
.puck-av { --ring: clamp(2px, calc(var(--puck) * 0.03), 4px); position: relative; flex: none; width: var(--puck); height: var(--puck); border-radius: 50%;
  box-shadow: 0 0 0 0 transparent; transition: box-shadow 300ms var(--ease); }
.puck-av > .avatar { --av: var(--puck); width: var(--puck); height: var(--puck); font-size: calc(var(--puck) * 0.36); }
/* Speaking: a thin green ring with a soft 8 px glow; 120 ms in, 300 ms out. */
.voice-puck.speaking .puck-av { transition-duration: var(--dur-fast);
  box-shadow: 0 0 0 2px var(--stage-tile), 0 0 0 calc(2px + var(--ring)) var(--stage-speaking), 0 0 8px calc(2px + var(--ring)) color-mix(in srgb, var(--stage-speaking) 28%, transparent); }
.film-tile.voice-puck.speaking .puck-av { box-shadow: 0 0 0 2px var(--stage-video-tile), 0 0 0 calc(2px + var(--ring)) var(--stage-speaking), 0 0 8px calc(2px + var(--ring)) color-mix(in srgb, var(--stage-speaking) 28%, transparent); }
/* Muted or deafened: a red badge with the bar's own white glyph, 12 px on a 20 px disc (and its ring). */
.pbadge { position: absolute; right: 2%; bottom: 2%; width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%;
  display: grid; place-items: center; border: 3px solid var(--stage-tile); background: var(--danger-fill); }
.pbadge.vc-state, .pbadge.vc-state i { color: #fff; font-size: 12px; gap: 0; }
.pbadge.vc-state.listen, .pbadge.vc-state.listen i { color: var(--ctl-on-fg); }
.pbadge .slash::after { width: 1.5px; box-shadow: 0 0 0 1px var(--danger-fill); }
.film-tile .pbadge { border-color: var(--stage-video-tile); right: -4px; bottom: -4px; }
.pbadge.listen { background: var(--ctl-on-bg); color: var(--ctl-on-fg); }
/* A struck-through icon (deafened). */
.slash { position: relative; display: inline-flex; }
.slash::after { content: ''; position: absolute; left: 50%; top: -3px; width: 2px; height: calc(100% + 6px); background: currentColor; transform: translateX(-50%) rotate(-45deg); border-radius: 2px; }
.puck-name { display: flex; align-items: baseline; gap: 6px; max-width: 100%; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); line-height: 20px; }
.puck-name > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puck-you { color: var(--dim); font-weight: var(--fw-regular); }
.puck-kick { position: absolute; top: 0; right: 0; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--stage-glass); color: #fff; font-size: 12px; cursor: pointer;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.voice-puck:hover .puck-kick, .puck-kick:focus-visible { opacity: 1; }
.puck-kick:hover { background: var(--danger-fill); }
/* Top-right of a tile: Live while they share, their raised hand. */
.tile-chips { position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 3; display: flex; gap: var(--sp-1); }
.kp-hand, .tile-live { height: 28px; padding: 0 10px; border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; box-sizing: border-box; }
.kp-hand { background: var(--stage-hand); color: var(--ctl-hand-fg); pointer-events: none; }
.tile-live { border: 0; background: var(--danger-fill); color: var(--on-danger); cursor: pointer; }
.tile-live:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Small tiles (under 240 px): the hand alone. */
:is(.compact, .film) .kp-hand { width: 28px; padding: 0; justify-content: center; }
:is(.compact, .film) .kp-hand-text { display: none; }
.film .tile-chips { top: 6px; right: 6px; }
.film .kp-hand { width: 22px; height: 22px; font-size: 11px; }

/* With video: equal 16:9 tiles (Stage.tsx sizes them), everyone else in the roster under them. */
.vr-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--vr-gap); padding: var(--vr-gap); }
.vr-grid { flex: 1; min-height: 0; display: flex; overflow: auto; }
.vr-grid-inner { margin: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vr-gap); }
.vr-tile, .film-cam { position: relative; flex: none; overflow: hidden; isolation: isolate; border-radius: var(--radius-lg); background: var(--stage-video-tile); color: var(--stage-video-text); }
.vr-tile { width: var(--vr-tile); aspect-ratio: 16 / 9; container-type: inline-size; }
:is(.vr-tile, .film-cam) video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Speaking on video: a 2 px inner border with an inner glow, drawn inside (never moves the layout). */
:is(.vr-tile, .film-cam)::after { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease);
  box-shadow: inset 0 0 0 2px var(--stage-speaking), inset 0 0 14px color-mix(in srgb, var(--stage-speaking) 35%, transparent); }
:is(.vr-tile, .film-cam).speaking::after { opacity: 1; transition-duration: var(--dur-fast); }
:is(.vr-tile, .film-cam).hand::before { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 2px var(--stage-hand); }
/* Labels and chips over video: dark glass, light text, in every theme. */
.vr-label, .mchip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-full); background: var(--stage-glass); color: var(--stage-video-text);
  font-size: 13px; font-weight: var(--fw-semibold); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; box-sizing: border-box; }
.vr-label { position: absolute; z-index: 2; left: var(--sp-2); bottom: var(--sp-2); max-width: calc(100% - 16px); height: 28px; padding: 0 10px; }
.vr-label > span { overflow: hidden; text-overflow: ellipsis; }
.film .vr-label { left: 6px; bottom: 6px; height: 24px; padding: 0 8px; font-size: var(--fs-sm); }
:is(.vr-label, .vr-chip) .vc-state { color: #ff9b9d; font-size: 12px; }
.vr-kick { position: absolute; z-index: 5; top: var(--sp-2); left: var(--sp-2); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--stage-glass-line); color: #fff; background: var(--stage-glass); font-size: 12px; cursor: pointer;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.vr-tile:hover .vr-kick, .vr-kick:focus-visible { opacity: 1; }
.vr-kick:hover { background: var(--danger-fill); }
/* A shared screen's tile: Live, a Watch overlay on hover or focus, the share's label. */
.vr-share { display: block; padding: 0; border: none; font: inherit; cursor: pointer; background: var(--stage-video-base); }
.vr-share video { object-fit: contain; background: #000; }
.vr-share:hover, .vr-share:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.vr-share-hit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.vr-share-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vr-live { position: absolute; z-index: 2; top: var(--sp-2); left: var(--sp-2); display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--radius-full);
  background: var(--danger-fill); color: var(--on-danger); font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; }
.vr-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: vr-live 1.8s var(--ease-loop) infinite; }
@keyframes vr-live { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } }
.vr-share-watch { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%) scale(0.96); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: var(--sp-2); height: var(--control-md); padding: 0 var(--sp-4); border-radius: var(--radius-full);
  background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: var(--fw-bold); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.vr-share:hover .vr-share-watch, .vr-share:focus-within .vr-share-watch { opacity: 1; transform: translate(-50%, -50%); }
.vr-share-mode { font-weight: var(--fw-regular); opacity: 0.86; }
.vr-label-icon { opacity: 0.8; }
.vr-roster { flex: none; display: flex; gap: var(--vr-gap); justify-content: safe center; overflow-x: auto; scrollbar-width: none; }
.vr-chip { flex: none; display: flex; align-items: center; gap: var(--sp-2); height: 40px; box-sizing: border-box; padding: 4px 14px 4px 4px; border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); color: var(--stage-video-text); font-size: 13px; font-weight: var(--fw-semibold); }
.vr-chip.hand { box-shadow: inset 0 0 0 1px var(--stage-hand); }
.vr-chip-av { box-shadow: 0 0 0 0 transparent; transition: box-shadow 300ms var(--ease); }
.vr-chip.speaking .vr-chip-av { box-shadow: 0 0 0 2px var(--stage-speaking); transition-duration: var(--dur-fast); }
.vr-chip-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-chip-hand { color: var(--stage-hand); font-size: 12px; }
/* A short docked call: one centred row of chips (Stage.tsx ChipStrip), never squashed tiles. */
.call-stage.short { display: flex; align-items: center; justify-content: center; }
.vr-strip { display: flex; gap: 8px; justify-content: center; align-items: center; width: 100%; padding: 0 var(--sp-3); overflow: hidden; }
.vr-strip .vr-chip { height: 44px; padding: 8px 14px 8px 8px; }
.vr-strip .vr-chip-share { border: 0; cursor: pointer; padding-left: 14px; }
.vr-chip-share .fa-display { color: var(--accent); }
.vr-strip .vr-chip-more { padding: 0 14px; }

/* ---------- Spotlight: the share, its overlays, the filmstrip ---------- */
.theater-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--stage-gap); padding: var(--stage-gap); }
.theater-stage { justify-content: center; }
.spot { position: relative; flex: 0 0 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.theater-stage:has(.theater-split) .spot { flex: 1 1 auto; }
.spot-frame { position: relative; flex: none; border-radius: var(--radius-md); overflow: hidden; background: #000; }
.spot-frame .theater-video, .theater-video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
/* One row over the share: its label, then Stream sound, Pop out and Fullscreen; 8 px apart, 12 px in. */
.spot-overlay { position: absolute; z-index: 6; left: var(--sp-3); right: var(--sp-3); top: var(--sp-3); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); pointer-events: none; }
.spot-overlay > * { pointer-events: auto; }
.spot-label { min-width: 0; height: 32px; padding: 0 var(--sp-3) 0 6px; }
.spot-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-label .avatar { --av: 20px; width: 20px; height: 20px; font-size: 9px; }
.spot-label .d, .mchip .d { opacity: 0.86; font-weight: var(--fw-regular); }
.spot-actions { flex: none; display: flex; align-items: center; gap: var(--sp-2); }
.spot-actions .stream-sound { position: static; }
.spot-actions .stream-sound-btn { width: 32px; height: 32px; }
.mbtn, .spot-actions .mbtn { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--stage-glass-line); background: var(--stage-glass); color: var(--stage-video-text); display: grid; place-items: center; font-size: 13px; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mbtn:hover, .spot-actions .mbtn:hover { background: rgb(40 44 52 / 0.9); color: var(--stage-video-text); }
.mbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.spot-frame .spot-overlay { transition: opacity var(--dur-base) var(--ease); }
.spot-frame.idle .spot-overlay { opacity: 0; }
.spot-frame.idle .spot-overlay > * { pointer-events: none; }
/* The drawing tools sit bottom-left, clear of the share's label (in fullscreen: under it, clear of the people).
   Not drawing, there is no "Draw" label on the share: the bar's Draw starts it. */
.spot-frame .draw-tools { top: auto; bottom: var(--sp-3); left: var(--sp-3); }
.spot-frame .draw-tools > .dt-labelled:not(.dt-done) { display: none; }
.spot-frame .draw-tools:has(> .dt-labelled:not(.dt-done):only-child) { display: none; }
.voice-room.is-fs .spot-frame .draw-tools { top: 64px; bottom: auto; left: var(--sp-4); }
.voice-room.is-fs .spot-actions { display: none; }
/* The phone: the share full width, everyone in a grid of three under it. */
.voice-room[data-level='phone'] .theater-stage { justify-content: center; }
.voice-room[data-level='phone'] .film { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; overflow: visible; }
.voice-room[data-level='phone'] .film > .film-tile { width: auto; }
/* An emoji in a channel's name, at text size. */
:is(.voice-room, .voice-status, .call-pill, .voice-cta, .kp-floater) img:not(.av-img) { width: auto; height: 1.15em; vertical-align: -0.2em; }
.theater-split { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--split-cols, 2), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--stage-gap); }
.theater-split-cell { position: relative; padding: 0; border: 0; border-radius: var(--radius-md); overflow: hidden; background: #000; cursor: zoom-in; }
.theater-split-cell .theater-video { position: absolute; inset: 0; }
.theater-split-cell:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.film { flex: none; height: 112px; display: flex; gap: var(--stage-gap); justify-content: safe center; overflow-x: auto; scrollbar-width: none; }
.film-tile { flex: none; height: 112px; box-sizing: border-box; }
.film-cam { width: 199px; }
.film-tile.voice-puck { --puck: 56px; position: relative; width: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); padding: var(--sp-2);
  border-radius: var(--radius-lg); background: var(--stage-video-tile); border: 1px solid transparent; }
.film-tile.voice-puck .puck-name { font-size: var(--fs-sm); color: var(--stage-video-text); line-height: 16px; }
.film-more { width: 112px; display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--stage-video-tile); color: var(--stage-video-text); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }

/* ---------- The bar ---------- */
.voice-bar { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--stage-gap); margin: var(--stage-gap); }
.cb-side { min-width: 0; display: flex; }
.cb-left { grid-column: 1; justify-self: start; }
.cb-right { grid-column: 3; justify-self: end; overflow: hidden; }
.voice-bar > .vb-controls { grid-column: 2; grid-row: 1; }
.voice-bar > .cb-side { grid-row: 1; }
.vb-controls { display: inline-flex; align-items: center; gap: var(--ctl-gap); padding: var(--ctl-gap); border-radius: var(--radius-full); background: var(--bar-bg); border: 1px solid var(--ctl-line);
  box-shadow: var(--shadow-2); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); }
.cb-div { width: 1px; height: 24px; background: var(--ctl-line); flex: none; }
:is(.voice-bar, .kpf-ctrls, .kpf-bar) .vctrl { position: relative; flex: none; width: var(--ctl-size); height: var(--ctl-size); padding: 0; box-sizing: border-box; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer;
  background: var(--ctl-bg); color: var(--ctl-fg); border: 1px solid var(--ctl-line); border-top-color: var(--ctl-rim); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
:is(.voice-bar, .kpf-ctrls, .kpf-bar) .vctrl:hover { background: var(--ctl-bg-hover); color: var(--ctl-fg); border-color: var(--ctl-line); }
/* On is an inverse neutral fill; off (muted, deafened) a red tint; the raised hand yellow; Leave the only solid red. */
:is(.voice-bar, .kpf-ctrls, .kpf-bar) .vctrl.on { background: var(--ctl-on-bg); color: var(--ctl-on-fg); border-color: transparent; box-shadow: none; }
:is(.voice-bar, .kpf-ctrls, .kpf-bar) .vctrl.off { background: var(--ctl-off-bg); color: var(--ctl-off-fg); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
:is(.voice-bar, .kpf-ctrls, .kpf-bar) .vctrl.hand { background: var(--stage-hand); color: var(--ctl-hand-fg); border-color: transparent; }
:is(.voice-bar, .kpf-ctrls, .kpf-bar) .vctrl.leave { width: 56px; background: var(--danger-fill); color: var(--on-danger); border-color: transparent; }
:is(.voice-bar, .kpf-ctrls, .kpf-bar) .vctrl.leave:hover { background: color-mix(in srgb, var(--danger-fill) 88%, #fff); }
:is(.voice-bar, .kpf-ctrls, .kpf-bar) .vctrl:is(:disabled, [aria-disabled='true']) { opacity: 0.45; cursor: default; }
:is(.voice-bar, .kpf-ctrls, .kpf-bar) .vctrl:is(:disabled, [aria-disabled='true']):hover { background: var(--ctl-bg); }
:is(.voice-bar, .kpf-ctrls, .kpf-bar) :is(.vctrl, .vctrl-caret):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 1; }
/* In a split, each half rings its own shape, inside it (never cut square, never touching the other half). */
.voice-bar .split > :is(.vctrl, .vctrl-caret):focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
/* Split buttons, 68 × 44: the action and its ▾, each with its own hover, focus and label, a 1 px line between. */
.voice-bar .split { display: inline-flex; align-items: center; flex: none; height: var(--ctl-size); box-sizing: border-box; border-radius: var(--radius-full);
  background: var(--ctl-bg); color: var(--ctl-fg); border: 1px solid var(--ctl-line); border-top-color: var(--ctl-rim); }
.voice-bar .split > .vctrl.vctrl { width: calc(var(--ctl-size) - 2px); height: calc(var(--ctl-size) - 2px); background: transparent; color: inherit; border: 0; border-radius: var(--radius-full) 0 0 var(--radius-full); }
.voice-bar .split > .vctrl.vctrl:hover, .voice-bar .vctrl-caret:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.vctrl-caret { width: 24px; height: calc(var(--ctl-size) - 2px); padding: 0 4px 0 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: inherit; cursor: pointer;
  background: transparent; border: 0; border-left: 1px solid var(--ctl-line); border-radius: 0 var(--radius-full) var(--radius-full) 0; }
.vctrl-caret[aria-expanded='true'] { background: color-mix(in srgb, currentColor 12%, transparent); }
.voice-bar .split.off { background: var(--ctl-off-bg); color: var(--ctl-off-fg); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.voice-bar .split.off > .vctrl-caret { border-left-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.voice-bar .split.on { background: var(--ctl-on-bg); color: var(--ctl-on-fg); border-color: transparent; }
.voice-bar .split.on > .vctrl-caret { border-left-color: color-mix(in srgb, var(--ctl-on-fg) 25%, transparent); }
.voice-bar .split[aria-disabled='true'] { opacity: 0.45; }
.voice-bar .split[aria-disabled='true'] > * { cursor: default; }
.voice-bar .split > .vctrl.vctrl:is(:disabled, [aria-disabled='true']) { opacity: 1; }
/* Draw lights up once when a share starts. */
.voice-bar .vctrl.flash { animation: draw-flash 1.2s var(--ease) 1; }
@keyframes draw-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent); } }
/* The row's right end: what the bar can't say with an icon. */
.cb-status { display: inline-flex; align-items: center; gap: 6px; height: 28px; max-width: 100%; padding: 0 10px; box-sizing: border-box; border-radius: var(--radius-full);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
.cb-status.mic-locked-by, .cb-status.listen-only-label { color: var(--warning-text); background: color-mix(in srgb, var(--warning) 14%, var(--bg-2)); }
.on-video .cb-status.mic-locked-by, .on-video .cb-status.listen-only-label { color: #f0b232; background: var(--stage-glass); }
/* Narrow: the chip and the status go above the buttons, centred. */
.voice-bar[data-stack] { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.voice-bar[data-stack] > :is(.cb-side, .vb-controls) { grid-column: 1; grid-row: auto; justify-self: center; max-width: 100%; }
.voice-bar[data-stack] > .cb-side { order: -1; }
.voice-bar[data-stack] > .cb-side:empty { display: none; }
/* The phone: Mic, Camera, Audio output, More, Leave, 48 px, on a bar across the bottom. */
.voice-bar[data-level='phone'] { --ctl-size: 48px; margin: 0; padding: var(--stage-gap) var(--stage-gap) calc(var(--stage-gap) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface-head); }
.voice-bar[data-level='phone'] .vb-controls { padding: 0; gap: var(--stage-gap); border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.voice-bar[data-level='phone'] .vctrl { font-size: 18px; }

/* ---------- Popovers, menus, pickers ---------- */
.call-pop { position: fixed; z-index: var(--z-popover); box-sizing: border-box; width: 320px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-lg); background: var(--pop-bg); border: 1px solid var(--line); box-shadow: var(--shadow-3);
  color: var(--text); font-size: 13px; animation: pop-in 120ms var(--ease) both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(4px); } }
.call-pop h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }
.call-pop .sect { display: flex; flex-direction: column; gap: var(--sp-1); }
.call-menu { width: 280px; gap: var(--sp-1); padding: var(--sp-2); }
.call-menu-rows { display: flex; flex-direction: column; gap: var(--sp-1); }
.call-menu-group { display: contents; }
.call-sep { height: 1px; flex: none; background: var(--line); }
.call-menu .call-sep { margin: var(--sp-1) 0; }
.call-pop .opt { width: 100%; height: var(--control-md); flex: none; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2); box-sizing: border-box; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.call-pop .opt-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-pop .opt .lead { width: 16px; flex: none; text-align: center; color: var(--dim); }
.call-pop .opt .sub { color: var(--dim); }
.call-pop .opt :is(.chk, .keys) { margin-left: auto; }
.call-pop .opt .chk { color: var(--accent); }
.call-pop .opt:hover, .call-pop .opt:focus-visible { background: var(--hover); outline: none; }
.call-pop .opt:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.call-pop .opt.sel { background: color-mix(in srgb, var(--accent) 14%, var(--pop-bg)); }
.call-pop .opt[aria-disabled='true'] { color: var(--dim); cursor: default; }
.call-pop .opt[aria-disabled='true']:hover { background: transparent; }
.call-pop .opt.check { cursor: pointer; }
.call-pop .opt.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.call-pop .keys { display: inline-flex; gap: 3px; }
.call-pop kbd, .fs-exit kbd { font-family: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--dim); background: var(--bg-1); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--radius-sm); padding: 1px 5px; line-height: 1.3; }
.seg4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--radius-md); background: var(--bg-1); border: 1px solid var(--line); }
.seg4 button { height: var(--control-sm); border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--dim); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; }
.seg4 button.on { background: var(--pop-bg); color: var(--text); border-color: var(--line); box-shadow: var(--shadow-1); }
.seg4 button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.call-pop .linkrow { display: flex; align-items: center; justify-content: space-between; height: var(--control-sm); padding: 0 var(--sp-2); border: 0; border-radius: var(--radius-md); background: transparent;
  color: var(--text); font: inherit; font-size: 13px; font-weight: var(--fw-semibold); cursor: pointer; }
.call-pop .linkrow i { color: var(--accent); }
.call-pop .linkrow:hover { background: var(--hover); }
.cam-preview { width: 360px; }
.cam-preview-frame { position: relative; height: 189px; border-radius: var(--radius-md); overflow: hidden; background: var(--stage-video-bg); }
.cam-preview-frame video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); }
.cam-select { display: flex; align-items: center; gap: var(--sp-2); height: var(--control-md); padding: 0 var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.cam-select i { color: var(--dim); }
.cam-select select { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; }
.cam-preview-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.cbtn { height: var(--control-md); padding: 0 var(--sp-4); border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border: 1px solid var(--ctl-line); background: var(--ctl-bg); color: var(--text); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap; }
.cbtn:hover { background: var(--ctl-bg-hover); }
.cbtn.primary { background: var(--accent); color: var(--on-accent); border-color: color-mix(in srgb, var(--accent) 60%, var(--text)); }
.cbtn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
.cbtn.sm { height: var(--control-sm); padding: 0 var(--sp-3); font-size: 13px; }
.cbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Fullscreen: the share edge to edge, glass over it, fading after 2.5 s idle ---------- */
.voice-room.is-fs { background: var(--stage-video-base); }
.voice-room.is-fs > .call-head { display: none; }
.voice-room.is-fs > .call-stage { margin: 0; border-radius: 0; background: var(--stage-video-base); }
.voice-room.is-fs .theater-stage { padding: 0; }
.voice-room.is-fs .spot-frame { border-radius: 0; }
.voice-room.is-fs .film { display: none; }
.voice-room.is-fs > .call-stage::before, .voice-room.is-fs > .call-stage::after { content: ''; position: absolute; left: 0; right: 0; z-index: 5; pointer-events: none; transition: opacity var(--dur-base) var(--ease); }
.voice-room.is-fs > .call-stage::before { top: 0; height: 96px; background: linear-gradient(rgb(10 11 14 / 0.7), transparent); }
.voice-room.is-fs > .call-stage::after { bottom: 0; height: 96px; background: linear-gradient(transparent, rgb(10 11 14 / 0.8)); }
.voice-room.is-fs > .voice-bar { position: absolute; z-index: 7; left: 0; right: 0; bottom: var(--sp-5); margin: 0 var(--sp-5); transition: opacity var(--dur-base) var(--ease); }
.fs-exit { position: absolute; z-index: 7; top: var(--sp-4); right: var(--sp-4); height: 32px; padding: 0 var(--sp-2) 0 var(--sp-3); cursor: pointer; transition: opacity var(--dur-base) var(--ease); }
.fs-exit kbd { color: var(--stage-video-text); background: rgb(255 255 255 / 0.1); border-color: var(--stage-glass-line); }
.fs-roster { position: absolute; z-index: 7; left: var(--sp-5); bottom: calc(var(--sp-5) + 8px); height: 44px; padding: 0 var(--sp-3) 0 var(--sp-2); transition: opacity var(--dur-base) var(--ease); }
.fs-roster .avatar, .fs-speaking .avatar { --av: 28px; width: 28px; height: 28px; font-size: 12px; }
.fs-roster .avatar.speaking { box-shadow: 0 0 0 2px var(--stage-video-base), 0 0 0 4px var(--stage-speaking); }
.voice-room.is-fs .spot-overlay { left: var(--sp-4); top: var(--sp-4); right: auto; }
.voice-room.is-fs .spot-actions { display: none; }
.voice-room.fs-idle { cursor: none; }
.voice-room.fs-idle :is(.voice-bar, .fs-exit, .fs-roster, .spot-overlay, .draw-tools), .voice-room.fs-idle > .call-stage::before, .voice-room.fs-idle > .call-stage::after { opacity: 0; pointer-events: none; }
.fs-speaking { position: absolute; z-index: 7; left: var(--sp-4); top: var(--sp-4); height: 36px; padding: 0 var(--sp-3) 0 4px; }
.fs-muted { position: absolute; z-index: 7; right: var(--sp-4); top: var(--sp-4); height: 32px; padding: 0 var(--sp-3); }
.fs-muted i { color: #ff9b9d; }
.wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.wave i { width: 3px; height: 12px; border-radius: 1px; background: var(--stage-speaking); transform-origin: bottom; animation: wave 0.9s var(--ease-loop) infinite; }
.wave i:nth-child(2) { animation-delay: 0.15s; } .wave i:nth-child(3) { animation-delay: 0.3s; }
@keyframes wave { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .wave i { animation: none; transform: scaleY(0.7); } .vr-live i { animation: none; } }

/* ---------- The pop-out ---------- */
.kp-floater { position: fixed; z-index: var(--z-floater); overflow: hidden; border-radius: var(--radius-lg); background: var(--pop-bg); border: 1px solid var(--line); box-shadow: var(--shadow-3);
  -webkit-user-select: none; user-select: none; transition: left 240ms var(--ease), top 240ms var(--ease); }
.kp-floater.dragging { transition: none; box-shadow: var(--shadow-3), 0 0 0 2px var(--accent); }
.kpf-video { position: relative; background: var(--stage-video-bg); cursor: grab; touch-action: none; }
.kp-floater.dragging .kpf-video { cursor: grabbing; }
.kpf-video .theater-video { width: 100%; height: 100%; }
.kpf-title { position: absolute; left: var(--sp-2); top: var(--sp-2); height: 28px; padding: 0 var(--sp-3); max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; }
.kpf-resize { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; opacity: 0.6;
  background: linear-gradient(135deg, transparent 50%, var(--stage-video-text) 50%, var(--stage-video-text) 60%, transparent 60%, transparent 72%, var(--stage-video-text) 72%, var(--stage-video-text) 82%, transparent 82%); }
.kp-floater[data-corner$='r'] .kpf-resize { right: auto; left: 0; cursor: nesw-resize; transform: scaleX(-1); }
.kpf-bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); --ctl-size: var(--control-md); }
.kpf-bar .vctrl { font-size: 14px; }
.kpf-bar .vctrl.leave { width: 44px; }
.kpf-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px; margin: -4px; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; }
.kpf-who > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-semibold); }
.kpf-who .wave { flex: none; }
.kpf-who .avatar { --av: 22px; width: 22px; height: 22px; font-size: 10px; flex: none; box-shadow: 0 0 0 2px var(--pop-bg), 0 0 0 4px var(--stage-speaking); }
.kpf-who .dim { color: var(--dim); }
.kpf-ctrls { display: flex; gap: var(--sp-2); }
.pop-snap { position: fixed; z-index: calc(var(--z-floater) - 1); box-sizing: border-box; border: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: var(--radius-lg); pointer-events: none; }
.pop-snap.hot { border-style: solid; background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---------- The sidebar's call panel ---------- */
.voice-status { margin: var(--sp-2); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); border-radius: var(--radius-lg); background: var(--pop-bg); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.vs-top { display: flex; align-items: center; gap: var(--sp-2); min-height: 20px; }
.vs-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-1); padding: 0; border: 0; background: transparent; color: var(--dim); font: inherit; font-size: 13px; cursor: pointer; text-align: left; border-radius: var(--radius-sm); }
.vs-info:hover .vs-on { text-decoration: underline; text-underline-offset: 3px; }
.vs-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vs-on { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); font-weight: var(--fw-bold); font-size: 13px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-on .call-vc { color: var(--dim); opacity: 1; }
.vs-wave { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--success); }
.vs-wave.warn { background: var(--warning); animation: call-blink 1s var(--ease-loop) infinite alternate; }
.vs-wave.off { background: var(--offline); }
.vs-time { color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vs-people { display: flex; gap: 6px; align-items: center; height: auto; min-height: 28px; box-sizing: content-box; padding: 4px; margin: -4px; overflow: hidden; } /* room for the speaking ring */
.vs-people .avatar { --av: 28px; width: 28px; height: 28px; flex: none; font-size: 11px; transition: box-shadow 300ms var(--ease); }
.vs-people .avatar.speaking { box-shadow: 0 0 0 2px var(--pop-bg), 0 0 0 4px var(--stage-speaking); transition-duration: var(--dur-fast); }
:root[data-kp-call='reconnecting'] .vs-people .avatar { opacity: 0.5; filter: grayscale(0.7); }
.vs-more-people { color: var(--dim); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.vs-watch { display: flex; align-items: center; gap: var(--sp-2); height: var(--control-md); padding: 0 var(--sp-3); border: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 14%, var(--bg-2));
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; min-width: 0; }
.vs-watch > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-watch b { font-weight: var(--fw-semibold); }
.vs-watch .go { margin-left: auto; font-weight: var(--fw-bold); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.vs-watch:hover { background: color-mix(in srgb, var(--accent) 22%, var(--bg-2)); }
.vs-watch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vs-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.vs-bar > .vs-ctrls { flex: 5 1 0; min-width: 0; display: flex; gap: var(--sp-2); } /* five buttons beside Leave (1.3 of one) */
/* The one thing to do (Try now, Rejoin, Retry) on its own row (Voice & audio's .vs-choice is another thing). */
.voice-status .vs-bar > .vs-choice { flex: 1 1 100%; display: flex; gap: var(--sp-2); flex-direction: row; align-items: stretch; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.voice-status .vs-choice:has(+ .vs-hang) { flex-basis: 0; }
.voice-status .vs-act { flex: 1; height: var(--control-md); min-height: 0; margin: 0; padding: 0 var(--sp-3); box-sizing: border-box; border-radius: var(--radius-full); border: 1px solid var(--ctl-line); background: var(--ctl-bg); color: var(--text); font: inherit; font-size: 13px; font-weight: var(--fw-semibold); cursor: pointer; }
.voice-status .vs-act:hover:not(:disabled) { background: var(--ctl-bg-hover); }
.voice-status :is(.vs-btn, .vs-hang) { flex: 1 1 0; min-width: 0; height: var(--control-md); padding: 0; box-sizing: border-box; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer;
  background: var(--ctl-bg); color: var(--ctl-fg); border: 1px solid var(--ctl-line); border-top-color: var(--ctl-rim); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.voice-status .vs-btn:hover { background: var(--ctl-bg-hover); color: var(--ctl-fg); }
.voice-status .vs-btn.on { background: var(--ctl-on-bg); color: var(--ctl-on-fg); border-color: transparent; }
.voice-status .vs-btn.off { background: var(--ctl-off-bg); color: var(--ctl-off-fg); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.voice-status .vs-btn.hand { background: var(--stage-hand); color: var(--ctl-hand-fg); border-color: transparent; }
.voice-status .vs-btn:is(:disabled, [aria-disabled='true']) { opacity: 0.45; cursor: default; }
.voice-status .vs-hang { flex: 1.3 1 0; background: var(--danger-fill); color: var(--on-danger); border-color: transparent; }
.voice-status .vs-hang:hover { background: color-mix(in srgb, var(--danger-fill) 88%, #fff); color: var(--on-danger); }
.voice-status .vs-hang.vs-dismiss { flex: 0 0 var(--control-md); background: var(--ctl-bg); color: var(--dim); border: 1px solid var(--ctl-line); }
.voice-status .vs-hang.vs-dismiss:hover { background: var(--ctl-bg-hover); color: var(--text); }
.voice-status :is(.vs-btn, .vs-hang):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- The join panel: who's here, and Join voice ---------- */
.voice-cta, .app-shell .chat-pane > .voice-cta.voice-cta { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--pop-bg); box-shadow: var(--shadow-1); }
.voice-cta .vcta-people { display: inline-flex; flex: none; }
.voice-cta .vcta-people .avatar { --av: 28px; width: 28px; height: 28px; font-size: 11px; border: 2px solid var(--pop-bg); margin-left: -8px; }
.voice-cta .vcta-people .avatar:first-child { margin-left: 0; }
.voice-cta .vcta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.voice-cta .vcta-text span { color: var(--text); font-size: var(--fs-md); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-cta .btn-primary { margin-left: auto; flex: none; height: var(--control-md); padding: 0 var(--sp-4); border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--accent); color: var(--on-accent); border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--text)); box-shadow: none; font-weight: var(--fw-semibold); }
.voice-cta .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text)); color: var(--on-accent); }

/* ---------- The phone's call pill: the call, one tap away, on every screen ---------- */
.call-pill { position: relative; z-index: 6; flex: none; display: flex; align-items: center; gap: var(--sp-2); height: var(--control-touch); margin: var(--sp-3) var(--sp-3) 0; padding: 0 4px 0 var(--sp-3); box-sizing: border-box;
  border-radius: var(--radius-full); background: var(--pop-bg); border: 1px solid var(--line); box-shadow: var(--shadow-2); color: var(--text); font-size: var(--fs-md); }
.call-pill-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); height: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.call-pill-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-full); }
.call-pill .stack { display: inline-flex; flex: none; }
.call-pill .stack .avatar { --av: 22px; width: 22px; height: 22px; font-size: 9px; border: 2px solid var(--pop-bg); margin-left: -6px; }
.call-pill .stack .avatar:first-child { margin-left: 0; }
.call-pill .stack .avatar.speaking { box-shadow: 0 0 0 2px var(--stage-speaking); }
.call-pill .lbl { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.call-pill .lbl .d { color: var(--dim); font-weight: var(--fw-regular); }
.call-pill .lbl.warn { color: var(--warning-text); }
.call-pill .vs-btn, .call-pill .call-pill-go { flex: none; width: var(--control-md); height: var(--control-md); padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 14px; cursor: pointer;
  background: var(--ctl-bg); color: var(--ctl-fg); border: 1px solid var(--ctl-line); box-shadow: none; }
.call-pill .vs-btn.off { background: var(--ctl-off-bg); color: var(--ctl-off-fg); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.call-pill .call-pill-go { background: transparent; border-color: transparent; color: var(--dim); }

/* ---------- The sidebar panel's buttons: circles (30 px, Leave 47 × 30, 8 px apart); when six don't fit, 36 px
   circles and the rest in More (Chat.tsx) ---------- */
.voice-status:not(.round) .vs-bar > .vs-ctrls { flex: 0 0 auto; }
.voice-status:not(.round) :is(.vs-btn, .vs-hang:not(.vs-dismiss)) { flex: 0 0 auto; width: 30px; height: 30px; font-size: 13px; }
.voice-status:not(.round) .vs-hang:not(.vs-dismiss) { width: 47px; }
.voice-status:not(.round) .vs-bar { justify-content: center; }
.voice-status.round .vs-bar { justify-content: center; }
.voice-status.round .vs-bar > .vs-ctrls { flex: 0 0 auto; }
.voice-status.round :is(.vs-btn, .vs-hang:not(.vs-dismiss)) { flex: 0 0 auto; width: 36px; height: 36px; }
.voice-status.round .vs-hang:not(.vs-dismiss) { width: 47px; }

/* ---------- The phone: no keycaps (no keyboard) ---------- */
@media (max-width: 760px) { .call-pop .keys { display: none; } }

/* ---------- Touch screens: every target 44 px or more ---------- */
@media (pointer: coarse) {
  .voice-bar { --ctl-size: 48px; }
  .kpf-bar { --ctl-size: 44px; }
  .call-head { height: 64px; }
  .hbtn { width: var(--control-touch); height: var(--control-touch); }
  .call-head .q-btn { min-width: var(--control-touch); min-height: var(--control-touch); justify-content: center; }
  .call-pop .keys { display: none; }
  .call-pop :is(.opt, .linkrow), .seg4 button { min-height: var(--control-touch); height: auto; }
  :is(.cbtn, .vs-act, .tb-stream, .call-panel-actions button) { min-height: var(--control-touch); height: auto; }
  .voice-cta .btn-primary { min-height: var(--control-touch); }
  :is(.mbtn, .spot-actions .mbtn, .stream-sound-btn, .spot-actions .stream-sound-btn) { width: var(--control-touch); height: var(--control-touch); }
  .tile-live { min-height: var(--control-touch); }
  .voice-status :is(.vs-btn, .vs-hang) { min-height: var(--control-touch); }
  .voice-status.round :is(.vs-btn, .vs-hang:not(.vs-dismiss)) { width: var(--control-touch); height: var(--control-touch); }
  .voice-status.round .vs-hang:not(.vs-dismiss) { width: 57px; }
  .call-pill { height: 52px; }
  .call-pill .vs-btn, .call-pill .call-pill-go { width: var(--control-touch); height: var(--control-touch); }
  .voice-status .vs-info { min-height: var(--control-touch); }
  .voice-status .vs-act { min-height: var(--control-touch); }
  .voice-status .vs-hang.vs-dismiss { flex-basis: var(--control-touch); min-width: var(--control-touch); min-height: var(--control-touch); }
  .voice-status:not(.round) :is(.vs-btn, .vs-hang:not(.vs-dismiss)) { width: var(--control-touch); height: var(--control-touch); }
  .voice-status:not(.round) .vs-hang:not(.vs-dismiss) { width: 57px; }
  .voice-room .fs-exit { min-height: var(--control-touch); }
  .kpf-resize { width: var(--control-touch); height: var(--control-touch); background-size: 16px 16px; background-position: right bottom; background-repeat: no-repeat; }
}

/* ---------- Tooltips (CallTooltips.ts): one short label, its hotkey as keycaps ---------- */
.call-tip { position: fixed; z-index: var(--z-toast); display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 10px; border-radius: var(--radius-md);
  background: var(--pop-bg); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-2); font-size: 13px; font-weight: var(--fw-semibold); white-space: nowrap;
  pointer-events: none; animation: pop-in 120ms var(--ease) both; }
.call-tip .keys { display: inline-flex; gap: 3px; }
.call-tip kbd { font-family: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--dim); background: var(--bg-1); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--radius-sm); padding: 1px 5px; line-height: 1.3; }
/* Polls (PollCard.tsx in chat, PollForm.tsx to create one). The card sits in the message like an idea brief:
   a bordered surface, an 8:3 banner on top (the profile banner's shape), 16 px inside, 8 px between answers. */
.poll { width: min(520px, 100%); box-sizing: border-box; margin: var(--sp-1) 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-1); color: var(--text); white-space: normal; }
.poll-banner { aspect-ratio: 8 / 3; background-size: cover; background-position: center; background-repeat: no-repeat; border-bottom: 1px solid var(--line); }
.poll-body { display: flex; flex-direction: column; padding: var(--sp-4); }
.poll-kicker { display: flex; align-items: center; gap: var(--sp-2); color: var(--accent); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.poll-question { margin: var(--sp-2) 0 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.poll-hint { min-height: 1px; margin-top: var(--sp-2); color: var(--dim); font-size: var(--fs-sm); }
.poll-hint:empty { margin-top: 0; }
.poll-options { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
/* One answer: a row with the vote (mark, emoji, text) and, with results, who voted (faces and %). 12 px each side. */
.poll-option { position: relative; display: flex; align-items: stretch; min-height: 44px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-2); }
.poll-option:not(.results):hover, .poll-option:has(.poll-vote:not([aria-disabled]):hover) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.poll-option.chosen { border-color: var(--accent); }
.poll-bar { position: absolute; inset: 0 auto 0 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: color-mix(in srgb, var(--accent) 16%, transparent); transition: width var(--dur-base) var(--ease); }
.poll-option.chosen .poll-bar { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.poll-vote { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-3); background: none; color: var(--text); font: inherit; font-size: var(--fs-md); text-align: left; cursor: pointer; }
.poll-vote[aria-disabled] { cursor: default; }
.poll-vote:focus-visible, .poll-voters:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 70%, transparent); outline-offset: -2px; border-radius: var(--radius-md); }
.poll-mark { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid color-mix(in srgb, var(--text) 35%, transparent); border-radius: var(--radius-full); font-size: 10px; }
.poll-mark.square { border-radius: var(--radius-sm); }
.poll-option.chosen .poll-mark { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.poll-emoji { flex: none; width: 20px; text-align: center; font-size: var(--fs-lg); line-height: 1; filter: drop-shadow(0 0 1px color-mix(in srgb, var(--text) 45%, transparent)); }
.poll-text { min-width: 0; overflow-wrap: break-word; padding: var(--sp-2) 0; line-height: var(--lh-tight); }
.poll-option:is(.win, .leads) .poll-text { font-weight: var(--fw-bold); }
.poll-trophy { flex: none; margin-left: calc(-1 * var(--sp-1)); color: color-mix(in srgb, var(--yellow) 85%, var(--text)); font-size: var(--fs-sm); }
.poll-voters { position: relative; flex: none; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-3); background: none; color: var(--text); font: inherit; cursor: pointer; }
.poll-voters:disabled { cursor: default; }
.poll-voters:not(:disabled):hover .poll-pct { text-decoration: underline; text-underline-offset: 2px; }
.poll-faces { display: flex; align-items: center; }
.poll-faces .avatar { box-shadow: 0 0 0 2px var(--bg-2); }
.poll-faces .avatar + .avatar { margin-left: -4px; }
.poll-more { min-width: 20px; margin-left: var(--sp-1); color: var(--dim); font-size: var(--fs-xs); font-weight: var(--fw-semibold); } /* always there, so face columns line up */
.poll-pct { min-width: 32px; text-align: right; font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.poll-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); color: var(--dim); font-size: var(--fs-sm); }
.poll-actions { display: flex; align-items: center; gap: var(--sp-4); }
.poll-confirm { color: var(--text); }
.poll-link { padding: 0; background: none; color: var(--text); font: inherit; font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.poll-link:hover { color: var(--accent); }
.poll-link.danger { color: var(--danger); }
.poll-link.quiet { color: var(--dim); font-weight: var(--fw-regular); }
/* A finger: 44 px tall targets. */
@media (pointer: coarse) { .poll-link { min-height: var(--control-touch); } .poll-foot { row-gap: 0; } }
/* Who voted for an answer (tap its faces or %). */
.poll-pop { min-width: 200px; max-width: 280px; padding: var(--sp-2); }
.poll-pop-head { padding: var(--sp-1) var(--sp-2); color: var(--dim); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.poll-pop-list { max-height: 260px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.poll-pop-list li { display: flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: 0 var(--sp-2); border-radius: var(--radius-md); font-size: var(--fs-md); }
.poll-pop-list small { color: var(--dim); }
/* On a phone the list is a sheet at the bottom of the screen (at most 60% of it), with a close button. */
.poll-scrim { position: fixed; inset: 0; z-index: var(--z-scrim); display: flex; align-items: flex-end; background: rgb(0 0 0 / 0.5); }
.poll-sheet { position: relative; width: 100%; max-height: 60dvh; overflow-y: auto; box-sizing: border-box; padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--bg-2); color: var(--text); }
.poll-sheet .poll-pop-head { min-height: var(--control-touch); display: flex; align-items: center; padding-right: 52px; }
.poll-sheet .poll-pop-list { max-height: none; }
.poll-sheet .poll-pop-list li { min-height: var(--control-touch); }
.poll-pop-close { position: absolute; top: var(--sp-2); right: var(--sp-2); display: grid; place-items: center; width: var(--control-touch); height: var(--control-touch); border-radius: var(--radius-md); background: none; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .poll-bar { transition: none; } }
/* A narrow card (a phone): the answer keeps its room; the % opens who voted. */
.poll { container-type: inline-size; }
@container (max-width: 420px) { .poll-faces { display: none; } }

/* The form. */
.modal.poll-form { max-width: 520px; }
.poll-form .modal-body { display: flex; flex-direction: column; gap: var(--sp-4); }
.poll-form-banner { position: relative; display: grid; place-items: center; aspect-ratio: 8 / 2; border: 1px dashed color-mix(in srgb, var(--text) 25%, transparent); border-radius: var(--radius-md);
  background: var(--bg-1) no-repeat center / cover; }
.poll-form-banner.set { aspect-ratio: 8 / 3; border-style: solid; border-color: var(--line); place-items: end; }
.poll-banner-add, .poll-banner-tools { display: flex; gap: var(--sp-2); }
.poll-banner-tools { margin: var(--sp-2); }
.poll-banner-add button, .poll-banner-tools button { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--control-sm); padding: 0 var(--sp-3); border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--bg-3); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.poll-banner-tools button { background: rgb(0 0 0 / 0.6); color: #fff; }
.poll-banner-add button:hover { background: var(--hover); }
.poll-banner-busy { position: absolute; left: var(--sp-2); top: var(--sp-2); display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); background: rgb(0 0 0 / 0.6); color: #fff; font-size: var(--fs-xs); }
.poll-field { display: flex; flex-direction: column; gap: var(--sp-2); color: var(--dim); font-size: var(--fs-sm); }
.poll-field.inline { flex-direction: row; align-items: center; gap: var(--sp-3); }
.poll-field > input, .poll-answer input { height: var(--control-md); padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-1); color: var(--text); font: inherit; font-size: var(--fs-md); }
.poll-field > input:focus, .poll-answer input:focus { outline: none; border-color: var(--accent); }
.poll-answers { display: flex; flex-direction: column; gap: var(--sp-2); }
.poll-answer { display: flex; align-items: center; gap: var(--sp-2); }
.poll-answer input { flex: 1; min-width: 0; }
.poll-answer-emoji, .poll-answer-x { flex: none; display: grid; place-items: center; width: var(--control-md); height: var(--control-md); border-radius: var(--radius-md); background: var(--bg-1); color: var(--dim); font-size: var(--fs-lg); border: 1px solid var(--line); }
.poll-answer-x { border-color: transparent; background: transparent; font-size: var(--fs-md); }
.poll-answer-emoji:hover, .poll-answer-x:hover { color: var(--text); background: var(--hover); }
.poll-add { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--control-sm); padding: 0 var(--sp-2); border-radius: var(--radius-md); background: none; color: var(--accent); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.poll-add:hover { background: var(--hover); }
.poll-settings { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.poll-check { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text); font-size: var(--fs-sm); cursor: pointer; }
.poll-error { margin: 0; color: var(--danger); font-size: var(--fs-sm); }
.modal.poll-form .wiz-foot { margin: 0; padding: var(--sp-4) 22px; border-top: 1px solid var(--line); }
.poll-form-actions { display: flex; gap: var(--sp-2); }
/* The composer's Poll button sits with the text tools; on a phone it's a row in the + menu instead. */
@media (max-width: 760px) { .composer-tools > .composer-poll { display: none; } }
/* Whiteboards with the reaction bar turned off (wbPrefs.ts): the bar over a selected element is hidden; reactions
   already on the board still show. The bar is the reaction layer's child placed above the element. Its display
   is an inline style, so only !important can hide it from here. */
html[data-wb-reactions-off] .wb-react-layer > div[style*="calc(-100% - 10px)"] { display: none !important; }
/* Share menu: what to share and how. */
.share-menu {
  position: fixed; z-index: 1000; width: 300px; display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border-radius: 16px; background: var(--bg-1); border: 1px solid var(--line); color: var(--text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); animation: share-menu-in 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes share-menu-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
.share-menu-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); padding: 0 4px; }
.share-option {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 11px; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--text);
}
.share-option:hover, .share-option:focus-visible { background: var(--hover); border-color: var(--line); outline: none; }
.share-option i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; font-size: 15px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.share-option span { display: flex; flex-direction: column; gap: 2px; text-wrap: pretty; }
.share-option b { font-size: 13px; }
.share-option small { font-size: 11.5px; color: var(--dim); }

/* Browser region picker: the captured screen fills the window. */
.region-full { position: fixed; inset: 0; z-index: 1000; background: #0a0a0e; cursor: crosshair; touch-action: none; user-select: none; }
.region-full video { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); object-fit: contain; pointer-events: none; }
.region-shade { position: absolute; background: rgba(8, 8, 12, 0.5); pointer-events: none; }
.region-box { position: absolute; outline: 2px solid var(--accent); box-shadow: 0 0 0 100vmax rgba(8, 8, 12, 0.55); cursor: move; }
.region-handle { position: absolute; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.region-handle.is-nw { left: 0; top: 0; cursor: nwse-resize; } .region-handle.is-ne { left: 100%; top: 0; cursor: nesw-resize; }
.region-handle.is-sw { left: 0; top: 100%; cursor: nesw-resize; } .region-handle.is-se { left: 100%; top: 100%; cursor: nwse-resize; }
.region-full.dragging .region-handle { display: none; }
.region-size {
  position: absolute; left: 0; bottom: 100%; margin-bottom: 6px; padding: 4px 8px; border-radius: 7px; white-space: nowrap;
  background: var(--accent); color: #1a0f0a; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none;
}
.region-guide, .region-actions {
  position: absolute; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; color: #fff;
  background: rgba(22, 20, 28, 0.92); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.region-guide { top: 24px; left: 50%; transform: translateX(-50%); pointer-events: none; font-size: 13px; }
.region-actions { padding: 8px; cursor: default; }
.region-guide kbd, .region-actions kbd { font: 600 11px/1 system-ui, sans-serif; padding: 3px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.14); }
@media (prefers-reduced-motion: reduce) { .share-menu { animation: none; } }
/* Phones turn every blur off (responsive.css): the menu is a solid surface, there at once (no fade-in over the bar). */
@media (max-width: 760px) { .share-menu { animation: none; opacity: 1; background: var(--bg-1); box-shadow: var(--shadow-3); } }
/* The sharing chip (voice/ShareChip.tsx): one pill at the left end of the bar's row, outside the
   centred buttons, so a share starting moves nothing. "● Sharing · Sharp text ^ | Sound | ■ Stop". */
.share-chip { position: relative; display: inline-flex; align-items: center; height: var(--control-md); padding: 0 var(--sp-1); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-2)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text); white-space: nowrap; }
.on-video .share-chip { background: var(--stage-glass); border-color: var(--stage-glass-line); color: var(--stage-video-text); }
.share-chip-mode, .share-chip-sound, .share-chip-stopbtn {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: calc(var(--control-md) - 2px); padding: 0 var(--sp-2); border: 0; border-radius: var(--radius-full);
  background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.share-chip-mode b { font-weight: var(--fw-semibold); }
.share-chip-kind { opacity: 0.86; }
.share-chip-mode:disabled { opacity: 0.6; cursor: progress; }
.share-chip-mode > .fa-chevron-up { font-size: 10px; }
.share-chip-sound, .share-chip-stopbtn { border-left: 1px solid var(--ctl-line); border-radius: 0 var(--radius-full) var(--radius-full) 0; }
.share-chip-sound { border-radius: 0; }
.share-chip-stopbtn { font-weight: var(--fw-semibold); }
.share-chip-stopbtn .fa-stop { color: var(--danger); font-size: 11px; }
.on-video .share-chip-stopbtn .fa-stop { color: #ff6b6e; }
.share-chip-stopbtn .share-chip-live { display: none; }
.share-chip-mode:hover:not(:disabled), .share-chip-sound:hover, .share-chip-stopbtn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.share-chip-sound[aria-pressed='false'] { opacity: 0.75; }
.share-chip button:focus-visible, .share-chip-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.share-chip-live { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); flex: none; }
.share-chip-menu {
  position: fixed; z-index: var(--z-popover); width: 280px; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2);
  border-radius: var(--radius-lg); background: var(--pop-bg); border: 1px solid var(--line); box-shadow: var(--shadow-3);
  overflow-y: auto; overscroll-behavior: contain; /* capped to the room on screen (ShareChip.tsx placeAbove) */
}
.share-chip-rows, .share-chip-extra { display: flex; flex-direction: column; gap: var(--sp-1); }
.share-chip-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); height: var(--control-md); padding: 0 var(--sp-2); border-radius: var(--radius-md); cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--text); font-size: 13px; font-weight: var(--fw-semibold); text-align: left;
}
.share-chip-row small { color: var(--dim); font-size: var(--fs-xs); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
.share-chip-row:hover { background: var(--hover); }
.share-chip-row[aria-checked='true'] { background: color-mix(in srgb, var(--accent) 14%, var(--pop-bg)); }
.share-chip-row i { width: 16px; margin-right: var(--sp-2); text-align: center; }
.share-chip-stop { color: var(--danger-text); }
.share-chip-note {
  position: fixed; z-index: var(--z-popover); width: max-content; max-width: min(320px, calc(100vw - 24px));
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-lg);
  background: var(--pop-bg); border: 1px solid var(--line); box-shadow: var(--shadow-3); color: var(--text); font-size: 13px; text-wrap: pretty;
}
.share-chip-note button { flex: none; border: 0; background: transparent; color: var(--accent); font-weight: var(--fw-bold); cursor: pointer; padding: 0; min-height: 24px; }
/* The minimised call has no bar: the note sits at the bottom right. */
.share-note-float { right: 16px; bottom: 16px; }

/* Wide: the list holds the modes only (the chip has Sound and Stop). */
.share-chip-menu .share-chip-extra { display: flex; padding-top: var(--sp-1); border-top: 1px solid var(--line); }
.share-chip-menu:not(.narrow) .share-chip-stop { display: none; } /* the chip has its own Stop */
.share-chip-menu:not(.narrow) .share-chip-extra:not(:has(.share-chip-row:not(.share-chip-stop))) { display: none; }
/* A call under 900 px: a red dot and Stop; the Share caret opens the list, now with Sound and Stop sharing. */
.share-chip.narrow :is(.share-chip-mode, .share-chip-sound) { display: none; }
.share-chip.narrow .share-chip-stopbtn { border-left: 0; border-radius: var(--radius-full); }
.share-chip.narrow .share-chip-stopbtn .share-chip-live { display: inline-block; }
.share-chip.narrow .share-chip-stopbtn .fa-stop { display: none; }
/* Touch: 44 px targets. */
@media (pointer: coarse) {
  .share-chip { height: 46px; }
  .share-chip-mode, .share-chip-stopbtn { min-height: 44px; min-width: 44px; }
  .share-chip-row { min-height: 44px; }
  .share-chip-note button { min-height: 44px; min-width: 44px; }
}
/* Stream sound (voice/StreamSoundControls.tsx): on the share tile and in the theater. The tile is a
   frame whose Watch button covers it (voice/Stage.tsx, ShareTile). */
.vr-share .vr-share-hit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.vr-share:has(.vr-share-hit:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.vr-share:has(.vr-share-hit:focus-visible) .vr-share-watch { opacity: 1; transform: translate(-50%, -50%); }
.vr-share .vr-live, .vr-share .vr-label, .vr-share .vr-share-watch { pointer-events: none; z-index: 2; }
.vr-share-mode { color: color-mix(in srgb, var(--on-media) 70%, transparent); font-size: var(--fs-xs); font-weight: 400; }
/* On the theater bar (themed, light in light themes) the mode is dim text, not text on video. */
.tb-title .vr-share-mode { color: var(--dim); }
.stream-sound-btn {
  position: relative; z-index: 3; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-full);
  background: var(--media-chip); color: var(--on-media); font-size: var(--fs-sm); cursor: pointer;
}
.stream-sound-btn:hover { background: var(--media-chip-hover); }
.stream-sound-btn[aria-pressed='false'] { color: color-mix(in srgb, var(--on-media) 60%, transparent); }
.stream-sound-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vr-share > .stream-sound-btn { position: absolute; top: 8px; right: 8px; }
.stream-sound { position: absolute; top: 10px; right: 52px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 2px 8px 2px 2px; border-radius: var(--radius-full); background: var(--media-chip); }
.stream-sound input[type='range'] { width: 96px; accent-color: var(--accent); }
/* The call statistics popover (voice/StatsOverlay.tsx). */
.kp-stats {
  position: fixed; z-index: var(--z-popover); width: max-content; min-width: 280px; max-width: min(860px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; overflow-x: hidden;
  padding: 12px; border-radius: var(--radius-lg); background: var(--bg-1); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-3);
  font-size: var(--fs-sm); font-weight: 400; line-height: 1.45;
}
.kp-stats-head { display: flex; align-items: center; gap: 12px; margin: -4px -4px 4px; padding: 4px; cursor: grab; user-select: none; touch-action: none; }
.kp-stats-head:active { cursor: grabbing; }
.kp-stats-head b { flex: 1; font-weight: 700; }
.kp-stats-close { border: 0; background: transparent; color: var(--dim); cursor: pointer; padding: 4px; border-radius: var(--radius-md); }
.kp-stats-close:hover { color: var(--text); background: var(--hover); }
.kp-stats-sum { margin: 0 0 8px; }
.kp-stats-sum b { font-weight: 700; }
.kp-stats-plain { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 4px; }
.kp-stats .tone-good b, .kp-stats td.tone-good { color: var(--success); }
.kp-stats .tone-warn, .kp-stats td.tone-warn { color: var(--warning); }
.kp-stats .tone-bad, .kp-stats td.tone-bad { color: var(--danger); }
.kp-stats-actions { display: flex; align-items: center; gap: 8px; }
.kp-stats-actions small { margin-left: auto; color: var(--dim); font-size: var(--fs-xs); }
.kp-stats-btn { padding: 4px 12px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.kp-stats-btn[aria-expanded='true'] { border-color: var(--accent); }
/* The table scrolls sideways on its own on a narrow window; the header and summary stay put. */
.kp-stats-scroll { margin-top: 12px; overflow-x: auto; max-width: 100%; }
.kp-stats-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kp-stats table { border-collapse: collapse; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.kp-stats th { text-align: left; color: var(--dim); font-weight: 600; border-bottom: 1px solid var(--line); }
.kp-stats th, .kp-stats td { padding: 4px 8px; white-space: nowrap; }
.kp-stats .num { text-align: right; }
/* A phone-wide popover (it's sized on the window, max 100vw - 24 px): one card per track, "label  value"
   rows, nothing past the padding and nothing to scroll sideways. The hotkey goes under the buttons when it must. */
@media (max-width: 480px) {
  .kp-stats-actions { flex-wrap: wrap; }
  .kp-stats-scroll { overflow-x: visible; }
  .kp-stats table, .kp-stats tbody, .kp-stats tr, .kp-stats td { display: block; width: 100%; }
  .kp-stats thead { display: none; }
  .kp-stats tbody { display: grid; gap: 8px; }
  .kp-stats tbody tr, .kp-stats tbody tr:nth-child(odd) { padding: 8px; border-radius: var(--radius-md); background: var(--bg-2); }
  .kp-stats td:first-child { font-weight: 700; padding: 0 0 4px; white-space: normal; }
  .kp-stats td[data-label] { padding: 2px 0; text-align: right; white-space: normal; }
  .kp-stats td[data-label]::before { content: attr(data-label); float: left; margin-right: 12px; color: var(--dim); font-weight: 600; white-space: nowrap; }
  .kp-stats td.empty { display: none; } /* a card shows what the track has */
}
.kp-stats tbody tr:nth-child(odd) { background: var(--bg-2); }
.kp-stats .kp-stats-on { font-weight: 700; color: var(--text); }
.kp-stats-foot { display: block; margin-top: 8px; color: var(--dim); font-size: var(--fs-xs); }
/* The connection dot in the call bar opens it (voice/CallControls.tsx): a 25 px target around the 9 px dot. */
.q-btn { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; margin: -8px; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; cursor: pointer; }
.q-btn:hover { background: var(--hover); }
.q-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
/* The call next to a tool (ToolCallPanel.tsx): docked on the right of .main, which narrows by its width
   (--call-panel-w). One 12 px gutter inside; 36 px controls; speaking is a 2 px ring and the name in bold. */
.main.has-call-panel { padding-right: var(--call-panel-w, 289px); }
.tcp { position: absolute; top: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: flex; flex-direction: column; min-height: 0;
  background: var(--bg-1); border-left: 1px solid var(--line); color: var(--text);
  -webkit-user-select: none; user-select: none; } /* like the call itself (call.css): nothing here is text to copy */
.tcp-resize { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: ew-resize; }
.tcp-dot { flex: none; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--online); }
.tcp-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tcp-ib { flex: none; display: grid; place-items: center; width: var(--control-md); height: var(--control-md); border-radius: var(--radius-md); background: transparent; color: var(--dim); font-size: var(--fs-md); }
.tcp-ib:hover { background: var(--hover); color: var(--text); }

.tcp-head { flex: none; display: flex; align-items: center; gap: var(--sp-2); height: 68px; padding: 0 var(--sp-2) 0 var(--sp-3); border-bottom: 1px solid var(--line); }
.tcp-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: var(--lh-tight); }
.tcp-title b { font-size: var(--fs-md); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcp-title small { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tcp-q { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.tcp-q i { width: 3px; border-radius: 1px; background: var(--online); }
.tcp-q i:nth-child(1) { height: 4px; } .tcp-q i:nth-child(2) { height: 6px; } .tcp-q i:nth-child(3) { height: 8px; } .tcp-q i:nth-child(4) { height: 10px; }
.tcp-q.q-good i:nth-child(4), .tcp-q.q-poor i:nth-child(n+3), :is(.tcp-q.q-lost, .tcp-q.q-reconnecting) i:nth-child(n+2) { background: var(--line); }

.tcp-share { flex: none; padding: var(--sp-3); border-bottom: 1px solid var(--line); }
.tcp-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border-radius: var(--radius-md); background: #000; cursor: pointer; }
.tcp-thumb video { width: 100%; height: 100%; object-fit: contain; }
.tcp-cap { display: flex; align-items: center; gap: var(--sp-2); height: var(--control-md); margin-top: var(--sp-2); font-size: 13px; font-weight: var(--fw-semibold); }
.tcp-cap .fa-display { width: 16px; text-align: center; color: var(--accent); }
.tcp-cap span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcp-cap .tcp-ib { margin-right: -4px; } /* the button 8 px from the edge */
.tcp-more-shares { flex: none; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); color: var(--dim); font-size: var(--fs-sm); }

.tcp-people { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-2) var(--sp-1); }
.tcp-row { display: flex; align-items: center; gap: var(--sp-3); height: 40px; padding: 0 var(--sp-1) 0 var(--sp-2); border-radius: var(--radius-md); }
.tcp-row:hover, .tcp-row:focus-within { background: var(--hover); }
.tcp-row .avatar, .tcp-face .avatar { flex: none; transition: box-shadow var(--dur-fast) var(--ease); }
.tcp-row .avatar.speaking, .tcp-face.speaking .avatar { box-shadow: 0 0 0 2px var(--online); }
.tcp-name { flex: 1; min-width: 0; font-size: 13px; color: color-mix(in srgb, var(--text) 82%, var(--dim)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcp-name.speaking { color: var(--text); font-weight: var(--fw-bold); }
.tcp-name small { color: var(--dim); font-weight: var(--fw-regular); }
.tcp-state { display: flex; gap: var(--sp-2); font-size: 13px; }
.tcp-state .hand { color: var(--yellow); } .tcp-state .sharing { color: var(--accent); } .tcp-state .muted { color: var(--danger); }
/* Faded out, not hidden: it keeps its place (icons never shift) and the keyboard still reaches it. */
.tcp-row-more { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: transparent; color: var(--dim); opacity: 0; }
.tcp-row:hover .tcp-row-more, .tcp-row:focus-within .tcp-row-more, .tcp-row-more:focus-visible { opacity: 1; }
.tcp-row-more:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 70%, transparent); outline-offset: -2px; }

.tcp-ctrls { flex: none; display: flex; justify-content: center; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--line); }
/* The six fit any panel width: 36 px each (Leave 44) at 289 px, shrinking evenly to 28 px when narrower. */
.tcp-btn { flex: 0 1 var(--control-md); min-width: 28px; display: grid; place-items: center; height: var(--control-md); border-radius: var(--radius-md); background: var(--bg-3); color: var(--text); font-size: var(--fs-md); }
.tcp-btn:hover:not(:disabled) { background: var(--hover); }
.tcp-btn.off { background: color-mix(in srgb, var(--danger) 18%, var(--bg-3)); color: var(--danger); }
.tcp-btn.on { background: color-mix(in srgb, var(--accent) 22%, var(--bg-3)); }
.tcp-btn.leave { flex-basis: 44px; background: var(--danger); color: #fff; }

/* Collapsed: a 64 px column. */
.tcp.slim { width: 64px; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; }
.tcp.slim .tcp-btn { flex: none; width: var(--control-md); }
.tcp-tile { flex: none; display: grid; place-items: center; width: 44px; height: 25px; border-radius: var(--radius-sm); background: var(--bg-3); color: var(--accent); box-shadow: 0 0 0 2px var(--accent); font-size: var(--fs-sm); }
.tcp-faces { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: 4px 0; scrollbar-width: none; }
.tcp-face { position: relative; flex: none; padding: 0; border-radius: var(--radius-full); background: transparent; }
.tcp-face:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 70%, transparent); outline-offset: 3px; }
.tcp-badge { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: var(--radius-full); box-shadow: 0 0 0 2px var(--bg-1); font-size: 10px; color: #fff; }
.tcp-badge.muted { background: var(--danger); } .tcp-badge.hand { background: var(--yellow); color: #2a1c25; } .tcp-badge.sharing { background: var(--accent); color: var(--on-accent); }
.tcp-sep { flex: none; width: 32px; height: 1px; background: var(--line); }
@media (prefers-reduced-motion: reduce) { .tcp-row .avatar, .tcp-face .avatar { transition: none; } }
.kp-document-tabs { display:flex; flex:none; align-items:center; gap:6px; min-width:0; height:46px; padding:0 10px; background:var(--bg-1); border-bottom:1px solid var(--line); color:var(--text); user-select:none; }
.kp-document-tabs button { font:inherit; color:inherit; border:0; cursor:pointer; }
.kp-document-tabs button:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.kp-document-home,.kp-document-scroll,.kp-document-options { display:grid; place-items:center; width:32px; height:32px; flex:none; padding:0; border-radius:6px; background:transparent; color:var(--dim)!important; transition:color .14s; }
.kp-document-home:hover,.kp-document-scroll:hover,.kp-document-options:hover { color:var(--text)!important; }
.kp-document-home[aria-pressed=true] { color:var(--accent)!important; }
.kp-document-tabstrip { display:flex; align-self:stretch; gap:0; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; position:relative; }
.kp-document-tabstrip::-webkit-scrollbar { display:none; }
.kp-document-tab { position:relative; display:flex; align-items:center; flex:0 0 196px; min-width:0; overflow:hidden; border:0; border-radius:0; background:transparent; color:var(--dim); animation:kp-tab-enter .18s cubic-bezier(.2,.8,.2,1); transition:color .14s,flex-basis .14s,opacity .14s; }
/* Fine separators and a restrained tint keep selection clear on one shared surface. */
.kp-document-tab:not(:last-child)::before { content:''; position:absolute; right:0; top:calc(50% - 8px); width:1px; height:16px; background:var(--line); opacity:.65; pointer-events:none; }
.kp-document-tab::after { content:''; position:absolute; left:14px; right:14px; bottom:0; height:2px; border-radius:2px 2px 0 0; background:var(--accent); opacity:0; transform:scaleX(.75); transition:opacity .14s,transform .18s; pointer-events:none; }
.kp-document-tab:hover,.kp-document-tab:focus-within,.kp-document-tab.is-active { color:var(--text); }
.kp-document-tab.is-active { background:color-mix(in srgb,var(--accent) 6%,transparent); }
.kp-document-tab.is-active::after { opacity:1; transform:scaleX(1); }
.kp-document-tab.is-closing { flex-basis:0; opacity:0; pointer-events:none; }
.kp-document-tab-label { display:flex; align-items:center; gap:10px; flex:1; min-width:0; height:100%; padding:0 8px 0 16px; background:transparent; text-align:left; font-size:13px!important; font-weight:400!important; line-height:1.3; }
.kp-document-tab.is-active .kp-document-tab-label { font-weight:600!important; }
.kp-document-tab-label>i { flex:none; width:14px; text-align:center; font-size:12px; opacity:.7; }
.kp-document-tab.is-active .kp-document-tab-label>i { color:var(--accent); opacity:1; }
.kp-document-tab-label>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kp-document-close { flex:none; width:24px; height:24px; margin-right:10px; padding:0; display:grid; place-items:center; border-radius:5px; background:transparent; opacity:.4; font-size:11px!important; transition:background .12s,opacity .12s; }
.kp-document-tab.is-active .kp-document-close { opacity:.7; }
.kp-document-tab:hover .kp-document-close,.kp-document-tab:focus-within .kp-document-close { opacity:1; }
.kp-document-close:hover { background:color-mix(in srgb,var(--text) 9%,transparent); }
.kp-document-close:disabled { opacity:.3; cursor:wait; }
.kp-document-tab.drop-before { box-shadow:inset 3px 0 var(--accent); }
.kp-document-tab.drop-after { box-shadow:inset -3px 0 var(--accent); }
.kp-document-no-tabs { align-self:center; color:var(--dim); font-size:12px; padding:0 8px; }
.kp-document-panel { display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; }
.kp-document-panel[hidden] { display:none!important; }
.kp-document-workspace { display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; }
.kp-document-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.kp-document-tab-menu { min-width:245px; }
.kp-document-tab-menu .ctx-item { transition:background .12s,color .12s; animation:kp-tab-option .15s ease-out both; }
.kp-document-tab-menu .ctx-item:nth-child(2) { animation-delay:15ms; }.kp-document-tab-menu .ctx-item:nth-child(3) { animation-delay:25ms; }.kp-document-tab-menu .ctx-item:nth-child(n+4) { animation-delay:35ms; }
.kp-document-tab-menu.exiting .ctx-item { animation:none; }
@keyframes kp-tab-enter { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes kp-tab-option { from { opacity:0; translate:0 3px; } to { opacity:1; translate:0 0; } }
@media(max-width:600px) { .kp-document-tabs { padding-inline:5px; gap:2px; } .kp-document-tab { flex-basis:166px; } .kp-document-tab-label { padding-left:12px; gap:8px; } .kp-document-tab::after { left:10px; right:10px; } .kp-document-close { opacity:1; width:28px; height:28px; margin-right:5px; } }
@media(pointer:coarse) { .kp-document-tabs { height:48px; } .kp-document-home,.kp-document-scroll,.kp-document-options { width:36px; height:44px; } .kp-document-close { width:32px; height:44px; opacity:1; } }
@media(forced-colors:active) { .kp-document-tab.is-active::after { background:Highlight; forced-color-adjust:none; } .kp-document-tabs button:focus-visible { outline-color:Highlight; } }
@media(prefers-reduced-motion:reduce) { .kp-document-tabs *,.kp-document-tabs *::after,.kp-document-tabs *::before,.kp-document-tab-menu .ctx-item { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
/* Shared library presentation. Opt-in classes keep Currents' current UI intact. */
.kp-library-host,.kp-library-launcher { display:flex; flex:1; min-width:0; min-height:0; flex-direction:column; }
.kp-library-launcher[hidden] { display:none; }
.kp-library { --library-ease:cubic-bezier(.2,.8,.2,1); display:flex; flex:1; min-height:0; min-width:0; position:relative; isolation:isolate; background:var(--bg-2); color:var(--text); user-select:none; }
.kp-library *, .kp-library *::before,.kp-library *::after { box-sizing:border-box; }
.kp-library button { font:inherit; cursor:pointer; color:inherit; }
.kp-library input { user-select:text; }
.kp-library button:focus-visible,.kp-library input:focus-visible,.kp-library-star:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.kp-library-nav { flex:0 0 208px; min-width:0; padding:26px 12px; overflow:auto; border-right:1px solid var(--line); background:var(--bg-1); }
.kp-library-nav-title { padding:0 10px 22px; color:var(--dim); font-size:12px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; justify-content:space-between; }
.kp-library-nav-item { display:flex; width:100%; min-width:0; align-items:center; gap:10px; padding:10px; border:0; border-radius:8px; background:transparent; text-align:left; font-size:13px!important; transition:background .18s,color .18s; }
.kp-library-nav-item:hover { background:var(--hover); }
.kp-library-nav-item[aria-current=page] { background:color-mix(in srgb,var(--accent) 16%,var(--bg-1)); color:var(--accent); }
.kp-library-nav-item>i { width:16px; flex:none; text-align:center; }
.kp-library-nav-item>span:not(.kp-library-count) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kp-library-count { margin-left:auto; color:var(--dim); font-size:12px; }
.kp-library-nav-section { margin:30px 10px 9px; font-size:11px; font-weight:650; letter-spacing:.08em; color:var(--dim); text-transform:uppercase; }
.kp-library-department { display:flex; align-items:center; }
.kp-library-department>.kp-library-nav-item { flex:1; }
.kp-library-dept-expand { width:28px; height:32px; flex:none; border:0; background:transparent; border-radius:6px; color:var(--dim)!important; font-size:10px!important; }
.kp-library-dept-expand:hover { background:var(--hover); }
.kp-library-manage { display:flex; gap:8px; align-items:center; margin-top:24px; padding:10px; border:0; background:transparent; color:var(--dim)!important; font-size:12px!important; text-align:left; }
.kp-library-main { min-width:0; flex:1; display:flex; flex-direction:column; }
.kp-library-header { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:26px 28px 18px; flex-wrap:wrap; }
.kp-library-heading { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.kp-library-heading>div { min-width:0; }
.kp-library h1 { margin:0; font-size:26px; line-height:1.2; font-weight:650; letter-spacing:-.6px; overflow-wrap:anywhere; }
.kp-library-heading p { margin:6px 0 0; font-size:12px; color:var(--dim); }
.kp-library-breadcrumbs { margin-bottom:8px; color:var(--dim); font-size:12px; overflow-wrap:anywhere; }
.kp-library-breadcrumbs button { padding:2px 0; border:0; background:transparent; }
.kp-library-breadcrumbs button:hover { color:var(--accent); }
.kp-library-create { display:flex; align-items:center; justify-content:flex-end; gap:7px; flex-wrap:wrap; }
.kp-library-control { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg-1); font-size:13px!important; white-space:nowrap; transition:background .18s,border-color .18s,box-shadow .18s; }
.kp-library-control:hover { border-color:var(--accent); background:var(--hover); }
.kp-library-control.is-primary { background:var(--accent); color:var(--bg-1); border-color:var(--accent); }
.kp-library-control.is-primary:hover { filter:brightness(1.08); }
.kp-library-control[aria-pressed=true] { background:color-mix(in srgb,var(--accent) 16%,var(--bg-1)); color:var(--accent); }
.kp-library-create-destination { flex-basis:100%; text-align:right; font-size:11px; color:var(--dim); overflow-wrap:anywhere; }
.kp-library-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:0 28px 20px; border-bottom:1px solid var(--line); }
.kp-library-search { display:flex; align-items:center; gap:10px; padding:0 12px; min-width:180px; flex:1; border:1px solid var(--line); border-radius:9px; background:var(--bg-1); color:var(--dim); }
.kp-library-search:focus-within { border-color:var(--accent); outline:2px solid var(--accent); outline-offset:2px; }
.kp-library-search input:focus-visible { outline:none; }
.kp-library-search input { min-width:0; width:100%; padding:10px 0; font-size:14px; color:var(--text); background:transparent; border:0; outline-offset:0; }
.kp-library-view-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.kp-library-view-controls .kp-select-trigger { min-height:36px; font-size:12px; }
.kp-library-view-switch { display:flex; padding:3px; border:1px solid var(--line); background:var(--bg-1); border-radius:8px; gap:2px; }
.kp-library-view-switch button { padding:6px 8px; display:flex; align-items:center; gap:6px; border:0; background:transparent; color:var(--dim); border-radius:5px; font-size:12px; transition:background .18s,color .18s; }
.kp-library-view-switch button[aria-pressed=true] { background:color-mix(in srgb,var(--accent) 18%,var(--bg-1)); color:var(--text); }
.kp-library-content { flex:1; min-height:0; overflow:auto; overflow-anchor:none; padding:24px 28px 36px; }
.kp-library-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.kp-library-section-heading h2 { display:flex; gap:9px; align-items:center; margin:0; font-size:14px; font-weight:650; }
.kp-library-section-heading h2>i { color:var(--accent); }
.kp-library-section-heading h2>span,.kp-library-section-heading>span { color:var(--dim); font-size:12px; font-weight:400; }
.kp-library-section-heading>button { padding:4px 0; border:0; background:transparent; font-size:12px; color:var(--accent); }
.kp-library-shelf { padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line); animation:kp-library-enter .26s var(--library-ease); }
.kp-library-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.kp-library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; align-items:start; }
.kp-library-item { min-width:0; border:1px solid var(--line); background:var(--bg-1); border-radius:11px; transition:border-color .18s,box-shadow .18s; position:relative; }
.kp-library-item:hover,.kp-library-item:focus-within { border-color:color-mix(in srgb,var(--accent) 65%,var(--line)); }
.kp-library-open { min-width:0; border:0; background:transparent; text-align:left; padding:0; color:var(--text); }
.kp-library-open:focus-visible { outline-offset:-3px!important; border-radius:10px; }
.kp-library-thumb { position:relative; display:flex; flex:none; align-items:center; justify-content:center; overflow:hidden; background-color:var(--bg-3); background-image:radial-gradient(color-mix(in srgb,var(--dim) 23%,transparent) .7px,transparent .7px); background-size:10px 10px; color:var(--dim); }
.kp-library-thumb>i { font-size:27px; }
.kp-library-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .34s var(--library-ease); }
.kp-library-thumb img.is-loaded { opacity:1; }
.kp-library-thumb.is-folder { background:color-mix(in srgb,var(--accent) 13%,var(--bg-1)); color:var(--accent); }
.kp-library-item.is-card { display:grid; grid-template-columns:minmax(0,1fr) auto; overflow:hidden; }
.kp-library-item.is-card .kp-library-open { display:flex; flex-direction:column; grid-column:1 / -1; width:100%; }
.kp-library-item.is-card .kp-library-thumb { width:100%; aspect-ratio:1.9; border-bottom:1px solid var(--line); }
.kp-library-item-copy { display:block; min-width:0; }
.kp-library-item.is-card .kp-library-item-copy { padding:12px 13px 4px; width:100%; }
.kp-library-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; font-size:14px; line-height:1.4; font-weight:600; }
.kp-library-item.is-card .kp-library-name { min-height:39px; }
.kp-library-item-subtitle { display:block; color:var(--dim); font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-top:5px; }
.kp-library-item-date { font-size:11px; color:var(--dim); padding:0 13px 8px; align-self:center; }
.kp-library-item-dept { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dim); font-size:12px; }
.kp-library-item-dept>i { margin-right:7px; }
.kp-library-item:not(.is-row) .kp-library-item-dept { display:none; }
.kp-library-item-actions { display:flex; align-items:center; gap:2px; padding:0 6px 6px; }
.kp-library-star,.kp-library-more { display:inline-flex; flex:none; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; border-radius:7px; background:transparent; color:var(--dim); cursor:pointer; transition:color .18s,background .18s; }
.kp-library-star:hover,.kp-library-more:hover { background:color-mix(in srgb,var(--accent) 13%,var(--bg-1)); color:var(--text); }
.kp-library-star.is-starred { color:var(--accent); }
.kp-library-star.is-starred>i { animation:kp-library-star-pop .25s var(--library-ease,cubic-bezier(.2,.8,.2,1)); }
.kp-library-star[aria-disabled=true] { opacity:.6; cursor:progress; }
.kp-library-folders { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin-bottom:20px; }
.kp-library-item.is-folder-tile,.kp-library-item.is-shortcut { display:flex; align-items:center; padding:8px; gap:6px; }
.kp-library-item.is-folder-tile .kp-library-open,.kp-library-item.is-shortcut .kp-library-open { display:flex; flex:1; align-items:center; gap:10px; }
.kp-library-item.is-folder-tile .kp-library-thumb,.kp-library-item.is-shortcut .kp-library-thumb { width:40px; height:40px; border-radius:7px; }
.kp-library-item.is-shortcut .kp-library-name { -webkit-line-clamp:1; font-size:13px; }
.kp-library-item.is-folder-tile .kp-library-name { font-size:13px; }
.kp-library-item.is-folder-tile .kp-library-item-date { display:none; }
.kp-library-item.is-folder-tile .kp-library-item-actions,.kp-library-item.is-shortcut .kp-library-item-actions { padding:0; }
.kp-library-list-head,.kp-library-item.is-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(90px,18%) 76px 70px; align-items:center; gap:14px; }
.kp-library-list-head { font-size:11px; color:var(--dim); padding:0 12px 10px; }
.kp-library-item.is-row { border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; padding:7px 10px; min-height:60px; transition:background .18s; }
.kp-library-item.is-row:hover { background:var(--hover); }
.kp-library-item.is-row .kp-library-open { display:flex; gap:11px; align-items:center; }
.kp-library-item.is-row .kp-library-thumb { width:38px; height:38px; border-radius:6px; }
.kp-library-item.is-row .kp-library-name { -webkit-line-clamp:1; font-size:13px; }
.kp-library-item.is-row .kp-library-item-date,.kp-library-item.is-row .kp-library-item-actions { padding:0; }
.kp-library-results { animation:kp-library-enter .24s var(--library-ease); }
.kp-library-group { margin-bottom:26px; }
.kp-library-group-toggle { display:flex; align-items:center; gap:9px; border:0; background:transparent; padding:8px 0 14px; color:var(--dim)!important; font-size:12px!important; text-align:left; }
.kp-library-group-toggle i { width:14px; font-size:10px; }
.kp-library-group-toggle span { opacity:.75; }
.kp-library-empty { display:flex; align-items:center; text-align:center; flex-direction:column; gap:13px; padding:65px 20px; }
.kp-library-empty>i { color:var(--accent); font-size:30px; }
.kp-library-empty h2 { margin:0; font-size:18px; }
.kp-library-empty p { margin:0 0 7px; max-width:380px; font-size:14px; color:var(--dim); }
.kp-library-error { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 28px; background:var(--bg-1); border-bottom:1px solid var(--line); font-size:13px; }
.kp-library-error button { background:transparent; color:var(--accent); border:0; padding:6px; }
.kp-library-skeleton { overflow:hidden; background:var(--bg-1); border:1px solid var(--line); border-radius:11px; }
.kp-library-skeleton-image { aspect-ratio:1.9; background:var(--bg-3); }
.kp-library-skeleton-copy { padding:16px 13px 18px; display:flex; flex-direction:column; gap:10px; }
.kp-library-skeleton-copy>span { display:block; height:12px; border-radius:4px; background:var(--bg-3); width:80%; }
.kp-library-skeleton-copy>span:nth-child(2) { width:58%; }
.kp-library-skeleton-copy>span:nth-child(3) { width:32%; height:9px; margin-top:3px; }
.kp-library-skeleton-image,.kp-library-skeleton-copy>span,.kp-library-thumb.is-loading { position:relative; overflow:hidden; }
.kp-library-skeleton-image::after,.kp-library-skeleton-copy>span::after,.kp-library-thumb.is-loading::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--text) 7%,transparent) 50%,transparent 80%); transform:translateX(-100%); animation:kp-library-shimmer 1.7s ease-in-out infinite; pointer-events:none; }
.kp-library-skeleton-list { display:flex; flex-direction:column; gap:8px; }
.kp-library-skeleton-list .kp-library-skeleton { display:flex; align-items:center; border-radius:7px; }
.kp-library-skeleton-list .kp-library-skeleton-image { width:40px; height:40px; margin:10px; border-radius:5px; }
.kp-library-skeleton-list .kp-library-skeleton-copy { flex:1; padding:10px; }
.kp-library-skeleton-list .kp-library-skeleton-copy>span:nth-child(3) { display:none; }
.kp-library-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.kp-library.is-compact .kp-library-grid,.kp-library.is-compact .kp-library-folders { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.kp-library.is-compact .is-card .kp-library-thumb { aspect-ratio:2.5; }
.kp-library.is-compact .is-row { min-height:50px; padding-block:4px; }
.kp-library-legacy-banner { display:flex; justify-content:space-between; padding:8px 16px; font-size:12px; background:var(--bg-1); color:var(--dim); }
.kp-library-legacy-banner button { background:transparent; border:0; color:var(--accent); cursor:pointer; }
.kp-library-browse,.kp-library-nav-close,.kp-library-nav-scrim { display:none; }
@keyframes kp-library-enter { from { opacity:.35; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes kp-library-shimmer { to { transform:translateX(100%); } }
@keyframes kp-library-star-pop { 50% { transform:scale(1.18); } }
@media(min-width:1700px) { .kp-library-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); } }
@media(max-width:1200px) { .kp-library-nav { flex-basis:184px; padding-inline:9px; } .kp-library-header { padding:22px 22px 18px; } .kp-library-toolbar { padding-inline:22px; } .kp-library-content { padding:22px; } .kp-library-shortcuts { grid-template-columns:repeat(2,minmax(0,1fr)); } .kp-library-shortcuts>.is-shortcut:nth-child(n+3) { display:none; } .kp-library-view-switch span { display:none; } }
@media(max-width:950px) { .kp-library-browse { display:inline-flex; } .kp-library-nav { position:absolute; z-index:6; inset:0 auto 0 0; width:240px; max-width:85%; transform:translateX(-100%); visibility:hidden; transition:transform .24s var(--library-ease),visibility .24s; } .kp-library-nav.is-open { transform:translateX(0); visibility:visible; } .kp-library-nav-close { display:block; background:transparent; border:0; width:32px; height:32px; } .kp-library-nav-scrim { display:block; position:absolute; z-index:5; inset:0; background:color-mix(in srgb,var(--bg-1) 75%,transparent); border:0; animation:kp-library-enter .18s; } }
@media(max-width:640px) { .kp-library-header { padding:16px; gap:15px; } .kp-library-heading { flex-basis:100%; } .kp-library h1 { font-size:22px; } .kp-library-create { justify-content:flex-start; } .kp-library-create-destination { text-align:left; } .kp-library-toolbar { padding:0 16px 16px; gap:10px; } .kp-library-search { flex-basis:100%; } .kp-library-content { padding:18px 16px; } .kp-library-grid,.kp-library.is-compact .kp-library-grid,.kp-library-folders,.kp-library.is-compact .kp-library-folders { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .kp-library-shortcuts { grid-template-columns:minmax(0,1fr); } .kp-library-shortcuts>.is-shortcut:nth-child(n+2) { display:none; } .kp-library-item.is-folder-tile { grid-column:1 / -1; } .kp-library-name { font-size:13px; } .kp-library-item.is-card .kp-library-item-copy { padding:10px 10px 4px; } .kp-library-item.is-card .kp-library-item-date { display:none; } .kp-library-item.is-card .kp-library-item-actions { grid-column:1 / -1; justify-content:flex-end; } .kp-library-item.is-row,.kp-library-list-head { grid-template-columns:minmax(0,1fr) 70px; gap:8px; padding-inline:0; } .kp-library-item.is-row>.kp-library-item-dept,.kp-library-item.is-row>.kp-library-item-date,.kp-library-list-head>span:nth-child(2),.kp-library-list-head>span:nth-child(3) { display:none; } .kp-library-view-controls { gap:6px; } }
@media(max-width:360px) { .kp-library-grid,.kp-library.is-compact .kp-library-grid { grid-template-columns:minmax(0,1fr); } }
@media(pointer:coarse) { .kp-library-star,.kp-library-more { width:44px; height:44px; } .kp-library-control,.kp-library-nav-item,.kp-library-view-switch button,.kp-library-dept-expand { min-height:44px; } .kp-library-dept-expand { width:36px; } .kp-library-search input { font-size:16px; } .kp-library-item.is-row,.kp-library-list-head { grid-template-columns:minmax(0,1fr) 92px; } .kp-library-item.is-row>.kp-library-item-dept,.kp-library-item.is-row>.kp-library-item-date,.kp-library-list-head>span:nth-child(2),.kp-library-list-head>span:nth-child(3) { display:none; } }
@media(prefers-reduced-motion:reduce) { .kp-library *,.kp-library *::before,.kp-library *::after,.kp-library-star,.kp-library-star>i { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.kp-current-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.kp-current-board-filters{flex-shrink:0;flex-wrap:wrap;padding:10px 16px;background:var(--bg-1);border-bottom:1px solid var(--line);user-select:none}.kp-library-toolbar{flex-wrap:wrap}.kp-library-control[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.kp-library-name>i{margin-left:8px;font-size:11px;color:var(--dim)}.kbm-main{border:0;min-width:0;margin:0}.kp-current-board-filters input{user-select:text}

/* Shared selection and drop targets in both library browsers. */
.kp-library-item.is-selected { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--bg-1)); box-shadow:inset 0 0 0 1px var(--accent); }
.kp-library-select { position:absolute; z-index:2; left:12px; top:12px; width:23px; height:23px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:6px; background:var(--bg-1); opacity:0; transition:opacity .15s; }
.kp-library-select>i { opacity:0; font-size:11px; }
.kp-library-select[aria-checked=true] { background:var(--accent); border-color:var(--accent); color:var(--bg-1); }
.kp-library-select[aria-checked=true]>i { opacity:1; }
.kp-library-item:hover>.kp-library-select,.kp-library-item:focus-within>.kp-library-select,.kp-library.has-selection .kp-library-select { opacity:1; }
.kp-library-item:not(.is-card)>.kp-library-select { top:50%; transform:translateY(-50%); left:16px; }
.kp-library [data-drop-active] { outline:2px solid var(--accent); outline-offset:-2px; background:color-mix(in srgb,var(--accent) 20%,var(--bg-1)); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.kp-library-selection { flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:12px 28px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--accent) 6%,var(--bg-1)); font-size:12px; }
.kp-library-selection-count { display:flex; align-items:center; gap:8px; font-weight:600; white-space:nowrap; }
.kp-library-selection-count>i { color:var(--accent); }
.kp-library-selection .kp-select { max-width:260px; min-width:150px; }
.kp-library-selection .kp-select-trigger { min-height:32px; font-size:12px; }
.kp-library-selection-hint { flex:1; color:var(--dim); font-size:11px; }
.kp-library button:disabled { cursor:default; opacity:.5; }
.kp-library-drag-label { position:fixed; left:-10000px; top:0; max-width:300px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:10px 16px; border:1px solid var(--accent); border-radius:9px; background:var(--bg-1); color:var(--text); font:600 13px system-ui; box-shadow:0 8px 24px #0004; }
@media (hover:none) { .kp-library-select { opacity:1; } }
@media (max-width:600px) { .kp-library-selection { padding:10px 16px; gap:8px; } .kp-library-selection-hint { display:none; } .kp-library-selection .kp-select { min-width:0; flex:1 1 140px; max-width:none; } }

.kp-library.has-selection .kp-library-item:not(.is-card) .kp-library-thumb>*,
.kp-library-item:not(.is-card):hover .kp-library-thumb>*,
.kp-library-item:not(.is-card):focus-within .kp-library-thumb>* { opacity:0; }
@media (hover:none) { .kp-library-item:not(.is-card) .kp-library-thumb>* { opacity:0; } }

.kp-library-selection.is-floating { position:absolute; z-index:5; bottom:12px; left:224px; right:16px; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px #0003; pointer-events:none; }
@media (max-width:950px) { .kp-library-selection.is-floating { left:16px; } }
.build-record { max-width: 560px; }
.build-record section { margin-top: 16px; }
.build-record h4 { margin: 0 0 8px; font-size: 13px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.build-record dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 13.5px; }
.build-record dt { color: var(--dim); }
.build-record dd { margin: 0; overflow-wrap: anywhere; }
.build-record ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; overflow-wrap: anywhere; }
.build-record p { font-size: 13.5px; margin: 8px 0 0; }
.br-dim { color: var(--dim); }
.br-status { font-weight: 600; }
.br-status.failed, .br-status.interrupted, .br-status.deploymentfailed { color: var(--orange); }
.br-state { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 10px; margin-right: 6px; border: 1px solid var(--line); }
.br-state.clean { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, var(--line)); }
.br-state.modified, .br-state.mixed { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 50%, var(--line)); }
.br-state.unknown { color: var(--dim); }
.br-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.dd-local{animation:dd-local-in .18s ease-out}.dd-local h3{margin:8px 0}.dd-local p{overflow-wrap:anywhere}.dd-local .ds-row{flex-wrap:wrap}.dd-local-progress{margin-top:16px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2)}.dd-local-progress small{display:block;overflow-wrap:anywhere;color:var(--dim);margin-top:6px}.dd-local-filter{display:grid;gap:6px;margin:16px 0 10px}.dd-local-changes{max-height:340px;overflow:auto}.dd-local-changes>div{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}.dd-local-changes span{flex:1;min-width:0;overflow-wrap:anywhere}.dd-local-changes small{color:var(--dim);max-width:35%}@keyframes dd-local-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.dd-local{animation:none}}

.dd-local .ds-row{justify-content:flex-start}.dd-local input{width:100%;box-sizing:border-box;background:var(--bg-0);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px;font:inherit}.dd-local input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dd-local p{font-size:13px;line-height:1.6;margin:8px 0 14px}.dd-local-filter{font-size:12px}.dd-local-changes{font-size:13px}

.dd-local>.ds-row>.ds-grow{flex:1 1 260px;min-width:0}

/* Progress: while the amount of work is unknown, a pill travels between the ends of the
   track, easing in and out, and squashes against each end before springing back; once
   there is a count, a fill glides to each new value. */
.dd-progress{position:relative;height:6px;margin-top:10px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--accent) 16%,var(--bg-0))}
.dd-progress-fill{position:absolute;inset:0;border-radius:inherit;background:var(--accent);
  transform-origin:left center;transition:transform .5s cubic-bezier(.22,1,.36,1)}
/* The runner travels; its pill squashes and stretches. Its width is 28% of the track, so the
   far end is 100/28 - 1 = 257% of its own width away. */
.dd-progress-runner{position:absolute;inset:0 auto 0 0;width:28%;animation:dd-progress-travel 1.7s infinite}
.dd-progress-runner::before{content:'';position:absolute;inset:0;border-radius:999px;background:var(--accent);
  animation:dd-progress-squash 1.7s infinite}
@keyframes dd-progress-travel{
  0%{transform:translateX(0);animation-timing-function:cubic-bezier(.6,0,.4,1)}
  50%{transform:translateX(257%);animation-timing-function:cubic-bezier(.6,0,.4,1)}
  100%{transform:translateX(0)}
}
/* Insets, not scale, so the pill keeps touching the end it bounces off: squashed on contact,
   overshooting as it springs away, settling, stretched a little at full speed. */
@keyframes dd-progress-squash{
  0%{left:0;right:34%;animation-timing-function:cubic-bezier(.2,.9,.3,1.4)}
  9%{left:0;right:-10%;animation-timing-function:ease-out}
  17%{left:0;right:0;animation-timing-function:ease-in-out}
  27%{left:-9%;right:-9%;animation-timing-function:ease-in}
  44%{left:0;right:0;animation-timing-function:cubic-bezier(.5,0,.8,.4)}
  50%{left:34%;right:0;animation-timing-function:cubic-bezier(.2,.9,.3,1.4)}
  59%{left:-10%;right:0;animation-timing-function:ease-out}
  67%{left:0;right:0;animation-timing-function:ease-in-out}
  77%{left:-9%;right:-9%;animation-timing-function:ease-in}
  94%{left:0;right:0;animation-timing-function:cubic-bezier(.5,0,.8,.4)}
  100%{left:0;right:34%}
}
@media(prefers-reduced-motion:reduce){
  .dd-progress-fill{transition:none}
  .dd-progress-runner{width:100%;animation:none}
  .dd-progress-runner::before{animation:dd-progress-pulse 1.6s ease-in-out infinite}
}
@keyframes dd-progress-pulse{0%,100%{opacity:.25}50%{opacity:.6}}
.dd-mywork{height:100%;overflow:auto;display:flex;flex-direction:column;gap:14px}
.dd-mywork .ds-title p{overflow-wrap:anywhere}
.dd-mw-top{display:flex;gap:8px;flex-wrap:wrap}
.dd-mw-notice{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);font-size:13px;line-height:1.5}
.dd-mw-notice>span{flex:1;min-width:0;overflow-wrap:anywhere;white-space:pre-line}
.dd-mw-notice.error{border-color:color-mix(in srgb,#dc3c3e 55%,var(--line));background:color-mix(in srgb,#dc3c3e 10%,var(--bg-2))}
.dd-mw-attention{display:grid;gap:8px}
.dd-mw-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--bg-2));font-size:13px;line-height:1.5}
.dd-mw-card>span{flex:1;min-width:0}
.dd-mw-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dd-mw-filters>button{border:1px solid var(--line);background:var(--bg-2);color:var(--dim);border-radius:20px;padding:6px 12px;font:inherit;font-size:12px;cursor:pointer}
.dd-mw-filters>button.on{color:var(--text);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--bg-2))}
.dd-mw-filters>button span{opacity:.7;margin-left:4px}
.dd-mw-filters>button:focus-visible,.dd-mywork .dd-mw-row:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.dd-mywork .dd-mw-search{margin-left:auto;display:flex;flex-direction:row;align-items:center;gap:8px;font-weight:400;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:var(--bg-0);min-width:200px}
.dd-mywork .dd-mw-search input{border:0;background:none;color:var(--text);font:inherit;padding:8px 0;width:100%;outline:none}
.dd-mw-head{font-size:12px;color:var(--dim)}.dd-mywork .dd-mw-head label{display:inline-flex;flex-direction:row;gap:8px;align-items:center;cursor:pointer;font-weight:400}
.dd-mw-list{height:min(46vh,520px);min-height:180px;display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.dd-mw-list>.dd-virtual{flex:1}
.dd-mywork .dd-mw-row{display:flex;flex-direction:row;align-items:center;gap:10px;height:46px;padding:0 12px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13px;font-weight:400;box-sizing:border-box}
.dd-mw-row.sel{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.dd-mw-row .p{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dd-mw-row .p small{margin-left:8px}
.dd-mw-row small{color:var(--dim);white-space:nowrap}
.dd-mw-state{font-size:11px;padding:2px 8px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);white-space:nowrap}
.dd-mw-state.edit,.dd-mw-state.add{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.dd-mw-state.delete,.dd-mw-state.missing{color:#dc3c3e}
.dd-mw-flag{font-size:11px;padding:2px 8px;border-radius:12px;color:#d18b00;border:1px solid color-mix(in srgb,#d18b00 50%,var(--line));white-space:nowrap}
.dd-mw-lock{font-size:11px;color:var(--dim);white-space:nowrap}
.dd-mw-actions{display:flex;gap:8px;flex-wrap:wrap;position:sticky;bottom:0;padding:10px 0;background:var(--bg-1)}
.dd-mw-actions button{min-height:36px}
.dd-mw-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.dd-mw-columns h3{margin:0 0 4px}
.dd-mw-item{display:flex;align-items:center;gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.dd-mw-item>div{flex:1;min-width:0}.dd-mw-item strong{display:block;overflow-wrap:anywhere;font-size:13px}.dd-mw-item small{color:var(--dim);font-size:12px}
.dd-mw-dialog{width:min(620px,calc(100vw - 32px));max-height:min(80vh,720px);display:flex;flex-direction:column;gap:12px}
.dd-mw-dialog h2{margin:0;font-size:18px}
.dd-mw-dialog textarea{width:100%;box-sizing:border-box;background:var(--bg-0);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px;font:inherit;resize:vertical}
.dd-mw-files{list-style:none;margin:0;padding:0;max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.dd-mw-files li{display:grid;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px;overflow-wrap:anywhere}
.dd-mw-files li:last-child{border-bottom:0}.dd-mw-files small{color:var(--dim)}.dd-mw-files .dd-mw-state{justify-self:start}
.dd-mw-choice{display:flex;gap:16px;flex-wrap:wrap}.dd-mywork .dd-mw-choice label{display:inline-flex;flex-direction:row;gap:6px;align-items:center;cursor:pointer;font-weight:400;font-size:13px}
.dd-mw-buttons{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.dd-mywork .ds-alert{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
@container (max-width:720px){.dd-mw-search{margin-left:0;flex-basis:100%}.dd-mw-row .dd-mw-state{display:none}}
.dd-mywork input[type=checkbox],.dd-mywork input[type=radio]{width:auto;flex:none;margin:0;padding:0;border:0;accent-color:var(--accent)}
.dd-mw-tickets{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0;display:grid;gap:8px;min-width:0}
.dd-mw-tickets legend{padding:0 6px;font-size:13px;font-weight:600}.dd-mw-tickets legend small{color:var(--dim);font-weight:400;margin-left:4px}
.dd-mw-tickets .dd-mw-search{margin-left:0;min-width:0}
.dd-mw-ticket{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);font-size:13px}
.dd-mw-ticket>span{flex:1;min-width:0;display:grid}.dd-mw-ticket strong{overflow-wrap:anywhere}.dd-mw-ticket small{color:var(--dim);font-size:12px}
.dd-mw-ticket select{max-width:45%;background:var(--bg-0);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:inherit;font-size:12px}
.dd-mw-ticket-results{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:8px;max-height:200px;overflow:auto}
.dd-mw-ticket-results button{display:grid;width:100%;text-align:left;gap:2px;padding:8px 10px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.dd-mw-ticket-results li:last-child button{border-bottom:0}.dd-mw-ticket-results button:hover,.dd-mw-ticket-results button:focus-visible{background:color-mix(in srgb,var(--accent) 12%,transparent);outline:none}
.dd-mw-ticket-results small{color:var(--dim);font-size:12px}
.dd-mw-summary{margin:0;font-size:13px;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--accent) 8%,var(--bg-2));overflow-wrap:anywhere}
.dd-mw-card:has(.dd-mw-pending){flex-wrap:wrap}
.dd-mw-pending{flex-basis:100%;list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dd-mw-pending li{display:flex;align-items:center;gap:8px}.dd-mw-pending li>span{flex:1;min-width:0;display:grid}.dd-mw-pending small{color:var(--dim);font-size:12px}
/* Tutorial hint dot (tutorialHints.tsx) — Discord-style pulsing "new!" badge.
   The host element must be position:relative. */
.tut-dot {
  position: absolute; top: -3px; right: -3px; width: 11px; height: 11px;
  border-radius: 50%; background: #f0b232;
  box-shadow: 0 0 0 2px var(--bg-2), 0 0 8px color-mix(in srgb, #f0b232 70%, transparent);
  animation: tut-blink 1.5s ease-in-out infinite;
  z-index: 3; cursor: pointer;
}
@keyframes tut-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.78); }
}
@media (prefers-reduced-motion: reduce) {
  .tut-dot { animation: none; }
}
/* Charts — the team wiki (live co-edited pages). */

/* H3 toolbar button (icon-less; H1/H2 use FA glyphs). */
.ch-tool-h3 { font-size: 11px; font-weight: 800; letter-spacing: -0.5px; }
/* Highlight for a word jumped-to from search (CSS Custom Highlight API). */
::highlight(ch-search-hit) { background-color: #ffe066; color: #111; }

/* Editor images: click opens the lightbox; drag the corner handle to scale. */
.ch-sheet img { cursor: zoom-in; }
.ch-img { display: table; position: relative; max-width: 100%; margin: 8px 0; }
.ch-img img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.ch-img-handle {
  position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px; border-radius: 3px;
  background: var(--accent); border: 2px solid var(--bg-2); cursor: nwse-resize; opacity: 0;
  transition: opacity .12s; touch-action: none;
}
.ch-img:hover .ch-img-handle { opacity: 1; }

/* Page cover banner at the top of the document. */
.ch-cover { position: relative; height: 190px; border-radius: 12px; margin-bottom: 14px; background-size: cover; background-position: center; background-color: var(--bg-1); }
.ch-cover-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; opacity: 0; transition: opacity .12s; }
.ch-cover:hover .ch-cover-actions { opacity: 1; }
.ch-cover-btn { background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 7px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.ch-cover-btn:hover { background: rgba(0,0,0,.82); }
.ch-add-cover { align-self: flex-start; margin-bottom: 10px; background: transparent; border: none; color: var(--faint); font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.ch-add-cover:hover { background: var(--hover); color: var(--text); }
.ch-recent-cover { flex: none; width: 26px; height: 26px; border-radius: 5px; background-size: cover; background-position: center; background-color: var(--bg-1); }

/* Wiki page-link chip inside the document. */
.ch-plink {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 4px; padding: 0 4px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
/* NOTE: the self-hosted Font Awesome is v7 — its family is "Font Awesome 7
   Free" (with v6/v5 alias fallbacks here for safety). Using the wrong family
   silently renders tofu boxes. */
.ch-plink::before { content: '\f0c1'; font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900; font-size: .8em; margin-right: 4px; opacity: .7; }
.ch-plink:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* @mention chip in the page body (same family as .ch-plink) */
.ch-mention {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 4px; padding: 0 4px; font-weight: 600; white-space: nowrap;
}

/* @mention autocomplete dropdown (appended to <body>, placed at the caret) */
.ch-mention-menu {
  position: fixed; z-index: 12000; min-width: 200px; max-width: 240px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35); padding: 4px; display: flex; flex-direction: column;
}
.ch-mention-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px;
  color: var(--text); text-align: left; font-size: 13.5px; width: 100%;
}
.ch-mention-item:hover, .ch-mention-item.sel { background: var(--hover); }
.ch-mention-av {
  width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex: 0 0 20px;
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
}
.ch-mention-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-mention-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-mention-empty { padding: 8px 10px; font-size: 12.5px; opacity: .6; }

/* "/" command menu (same family as the mention dropdown, with hint text) */
.ch-slash-menu {
  position: fixed; z-index: 12000; width: 280px; max-height: 340px; overflow-y: auto;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35); padding: 4px; display: flex; flex-direction: column;
}
.ch-slash-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 7px;
  color: var(--text); text-align: left; width: 100%;
}
.ch-slash-item:hover, .ch-slash-item.sel { background: var(--hover); }
.ch-slash-ic {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 7px; display: grid; place-items: center;
  background: var(--bg-1); border: 1px solid var(--line); color: var(--dim); font-size: 12px;
}
.ch-slash-tx { display: flex; flex-direction: column; min-width: 0; }
.ch-slash-tx b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-slash-tx span { font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Structured blocks ---- */
/* Callouts */
.ch-callout { position: relative; border-radius: 10px; border: 1px solid; padding: 12px 14px 12px 44px; margin: 0.6em 0; }
.ch-callout::before { font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 15px; top: 13px; font-size: 15px; }
.ch-callout > p:last-child { margin-bottom: 0; }
.ch-callout-info { background: color-mix(in srgb, #3b82f6 9%, transparent); border-color: color-mix(in srgb, #3b82f6 35%, transparent); }
.ch-callout-info::before { content: '\f05a'; color: #3b82f6; }
.ch-callout-warning { background: color-mix(in srgb, #f59e0b 9%, transparent); border-color: color-mix(in srgb, #f59e0b 38%, transparent); }
.ch-callout-warning::before { content: '\f071'; color: #f59e0b; }
.ch-callout-success { background: color-mix(in srgb, #3ba55d 9%, transparent); border-color: color-mix(in srgb, #3ba55d 38%, transparent); }
.ch-callout-success::before { content: '\f058'; color: #3ba55d; }
.ch-callout-error { background: color-mix(in srgb, #ed4245 9%, transparent); border-color: color-mix(in srgb, #ed4245 38%, transparent); }
.ch-callout-error::before { content: '\f057'; color: #ed4245; }
.ch-callout-decision { background: color-mix(in srgb, #8b5cf6 9%, transparent); border-color: color-mix(in srgb, #8b5cf6 38%, transparent); }
.ch-callout-decision::before { content: '\f0e3'; color: #8b5cf6; }

/* Expand (collapsible section) */
.ch-expand { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 8px 34px; margin: 0.6em 0; }
.ch-expand-caret {
  position: absolute; left: 6px; top: 9px; width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center; background: none; border: none; color: var(--dim); cursor: pointer;
}
.ch-expand-caret:hover { background: var(--hover); color: var(--text); }
.ch-expand-caret i { transition: transform .15s; }
.ch-expand[data-open='true'] .ch-expand-caret i { transform: rotate(90deg); }
.ch-expand-title { font-weight: 700; min-height: 22px; padding: 1px 0; }
.ch-expand-body { margin-top: 6px; }
.ch-expand-body > p:last-child { margin-bottom: 0; }
.ch-expand[data-open='false'] .ch-expand-body { display: none; }

/* Live-tool embed card (/currents, /whiteboard) */
.ch-embed {
  display: flex; align-items: center; gap: 12px; margin: 0.6em 0;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  background: var(--bg-2); user-select: none;
}
.ch-embed.ProseMirror-selectednode { outline: 2px solid var(--accent); }
.ch-embed.gone { opacity: .6; }
.ch-embed-cover {
  width: 56px; height: 40px; flex: 0 0 56px; border-radius: 7px;
  background: var(--bg-1) center/cover no-repeat; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--dim); font-size: 16px;
}
.ch-embed-main { flex: 1; min-width: 0; }
.ch-embed-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-embed-sub { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-embed-open {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--bg-1);
  color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ch-embed-open:hover { border-color: var(--accent); color: var(--accent); }

/* Status lozenge */
.ch-status-badge {
  display: inline-block; padding: 1px 8px 2px; border-radius: 4px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer; line-height: 1.5; vertical-align: baseline;
  border: 1px solid transparent; user-select: none;
}
.ch-status-badge.ProseMirror-selectednode { outline: 2px solid var(--accent); }
.sb-grey { background: color-mix(in srgb, #6b7280 22%, transparent); color: #9aa4b2; border-color: color-mix(in srgb, #6b7280 40%, transparent); }
.sb-blue { background: color-mix(in srgb, #3b82f6 18%, transparent); color: #3b82f6; border-color: color-mix(in srgb, #3b82f6 40%, transparent); }
.sb-green { background: color-mix(in srgb, #3ba55d 18%, transparent); color: #3ba55d; border-color: color-mix(in srgb, #3ba55d 40%, transparent); }
.sb-orange { background: color-mix(in srgb, #e8842b 18%, transparent); color: #e8842b; border-color: color-mix(in srgb, #e8842b 40%, transparent); }
.sb-red { background: color-mix(in srgb, #ed4245 18%, transparent); color: #ed4245; border-color: color-mix(in srgb, #ed4245 40%, transparent); }
.sb-purple { background: color-mix(in srgb, #8b5cf6 18%, transparent); color: #8b5cf6; border-color: color-mix(in srgb, #8b5cf6 40%, transparent); }

/* "Linked from" backlinks below the page body. */
.ch-backlinks { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); }
.ch-backlinks-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin-bottom: 8px; }
.ch-backlinks-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-backlink { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); color: var(--text); font-size: 13px; cursor: pointer; }
.ch-backlink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-backlink:hover { border-color: var(--accent); }

.ch-sr-create .ch-sr-title, .ch-sr-create .ch-sr-icon { color: var(--accent); }

/* Page-link picker (reuses the search modal styling). */
.ch-linkpick { width: min(520px, 92vw); padding: 0; overflow: hidden; }
.ch-linkpick .ch-search-bar { border-bottom: 1px solid var(--line); }

/* ---- Margin comments (Google-Docs style) ---- */
.ch-comments-btn .ch-cm-count { background: var(--accent); color: #fff; border-radius: 9px; padding: 0 5px; font-size: 11px; margin-left: 3px; }
/* The sheet + its comment gutter share a positioned wrapper; when comments
   exist the wrapper widens and the sheet stays left so cards get the margin. */
/* width:100% matters: as a flex child (TOC open) the wrap otherwise shrinks
   to its content (the 840px sheet), the gutter at left:856 falls outside it,
   and comment cards collapse to zero width. */
.ch-sheetwrap { position: relative; width: 100%; max-width: 840px; margin: 0 auto; min-width: 0; }
.ch-sheetwrap.has-cm { max-width: 1132px; }
.ch-sheetwrap.has-cm .ch-sheet { margin: 0; }
.ch-margin { position: absolute; left: 856px; right: 4px; top: 0; bottom: 0; pointer-events: none; }
.ch-margin > * { pointer-events: auto; }
.ch-margin-pill {
  position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-1);
  color: var(--dim); font-size: 12px; cursor: pointer;
}
.ch-margin-pill:hover { color: var(--text); border-color: var(--accent); }
.ch-cmm {
  position: absolute; left: 0; right: 4px; min-width: 200px; background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: top .15s ease, box-shadow .15s;
}
.ch-cmm:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }
.ch-cmm.active { border-color: #e8c34a; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
.ch-cmm.resolved { opacity: .62; }
.ch-cmm-top { display: flex; align-items: center; gap: 8px; }
.ch-cmm-who { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; overflow: hidden; }
.ch-cmm-who b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-cmm-act { background: none; border: none; color: var(--faint); cursor: pointer; padding: 2px 3px; font-size: 12px; flex: none; }
.ch-cmm-act:hover { color: var(--text); }
.ch-cmm-act.del:hover { color: var(--danger, #ed4245); }
.ch-cmm-reply { display: flex; gap: 7px; margin: 7px 0 0 6px; padding-left: 8px; border-left: 2px solid var(--line); }
.ch-cmm-reply-main { min-width: 0; flex: 1; }
.ch-cm-anchor { font-size: 12px; color: var(--dim); font-style: italic; border-left: 2px solid color-mix(in srgb, #e8c34a 70%, transparent); padding: 0 8px; margin: 0 0 6px 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-cm-anchor > i { font-size: 9px; margin-right: 4px; opacity: .6; }
.ch-cm-when { font-size: 11px; color: var(--faint); }
.ch-cm-body { font-size: 13px; white-space: pre-wrap; word-break: break-word; margin: 4px 0 0; }
.ch-cm-replybox { display: flex; gap: 6px; margin-top: 8px; }
.ch-cm-replybox input { flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; color: var(--text); font-size: 13px; }
/* Narrow viewports: the gutter collapses; the focused thread floats instead. */
.ch-margin-solo { position: fixed; right: 12px; bottom: 16px; width: min(340px, 92vw); z-index: 60; }
.ch-cmm.solo { position: static; box-shadow: 0 12px 34px rgba(0, 0, 0, .4); cursor: default; }

/* Floating "comment on selection" button + inline composer in the gutter. */
.ch-addcm-btn {
  position: absolute; left: calc(min(100%, 840px) - 16px); width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg-1); border: 1px solid var(--line);
  color: var(--dim); cursor: pointer; z-index: 5; box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
.ch-addcm-btn:hover { color: var(--accent); border-color: var(--accent); }
.ch-composer {
  position: absolute; left: 856px; right: 4px; min-width: 200px; z-index: 6;
  background: var(--bg-1); border: 1px solid #e8c34a; border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3); display: flex; flex-direction: column; gap: 8px;
}
.ch-composer textarea { resize: none; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; color: var(--text); font-size: 13px; }
.ch-composer-acts { display: flex; justify-content: flex-end; gap: 6px; }
/* No room for the gutter (ChartsPage measures the canvas) → composer floats. */
.ch-composer.solo { position: fixed; right: 12px; bottom: 16px; left: auto; width: min(340px, 92vw); top: auto !important; }

/* Inline-comment highlight inside the document. */
.ch-comment-mark { background: color-mix(in srgb, #e8c34a 26%, transparent); border-bottom: 2px solid #e8c34a; cursor: pointer; border-radius: 2px; }
.ch-comment-mark:hover, .ch-comment-mark.cm-active { background: color-mix(in srgb, #e8c34a 42%, transparent); }
.ch-comment-mark.cm-resolved { background: none; border-bottom: 1px dotted color-mix(in srgb, #e8c34a 50%, transparent); }

/* ---- Create-page modal (Blank / from template) ---- */
.ch-create { width: min(460px, 94vw); }
.ch-create-title {
  width: 100%; background: var(--bg-1); border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; color: var(--text); font-size: 15px; font-weight: 600;
}
.ch-create-title:focus { outline: none; border-color: var(--accent); }
.ch-tpl-list { display: flex; flex-direction: column; gap: 5px; max-height: 300px; overflow-y: auto; }
.ch-tpl-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg-1); color: var(--text); text-align: left; cursor: pointer;
}
.ch-tpl-row.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ch-tpl-ic {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--dim); font-size: 13px;
}
.ch-tpl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch-tpl-main b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-tpl-main span { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-tpl-rm { flex: none; color: var(--faint); padding: 3px 5px; border-radius: 6px; cursor: pointer; }
.ch-tpl-rm:hover { color: var(--danger, #ed4245); background: var(--hover); }
.ch-tpl-hint { font-size: 12px; color: var(--faint); padding: 8px 2px; }

/* Restricted/private page indicator in the tree. */
.ch-restricted-icon { flex: none; font-size: 10px; color: var(--faint); }

/* ---- Permissions modal ---- */
.ch-perms { width: min(500px, 94vw); }
.ch-perms-body { max-height: min(66vh, 560px); overflow-y: auto; overflow-x: hidden; }
.ch-perms-title { font-weight: 600; margin-bottom: 12px; color: var(--dim); }
.ch-perms-scope { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; margin-left: 4px; }
.ch-perms-hint { font-size: 12px; color: var(--faint); margin: -6px 0 4px; }
/* ---- Department permissions picker ---- */
.ch-deptperms { width: min(440px, 94vw); }
.ch-deptperms-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ch-deptperms-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); color: var(--text); cursor: pointer; text-align: left; }
.ch-deptperms-row:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ch-deptperms-row .n { flex: 1; font-weight: 500; }
.ch-perms-lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin: 12px 0 6px; }
.ch-perms-defaults { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ch-perms-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); color: var(--text); cursor: pointer; }
.ch-perms-opt span { font-size: 11px; color: var(--faint); }
.ch-perms-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ch-perms-grants { display: flex; flex-direction: column; gap: 4px; }
.ch-perms-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; }
.ch-perms-row:hover { background: var(--hover); }
.ch-perms-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-perms-level {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-1);
  color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ch-perms-level:hover { border-color: var(--accent); }
.ch-perms-level i { font-size: 10px; opacity: .6; }
.ch-perms-roleic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-1); color: var(--dim); flex: none; }
.ch-perms-rm { background: none; border: none; color: var(--faint); cursor: pointer; padding: 2px 5px; flex: none; }
.ch-perms-rm:hover { color: var(--danger, #ed4245); }
/* Add-people search + results */
.ch-perms-search { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); }
.ch-perms-search i { color: var(--faint); font-size: 12px; }
.ch-perms-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font-size: 13px; }
.ch-perms-results { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.ch-perms-hit { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; background: none; border: none; color: var(--text); cursor: pointer; text-align: left; }
.ch-perms-hit:hover { background: var(--hover); }
.ch-perms-addlbl { flex: none; font-size: 12px; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }

/* ---- Trash modal ---- */
.ch-trash { width: min(560px, 94vw); }
.ch-trash-body { max-height: min(60vh, 480px); overflow-y: auto; }
.ch-trash-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.ch-trash-meta { flex: 1; min-width: 0; }
.ch-trash-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-trash-sub { font-size: 11px; color: var(--faint); }
.ch-trash-purge { color: var(--danger, #ed4245); }

/* ---- Sidebar: Favorites + Recently viewed sections ---- */
.ch-quick { padding: 4px 0 2px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ch-quick-sec { margin-bottom: 4px; }
.ch-quick-head { display: flex; align-items: center; gap: 6px; padding: 4px 12px 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.ch-quick-head > i { font-size: 10px; }
.ch-fav-star { margin-left: auto; font-size: 10px; color: #f5b301; }
/* Page status: a small colored dot in the tree; dim archived/deprecated pages. */
.ch-status-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.ch-node.ch-dim { opacity: .55; }
.ch-node.ch-dim:hover { opacity: 1; }
/* Header status select (colored pill) + owner chip. */
.ch-status-select {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--st, var(--accent)) 16%, transparent);
  color: var(--st, var(--text)); border: 1px solid color-mix(in srgb, var(--st, var(--accent)) 45%, transparent);
  border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600; cursor: pointer; outline: none;
}
.ch-status-select:hover { background: color-mix(in srgb, var(--st, var(--accent)) 26%, transparent); }
.ch-status-select:disabled { opacity: .55; cursor: default; }
.ch-status-select .fa-caret-down { font-size: 9px; opacity: .8; }
.ch-owner { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--dim); white-space: nowrap; }
.ch-owner > i { font-size: 10px; }
/* Page locking. */
.ch-lock-icon { flex: none; font-size: 10px; color: var(--faint); }
.ch-locked-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #e8842b; white-space: nowrap; }
.ch-lock-banner {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 12px; border-radius: 8px; font-size: 13px;
  color: #e8842b; background: color-mix(in srgb, #e8842b 12%, transparent); border: 1px solid color-mix(in srgb, #e8842b 30%, transparent);
}
.ch-fav-btn.on { color: #f5b301; }

/* ---- Full-text search modal ---- */
.ch-search-modal { width: min(680px, 94vw); max-width: 680px; padding: 0; overflow: hidden; }
.ch-search-bar { display: flex; align-items: center; gap: 10px; padding: 13px 14px; }
.ch-search-bar > .fa-magnifying-glass { color: var(--faint); flex: none; }
.ch-search-input { flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 16px; }
/* Filters live on their own row so the search field always gets the full width. */
.ch-search-filter { display: flex; align-items: center; gap: 10px; padding: 0 14px 10px; border-bottom: 1px solid var(--line); }
.ch-search-filter-label { flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.ch-search-filter .df-wrap { flex: 1 1 auto; min-width: 0; }
.ch-search-results { max-height: min(60vh, 520px); overflow-y: auto; padding: 6px; }
.ch-sr { display: flex; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; padding: 9px 10px; border-radius: 8px; }
.ch-sr:hover { background: var(--hover); }
.ch-sr-icon { margin-top: 2px; }
.ch-sr-body { min-width: 0; flex: 1; }
.ch-sr-title { font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-sr-sub { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-sr-status { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-left: 8px; }

/* Status filter chips in the search modal */
.ch-search-status { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.ch-status-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-1); color: var(--dim); font-size: 12px; cursor: pointer;
}
.ch-status-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--st, var(--dim)); }
.ch-status-chip:hover { color: var(--text); }
.ch-status-chip.on { border-color: var(--st, var(--accent)); color: var(--text); background: color-mix(in srgb, var(--st, var(--accent)) 12%, transparent); }

/* "Show archived" toggle under the tree filter */
.ch-arch-toggle {
  display: flex; align-items: center; gap: 7px; margin: 0 10px 4px; padding: 4px 8px;
  border: none; background: none; border-radius: 7px; color: var(--faint); font-size: 11.5px; cursor: pointer; text-align: left;
}
.ch-arch-toggle:hover { color: var(--text); background: var(--hover); }
.ch-sr-excerpt { font-size: 12.5px; color: var(--dim); margin: 2px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-sr-excerpt mark { background: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text); border-radius: 2px; padding: 0 1px; }
.ch-sr-meta { font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Confluence-style shell: persistent page tree + document area */
.ch-shell { flex: 1; display: grid; grid-template-columns: 264px 1fr; min-height: 0; min-width: 0; }
.ch-side { display: flex; flex-direction: column; min-height: 0; background: var(--bg-2); border-right: 1px solid var(--line); }
.ch-side-head { display: flex; align-items: center; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ch-side-btn { position: relative; width: 28px; height: 28px; border-radius: 6px; color: var(--dim); } /* relative: hosts .tut-dot */
.ch-side-btn:hover { background: var(--hover); color: var(--text); }
.ch-side-btn.on { background: var(--hover); color: var(--accent); }

/* Built-in "Charts guide" page (ChartsHelp.tsx) */
.ch-kbd {
  display: inline-block; padding: 0 7px; border-radius: 5px; border: 1px solid var(--line);
  border-bottom-width: 2px; background: var(--bg-2); font-family: inherit;
  font-size: 12.5px; font-weight: 700; line-height: 1.6; color: var(--text);
}
.ch-help h2 { margin-top: 1.1em; }
.ch-help .ch-status-badge { cursor: default; margin: 0 2px; }
.ch-help li { margin: 0.25em 0; }
.ch-help i.fa-solid, .ch-help i.fa-regular { font-size: 0.85em; opacity: 0.85; margin: 0 1px; }
.ch-search-wrap { position: relative; padding: 8px 10px; }
.ch-search-wrap > i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--faint); }
.ch-search { width: 100%; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 6px 10px 6px 28px; font-size: 13px; }
.ch-side-filter { padding: 0 10px 8px; border-bottom: 1px solid var(--line); }
.ch-side-filter .df-chip { padding: 2px 9px; font-size: 11.5px; }
.ch-tree { flex: 1; overflow-y: auto; padding: 4px 6px 20px; }
.ch-node { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--dim); white-space: nowrap; }
.ch-node:hover { background: var(--hover); color: var(--text); }
.ch-node .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ch-node.ch-pnode.sel { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }
/* Drag-to-reorder drop indicator (line above a page, ring around a folder). */
.ch-node.ch-pnode.drop-target { box-shadow: inset 0 2px 0 var(--accent); }
.ch-node.ch-fnode.drop-target { box-shadow: inset 0 0 0 1.5px var(--accent); border-radius: 6px; }
.ch-caret { width: 12px; text-align: center; font-size: 10px; color: var(--faint); transition: transform 0.12s; }
.ch-caret.open { transform: rotate(90deg); }
.ch-caret.none { visibility: hidden; }
.ch-tree-empty { padding: 18px 12px; color: var(--faint); font-size: 13px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ch-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* Home (nothing selected): recent pages */
.ch-home { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; }
.ch-home img { width: 64px; height: 64px; opacity: 0.85; }
.ch-recent { margin-top: 18px; width: min(460px, 90%); display: flex; flex-direction: column; gap: 2px; }
.ch-recent-head { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.ch-recent-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--text); text-align: left; }
.ch-recent-row:hover { background: var(--hover); }
.ch-recent-row .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-recent-row .when { color: var(--faint); font-size: 12px; }

/* "Needs review" queue: approve / request-changes inline actions */
.ch-nr-row { cursor: pointer; }
.ch-nr-actions { display: flex; gap: 6px; opacity: 0; transition: opacity .12s; }
.ch-nr-row:hover .ch-nr-actions, .ch-nr-row:focus-within .ch-nr-actions { opacity: 1; }
.ch-nr-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px;
  font-size: 12px; font-weight: 600; color: var(--text);
  background: var(--hover); border: 1px solid var(--line); white-space: nowrap;
}
.ch-nr-btn:hover { border-color: var(--accent); }
.ch-nr-btn.ok { color: #3ba55d; }

/* Document header (inside the sheet) */
.ch-bar-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.ch-doc-title {
  width: 100%; background: transparent; border: none; outline: none; color: var(--text);
  font-size: 30px; font-weight: 800; line-height: 1.25; padding: 0; margin: 0 0 2px;
}
.ch-doc-title::placeholder { color: var(--faint); }
.ch-byline { color: var(--faint); font-size: 12.5px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }

.ch-page { display: flex; flex-direction: column; height: 100%; min-width: 0; }

.ch-live { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; }
.ch-live.connected { color: #3ba55d; background: color-mix(in srgb, #3ba55d 14%, transparent); }
.ch-live.connecting, .ch-live.offline { color: #f0b232; background: color-mix(in srgb, #f0b232 14%, transparent); }

.ch-peer { border-radius: 50%; box-shadow: 0 0 0 2px var(--peer, var(--accent)); display: inline-flex; }

/* Launcher page tiles */
.ch-thumb { display: flex; align-items: center; justify-content: center; position: relative; background: color-mix(in srgb, var(--cat, #64748b) 26%, var(--bg-1)); color: var(--cat, #64748b); font-size: 26px; }
.ch-thumb-when { position: absolute; right: 8px; bottom: 6px; font-size: 10px; color: var(--dim); }

/* Toolbar */
.ch-toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.ch-tool { width: 30px; height: 30px; border-radius: 6px; color: var(--dim); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.ch-tool:hover { background: var(--hover); color: var(--text); }
.ch-tool.on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.ch-tool:disabled { opacity: 0.4; }

/* Page canvas. overflow-x hidden: oversized content (tables resized wider
   than the screen, huge images, long unbroken strings) must scroll INSIDE
   the sheet, never stretch the app layout. */
.ch-canvas { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px 16px 80px; scroll-padding-bottom: 140px; scroll-padding-top: 60px; }
.ch-sheet { max-width: 840px; margin: 0 auto; background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; padding: 36px 44px; min-height: 70vh; min-width: 0; }
.ch-sheet .tiptap { overflow-wrap: anywhere; }

/* Editor content */
.ch-sheet .tiptap { outline: none; color: var(--text); font-size: 15px; line-height: 1.65; }
.ch-sheet .tiptap p { margin: 0 0 0.6em; }
.ch-sheet .tiptap h1 { font-size: 26px; margin: 0.8em 0 0.4em; }
.ch-sheet .tiptap h2 { font-size: 21px; margin: 0.8em 0 0.4em; }
.ch-sheet .tiptap h3 { font-size: 17px; margin: 0.8em 0 0.4em; }
.ch-sheet .tiptap ul, .ch-sheet .tiptap ol { padding-left: 1.4em; margin: 0 0 0.6em; }
.ch-sheet .tiptap blockquote { border-left: 3px solid var(--accent); margin: 0.6em 0; padding: 2px 14px; color: var(--dim); }
.ch-sheet .tiptap code { background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-size: 13px; }
.ch-sheet .tiptap pre { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 0.6em 0; }
.ch-sheet .tiptap pre code { background: none; border: none; padding: 0; }
.ch-sheet .tiptap hr { border: none; border-top: 1px solid var(--line); margin: 1.2em 0; }
.ch-sheet .tiptap img { max-width: 100%; border-radius: 8px; display: block; margin: 0.6em 0; }
.ch-sheet .tiptap img.ProseMirror-selectednode { outline: 2px solid var(--accent); }
.ch-sheet .tiptap a { color: var(--accent); }

/* Tables. TipTap wraps each table in .tableWrapper — that wrapper scrolls
   horizontally when columns are resized wider than the page, so a huge table
   pans inside the document instead of breaking the layout. */
.ch-sheet .tiptap .tableWrapper { max-width: 100%; overflow-x: auto; margin: 0.8em 0; }
.ch-sheet .tiptap table { border-collapse: collapse; min-width: 100%; width: auto; margin: 0; table-layout: fixed; }
.ch-sheet .tiptap th, .ch-sheet .tiptap td { border: 1px solid var(--line); padding: 6px 10px; vertical-align: top; position: relative; }
.ch-sheet .tiptap th { background: var(--bg-2); font-weight: 700; text-align: left; }
.ch-sheet .tiptap .selectedCell::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 16%, transparent); pointer-events: none; }
.ch-sheet .tiptap .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: 0; width: 4px; background: var(--accent); cursor: col-resize; }

/* Checklists */
.ch-sheet .tiptap ul[data-type='taskList'] { list-style: none; padding-left: 0.2em; }
.ch-sheet .tiptap ul[data-type='taskList'] li { display: flex; gap: 8px; align-items: flex-start; }
.ch-sheet .tiptap ul[data-type='taskList'] li > label { margin-top: 3px; }
.ch-sheet .tiptap ul[data-type='taskList'] li[data-checked='true'] > div { text-decoration: line-through; color: var(--dim); }

/* Page break: labeled dashed divider on screen, real break in print/PDF */
.ch-pagebreak {
  position: relative; margin: 1.6em -44px; border-top: 2px dashed var(--line); height: 0;
}
.ch-pagebreak::after {
  content: 'PAGE BREAK'; position: absolute; top: -0.7em; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 800; letter-spacing: 0.12em; color: var(--faint);
  background: var(--bg-1); padding: 0 10px;
}
.ch-pagebreak.ProseMirror-selectednode { border-top-color: var(--accent); }
@media print {
  .ch-pagebreak { break-after: page; page-break-after: always; border: none; }
  .ch-pagebreak::after { content: none; }
  .ch-toolbar, .wb-bar { display: none !important; }
  .ch-margin, .ch-margin-solo, .ch-addcm-btn, .ch-composer { display: none !important; }
  .ch-canvas { overflow: visible; padding: 0; }
  .ch-sheetwrap { max-width: none; }
  .ch-sheet { border: none; max-width: none; padding: 0; }
}

/* Placeholder */
.ch-sheet .tiptap p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--faint); float: left; height: 0; pointer-events: none; }

/* Collaboration cursors (y-prosemirror renders these) */
.ch-sheet .tiptap .collaboration-cursor__caret {
  border-left: 1px solid; border-right: 1px solid; margin-left: -1px; margin-right: -1px;
  position: relative; word-break: normal; pointer-events: none;
}
.ch-sheet .tiptap .collaboration-cursor__label {
  position: absolute; top: -1.35em; left: -1px; font-size: 10px; font-weight: 700; color: #fff;
  padding: 1px 6px; border-radius: 4px 4px 4px 0; white-space: nowrap; user-select: none; pointer-events: none;
}

/* History modal */
.ch-history { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.ch-rev { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.ch-rev-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ch-rev-meta .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Page activity (audit trail) — admin-only section under the version list */
.ch-audit-head {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center; gap: 6px; opacity: .75;
}
.ch-audit-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 2px; font-size: 13px; }
.ch-audit-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ch-audit-when { font-size: 12px; white-space: nowrap; opacity: .65; }

/* ---- Auto table of contents (Confluence-style, built from headings) ---- */
.ch-canvas.has-toc { display: flex; align-items: flex-start; justify-content: center; gap: 30px; }
.ch-canvas.has-toc .ch-sheetwrap { margin: 0; }
.ch-toc {
  position: sticky; top: 0; flex: 0 0 220px; align-self: flex-start;
  max-height: calc(100vh - 180px); overflow-y: auto;
  padding: 2px 2px 8px; font-size: 13px;
}
.ch-toc-head { text-transform: uppercase; font-size: 11px; letter-spacing: .05em; color: var(--faint); font-weight: 700; padding: 6px 8px; }
.ch-toc-item {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  color: var(--dim); padding: 4px 8px; border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4;
}
.ch-toc-item:hover { color: var(--text); background: var(--hover); }
.ch-toc-item.active { color: var(--text); border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ch-toc-item.lvl2 { padding-left: 20px; }
.ch-toc-item.lvl3 { padding-left: 32px; font-size: 12px; }
/* Narrow screens: keep the sheet full and hide the rail. */
@media (max-width: 980px) {
  .ch-toc { display: none; }
  .ch-canvas.has-toc { display: block; }
  .ch-canvas.has-toc .ch-sheetwrap { margin: 0 auto; }
}
/* When there's no room for the comment gutter, ChartsPage measures the canvas
   (accounting for the TOC rail) and switches to the floating solo view — no
   viewport media query, so collapsed/open side panels are handled correctly. */
/* Drydock — built-in version control. All colors from theme vars. */

.dd-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--main-bg, var(--bg-1)); position: relative; }
.dd-head { height: 52px; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.dd-head h1 { font-size: 16px; margin: 0 10px 0 4px; }
.dd-head .hamburger { background: transparent; border: none; color: var(--dim); cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.dd-head .hamburger:hover { color: var(--text); background: var(--hover); }
.dd-depot-sel { background: var(--bg-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font-size: 13px; max-width: 220px; }
.dd-head-meta { font-size: 12px; color: var(--dim); margin-left: 10px; white-space: nowrap; }

.dd-tabs { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.dd-tabs > button { background: transparent; border: none; color: var(--dim); font-weight: 600; font-size: 13px; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.dd-tabs > button.on { color: var(--text); background: var(--hover); }
.dd-filter { flex: 1; max-width: 340px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 6px 10px; font-size: 13px; }
.dd-add-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; margin-left: auto; }

.dd-files { flex: 1; overflow-y: auto; padding: 6px 8px 20px; }
/* The name column can NEVER collapse: minmax floor keeps names readable at any
   window size (the pane scrolls horizontally instead of hiding the name). */
.dd-row { display: grid; grid-template-columns: minmax(170px, 1fr) 56px 84px 140px 132px; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.dd-files { overflow-x: auto; }
.dd-row:hover { background: color-mix(in srgb, var(--hover) 65%, transparent); }
.dd-row.head { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; position: sticky; top: 0; background: var(--main-bg, var(--bg-1)); z-index: 1; }
.dd-row .p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; font-size: 12.5px; }
.dd-row .r, .dd-row .s { color: var(--dim); font-variant-numeric: tabular-nums; }
.dd-row .a { display: flex; gap: 2px; justify-content: flex-end; opacity: 0; }
.dd-row:hover .a { opacity: 1; }
.dd-row .a button, .dd-row .a a { background: transparent; border: none; color: var(--dim); cursor: pointer; padding: 4px 7px; border-radius: 6px; font-size: 12px; }
.dd-row .a button:hover, .dd-row .a a:hover { color: var(--text); background: var(--hover); }
.dd-lock { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--accent); font-weight: 600; }
.dd-lock.mine { opacity: 0.85; }

.dd-changes { flex: 1; overflow-y: auto; padding: 10px 14px 20px; display: flex; flex-direction: column; gap: 6px; }
.dd-cl { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; color: var(--text); cursor: pointer; }
.dd-cl:hover { border-color: var(--accent); }
.dd-cl .num { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.dd-cl .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.dd-cl .meta { color: var(--dim); font-size: 12px; white-space: nowrap; }

.dd-empty, .dd-off { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--dim); text-align: center; padding: 24px; }
.dd-empty i, .dd-off i { font-size: 42px; opacity: 0.5; }
.dd-off h2 { color: var(--text); margin: 0; }
.dd-off p { max-width: 420px; line-height: 1.5; margin: 0; }

.dd-drop-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg-1) 72%, transparent); border: 2px dashed var(--accent); border-radius: 8px; font-weight: 800; font-size: 16px; color: var(--text); z-index: 30; pointer-events: none; }
.dd-toast { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--bg-2); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 8px 18px; font-size: 13px; box-shadow: 0 8px 26px rgba(0,0,0,0.4); z-index: 40; }

.dd-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 900; }
.dd-modal { width: min(640px, 94vw); max-height: 84vh; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: 0 24px 70px rgba(0,0,0,0.5); }
.dd-modal h2 { margin: 0 0 10px; font-size: 16px; display: flex; align-items: center; gap: 9px; }
.dd-modal h2 .muted { font-weight: 400; font-size: 12.5px; color: var(--dim); }
.dd-modal textarea { background: var(--bg-1); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: 13.5px; resize: vertical; margin-bottom: 10px; }
.dd-cl-desc { white-space: pre-wrap; color: var(--text); background: var(--bg-1); border-radius: 8px; padding: 9px 11px; font-size: 13.5px; margin: 0 0 10px; }
.dd-pend-list { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.dd-pend { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 10px; align-items: center; padding: 5px 8px; border-radius: 7px; font-size: 12.5px; }
.dd-pend:nth-child(odd) { background: color-mix(in srgb, var(--hover) 40%, transparent); }
.dd-pend .act { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
.dd-pend .act.add { color: var(--green, #4caf6e); }
.dd-pend .act.edit { color: var(--accent); }
.dd-pend .act.delete { color: #e5534b; }
.dd-pend .p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; }
.dd-pend .p .muted { color: var(--dim); }
.dd-pend .s { color: var(--dim); font-variant-numeric: tabular-nums; }
.dd-pend .dl { color: var(--dim); padding: 3px 6px; border-radius: 6px; }
.dd-pend .dl:hover { color: var(--text); background: var(--hover); }
.dd-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* Tools menu off-chip (owner sees Drydock even when the master switch is off) */
.dd-off-chip { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }

/* Compact rows well before true mobile: the fixed columns total ~450px, so on
   any window under ~1100px the 1fr name column collapsed to nothing and rows
   showed only sizes ("nameless rows" bug). */
@media (max-width: 1100px) {
  .dd-row { grid-template-columns: minmax(170px, 1fr) 64px 110px; }
  .dd-row .l, .dd-row.head span:nth-child(4), .dd-row.head span:nth-child(5) { display: none; }
  .dd-row .s { grid-column: 2 / -1; }
  .dd-row .a { grid-column: 2 / -1; grid-row: 1; justify-content: flex-end; }
  .dd-row:hover .s { visibility: hidden; } /* on hover, the actions take the size's spot */
}

/* Workspace chip on pending changelist headers */
.dd-cl-ws {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Files inside the depot tree (P4V-style) */
.dd-tnode.dd-tfile .dd-fic { color: var(--dim); }
.dd-tnode.dd-tfile .n { color: var(--dim); }
.dd-tnode.dd-tfile:hover .n { color: var(--text); }
.dd-tlock { margin-left: 6px; font-size: 10px; color: var(--accent); }

/* File viewer modal */
.dd-viewer { width: min(880px, 94vw); }
.dd-viewer h2 .muted { font-size: 12px; font-weight: 400; color: var(--dim); }
.dd-viewer-body {
  max-height: 62vh; overflow: auto; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; margin: 10px 0 0;
  font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.55; white-space: pre; color: var(--text);
}
.dd-viewer-img { display: flex; justify-content: center; padding: 14px; }
.dd-viewer-img img { max-width: 100%; max-height: 58vh; border-radius: 6px; }
.dd-viewer-load { display: flex; align-items: center; gap: 8px; color: var(--dim); font-family: inherit; }

/* Bulk folder import */
.dd-import { width: min(560px, 94vw); }
.dd-import-sum { margin: 4px 0 8px; font-size: 14px; font-weight: 600; }
.dd-import-note { margin: 0 0 10px; font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.dd-import-err { margin: 0 0 10px; font-size: 12.5px; color: #e5534b; }
.dd-import-bar { height: 10px; border-radius: 999px; background: var(--bg-1); border: 1px solid var(--line); overflow: hidden; margin: 8px 0 4px; }
.dd-import-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s; }

/* ---- P4V-style layout ---- */
.dd-toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 10px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.dd-tool { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; background: transparent; border: none; color: var(--dim); cursor: pointer; font-size: 10.5px; padding: 5px 10px; border-radius: 8px; min-width: 54px; }
.dd-tool i { font-size: 15px; }
.dd-tool:hover { background: var(--hover); color: var(--text); }
.dd-tool:disabled { opacity: 0.35; cursor: default; }
.dd-tool:disabled:hover { background: transparent; color: var(--dim); }
.dd-row.sel { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.dd-tsep { width: 1px; height: 28px; background: var(--line); margin: 0 6px; }
.dd-toolbar .dd-filter { margin-left: auto; max-width: 260px; }

.dd-addr { display: flex; align-items: center; padding: 5px 12px; border-bottom: 1px solid var(--line); font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--dim); background: var(--bg-1); white-space: nowrap; overflow-x: auto; }
.dd-addr button { background: transparent; border: none; color: var(--accent); cursor: pointer; padding: 1px 2px; font: inherit; }
.dd-addr button:hover { text-decoration: underline; }
.dd-addr-tail { opacity: 0.6; }

.dd-body { flex: 1; display: grid; grid-template-columns: 260px 1fr; min-height: 0; }
.dd-tree { border-right: 1px solid var(--line); overflow-y: auto; padding: 6px 4px 20px; background: var(--bg-2); }
.dd-tnode { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.dd-tnode:hover { background: var(--hover); }
.dd-tnode.sel { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.dd-tnode .n { overflow: hidden; text-overflow: ellipsis; }
.dd-tnode .c { margin-left: auto; font-size: 10.5px; color: var(--faint); }
.dd-caret { width: 12px; text-align: center; color: var(--dim); transition: transform 0.12s; font-size: 11px; }
.dd-caret.open { transform: rotate(90deg); }
.dd-caret.none { visibility: hidden; }
.dd-tnode .dd-fic { color: var(--accent); }
.dd-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dd-main .dd-files, .dd-main .dd-changes { flex: 1; overflow-y: auto; }

.dd-fic { margin-right: 8px; opacity: 0.85; }
.dd-row .dd-fic { color: var(--dim); }
.dd-dir { cursor: pointer; }
.dd-dir .p { font-weight: 600; font-family: inherit; }
.dd-dir .dd-fic { color: var(--accent); }
.dd-ftype { margin-left: 8px; color: var(--faint); font-size: 11px; }
.dd-badge { margin-left: 6px; background: var(--accent); color: var(--bg-1); border-radius: 999px; font-size: 10px; font-weight: 800; padding: 1px 6px; }

/* Pending file rows (P4V-style: badged icon + depot path + #base/head).
   Same minmax floor as .dd-row so paths never collapse to nothing. */
.dd-row.phead, .dd-row.prow { grid-template-columns: minmax(170px, 1fr) 70px; }
.dd-pact.add { color: var(--green, #4caf6e); }
.dd-pact.edit { color: var(--accent); }
.dd-pact.delete { color: #e5534b; }
.dd-pdepot { color: var(--faint); }

/* Inline changelist-description editing */
.dd-clhead .desc.editable { cursor: text; border-radius: 6px; padding: 1px 6px; margin: -1px -6px; }
.dd-clhead .desc.editable:hover { background: var(--hover); }
.dd-desc-edit {
  flex: 1; min-width: 160px; background: var(--bg-1); border: 1px solid var(--accent);
  border-radius: 6px; color: var(--text); font-size: 12.5px; padding: 2px 8px; outline: none;
}
.dd-row.phead { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; position: sticky; top: 0; background: var(--main-bg, var(--bg-1)); z-index: 1; }
.dd-row.prow { cursor: pointer; }
.dd-row .act { font-weight: 700; font-size: 11px; text-transform: uppercase; }
.dd-row .act.add { color: var(--green, #4caf6e); }
.dd-row .act.edit { color: var(--accent); }
.dd-row .act.delete { color: #e5534b; }
.dd-row .dim { color: var(--dim); font-size: 12px; }

@media (max-width: 760px) {
  .dd-body { grid-template-columns: 1fr; }
  .dd-tree { display: none; }
  .dd-tool span { display: none; }
}

/* ---- Pending tab: grouped changelists (P4V style) ---- */
.dd-pending { flex: 1; overflow-y: auto; padding: 4px 0 20px; }
.dd-ptoolbar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.dd-phint { margin-left: auto; font-size: 11.5px; color: var(--faint); }
.dd-clgroup { border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.dd-clgroup.sel .dd-clhead { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.dd-clhead { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; font-size: 13px; user-select: none; }
.dd-clhead:hover { background: var(--hover); }
.dd-clhead .dd-cico { color: #e0a53b; font-size: 12px; }
.dd-clhead .num { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.dd-clhead .who { color: var(--dim); }
.dd-clhead .desc { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-clhead .cnt { color: var(--faint); font-size: 11.5px; white-space: nowrap; }

/* ---- Right-click context menu ---- */
.dd-menu-scrim { position: fixed; inset: 0; z-index: 999; }
.dd-menu { position: fixed; z-index: 1000; min-width: 240px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px; box-shadow: 0 12px 34px rgba(0,0,0,0.5); }
.dd-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); font-size: 13px; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.dd-menu-item:hover:not(.disabled) { background: var(--accent); color: #fff; }
.dd-menu-item.disabled { color: var(--faint); cursor: default; }
.dd-menu-item.danger:hover:not(.disabled) { background: #e5534b; }
.dd-menu-item .sc { font-size: 11px; opacity: 0.7; }
.dd-cl-tickets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12.5px; }
/* The image editor window (ImageEditor.tsx). Frameless: the top bar drags the window. The numbers that
   matter to the window size, 56px tool strip, 48px bar, 16px around the picture, are the ones in
   apps/desktop/src/capture/editor.js. 8px between and around controls, on both axes. */
.ie {
  position: fixed; inset: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr);
  background: var(--bg-0); color: var(--text); font: 13px/1.3 'Segoe UI', system-ui, sans-serif; user-select: none; -webkit-user-select: none;
}
.ie[data-busy] { cursor: progress; }
.ie button { font: inherit; }

.ie-bar {
  grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: 8px; padding: 0 8px;
  background: var(--bg-1); border-bottom: 1px solid var(--line); -webkit-app-region: drag;
}
.ie-bar button, .ie-bar input, .ie-picker { -webkit-app-region: no-drag; }
.ie-opts { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ie-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.ie-btn, .ie-icon {
  height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text);
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ie-btn { padding: 0 12px; }
.ie-icon { width: 32px; padding: 0; display: inline-grid; place-items: center; color: var(--dim); }
.ie-btn:hover:not(:disabled), .ie-icon:hover:not(:disabled), .ie-btn.is-on { background: var(--hover); color: var(--text); }
.ie-btn.is-primary { background: var(--accent); border-color: transparent; color: var(--on-accent, #fff); }
.ie-btn.is-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, var(--text)); color: var(--on-accent, #fff); }
.ie-btn:disabled, .ie-icon:disabled { opacity: 0.5; cursor: default; }
.ie button:focus-visible, .ie input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ie-smooth { display: flex; align-items: center; gap: 8px; color: var(--dim); }
.ie-smooth input[type="range"] { width: 96px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; -webkit-app-region: no-drag; }
.ie-smooth output { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.ie-swatches, .ie-sizes { display: flex; align-items: center; gap: 8px; }
.ie-sizes { gap: 4px; }
.ie-swatch { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.5); }
.ie-swatch.is-on { outline: 2px solid var(--text); outline-offset: 2px; }
.ie-size { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--dim); display: inline-grid; place-items: center; cursor: pointer; }
.ie-size span { display: block; border-radius: 50%; background: currentColor; }
.ie-size:hover { background: var(--hover); }
.ie-size.is-on { background: var(--hover); color: var(--text); }

.ie-tools { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--bg-1); border-right: 1px solid var(--line); min-height: 0; }
.ie-tool { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--dim); display: grid; place-items: center; font-size: 15px; cursor: pointer; }
.ie-tool:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.ie-tool.is-on { background: var(--accent); color: var(--on-accent, #fff); }
.ie-tool:disabled { opacity: 0.4; cursor: default; }
.ie-tools-gap { flex: 1; }
.ie-step-icon { width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1; }

.ie-stage { position: relative; overflow: hidden; min-width: 0; min-height: 0; background: var(--bg-0); }
.ie-canvas { display: block; touch-action: none; }
.ie-zoom {
  position: absolute; left: 16px; bottom: 16px; height: 28px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-1); color: var(--dim); font-size: 12px; cursor: pointer;
}
.ie-zoom:hover { color: var(--text); background: var(--hover); }
.ie-text {
  position: absolute; z-index: 2; margin: 0; padding: 0; border: 1px dashed var(--accent); outline: none; background: transparent; resize: none; overflow: hidden;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-weight: 600; line-height: 1.25; white-space: pre; field-sizing: content; min-width: 2ch; user-select: text; -webkit-user-select: text;
}
.ie-toast {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px);
  padding: 12px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); box-shadow: var(--shadow-2); font-size: 13px;
}
.ie-link { padding: 0; border: 0; background: none; color: var(--accent); font-weight: 650; cursor: pointer; }
.ie-link:hover { text-decoration: underline; }

.ie-picker {
  position: absolute; top: calc(100% + 8px); right: 8px; z-index: var(--z-popover, 1000); width: 320px; max-width: calc(100% - 16px);
  display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); box-shadow: var(--shadow-2);
}
.ie-picker-search, .ie-picker-caption {
  height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-1); color: var(--text); font: inherit; user-select: text; -webkit-user-select: text;
}
.ie-picker-search::placeholder, .ie-picker-caption::placeholder { color: var(--dim); }
/* The list is the composer's suggestion menu (.mention-pop, .mention-row): here in the flow, inside the picker's own frame. */
.ie-picker .ie-ac { position: static; margin: 0; max-height: min(calc(7 * 32px + 2 * var(--sp-1)), 264px); border: 0; background: transparent; box-shadow: none; z-index: auto; }
.ie-picker .mention-row { flex: 0 0 auto; }
.ie-picker .mention-row > span:not(.mu):not(.ac-channel):not([class*="avatar"]) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ie-picker-empty { padding: 8px; color: var(--dim); }
.ie-picker-status { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12px; }
.ie-picker-status.is-error { color: var(--danger-text, var(--danger)); }

.ie-failed { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.ie-failed p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .ie * { transition: none !important; animation: none !important; } }
/* The video editor window (VideoEditor.tsx), on top of imageEditor.css (the bar, buttons, toast and picker are the
   image editor's). Frameless, the top bar drags the window. Layout numbers match apps/desktop/src/capture/videomath.js:
   48px bar, 180px timeline, 16px around the picture. 8px between and around controls, on both axes. */
.ie.ve { grid-template-columns: minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr) 180px; }

.ve-stage { position: relative; min-width: 0; min-height: 0; padding: 16px; background: var(--bg-0); display: grid; }
.ve-video { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; background: var(--bg-1); border-radius: 8px; cursor: pointer; }
.ve-video:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ve-timeline { display: flex; flex-direction: column; gap: 8px; padding: 16px; min-height: 0; background: var(--bg-1); border-top: 1px solid var(--line); }
.ve-transport { display: flex; align-items: center; gap: 8px; height: 32px; }
.ve-time { margin-left: 8px; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.ve-time-dim { color: var(--dim); }
.ve-kept { margin-left: auto; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ve-strip { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 8px; background: var(--bg-2); touch-action: none; cursor: pointer; }
.ve-thumbs { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; display: block; }
.ve-shade { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--bg-0) 70%, transparent); pointer-events: none; }
.ve-shade.is-left { left: 0; border-radius: 8px 0 0 8px; }
.ve-shade.is-right { right: 0; border-radius: 0 8px 8px 0; }
.ve-gap {
  position: absolute; top: 0; bottom: 0; cursor: pointer;
  background: color-mix(in srgb, var(--bg-0) 70%, transparent); border-left: 1px solid var(--text); border-right: 1px solid var(--text);
}
.ve-gap:hover { background: color-mix(in srgb, var(--bg-0) 50%, transparent); }
.ve-cutting { position: absolute; top: 0; bottom: 0; pointer-events: none; background: color-mix(in srgb, var(--danger, #ed4245) 38%, transparent); border-left: 2px solid var(--danger, #ed4245); }
.ve-handle {
  position: absolute; top: -4px; bottom: -4px; width: 12px; padding: 0; border: 0; background: var(--accent); cursor: ew-resize; display: grid; place-items: center; z-index: 2;
}
.ve-handle::after { content: ''; width: 2px; height: 24px; border-radius: 1px; background: var(--on-accent, #fff); opacity: 0.85; }
.ve-handle.is-in { margin-left: -12px; border-radius: 8px 0 0 8px; }
.ve-handle.is-out { border-radius: 0 8px 8px 0; }
.ve-handle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.ve-playhead { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); box-shadow: 0 0 0 1px var(--bg-0); pointer-events: none; z-index: 3; }
.ve-playhead::before { content: ''; position: absolute; top: 0; left: -5px; width: 12px; height: 8px; border-radius: 3px; background: var(--text); box-shadow: 0 0 0 1px var(--bg-0); }

/* The voice-over lane under the strip: one block per take, drawn where the picture it was spoken over is. Recording is red. */
.ve-lane { position: relative; flex: none; height: 28px; border-radius: 8px; background: var(--bg-2); }
.ve-take { position: absolute; top: 4px; bottom: 4px; min-width: 2px; border-radius: 4px; background: var(--accent); pointer-events: none; }
.ve-rec { position: absolute; pointer-events: none; background: var(--danger, #ed4245); }
.ve-lane .ve-rec { top: 4px; bottom: 4px; border-radius: 4px; }
.ve-strip .ve-rec { top: 0; bottom: 0; background: color-mix(in srgb, var(--danger, #ed4245) 38%, transparent); border-left: 2px solid var(--danger, #ed4245); border-radius: 0; }
.ve-vo.is-rec { background: var(--danger, #ed4245); border-color: transparent; color: #fff; }
.ve-vo i { margin-right: 8px; }

.ve-drag { cursor: grab; }
.ve-offer { width: max-content; }
.ve-offer-row { display: flex; align-items: center; gap: 8px; }

/* GIF: the three sizes (each with its height), a note when the kept part is over 5 s, then Save / Send to. */
.ve-gif { width: max-content; }
.ve-gif [role=radio][aria-checked=true] { border-color: var(--accent); }
.ve-gif-dim { margin-left: 8px; font-weight: 400; color: var(--dim); }
.ve-gif-note { color: var(--dim); font-size: 12px; }