/* Studio's own rules, on the live app's look (tide.css, loaded first). Screens not yet brought over to the live
   markup keep their studio- classes, drawn here in Tide's colors and type so every screen reads as one app. */
:root { --paper: var(--bg); --accent: var(--pri); --warn: var(--amber); --bad: var(--red); --ok: var(--pop-ok-ink); }
main { padding: max(22px, env(safe-area-inset-top)) 16px 150px; max-width: 720px; margin: 0 auto; }
.studio-app.on-today { padding-top: 58px; }   /* room for the top pill */
@media (max-width: 860px) { .studio-app.on-proj { padding-top: 54px; } }   /* room for a project's slim bar, fixed at the top (v487) */
/* Staging's banner (docs/plans/staging-site.md): a strip under the status bar, with everything pinned to the top moved down by its height */
.studio-app.staged, .staging-banner { --banner: 18px; --sat: calc(env(safe-area-inset-top, 0px) + var(--banner)); }
html.sa .studio-app.staged, html.sa .staging-banner { --sat: calc(max(env(safe-area-inset-top), 50px) + var(--banner)); }
.studio-app.staged { margin-top: var(--banner); }
.studio-app.staged .toppill { margin-top: var(--banner); }
html.sa .studio-app.staged .toppill { margin-top: 0; }   /* there the pill already sits from --sat */
.staging-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 90; box-sizing: border-box; height: var(--sat);
  padding-top: calc(var(--sat) - var(--banner)); line-height: var(--banner); text-align: center; font-size: 11.5px; font-weight: 600;
  letter-spacing: .03em; background: var(--amber); color: var(--bg); pointer-events: none; }
.rxlift.mrow { position: fixed; }
.pp-more { border: 0; background: none; color: inherit; font: inherit; font-size: 13px; letter-spacing: 0; text-transform: none;
  text-decoration: underline; padding: 10px 0; cursor: pointer; }   /* live's inline style on People's All / Less */
.sub.pp-tight { margin-top: -6px; }   /* live's inline style under a field on Edit details */
.sub.pp-lead { margin-top: -4px; }   /* and atop Same person? */
.rlrow > svg { width: 18px; height: 18px; color: var(--faint); flex: none; }   /* the Email log's chevron, which live leaves unsized */   /* live's lift sits in an empty body, where relative and fixed agree; here the page flows */
svg.ic-sw { stroke-width: var(--sw, 1.7); }
.ic-acc { fill: var(--acc); stroke: none; }
.studio-app h1:not(.wrap h1) { margin: 4px 0 12px; }
.studio-app h2:not(.wrap h2) { margin: 28px 0 8px; }
.studio-message { color: var(--muted); font-size: 15px; line-height: 1.5; }
.studio-signin { display: flex; flex-direction: column; justify-content: center; min-height: 80vh; }
.studio-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.studio-button { min-height: 44px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--pri); background: var(--pri);
  color: var(--pri-ink); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; white-space: nowrap; cursor: pointer; }
.studio-button:hover { background: var(--pri-dark); }
.studio-button.quiet { background: var(--card); border-color: var(--line); color: var(--pri-dark); }
.studio-button.quiet:hover { border-color: var(--hover); background: var(--card); }
.studio-button:disabled { opacity: 0.5; cursor: default; }
.studio-list { color: var(--muted); font-size: 15px; line-height: 1.6; padding-left: 20px; }
.studio-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 16px 0 0; }
.studio-sub { color: var(--muted); font-size: 14px; }
.studio-back, .studio-link { background: none; border: 0; padding: 4px 0; color: var(--pri); font: inherit; font-size: 15px; cursor: pointer; }
.studio-link + .studio-link { margin-left: 14px; }
.studio-search { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--field);
  color: var(--ink); font: inherit; font-size: 16px; margin: 4px 0 12px; }
.studio-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.studio-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.studio-pill { min-height: 40px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-size: 13px; cursor: pointer; }
.studio-pill.on { background: var(--pri-soft); border-color: transparent; color: var(--pri-dark); }
.studio-cards { display: flex; flex-direction: column; gap: 8px; }
.studio-card, .studio-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left;
  border: 0; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); color: var(--ink); font: inherit;
  padding: 16px 18px; cursor: pointer; }
