/* Async web: layout fixes from the squads persona test (items 15, 18, 19, 22, 29 and the zoom 1.4 issues).
   Loaded last, so it wins over the older sheets. Nothing here changes behaviour. */

/* ---------- 15: pickers and menus are solid ---------- */
.menu, .menu--people, .menu--switcher, .menu--bell, .menu--due, .menu--tasks {
  background: #2B2E33 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
  z-index: 90;
}
.menu__item { touch-action: manipulation; -webkit-tap-highlight-color: rgba(10, 108, 255, .25); }
.menu__scroll { max-height: min(300px, 50vh); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.toast { z-index: 100; }
.pwa-prompt { z-index: 70; }

/* ---------- toasts and the Home Screen card never sit on the composer or the bottom bar ---------- */
@media (min-width: 761px) {
  .toast { left: auto; right: 24px; transform: none; bottom: 24px; max-width: min(420px, calc(100vw - 48px)); }
  .pwa-prompt { left: auto; right: 24px; top: 24px; bottom: auto; transform: none; width: min(380px, calc(100vw - 48px)); }
}
@media (max-width: 760px) {
  .toast { top: calc(60px + env(safe-area-inset-top)); bottom: auto; left: 12px; right: 12px; transform: none; max-width: none; flex-wrap: nowrap; }
  .toast > span:not(.toast__ink) { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .pwa-prompt { top: calc(112px + env(safe-area-inset-top)); bottom: auto; padding: 8px 12px; left: 12px; right: 12px; width: auto; transform: none; max-height: none; }
  /* the short version: the steps are one tap away on the You page */
  .pwa-prompt--coach .pwa-prompt__body ol, .pwa-prompt--coach .pwa-prompt__note { display: none; }
}

/* ---------- 29: a visible focus ring on every control ---------- */
a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible,
[role="button"]:focus-visible, [role="menuitem"]:focus-visible, [tabindex]:focus-visible, .rd-bell:focus-visible, .rd-orb:focus-visible {
  outline: 2px solid #6EA8FF !important; outline-offset: 2px !important;
}
input:focus-visible { outline: 2px solid #6EA8FF !important; outline-offset: 1px !important; }
/* a text field inside a framed box: ring the frame */
.project-write:focus-within, .rd-add__form:focus-within, .rd-add:focus-within, .inkbar__row:focus-within, .cx-cap:focus-within { outline: 2px solid #6EA8FF; outline-offset: 2px; }
.project-write__in:focus-visible, .rd-add__form input:focus-visible, .rd-add input:focus-visible, #cap-in:focus-visible { outline: 0 !important; }
.rd-top a:focus-visible, .rd-tabbar a:focus-visible, .rd-tabbar button:focus-visible { outline-offset: -3px !important; }

/* ---------- 19: which company you are in ---------- */
.rd-co { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; min-height: 40px; margin: -10px 0 16px; padding: 0 8px; color: var(--rd-text, #F2F3F4); font: 600 13px var(--rd-font, Inter, sans-serif); cursor: pointer; background: rgba(255, 255, 255, .05); }
.rd-co:hover { background: rgba(255, 255, 255, .09); }
.rd-co:focus-visible { outline: 2px solid #6EA8FF; outline-offset: 2px; }
.rd-co--static { cursor: default; }
.rd-co--static:hover { background: rgba(255, 255, 255, .05); }
.rd-co__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-co__tag { flex: none; padding: 1px 8px; background: rgba(255, 255, 255, .12); font-size: 11px; font-weight: 600; color: #C5C9CF; }
.rd-co .ico { width: 12px; height: 12px; flex: none; color: #A8ADB7; }
.rd-co--top { display: none; }
.menu--company { width: 280px; }
.menu--company .menu__item { height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.menu--company .co__role { margin-left: auto; font-size: 12px; color: #A8ADB7; }
.projects-co { display: flex; align-items: center; gap: 8px; margin: 24px 4px 8px; font-size: 15px; font-weight: 600; }
.projects-co:first-child { margin-top: 4px; }
.projects-co small { padding: 1px 8px; background: rgba(255, 255, 255, .12); font-size: 11px; font-weight: 600; color: #C5C9CF; }
.projects-co span { font-size: 12px; font-weight: 400; color: #A8ADB7; }
.projects-guest { display: inline-block; margin-left: 8px; padding: 0 8px; background: rgba(255, 255, 255, .12); font-size: 11px; font-weight: 600; color: #C5C9CF; }

/* ---------- 29: the project page uses the width on a big screen ---------- */
@media (min-width: 1280px) {
  .project-col:has(> .project-briefblock) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(320px, 4fr); column-gap: 56px; row-gap: 32px; align-items: start; max-width: 1500px; }
  .project-col:has(> .project-briefblock) > * { grid-column: 1; }
  .project-col:has(> .project-briefblock) > .project-briefblock { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 16px; }
  .project-col:not(:has(> .project-briefblock)) { max-width: 1100px; }
}

/* ---------- 18: touch targets of 44 px ---------- */
@media (pointer: coarse), (max-width: 760px) {
  .rd-bell, .iconbtn { min-width: 44px; width: auto; height: 44px; }
  .iconbtn.bell { width: 44px; }
  .rd-bell .bell__n { top: 6px; right: 6px; }
  .rd-top { gap: 4px; }
  .rd-top > a, .rd-top .rd-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; box-sizing: border-box; padding: 0 4px; }
  .rd-top > a:first-child { justify-content: flex-start; }
  .rd-link, a.rd-link, button.rd-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; padding-top: 0; padding-bottom: 0; }
  .rd-btn, .rd-btn--white { min-height: 44px; height: auto; }
  .rd-tabs a, .rd-tabs button, .tasks-filter a, .tasks-sw a, .projects-switch__seg a, .projects-switch__seg span { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
  .rd-tabs, .tasks-filter, .tasks-sw { gap: 4px 16px; flex-wrap: wrap; }
  .rd-tabs a, .rd-tabs button { padding-left: 8px; padding-right: 8px; min-width: 44px; justify-content: center; }
  .tasks-act { min-height: 44px; min-width: 56px; justify-content: center; }
  .tasks-card__t { display: flex; align-items: center; min-height: 44px; }
  .rd-nav, .rd-co, .rd-me__a, .rd-brand, .rd-keys { min-height: 44px; box-sizing: border-box; }
  .rd-brand { display: flex; align-items: center; margin-bottom: 16px; }
  .projects-card__open, .workspaces-project, .crumb a, .rd-note a, .meta a, .person__n { display: inline-flex; align-items: center; min-height: 44px; }
  .projects-card__open { display: flex; }
  .as-btn, .as-btn--sm, .as-btn--lg { min-height: 44px; --h: 44px; }
  .chip, .chip--due { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .mv-k, .mv-pick { min-height: 44px; height: auto; }
  .input, .select, textarea.input, .mv-in, .project-input, .projects-dlg__input { min-height: 44px; }
  .mv-ans { height: 44px; }
  .rd__title { min-height: 44px; }
  .project-write { height: 56px; }
  .project-write__in { height: 44px; }
  .project-write__plus { width: 44px; height: 44px; }
  .project-write__ink { width: 44px; height: 44px; margin-right: 0; }
  .project-write__ink img { margin: auto; }
  .project-menu button { height: 48px; }
  .menu__item { height: 48px; font-size: 15px; }
  .menu__scroll { max-height: min(320px, 45vh); }
  .toast__undo { min-height: 44px; padding: 0 8px; }
  .toast__x { min-width: 44px; min-height: 44px; }
  .stampbtn, .rd-row, .rd-check { min-height: 44px; }
  /* Delete is a menu now; keep clear air between the main actions */
  .acts.tdacts { gap: 12px; flex-wrap: wrap; }
  .acts.tdacts .acts__gap { flex: 1 1 24px; }
  /* Send and Cancel sit side by side, never one under the other */
  .mv-row, .mv-w__f { flex-wrap: wrap; gap: 12px; }
  .mv-row .mv-in, .mv-w__f .mv-in { flex: 1 1 100%; }
  .mv-w__f { width: 100%; justify-content: space-between; }
  .mv-w__f .as-btn { flex: 1 1 120px; }
  .mv-w__f [data-mv-hcancel] { order: -1; }
  .mv-row .as-btn { flex: 1 1 120px; }
}

/* ---------- zoom 1.4 and narrow phones (320 px, large text) ---------- */
@media (max-width: 760px) {
  .rd-co--top { display: flex; margin: 0 0 4px; min-height: 44px; }
  .rd-top > .rd-link { display: none; }
  .rd-week { flex-wrap: wrap; height: auto; min-height: 48px; max-width: 100%; box-sizing: border-box; }
  .rd-week span.i { padding: 8px 12px; white-space: normal; flex: 1 1 auto; }
  .rd-add__form, .rd-add { flex-wrap: wrap; }
  .rd-add__form input, .rd-add input { flex: 1 1 100%; min-width: 0; text-overflow: ellipsis; }
  .rd-add__form .rd-btn, .rd-add .rd-btn { flex: 1 1 100%; }
  html, body { max-width: 100%; overflow-x: clip; }
  .tasks-page, .tasks-wrap, #view { min-width: 0; max-width: 100%; }
  .home-hide-sm { display: inline !important; }
  .home-hide-sm { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block !important; vertical-align: bottom; color: #A8ADB7; }
}
@media (max-width: 760px) and (pointer: coarse) {
  .inkbar, .inkbar__row, .inkbar__panel { max-width: 100vw; box-sizing: border-box; }
}

/* ---------- 22: the loader before the first screen (see index.html) ---------- */
@media (prefers-reduced-motion: reduce) { .boot__b { animation: none; } }

/* ---------- 29: the "?" shortcuts sheet ---------- */
.kb-sheet { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; background: rgba(0, 0, 0, .66); overflow-y: auto; }
.kb-sheet__box { width: 100%; max-width: 440px; box-sizing: border-box; padding: 24px; background: #2B2E33; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 14px 40px rgba(0, 0, 0, .6); color: #F2F3F4; }
.kb-sheet__box h2 { margin: 0 0 16px; font: 700 20px/26px Inter, sans-serif; }
.kb-sheet__list { margin: 0 0 16px; display: grid; gap: 4px; }
.kb-sheet__list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; font-size: 14px; }
.kb-sheet__list dt { margin: 0; flex: none; }
.kb-sheet__list dd { margin: 0; color: #C5C9CF; text-align: right; }
.kb-sheet kbd { display: inline-block; min-width: 22px; padding: 2px 8px; box-sizing: border-box; background: rgba(255, 255, 255, .12); font: 600 12px/18px ui-monospace, Menlo, monospace; text-align: center; }
.kb-sheet__x { all: unset; box-sizing: border-box; min-height: 44px; padding: 0 24px; display: inline-flex; align-items: center; background: #F2F3F4; color: #08090A; font: 600 14px Inter, sans-serif; cursor: pointer; }
.kb-sheet__x:focus-visible { outline: 2px solid #6EA8FF; outline-offset: 2px; }
.rd-keys { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; font: 500 12px Inter, sans-serif; color: #A8ADB7; cursor: pointer; }
.rd-keys:hover { color: #F2F3F4; }
.rd-keys kbd { padding: 0 8px; background: rgba(255, 255, 255, .12); font: 600 11px/16px ui-monospace, Menlo, monospace; }
@media (pointer: coarse) { .rd-keys { display: none; } }

/* a tablet beside the sidebar: three board columns are too narrow, so they wrap */
@media (min-width: 761px) and (max-width: 1180px) {
  .tasks-board { flex-wrap: wrap; }
  .tasks-col { flex: 1 1 300px; }
}

/* ---------- hand over: a confirm step, and a list that is hard to mis-tap ---------- */
.hc-overlay { z-index: 95; align-items: center; padding: 16px; }
.hc { max-width: 440px; background: #1F2125; }
.hc__who { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hc__who .as-avatar { width: 48px; height: 48px; font-size: 16px; flex: none; }
.hc__name { font-size: 18px; }
.hc h2 { font-size: 20px; line-height: 26px; overflow-wrap: anywhere; }
.hc__sub { margin: 0 0 12px; }
.hc__note .input { min-height: 44px; font-size: 16px; }
.hc__btns { display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px; }
.hc__btn { min-height: 48px; min-width: 120px; }
@media (max-width: 480px) { .hc__btns { flex-direction: column-reverse; } .hc__btn { width: 100%; } }
.inkbar__warn { margin: 8px 0 0; color: var(--text); font-size: 13px; }
.menu--people .menu__scroll { scroll-behavior: auto; }
@media (pointer: coarse) {
  .menu--people .menu__item { min-height: 48px; height: auto; margin-bottom: 4px; font-size: 16px; }
  .menu--people .menu__scroll { max-height: min(320px, 55vh); padding-bottom: 8px; }
}
/* v1.6: the "Not on this project? Ask Jordan to add someone" line under a person picker wraps instead of cutting off */
.menu__item.menu__item--wrap { height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; line-height: 1.3; white-space: normal; align-items: flex-start; }
.menu__item.menu__item--wrap svg { margin-top: 1px; flex: none; }

/* A button that is a link keeps its button colours: page link colours never paint over them (white on white). */
a.as-btn--primary, a.as-btn--primary:link, a.as-btn--primary:visited, a.as-btn--primary:hover, a.as-btn--primary:active { color: var(--on-primary); text-decoration: none; }
a.as-btn--accent, a.as-btn--accent:link, a.as-btn--accent:visited, a.as-btn--accent:hover, a.as-btn--accent:active { color: var(--on-accent); text-decoration: none; }
a.as-btn--secondary, a.as-btn--secondary:link, a.as-btn--secondary:visited, a.as-btn--quiet, a.as-btn--quiet:link, a.as-btn--quiet:visited { text-decoration: none; }

/* Next and previous task (js/tasknav.js): a small pill at the bottom, above the phone tab bar */
.tasknav { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(28, 30, 34, .92); border: 1px solid var(--hair-2, rgba(255,255,255,.12)); box-shadow: 0 8px 24px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tasknav__b { all: unset; box-sizing: border-box; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 24px; line-height: 1; color: var(--text, #F2F3F4); cursor: pointer; }
.tasknav__b:hover:not([disabled]) { background: rgba(255,255,255,.08); }
.tasknav__b:focus-visible { outline: 2px solid var(--focus, #3d7cff); outline-offset: 2px; }
.tasknav__b[disabled] { opacity: .3; cursor: default; }
.tasknav__n { min-width: 64px; padding: 0 4px; text-align: center; font-size: 13px; color: var(--text-2, #A5A9B0); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .tasknav { bottom: calc(84px + env(safe-area-inset-bottom)); } }
/* =====================================================================================================================
   Spacing system (see the roles in tokens.css). One 8-point grid, 4 for a tight pair.
   - A panel pads 16 inside (24 for a big card). Nothing sits closer than 8 to a panel border.
   - Siblings on a line sit 8 apart (4 for an icon and its label). Stacked blocks sit 16 apart, sections 24.
   - On a phone the page edge is 16 and the older screens do not add a second inset on top of it.
   - A tap target is 44 on a phone and its hit area never overlaps its neighbour's.
   ===================================================================================================================== */
.rd-head__text { padding: 0; }
.rd-tabs a, .rd-tabs button { padding-bottom: var(--space-3); }
.pill { padding: 0 var(--space-3); }
.chip, .cx-chip { padding-left: var(--space-2); padding-right: var(--space-2); }
.field { gap: var(--space-2); }
.section__head { margin: 0 0 var(--space-2); }
.section__head:not(:first-child) { margin-top: var(--space-5); }
.section__head + .panel, .section__head + .list { margin-top: 0; }
.panel + .section__head, .section + .section { margin-top: var(--space-5); }

/* rows that hold a name, a chip and a button never run into each other, and wrap before they would */
.person { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
.person__body { flex: 1 1 160px; }
.person__name { flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.person__meta { margin-top: var(--space-1); }
.person .chip, .spedit .chip, .youform .chip { flex: none; }
.person > .as-btn, .person > .person__n, .person > .person__acts { margin-left: auto; }
.person__acts { gap: var(--space-2); }
@media (max-width: 520px) {
  .person { flex-wrap: wrap; }
  .person > .as-btn, .person > .person__n, .person > .person__acts { margin-left: 0; }
}
.youform .formactions { gap: var(--space-2); }
.nt-small { margin: var(--space-4) 0 0; }
.nt-how { margin-top: var(--space-4); }

/* task detail */
.prow { grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--space-2); padding: var(--space-1) 0; }
.fl-none { margin: 0 0 var(--space-5); }
.fl-head { margin-bottom: var(--space-3); }

/* Connect your AI: the choices fill the card on a phone */
@media (max-width: 760px) {
  .cx-guide { align-items: stretch; }
}

/* the rows on the workspaces and activity lists keep a gap between a time, a name and what follows */
.workspaces-time { margin-right: var(--space-2); }
.workspaces-what .rd-muted { margin-left: var(--space-1); }
.workspaces-line { padding: var(--space-1) 0; }

/* stacked list rows keep a hairline of air so a tap on one never lands on the next */
.list .rowlink + .rowlink { margin-top: var(--space-1); }

/* phone */
@media (max-width: 760px) {
  /* the older screens sit in the same 16px page edge as the new ones; the page inside them adds none of its own */
  .rd-main.rd-legacy .page { padding-left: 0; padding-right: 0; }
  .rd-main.rd-legacy .bar { padding-left: 0; padding-right: 0; }
  .rd-main.rd-legacy .pills { padding-left: 0; padding-right: 0; }
  .as-row { height: auto; min-height: 44px; }
  .stampbtn { width: 44px; height: 44px; min-height: 44px; margin: 0 0 0 calc(var(--space-2) * -1); }
  .card__title .stampbtn { margin: 0 0 0 calc(var(--space-2) * -1); }
  .rd-week { gap: 0; }
  .rd-week span.i { padding: var(--space-2) var(--space-3); }
  .rd-week span.sep { display: none; }
}
/* a row inside a padded form panel does not pad twice */
.youform > .person, .spedit > .person { padding-left: 0; padding-right: 0; }