.studio-card-name { font-size: 16px; font-weight: 500; }
.studio-card-line { color: var(--muted); font-size: 13px; }
.studio-pin { font-size: 14px; }
.studio-rows { list-style: none; padding: 0; margin: 8px 0; }
.studio-rows li + li { border-top: 1px solid var(--line); }
.studio-row-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 0; }
.studio-row-item > span:first-child { flex: 1 1 60%; }
.studio-figure { font-variant-numeric: tabular-nums; color: var(--ink); }
.studio-row-actions { flex-basis: 100%; }
.studio-timer { border: 1px solid var(--line); border-radius: 16px; padding: 4px 16px 16px; margin: 8px 0 16px; }
.studio-timer-name { border: 0; padding: 0; margin: 4px 0 0; font-size: 22px; }
.studio-clock { font-size: 44px; font-variant-numeric: tabular-nums; margin: 8px 0 0; letter-spacing: 0.02em; }
.studio-timer .studio-actions { justify-content: flex-start; margin-top: 12px; flex-wrap: wrap; }
.studio-badge { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--accent);
  color: var(--paper); font-size: 12px; line-height: 18px; }
.sheet .sbody > .studio-sheet-name, .sbody > .studio-message { margin: 0; }
.studio-fields { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.studio-fields label, .studio-note { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 13px; }
.studio-fields input, .studio-fields select, .studio-note textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--field);
  border: 1px solid var(--line); border-radius: 14px; min-height: 48px; padding: 10px 12px; min-width: 96px; }
.studio-note textarea { width: 100%; }
.studio-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.studio-choices .studio-button { width: 100%; }
.studio-signin .studio-actions { justify-content: flex-start; }

/* Hours */
.studio-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.studio-link:disabled { color: var(--muted); opacity: 0.5; cursor: default; }
.studio-dates { margin: 12px 0 4px; }
.studio-date { font-size: 16px; text-align: center; }
.studio-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 8px 0 12px; }
.studio-strip-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border: 1px solid transparent;
  border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.studio-strip-day.today { color: var(--ink); }
.studio-strip-day.on { border-color: var(--accent); color: var(--accent); }
.studio-strip-n { font-size: 17px; }
.studio-strip-hours { font-size: 12px; font-variant-numeric: tabular-nums; }
.studio-total { border: 1px solid var(--line); border-radius: 16px; padding: 4px 16px 12px; margin: 8px 0 16px; }
.studio-total-value { font-size: 34px; font-variant-numeric: tabular-nums; margin: 4px 0 0; }
.studio-total .studio-sub { margin: 4px 0 0; }
.studio-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 0;
  background: none; border: 0; color: var(--ink); font: inherit; font-size: 17px; text-align: left; cursor: pointer; }
.studio-line-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.studio-line-text .studio-card-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; margin: 12px 0; }
.studio-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-height: 140px;
  background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.studio-bar i { display: block; width: 70%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--accent); }
.studio-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 8px 0 12px; }
.studio-calendar-head { text-align: center; color: var(--muted); font-size: 12px; }
.studio-calendar-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; min-height: 44px;
  border: 1px solid transparent; border-radius: 8px; background: var(--line); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.studio-calendar-day.l1 { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.studio-calendar-day.l2 { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.studio-calendar-day.l3 { background: color-mix(in srgb, var(--accent) 65%, transparent); color: var(--paper); }
.studio-calendar-day.l4 { background: var(--accent); color: var(--paper); }
.studio-calendar-day.today { border-color: var(--ink); }
.studio-stepper { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 12px 0; }
.studio-stepper .studio-button { padding: 10px 12px; }
.studio-stepper .studio-figure { font-size: 20px; min-width: 88px; text-align: center; }
.studio-button.danger { border-color: #a5483f; color: #a5483f; }

/* Money: Payments */
.studio-deposit { border: 1px solid var(--line); border-radius: 14px; padding: 4px 16px 14px; margin: 12px 0; }
.studio-deposit-title { font-size: 18px; margin: 12px 0 2px; }
.studio-invoice { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.studio-invoice small { font-size: 13px; color: var(--muted); }
.studio-invoice.exact { border-color: var(--accent); }
.studio-invoice.on small { color: var(--accent); }
.studio-check { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 15px; margin: 12px 0 0; }
.studio-wrap { flex-wrap: wrap; }

/* Money and invoices (slice 13) */
.studio-hero { border: 1px solid var(--line); border-radius: 16px; padding: 4px 16px 12px; margin: 8px 0 16px; }
.studio-hero .studio-sub { margin: 8px 0 0; }
.studio-hero-figure { font-size: 34px; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.studio-figure-row { cursor: default; }
.studio-line-title { color: var(--ink); }
.studio-figure.studio-warn, .studio-warn { color: var(--warn); }
.studio-invoice-row[data-tone="due"] .studio-card-line { color: var(--warn); }
.studio-invoice-row[data-tone="bad"] .studio-card-line { color: var(--bad); }
.studio-payment-row[data-tone="ok"] .studio-card-line { color: var(--ok); }
.studio-payment-row[data-tone="due"] .studio-card-line { color: var(--warn); }
.studio-payment-row[data-tone="bad"] .studio-card-line { color: var(--bad); }
.studio-struck { text-decoration: line-through; color: var(--muted); }
.studio-chart { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin: 12px 0 4px; }
.studio-chart button { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; height: 100%; }
.studio-chart button i { display: block; width: 100%; max-width: 36px; border-radius: 6px 6px 2px 2px; background: var(--accent); }
.studio-chart button.dim i { opacity: 0.35; }
.studio-chart button b { font-weight: 400; }
.studio-axis { display: flex; gap: 6px; color: var(--muted); font-size: 12px; }
.studio-axis span { flex: 1; text-align: center; }
.studio-health { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; width: min(140px, 30%); }
.studio-meter { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.studio-meter i { display: block; height: 100%; background: var(--accent); }
.studio-meter.warn i { background: var(--warn); }
.studio-meter.over i { background: var(--bad); }
.studio-meter { position: relative; }
.studio-meter b.rhun { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(233,127,44,.55), rgba(233,127,44,.55) 4px, transparent 4px, transparent 8px); }
.studio-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 32px 0 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.studio-head h2 { margin: 0; padding: 0; border: 0; }
.studio-sections { margin-top: 24px; }
.studio-sums { display: flex; gap: 8px; margin: 8px 0; }
.studio-sum { flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.studio-sum small { color: var(--muted); font-size: 13px; }
.studio-sum b { font-weight: 400; font-size: 18px; font-variant-numeric: tabular-nums; }
.studio-sum b.studio-due { color: var(--warn); }
.studio-sheet-name { font-size: 19px; line-height: 1.35; margin: 6px 0 0; }
/* drafting and reviewing an invoice */
.studio-progress { height: 3px; background: var(--line); border-radius: 2px; margin: 12px 0 4px; overflow: hidden; }
.studio-progress i { display: block; height: 100%; background: var(--accent); }
.studio-question { font-weight: 400; font-size: 21px; line-height: 1.3; margin: 8px 0 4px; }
.studio-pick.on { border-color: var(--accent); }
.studio-answers .studio-line { border-bottom: 1px solid var(--line); }
.studio-answer { text-align: right; overflow-wrap: anywhere; }
.studio-none { color: var(--muted); font-style: italic; }
.studio-note-box { border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px; margin: 8px 0; }
.studio-letter { white-space: pre-wrap; border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 8px 0;
  font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.studio-button.studio-danger { border-color: var(--bad); color: var(--bad); }
.studio-add .studio-line-title { color: var(--accent); }
.studio-choices a.studio-button { text-align: center; }
.studio-stack { flex-direction: column; }
.studio-stack label, .studio-stack input { width: 100%; }
.studio-look-image { display: block; max-width: 160px; max-height: 64px; margin-top: 6px; }
.studio-fields textarea { font: inherit; font-size: 17px; color: var(--ink); background: transparent; width: 100%; min-height: 96px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
/* Today's cards */
.studio-today-cards { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 16px; }
.studio-today-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.studio-today-card[data-tone="warn"] .studio-eyebrow { color: var(--red); }
.studio-today-card[data-tone="act"] .studio-eyebrow { color: var(--pri); }
.studio-today-card[data-tone="quiet"] { opacity: 0.85; }
.studio-today-card .studio-eyebrow { margin: 0; font-size: 11px; letter-spacing: .12em; }
.studio-today-card .studio-card-name { display: block; margin: 6px 0 2px; font-size: 17px; }
.studio-today-card .studio-actions { margin-top: 12px; flex-wrap: wrap; }
p.studio-note-box { padding: 10px 14px; }
.studio-payment-row { padding: 0; }
.studio-payment-row > .studio-line { flex: 1 1 100%; }
.studio-tone-warn, .studio-tone-due { color: var(--warn); }
.studio-tone-bad { color: var(--bad); }
.studio-tone-ok { color: var(--ok); }
.studio-button.armed { border-color: var(--warn); color: var(--warn); }
.studio-fields select { width: 100%; font: inherit; font-size: 17px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.studio-cheer { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.studio-cheer-card { width: 100%; max-width: 380px; background: var(--paper); border-radius: 20px; padding: 20px 20px 16px; text-align: center; animation: studio-cheer-in 0.25s ease-out; }
.studio-cheer-card .studio-hero-figure { margin: 4px 0; }
.studio-cheer-art { width: 160px; height: 120px; margin: 0 auto; display: block; }
.studio-cheer-art .studio-note rect, .studio-cheer-art .studio-note circle { fill: none; stroke: var(--ok); stroke-width: 3; }
.studio-cheer-art .studio-note text { fill: var(--ok); font-size: 16px; font-weight: 600; }
.studio-coin ellipse, .studio-coin rect { fill: #c9a227; }
.studio-coin ellipse.top { fill: #e3bf4a; }
.studio-coin { animation: studio-coin-drop 0.5s ease-in both; }
.studio-coin:nth-of-type(2) { animation-delay: 0.1s; } .studio-coin:nth-of-type(3) { animation-delay: 0.2s; }
.studio-coin:nth-of-type(4) { animation-delay: 0.3s; } .studio-coin:nth-of-type(5) { animation-delay: 0.4s; }
.studio-cheer-line { margin: 12px 0; color: var(--muted); }
.studio-cheer-line.ok { color: var(--ok); }
.studio-cheer-line.failed { color: var(--bad); }
@keyframes studio-cheer-in { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes studio-coin-drop { from { transform: translateY(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .studio-cheer-card, .studio-coin { animation: none; } }
.studio-dot { flex: none; width: 8px; height: 8px; border-radius: 4px; background: var(--accent); }
.studio-notes .studio-line { border-bottom: 1px solid var(--line); text-align: left; background: none; border-left: 0; border-right: 0;
  border-top: 0; color: inherit; font: inherit; cursor: pointer; }
.studio-chat { margin-top: 16px; padding-bottom: 96px; }
.studio-chat-list { display: flex; flex-direction: column; gap: 4px; }
.studio-chat-day { text-align: center; color: var(--muted); font-size: 13px; margin: 16px 0 4px; }
.studio-chat-new { text-align: center; color: var(--accent); font-size: 13px; border-top: 1px solid var(--accent); margin: 10px 0 2px; padding-top: 2px; }
.studio-chat-note { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; margin: 12px 24px;
  padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: 14px; }
.studio-chat-note.pause { background: color-mix(in srgb, #b3372b 10%, transparent); }
.studio-msg-row { display: flex; flex-direction: column; align-items: flex-start; }
.studio-msg-row.me { align-items: flex-end; }
.studio-msg-who { color: var(--muted); font-size: 12px; margin: 8px 4px 2px; }
.studio-msg { max-width: 80%; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); font: inherit; font-size: 16px; text-align: left; white-space: pre-wrap; cursor: pointer; }
.studio-msg-row.me .studio-msg { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.studio-msg.pending { opacity: 0.6; }
.studio-msg.removed { color: var(--muted); font-style: italic; cursor: default; }
.studio-msg-quote { display: block; font-size: 13px; opacity: 0.75; border-left: 2px solid currentColor; padding-left: 6px; margin-bottom: 4px; }
.studio-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 4px; }
.studio-react { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 15px; padding: 2px 8px; cursor: pointer; }
.studio-react.on { border-color: var(--accent); }
.studio-react-n { font-size: 12px; margin-left: 3px; color: var(--muted); }
.studio-composer { position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); padding: 8px 16px;
  background: var(--paper); border-top: 1px solid var(--line); max-width: 720px; margin: 0 auto; }
.studio-composer-bar { display: flex; gap: 8px; align-items: flex-end; }
.studio-composer textarea { flex: 1; font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); resize: none; }
.studio-reply-bar { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 13px; margin: 0 0 6px; }
.studio-reply-bar button { border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.studio-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.studio-snooze-bell { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; padding: 2px 0; }
.studio-snooze { margin-top: 8px; }
.studio-glance { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 16px; background: none;
  border-left: 0; border-right: 0; color: inherit; font: inherit; cursor: pointer; }

/* uploading: the live rules for the folder rows in a sheet hang on #layer, which Studio's sheets don't have */
.sbody label.item.flpick{flex-direction:row;align-items:center;gap:12px;padding:10px 14px 10px 12px;margin:0;font-size:inherit;color:var(--ink)}
.sbody label.item.flpick.flkid{min-height:50px;padding-left:34px}

/* Calendar's one + and its menu (v321, CV_ADD), until the live look is copied again */
.cvplus{width:40px;height:40px;border-radius:50%;border:0;background:var(--pri);color:var(--pri-ink,#fff);display:grid;place-items:center;box-shadow:0 4px 12px rgba(43,106,143,.28);cursor:pointer;flex:none;padding:0}.cvplus svg{width:20px;height:20px}.cvplus:active{transform:scale(.94)}
#cvadd{position:fixed;inset:0;z-index:70}
#cvadd .sc{position:absolute;inset:0;background:rgba(20,28,34,.28);opacity:0;transition:opacity .2s}
#cvadd .pop{position:absolute;right:14px;width:min(320px,calc(100vw - 28px));background:var(--card);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.25);padding:6px;transform-origin:top right;transform:scale(.9);opacity:0;transition:transform .22s cubic-bezier(.2,.9,.25,1.1),opacity .16s}
#cvadd.on .sc{opacity:1}#cvadd.on .pop{transform:none;opacity:1}
#cvadd .it{display:flex;gap:12px;align-items:center;width:100%;border:0;background:none;padding:11px 12px;border-radius:12px;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
#cvadd .it:active{background:var(--hover,rgba(0,0,0,.05))}
#cvadd .ic{width:34px;height:34px;border-radius:10px;background:var(--pri-soft);color:var(--pri);display:grid;place-items:center;flex:none}#cvadd .ic svg{width:18px;height:18px}
#cvadd b{display:block;font-size:15.5px;font-weight:600}#cvadd small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px;line-height:1.3}
#cvadd .sep{height:1px;background:var(--line);margin:4px 10px}

/* Heads up on Today, and a grey Inbox count (live releases 319) */
.hu.today{margin-top:2px}
.toppill .dot.ib,.tab .dot.ib{background:color-mix(in srgb,var(--ink) 55%,var(--bg))}
/* (v483) the project sits under the clock again */
.tmxcard .tmxtop{justify-content:center}.tmxcard .tmxhd{justify-content:center;position:relative;min-height:64px}.tmxcard .tmxhd .tmxadj2{position:absolute;right:-4px;top:50%;transform:translateY(-50%)}.tmxpjc{display:flex;align-items:center;justify-content:center;gap:6px;max-width:100%;margin:-4px auto 2px;padding:4px 10px;border:0;border-radius:12px;background:none;font:inherit;font-size:20px;font-weight:600;color:var(--ink);cursor:pointer}.tmxpjc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.tmxpjc svg{flex:none;width:16px;height:16px;color:var(--muted)}.tmxpjc:active{background:var(--line2)}.tmxcard .tmxc{height:160px}
/* (v487) project page: a slim bar (back, then settings and the debrief sparkle under the thumb), the big name,
   whose court it's in, the people, underline tabs */
.pjhd.pjc{justify-content:space-between;padding-bottom:8px;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
.pjhd.pjc .pjbk{width:auto;height:40px;padding:0 6px 0 0;gap:2px;font-size:16px;color:var(--pri);background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;margin:0}
.pjhd.pjc .pjbk svg{width:18px;height:18px}
.pjacts{display:flex;gap:8px;flex:none}
.pjib{position:relative;width:40px;height:40px;border-radius:50%;border:0;background:var(--pri-soft);color:var(--pri);display:grid;place-items:center;cursor:pointer;touch-action:manipulation;padding:0;transition:transform .12s}
.pjib:active{transform:scale(.92)}.pjib svg{width:20px;height:20px}
.pjib .dot{position:absolute;top:7px;right:8px;width:9px;height:9px;border-radius:50%;background:#E97F2C;border:2px solid var(--pri-soft);box-sizing:content-box}
.pjtop,.pjtop *{text-align:left}
.pjeb{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.pjh1{display:block;border:0;background:none;padding:0;margin:2px 0 4px;font:inherit;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.12;color:var(--ink);text-align:left;cursor:pointer;overflow-wrap:anywhere}
.pjh1 small{display:block;font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted);margin-top:2px}
.pjcourt{display:flex;align-items:center;gap:7px;max-width:100%;border:0;background:none;padding:6px 0;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;touch-action:manipulation;min-width:0}
.pjcourt i{width:9px;height:9px;border-radius:50%;background:#E97F2C;flex:none}.pjcourt.them i{background:var(--muted)}
.pjcourt b{font-weight:600;color:#B25A16;flex:none}.pjcourt.them b{color:var(--ink)}
html[data-theme=dark] .pjcourt b{color:#F0A365}
.pjcourt .clip{min-width:0}.pjcourt svg{width:15px;height:15px;color:var(--muted);flex:none}
.pjwho{display:flex;align-items:center;gap:10px;border:0;background:none;padding:4px 0 2px;font:inherit;font-size:14px;color:var(--muted);cursor:pointer;max-width:100%;min-width:0}
.pjwho .avs{display:flex;flex:none}.pjwho .av{width:28px;height:28px;font-size:10.5px;border:2px solid var(--bg);margin-left:-8px}.pjwho .av:first-child{margin-left:0}
.pjwho .more{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--beige);border:2px solid var(--bg);margin-left:-8px;font-size:10.5px;font-weight:600;color:var(--muted)}
.pjtabs{position:sticky;top:0;z-index:6;box-shadow:0 -14px 0 var(--bg);display:flex;gap:2px;margin:10px -16px 4px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--bg);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pjtabs::-webkit-scrollbar{display:none}
.pjtabs button{flex:none;border:0;background:none;padding:12px 10px 10px;font:inherit;font-size:15px;color:var(--muted);border-bottom:2.5px solid transparent;display:flex;gap:5px;align-items:center;cursor:pointer;white-space:nowrap}
.pjtabs button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--pri)}
.pjtabs .n{font-size:12px;background:var(--line2,color-mix(in srgb,var(--ink) 8%,transparent));color:var(--muted);border-radius:999px;padding:1px 7px;font-weight:500}.pjtabs .n.hot{background:#E97F2C;color:#fff}
.ctey{display:flex;align-items:center;gap:7px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:#B25A16}.ctey i{width:9px;height:9px;border-radius:50%;background:#E97F2C}.ctey.them{color:var(--muted)}.ctey.them i{background:var(--muted)}
.ctbig{font-size:20px;font-weight:650;line-height:1.3;text-align:left}
/* (v487) a project's Tasks: one row with + New task; the sort call and suggestions quiet */
.pjadd{flex:none;border:0;border-radius:999px;background:var(--pri);color:var(--pri-ink,#fff);padding:8px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.studio-app.on-proj .tbar .gwrap{display:flex;align-items:center;gap:8px}
.pjsugrow{display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;padding:12px 14px;border-radius:14px;border:1px dashed var(--line);background:none;font:inherit;font-size:14px;color:var(--muted);text-align:left;cursor:pointer}
.pjsugrow svg{width:16px;height:16px;color:#E97F2C;flex:none}.pjsugrow span{flex:1;min-width:0}.pjsugrow b{color:var(--pri);font-weight:600}
.ts-call.pjq{background:none;border:1px dashed var(--line);box-shadow:none;color:var(--muted);min-height:0;padding:10px 14px;border-radius:14px;margin-top:10px}.ts-call.pjq .ic{background:none;color:#E97F2C;width:20px;height:20px;border-radius:0}.ts-call.pjq .ic svg{width:16px;height:16px}.ts-call.pjq b{color:var(--muted);font-weight:500}.ts-call.pjq .sub{display:none}.ts-call.pjq .go{background:none;color:var(--pri);box-shadow:none}
/* (v483) People: + Add, and more ways to reach someone */
.pp-top .pp-add{margin-left:auto;height:34px;padding:0 14px;font-size:14px}
.pp-ways{display:flex;flex-direction:column;background:var(--card);box-shadow:var(--shadow);border-radius:16px;overflow:hidden}
.pp-way{display:flex;align-items:center;gap:12px;width:100%;border:0;border-top:1px solid var(--line);background:none;padding:12px 14px;font:inherit;text-align:left;color:var(--ink)}.pp-way:first-child{border-top:0}
.pp-way .ic{flex:none;width:36px;height:36px;border-radius:11px;background:var(--pri-soft);color:var(--pri);display:grid;place-items:center}.pp-way .ic svg{width:18px;height:18px}
.pp-way b{display:block;font-size:14.5px;font-weight:600}.pp-way small{display:block;font-size:12.5px;color:var(--muted);line-height:1.35;margin-top:1px}.pp-way>svg{width:16px;height:16px;color:var(--faint);flex:none}
.pp-copy{display:flex;gap:8px;padding:10px 14px 12px;border-top:1px solid var(--line)}.pp-copy button{flex:1;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--card);font:inherit;font-size:13.5px;color:var(--pri-dark)}
/* (v488) a debrief: what may be another project's first, then each line with where it came from */
.dbpts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dbpts li{display:flex;gap:8px;align-items:flex-start;font-size:15px;line-height:1.45;padding:7px 0;border-top:1px solid var(--line)}
.dbpts li:first-child{border-top:0}
.dbpts li>i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--muted);margin-top:9px}
.dbpts li>span{flex:1;min-width:0}
.dbchips{display:flex;gap:4px;flex:none;flex-wrap:wrap;justify-content:flex-end;max-width:42%}
.dbsrc{display:inline-flex;align-items:center;gap:3px;border:0;font:inherit;font-size:12px;color:var(--pri);background:var(--pri-soft);border-radius:999px;padding:3px 8px;cursor:pointer;white-space:nowrap}
.dbsrc svg{width:13px;height:13px}
.dbflag{border-radius:16px;padding:12px 14px;background:rgba(233,127,44,.1);box-shadow:inset 0 0 0 1.5px #E97F2C;display:flex;flex-direction:column;gap:8px;text-align:left}
.dbflag .h{display:flex;gap:8px;align-items:center;font-size:15px;font-weight:600}
.dbflag .h svg{width:17px;height:17px;color:#B25A16;flex:none}
.dbflag .w{font-size:14px;color:var(--muted);line-height:1.4}
.dbflag .b{display:flex;gap:8px;flex-wrap:wrap}
.dbflag .b .btn{padding:0 14px}
.dbflag.done{background:none;box-shadow:inset 0 0 0 1px var(--line)}
.dbflag.done .h svg{color:var(--muted)}
.dbwait{display:flex;gap:6px;font-size:13.5px;color:var(--muted)}
.dbwait svg{width:15px;height:15px;color:#E97F2C;flex:none;margin-top:1px}
.dsline{margin:0 -20px;padding:10px 20px;background:rgba(233,127,44,.12);box-shadow:inset 3px 0 0 #E97F2C;font-size:15px;line-height:1.4;text-align:left}
.dsback{display:inline-flex;align-items:center;gap:2px;border:0;background:none;color:var(--pri);font:inherit;font-size:15px;padding:0;cursor:pointer;align-self:flex-start}
.dsback svg{width:16px;height:16px}
.dshead{display:flex;gap:10px;align-items:flex-start;text-align:left}
.dshead .ic{width:36px;height:36px;border-radius:10px;background:var(--pri-soft);color:var(--pri);display:grid;place-items:center;flex:none}
.dshead .ic svg{width:19px;height:19px}
.dshead b{display:block;font-size:16.5px;font-weight:650}
.dshead small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.dspos{position:relative;height:6px;border-radius:3px;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.dspos i{position:absolute;top:0;bottom:0;border-radius:3px;background:#E97F2C;min-width:6px}
.dsposl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:4px}
.dslines{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:6px 0;text-align:left}
.dslines.sc{position:relative;max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.dsl{display:flex;gap:10px;padding:6px 14px;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.dsl .n{flex:none;width:30px;color:var(--muted);opacity:.7;font-size:11.5px;padding-top:3px;text-align:right}
.dsl.hl{background:rgba(233,127,44,.12);box-shadow:inset 3px 0 0 #E97F2C}
.dsmore{display:block;border:0;background:none;color:var(--pri);font:inherit;font-weight:600;font-size:13.5px;padding:8px 14px 4px;cursor:pointer}
.pjflag{display:flex;align-items:center;gap:8px;width:100%;border:0;background:rgba(233,127,44,.1);color:var(--ink);border-radius:12px;padding:9px 12px;font:inherit;font-size:14px;text-align:left;cursor:pointer}
.pjflag svg{width:16px;height:16px;flex:none;color:#B25A16}
.pjflag .clip{flex:1;min-width:0}