/* Swarm — screen layer. tokens.css holds the world; this holds the rooms.
   Nothing here invents a value: every colour, size, radius and gap is a token from
   tokens.css, because DESIGN.md's spacing rhythm (4 8 16 24 32 48 72) and its 1px/2px
   /3px radius vocabulary are the whole reason the interface reads as one piece of
   stock rather than a dashboard. A 12px gap or a 6px radius in here is a bug. */

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 var(--s-3); }
@media (max-width: 820px) { .wrap { padding: 0 var(--s-2); } }

/* ==================================================================== the spine
   The signed-in shell is a folder spine on the left and the page beside it.
   It replaced a row of tabs across the top for three reasons, in order of how
   much they cost:

   1. A horizontal tab strip is a fixed budget. Eight destinations already filled
      it at 1024px and scrolled off the edge at phone width with no affordance
      saying so — Projects was simply invisible and nothing told you. A vertical
      list has room to grow and room to GROUP, which is what turns eight equal
      tabs into "three things you live in and five you visit".
   2. The centred 1060px column left ~380px of empty board on a 1440 screen while
      every list row inside it truncated. This is a tool people read lists in all
      day; the width belongs to the list.
   3. Where you are should not move. A tab strip reflows as counts change.

   The selected item is a divider tab turned on its side: page-tone fill, hairline,
   top and bottom corners rounded away from the page, and the right border removed
   so the tab and the page read as one piece of stock. Same silhouette as the
   horizontal tab it replaces, same reason. It is NOT a coloured left border — that
   is forbidden, and the tonal step is the system's answer for exactly this job. */

.app {
  display: grid;
  grid-template-columns: var(--rail-w, 236px) minmax(0, 1fr);
  min-height: 100vh;
  align-items: start;
}
:root { --rail-w: 236px; }
:root[data-rail="collapsed"] { --rail-w: 60px; }

.rail {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--rail);
  border-right: 1px solid var(--hairline);
  padding: var(--s-2) 0 var(--s-1);
  overflow: hidden auto;
  scrollbar-width: thin;
}
.rail__brand {
  display: flex; align-items: baseline; gap: var(--s-1);
  font-size: var(--t-18); font-weight: 800; letter-spacing: -0.01em;
  color: var(--text); padding: 0 var(--s-2) var(--s-2);
  min-height: 36px;
}
.rail__seal {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); font-weight: 700;
  letter-spacing: 0.08em; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--gold); color: var(--on-gold);
}
.rail__group { padding: var(--s-2) 0 0; }
/* D333: Settings sits below a hairline, after Spaces and Personal. */
.rail__divider { height: 1px; margin: var(--s-3) var(--s-2) var(--s-1); background: var(--hairline); }
.rail__group-label {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
  padding: 0 var(--s-2) var(--s-0);
}
.rail__item {
  display: flex; align-items: center; gap: var(--s-1);
  min-height: 36px; padding: 0 var(--s-2);
  margin-left: var(--s-1);
  color: var(--muted); text-decoration: none;
  font-size: var(--t-14); font-weight: 600;
  border: 1px solid transparent; border-right: none;
  border-radius: var(--r-spine);
  white-space: nowrap;
}
.rail__item:hover { background: var(--sunken); color: var(--text); }
.rail__item[aria-current="page"] {
  background: var(--surface); color: var(--text); font-weight: 700;
  border-color: var(--hairline);
}
.rail__item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* The glyph is a drawn mark, not an icon font and not an emoji — the system has
   one mono face and marks are set in it. */
.rail__mark { flex: none; width: 18px; height: 18px; }
.rail__item[aria-current="page"] .rail__mark { color: var(--gold-ink); }
.rail__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.rail__n {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); font-weight: 700;
  color: var(--muted); flex: none;
}
.rail__item[aria-current="page"] .rail__n { color: var(--text); }

/* ------------------------------------------------------------------ the tree
   A rail that is a tree of one record type (D072/D073). Three rules hold it
   together:

   1. **Indent is one variable.** `--d` is the depth, set on the row, and every
      other measurement derives from it. A tree whose indent is hard-coded per
      level is a tree that stops indenting at whatever level somebody stopped
      writing CSS.
   2. **The twist is always there, even when there is nothing to twist.** An
      invisible placeholder keeps every label on the same left edge, so a folder
      with children and one without do not appear to sit at different depths.
   3. **The + appears on hover and on focus.** Hover alone is a control that does
      not exist for a keyboard, and `:focus-within` is what makes it exist.

   Deliberately NOT a connector line down the tree: at 236px a rule per level
   spends the width the labels need, and the indent already says what it would. */
.rail__node {
  display: flex; align-items: center; gap: 2px;
  padding-left: calc(var(--d, 0) * 14px);
}
.rail__node--wait .rail__label,
.rail__none {
  display: block; padding: 4px var(--s-2) 4px calc(var(--s-2) + 18px);
  margin-left: var(--s-1); font-size: var(--t-13); color: var(--faint);
}
.rail__item--node { flex: 1 1 auto; min-width: 0; margin-left: 0; }

.rail__twist {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 26px; margin-left: var(--s-1);
  padding: 0; background: none; border: 0; border-radius: var(--r-sm);
  color: var(--faint); cursor: pointer;
}
.rail__twist:hover { color: var(--text); background: var(--sunken); }
.rail__twist:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.rail__twist .sw-mark { transition: transform var(--d-state) var(--e); }
.rail__twist[aria-expanded="true"] .sw-mark { transform: rotate(90deg); }
/* Same box, no ink: the labels stay aligned whether a row has children or not. */
.rail__twist--none { pointer-events: none; }

.rail__mark--xs { width: 13px; height: 13px; }
.rail__emoji {
  flex: none; width: 18px; text-align: center;
  font-size: var(--t-14); line-height: 1;
}

/* The +, right-aligned, revealed on hover or focus.
   OPACITY ONLY, and this is the whole point of the rule. The first version used
   `visibility: hidden` to hide it at rest — and a `visibility: hidden` element
   cannot be focused, so `:focus-within` could never fire and the + was reachable
   by mouse and by nothing else. A control that exists only for people with a
   pointer is a control half the people who need it do not have (I-075).
   It keeps its box either way, so the row never reflows under the cursor. */
.rail__add {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: var(--s-1);
  padding: 0; background: none; border: 0; border-radius: var(--r-sm);
  color: var(--muted); cursor: pointer;
  opacity: 0;
  transition: opacity var(--d-state) var(--e);
}
.rail__node:hover .rail__add,
.rail__node:focus-within .rail__add,
.rail__group-label:hover .rail__add,
.rail__group-label:focus-within .rail__add { opacity: 1; }
.rail__add:hover { background: var(--sunken); color: var(--text); }
/* `:focus`, not `:focus-visible` — the button has to become visible whenever it
   takes focus, including from a script and from a screen reader's own navigation,
   not only when the browser decides a focus ring is warranted. */
.rail__add:focus {
  opacity: 1;
  outline: 2px solid var(--focus); outline-offset: -2px;
}
.rail__add--section { margin-left: auto; }

/* Four, then the rest. */
.rail__more {
  margin-left: var(--s-1); padding: 2px var(--s-1);
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--faint); font-size: var(--t-12); cursor: pointer; text-align: left;
}
.rail__more:hover { color: var(--text); background: var(--sunken); }
.rail__more:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Naming a new folder happens where the folder will be, not in a dialogue. */
.rail__new {
  flex: 1 1 auto; min-width: 0; margin-right: var(--s-1);
  padding: 3px var(--s-1);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--gold-ink); border-radius: var(--r-sm);
  font-family: var(--font-ui); font-size: var(--t-13);
}
.rail__new:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Every section folds. The label IS the control — a separate chevron to aim at is
   a second target for the same intention. */
.rail__fold {
  display: inline-flex; align-items: center; gap: var(--s-0);
  padding: 0; background: none; border: 0;
  color: inherit; font: inherit; letter-spacing: inherit;
  text-transform: inherit; cursor: pointer;
}
.rail__fold:hover { color: var(--text); }
.rail__fold:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rail__fold .sw-mark { transition: transform var(--d-state) var(--e); }
.rail__fold[aria-expanded="false"] .sw-mark { transform: rotate(-90deg); }

/* Collapsed rail: no labels, so no tree — the marks stay, the structure does not,
   because an indent with nothing to indent is a column of empty rows. */
:root[data-rail="collapsed"] .rail__node { padding-left: 0; }
:root[data-rail="collapsed"] .rail__twist,
:root[data-rail="collapsed"] .rail__add,
:root[data-rail="collapsed"] .rail__more,
:root[data-rail="collapsed"] .rail__node--wait { display: none; }

.rail__spacer { flex: 1 1 auto; min-height: var(--s-2); }
.rail__foot {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: var(--s-1); border-top: 1px solid var(--hairline);
  margin-top: var(--s-2);
}
.rail__who {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); color: var(--faint);
  padding: var(--s-0) var(--s-2); overflow: hidden; text-overflow: ellipsis;
}

/* Collapsed: marks and counts only. The label is removed from the accessibility
   tree too, not merely hidden, because a name read aloud that nobody can see is
   worse than the title attribute that replaces it. */
:root[data-rail="collapsed"] .rail__label,
:root[data-rail="collapsed"] .rail__group-label,
:root[data-rail="collapsed"] .rail__who,
:root[data-rail="collapsed"] .rail__brand span:not(.rail__seal) { display: none; }
:root[data-rail="collapsed"] .rail__brand { padding: 0 0 var(--s-2); justify-content: center; }
:root[data-rail="collapsed"] .rail__item { padding: 0; justify-content: center; margin-left: 0; }
:root[data-rail="collapsed"] .rail__n {
  position: absolute; margin-left: 26px; margin-top: -14px;
  font-size: var(--t-11);
}
:root[data-rail="collapsed"] .rail__item { position: relative; }

/* Air around the content, not inside the rows.
   The three tools Arvind put up are not spacious because they are white — their
   ROWS are as tight as these. What has room is the chrome: page margins, the gap
   between regions, the header. So the gutters grow and the row padding does not,
   because a row is the thing you scan and every pixel of padding in one is a row
   you cannot see. */
.main { min-width: 0; padding: 0 var(--s-4) var(--s-6); }
/* The 8px is inset, not decoration: children were landing flush on the
   border-bottom. min-height drops by the same 16 so the bar is the height it
   always was. Found by the detector once the canary proved it was running — the
   claim of "0 findings" had been carrying this since the shell was built. I-067. */
.main__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-1); min-height: 56px; padding: var(--s-1) 0;
  border-bottom: 1px solid var(--hairline); margin-bottom: var(--s-4);
  position: sticky; top: 0; z-index: 4; background: var(--canvas);
}
.main__bar-left { display: flex; align-items: center; gap: var(--s-1); min-width: 0; }
.main__bar-right { display: flex; align-items: center; gap: var(--s-0); }
.main__inner { max-width: 1440px; }

.rail__toggle {
  display: flex; align-items: center; gap: var(--s-1);
  min-height: 36px; padding: 0 var(--s-2); margin-left: var(--s-1);
  background: none; border: 1px solid transparent; border-radius: var(--r-spine);
  color: var(--faint); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11);
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  text-align: left; width: calc(100% - var(--s-1));
}
.rail__toggle:hover { background: var(--sunken); color: var(--text); }
.rail__toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
:root[data-rail="collapsed"] .rail__toggle { justify-content: center; padding: 0; margin-left: 0; width: 100%; }

/* The menu button and the scrim exist only at phone width. */
.rail__scrim { display: none; }
#rail-open { display: none; }

@media (max-width: 1100px) {
  :root { --rail-w: 60px; }
}

/* Below 820 the rail is a drawer over the page rather than a column beside it.
   Reusing the same markup rather than building a second navigation is deliberate:
   two navigations drift, and the one on the phone is the one that gets forgotten. */
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 30;
    background: var(--rail);
    box-shadow: 0 18px 44px oklch(22% 0.015 265 / 0.16);
    transform: translateX(-100%); transition: transform var(--d-panel) var(--e);
  }
  :root[data-rail-open="1"] .rail { transform: none; }
  :root[data-rail="collapsed"] .rail__label,
  :root[data-rail="collapsed"] .rail__group-label,
  :root[data-rail="collapsed"] .rail__who,
  :root[data-rail="collapsed"] .rail__brand span:not(.rail__seal) { display: revert; }
  :root[data-rail="collapsed"] .rail__item { padding: 0 var(--s-2); justify-content: flex-start; margin-left: var(--s-1); }
  :root[data-rail="collapsed"] .rail__n { position: static; margin: 0; }
  :root[data-rail="collapsed"] .rail__brand { padding: 0 var(--s-2) var(--s-2); justify-content: flex-start; }
  .rail__toggle { display: none; }
  #rail-open { display: inline-flex; }
  :root[data-rail-open="1"] .rail__scrim {
    display: block; position: fixed; inset: 0; z-index: 20;
    background: oklch(22% 0.015 265 / 0.38);
  }
  .main { padding: 0 var(--s-2) var(--s-5); }
}
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }

/* ------------------------------------------------------------- the bundle cover */
.topbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-2); padding-top: var(--s-2);
  border-bottom: 1px solid var(--hairline);
}
.mark {
  display: flex; align-items: baseline; gap: var(--s-1);
  font-size: var(--t-20); font-weight: 800; letter-spacing: -0.01em;
  color: var(--text); padding-bottom: var(--s-2);
}
.mark__seal {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); font-weight: 700;
  letter-spacing: 0.08em; padding: 2px 6px; border-radius: var(--r-xs);
  background: var(--gold); color: var(--on-gold); transform: translateY(-2px);
}
.topbar__right {
  display: flex; align-items: center; gap: var(--s-1); padding-bottom: var(--s-1);
}
/* At phone width the name and workspace wrap onto two lines and crowd the seal, and
   neither is information the person needs while working — they know who they are.
   The theme control stays, because that one is a choice. */
@media (max-width: 560px) { #whoami { display: none; } }

/* The divider tab: the system's one curved form, top corners only, sitting flush on
   the stock it indexes. Used for navigation because that is literally what a tab
   index is for. */
.tab, .sw-nav__tab {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.14em;
  background: var(--sunken); color: var(--muted);
  border: 1px solid var(--hairline); border-bottom: none;
  border-radius: var(--r-tab);
  padding: 5px 10px 6px;
}
.sw-nav {
  display: flex; gap: var(--s-0); overflow-x: auto;
  padding: var(--s-2) 0 0 var(--s-1);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-3);
  scrollbar-width: none;
}
.sw-nav::-webkit-scrollbar { display: none; }
.sw-nav__tab {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; text-decoration: none; white-space: nowrap;
  margin-bottom: -1px; cursor: pointer;
}
.sw-nav__tab:hover { color: var(--text); }
.sw-nav__tab[aria-current="page"] {
  background: var(--surface); color: var(--text); border-bottom: 1px solid var(--surface);
}
.sw-nav__n {
  font-size: var(--t-11); font-weight: 700; letter-spacing: 0.04em;
  color: var(--muted);
}
.sw-nav__tab[aria-current="page"] .sw-nav__n { color: var(--text); }

/* --------------------------------------------------------------------- headings */
.page { padding-bottom: var(--s-6); }
.page__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4);
}
.page__head h1 { margin: 0; }          /* one Display element per screen */
.page__asof {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-12); color: var(--faint);
}
.hero { padding: var(--s-5) 0 var(--s-4); max-width: 660px; }
.hero h1 { margin-bottom: var(--s-2); }
.hero p { font-size: var(--t-18); color: var(--muted); margin: 0 0 var(--s-3); }

.grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(3, 1fr); padding-bottom: var(--s-5); }
@media (max-width: 820px) { .grid { grid-template-columns: 1fr; } }
.card-title { font-family: var(--font-ui); font-size: var(--t-16); font-weight: 700; color: var(--text); margin: 0 0 var(--s-1); }
.card-body { color: var(--muted); font-size: var(--t-14); margin: 0; }

.state { display: none; }
.state--on { display: block; }
/* The shell is a grid when it is on; `display: block` from .state--on would
   collapse the rail onto the page. An author display rule beats the generic one
   (I-012's sibling), so the more specific selector has to exist. */
.state--on.app { display: grid; }
/* M60 (D295): index.html marks a page that holds a sign-in token before any script
   has run, so the first frame is the signed-in shell rather than the cover. If the
   token turns out not to work, app.js removes the mark and the cover returns. */
html.sw-boot #cover { display: none; }
html.sw-boot #in.app { display: grid; }
#cover[hidden] { display: none; }

/* ---------------------------------------------------------------------- banners */
.banner {
  border: 1px solid var(--risk); background: var(--surface);
  border-radius: var(--r-sm); padding: var(--s-2); margin: var(--s-3) 0;
  font-size: var(--t-14); color: var(--text);
  display: flex; gap: var(--s-1); align-items: flex-start;
}
/* An author `display` rule beats the UA rule for [hidden] (I-012), so an empty
   banner renders on every clean load unless this is said explicitly. */
.banner[hidden] { display: none; }
.banner__mark { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--risk); flex: none; }
.banner--ok { border-color: var(--ok); }
.banner--ok .banner__mark { color: var(--ok); }

/* --------------------------------------------------------------------- sections */
/* Which part of the workspace the list below is about, and the way out of it.
   Without this a filtered list is indistinguishable from an empty workspace, and
   the conclusion a person draws from that is that their work has disappeared. */
/* What a record hangs from. Two names, set quietly, above everything else on the
   page — because it is context for what follows rather than a thing to act on.
   Deliberately not a link: a subtask's parent may be in a Space the reader has no
   business with (D062), and a link that 404s confirms the parent exists, which is
   a worse disclosure than no link at all. */
.sw-upward {
  display: flex; align-items: center; gap: var(--s-1);
  margin: 0 0 var(--s-2); padding: var(--s-1) var(--s-2);
  background: var(--sunken); border-radius: var(--r-sm);
  font-size: var(--t-13); color: var(--muted);
}
.sw-upward strong { color: var(--text); font-weight: 600; }
.sw-upward__mark { flex: none; color: var(--faint); }

/* Where a folder sits, above its name. A tree without a path is a tree you can
   only navigate downwards. */
.sw-crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-0);
  margin: 0 0 var(--s-1); font-size: var(--t-13); color: var(--muted);
}
.sw-crumbs a { color: var(--muted); text-decoration: none; }
.sw-crumbs a:hover { color: var(--text); text-decoration: underline; }
.sw-crumbs__sep { color: var(--faint); }
.page__icon { font-size: 0.9em; }

/* The icon picker: a row of them, the current one ringed. Sixteen and a clear —
   enough to say what a department is, few enough to choose from without a search
   box, and no free text, because an "icon" of arbitrary length is a rail that
   breaks on somebody else's screen. */
.sw-icons { gap: var(--s-0); }
.sw-icon {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); font-size: var(--t-16); cursor: pointer;
  color: var(--text);
}
.sw-icon:hover { background: var(--sunken); }
.sw-icon.is-on { box-shadow: inset 0 0 0 2px var(--gold-ink); }
.sw-icon:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.sw-context {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1);
  margin: 0 0 var(--s-2);
}
.sw-chip__x {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: var(--s-0); padding: 0; width: 18px; height: 18px;
  background: none; border: none; border-radius: var(--r-pill);
  color: var(--muted); cursor: pointer;
}
.sw-chip__x:hover { color: var(--text); background: var(--sunken); }
.sw-chip__x:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.sw-section { margin-bottom: var(--s-5); }
.sw-section__tabs { display: flex; padding-left: var(--s-2); }
.sw-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-1);
  background: var(--surface);
  border: 1px solid var(--hairline); border-bottom: none;
  border-top-left-radius: 0;
}
.sw-section__head h2 { font-size: var(--t-18); font-weight: 700; }
.sw-section__note { font-size: var(--t-13); color: var(--muted); }
.sw-section__body {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 0 var(--r-sm) var(--r-sm) var(--r-sm);
  padding: 0 var(--s-2);
}

/* ------------------------------------------------- the ruled index: a bundle row */
/* The row is a container now, not a link: it holds a tick and a link, and a
   button inside an anchor is invalid markup and a click trap besides. */
/* Three columns now: the tick, the twist, the row. The twist is the disclosure
   for what is inside a task, and it gets its own column rather than sitting in the
   row's content so that every title on the page starts at the same x — a caret
   that pushed the titles of only SOME rows across would make a list look ragged
   for a reason that is about the data rather than about the reading. A row with
   nothing inside it puts a spacer there. */
.sw-row {
  display: grid; grid-template-columns: 26px 18px minmax(0, 1fr); align-items: start;
  border-bottom: 1px solid var(--hairline);
}
/* A row with no tick. `.sw-row` reserves 26px for the tick because a work row has
   one; a Project, a Commitment, a Space or a message does not, and five views were
   dropping their first cell into that 26px column and wrapping it one character
   per line (I-073). One class says "this row has nothing to tick", and `linkRow`
   in app.js is the only thing that writes it. */
/* `text-decoration` propagates from an ancestor and a descendant cannot cancel it,
   so `.sw-row__main`'s own `none` does nothing once the ANCHOR is the outer
   element. It has to be declared here, on the link itself. */
.sw-row--link { grid-template-columns: minmax(0, 1fr); text-decoration: none; color: inherit; }

/* ------------------------------------------------------- what is inside a task
   The caret, the count, and the branch that opens under the row. */
.sw-twist {
  appearance: none; -webkit-appearance: none;
  margin: 10px 0 0; padding: 0; width: 18px; height: 18px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--r-xs);
  color: var(--muted); cursor: pointer;
  /* The chevron mark is DRAWN POINTING RIGHT. Shut is rotate(0) and open is
     rotate(90deg) — I-082, which had every caret in the product pointing the wrong
     way in both states because this was assumed rather than looked at. */
  transition: transform 120ms ease, color 120ms ease;
}
.sw-twist:hover { color: var(--text); }
.sw-twist:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-twist[aria-expanded="true"] { transform: rotate(90deg); color: var(--text); }
/* Not a disabled button. A control that is permanently dead is one somebody keeps
   trying; this is the space where a control would be if there were one. */
.sw-twist--none { display: block; width: 18px; height: 18px; }

.sw-kidcount {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: var(--s-1); padding: 1px 7px 1px 4px;
  border: 1px solid var(--hairline); border-radius: 999px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-12); color: var(--muted);
  vertical-align: 1px;
}
.sw-ring__dial--xs { width: 11px; height: 11px; }

/* The branch. Indented past the row's two controls, so a subtask sits under the
   words it belongs to rather than under the checkbox — and `box-sizing` because a
   padding that ADDS to the width is a page that scrolls sideways on a phone, which
   is how this was found (I-093).

   The indent is the two control columns on a wide screen and half of it on a
   phone, where 44px of nothing is a tenth of the screen. */
.sw-kids {
  box-sizing: border-box; width: 100%;
  padding-left: 44px; border-bottom: 1px solid var(--hairline);
  background: var(--sunken);
}
/* I-012, and the stylesheet has now carried this note four times: an author
   `display` rule beats the UA rule for [hidden], so a rule that sets `display` on
   .sw-kids has to say this or every branch on the page renders open. */
.sw-kids[hidden] { display: none; }
.sw-kids .sw-row { border-bottom: 1px solid var(--hairline); }
.sw-kids .sw-row:last-child { border-bottom: 0; }
.sw-kids__note, .sw-kids__wait {
  margin: 0; padding: var(--s-1) 0;
  font-size: var(--t-13); color: var(--muted);
}
.sw-row:last-child { border-bottom: 0; }
.sw-row:hover { background: var(--sunken); }
.sw-row__main {
  display: grid;
  grid-template-columns: 132px 96px 1fr auto;
  gap: var(--s-2); align-items: baseline;
  padding: 11px 0; font-size: var(--t-14); text-decoration: none; color: inherit;
  min-width: 0;
}
.sw-row__main--grouped { grid-template-columns: 96px 1fr auto; }
.sw-row__main:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* The tick. A square that fills when the thing is done — the one place in this
   system where a square is a CONTROL rather than a document, because that is what
   a checkbox is everywhere and inventing a new shape for it would be cleverness
   at a person's expense.

   Disabled is 0.3 and keeps its border: a tick you cannot use must still show you
   there is a tick, or the column looks broken on exactly the rows where the state
   machine is doing its job. */
.sw-tick {
  appearance: none; -webkit-appearance: none;
  margin: 12px 0 0; padding: 0;
  width: 17px; height: 17px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--muted);
  border-radius: var(--r-xs); color: var(--st-done);
  cursor: pointer;
}
.sw-tick:hover:not(:disabled) { border-color: var(--st-done); background: var(--st-done-bg); }
.sw-tick:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-tick[aria-pressed="true"] { border-color: var(--st-done); background: var(--st-done-chip); }
.sw-tick:disabled { opacity: 0.3; cursor: default; }
.sw-row__code {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-13); color: var(--muted);
}
.sw-row__title { color: var(--text); font-weight: 600; }
.sw-row__where { color: var(--muted); font-size: var(--t-13); }
/* The owner is in the right column on a pointer screen and on the meta line
   on a phone. Rendered once, shown in one place or the other. */
.sw-row__who-sm { display: none; }
.sw-row__right {
  display: flex; align-items: baseline; gap: var(--s-2); justify-self: end;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-13); color: var(--muted);
  white-space: nowrap;
}
.sw-row__date--late { color: var(--risk); font-weight: 700; }
.sw-row__who { font-family: var(--font-ui); font-size: var(--t-13); }

/* A phone row used to stack every field onto its own line: state, code, title,
   facets, two lines of project, then owner and date. Six lines per item, four
   items a screen. "Running the day from a phone" is a product principle, and four
   items is not a day.

   The same four fields, arranged as a card rather than a column: state and code
   and date on one line, the title on its own, everything else on a third. Three
   lines, eight items a screen, and the date — the thing you are scanning for —
   sits at a fixed right edge instead of hiding at the bottom of a stack. */
@media (max-width: 820px) {
  /* The card is the LINK's layout, not the row's. The row is still
     [tick][caret][link] — putting the card's areas on `.sw-row` placed the tick
     into "status" and the whole link into "title", which is how a 390px page
     started scrolling sideways. Cells are named now (I-092), so a grouped row
     with no status cell lands correctly instead of shifting every cell by one. */
  .sw-row { grid-template-columns: 26px 18px minmax(0, 1fr); }
  .sw-row__main, .sw-row__main--grouped {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "status code   date"
      "title  title  title"
      "meta   meta   meta";
    gap: 2px var(--s-1);
    padding: var(--s-1) 0;
  }
  .sw-row__status { grid-area: status; }
  .sw-row__code { grid-area: code; }
  .sw-row__body { grid-area: title; }
  .sw-row__right {
    grid-area: date; justify-self: end; align-self: baseline;
  }
  .sw-kids { padding-left: 22px; }
  /* The owner moves down to the meta line; the date stays on the top line, which
     is the one a thumb scans. */
  .sw-row__who { display: none; }
  .sw-row__who-sm { display: inline; }
  .sw-row__where::after { content: ""; }
  .sw-row__facets { margin-left: 0; display: flex; margin-top: 2px; }
}

/* Status: a mark, then a label, then a colour — in that order of importance, so the
   interface still works in greyscale and for a colour-blind reader. */
.sw-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); font-weight: 600; }

/* The inference marker. A derived item never looks like a stated one. */
.sw-derived {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
}
.sw-derived__ref { color: var(--gold-ink); }

/* ---------------------------------------------------------- detail: the meta grid */
.sw-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
@media (max-width: 560px) { .sw-meta { grid-template-columns: 1fr; } }
.sw-meta__row {
  display: flex; justify-content: space-between; gap: var(--s-2);
  padding: 11px var(--s-2) 11px 0; border-bottom: 1px solid var(--hairline);
  font-size: var(--t-14);
}
.sw-meta__row dt { color: var(--muted); margin: 0; }
.sw-meta__row dd { margin: 0; color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-13); text-align: right; }
.sw-meta__row dd.is-ui { font-family: var(--font-ui); }

.row {
  display: flex; justify-content: space-between; gap: var(--s-2);
  padding: 11px 0; border-bottom: 1px solid var(--hairline); font-size: var(--t-14);
}
.row:last-child { border-bottom: 0; }
.row dt { color: var(--muted); margin: 0; }
.row dd { margin: 0; color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-13); }

/* -------------------------------------------------------------------- the detail */
.detail__head { margin-bottom: var(--s-3); }
.detail__codeline {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: var(--s-1);
}
.detail__code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-13); color: var(--muted); }
.detail__title { font-size: var(--t-28); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; }
.detail__body { color: var(--body); max-width: 70ch; margin: var(--s-2) 0 0; }
.detail__cols { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }

.sw-block {
  border: 1px solid var(--risk); background: var(--surface);
  border-radius: var(--r-sm); padding: var(--s-2); margin: var(--s-2) 0;
  display: flex; gap: var(--s-1); align-items: flex-start; font-size: var(--t-14);
}
.sw-block__mark { color: var(--risk); margin-top: 1px; }
/* D343: a task waiting on its approver — attention, not risk; the buttons sit at the end. */
.sw-appr-banner { border-color: var(--attention); align-items: center; flex-wrap: wrap; }
.sw-appr-banner .sw-block__mark { color: var(--attention); }
.sw-appr-banner .sw-block__since { font-family: inherit; }
.sw-block__since { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-12); color: var(--muted); margin-top: var(--s-0); }

.sw-list { list-style: none; margin: 0; padding: 0; }
.sw-list__item {
  padding: 11px 0; border-bottom: 1px solid var(--hairline); font-size: var(--t-14);
}
.sw-list__item:last-child { border-bottom: 0; }
.sw-list__meta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-12); color: var(--muted); }

.sw-check { display: flex; align-items: center; gap: var(--s-1); min-height: 36px; cursor: pointer; }
.sw-check input { width: 16px; height: 16px; accent-color: var(--gold-ink); margin: 0; flex: none; }
.sw-check--done span { color: var(--muted); text-decoration: line-through; }

/* ------------------------------------------------------------------- the actions */
.sw-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-2) 0; align-items: center; }
/* Cancelled is not the next step. The gap says so before the label does. */
.sw-actions__sep { flex: none; width: 1px; height: 24px; background: var(--hairline); margin: 0 var(--s-1); }
/* A button with a mark in it lays its two children out in a row. Without this the
   mark sits on its own line above the word — the Track time button rendered as a
   stacked "(•) / Start" in the panel, which is the same defect the attachments
   heading had and the same cause: a mark is an inline SVG and the thing around it
   had no opinion about direction. */
.sw-button { display: inline-flex; align-items: center; justify-content: center; }
.sw-button .sw-mark { margin-right: 6px; flex: none; }
.sw-field { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; margin: var(--s-2) 0; }
.sw-label--inline { flex: none; }
.sw-label__opt { text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--muted); }  /* D460 */

.sw-input, .sw-select, .sw-textarea {
  font-family: var(--font-ui); font-size: var(--t-14); color: var(--text);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: 0 var(--s-1); min-height: 44px;
}
.sw-textarea { padding: var(--s-1); min-height: 72px; line-height: 1.5; width: 100%; resize: vertical; }
.sw-input:focus-visible, .sw-select:focus-visible, .sw-textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px;
}
.sw-input--grow { flex: 1 1 220px; min-width: 0; }

.sw-filters {
  display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center;
  padding-bottom: var(--s-2); margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--hairline);
}
.sw-chip--button { cursor: pointer; min-height: 36px; padding: 0 var(--s-2); font-family: var(--font-ui); }

/* ------------------------------------------------------- the stage bar
   One control per state, each carrying its own count, and the counts come from the
   whole workspace rather than from the rows on screen — a filter that only counts
   what it can already see tells you nothing you did not know.

   This replaced a single flat row of five unrelated toggles (Open, Everything,
   Mine, Blocked, Needs routing) that mixed a state filter, a scope filter and two
   flags with no grouping, so nothing said which of them were alternatives and
   which combined. They are now three labelled groups, and the state group is the
   pipeline: you can see at a glance that 63 of 109 items are sitting in triage,
   which is a fact the old control actively hid. */
.sw-facets {
  margin-bottom: var(--s-3); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--hairline);
}
.sw-facets .sw-input { min-height: 36px; }
.sw-facets__group {
  display: flex; align-items: center; gap: var(--s-1);
  padding: var(--s-0) 0;
}
.sw-facets__label {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
  flex: none; width: 56px;
}
/* A horizontal scroller needs to SAY it scrolls. The old nav did not, and at phone
   width a whole destination was simply off the edge with nothing to suggest it. */
.sw-facets__track {
  display: flex; gap: var(--s-0); overflow-x: auto; scrollbar-width: none;
  padding: 2px 0; -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.sw-facets__track::-webkit-scrollbar { display: none; }
/* Wide enough to show them all: wrap rather than scroll, so nothing is hidden on a
   screen that has the room. The pill count is fixed (one per state plus two
   rollups), so wrapping cannot make the bar jump as counts change. */
@media (min-width: 1200px) {
  .sw-facets__track { flex-wrap: wrap; overflow: visible; mask-image: none; }
}
/* Retuned in M8 after "the pills look so chunky". 32px of height for a 13px word
   is a button, and these are not buttons, they are a row of adjectives you can
   switch on. 28px with the mark carrying 16 of it is the Linear/Notion figure and
   it is what lets eleven of them sit on one line without the bar becoming a wall.

   `center`, not `baseline`: a drawn mark has no baseline. */
.sw-stage {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--sunken); border: 1px solid var(--hairline);
  color: var(--body); font-size: var(--t-13); font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer;
}
.sw-stage__label { display: block; }
.sw-stage:hover { color: var(--text); border-color: var(--muted); }
.sw-stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The count is a number in a row of numbers, so it is tabular and mono — that IS
   a reference. It is also the one thing here allowed to be quiet. */
.sw-stage__n {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sw-stage[aria-pressed="true"] {
  background: var(--gold-quiet); border-color: var(--gold-ink); color: var(--text);
  font-weight: 700;
}
.sw-stage[aria-pressed="true"] .sw-stage__n { color: var(--text); }
/* Selection survives greyscale: the gold wash is the third channel, the check is
   the first. A selected control that differs only in colour is not selected for
   everybody. */
/* Selection survives greyscale. It used to add a ✓ after the mark — a character,
   in Courier, which does not have one. It is now a ring the pill draws itself. */
.sw-stage[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--gold-ink); }
.sw-stage--empty { opacity: 0.55; }

.sw-row__facets { display: inline-flex; gap: var(--s-0); flex-wrap: wrap; margin-left: var(--s-1); }
.sw-facetline { display: flex; flex-wrap: wrap; gap: var(--s-0); margin-top: var(--s-1); }

.sw-count {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-12); color: var(--muted);
}

footer { border-top: 1px solid var(--hairline); padding: var(--s-3) 0; color: var(--faint); font-size: var(--t-13); }
footer a { color: var(--faint); }

/* The toast genuinely floats, so it is one of the three things in this product
   allowed a shadow. It carries NO border: a 1px edge plus a wide diffuse shadow is a
   recurring generated-UI signature, and Impeccable is right that a thing should commit
   to one or the other. The tonal step from board to page is the second signal, as it
   is everywhere else here.
   A refusal is marked and labelled rather than outlined, which is the Status rule
   (mark, then label, then colour) applied to a message instead of a row. */
.sw-toast {
  position: fixed; left: 50%; bottom: var(--s-3); transform: translateX(-50%);
  background: var(--surface); color: var(--text);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-panel);
  padding: var(--s-1) var(--s-2); font-size: var(--t-14);
  max-width: calc(100vw - var(--s-4)); z-index: 20;
  display: flex; align-items: flex-start; gap: var(--s-1);
}
.sw-toast[hidden] { display: none; }
.sw-toast__mark { color: var(--risk); margin-top: 2px; }

/* D427: the Inbox's proposal cards and abstentions are retired with it. */
.sw-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-13); }

.sw-button--small { min-height: 36px; font-size: var(--t-13); padding: 0 var(--s-1); }

/* ------------------------------------------------- the command bar and the bell */
/* The command bar floats, so it is one of the very few things entitled to a shadow
   (the design rule is: depth is a tonal step; shadow is only for what genuinely
   leaves the page). No border — the surface step and the shadow are the edge, which
   is also why the toast and the panel lost theirs in I-018. */
.sw-cmd {
  position: fixed; inset: 0; z-index: 40;
  background: oklch(22% 0.015 265 / 0.28);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--s-5) var(--s-2);
}
.sw-cmd[hidden] { display: none; }
.sw-cmd__box {
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--shadow-panel);
  width: 100%; max-width: 620px; overflow: hidden;
}
.sw-cmd__input {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-16);
  color: var(--text); background: transparent;
  border: 0; border-bottom: 1px solid var(--hairline);
  padding: var(--s-2); outline-offset: -3px;
}
.sw-cmd__input::placeholder { color: var(--faint); }
/* The answer is prose, not a status chip. A refusal is a sentence a person reads. */
.sw-cmd__answer:not(:empty) {
  padding: var(--s-2); font-size: var(--t-14); color: var(--text);
  white-space: pre-wrap;
}
.sw-cmd__answer .mark { display: inline-block; vertical-align: -3px; margin-right: var(--s-0); }
.sw-cmd__answer--refused .mark { color: var(--risk); }
.sw-cmd__answer--asked .mark { color: var(--attention); }
.sw-cmd__answer--done .mark { color: var(--ok); }
.sw-cmd__hint {
  padding: var(--s-1) var(--s-2); background: var(--sunken);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); color: var(--faint);
}
.sw-cmd__cands { margin-top: var(--s-1); display: flex; flex-wrap: wrap; gap: var(--s-0); }

/* The bell's count. Same treatment as the nav counts, so two numbers meaning
   "things waiting for you" do not look like different kinds of thing. */
.sw-bell__n {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); font-weight: 700;
  margin-left: var(--s-0);
}

@media (max-width: 540px) {
  .sw-cmd { padding: var(--s-3) var(--s-1); }
}

/* ========================================================================
   M5 — plan. Two new shapes, and one rule governing both.

   A dependency wait and a projected date are INFERENCES (D035). A stated
   block is a fact somebody wrote. They must not be able to be mistaken for
   one another at a glance, so the wait carries the same `¶ Derived` marker
   the rest of the system uses for a drawn conclusion, and the block keeps
   its own heavier treatment. Nothing here borrows `.sw-block`.
   ===================================================================== */

.sw-wait {
  display: flex; gap: var(--s-1); align-items: baseline;
  padding: 11px var(--s-2);
  border-bottom: 1px solid var(--hairline);
}
.sw-wait:last-child { border-bottom: 0; }
/* A short code is a reference somebody transcribes. Breaking one across two lines
   at 360px turned WRK-0001 into "WRK-" / "0001", which is a different string. */
.sw-wait__code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.sw-wait__title { flex: 1 1 auto; min-width: 0; }
.sw-wait__meta {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); color: var(--muted);
}
/* A settled predecessor no longer holds anything up, and says so with a mark
   before it says so with a colour. */
.sw-wait--settled .sw-wait__code { color: var(--muted); }

/* The projected date. Divider stock, because it is drawn rather than stated —
   the same material the exhibit block uses for the same reason. */
.sw-feasible {
  background: var(--sunken); border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--s-2); margin: var(--s-1) 0 var(--s-3);
}
.sw-feasible__label {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: var(--s-0);
}
.sw-feasible__date {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-16); font-weight: 700;
}
.sw-feasible__because {
  font-size: var(--t-13); color: var(--body); margin: var(--s-0) 0 0;
}
/* An abstention is a real answer and is set in reading type, not in the
   quiet tier — "we do not know when WRK-13 lands" is the useful sentence. */
.sw-feasible__unknown { font-size: var(--t-14); color: var(--body); margin: var(--s-0) 0 0; }

/* ------------------------------------------------------------ the impact
   What a date move breaks, shown before it is saved (D037). It is a
   consequence, not an error: mark, then label, then colour. */
.sw-impact {
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--sunken); margin: var(--s-2) 0;
}
.sw-impact[hidden] { display: none; }
.sw-impact__head {
  display: flex; gap: var(--s-1); align-items: center;
  padding: var(--s-2); border-bottom: 1px solid var(--hairline);
}
.sw-impact__mark { color: var(--risk); }
.sw-impact__title { font-weight: 700; font-size: var(--t-16); }
.sw-impact__list { list-style: none; margin: 0; padding: 0; }
.sw-impact__item { padding: 11px var(--s-2); border-bottom: 1px solid var(--hairline); }
.sw-impact__item:last-child { border-bottom: 0; }
.sw-impact__party { font-weight: 700; }
.sw-impact__dates {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); color: var(--muted);
  display: block; margin-top: 2px;
}
.sw-impact__via {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); color: var(--muted);
}
.sw-impact__foot { padding: var(--s-2); }
/* Gold link text comes to 3.98:1 on divider stock — under the floor, and caught by
   check_contrast.py the first time these two regions were declared to it. Links in
   here are underlined ink instead. It also keeps the Seal Rule: gold appears at
   most twice on a screen, and neither of them is a reference in a warning panel. */
.sw-impact a, .sw-feasible a { color: var(--text); text-decoration: underline; }

/* ---------------------------------------------------------- the workload
   One claim per row, and the items that produced it directly underneath. */
.sw-load { border: 1px solid var(--hairline); border-radius: var(--r-sm);
           background: var(--surface); margin-bottom: var(--s-3); }
.sw-load__who {
  display: flex; gap: var(--s-1); align-items: baseline; flex-wrap: wrap;
  padding: var(--s-2); border-bottom: 1px solid var(--hairline);
}
.sw-load__name { font-weight: 700; font-size: var(--t-18); }
.sw-load__cap {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); color: var(--muted);
}
.sw-load__day {
  padding: 11px var(--s-2); border-bottom: 1px solid var(--hairline);
}
.sw-load__day:last-child { border-bottom: 0; }
.sw-load__line {
  display: flex; gap: var(--s-1); align-items: baseline; flex-wrap: wrap;
}
.sw-load__date { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; min-width: 11ch; }
.sw-load__mins { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* The bar is a ruled measure, not a chart: divider stock with a hairline, a
   fill in ink, and a tick where the stated capacity sits. No gradient, no
   rounded cap — it is drawn in the same vocabulary as everything else. */
.sw-load__meter {
  position: relative; height: 8px; margin: var(--s-0) 0 0;
  background: var(--sunken); border: 1px solid var(--hairline);
  border-radius: var(--r-xs); overflow: hidden;
}
.sw-load__fill { height: 100%; background: var(--body); }
.sw-load__fill--over { background: var(--risk); }
.sw-load__tick {
  position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text);
}
.sw-load__items { list-style: none; margin: var(--s-0) 0 0; padding: 0; }
.sw-load__item {
  display: flex; gap: var(--s-1); align-items: baseline;
  font-size: var(--t-13); padding: 2px 0;
}
.sw-load__item .sw-row__code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw-load__est { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); margin-left: auto; }
/* Unsized work is the caveat on the number above it, so it sits with the
   number rather than in a footnote (D036). */
.sw-load__unsized { color: var(--attention); }
.sw-load__note {
  padding: var(--s-2); font-size: var(--t-14); color: var(--body);
  border-bottom: 1px solid var(--hairline);
}

@media (max-width: 540px) {
  .sw-load__est { margin-left: 0; }
  .sw-wait { flex-wrap: wrap; }
}

/* ========================================================================
   M6 — decide. Versions, approvals and decisions.

   One rule governs the lot: these are records of things that happened, and
   the screen has to make a *superseded* one still legible rather than hide
   it. A withdrawn version and a superseded decision both stay on the page,
   marked, because the record is the product (D041).

   Note what is NOT here: no `¶ Derived` mark. An approval rollup is
   arithmetic over answers people gave, not an inference Swarm drew — it is
   a status, so it gets a mark, a label and then a colour, in that order,
   like every other status in the system.
   ===================================================================== */

.sw-version {
  padding: 11px var(--s-2);
  border-bottom: 1px solid var(--hairline);
}
.sw-version:last-child { border-bottom: 0; }
.sw-version__line {
  display: flex; gap: var(--s-1); align-items: baseline; flex-wrap: wrap;
}
.sw-version__no {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap;
}
.sw-version__label { flex: 1 1 auto; min-width: 0; }
.sw-version__right {
  display: flex; gap: var(--s-1); align-items: baseline;
  margin-left: auto; flex-wrap: nowrap;
}
.sw-version__current {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.sw-version__meta {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); color: var(--muted);
}
/* The URI is a reference somebody may need to transcribe, so it takes the record
   treatment — tabular figures, never broken mid-token. */
.sw-version__uri {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11);
  display: block; margin-top: 2px; overflow-wrap: anywhere;
}
.sw-version__fingerprint {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); color: var(--muted);
}
/* Withdrawn stays on the page. Struck, with its reason, because "there was a
   v2 and it was pulled on Tuesday" is information and deleting the row would
   be the lie. */
.sw-version--withdrawn .sw-version__label { text-decoration: line-through; }
.sw-version--withdrawn { color: var(--muted); }
.sw-version__withdrawn {
  font-size: var(--t-13); color: var(--body); display: block; margin-top: var(--s-0);
}

.sw-approval {
  display: flex; gap: var(--s-1); align-items: baseline; flex-wrap: wrap;
  font-size: var(--t-13); padding: 2px 0 2px var(--s-2);
}
.sw-approval__party { font-weight: 600; }
.sw-approval__note {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); color: var(--muted);
  display: block; padding-left: var(--s-2);
}

/* ------------------------------------------------------------- decisions */
.sw-decision {
  padding: var(--s-2);
  border-bottom: 1px solid var(--hairline);
}
.sw-decision:last-child { border-bottom: 0; }
.sw-decision__subject {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: var(--s-0);
}
.sw-decision__chose { font-weight: 700; font-size: var(--t-16); }
.sw-decision__rationale { margin: var(--s-0) 0 0; font-size: var(--t-14); }
.sw-decision__considered {
  display: flex; gap: var(--s-0); flex-wrap: wrap; margin-top: var(--s-1);
}
.sw-decision__meta {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); color: var(--muted);
  display: block; margin-top: var(--s-1);
}
/* A superseded decision is not struck through — it was true, it was acted on,
   and somebody may have to read it to understand why something looks the way
   it does. It is quieted and labelled, not crossed out. */
.sw-decision--superseded .sw-decision__chose {
  font-weight: 400; color: var(--muted);
}

/* ------------------------------------------------- the approvals list page */
.sw-ask {
  display: block; padding: 11px var(--s-2);
  border-bottom: 1px solid var(--hairline); color: inherit; text-decoration: none;
}
.sw-ask:last-of-type { border-bottom: 0; }
.sw-ask:hover { background: var(--sunken); }
.sw-ask__line {
  display: flex; gap: var(--s-1); align-items: baseline; flex-wrap: wrap;
}
.sw-ask__who { font-weight: 700; }
.sw-ask__meta {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); color: var(--muted);
}
.sw-ask__actions {
  display: flex; gap: var(--s-1); flex-wrap: wrap; padding: var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--hairline);
}

@media (max-width: 540px) {
  .sw-approval { padding-left: var(--s-1); }
  .sw-approval__note { padding-left: var(--s-1); }
}


/* ---------------------------------------------------------- the shortcut sheet
   One of the three things in this product that genuinely floats, so it is one of
   the three allowed a shadow (DESIGN.md § Elevation). */
.sw-keys {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: oklch(22% 0.015 265 / 0.38); padding: var(--s-2);
}
.sw-keys[hidden] { display: none; }
.sw-keys__box {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: var(--s-3);
  box-shadow: 0 18px 44px oklch(22% 0.015 265 / 0.16);
  max-width: 480px; width: 100%; max-height: 80vh; overflow: auto;
}
.sw-keys__title { font-size: var(--t-18); font-weight: 700; margin: 0 0 var(--s-2); }
.sw-keys__list {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-0) var(--s-2);
  margin: 0; align-items: baseline;
}
.sw-keys__list dt { margin: 0; white-space: nowrap; }
.sw-keys__list dd { margin: 0; color: var(--body); font-size: var(--t-14); }
.sw-keys kbd {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); font-weight: 700;
  background: var(--sunken); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: 2px 6px; color: var(--text);
}
.sw-keys__note {
  margin: var(--s-2) 0 0; padding-top: var(--s-2);
  border-top: 1px solid var(--hairline);
  font-size: var(--t-13); color: var(--muted);
}

/* The row the keyboard is on. It is a focus state as well as a tint, because a
   highlight a screen reader cannot follow is a cursor for some people only. */
.sw-row--cursor { background: var(--sunken); }
.sw-row--cursor:focus-visible, .sw-row:focus-visible {
  outline: 2px solid var(--focus); outline-offset: -2px;
}

/* ------------------------------------------------------------- empty and waiting */
.sw-empty__head { margin: 0; color: var(--text); font-weight: 600; }
.sw-empty__help {
  margin: var(--s-0) 0 0; color: var(--muted); font-size: var(--t-13);
  max-width: 62ch;
}

.sw-skel { padding: var(--s-2) 0; }
.sw-skel__row {
  display: flex; gap: var(--s-2); align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--hairline);
}
.sw-skel__bar {
  height: 10px; border-radius: var(--r-pill); background: var(--sunken);
  animation: sw-breathe 1.4s var(--e) infinite;
}
.sw-skel__row:nth-child(2) .sw-skel__bar { animation-delay: 80ms; }
.sw-skel__row:nth-child(3) .sw-skel__bar { animation-delay: 160ms; }
.sw-skel__row:nth-child(4) .sw-skel__bar { animation-delay: 240ms; }
.sw-skel__row:nth-child(5) .sw-skel__bar { animation-delay: 320ms; }
.sw-skel__row:nth-child(6) .sw-skel__bar { animation-delay: 400ms; }
@keyframes sw-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* M60 (D296): moving to another screen. The page you are on stays; after 120 ms it
   dims and a thin line runs along the top, and it is swapped in one frame when the
   next page is ready. A screen seen earlier in the visit is shown at once (inert)
   while its fresh copy loads, with the same line. */
#app { transition: opacity 160ms var(--e); }
#app.is-pending { opacity: 0.55; }
#app.is-pending, #app[data-preview] { cursor: progress; }
#app.is-pending::before, #app[data-preview]::before {
  content: ""; position: fixed; top: 0; left: 0; z-index: 60;
  height: 2px; width: 40%; background: var(--ink-blue);
  animation: sw-loadline 1.1s var(--e) infinite;
}
@keyframes sw-loadline { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
/* A pulse is decoration; somebody who has asked for less motion should get the
   bars and none of the breathing. */
@media (prefers-reduced-motion: reduce) {
  .sw-skel__bar { animation: none; }
  #app { transition: none; }
  #app.is-pending::before, #app[data-preview]::before { animation: none; width: 100%; opacity: 0.6; }
}


/* ======================================================= the views, and the board */
.sw-views {
  display: flex; align-items: flex-end; gap: var(--s-0);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-3); padding-left: var(--s-1);
}
/* A divider tab, because a tab is literally an index of views — the one job this
   system's curved silhouette already has. */
.sw-views__tab {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-12); font-weight: 600; letter-spacing: 0.01em;
  background: var(--sunken); color: var(--muted);
  border: 1px solid var(--hairline); border-bottom: none;
  border-radius: var(--r-tab);
  padding: 7px 12px 8px; margin-bottom: -1px;
  text-decoration: none; min-height: 36px; white-space: nowrap;
}
.sw-views__tab:hover { color: var(--text); }
.sw-views__tab[aria-selected="true"] {
  background: var(--surface); color: var(--text);
  border-bottom: 1px solid var(--surface);
}
.sw-views__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sw-views__tab .sw-mark { width: 15px; height: 15px; }
.sw-views__soon {
  margin-left: auto; padding-bottom: var(--s-1);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11);
  letter-spacing: 0.08em; color: var(--faint); cursor: help;
}

.sw-board {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(248px, 1fr);
  gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2);
  align-items: start; scrollbar-width: thin;
}
/* The colour is on the column AND on a chip at its head, at two strengths. The
   column gets a breath of tint so five columns read as five bands at a glance;
   the chip gets the real colour so the stage is named in it at reading distance.
   Putting the full strength on the column made the board look like a box of
   sweets — the Notion reference has it right and it is the chip that carries it. */
.sw-board__col {
  background: var(--st-bg, var(--sunken));
  border: 1px solid color-mix(in oklch, var(--st-ink, var(--hairline)) 18%, transparent);
  border-radius: var(--r-md); padding: var(--s-1);
  min-height: 120px;
}

.sw-board__head {
  display: flex; align-items: center; gap: var(--s-1);
  margin: 0; padding: var(--s-0) 2px var(--s-1);
}
/* The stage's name is a chip, not a heading in colour. A chip is a thing you can
   point at; a coloured heading is a heading somebody has coloured in. */
.sw-board__label {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--st-chip, var(--sunken)); color: var(--st-ink, var(--text));
  border-radius: var(--r-pill); padding: 3px 10px 3px 8px;
  font-size: var(--t-12); font-weight: 700; letter-spacing: 0.01em; line-height: 1;
}
.sw-board__n {
  margin-right: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-12);
  font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums;
}
.sw-board__more {
  display: block; padding: var(--s-1); font-size: var(--t-12);
  color: var(--muted); text-align: center; text-decoration: underline;
}
.sw-board__stack { display: flex; flex-direction: column; gap: var(--s-0); }
.sw-board__empty {
  margin: 0; padding: var(--s-2) var(--s-1); color: var(--faint);
  font-size: var(--t-13);
}

/* A card on the board. Square, like everything that IS a surface; the labels on
   it are the round ones. */
.sw-card2 {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: var(--s-1);
  text-decoration: none; color: inherit; cursor: grab;
}
.sw-card2:hover { border-color: var(--muted); }
.sw-card2:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-card2__code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); color: var(--muted); }
.sw-card2__title { color: var(--text); font-weight: 600; font-size: var(--t-14); line-height: 1.35; }
.sw-card2__where { font-size: var(--t-12); color: var(--muted); }
.sw-card2__foot {
  display: flex; justify-content: space-between; gap: var(--s-1);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-12); color: var(--muted);
}
.sw-card2 .sw-row__facets { margin-left: 0; }
.sw-card2.is-dragging { opacity: 0.4; cursor: grabbing; }

/* Where the card may land, and where it may not. The state machine is shown
   during the drag rather than explained by a toast after it. */
.sw-board__col.is-over {
  border-color: var(--gold-ink); background: var(--gold-quiet);
}
.sw-board__col.is-shut { opacity: 0.3; filter: saturate(0.2); }
.sw-board__col.is-shut .sw-board__head::after {
  content: " \2014 not from here"; letter-spacing: 0; text-transform: none;
  font-size: var(--t-11); color: var(--muted);
}

@media (max-width: 820px) {
  .sw-board { grid-auto-columns: minmax(82vw, 1fr); }
  .sw-views__soon { display: none; }
}

/* A mark that knows its stage. Only the MARK takes the hue — a whole row set in
   violet because it happens to be in review would be colour as the first channel,
   which is exactly the thing the Status rule forbids. The word stays ink. */
.sw-mark--stage { color: var(--st-ink, currentColor); }

/* A stage pill wears a hint of its colour at rest and the full tint when it is the
   one you are standing in. The gold ring still marks selection, because selection
   is a different fact from which stage this is and they must not share a channel. */
.sw-stage[data-st] .sw-mark { color: var(--st-ink, currentColor); }
.sw-stage[data-st][aria-pressed="true"] {
  background: var(--st-bg, var(--gold-quiet));
  border-color: color-mix(in oklch, var(--st-ink) 45%, transparent);
}

/* ------------------------------------------------------------ the group heading
   A heading over a stage, not a pill. The stage bar above already uses pills for
   the same seven words, and a second row of the same pills doing a different job
   is how a person learns that a control means nothing. */
.sw-group { margin-bottom: var(--s-3); }
/* Same chip as the board head, for the same reason: a person who has seen violet
   mean "in review" on the board must not have to learn it again on the list. */
.sw-group__head {
  display: flex; align-items: center; gap: var(--s-1);
  margin: 0 0 var(--s-1); padding: 0 2px;
}
.sw-group__label {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--st-chip, var(--sunken)); color: var(--st-ink, var(--text));
  border-radius: var(--r-pill); padding: 3px 10px 3px 8px;
  font-size: var(--t-12); font-weight: 700; letter-spacing: 0.01em; line-height: 1;
}
.sw-group__n {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* There WAS a 3px spine of the stage's ink down the left of each group. Impeccable
   flagged it, and it was right: a thick coloured bar on one side of a card is the
   single most recognisable signature of a generated interface. It was also
   redundant — the heading directly above already carries the stage's mark, word
   and colour, so the spine was saying a third time what had just been said twice.
   The group is separated by space and a heading, which is how a document does it. */

/* ------------------------------------------------------------------- the table
   Horizontal scroll rather than a wrap, because a table whose columns wrap has
   stopped being a table. The first column is sticky so the stage stays readable
   while the rest slides — the stage is the reason this view exists. */
.sw-tbl__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sw-tbl {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  font-size: var(--t-13);
}
.sw-tbl th {
  text-align: left; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-11);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
  font-weight: 400; padding: var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--hairline); white-space: nowrap;
}
.sw-tbl td {
  padding: 9px var(--s-2); border-bottom: 1px solid var(--hairline);
  vertical-align: middle; color: var(--body);
}
.sw-tbl tbody tr:last-child td { border-bottom: 0; }
.sw-tbl tbody tr:hover td { background: var(--sunken); }
.sw-tbl__stage {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--st-ink, var(--body)); font-weight: 600; white-space: nowrap;
}
.sw-tbl__code {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-12); color: var(--muted);
  white-space: nowrap;
}
.sw-tbl__title { min-width: 22ch; }
.sw-tbl__title a { color: var(--text); font-weight: 600; text-decoration: none; }
.sw-tbl__title a:hover { text-decoration: underline; }
.sw-tbl__who, .sw-tbl__where { white-space: nowrap; color: var(--muted); }
.sw-tbl__date {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-12); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sw-tbl__quiet { color: var(--muted); }

@media (max-width: 820px) {
  /* Six of the eight columns are context. On a phone the two that answer the
     question stay and the rest go, rather than the whole table shrinking to
     illegible. */
  .sw-tbl__where, .sw-tbl__who, .sw-tbl th:nth-child(5), .sw-tbl th:nth-child(6),
  .sw-tbl td:nth-child(8), .sw-tbl th:nth-child(8) { display: none; }
}

/* =========================================================== M11: progressive
   disclosure, the activity feed, and Add task in the rail.
   ========================================================================= */

/* ------------------------------------------------ the "N more properties" fold
   A real <details>. The summary is a button to a screen reader, it announces its
   own open state, and everything inside stays in the DOM when closed so
   find-in-page reaches all seven facts. Collapsing by not rendering would lose
   them to everybody who searches rather than scrolls. */
.sw-more { border-top: 1px solid var(--hairline); }
.sw-more__summary {
  display: flex; align-items: center; gap: var(--s-1);
  padding: 11px var(--s-2) 11px 0;
  font-size: var(--t-13); color: var(--muted); font-weight: 600;
  cursor: pointer; list-style: none; user-select: none;
}
/* Safari draws its own triangle through ::-webkit-details-marker and Firefox
   through ::marker; both have to go or there are two. */
.sw-more__summary::-webkit-details-marker { display: none; }
.sw-more__summary::marker { content: ""; }
.sw-more__summary::before {
  content: ""; flex: none; width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform var(--d-state) var(--e);
}
.sw-more[open] > .sw-more__summary::before { transform: rotate(90deg); }
.sw-more__summary:hover { color: var(--text); }
.sw-more__summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sw-meta--more .sw-meta__row:last-child,
.sw-meta--more .sw-meta__row:nth-last-child(2) { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .sw-more__summary::before { transition: none; }
}

/* ---------------------------------------------------------------- the feed
   Two kinds of entry with deliberately different weight. A card is somebody
   speaking. A log line is the record reporting on itself, and giving the two
   the same presence is how a feed becomes the noise people stop reading. */
.sw-feed { list-style: none; margin: 0; padding: var(--s-2) 0 0; }
.sw-feed__item { margin-bottom: var(--s-2); }
.sw-feed__item:last-child { margin-bottom: 0; }

.sw-feed__card {
  background: var(--sunken); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: var(--s-2);
}
.sw-feed__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-2); margin-bottom: 4px;
}
.sw-feed__who { font-size: var(--t-13); font-weight: 700; color: var(--text); }
.sw-feed__when {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-11); color: var(--faint); flex: none;
}
.sw-feed__body {
  margin: 0; font-size: var(--t-14); color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* The log line. A rule runs behind the dots so the events read as one thread
   rather than as scattered sentences. */
.sw-feed__item--did {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding-left: 3px; position: relative;
}
.sw-feed__dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hairline); position: relative; top: -2px;
}
.sw-feed__line {
  font-size: var(--t-13); color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-1);
}
.sw-feed__line .sw-feed__who { font-weight: 600; color: var(--muted); }
.sw-feed__item--did .sw-feed__when { margin-left: var(--s-1); }

.sw-feed__compose {
  border-top: 1px solid var(--hairline);
  margin-top: var(--s-2); padding: var(--s-2) 0;
}
.sw-feed__compose .sw-textarea { width: 100%; }
.sw-feed__compose .sw-actions { margin-top: var(--s-1); }

/* ---------------------------------------------------------- Add task, in the rail
   Above the sections and outside the nav, because the nav is re-rendered on every
   route and a control that vanishes when you change section is one people stop
   reaching for. */
/* ------------------------------------------------------------------- the Add menu
   The rail's control is now a button and a menu, not a disclosure holding a form:
   the form moved to a centred dialog (see § the modal). What stays in the rail is
   the one line that opens it. */
/* `.rail__compose`, at the THIRD attempt, and the two failures are the point.

   This control was first called `.rail__add`, which was already the small + that
   appears on a folder in the tree on hover: 22 by 22, opacity 0 until you reach
   for it. So the Add button rendered 22 pixels wide with its label broken one
   character per line and invisible until hovered — and every + in the tree
   quietly picked up the new button's styling in exchange.

   Renamed to `.rail__new`, which was ALSO taken — the inline new-record input in
   the tree — so the button arrived wearing a gold border it had never asked for.

   Nothing caught either one. The contrast checker reads colours out of the
   stylesheet and `impeccable` reads CSS for anti-patterns; both were looking at a
   perfectly valid stylesheet. What was wrong was the PAGE, and the only thing
   that can see a page is something that measures one — I-073's lesson, twice in
   an afternoon. `scripts/look_at_pages.py` now refuses a class defined in two
   places, so the third collision is caught before it renders.

   `align-self: stretch` stays because the rail is a flex column, where a child's
   width is its content width unless told otherwise. The control this replaced was
   a <details>, which browsers stretch by default, so nothing in the rail had ever
   had to say it. */
.rail__compose {
  position: relative; display: block; align-self: stretch;
  margin: 0 var(--s-1) var(--s-2);
}
.rail__compose__button {
  display: flex; align-items: center; gap: var(--s-1); width: 100%;
  padding: var(--s-1) var(--s-1); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 650; cursor: pointer; text-align: left;
}
.rail__compose__button:hover { background: var(--sunken); }
.rail__compose__button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.rail__compose__menu {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); box-shadow: var(--shadow-panel); padding: 4px;
}
.rail__compose__menu[hidden] { display: none; }
.rail__compose__menu button {
  display: flex; align-items: center; gap: var(--s-1); width: 100%;
  padding: 7px var(--s-1); border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text); font: inherit; font-size: var(--t-13);
  cursor: pointer; text-align: left;
}
.rail__compose__menu button:hover { background: var(--sunken); }
.rail__compose__menu button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ----------------------------------------------------------------- the modal
   A real <dialog>. ::backdrop is the browser's own scrim, which means it covers
   everything including things this stylesheet does not know about — a hand-rolled
   overlay div has a z-index and therefore an argument to lose. */
.sw-modal {
  border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 0;
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-panel);
  width: min(560px, calc(100vw - var(--s-3) * 2));
  max-height: calc(100vh - var(--s-3) * 2);
}
.sw-modal::backdrop { background: oklch(22% 0.015 265 / 0.42); }
.sw-modal__box { padding: var(--s-2); display: block; overflow: auto; }
.sw-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-1); margin-bottom: var(--s-2);
}
.sw-modal__title { margin: 0; font-size: var(--t-16, 1rem); }
.sw-modal__x {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  padding: 4px; border-radius: var(--r-sm); line-height: 0;
}
.sw-modal__x:hover { background: var(--sunken); color: var(--text); }
.sw-modal__x:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-modal__title-input { width: 100%; font-size: var(--t-14); }
.sw-modal__grid {
  display: grid; grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--s-1) var(--s-2); align-items: center; margin-top: var(--s-2);
}
.sw-modal__grid .sw-label { margin: 0; }
.sw-modal__grid .sw-input,
.sw-modal__grid .sw-select,
.sw-modal__grid .sw-textarea { width: 100%; }
.sw-modal__grid [hidden] { display: none; }
.sw-modal__note { margin: var(--s-1) 0 0; font-size: var(--t-12); color: var(--muted); }
.sw-modal__note.is-bad { color: var(--risk); }
/* Cancel first, Add last, and Add is the only gold thing in the dialog — the
   Seal Rule holds inside a modal too. */
.sw-modal__actions {
  display: flex; justify-content: flex-end; gap: var(--s-1);
  margin-top: var(--s-2); padding-top: var(--s-2);
  border-top: 1px solid var(--hairline);
}
@media (max-width: 560px) {
  .sw-modal__grid { grid-template-columns: minmax(0, 1fr); }
  .sw-modal__grid .sw-label { margin-top: var(--s-1); }
}
/* The dialog is sized by the viewport, so a media query is the right question for
   it — unlike `.sw-attrs`, which is sized by whatever it was put inside. */


/* ============================================================ M12: the task page
   Rebuilt against a ClickUp screenshot. The layout idea worth naming: an
   attribute is a LABEL AND ITS CONTROL on one line, and the place a fact is read
   is the place it is changed. The page before this had its facts in a definition
   list and its controls in eight form strips further down. */

/* ------------------------------------------------------------------ the back link
   It says where you came from now, not "Back to work" (see app.js § where you
   were). Quiet, because it is a way out and not a thing to do. */
.sw-back { margin: 0 0 var(--s-2); font-size: var(--t-13); }
.sw-back a {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted); text-decoration: none;
}
.sw-back a:hover { color: var(--text); text-decoration: underline; }
.sw-back a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The chevron points back, which the mark does not do on its own. */
.sw-back__mark { transform: rotate(90deg); width: 13px; height: 13px; }

/* ---------------------------------------------------------------- the attributes
   Two columns on a wide screen, one on a narrow one. Not a table: the rows are
   independent facts rather than a grid to compare down, and a table would put
   every control in one column width whether it wanted one or not. */
.sw-attrs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px var(--s-3);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--surface);
  padding: var(--s-2); margin-bottom: var(--s-3);
}
.sw-attr {
  display: grid; grid-template-columns: 140px minmax(0, 1fr);
  align-items: center; gap: var(--s-1);
  min-height: 34px;
}
.sw-attr--wide { grid-column: 1 / -1; align-items: start; }
.sw-attr--wide .sw-attr__label { padding-top: 5px; }
.sw-attr__label {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--muted); font-size: var(--t-13);
}
.sw-attr__value {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-width: 0;
}
.sw-attr__empty { color: var(--faint); font-size: var(--t-13); }
.sw-attr__unit { color: var(--muted); font-size: var(--t-12); }
.sw-attr__note { color: var(--muted); font-size: var(--t-12); }
.sw-attr__arrow { color: var(--faint); }
/* A control in an attribute row is quiet until it is touched. A grid of eleven
   bordered inputs reads as a form to fill in; these are facts that happen to be
   editable, which is a different thing and should look like one. */
.sw-attr__control,
.sw-attrs .sw-select--slim {
  border-color: transparent; background: transparent;
  padding-left: 6px; padding-right: 6px;
}
.sw-attr__control:hover,
.sw-attrs .sw-select--slim:hover { background: var(--sunken); }
.sw-attr__control:focus,
.sw-attr__control:focus-visible,
.sw-attrs .sw-select--slim:focus-visible {
  border-color: var(--hairline); background: var(--surface);
  outline: 2px solid var(--focus); outline-offset: 1px;
}
.sw-input--date { max-width: 15ch; }
.sw-input--num { max-width: 9ch; }
.sw-input--tag { max-width: 11ch; font-size: var(--t-12); }
.sw-select--slim { font-size: var(--t-12); }
/* A due date that has passed says so here as well as in the codeline pill,
   because this is the control somebody is about to change. */
.sw-input--date.is-late { color: var(--risk); font-weight: 600; }

/* A CONTAINER query, not a media query, and M13 is why.

   These rules were `@media (max-width: 860px)`, which asks how wide the WINDOW is.
   That was true enough while the attributes only ever appeared on a full page. Then
   the task moved into a 620px panel inside a 1500px window, and the media query —
   correctly, by its own terms — reported a wide screen and kept two columns. The
   result was a grid squeezed to half its width with every row wrapping: labels on
   one line, controls on the next, the two date inputs stacked either side of an
   arrow pointing at nothing.

   The component does not care how wide the window is. It cares how much room it
   has been given, and that is what a container query asks. `.sw-attrs` declares
   itself a container and the rules below measure IT, so the same markup lays out
   correctly on a page, in a 620px panel and in a 980px expanded one without any of
   the three knowing about the others.

   THE CONTAINER IS THE PANE, NOT THE GRID, and the first attempt got that wrong in
   a way worth recording: `container-type` was declared on `.sw-attrs` itself and
   the rules inside `@container` re-styled `.sw-attrs`. That does nothing. A
   container query styles the DESCENDANTS of its container; the container is the
   thing being measured and cannot be the thing being changed. It failed silently —
   valid CSS, no warning, and a layout identical to the bug it was meant to fix. */
.sw-peek, #app { container-type: inline-size; container-name: pane; }

@container pane (max-width: 700px) {
  .sw-attrs { grid-template-columns: minmax(0, 1fr); }
}
@container pane (max-width: 420px) {
  .sw-attr { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 2px; }
}
/* The fallback for a browser without container queries: one column, always. Worse
   on a wide page and correct everywhere, which is the right way round. */
@supports not (container-type: inline-size) {
  .sw-attrs { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------- assignees
   Initials in a ring, the way the screenshot does it. Not photographs: this
   product has no avatars and a coloured circle with two letters is honest about
   that, where a generated cartoon would not be. */
.sw-who {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--sunken); border-radius: var(--r-pill);
  padding: 2px 8px 2px 2px; font-size: var(--t-12);
}
.sw-who__face {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--ink-blue); color: var(--surface);
  font-size: var(--t-11); font-weight: 700; letter-spacing: 0.02em;
}
/* The accountable person wears the gold ring, and they are the only one. That is
   D006 made visible: a set of five has nobody on the hook, and this says which of
   the five is. It is also why there is no x on them — the database refuses it. */
.sw-who--accountable .sw-who__face {
  background: var(--gold); color: var(--on-gold);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--gold);
}
.sw-who__name { color: var(--text); }
.sw-who__off, .sw-tag__off {
  border: 0; background: none; padding: 0 0 0 2px; line-height: 0;
  color: var(--muted); cursor: pointer; border-radius: var(--r-sm);
}
.sw-who__off:hover, .sw-tag__off:hover { color: var(--risk); }
.sw-who__off:focus-visible, .sw-tag__off:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px;
}

/* ------------------------------------------------------------------------ tags
   Five tones, from a fixed palette, because a free colour field is how a product
   ends up with eleven greys four of which fail contrast. The tone is a column
   with a CHECK on it, so the stylesheet and the database agree on the list. */
.sw-tag {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 2px 6px 2px 9px; font-size: var(--t-12); font-weight: 600;
  color: var(--body);
}
.sw-tag--attention { color: var(--attention); border-color: var(--attention); }
.sw-tag--risk      { color: var(--risk);      border-color: var(--risk); }
.sw-tag--good      { color: var(--ok);        border-color: var(--ok); }
.sw-tag--info      { color: var(--ink-blue);  border-color: var(--ink-blue); }

/* ------------------------------------------------------------ blocking / blocked
   The dependency graph, read the way the screenshot reads it: what this holds up,
   and what holds this up. */
.sw-depends {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; text-decoration: none; color: var(--text);
  font-size: var(--t-13); padding: 2px 0;
}
.sw-depends:hover .sw-depends__title { text-decoration: underline; }
.sw-depends:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-depends__title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* -------------------------------------------------------------------- Fields
   The screenshot's collapsed section, holding what the attribute grid does not
   carry. A real <details>, so it is in the tab order and find-in-page still
   reaches what is inside it when it is shut. */
.sw-fields { margin-bottom: var(--s-3); }
.sw-fields .sw-more__summary { display: flex; align-items: center; gap: 7px; }

.sw-body { margin-bottom: var(--s-3); }

/* ------------------------------------------------------------------ the folds
   Every list in the product is an accordion now, not only the one on All work.
   The summary keeps the shape its div had; what is added is a caret that turns,
   and the cursor and hover state that say the heading does something.

   `list-style: none` on the summary AND the ::marker and ::-webkit-details-marker
   rules: three spellings because three engines disagree about which one they
   honour, and a stray triangle beside a caret is two disclosure indicators
   arguing. */
.sw-group > summary,
.sw-section--fold > summary { cursor: pointer; list-style: none; }
.sw-group > summary::marker,
.sw-section--fold > summary::marker { content: ""; }
.sw-group > summary::-webkit-details-marker,
.sw-section--fold > summary::-webkit-details-marker { display: none; }
.sw-group > summary:hover .sw-group__label,
.sw-section--fold > summary:hover h2 { text-decoration: underline; }
.sw-group > summary:focus-visible,
.sw-section--fold > summary:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm);
}
/* The `chevron` mark points RIGHT as drawn (M6.2 3.8 L10.4 8 L6.2 12.2), which is
   the closed state — so closed is rotate(0) and open turns it a quarter clockwise
   to point down. Written the other way round first, which put the caret UP when a
   group was shut and RIGHT when it was open: two states, both wrong, and neither
   visible to any gate. Found by asking the page what `getComputedStyle` said,
   which is the habit M11 wrote down. */
.sw-group__caret, .sw-section__caret {
  color: var(--muted); flex: none;
  transition: transform 120ms ease;
}
.sw-group[open] > summary .sw-group__caret,
.sw-section--fold[open] > summary .sw-section__caret { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .sw-group__caret, .sw-section__caret { transition: none; }
}
/* `.sw-section__head` is `justify-content: space-between`, which is right for the
   two children it was built for — a heading and a count. A summary has THREE: a
   caret, the heading and the count, and space-between duly pushed the heading
   into the middle of the row. Every folding section in the product had a centred
   title and nothing said so, because a centred heading is not an error, it is a
   layout. `margin-right: auto` puts the heading back beside its caret and leaves
   the count where it was. */
.sw-section--fold > summary { display: flex; align-items: center; gap: var(--s-1); }
.sw-section--fold > summary h2 { margin-right: auto; }
.sw-group__head { align-items: center; }


/* ------------------------------------------------------------ Settings · People
   A row per person, not a table. The cells are independent facts about one human
   rather than columns to compare down the page, and the spaces cell holds a
   variable number of chips that a fixed column would either crop or waste. */
.sw-person {
  display: grid;
  /* M42 (D212): a column for when they joined, signed in and last did something. */
  grid-template-columns: 32px minmax(150px, 1.3fr) minmax(150px, 1fr) minmax(110px, 0.9fr)
                         minmax(110px, 0.8fr) minmax(70px, 0.5fr) 120px auto;
  align-items: center; gap: var(--s-1);
  padding: var(--s-1) 0;
  border-bottom: 1px solid var(--hairline);
}
.sw-person:last-of-type { border-bottom: 0; }
/* A deactivated person stays in the list — their open work is still theirs — and
   is dimmed rather than hidden, because an admin needs to see the eleven items
   sitting with somebody who has left. */
.sw-person.is-off { opacity: 0.62; }
.sw-person__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sw-person__name {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: var(--t-13);
}
.sw-person__you {
  font-size: var(--t-11); font-weight: 600; color: var(--muted);
  background: var(--sunken); border-radius: var(--r-pill); padding: 1px 6px;
}
.sw-person__mail {
  font-size: var(--t-12); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-person__cell {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  font-size: var(--t-12); min-width: 0;
}
.sw-person__phone { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sw-person__act { justify-content: flex-end; }
/* A disabled control here always carries a title saying WHY — "you cannot change
   your own role", "the last owner or admin". A greyed control with no reason
   teaches somebody the product is broken; with one it teaches them the rule. */
.sw-person [disabled] { cursor: not-allowed; }

@media (max-width: 900px) {
  .sw-person {
    grid-template-columns: 26px minmax(0, 1fr);
    grid-auto-rows: min-content; row-gap: 4px; padding: var(--s-1) 0 var(--s-2);
  }
  .sw-person__cell { grid-column: 2; }
  .sw-person__act { justify-content: flex-start; }
}


/* ======================================================= M13: the task panel
   A task opens over the list it came from, which is what all three of Arvind's
   screenshots show. The full page still exists at its own URL — a link somebody
   pastes into a message has to open something on its own rather than a panel over
   a list chosen for them. */
#peek[hidden] { display: none; }

/* The scrim is deliberately faint and does NOT block the list. This is not a modal:
   the point of a panel is that what you were looking at is still there, still
   readable, and one click away. A 40% black scrim would be a dialog wearing a
   panel's shape. */
.sw-peek__scrim {
  position: fixed; inset: 0; z-index: 60;
  background: oklch(22% 0.015 265 / 0.10);
}
.sw-peek {
  position: fixed; z-index: 61; top: 0; right: 0; bottom: 0;
  width: min(620px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--hairline);
  box-shadow: var(--shadow-panel);
  overflow: auto; overscroll-behavior: contain;
  padding: var(--s-2) var(--s-3) var(--s-3);
}
.sw-peek:focus { outline: none; }
.sw-peek:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
/* Expand, from screenshot two. Remembered, because somebody who wants the wide one
   wants it every time. */
.sw-peek.is-wide { width: min(980px, 100vw); }

@media (prefers-reduced-motion: no-preference) {
  .sw-peek { animation: peek-in 140ms ease-out; }
  @keyframes peek-in { from { transform: translateX(12px); opacity: 0; } }
}

.sw-peek__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); margin-bottom: var(--s-2);
  padding-bottom: var(--s-1); border-bottom: 1px solid var(--hairline);
}
.sw-peek__crumb {
  font-size: var(--t-12); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-peek__tools { display: flex; align-items: center; gap: 2px; flex: none; }
.sw-peek__tool {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--muted); font: inherit; font-size: var(--t-12);
  text-decoration: none; cursor: pointer;
}
.sw-peek__tool:hover { background: var(--sunken); color: var(--text); }
.sw-peek__tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-peek__x { padding: 5px; }

/* The panel is the whole screen on a phone, because 620px of panel on a 390px
   screen is a panel with a 0px list behind it — which is a page, and should look
   like one. */
@media (max-width: 680px) {
  .sw-peek { width: 100vw; border-left: 0; padding: var(--s-2); }
  .sw-peek__scrim { display: none; }
}

/* ------------------------------------------------------------- attachments
   A row per file: type mark, name, size, and what you can do with it. */
.sw-files { display: grid; gap: var(--s-1); margin-bottom: var(--s-3); }
.sw-files__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-2);
}
/* `.sw-label` is a block, so a mark inside one sat on its own line above the word
   — a paperclip floating over "ATTACHMENTS" with nothing to attach to. */
.sw-files__head .sw-label,
.sw-files__head h2 {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
}
.sw-files__grid {
  display: grid; gap: var(--s-1);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.sw-file {
  display: flex; align-items: center; gap: var(--s-1);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 8px 10px; background: var(--surface); min-width: 0;
}
.sw-file__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none; border-radius: var(--r-sm);
  background: var(--sunken); color: var(--muted);
  font-size: var(--t-11); font-weight: 700; letter-spacing: 0.02em;
}
.sw-file__body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sw-file__name {
  font-size: var(--t-13); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-file__meta { font-size: var(--t-11); color: var(--muted); }
.sw-file__meta a { color: var(--muted); }
.sw-file__off {
  margin-left: auto; flex: none; border: 0; background: none; padding: 4px;
  color: var(--muted); cursor: pointer; border-radius: var(--r-sm); line-height: 0;
}
.sw-file__off:hover { color: var(--risk); background: var(--sunken); }
.sw-file__off:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* The + tile. A label rather than a button, because the control that opens a file
   picker is an <input type=file> and dressing one up is how it stops being
   keyboard-reachable. */
.sw-file--add {
  justify-content: center; color: var(--muted); cursor: pointer;
  border-style: dashed;
}
.sw-file--add:hover { background: var(--sunken); color: var(--text); }
.sw-file--add:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-file--add input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ------------------------------------------------------------------ the tabs */
.sw-tabs {
  display: flex; gap: var(--s-2); align-items: center;
  border-bottom: 1px solid var(--hairline); margin-bottom: var(--s-2);
}
.sw-tabs__tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 2px; border: 0; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: var(--t-13); font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sw-tabs__tab:hover { color: var(--text); }
.sw-tabs__tab[aria-selected="true"] {
  color: var(--text); border-bottom-color: var(--text);
}
.sw-tabs__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-tabs__n {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-11); color: var(--muted);
  background: var(--sunken); border-radius: var(--r-pill); padding: 1px 6px;
}
.sw-tabpanel[hidden] { display: none; }

/* --------------------------------------------------------------- subtask cards
   Screenshot two: a subtask is a card with its own status, its own date and its
   own note — not a tick in a list. That is the honest shape here too, because a
   subtask in this product IS a work item with all of those. */
.sw-sub {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: var(--s-1); align-items: start;
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 10px var(--s-1); margin-bottom: 6px; background: var(--surface);
}
.sw-sub__title { font-size: var(--t-13); font-weight: 600; }
.sw-sub__title a { color: inherit; text-decoration: none; }
.sw-sub__title a:hover { text-decoration: underline; }
.sw-sub__meta {
  font-size: var(--t-11); color: var(--muted);
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px;
}
.sw-sub__note {
  font-size: var(--t-12); color: var(--body);
  background: var(--sunken); border-radius: var(--r-sm);
  padding: 6px 8px; margin-top: 6px;
}
.sw-sub__right { display: flex; align-items: center; gap: 6px; }

/* The progress ring from screenshot one, drawn with a conic gradient rather than
   an SVG: it is one element, it scales with the font, and it needs no viewBox. */
.sw-ring {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-12); color: var(--muted);
}
.sw-ring__dial {
  width: 15px; height: 15px; border-radius: 50%;
  background: conic-gradient(var(--text) calc(var(--done, 0) * 1turn),
                             var(--sunken) 0);
  flex: none;
}

/* ------------------------------------------------------------- the conversation */
.sw-say { padding: var(--s-1) 0; }
.sw-say__card {
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 10px var(--s-1); background: var(--surface);
}
.sw-say__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-1); margin-bottom: 4px;
}
.sw-say__who { font-size: var(--t-13); font-weight: 650; }
.sw-say__when { font-size: var(--t-11); color: var(--muted); }
/* The rendered markdown. Only the tags domain/compose.py emits can appear here. */
.sw-say__body { font-size: var(--t-13); color: var(--body); }
.sw-say__body p { margin: 0 0 var(--s-0); }
.sw-say__body p:last-child { margin-bottom: 0; }
.sw-say__body code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--sunken); border-radius: var(--r-xs); padding: 1px 4px;
}
.sw-say__foot { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.sw-say__reply {
  border: 0; background: none; padding: 2px 6px; border-radius: var(--r-sm);
  color: var(--muted); font: inherit; font-size: var(--t-11); cursor: pointer;
}
.sw-say__reply:hover { background: var(--sunken); color: var(--text); }
.sw-say__reply:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* A reply is indented once and cannot be replied to (030), so there is exactly one
   level and no rule is needed for a second. */
.sw-say--reply { margin-left: var(--s-3); }
.sw-say--reply .sw-say__card { background: var(--canvas); }

.sw-react {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 1px 7px; background: none; cursor: pointer;
  font: inherit; font-size: var(--t-11); color: var(--muted);
}
.sw-react:hover { background: var(--sunken); }
.sw-react.is-mine { border-color: var(--ink-blue); color: var(--ink-blue); }
.sw-react:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-react__n { font-variant-numeric: tabular-nums; }
.sw-react--add { color: var(--faint); }

/* --------------------------------------------------------------- the composer */
.sw-compose {
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--surface); margin-top: var(--s-2);
}
.sw-compose__box {
  width: 100%; border: 0; background: none; resize: vertical;
  padding: var(--s-1); font: inherit; font-size: var(--t-13); color: var(--text);
  min-height: 72px;
}
.sw-compose__box:focus { outline: none; }
.sw-compose:focus-within { border-color: var(--focus); }
.sw-compose__bar {
  display: flex; align-items: center; gap: 2px;
  padding: 4px var(--s-0); border-top: 1px solid var(--hairline);
}
.sw-compose__tool {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; padding: 5px 7px; border-radius: var(--r-sm);
  color: var(--muted); font: inherit; font-size: var(--t-12); cursor: pointer;
  line-height: 1;
}
.sw-compose__tool:hover { background: var(--sunken); color: var(--text); }
.sw-compose__tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-compose__tool b { font-weight: 800; }
.sw-compose__tool i { font-style: italic; }
.sw-compose__sep { width: 1px; height: 16px; background: var(--hairline); margin: 0 4px; }
.sw-compose__go { margin-left: auto; }
/* Ask AI is the one thing in the bar with a word on it, because it is the one that
   does something the person cannot predict from an icon. Not gold: the Seal Rule
   caps gold at two and Publish is the thing to do here. */
.sw-compose__ai { color: var(--ink-blue); font-weight: 600; }
.sw-compose__reply {
  display: flex; align-items: center; gap: 6px;
  padding: 6px var(--s-1); border-bottom: 1px solid var(--hairline);
  font-size: var(--t-11); color: var(--muted); background: var(--sunken);
}
/* I-012, made again: an author `display` rule beats the UA rule for `[hidden]`, so
   this bar rendered on every load — an empty "replying to" strip above every
   composer, with nothing named and an × that cancelled nothing. The stylesheet
   already carries this note for `.banner`; it needs saying wherever a `display` is
   set on something that also uses the attribute. */
.sw-compose__reply[hidden], .sw-drafts[hidden] { display: none; }
.sw-compose__reply button {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  color: var(--muted); padding: 2px; line-height: 0;
}
/* The drafts Ask AI offers. Shown as choices, never inserted without a click —
   there is no path from the draft endpoint to a posted comment (D086). */
.sw-drafts {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: var(--s-1); border-top: 1px solid var(--hairline);
  background: var(--sunken);
}
.sw-drafts__note {
  flex-basis: 100%; font-size: var(--t-11); color: var(--muted); margin: 0 0 2px;
}


/* ============================================================ M15: soft shapes
   D095. Arvind: *"Remove all the chunky boxes. Follow the design style as per the
   attached images for tags, priorities, stages, and everywhere there are boxes.
   Follow the style for cards as per the attached guidelines for borders."*

   What that meant, concretely, once the references were measured rather than
   admired:

   · A control is a FILL, not a frame. The chunky boxes were 44px-tall bordered
     inputs sitting in a grid of facts — a form, where the page is a record. They
     are now a tonal step (divider stock) with no border until they are touched,
     36px on a pointer screen and 44px where the pointer is a finger.
   · A fact about an item is a soft PILL: a tint of its own tone behind its own
     ink, no outline. A coloured hairline around a coloured word said the same
     thing twice, and that doubled edge is most of what read as chunky.
   · A card lifts off the desk with a faint two-layer shadow instead of a frame.
     D017 held that depth is a tonal step and a shadow is for what floats; D095
     keeps the tonal step and lets a card have the faintest contact shadow, which
     is what every one of the references does.
   · The NESTED RULE: an inner radius is the outer radius minus the padding
     between them. The scale (tokens.css) is 4px steps so it can be kept by
     arithmetic: 16px card, 8px padding, 8px controls.

   Gold stays the seal and the primary action (the Seal Rule survives), and the
   palette is Swarm's own — Arvind chose soft shapes in Swarm's colours over a
   copy of the references' blue. */

/* ------------------------------------------------------------------- controls */
.sw-input, .sw-select, .sw-textarea {
  background: var(--sunken); border-color: transparent;
  border-radius: var(--r-sm); min-height: 36px;
  transition: background var(--d-state) var(--e), box-shadow var(--d-state) var(--e);
}
.sw-textarea { min-height: 72px; }
.sw-input:hover, .sw-select:hover, .sw-textarea:hover { background: var(--hairline); }
.sw-input:focus, .sw-select:focus, .sw-textarea:focus {
  background: var(--surface); box-shadow: 0 0 0 1px var(--hairline);
}
.sw-button { min-height: 36px; border-radius: var(--r-sm); }
.sw-button--secondary { background: var(--sunken); border-color: transparent; }
.sw-button--secondary:hover { background: var(--hairline); }
.sw-button--danger { background: var(--risk-bg); color: var(--risk); }
.sw-button--danger:hover { background: var(--risk); color: var(--surface); }
.sw-button--small { min-height: 30px; padding: 0 10px; }
/* A finger is not a pointer. The touch floor comes back where it is needed and
   nowhere else, instead of every control on a 27-inch screen paying for it. */
@media (pointer: coarse) {
  .sw-input, .sw-select, .sw-button { min-height: 44px; }
  .sw-button--small { min-height: 36px; }
}

/* A soft field for the sheet: the same fill, no frame. */
.sw-soft {
  font: inherit; font-size: var(--t-14); color: var(--text);
  background: var(--sunken); border: 0; border-radius: var(--r-sm);
  min-height: 36px; padding: 0 10px;
}
.sw-soft::placeholder { color: var(--muted); }
.sw-soft:focus { outline: 2px solid var(--focus); outline-offset: 1px; background: var(--surface); }
.sw-soft--wide { width: 100%; }

/* ---------------------------------------------------------------------- cards */
.sw-card, .sw-card2 {
  border-color: transparent; box-shadow: var(--shadow-soft);
}
.sw-card { border-radius: var(--r-lg); padding: var(--s-2); }
.sw-card2 { border-radius: var(--r-md); }            /* 12 = 8 of padding + a 4px code chip */
.sw-card2:hover { border-color: transparent; box-shadow: var(--shadow-lift); }

/* The attribute grid: a card with 8px of padding round 8px controls — 16px outside. */
.sw-attrs {
  border-color: transparent; box-shadow: var(--shadow-soft);
  border-radius: var(--r-lg); padding: var(--s-1);
  gap: 2px var(--s-2);
}
.sw-attr { padding: 0 var(--s-1); border-radius: var(--r-sm); }
.sw-attr__control, .sw-attrs .sw-select--slim { border-radius: var(--r-sm); min-height: 32px; }

/* The exhibit is divider stock — the tone is its edge, so the hairline goes. */
.sw-exhibit { border-color: transparent; border-radius: var(--r-md); }
.sw-block {
  border: 0; background: var(--risk-bg); border-radius: var(--r-md);
}
.banner { border-radius: var(--r-md); }
.sw-upward { border-radius: var(--r-md); }
.sw-modal { border: 0; border-radius: var(--r-xl); }
.sw-modal__box { padding: var(--s-2) 20px 20px; }
.sw-modal__actions { border-top: 0; padding-top: var(--s-1); align-items: center; }
.sw-modal__x { border-radius: var(--r-sm); }
.sw-toast { border-radius: var(--r-md); }

/* --------------------------------------------------------------------- pills
   Tags, priorities, stages. Filled, borderless, 8px corners, 24px tall — the
   reference's chip rather than the old outlined capsule. */
.sw-chip {
  border: 0; border-radius: var(--r-sm); padding: 4px 10px;
  background: var(--sunken);
}
.sw-chip--selected {
  background: var(--gold-quiet); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--gold-ink);
}
.sw-facet {
  border: 0; border-radius: var(--r-sm); min-height: 24px;
  padding: 0 9px 0 7px; background: var(--sunken); color: var(--muted);
}
.sw-facet--risk      { color: var(--risk);      background: var(--risk-bg); }
.sw-facet--attention { color: var(--attention); background: var(--attention-bg); }
.sw-facet--ok        { color: var(--ok);        background: var(--ok-bg); }
.sw-facet--note      { color: var(--ink-blue);  background: var(--info-bg); }

.sw-tag {
  border: 0; border-radius: var(--r-sm); background: var(--sunken);
  padding: 3px 6px 3px 10px; min-height: 24px;
}
.sw-tag--attention { color: var(--attention); background: var(--attention-bg); }
.sw-tag--risk      { color: var(--risk);      background: var(--risk-bg); }
.sw-tag--good      { color: var(--ok);        background: var(--ok-bg); }
.sw-tag--info      { color: var(--ink-blue);  background: var(--info-bg); }

.sw-sticker { border-radius: var(--r-sm); }

/* The stage, as a pill: its own ink on its own tint, mark first. The tone
   (good place / bad place) still speaks through Overdue and Blocked beside it. */
.sw-status[data-st] {
  background: var(--st-bg); color: var(--st-ink);
  border-radius: var(--r-sm); padding: 3px 10px 3px 7px; min-height: 26px;
}
.sw-status--risk:not([data-st]) {
  background: var(--risk-bg); border-radius: var(--r-sm); padding: 3px 10px 3px 7px;
}

/* ------------------------------------------------------------ people chips */
.sw-who { padding: 2px 10px 2px 2px; gap: 6px; }
.sw-who__tag {
  font-size: var(--t-11); font-weight: 700; color: var(--gold-ink);
  margin-left: 2px;
}
.sw-who--guest .sw-who__face { background: var(--muted); }
.sw-who--guest .sw-who__tag { color: var(--muted); }

/* "Add" — the reference's Upload: an outline that is dashed because it is a
   place something can go, not a thing that is there. */
.sw-add {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 28px; padding: 0 10px 0 8px;
  font: inherit; font-size: var(--t-12); font-weight: 600; color: var(--muted);
  background: transparent; border: 1px dashed var(--hairline);
  border-radius: var(--r-sm); cursor: pointer;
}
.sw-add:hover { color: var(--text); border-color: var(--muted); background: var(--sunken); }
/* D367: a card's Add sits inside the card's padding, never on its edge. */
.sw-section--fold > .sw-section__body > .sw-add { margin: var(--s-2) 0 var(--s-3); }
.sw-section--fold > .sw-section__body > .sw-kpis:first-child { margin-top: var(--s-2); }
.sw-section--fold > .sw-section__body > .sw-cb__pchips { padding: var(--s-2) 0 var(--s-3); }
.sw-ci__add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 var(--s-2); }
.sw-sheet__opt { font-size: var(--t-11, 11px); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-left: 6px; }
.sw-raci { display: grid; grid-template-columns: max-content 1fr; gap: 10px 14px; margin: 0 0 var(--s-2); }
.sw-raci dt { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); }
.sw-raci dd { margin: 0; color: var(--body); font-size: var(--t-14); }
@media (max-width: 560px) { .sw-raci { grid-template-columns: 1fr; gap: 4px; } .sw-raci dd { margin-bottom: 8px; } }
.sw-link--icon { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sw-add:focus-visible, .sw-add:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-add--select { position: relative; padding-right: 8px; }
.sw-add--select select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  font: inherit; color: inherit; cursor: pointer; padding: 0; outline: none;
}

/* The tag field and the timer, which were the two chunkiest things on the page. */
.sw-attrs .sw-input--tag {
  min-height: 28px; max-width: 12ch; background: transparent;
  border: 1px dashed var(--hairline); border-radius: var(--r-sm); padding: 0 8px;
}
.sw-attrs .sw-input--tag:focus { border-style: solid; border-color: var(--hairline); background: var(--surface); }
.sw-attrs [data-timer] {
  min-height: 28px; padding: 0 10px 0 8px; font-size: var(--t-12);
  background: var(--sunken); border: 0; border-radius: var(--r-sm); font-weight: 600;
}
.sw-attrs [data-timer]:hover { background: var(--hairline); }

/* ---------------------------------------------------------------- the dates */
.sw-when {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 30px; padding: 0 12px 0 9px;
  font: inherit; font-size: var(--t-13); font-variant-numeric: tabular-nums;
  color: var(--text); background: var(--sunken); border: 0;
  border-radius: var(--r-sm); cursor: pointer; white-space: pre;
}
.sw-when:hover { background: var(--hairline); }
.sw-when:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-when.is-late { color: var(--risk); background: var(--risk-bg); }
.sw-when.is-empty { color: var(--muted); }
.sw-when.is-static { cursor: default; }
.sw-when.is-static:hover { background: var(--sunken); }

/* ------------------------------------------------------------------ the tick */
.sw-tick { border-radius: var(--r-xs); }
/* Refused, and it LOOKS refused: a dashed border and no fill, rather than a
   30%-opacity version of the live one that nobody could tell apart. */
.sw-tick:disabled {
  opacity: 1; border-style: dashed; border-color: var(--hairline);
  background: var(--sunken); cursor: not-allowed;
}

/* ------------------------------------------------------------------ the tabs */
.sw-tabs__tab { border-radius: var(--r-tab); }

/* ----------------------------------------------------------------- the sheet */
.sw-sheet { width: min(640px, calc(100vw - var(--s-3) * 2)); }
.sw-sheet__lead { margin: 0 0 var(--s-1); font-size: var(--t-16, 1rem); color: var(--text); }
.sw-sheet__note { margin: 0 0 var(--s-2); font-size: var(--t-13); color: var(--muted); }
.sw-sheet__h {
  margin: var(--s-3) 0 var(--s-1); font-size: var(--t-13); font-weight: 700; color: var(--text);
}
.sw-grow { flex: 1 1 auto; }
.sw-link {
  font: inherit; font-size: var(--t-12); font-weight: 600; color: var(--gold-ink);
  background: none; border: 0; padding: 4px 6px; border-radius: var(--r-xs); cursor: pointer;
}
.sw-link:hover { background: var(--gold-quiet); }
.sw-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--muted); cursor: pointer;
}
.sw-iconbtn:hover { background: var(--sunken); color: var(--text); }

/* A bottom sheet on a phone, with the top corners the only round ones. */
@media (max-width: 560px) {
  .sw-sheet {
    width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 88vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  .sw-sheet .sw-modal__actions { flex-wrap: wrap; }
}

/* The picker's rows. */
.sw-picks { list-style: none; margin: 0; padding: 0; }
.sw-pick {
  display: flex; align-items: center; gap: var(--s-1);
  min-height: 44px; padding: 0 var(--s-1); border-radius: var(--r-sm);
}
.sw-pick:hover { background: var(--sunken); }
.sw-pick__who { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.sw-pick__name { display: flex; flex-direction: column; min-width: 0; font-size: var(--t-14); color: var(--text); }
.sw-pick__via { font-size: var(--t-12); color: var(--muted); }
.sw-pick .sw-who__face {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink-blue); color: var(--surface); font-size: var(--t-11); font-weight: 700;
}
.sw-pick.is-on .sw-who__face { background: var(--text); }
.sw-picks .sw-check { width: 18px; height: 18px; min-height: 0; accent-color: var(--gold-ink); flex: none; }
.sw-invite { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.sw-invite .sw-soft { flex: 1 1 180px; }

/* The range calendar. Picked days are ink circles and the days between them a
   band — the reference Arvind sent, in Swarm's ink rather than its black. */
.sw-cal { position: relative; }
.sw-cal__nav {
  position: absolute; top: -2px; right: 0; display: flex; gap: 2px;
}
.sw-cal__months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.sw-cal__title { font-weight: 700; font-size: var(--t-14); color: var(--text); min-height: 28px; }
.sw-cal__dow, .sw-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sw-cal__dow span { text-align: center; font-size: var(--t-12); color: var(--muted); padding: 4px 0; }
.sw-cal__day {
  font: inherit; font-size: var(--t-13); font-variant-numeric: tabular-nums; color: var(--text);
  aspect-ratio: 1; min-width: 0; border: 0; background: transparent;
  border-radius: 50%; cursor: pointer;
}
.sw-cal__day:hover { background: var(--sunken); }
.sw-cal__day:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--muted); }
.sw-cal__day.is-between { background: var(--sunken); border-radius: 0; }
.sw-cal__day.is-start, .sw-cal__day.is-end {
  background: var(--solid-cta); color: var(--solid-cta-ink); font-weight: 700;
}
.sw-when__switch {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-1);
  flex-wrap: wrap; margin-top: var(--s-2);
}
.sw-when__hint { font-size: var(--t-12); color: var(--muted); }
.sw-when__times { display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-1); }
.sw-when__times[hidden] { display: none; }
.sw-when__time .sw-soft { min-width: 120px; }
.sw-when__summary { margin: var(--s-2) 0 0; font-size: var(--t-13); color: var(--body); white-space: pre; }
.sw-when__reason { margin-top: var(--s-1); }
.sw-when__reason[hidden] { display: none; }
@media (max-width: 560px) {
  .sw-cal__months { grid-template-columns: minmax(0, 1fr); }
  .sw-cal__months > .sw-cal__month + .sw-cal__month { display: none; }
}

/* The switch: a real checkbox, drawn as a track and a knob. */
.sw-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--t-14); color: var(--text); }
.sw-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-switch__track {
  position: relative; flex: none; width: 34px; height: 20px; border-radius: var(--r-pill);
  background: var(--hairline); transition: background var(--d-state) var(--e);
}
.sw-switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-soft);
  transition: transform var(--d-move) var(--e);
}
.sw-switch input:checked + .sw-switch__track { background: var(--ok); }
.sw-switch input:checked + .sw-switch__track::after { transform: translateX(14px); }
.sw-switch input:focus-visible + .sw-switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }

/* -------------------------------------------------------- a project's people */
.sw-people .sw-section__body { display: grid; gap: var(--s-1); }
.sw-people__row {
  display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: var(--s-1);
  min-height: 36px;
}
.sw-people__label { font-size: var(--t-13); color: var(--muted); }
.sw-people__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sw-chip--team { gap: 6px; padding: 4px 6px 4px 10px; color: var(--text); }
.sw-chip__n { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.sw-chip__off {
  border: 0; background: none; padding: 0; line-height: 0; color: var(--muted);
  cursor: pointer; border-radius: var(--r-xs);
}
.sw-chip__off:hover { color: var(--risk); }
.sw-chip__off:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (max-width: 560px) {
  .sw-people__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ------------------------------------------------------------------- guests */
.is-guest .rail__compose, .is-guest #cmd-open { display: none; }

/* A section was two boxes — a framed head sitting on a framed body with a square
   corner where they met — which is exactly the box-in-a-box the references do
   without. It is one card now: the section lifts, and its head and body are
   regions of it rather than frames of their own. */
.sw-section:has(> .sw-section__body),
.sw-section--fold {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.sw-section__head { background: transparent; border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.sw-section__body { background: transparent; border: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.sw-section--fold > .sw-section__body { border-top: 1px solid var(--hairline); }
.sw-section--fold:not([open]) > .sw-section__head { border-radius: var(--r-lg); }
.sw-section--fold > .sw-section__head:focus-visible { outline-offset: -2px; }
/* The previous-month arrow is the next-month arrow, turned round. */
.sw-cal__prev-mark { transform: rotate(180deg); }

/* The view switcher as a segmented control (D095). Track 12px with 4px of inset,
   so the raised tab is 8px — the nested rule, by arithmetic. */
.sw-views-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-1);
  margin-bottom: var(--s-3);
}
.sw-views {
  display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 4px;
  border: 0; background: var(--sunken); border-radius: var(--r-md);
}
.sw-views__tab {
  border: 0; margin: 0; background: transparent; border-radius: var(--r-sm);
  padding: 0 12px; min-height: 30px;
}
.sw-views__tab[aria-selected="true"] {
  background: var(--surface); border: 0; box-shadow: var(--shadow-soft);
}
.sw-views__soon { padding-bottom: 0; }

/* The stage and filter chips: filled, not outlined. The chosen one keeps its gold
   ring — that is the Seal Rule, and it survives the change of shape. */
.sw-stage { border-color: transparent; border-radius: var(--r-sm); }
.sw-stage:hover { border-color: transparent; background: var(--hairline); }

/* ================================================================== M16 */
/* The "+" where a row's caret would be: the first subtask. Quiet until the row is
   pointed at, and always there for a finger. */
.sw-twist--add { opacity: 0; transition: opacity var(--d-state) var(--e); }
.sw-row:hover .sw-twist--add, .sw-twist--add:focus-visible { opacity: 1; }
@media (pointer: coarse) { .sw-twist--add { opacity: 0.7; } }
.sw-kids__add {
  display: flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) 0; color: var(--muted);
}
.sw-kids__add .sw-soft { flex: 1 1 auto; min-width: 0; }
.sw-more-rows {
  display: block; width: 100%; margin: var(--s-1) 0; padding: 8px;
  font: inherit; font-size: var(--t-13); font-weight: 600; color: var(--gold-ink);
  background: transparent; border: 1px dashed var(--hairline); border-radius: var(--r-sm);
  cursor: pointer;
}
.sw-more-rows:hover { background: var(--sunken); }

/* A mention in a comment, and the list that offers them. */
.sw-mention { color: var(--ink-blue); background: var(--info-bg); border-radius: var(--r-xs); padding: 0 3px; font-weight: 600; }
.sw-mention-pop {
  list-style: none; margin: 4px 0 0; padding: 4px; background: var(--surface);
  border-radius: var(--r-md); box-shadow: var(--shadow-lift); max-width: 320px;
}
.sw-mention-pop li {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: var(--r-sm); cursor: pointer; font-size: var(--t-14);
}
.sw-mention-pop li[aria-selected="true"], .sw-mention-pop li:hover { background: var(--sunken); }

.sw-face {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%; font-size: 10px; font-weight: 700;
  background: var(--ink-blue); color: var(--surface); box-shadow: 0 0 0 2px var(--surface);
}
.sw-face--owner { background: var(--gold); color: var(--on-gold); }
.sw-face--more { background: var(--sunken); color: var(--muted); }
.sw-faces {
  display: inline-flex; align-items: center; border: 0; background: none; padding: 2px;
  cursor: pointer; border-radius: var(--r-sm);
}
.sw-faces .sw-face + .sw-face { margin-left: -6px; }
.sw-faces:hover { background: var(--sunken); }
.sw-faces:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Promises made on a task, and the panel that names them when a date moves. */
.sw-promises { margin: var(--s-2) 0; padding: var(--s-2); background: var(--sunken); border-radius: var(--r-md); }
.sw-promises ul { margin: var(--s-1) 0; padding-left: var(--s-2); }
.sw-promises li { font-size: var(--t-14); margin: 4px 0; }
.sw-promises__when { color: var(--muted); font-size: var(--t-12); margin-left: 6px; }
.sw-risk { background: var(--risk-bg); border-radius: var(--r-md); padding: var(--s-2); color: var(--text); }
.sw-risk__head { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--risk); }
.sw-risk ul { margin: var(--s-1) 0; padding-left: var(--s-2); }
.sw-risk li { margin: 4px 0; font-size: var(--t-13); }
.sw-risk a { color: var(--text); font-weight: 600; }
.sw-risk__note { margin: var(--s-1) 0; font-size: var(--t-13); color: var(--body); }
.sw-risk__act { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.sw-refused { padding-left: var(--s-2); }
.sw-refused li { margin: 4px 0; font-size: var(--t-14); }

/* Contacts. */
.sw-cform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-2); }
.sw-cform__grid label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-12); color: var(--muted); font-weight: 600; }
.sw-cform__grid label[hidden] { display: none; }
.sw-cform__phone { display: flex; gap: 6px; }
.sw-cform__phone select { flex: 0 0 auto; max-width: 150px; }
.sw-cform__phone input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) { .sw-cform__grid { grid-template-columns: minmax(0, 1fr); } }
.sw-gfilter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin: var(--s-2) 0; }
.sw-gfilter .sw-soft { min-width: 180px; }
.sw-gfilter .sw-button--primary { margin-left: auto; }

/* The table, rebuilt. */
.sw-tbl__tools { display: flex; align-items: center; gap: var(--s-1); margin: 0 0 var(--s-1); flex-wrap: wrap; }
.sw-bulk {
  display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap;
  padding: 6px 8px; background: var(--gold-quiet); border-radius: var(--r-md);
}
.sw-bulk[hidden] { display: none; }
.sw-bulk__n { font-weight: 700; font-size: var(--t-13); padding: 0 4px; }
.sw-bulk .sw-soft { min-height: 30px; font-size: var(--t-13); }
.sw-tbl--m16 td { vertical-align: middle; }
.sw-tbl--m16 tr.is-sel td { background: var(--gold-quiet); }
.sw-tbl__sel { width: 36px; }
.sw-tbl__edit {
  font: inherit; font-size: var(--t-13); border: 0; border-radius: var(--r-sm);
  background: transparent; padding: 4px 6px; cursor: pointer; color: inherit;
}
.sw-tbl__edit:hover, .sw-tbl__edit:focus { background: var(--sunken); }
.sw-tbl__stsel { color: var(--st-ink); background: var(--st-bg); font-weight: 600; }
.sw-tbl__pri--urgent { color: var(--risk); background: var(--risk-bg); font-weight: 600; }
.sw-tbl__pri--high { color: var(--attention); background: var(--attention-bg); font-weight: 600; }
.sw-tbl__pri--low { color: var(--muted); }
.sw-tbl__tt { display: inline-flex; align-items: center; gap: 4px; min-width: 200px; }
.sw-tbl__pen { border: 0; background: none; padding: 2px; color: var(--muted); cursor: pointer;
  border-radius: var(--r-xs); opacity: 0; line-height: 0; }
tr:hover .sw-tbl__pen, .sw-tbl__pen:focus-visible { opacity: 1; }
.sw-tbl__left { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--t-13); }
.sw-tbl__left.is-late { color: var(--risk); font-weight: 600; }
.sw-tbl__num { text-align: right; font-variant-numeric: tabular-nums; }
.sw-tbl__tags { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sw-add--tiny { min-height: 22px; padding: 0 5px; }
.sw-tbl--m16 .sw-when { min-height: 26px; font-size: var(--t-12); white-space: nowrap; }

/* The composer (Todoist's shape, Swarm's colours). */
.sw-tc-host { padding: var(--s-1) 0; }
.sw-addtask {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--t-14);
  color: var(--gold-ink); font-weight: 600; background: none; border: 0; padding: 6px 4px;
  border-radius: var(--r-sm); cursor: pointer;
}
.sw-addtask:hover { background: var(--gold-quiet); }
.sw-tc {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
  padding: 12px 12px 8px;
}
.sw-tc__title, .sw-tc__desc {
  width: 100%; border: 0; background: none; font: inherit; color: var(--text); outline: none; resize: vertical;
}
.sw-tc__title { font-size: var(--t-16, 1rem); font-weight: 600; padding: 4px; }
.sw-tc__desc { font-size: var(--t-13); padding: 4px; color: var(--body); }
.sw-tc__desc[hidden] { display: none; }
.sw-tc__bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sw-tc__plus-wrap { position: relative; }
.sw-tc__plus, .sw-tc__go {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.sw-tc__plus { background: var(--sunken); color: var(--text); }
.sw-tc__go { background: var(--gold); color: var(--on-gold); }
.sw-tc__go:disabled { opacity: 0.5; }
.sw-tc__up { transform: rotate(-90deg); }
.sw-tc__menu {
  position: absolute; top: 38px; left: 0; z-index: 5; min-width: 200px; display: flex;
  flex-direction: column; padding: 4px; background: var(--surface);
  border-radius: var(--r-md); box-shadow: var(--shadow-lift);
}
.sw-tc__menu[hidden] { display: none; }
.sw-tc__menu button {
  display: flex; align-items: center; gap: 10px; font: inherit; font-size: var(--t-14);
  border: 0; background: none; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; color: var(--text);
}
.sw-tc__menu button:hover, .sw-tc__menu button:focus-visible { background: var(--sunken); }
.sw-tc__chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 8px;
  font-size: var(--t-12); font-weight: 600; color: var(--body);
  border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--surface);
}
.sw-tc__chip[hidden] { display: none; }
.sw-tc__chip--fixed { background: var(--sunken); border-color: transparent; }
.sw-tc__chip input, .sw-tc__chip select {
  font: inherit; border: 0; background: transparent; color: inherit; outline: none; max-width: 150px;
}

/* The calendar. */
.sw-calbar { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; margin: 0 0 var(--s-2); }
.sw-calbar__t { margin: 0 0 0 var(--s-1); font-size: var(--t-18); }
.sw-calmonth__dow, .sw-calmonth__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sw-calmonth__dow span { font-size: var(--t-12); color: var(--muted); padding: 4px 6px; }
.sw-calmonth:not(.sw-calmonth--mini) .sw-calmonth__grid {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); overflow: hidden;
}
.sw-calday {
  /* Grid lines as an inset shadow rather than two borders: the same hairline, and
     no one-sided border for the detector to read as a side-tab (found in M17). */
  min-height: 108px; padding: 4px; box-shadow: inset -1px -1px 0 var(--hairline);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.sw-calday.is-out { background: var(--sunken); }
.sw-calday__n {
  align-self: flex-start; font: inherit; font-size: var(--t-12); font-weight: 600; color: var(--muted);
  border: 0; background: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer;
}
.sw-calday.is-today .sw-calday__n { background: var(--solid-cta); color: var(--solid-cta-ink); }
.sw-calday__more { font: inherit; font-size: var(--t-11); color: var(--muted); border: 0; background: none; text-align: left; cursor: pointer; }
.sw-calitem {
  display: flex; align-items: center; gap: 4px; min-width: 0; padding: 2px 6px;
  font-size: var(--t-12); color: var(--st-ink); background: var(--st-bg);
  border-radius: var(--r-xs); text-decoration: none;
}
.sw-calitem__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.sw-calweek { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-1); }
.sw-calweek__day { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-soft); padding: 8px; min-height: 220px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sw-calweek__day.is-today { box-shadow: inset 0 0 0 2px var(--gold); }
.sw-calweek__h { display: flex; justify-content: space-between; font-size: var(--t-12); color: var(--muted); margin-bottom: 4px; }
.sw-calweek__h strong { color: var(--text); font-size: var(--t-16, 1rem); }
.sw-calweek__none { color: var(--faint); font-size: var(--t-12); }
.sw-calmulti { display: grid; gap: var(--s-2); }
.sw-calmulti--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sw-calmulti--12 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sw-calmonth--mini { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); padding: 12px; }
.sw-calmonth__t { font: inherit; font-weight: 700; font-size: var(--t-14); color: var(--text); background: none; border: 0; padding: 0 0 6px; cursor: pointer; }
.sw-calday--mini {
  min-height: 0; aspect-ratio: 1; border: 0; box-shadow: none; font: inherit; font-size: var(--t-11); color: var(--body);
  background: transparent; border-radius: var(--r-xs); cursor: pointer; padding: 0;
}
.sw-calday--mini.is-out { background: transparent; }
.sw-calday--mini[data-heat="1"] { background: var(--st-progress-bg); }
.sw-calday--mini[data-heat="2"] { background: var(--st-progress-chip); }
.sw-calday--mini[data-heat="3"], .sw-calday--mini[data-heat="4"] { background: var(--st-progress); color: var(--surface); font-weight: 700; }
.sw-calday--mini.is-today { box-shadow: inset 0 0 0 1.5px var(--gold-ink); }
@media (max-width: 760px) {
  .sw-calweek { grid-template-columns: minmax(0, 1fr); }
  .sw-calweek__day { min-height: 0; }
  .sw-calday { min-height: 64px; }
  .sw-calitem__t { display: none; }
  .sw-calmulti--3, .sw-calmulti--12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sw-approvals__h { font-size: var(--t-18); margin: var(--s-4) 0 var(--s-1); }
.sw-promises .sw-label { display: flex; align-items: center; gap: 6px; margin: 0; }

/* ================================================================== M17 — Maya
   A panel beside the page (D101–D107). Soft shapes, like everything since D095:
   fills rather than frames, the nested-radius rule (panel 16 → bubble 12 → row 8),
   and gold only where something is waiting for a decision. */
.sw-maya-open [data-mark], .sw-maya-open .sw-mark { color: var(--gold-ink); }
.sw-maya {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 40;
  width: min(400px, 100vw);
  display: flex; flex-direction: column;
  background: var(--surface); box-shadow: var(--shadow-panel);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.sw-maya[hidden] { display: none; }
@media (min-width: 1280px) {
  html[data-maya="open"] .app { padding-right: 400px; }
  .sw-maya { border-radius: 0; box-shadow: -1px 0 0 var(--hairline); }
}
.sw-maya__head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-1);
  padding: 12px 12px 12px var(--s-2);
}
.sw-maya__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sw-maya__avatar {
  flex: none; display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--gold-quiet); color: var(--gold-ink);
}
.sw-maya__avatar .sw-mark { width: 18px; height: 18px; }
.sw-maya__avatar--sm { width: 28px; height: 28px; border-radius: var(--r-sm); }
.sw-maya__avatar--sm .sw-mark { width: 15px; height: 15px; }
.sw-maya__title { margin: 0; font-size: var(--t-16); line-height: 1.2; }
.sw-maya__sub { margin: 0; font-size: var(--t-12); color: var(--muted); }
.sw-maya__tools { display: flex; align-items: center; gap: 2px; }
.sw-maya__tools .sw-button { padding-inline: 8px; white-space: nowrap; }
.sw-maya__who > div { min-width: 0; }
.sw-maya__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sw-maya__log {
  flex: 1 1 auto; overflow-y: auto; padding: var(--s-1) var(--s-2) var(--s-2);
  display: flex; flex-direction: column; gap: 12px;
  background: var(--canvas);
}
.sw-maya__msg { display: flex; gap: var(--s-1); align-items: flex-start; }
.sw-maya__msg--me { justify-content: flex-end; }
.sw-maya__said { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.sw-maya__bubble {
  margin: 0; padding: 10px 12px; border-radius: var(--r-md);
  font-size: var(--t-14); line-height: 1.5; color: var(--text);
  background: var(--surface); box-shadow: var(--shadow-soft);
  overflow-wrap: anywhere;
}
.sw-maya__msg--me .sw-maya__bubble {
  max-width: 85%; background: var(--st-progress-chip); box-shadow: none;
  border-bottom-right-radius: var(--r-xs);
}
.sw-maya__msg--maya .sw-maya__bubble { border-top-left-radius: var(--r-xs); }
.sw-maya__msg.is-typing .sw-maya__bubble { color: var(--muted); letter-spacing: 0.2em; }
/* I-287 (D434): while she looks something up, the bubble says what she is checking. */
.sw-maya__status { letter-spacing: 0; color: var(--muted); font-style: italic; animation: sw-maya-status 1.6s ease-in-out infinite; }
@keyframes sw-maya-status { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .sw-maya__status { animation: none; } }

.sw-maya__rows { display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border-radius: var(--r-md); padding: 4px; box-shadow: var(--shadow-soft); }
.sw-maya__row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center;
  gap: 8px; padding: 7px 8px; border-radius: var(--r-sm);
  color: var(--text); text-decoration: none; font-size: var(--t-13);
}
.sw-maya__row:hover, .sw-maya__row:focus-visible { background: var(--sunken); }
.sw-maya__state { display: inline-grid; place-items: center; color: var(--muted); }
.sw-maya__state[data-tone="attention"] { color: var(--attention); }
.sw-maya__state[data-tone="ok"] { color: var(--ok); }
.sw-maya__code {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-11); color: var(--muted); white-space: nowrap;
}
.sw-maya__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-maya__who { margin-left: 6px; font-size: var(--t-11); color: var(--muted); }
.sw-maya__who.is-blocked { color: var(--risk); font-weight: 600; }
.sw-maya__due {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--t-11); color: var(--muted); padding: 2px 6px; border-radius: var(--r-xs);
  background: var(--sunken); white-space: nowrap;
}
.sw-maya__due.is-late { color: var(--risk); background: var(--risk-bg); }
.sw-maya__more { margin: 2px 8px 4px; font-size: var(--t-12); color: var(--muted); }
.sw-maya__sec {
  margin: 4px 0 0; font-size: var(--t-11); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.sw-maya__lines { margin: 0; padding: 8px 12px 8px 26px; font-size: var(--t-13); line-height: 1.5;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
.sw-maya__lines a { color: var(--text); }
.sw-maya__ago { font-size: var(--t-11); color: var(--faint); }
.sw-maya__notice { margin: 0; font-size: var(--t-12); color: var(--muted); font-style: italic; }

.sw-maya__chips, .sw-maya__choices { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-maya__chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
  padding: 4px 10px; border: 0; border-radius: var(--r-sm);
  background: var(--sunken); color: var(--text); font: inherit; font-size: var(--t-13);
  text-decoration: none; cursor: pointer;
}
.sw-maya__chip:hover { background: var(--st-progress-chip); }
.sw-maya__chip--act { background: var(--gold-quiet); color: var(--text); font-weight: 600; }
.sw-maya__kind { font-size: var(--t-11); color: var(--muted); }
.sw-maya__choice {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: var(--surface); box-shadow: var(--shadow-soft);
  font: inherit; font-size: var(--t-13); color: var(--text); text-align: left;
}
.sw-maya__choice:hover { box-shadow: var(--shadow-lift); }

.sw-maya__card {
  padding: 12px; border-radius: var(--r-md); background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--gold), var(--shadow-soft);
  display: flex; flex-direction: column; gap: 8px;
}
.sw-maya__card[data-state]:not([data-state="pending"]) { box-shadow: var(--shadow-soft); }
.sw-maya__card-h {
  margin: 0; display: flex; align-items: center; gap: 6px;
  font-size: var(--t-11); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gold-ink);
}
.sw-maya__card[data-state]:not([data-state="pending"]) .sw-maya__card-h { color: var(--muted); }
.sw-maya__card-what { margin: 0; font-size: var(--t-14); font-weight: 600; color: var(--text); line-height: 1.4; }
.sw-maya__why { display: flex; flex-wrap: wrap; gap: 4px; }
.sw-maya__reason {
  font-size: var(--t-11); padding: 2px 8px; border-radius: var(--r-xs);
  background: var(--attention-bg); color: var(--attention);
}
.sw-maya__risk-h { margin: 0; font-size: var(--t-12); color: var(--risk); font-weight: 600; }
.sw-maya__risk { margin: 0; padding-left: 18px; font-size: var(--t-13); }
.sw-maya__card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sw-maya__card-state { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--t-13); color: var(--muted); }
.sw-maya__card-state[data-state="done"] { color: var(--ok); }
.sw-maya__card-state[data-state="failed"] { color: var(--risk); }
.sw-maya__reason-in { width: 100%; }
.sw-maya__draft { display: flex; flex-direction: column; gap: 6px; }
.sw-maya__draft-t {
  padding: 10px 12px; border-radius: var(--r-md); background: var(--surface);
  box-shadow: var(--shadow-soft); font-size: var(--t-13); line-height: 1.5; color: var(--body);
}

.sw-maya__suggest {
  flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 8px var(--s-2) 2px;
  scrollbar-width: none;
}
.sw-maya__suggest:empty { display: none; }
.sw-maya__suggest .sw-maya__chip { flex: none; white-space: nowrap; }
.sw-maya__compose {
  flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 12px var(--s-2);
}
.sw-maya__input {
  flex: 1 1 auto; resize: none; min-height: 40px; max-height: 140px;
  padding: 9px 12px; border: 0; border-radius: var(--r-md);
  background: var(--sunken); color: var(--text); font: inherit; font-size: var(--t-14); line-height: 1.4;
}
.sw-maya__input::placeholder { color: var(--faint); }
.sw-maya__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-maya__send { min-width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: var(--r-md); }
.sw-maya__send .sw-mark { width: 18px; height: 18px; }
/* M38: voice notes. The mic sits beside send; recording swaps the text field for a
   quiet status line — a still red dot and a running clock (the clock is the motion) —
   and a cancel. */
.sw-maya__mic, .sw-maya__cancel-rec { min-width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: var(--r-md); }
.sw-maya__mic[hidden], .sw-maya__cancel-rec[hidden], .sw-maya__rec[hidden] { display: none; }
.sw-maya__mic .sw-mark { width: 18px; height: 18px; }
.sw-maya__compose.is-recording .sw-maya__mic { background: var(--risk-bg); color: var(--risk); }
.sw-maya__rec {
  flex: 1 1 auto; margin: 0; min-height: 40px; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-md); background: var(--sunken);
  font-size: var(--t-14); color: var(--text);
}
.sw-maya__rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--risk); flex: none; }
.sw-maya__rec-t { font-variant-numeric: tabular-nums; font-weight: 600; }
.sw-maya__rec-hint { color: var(--muted); font-size: var(--t-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-maya__mine { max-width: 85%; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sw-maya__mine .sw-maya__bubble { max-width: 100%; }
.sw-maya__voice { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--muted); }
.sw-maya__voice-k { white-space: nowrap; }
.sw-maya__play {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0;
  border-radius: 50%; background: var(--sunken); color: var(--text); cursor: pointer;
}
.sw-maya__play:hover, .sw-maya__play[aria-pressed="true"] { background: var(--st-progress-chip); }
.sw-maya__play:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (max-width: 760px) { .sw-maya__rec-hint { display: none; } }
.sw-maya__switch { display: flex; align-items: center; gap: 8px; margin: var(--s-1) 0; font-size: var(--t-14); }
.sw-maya__chans { border: 0; padding: 0; margin: var(--s-1) 0 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-14); }

@media (max-width: 760px) {
  .sw-maya { width: 100vw; border-radius: 0; }
  .sw-maya__tools .sw-button { font-size: var(--t-12); }
}
.sw-maya__ul { margin: 4px 0; padding-left: 18px; }
.sw-maya__ul li + li { margin-top: 2px; }
.sw-maya__bubble strong { font-weight: 650; }

/* ---------------------------------------------------------------- M18: cards
   Arvind, 23 Sep: "All work and every section (triage, in progress, in review…)
   should be in a card." The same card a section already is (soft shadow, --r-lg,
   no border), so a stage group reads as one object — its heading and its rows —
   rather than a chip floating over a list with nothing holding the two together.
   The filter panel above gets the same card, because it is one object too. */
.sw-facets {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft); border-bottom: 0;
  padding: var(--s-1) var(--s-2);
}
.sw-group {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  padding: 0 var(--s-2);
}
.sw-group > .sw-group__head { margin: 0; padding: 12px 0; }
.sw-group[open] > .sw-group__head { border-bottom: 1px solid var(--hairline); }
.sw-group > .sw-section__body { padding: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.sw-group > summary:focus-visible { outline-offset: -2px; }
@media (max-width: 560px) {
  .sw-group, .sw-facets { padding-left: var(--s-1); padding-right: var(--s-1); }
}
/* The subtask row gained the list's tick (M18), in the column the state mark had. */
.sw-sub > .sw-tick { margin-top: 1px; }

/* M19: Ask AI shows each draft's own text (D112). A soft card per draft, the label
   small above the words, so the choice is between texts and not between titles. */
.sw-drafts__list { display: grid; gap: 8px; margin-top: 8px; }
.sw-draft {
  display: grid; gap: 4px; text-align: left; width: 100%;
  padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
}
.sw-draft:hover { border-color: var(--muted); box-shadow: var(--shadow-soft); }
.sw-draft:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-draft__label {
  font-size: var(--t-11); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.sw-draft__text { font-size: var(--t-14); line-height: 1.45; white-space: pre-wrap; }
.sw-drafts__list { flex-basis: 100%; }

/* ================================================================= M20: quick add
   A floating card, Todoist's shape in Swarm's materials: the name large, a row of
   soft chips beneath it, the + first. Centred in the upper third on a desk, a
   bottom sheet on a phone. */
.sw-qt { position: fixed; inset: 0; z-index: 70; }
.sw-qt[hidden] { display: none; }
.sw-qt__scrim { position: absolute; inset: 0; background: oklch(22% 0.015 265 / 0.22); }
.sw-qt__card {
  position: absolute; left: 50%; top: 14vh; transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px));
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-panel);
  padding: 18px 18px 14px;
}
.sw-qt__title {
  width: 100%; border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 20px; font-weight: 600; padding: 2px 0 6px;
}
.sw-qt__title::placeholder { color: var(--faint); font-weight: 500; }
.sw-qt__desc {
  width: 100%; border: 0; outline: 0; resize: vertical; background: transparent;
  color: var(--text); font: inherit; font-size: var(--t-14); padding: 0 0 8px;
}
.sw-qt__desc::placeholder { color: var(--faint); }
.sw-qt__desc[hidden] { display: none; }
.sw-qt__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0 12px; }
.sw-qt__plus {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sunken); color: var(--text);
}
.sw-qt__plus:hover { background: var(--hairline); }
.sw-qt__chip {
  display: inline-flex; align-items: center; border-radius: var(--r-pill);
  border: 1px solid var(--hairline); background: var(--surface); color: var(--text);
}
.sw-qt__chipbtn {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent;
  color: inherit; font: inherit; font-size: var(--t-14); padding: 7px 12px; cursor: pointer;
  border-radius: var(--r-pill);
}
.sw-qt__chipbtn:hover { background: var(--sunken); }
.sw-qt__chipoff {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 7px 10px 7px 2px; display: inline-flex;
}
.sw-qt__chipoff:hover { color: var(--risk); }
.sw-qt__chip--ok { color: var(--st-done); border-color: var(--st-done-bg); }
.sw-qt__chip--risk { color: var(--risk); border-color: var(--risk-bg); }
.sw-qt__chip--attention { color: var(--attention); border-color: var(--attention-bg); }
.sw-qt__foot {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end;
  border-top: 1px solid var(--hairline); padding-top: 12px;
}
.sw-qt__note { margin-right: auto; font-size: var(--t-12); color: var(--muted); }
.sw-qt__note.is-bad { color: var(--risk); }
.sw-qt__pop {
  position: absolute; z-index: 2; width: 260px; max-height: 360px; overflow: auto;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-panel);
  padding: 6px;
}
.sw-qt__pop[hidden] { display: none; }
.sw-qt__pop--wide { width: 340px; }
.sw-qt__popttl {
  font-size: var(--t-11); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); padding: 6px 8px 4px;
}
.sw-qt__opt {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--t-14);
  padding: 8px; border-radius: var(--r-sm); cursor: pointer;
}
.sw-qt__opt:hover, .sw-qt__opt:focus-visible { background: var(--sunken); outline: none; }
.sw-qt__optmain { display: flex; flex-direction: column; min-width: 0; }
.sw-qt__optsub { font-size: var(--t-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-qt__popform { display: flex; gap: 6px; padding: 6px 4px; flex-wrap: wrap; }
.sw-qt__popform .sw-input { flex: 1 1 110px; min-width: 0; }
.sw-qt__search { width: 100%; margin-bottom: 4px; }
.sw-qt__hint { font-size: var(--t-12); color: var(--muted); padding: 6px 8px; margin: 0; }
.sw-toast__link { color: inherit; font-weight: 700; margin-left: 6px; }
@media (max-width: 760px) {
  .sw-qt__card {
    top: auto; bottom: 0; left: 0; transform: none; width: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .sw-qt__pop, .sw-qt__pop--wide { width: calc(100% - 24px); left: 12px !important; }
}

/* ================================================================= M20: ⌘K
   The reference's shape: a search field with its glass, tabs under it, then
   rows that carry an icon tile, a title with its code, where it lives, and its
   stage and priority as small pills. */
.sw-cmdk { max-width: 680px; border-radius: var(--r-lg); }
.sw-cmdk__bar {
  display: flex; align-items: center; gap: 10px; padding: 4px 16px;
  border-bottom: 1px solid var(--hairline);
}
.sw-cmdk__glass { color: var(--muted); display: inline-flex; }
.sw-cmdk .sw-cmd__input {
  font-family: var(--font-ui); border-bottom: 0; padding: 14px 0; flex: 1 1 auto;
}
.sw-cmdk__kbd {
  font-family: var(--font-ui); font-size: var(--t-11); color: var(--muted);
  border: 1px solid var(--hairline); border-radius: var(--r-xs); padding: 2px 6px;
  background: var(--surface);
}
.sw-cmdk__tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--hairline); }
.sw-cmdk__tab {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent;
  color: var(--muted); font: inherit; font-size: var(--t-14); padding: 10px 8px 9px;
  border-bottom: 2px solid transparent; cursor: pointer;
}
.sw-cmdk__tab[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }
.sw-cmdk__body { max-height: min(56vh, 480px); overflow: auto; padding: 6px 8px 8px; }
.sw-cmdk__group + .sw-cmdk__group { border-top: 1px solid var(--hairline); margin-top: 6px; padding-top: 4px; }
.sw-cmdk__label { font-size: var(--t-12); color: var(--muted); padding: 8px 8px 4px; }
.sw-cmdk__row {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  border: 0; background: transparent; color: var(--text); font: inherit;
  padding: 8px; border-radius: var(--r-md); cursor: pointer;
}
.sw-cmdk__row.is-sel, .sw-cmdk__row:hover { background: var(--sunken); }
.sw-cmdk__icon {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); background: var(--surface); color: var(--muted);
}
.sw-cmdk__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sw-cmdk__title { font-size: var(--t-14); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-cmdk__code { font-weight: 500; color: var(--muted); margin-right: 8px; font-variant-numeric: tabular-nums; }
.sw-cmdk__sub { font-size: var(--t-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-cmdk__right { flex: none; display: inline-flex; gap: 6px; align-items: center; }
.sw-cmdk__pill {
  font-size: var(--t-11); border-radius: var(--r-xs); padding: 2px 6px;
  background: var(--sunken); color: var(--muted); font-weight: 600;
}
.sw-cmdk__pill--risk { background: var(--risk-bg); color: var(--risk); }
.sw-cmdk__pill--attention { background: var(--attention-bg); color: var(--attention); }
.sw-cmdk__empty { color: var(--muted); font-size: var(--t-14); padding: 16px 8px; margin: 0; }
@media (max-width: 560px) {
  .sw-cmdk__right .sw-cmdk__pill { display: none; }
  .sw-cmdk__tab { padding-left: 6px; padding-right: 6px; }
}
.sw-cmdk .sw-cmd__input:focus, .sw-cmdk .sw-cmd__input:focus-visible { outline: none; }
.sw-cmdk__bar:focus-within { box-shadow: inset 0 -2px 0 var(--focus); }

/* ================================================================= M21: places
   Drive's Move dialog in Swarm's materials (D117): one picker for choosing where
   a new task goes and for moving anything. */
.sw-pp { position: fixed; inset: 0; z-index: 80; }
.sw-pp[hidden] { display: none; }
.sw-pp__scrim { position: absolute; inset: 0; background: oklch(22% 0.015 265 / 0.28); }
.sw-pp__box {
  position: absolute; left: 50%; top: 10vh; transform: translateX(-50%);
  width: min(620px, calc(100vw - 24px)); max-height: 80vh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-panel);
  padding: 20px 20px 14px;
}
.sw-pp__title { margin: 0 0 10px; font-size: 22px; font-weight: 600; overflow-wrap: anywhere; }
.sw-pp__current { display: flex; align-items: center; gap: 8px; font-size: var(--t-14); color: var(--muted); margin-bottom: 10px; flex-wrap: wrap; }
.sw-pp__chip, .sw-locchip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 5px 10px;
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-14);
}
.sw-locchip { cursor: pointer; }
.sw-locchip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-locchip:hover { background: var(--sunken); }
.sw-locchip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-locchip__caret { color: var(--muted); }
.sw-loc { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sw-loc--page { margin: -6px 0 var(--s-2); }
.sw-loc__label { font-size: var(--t-12); color: var(--muted); }
.sw-pp__tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--hairline); }
.sw-pp__tab, .sw-pp__searchbtn {
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--t-14);
  padding: 10px 10px 9px; border-bottom: 2px solid transparent; cursor: pointer;
}
.sw-pp__tab[aria-selected="true"], .sw-pp__searchbtn[aria-selected="true"] {
  color: var(--text); font-weight: 600; border-bottom-color: var(--gold);
}
.sw-pp__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 2px 0; font-size: var(--t-13); color: var(--muted); }
.sw-pp__crumbs[hidden] { display: none; }
.sw-pp__crumbs button { border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; padding: 2px 4px; border-radius: var(--r-xs); }
.sw-pp__crumbs button:hover { background: var(--sunken); }
.sw-pp__search { margin-top: 8px; }
.sw-pp__search[hidden] { display: none; }
.sw-pp__list { flex: 1 1 auto; overflow: auto; min-height: 220px; padding: 6px 0; }
.sw-pp__row {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-sm);
  cursor: pointer;
}
.sw-pp__row:hover { background: var(--sunken); }
.sw-pp__row.is-sel { background: var(--gold-quiet); }
.sw-pp__row[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.sw-pp__icon { color: var(--muted); display: inline-flex; }
.sw-pp__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sw-pp__name { font-size: var(--t-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-pp__code { color: var(--muted); margin-right: 8px; font-variant-numeric: tabular-nums; }
.sw-pp__sub { font-size: var(--t-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-pp__move {
  visibility: hidden; border: 1px solid var(--hairline); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--t-13); font-weight: 600; border-radius: var(--r-pill); padding: 4px 14px; cursor: pointer;
}
.sw-pp__row:hover .sw-pp__move, .sw-pp__row.is-sel .sw-pp__move, .sw-pp__move:focus-visible { visibility: visible; }
@media (hover: none) { .sw-pp__move { visibility: visible; } }
.sw-pp__into, .sw-pp__into-sp {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent;
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.sw-pp__into:hover { background: var(--hairline); color: var(--text); }
.sw-pp__empty { color: var(--muted); font-size: var(--t-14); padding: 16px 10px; margin: 0; }
.sw-pp__foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.sw-pp__path { margin-right: auto; font-size: var(--t-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 760px) {
  .sw-pp__box { top: auto; bottom: 0; left: 0; transform: none; width: 100%; max-height: 88vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* The right-click menu (and the ••• that opens the same one on a phone). */
.sw-imenu {
  position: fixed; z-index: 75; min-width: 240px; padding: 6px;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-panel);
}
.sw-imenu__head {
  font-size: var(--t-12); color: var(--muted); padding: 6px 10px 8px; max-width: 300px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-imenu hr { border: 0; border-top: 1px solid var(--hairline); margin: 4px 0; }
.sw-imenu__item {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--t-14);
  padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer;
}
.sw-imenu__item span { flex: 1 1 auto; }
.sw-imenu__item kbd { font-family: var(--font-ui); font-size: var(--t-11); color: var(--muted); }
.sw-imenu__item:hover, .sw-imenu__item:focus-visible { background: var(--sunken); outline: none; }
.sw-imenu__item.is-danger { color: var(--risk); }

/* The + that replaced the inline subtask field. */
.sw-kids__addbtn {
  display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 6px;
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--t-14);
  padding: 6px 10px; border-radius: var(--r-pill); cursor: pointer;
}
.sw-kids__addbtn:hover { background: var(--sunken); color: var(--text); }

/* ================================================================= M22
   The tick and the caret sit on the centre line of the row's first line — the
   code and the title — rather than 4–7px above it (measured: main has 11px of
   padding and a 22.4px first line, so its centre is 22px down). */
.sw-row > .sw-tick { margin-top: 17px; }
.sw-row > .sw-twist { margin-top: 16px; }
/* Subtasks under an opened row wear a faint tint, so a branch reads as a branch
   without shouting (Arvind: "very translucent … less distracting"). */
.sw-kids { background: color-mix(in oklch, var(--ink-blue) 4%, transparent); border-radius: var(--r-sm); }
.sw-kids .sw-row:hover { background: color-mix(in oklch, var(--ink-blue) 8%, transparent); }
#tab-subtasks .sw-sub { background: color-mix(in oklch, var(--ink-blue) 3%, var(--surface)); }
/* A folder page's upload control. */
.sw-folder__upload { position: relative; cursor: pointer; margin-bottom: 8px; }

/* ---- M22 toolbar: dropdowns and a compact search (D121) */
.sw-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; }
.sw-dd { position: relative; }
.sw-dd__btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hairline);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-14);
  padding: 7px 12px; border-radius: var(--r-pill); cursor: pointer;
}
.sw-dd__btn:hover { background: var(--sunken); }
.sw-dd__k { color: var(--muted); }
.sw-dd__v { font-weight: 600; }
.sw-dd__n { font-size: var(--t-11); font-weight: 700; background: var(--gold); color: var(--on-gold); border-radius: var(--r-pill); padding: 1px 7px; }
.sw-dd__caret { transform: rotate(90deg); color: var(--muted); }
.sw-dd__btn[aria-expanded="true"] .sw-dd__caret { transform: rotate(-90deg); }
.sw-dd__menu {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 240px;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-panel); padding: 6px;
}
.sw-dd__menu[hidden] { display: none; }
.sw-facets__track--col { display: flex; flex-direction: column; gap: 2px; align-items: stretch; }
.sw-facets__track--col .sw-stage { justify-content: flex-start; width: 100%; border-radius: var(--r-sm); }
.sw-facets__track--col .sw-stage__n { margin-left: auto; }
.sw-searchpill {
  display: inline-flex; align-items: center; gap: 8px; width: min(260px, 100%);
  border: 1px solid var(--hairline); background: var(--sunken); color: var(--muted);
  font: inherit; font-size: var(--t-14); padding: 7px 12px; border-radius: var(--r-pill); cursor: text;
}
.sw-searchpill span { flex: 1 1 auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-searchpill kbd { font-family: var(--font-ui); font-size: var(--t-11); border: 1px solid var(--hairline); border-radius: var(--r-xs); padding: 0 5px; background: var(--surface); }
.sw-searchpill:hover { color: var(--text); }
@media (max-width: 560px) { .sw-searchpill { width: 100%; } }

/* The floating search. */
.sw-fs {
  position: fixed; z-index: 60; background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel); overflow: hidden;
}
.sw-fs__bar { display: flex; align-items: center; gap: 10px; padding: 4px 14px; border-bottom: 1px solid var(--hairline); color: var(--muted); }
.sw-fs__input { flex: 1 1 auto; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--t-16); padding: 12px 0; }
.sw-fs__scope { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--hairline); }
.sw-fs__in { font-size: var(--t-12); color: var(--muted); }
.sw-chip--global { color: var(--muted); }
.sw-fs__add { display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--hairline); background: transparent; color: var(--muted); font: inherit; font-size: var(--t-13); padding: 4px 10px; border-radius: var(--r-pill); cursor: pointer; }
.sw-fs__add:hover { color: var(--text); background: var(--sunken); }
.sw-fs__list { max-height: min(50vh, 420px); overflow: auto; padding: 6px 8px; }
.sw-fs__all { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--t-14); padding: 10px 8px; border-radius: var(--r-md); cursor: pointer; }
.sw-fs__all:hover { background: var(--sunken); }
.sw-fs__foot { font-size: var(--t-11); color: var(--faint); background: var(--sunken); padding: 8px 14px; }
@media (max-width: 760px) { .sw-fs { left: 8px !important; right: 8px; width: auto !important; } }

/* ---- M22 shortcut badges: hidden until the modifier is held (D122) */
.sw-hk {
  display: none; margin-left: auto; font-family: var(--font-ui); font-size: var(--t-11);
  font-weight: 600; color: var(--text); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r-xs); padding: 1px 6px;
  box-shadow: var(--shadow-soft); white-space: nowrap;
}
body.show-keys .sw-hk { display: inline-block; }
body.show-keys .rail__item .rail__n { display: none; }
#add-open .sw-hk, #maya-open .sw-hk, #cmd-open .sw-hk { margin-left: 8px; }

/* ================================================================= M23: timeline
   The Gantt (D123). A sticky name column, a lane per row, bars in the stage's
   own colour, the stage's ink as the bar's edge, today as a gold hairline. */
.sw-gtools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.sw-gzoom { display: inline-flex; background: var(--sunken); border-radius: var(--r-pill); padding: 3px; }
.sw-gzoom button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--t-13); padding: 5px 12px; border-radius: var(--r-pill); cursor: pointer; }
.sw-gzoom button[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-soft); }
.sw-gtools__hint { font-size: var(--t-12); color: var(--muted); }
.sw-gantt {
  position: relative; overflow: auto; max-height: calc(100vh - 300px); min-height: 320px;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
}
.sw-gantt__inner { position: relative; }
.sw-ghead { position: sticky; top: 0; z-index: 4; display: flex; height: 52px; background: var(--surface); border-bottom: 1px solid var(--hairline); }
.sw-ghead .sw-gname--head { font-size: var(--t-12); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); align-items: flex-end; padding-bottom: 8px; }
.sw-ghead__lane { position: relative; flex: none; }
.sw-gh__band { position: relative; height: 26px; }
.sw-gh__band--low { border-top: 1px solid var(--hairline); }
.sw-gh__cell { position: absolute; top: 0; height: 100%; display: flex; align-items: center; padding-left: 6px; font-size: var(--t-11); color: var(--muted); white-space: nowrap; border-left: 1px solid var(--hairline); }
.sw-gh__cell--top { font-weight: 700; color: var(--text); }
.sw-gh__cell--day { justify-content: center; padding: 0; flex-direction: column; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sw-gh__cell--day small { font-size: 9px; color: var(--faint); }
.sw-gh__cell.is-today { color: var(--gold-ink); font-weight: 700; }
.sw-gbody { position: relative; }
.sw-gbg { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.sw-gshade { position: absolute; top: 0; bottom: 0; background: color-mix(in oklch, var(--sunken) 55%, transparent); }
.sw-gtoday { position: absolute; top: 0; bottom: 0; background: color-mix(in oklch, var(--gold) 12%, transparent); border-left: 2px solid var(--gold); }
.sw-gr { position: relative; display: flex; height: 36px; border-bottom: 1px solid color-mix(in oklch, var(--hairline) 60%, transparent); }
.sw-gr--group { background: color-mix(in oklch, var(--sunken) 50%, transparent); }
.sw-gr.is-closed .sw-gname { opacity: 0.6; }
.sw-gname {
  position: sticky; left: 0; z-index: 3; flex: none; width: 320px; box-sizing: border-box;
  display: flex; align-items: center; gap: 6px; padding: 0 10px 0 12px; min-width: 0;
  background: var(--surface); border-right: 1px solid var(--hairline); font-size: var(--t-13);
}
.sw-gr--group .sw-gname { background: color-mix(in oklch, var(--sunken) 50%, var(--surface)); font-weight: 700; }
.sw-gname__t { flex: 1 1 auto; min-width: 0; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-gname__t:hover { text-decoration: underline; }
.sw-gname__code { color: var(--muted); margin-right: 6px; font-variant-numeric: tabular-nums; font-weight: 500; }
.sw-gname__n { font-size: var(--t-11); color: var(--muted); font-weight: 600; }
.sw-gname__who { flex: none; max-width: 80px; font-size: var(--t-11); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-gtwist { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: var(--r-xs); padding: 0; }
.sw-gtwist[aria-expanded="true"] .sw-mark { transform: rotate(90deg); }
.sw-gtwist--none { cursor: default; }
.sw-glane { position: relative; flex: none; }
.sw-glane--empty { cursor: crosshair; }
.sw-glane--empty:hover { background: repeating-linear-gradient(90deg, transparent 0 calc(var(--gpx) - 1px), var(--hairline) calc(var(--gpx) - 1px) var(--gpx)); }
.sw-gsum { position: absolute; top: 15px; height: 6px; border-radius: 3px; background: var(--text); opacity: 0.55; }
.sw-gsum::before, .sw-gsum::after { content: ""; position: absolute; top: 0; width: 2px; height: 11px; background: inherit; }
.sw-gsum::before { left: 0; } .sw-gsum::after { right: 0; }
.sw-gbar {
  position: absolute; top: 6px; height: 24px; box-sizing: border-box; display: flex; align-items: center;
  border-radius: 6px; border: 1px solid var(--muted); background: var(--sunken); color: var(--text);
  font-size: var(--t-12); font-weight: 600; cursor: grab; touch-action: none; user-select: none; z-index: 2;
}
.sw-gbar:active { cursor: grabbing; }
.sw-gbar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-gbar__t { flex: 1 1 auto; min-width: 0; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.sw-gbar.is-narrow .sw-gbar__t { position: absolute; left: calc(100% + 8px); overflow: visible; padding: 0; color: var(--muted); font-weight: 500; }
.sw-gbar__h { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.sw-gbar__h--l { left: -2px; } .sw-gbar__h--r { right: -2px; }
.sw-gbar__dot {
  position: absolute; right: -14px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--muted); cursor: crosshair; opacity: 0; transition: opacity 120ms;
}
.sw-gbar:hover .sw-gbar__dot, .sw-gbar:focus-visible .sw-gbar__dot { opacity: 1; }
@media (hover: none) { .sw-gbar__dot { opacity: 1; } }
.sw-gbar--triage { background: var(--st-triage-chip); border-color: var(--st-triage); }
.sw-gbar--ready { background: var(--st-ready-chip); border-color: var(--st-ready); }
.sw-gbar--in_progress { background: var(--st-progress-chip); border-color: var(--st-progress); }
.sw-gbar--in_review { background: var(--st-review-chip); border-color: var(--st-review); }
.sw-gbar--awaiting_approval { background: var(--st-approval-chip); border-color: var(--st-approval); }
.sw-gbar--done { background: var(--st-done-chip); border-color: var(--st-done); }
.sw-gbar--cancelled { background: var(--st-cancelled-chip); border-color: var(--st-cancelled); opacity: 0.7; }
.sw-gbar.is-openend { border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sw-gbar.is-blocked { background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in oklch, var(--risk) 14%, transparent) 6px 9px); }
.sw-gbar.is-conflict { border: 2px solid var(--risk); box-shadow: 0 0 0 3px var(--risk-bg); }
.sw-gbar.is-ghost { pointer-events: none; opacity: 0.8; border-style: dashed; }
.sw-garrows { position: absolute; top: 0; pointer-events: none; overflow: visible; z-index: 1; color: var(--muted); }
.sw-garrow { pointer-events: auto; cursor: pointer; }
.sw-garrow__hit { fill: none; stroke: transparent; stroke-width: 10; }
.sw-garrow__line { fill: none; stroke: currentColor; stroke-width: 1.5; }
.sw-garrow:hover .sw-garrow__line { stroke: var(--text); stroke-width: 2; }
.sw-garrow.is-bad { color: var(--risk); }
.sw-garrow__bad-head { fill: var(--risk); }
.sw-garrow__drag { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 5 4; }
.sw-gtip {
  position: fixed; z-index: 90; pointer-events: none; background: var(--text); color: var(--surface);
  font-size: var(--t-12); font-weight: 600; padding: 4px 8px; border-radius: var(--r-sm); white-space: nowrap;
}
.sw-gtip:empty { display: none; }
.sw-gpop {
  position: fixed; z-index: 85; width: 320px; background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--shadow-panel); padding: 14px;
}
.sw-gpop__t { font-weight: 700; font-size: var(--t-14); margin-bottom: 6px; }
.sw-gpop__p { font-size: var(--t-13); color: var(--muted); margin: 0 0 10px; }
.sw-gpop .sw-input { width: 100%; box-sizing: border-box; }
.sw-gpop .sw-input.is-bad { outline: 2px solid var(--risk); }
.sw-gpop__act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.sw-gantt__note { margin-top: 8px; }
@media (max-width: 760px) {
  .sw-gname { width: 170px; }
  .sw-gname__who { display: none; }
  .sw-gtools__hint { display: none; }
}

/* ================================================================ M24
   Space › Project filters, the project header, links beside files, and the
   emoji picker (D124–D126). */
.sw-scopeopt {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; background: none; color: var(--text); font: inherit; font-size: var(--t-13);
  padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer;
}
.sw-scopeopt:hover { background: var(--sunken); }
.sw-scopeopt:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sw-scopeopt[hidden] { display: none; }
.sw-scopeopt__box {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 16px; height: 16px; border: 1.5px solid var(--hairline-strong, var(--muted));
  border-radius: 4px; color: var(--on-gold);
}
.sw-scopeopt[aria-pressed="true"] .sw-scopeopt__box { background: var(--gold); border-color: var(--gold); }
.sw-scopeopt--clear { color: var(--muted); border-top: 1px solid var(--hairline); border-radius: 0; margin-top: 4px; padding-top: 8px; }
.sw-scopegrp {
  font-size: var(--t-11); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); padding: 8px 8px 2px;
}
.sw-dd__menu--wide { min-width: 300px; }
.sw-scopeq { width: 100%; box-sizing: border-box; margin-bottom: 4px; }
.sw-scopelist { max-height: 320px; overflow-y: auto; }
.sw-loc__all {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  font-size: var(--t-12); color: var(--muted); text-decoration: none;
}
.sw-loc__all:hover { color: var(--text); }

.sw-file--link .sw-file__name { color: var(--text); text-decoration: none; min-width: 0; flex: 1 1 auto; }
.sw-file--link .sw-file__name:hover { text-decoration: underline; }
.sw-file__kind {
  flex: none; font-size: var(--t-11); color: var(--muted); background: var(--sunken);
  border-radius: var(--r-pill); padding: 1px 7px; white-space: nowrap;
}
.sw-file--link .sw-file__off { margin-left: 0; }
.sw-file--folder { text-decoration: none; color: var(--text); }
.sw-file--folder:hover { background: var(--sunken); }
button.sw-file--add { font: inherit; font-size: var(--t-13); background: var(--surface); }
/* D457: "Add a file" is a <label> (it holds the file input) — the same size as its button neighbours. */
label.sw-file--add { font-size: var(--t-13); background: var(--surface); }
.sw-folder__acts { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-1); }
.sw-folder__acts button.sw-addtask { border: 0; background: none; font: inherit; cursor: pointer; }

.sw-compose__cancel[hidden] { display: none; }
.sw-compose__cancel { margin-left: auto; }
.sw-compose__cancel:not([hidden]) + .sw-compose__go { margin-left: 6px; }

.sw-emo {
  position: fixed; z-index: 90; width: 332px; max-width: calc(100vw - 16px);
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-panel);
  padding: 10px; box-sizing: border-box;
}
.sw-emo__q { width: 100%; box-sizing: border-box; }
.sw-emo__label { font-size: var(--t-11); font-weight: 700; color: var(--muted); margin: 8px 2px 4px; }
.sw-emo__label span { font-weight: 400; }
.sw-emo__row, .sw-emo__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.sw-emo__grid { max-height: 196px; overflow-y: auto; }
.sw-emo__e {
  border: 0; background: none; font-size: 20px; line-height: 1; padding: 5px 0;
  border-radius: var(--r-sm); cursor: pointer;
}
.sw-emo__e:hover { background: var(--sunken); }
.sw-emo__e:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sw-emo__e.is-pinned { box-shadow: inset 0 -2px 0 var(--gold); }
.sw-emo__cats { display: flex; gap: 2px; margin-top: 8px; border-top: 1px solid var(--hairline); padding-top: 6px; }
.sw-emo__cat { flex: 1; border: 0; background: none; font-size: 16px; padding: 4px 0; border-radius: var(--r-sm); cursor: pointer; opacity: 0.6; }
.sw-emo__cat[aria-selected="true"] { opacity: 1; background: var(--sunken); }
.sw-emo__none { grid-column: 1 / -1; font-size: var(--t-13); color: var(--muted); margin: 8px 2px; }
@media (max-width: 760px) {
  .sw-toolbar { flex-wrap: wrap; }
}
.sw-loc__add { margin-left: auto; }
.sw-loc__add + .sw-loc__all { margin-left: var(--s-1); }

/* ================================================================= M25
   The + that makes a space sits on the right of its header, in the same column as
   the + on every space row (Arvind: "right aligned just like + for departments"). */
.rail__group-label { display: flex; align-items: center; padding-right: 0; }
.rail__group-label .rail__add--section { margin-left: auto; }

/* A task that has subtasks wears a faint ink tint wherever it is listed — the
   list, the table, the board, a space, a project — so a parent reads as a parent
   before anybody opens it. Ink, not gold: gold is the seal and the primary action
   and nothing else (the Seal Rule). A shade stronger than the branch under it
   (D119's 4%), so parent and branch read as a family without merging. */
.sw-row--parent { background: color-mix(in oklch, var(--ink-blue) 6%, transparent); border-radius: var(--r-xs); }
.sw-row--parent:hover { background: color-mix(in oklch, var(--ink-blue) 10%, transparent); }
.sw-tbl--m16 tr.sw-tr--parent td { background: color-mix(in oklch, var(--ink-blue) 6%, var(--surface)); }
.sw-tbl--m16 tr.sw-tr--parent.is-sel td { background: var(--gold-quiet); }
.sw-card2--parent { background: color-mix(in oklch, var(--ink-blue) 6%, var(--surface)); }

/* The pencil beside a page's title. Always there (a phone has no hover), quiet
   until it is pointed at. */
.sw-titleedit {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 30px; height: 30px; margin-left: 8px; padding: 0;
  background: none; border: 0; border-radius: var(--r-pill);
  color: var(--faint); cursor: pointer;
}
.sw-titleedit:hover { background: var(--sunken); color: var(--text); }
.sw-titleedit:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-titleedit .sw-mark { width: 16px; height: 16px; }
.sw-titleinput {
  font: inherit; letter-spacing: inherit; color: var(--text);
  background: var(--surface); border: 0; border-bottom: 2px solid var(--gold-ink);
  border-radius: var(--r-xs) var(--r-xs) 0 0; padding: 0 6px;
  width: min(100%, 30ch);
}
.sw-titleinput:focus { outline: none; }

/* Ten cards a column, then Load more. */
.sw-board__load {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 8px 12px; margin-top: 2px;
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-13, 13px); font-weight: 600;
  border: 1px dashed var(--hairline); border-radius: var(--r-pill); cursor: pointer;
}
.sw-board__load:hover { background: var(--sunken); }
.sw-board__load:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-board__left { color: var(--muted); font-weight: 400; }

/* Table headers: drag to move; on hover or focus, ‹ eye › to move or hide. */
.sw-tbl--m16 th.sw-th { cursor: grab; user-select: none; }
.sw-th__in { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sw-th__tools { display: inline-flex; align-items: center; gap: 0; opacity: 0; transition: opacity var(--d-state) var(--e); }
.sw-tbl--m16 th.sw-th:hover .sw-th__tools,
.sw-tbl--m16 th.sw-th:focus-within .sw-th__tools { opacity: 1; }
/* D337: on a desk the ‹ eye › tools wait for the pointer (or keyboard focus) on their own
   heading; a touch screen wider than a phone has no hover, so there they stay. On a phone
   (≤760px) they are gone — hide a column from Columns — and "Last change" is "Last Activity". */
@media (hover: none) and (min-width: 761px) { .sw-th__tools { opacity: 1; } }
.sw-lbl-ph { display: none; }
@media (max-width: 760px) {
  .sw-th__tools { display: none; }
  .sw-lbl-dk { display: none; }
  .sw-lbl-ph { display: inline; }
}
.sw-th__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; background: none; border: 0; border-radius: var(--r-xs);
  color: var(--muted); cursor: pointer;
}
.sw-th__btn:hover { background: var(--sunken); color: var(--text); }
.sw-th__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sw-tbl--m16 th.is-dragging { opacity: 0.45; }
.sw-tbl--m16 th.is-drop-before { box-shadow: inset 3px 0 0 var(--gold-ink); }
.sw-tbl--m16 th.is-drop-after { box-shadow: inset -3px 0 0 var(--gold-ink); }
.sw-th__left { transform: rotate(180deg); }
/* I-112: a department's name in the sticky bar ran under Maya on a phone. The bar
   keeps its right-hand buttons whole; the place name gives way, and on a phone —
   where the page's own title says the same thing a line below — it steps aside. */
.main__bar-right { flex: none; }
#where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { #where { display: none; } }

/* ================================================================= M26
   A reference is a chip: a soft ink pill with the thing's mark, set inline with the
   words around it. Ink, not gold (the Seal Rule). A chip for something the reader
   cannot open is sunken and says Restricted; one still being looked up is faint. */
.sw-ref {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: baseline;
  max-width: 32ch; padding: 0 7px; margin: 0 1px;
  background: color-mix(in oklch, var(--ink-blue) 11%, var(--surface));
  color: var(--text); font-weight: 600; font-size: 0.93em; line-height: 1.55;
  border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.sw-ref .sw-mark { flex: none; width: 12px; height: 12px; color: var(--ink-blue); }
.sw-ref__t { overflow: hidden; text-overflow: ellipsis; }
.sw-ref:hover { background: color-mix(in oklch, var(--ink-blue) 18%, var(--surface)); }
.sw-ref:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-ref--person { background: color-mix(in oklch, var(--st-review) 13%, var(--surface)); }
.sw-ref--person:hover { background: color-mix(in oklch, var(--st-review) 20%, var(--surface)); }
.sw-ref--person .sw-mark { color: var(--st-review); }
.sw-ref.is-locked { background: var(--sunken); color: var(--muted); cursor: default; font-weight: 500; }
.sw-ref.is-locked .sw-mark { color: var(--muted); }
.sw-ref.is-wait { color: var(--muted); cursor: default; }
/* A title in a row is a link; its chips must not take the row's underline. */
a .sw-ref, .sw-row__title .sw-ref { text-decoration: none; }

/* The picker. */
.sw-refpop {
  position: fixed; z-index: 60; width: min(360px, calc(100vw - 16px)); max-height: 300px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px;
  box-shadow: var(--shadow-panel);
}
.sw-refpop__group {
  padding: 8px 8px 4px; color: var(--muted); font-size: var(--t-11);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
}
.sw-refpop__opt {
  display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; cursor: pointer;
  font-size: var(--t-14, 14px); color: var(--text);
}
.sw-refpop__opt .sw-mark { flex: none; color: var(--muted); }
.sw-refpop__opt[aria-selected="true"], .sw-refpop__opt:hover { background: var(--sunken); }
.sw-refpop__l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sw-refpop__s { flex: none; color: var(--muted); font-size: var(--t-12, 12px); }
.sw-refpop__none { padding: 10px 8px; color: var(--muted); font-size: var(--t-13, 13px); }

/* Every tick sits on the middle of its row, whatever the row holds (Arvind's
   subtask screenshot: the box sat on the top line of a two-line card). This
   replaces M22's "centre of the first line". */
.sw-row { align-items: center; }
.sw-row > .sw-tick, .sw-row > .sw-twist { margin-top: 0; align-self: center; }
.sw-sub { align-items: center; }
.sw-sub > .sw-tick { margin-top: 0; align-self: center; }

/* ================================================================= M27
   The folds on a department or project page were drawing their tiles flush to the
   card's edge (Arvind: "too tight, touching the edges"). The body keeps the card's
   inset on every side. */
.sw-section--fold > .sw-section__body > .sw-files__grid,
.sw-section--fold > .sw-section__body > .sw-people3 { padding: var(--s-2) var(--s-1) var(--s-2); }
.sw-section--fold > .sw-section__body > .sw-field { padding: 0 var(--s-1) var(--s-2); margin: 0; }
.sw-section--fold > .sw-section__body > .sw-empty,
.sw-section--fold > .sw-section__body > .sw-section__note { padding: var(--s-2) var(--s-1); }

/* Who is in it, three across: a face, a name, a role, and Remove. */
.sw-people3 { display: grid; gap: var(--s-1); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .sw-people3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sw-people3 { grid-template-columns: minmax(0, 1fr); } }
.sw-ppl-card {   /* unused people card; renamed 2 Oct — it shared .sw-pcard with the Details card (I-214) */
  display: flex; align-items: center; gap: var(--s-1); min-width: 0;
  padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
}
.sw-ppl-card__who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sw-ppl-card__n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-ppl-card__r { color: var(--muted); font-size: var(--t-12, 12px); }

/* An inspection's checklist. */
.sw-checklist .sw-section__head h2 { display: inline-flex; align-items: center; gap: 6px; }
.sw-checklist .sw-section__body { padding: var(--s-1) var(--s-2) var(--s-2); }
.sw-checklist__row {
  display: flex; align-items: center; gap: var(--s-1); padding: 8px 2px;
  border-bottom: 1px solid var(--hairline); cursor: pointer;
}
.sw-checklist__row.is-done span { color: var(--muted); text-decoration: line-through; }
.sw-checklist__add { display: flex; gap: var(--s-1); align-items: center; margin-top: var(--s-1); }

/* ================================================================= M28
   The toolbar as compact chips (Arvind: "the filters look very chunky"): 32px
   pills, 13px text, a short search that widens when used. */
.sw-toolbar--chips { gap: 6px; padding: 8px 10px; }
.sw-toolbar--chips .sw-dd__btn {
  height: 32px; padding: 0 10px; gap: 5px; font-size: var(--t-13, 13px);
  border-color: var(--hairline); background: var(--surface);
}
.sw-toolbar--chips .sw-dd__btn .sw-mark { width: 14px; height: 14px; }
.sw-toolbar--chips .sw-dd__btn.is-set { border-color: var(--ink-blue); background: color-mix(in oklch, var(--ink-blue) 7%, var(--surface)); }
.sw-toolbar--chips .sw-searchpill {
  /* No widening on hover: pressing it opens the floating search (D121), which is
     the wide box. Animating width was a layout transition (impeccable). */
  height: 32px; padding: 0 10px; width: min(220px, 100%); font-size: var(--t-13, 13px);
}
.sw-toolbar--chips .sw-chip { height: 28px; font-size: var(--t-12, 12px); }
@media (max-width: 560px) { .sw-toolbar--chips .sw-searchpill { width: 100%; } }

/* The Date chip's menu: which date, then when, then a range. */
.sw-dd__menu--date { width: 300px; padding: 10px; }
.sw-datef__label {
  color: var(--muted); font-size: var(--t-11); letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; margin: 8px 2px 6px;
}
.sw-datef__label:first-child { margin-top: 2px; }
.sw-datef__seg { display: flex; gap: 2px; padding: 3px; background: var(--sunken); border-radius: var(--r-md); flex-wrap: wrap; }
.sw-datef__f {
  flex: 1 1 auto; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--t-12, 12px);
  padding: 5px 6px; border-radius: var(--r-sm); cursor: pointer;
}
.sw-datef__f[aria-checked="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-soft); }
.sw-datef__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sw-datef__w {
  border: 1px solid var(--hairline); background: var(--surface); color: var(--text); font: inherit;
  font-size: var(--t-13, 13px); padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; text-align: left;
}
.sw-datef__w:hover { background: var(--sunken); }
.sw-datef__w[aria-pressed="true"] { border-color: var(--ink-blue); background: color-mix(in oklch, var(--ink-blue) 8%, var(--surface)); font-weight: 600; }
.sw-datef__f:focus-visible, .sw-datef__w:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-datef__custom { display: flex; align-items: center; gap: 6px; }
.sw-datef__custom input { min-width: 0; flex: 1 1 0; font-size: var(--t-12, 12px); padding: 5px 6px; }

/* +Add on the right of the views. */
.sw-views-bar .sw-views__add { margin-left: auto; }

/* The table wears the cards' border: a soft card with the same radius and shadow
   as every fold, and a heading row with a breath of ink to tell it from the rows. */
.sw-tbl__scroll:has(> .sw-tbl--m16) {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
  border: 1px solid var(--hairline);
}
.sw-tbl--m16 { border: 0; border-radius: 0; background: transparent; }
.sw-tbl--m16 thead th { background: color-mix(in oklch, var(--ink-blue) 6%, var(--surface)); }
.sw-tbl--m16 thead th:first-child { border-top-left-radius: var(--r-lg); }
.sw-tbl--m16 thead th:last-child { border-top-right-radius: var(--r-lg); }

/* ================================================================= M29
   The rail's rows: a department's icon sits in the same column as Today's and
   Inbox's; its chevron moves to the right end, beside the count (D138). Children
   indent one step. */
.rail__node > .rail__twist { order: 2; margin-left: 0; }
.rail__node > .rail__add { order: 3; }
.rail__node > .rail__item--node { margin-left: var(--s-1); }
.rail__node--wait .rail__label, .rail__none { padding-left: var(--s-2); }
.rail__item:hover { background: color-mix(in oklch, var(--text) 6%, var(--rail)); }

/* Who is in it: small chips, one row, and + Add team member at the end. */
.sw-mchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: var(--s-2) var(--s-1); }
.sw-mchip .sw-who__tag { color: var(--muted); font-size: var(--t-11); }
.sw-mchip__add { height: 30px; }
.sw-people .sw-section__body { gap: 6px; padding-top: var(--s-1); padding-bottom: var(--s-1); }
.sw-people__row { padding: 2px 0; }

/* The table: compact, a light grey heading, frozen first columns, a pager. */
.sw-tbl--m16 th { padding: 7px 10px; background: var(--sunken); }
.sw-tbl--m16 thead th { background: var(--sunken); }
.sw-tbl--m16 td { padding: 5px 10px; font-size: var(--t-13, 13px); }
.sw-tbl--m16 .sw-tbl__edit, .sw-tbl--m16 select { padding-top: 3px; padding-bottom: 3px; font-size: var(--t-12, 12px); }
.sw-tbl--m16 td .sw-button, .sw-tbl--m16 td .sw-soft { padding-top: 2px; padding-bottom: 2px; }
.sw-tbl--m16 .sw-tbl__title a { line-height: 1.3; }
.sw-tbl__kids { margin-left: 6px; color: var(--muted); font-size: var(--t-12, 12px); font-weight: 500; }
.sw-tbl__deps { white-space: nowrap; }
.sw-tbl__dep { max-width: 22ch; }
.sw-tbl__more { margin-left: 4px; color: var(--muted); font-size: var(--t-12, 12px); }
.sw-tbl--m16 .sw-frz { position: sticky; z-index: 2; background: var(--surface); }
.sw-tbl--m16 thead .sw-frz { z-index: 3; background: var(--sunken); }
.sw-tbl--m16 tr.sw-tr--parent td.sw-frz { background: color-mix(in oklch, var(--ink-blue) 6%, var(--surface)); }
.sw-tbl--m16 tr.is-sel td.sw-frz { background: var(--gold-quiet); }
.sw-tbl--m16 .sw-frz--edge { box-shadow: 1px 0 0 var(--hairline), 6px 0 8px -6px oklch(22% 0.015 265 / 0.18); }
.sw-tbl--m16 tbody tr:hover td.sw-frz { background: var(--sunken); }
.sw-pager {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: 10px 4px 2px; font-size: var(--t-13, 13px); color: var(--muted);
}
.sw-pager strong { color: var(--text); font-weight: 600; }
.sw-pager__per { display: inline-flex; align-items: center; gap: 6px; }
.sw-pager__per select { padding: 3px 8px; font-size: var(--t-12, 12px); }
.sw-pager__pages { display: inline-flex; gap: 4px; align-items: center; }
.sw-pager__btn {
  min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); background: var(--surface); color: var(--text); font: inherit;
  font-size: var(--t-13, 13px); border-radius: var(--r-sm); cursor: pointer;
}
.sw-pager__btn:hover:not(:disabled) { background: var(--sunken); }
.sw-pager__btn.is-on { border-color: var(--ink-blue); color: var(--ink-blue); font-weight: 700; }
.sw-pager__btn:disabled { opacity: 0.4; cursor: default; }
.sw-pager__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-pager__gap { color: var(--faint); padding: 0 2px; }
/* The row tick was inheriting `.sw-check`'s 36px label height — the real reason the
   rows were tall (I-120). In the table it is a bare 15px box. */
.sw-tbl--m16 input.sw-check { display: inline-block; min-height: 0; width: 15px; height: 15px; margin: 0; vertical-align: middle; accent-color: var(--gold-ink); }
.sw-tbl--m16 .sw-button, .sw-tbl--m16 .sw-add { min-height: 0; }

/* ================================================================= M30
   The frozen edge (D139): a hairline down the right of the last frozen column,
   always; a soft shadow beside it once the table has scrolled sideways. */
.sw-tbl--m16 .sw-frz--edge { box-shadow: none; }
.sw-tbl--m16 .sw-frz--edge::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px;
  background: color-mix(in oklch, var(--text) 16%, transparent); pointer-events: none;
}
.sw-tbl--m16 .sw-frz--edge::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: -8px; width: 8px; pointer-events: none;
  background: linear-gradient(to right, oklch(22% 0.015 265 / 0.10), transparent);
  opacity: 0; transition: opacity 120ms;
}
.sw-tbl__scroll.is-scrolled .sw-tbl--m16 .sw-frz--edge::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sw-tbl--m16 .sw-frz--edge::before { transition: none; } }

/* The Timeline's key (D139). Swatches reuse the bars' own state classes. */
.sw-glg {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4, 32px); margin-top: var(--s-2);
  padding: 12px 16px; border: 1px solid var(--hairline); border-radius: var(--r-md, 10px); background: var(--surface);
}
.sw-glg__group { min-width: 0; }
.sw-glg__h { margin: 0 0 6px; font-size: var(--t-11, 11px); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sw-glg__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sw-glg__i { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12, 12px); color: var(--body, var(--text)); }
.sw-glg__stage { display: inline-flex; color: var(--muted); }
/* :where() keeps the base at zero weight, so .sw-gbar--<stage> paints the swatch. */
:where(.sw-glg__bar) {
  display: inline-block; box-sizing: border-box; width: 22px; height: 12px; border-radius: 4px;
  border: 1px solid var(--muted); background-color: var(--sunken); flex: none;
}
.sw-glg__bar--long { width: 30px; }
.sw-glg__bar--day { width: 10px; }
.sw-glg__bar.is-openend { border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sw-glg__bar.is-blocked { background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in oklch, var(--risk) 22%, transparent) 4px 6px); }
.sw-glg__bar.is-conflict { border: 2px solid var(--risk); box-shadow: 0 0 0 2px var(--risk-bg); }
.sw-glg__sum { position: relative; display: inline-block; width: 30px; height: 4px; border-radius: 2px; background: var(--text); opacity: 0.55; }
.sw-glg__sum::before, .sw-glg__sum::after { content: ""; position: absolute; top: 0; width: 2px; height: 8px; background: inherit; }
.sw-glg__sum::before { left: 0; } .sw-glg__sum::after { right: 0; }
.sw-glg__arrow { color: var(--muted); overflow: visible; }
.sw-glg__arrow path { fill: none; stroke: currentColor; stroke-width: 1.5; }
.sw-glg__arrow path.h { fill: currentColor; stroke: none; }
.sw-glg__arrow.is-bad { color: var(--risk); }
.sw-glg__today { display: inline-block; width: 10px; height: 14px; background: linear-gradient(to right, var(--gold) 0 2px, color-mix(in oklch, var(--gold) 12%, transparent) 2px); }
.sw-glg__wknd { display: inline-block; width: 14px; height: 14px; border-radius: 2px; background: color-mix(in oklch, var(--sunken) 55%, transparent); border: 1px solid var(--hairline); }
.sw-glg__note { flex-basis: 100%; margin: 0; font-size: var(--t-12, 12px); color: var(--muted); }

/* I-122: on a phone the five views plus +Add were 523px wide on a 390px screen,
   so every Work page scrolled sideways (since M28). The views now scroll inside
   their own track and +Add keeps its place at the right. */
@media (max-width: 760px) {
  .sw-views-bar { min-width: 0; }
  .sw-views { min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sw-views::-webkit-scrollbar { display: none; }
  .sw-views__tab { flex: none; padding: 0 9px; }
  .sw-views-bar .sw-views__add { flex: none; }
}

/* ================================================================= M31
   The Add card's type row (D140): Task · Meeting · Visit · Inspection · Reminder,
   a quiet segmented row above the name. The chosen one is raised on the track. */
.sw-qt__types {
  display: flex; gap: 2px; padding: 3px; margin: -4px 0 10px; width: max-content; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; background: var(--sunken); border-radius: var(--r-md);
}
.sw-qt__types::-webkit-scrollbar { display: none; }
.sw-qt__type {
  flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent;
  color: var(--muted); font: inherit; font-size: var(--t-13, 13px); font-weight: 600;
  padding: 6px 11px; border-radius: var(--r-sm); cursor: pointer;
}
.sw-qt__type:hover { color: var(--text); }
.sw-qt__type[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft); }
.sw-qt__type:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-qt__group {
  font-size: var(--t-11, 11px); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--faint); padding: 8px 8px 2px;
}
.sw-qt__opt.is-on { background: color-mix(in oklch, var(--ink-blue) 8%, var(--surface)); }
.sw-qt__opt--locate { color: var(--ink-blue); }
.sw-qt__foot-note { font-size: var(--t-11, 11px); color: var(--faint); margin: 2px 8px 4px; }
.sw-qt__foot-note:empty { display: none; }
.sw-qt__hint.is-bad { color: var(--risk); }
.sw-qt__popform--when .sw-input[type="date"] { flex: 1 1 140px; }
.sw-qt__popform--when .sw-input[type="time"] { flex: 0 1 104px; }
.sw-qt__popform--when select.sw-input { flex: 0 1 80px; }
.sw-qt__lines { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--t-13, 13px); resize: vertical; }
.sw-qt__newc { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; }
.sw-qt__newc .sw-input { min-width: 0; }
@media (max-width: 760px) { .sw-qt__types { width: 100%; } }

/* The task page (D140): where, with, reminders. */
.sw-place { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 560px; }
.sw-place__map { display: block; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hairline); line-height: 0; }
.sw-place__map[hidden] { display: none; }
.sw-place__map img { width: 100%; height: auto; aspect-ratio: 560 / 220; object-fit: cover; background: var(--sunken); }
.sw-place__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-place__name { font-size: var(--t-14); color: var(--text); }
.sw-place__addr { font-size: var(--t-12); color: var(--muted); }
.sw-place__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sw-join { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
.sw-join__url { flex: 1 1 220px; min-width: 0; }
.sw-withs, .sw-rems { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* D367/D368: the Remind sheet and the reminder chips */
.sw-rs__quick { margin: 0 0 var(--s-2); }
.sw-rs__time { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-13); color: var(--body); }
.sw-rs__who { margin-top: var(--s-2); }
.sw-rs__whohead { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: 6px; }
.sw-rs__lbl { font-size: var(--t-13); font-weight: 600; color: var(--text); }
.sw-rs__people { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; max-height: 176px; overflow: auto; padding: 2px; }
.sw-rs__p { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 10px; border: 1px solid var(--hairline);
  border-radius: var(--r-sm); background: var(--surface); font-size: var(--t-13); color: var(--text); cursor: pointer; }
.sw-rs__p:has(input:checked) { border-color: var(--ink-blue); background: color-mix(in oklch, var(--ink-blue) 8%, var(--surface)); }
.sw-rs__p input { margin: 0; accent-color: var(--ink-blue); }
.sw-rs__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-rs__on { font-size: var(--t-11, 11px); color: var(--muted); white-space: nowrap; }
.sw-rem__tag { font-size: var(--t-11, 11px); font-weight: 600; color: var(--muted); padding: 0 6px; border-radius: var(--r-pill); background: var(--sunken); }
.sw-rem__bin { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer; }
.sw-rem__bin:hover { color: var(--risk); background: var(--risk-bg); }
.sw-rem__bin:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-rem__bin:disabled { opacity: .5; }
.sw-with, .sw-rem {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 9px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--surface);
  font-size: var(--t-13, 13px); color: var(--text);
}
.sw-with__rel, .sw-rem__for { font-size: var(--t-11, 11px); color: var(--muted); }
.sw-with__tel { font-size: var(--t-12); color: var(--ink-blue); text-decoration: none; }
.sw-with__tel:hover { text-decoration: underline; }
.sw-with__x { border: 0; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; padding: 3px; border-radius: 50%; }
.sw-with__x:hover { color: var(--risk); background: var(--sunken); }
.sw-gp {
  position: absolute; z-index: 60; width: min(360px, calc(100vw - 16px)); max-height: 420px; overflow: auto;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-panel); padding: 6px;
}
.sw-gp .sw-qt__popform .sw-input { flex: 1 1 120px; }

/* The table (D140): Type, Where, the slot, and the bell. */
.sw-tbl__type { white-space: nowrap; color: var(--muted); }
.sw-tbl__typein { display: inline-flex; align-items: center; gap: 5px; line-height: 1; vertical-align: middle; }
.sw-tbl__place, .sw-tbl__join { display: inline-flex; align-items: center; gap: 4px; color: var(--text); text-decoration: none; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-tbl__place:hover, .sw-tbl__join:hover { text-decoration: underline; }
.sw-tbl__join { color: var(--ink-blue); font-weight: 600; }
.sw-when--slot { white-space: nowrap; }
.sw-tbl__bell {
  display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 0 5px; height: 18px;
  border-radius: var(--r-pill); background: var(--sunken); color: var(--muted); font-size: var(--t-11, 11px); vertical-align: 1px;
}

/* Today (D140): Schedule, then To do. Time in a column, the thing, where. */
.sw-sched__row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 9px 12px; border-bottom: 1px solid var(--hairline);
}
.sw-sched__row:last-child { border-bottom: 0; }
.sw-sched__row.is-live { background: color-mix(in oklch, var(--ink-blue) 6%, var(--surface)); }
.sw-sched__row.is-due .sw-sched__time { color: var(--attention); }
.sw-sched__time { display: flex; flex-direction: column; font-weight: 700; font-size: var(--t-14); color: var(--text); font-variant-numeric: tabular-nums; }
.sw-sched__time small { font-weight: 500; font-size: var(--t-11, 11px); color: var(--muted); }
.sw-sched__main { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); text-decoration: none; }
a.sw-sched__main:hover .sw-sched__title { text-decoration: underline; }
.sw-sched__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sw-sched__kind { flex: none; font-size: var(--t-12); color: var(--muted); text-decoration: none; }
a.sw-sched__kind:hover { text-decoration: underline; }
.sw-sched__right { display: flex; align-items: center; gap: 6px; }
.sw-sched__where { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-12); color: var(--muted); text-decoration: none; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.sw-sched__where:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 760px) {
  .sw-sched__row { grid-template-columns: 46px minmax(0, 1fr); }
  .sw-sched__right { grid-column: 2; }
}
/* A link dressed as a button is a button: no underline (Join, Open in Google Maps). */
a.sw-button { text-decoration: none; }

/* ================================================================= M32
   Zen Mode (D143, after D142). A global mode: body.is-zen hides the rail on every
   page; everything else stays. The button is in the top bar, before Maya. */
.sw-zen-open [data-mark], .sw-zen-open .sw-mark { width: 16px; height: 16px; }
.sw-zen-open[aria-pressed="true"] { background: var(--sunken); color: var(--text); }

body.is-zen .rail, body.is-zen .rail__scrim, body.is-zen #rail-open { display: none !important; }
body.is-zen .app { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 760px) {
  .sw-zen-open__label { display: none; }
}

/* ================================================================= M32
   The page header (D145): breadcrumbs, a big title with the pencil, and a meta row
   (Created on │ the people circles │ + Add member │ •••). Departments, projects,
   folders and a task's own page. */
.sw-ph { margin: 0 0 var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--hairline); }
.sw-ph__crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; margin: 0 0 10px;
  font-size: var(--t-13); color: var(--text); line-height: 1.4; }
.sw-ph__crumbs a { color: var(--muted); text-decoration: none; }
.sw-ph__crumbs a:hover { color: var(--text); text-decoration: underline; }
.sw-ph__slash { color: var(--muted); padding: 0 1px; }
.sw-ph__head { margin: 0 0 14px; }
.sw-ph__head h1 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sw-ph__head h1 .sw-titleedit { opacity: 0.7; }
.sw-ph__head h1 .sw-titleedit .sw-mark { width: 22px; height: 22px; }
.sw-ph__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; min-height: 44px; }
.sw-ph__created { font-size: var(--t-14); color: var(--text); white-space: nowrap; }
.sw-ph__k { color: var(--muted); }
.sw-ph__sep { width: 1px; height: 28px; background: var(--hairline); flex: none; }
.sw-ph__people { display: inline-flex; align-items: center; gap: 16px; }
.sw-ph__nobody { font-size: var(--t-14); color: var(--muted); }
.sw-ph__add { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--t-14); font-weight: 500; cursor: pointer; box-shadow: var(--shadow-soft); }
.sw-ph__add:hover { border-color: var(--muted); }
.sw-ph__add:focus-visible, .sw-pfs:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The circles: overlapping, spread apart under the hand, named on hover. */
.sw-pfs { display: inline-flex; align-items: center; padding: 0 0 0 10px; border: 0; background: none; cursor: pointer; border-radius: 999px; }
.sw-pf { position: relative; width: 36px; height: 36px; flex: none; margin-left: -10px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--face-bg, var(--sunken)); color: var(--face-ink, var(--text));
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-12); font-weight: 700;
  transition: translate 180ms cubic-bezier(.2,.7,.2,1), transform 180ms cubic-bezier(.2,.7,.2,1); }
.sw-pf img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* The spread moves the circles, not the layout: each slides right by 14px times its
   place, and the row's right margin opens by the same amount at once (D156). */
.sw-pfs:not(.sw-pfs--mini):is(:hover, :focus-visible) .sw-pf:nth-child(2) { translate: 14px 0; }
.sw-pfs:not(.sw-pfs--mini):is(:hover, :focus-visible) .sw-pf:nth-child(3) { translate: 28px 0; }
.sw-pfs:not(.sw-pfs--mini):is(:hover, :focus-visible) .sw-pf:nth-child(4) { translate: 42px 0; }
.sw-pfs:not(.sw-pfs--mini):is(:hover, :focus-visible) .sw-pf:nth-child(5) { translate: 56px 0; }
.sw-pfs:not(.sw-pfs--mini):is(:hover, :focus-visible) .sw-pf:nth-child(6) { translate: 70px 0; }
.sw-pfs:not(.sw-pfs--mini):is(:hover, :focus-visible) .sw-pf:nth-child(7) { translate: 84px 0; }
.sw-pfs:not(.sw-pfs--mini):is(:hover, :focus-visible):has(> .sw-pf:nth-child(2)) { margin-right: 14px; }
.sw-pfs:not(.sw-pfs--mini):is(:hover, :focus-visible):has(> .sw-pf:nth-child(3)) { margin-right: 28px; }
.sw-pfs:not(.sw-pfs--mini):is(:hover, :focus-visible):has(> .sw-pf:nth-child(4)) { margin-right: 42px; }
.sw-pfs:not(.sw-pfs--mini):is(:hover, :focus-visible):has(> .sw-pf:nth-child(5)) { margin-right: 56px; }
.sw-pfs:not(.sw-pfs--mini):is(:hover, :focus-visible):has(> .sw-pf:nth-child(6)) { margin-right: 70px; }
.sw-pfs:not(.sw-pfs--mini):is(:hover, :focus-visible):has(> .sw-pf:nth-child(7)) { margin-right: 84px; }
.sw-pfs .sw-pf:hover { transform: translateY(-2px); z-index: 2; }
.sw-pf--more { background: var(--sunken); color: var(--text); }
.sw-pf--ghost { background: var(--sunken); }
.sw-pfs--wait { padding-left: 10px; }
.sw-pfs .sw-pf[data-name]:hover::after { content: attr(data-name); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); white-space: nowrap; padding: 4px 8px; border-radius: var(--r-sm);
  background: var(--text); color: var(--surface); font-size: var(--t-12); font-weight: 600; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sw-pf { transition: none; } }

/* The card: People and Teams. */
.sw-phcard { position: absolute; z-index: 60; width: min(340px, calc(100vw - 16px)); padding: 8px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-panel); }
.sw-phcard__tabs { display: flex; align-items: center; gap: 4px; padding: 0 0 8px; border-bottom: 1px solid var(--hairline); margin-bottom: 6px; }
.sw-phcard__tab { border: 0; background: none; font: inherit; font-size: var(--t-14); color: var(--muted); padding: 6px 10px;
  border-radius: var(--r-sm); cursor: pointer; }
.sw-phcard__tab span { font-size: var(--t-12); color: var(--muted); margin-left: 4px; }
.sw-phcard__tab[aria-selected="true"] { background: var(--sunken); color: var(--text); font-weight: 600; }
.sw-phcard__x { margin-left: auto; border: 0; background: none; color: var(--muted); width: 32px; height: 32px; border-radius: var(--r-sm); cursor: pointer; }
.sw-phcard__x:hover { background: var(--sunken); color: var(--text); }
.sw-phcard__list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; }
.sw-phcard__row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: var(--r-sm); }
.sw-phcard__row:hover { background: var(--sunken); }
.sw-pf--sm { width: 28px; height: 28px; margin-left: 0; border-width: 0; font-size: var(--t-11); }
.sw-pf--team { background: var(--sunken); color: var(--text); }
.sw-phcard__name { flex: 1; min-width: 0; font-size: var(--t-14); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-phcard__tag { font-size: var(--t-12); color: var(--muted); white-space: nowrap; }
.sw-phcard__off { border: 0; background: none; color: var(--muted); width: 28px; height: 28px; border-radius: var(--r-sm); cursor: pointer; }
.sw-phcard__off:hover { color: var(--text); background: var(--surface); }
.sw-phcard__empty { padding: 8px 4px; margin: 0; font-size: var(--t-13); color: var(--muted); }
.sw-phcard__add, .sw-phcard__addbtn { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 0 10px; min-height: 36px;
  border: 1px solid var(--hairline); border-radius: var(--r-sm); color: var(--text); font-size: var(--t-14); background: var(--surface); }
.sw-phcard__addbtn { width: 100%; font: inherit; cursor: pointer; }
.sw-phcard__add select { flex: 1; border: 0; background: transparent; font: inherit; color: var(--text); min-height: 34px; }
.detail__head--paged { margin-top: 0; }
.sw-phcard__access { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 0 4px; font-size: var(--t-13); color: var(--muted); }
.sw-phcard__access label { display: inline-flex; align-items: center; gap: 4px; color: var(--text); cursor: pointer; }
@media (max-width: 760px) {
  .sw-ph__meta { gap: 10px; }
  .sw-ph__sep { display: none; }
}

/* ================================================================= M32
   The task (D147 to D149): the same header as a space or a project, the attribute
   card in two compact columns, a Description card, and one Activity thread. */
.sw-peek__crumb { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; font-size: var(--t-13); color: var(--text); }
.sw-peek__crumb a { color: var(--muted); text-decoration: none; }
.sw-peek__crumb a:hover { color: var(--text); text-decoration: underline; }
.sw-peek__crumb > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.sw-ph--task .detail__codeline { margin: 0 0 10px; }
.sw-ph--task .sw-ph__head h1.detail__title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); }
.sw-peek .sw-ph { margin-bottom: var(--s-2); }

/* The attribute card: two independent columns, compact. */
.sw-attrs.sw-attrs--cols { display: block; column-count: 2; column-gap: var(--s-3); padding: 6px 8px; }
.sw-attrs--cols .sw-attr { break-inside: avoid; min-height: 32px; grid-template-columns: 118px minmax(0, 1fr); padding: 2px 6px; }
.sw-attrs--cols .sw-attr--col2 { break-before: column; }
.sw-attrs--cols .sw-attr--wide { align-items: start; }
.sw-attrs--cols .sw-attr__label { font-size: var(--t-13); }
.sw-attrs--cols .sw-attr__control, .sw-attrs--cols .sw-select--slim { min-height: 30px; }
@media (max-width: 720px) { .sw-attrs.sw-attrs--cols { column-count: 1; } .sw-attrs--cols .sw-attr--col2 { break-before: auto; } }
.sw-peek:not(.is-wide) .sw-attrs.sw-attrs--cols { column-count: 1; }
.sw-peek:not(.is-wide) .sw-attrs--cols .sw-attr--col2 { break-before: auto; }

/* Description. */
.sw-desc { margin: 0 0 var(--s-3); padding: 12px 14px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); }
.sw-desc__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sw-desc__title { margin: 0; font-size: var(--t-14); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); font-family: var(--font-ui); }
.sw-desc__body { margin: 0; font-size: var(--t-14); line-height: 1.55; color: var(--body); white-space: pre-wrap; }
.sw-desc__body--rich { white-space: normal; overflow-wrap: anywhere; }
.sw-desc__body--rich p { margin: 0 0 var(--s-2); }
.sw-desc__body--rich p:last-child { margin-bottom: 0; }
.sw-desc__body--rich a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.sw-filelink { font-weight: 600; }
.sw-desc__empty { border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-14); color: var(--muted); cursor: text; }
.sw-desc__empty:hover { color: var(--text); }
.sw-desc__input { width: 100%; box-sizing: border-box; min-height: 110px; padding: 10px 12px; border: 1px solid var(--hairline);
  border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-14); line-height: 1.5; resize: vertical; }
.sw-desc__input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-desc__bar { display: flex; gap: 8px; margin-top: 8px; }

/* The thread. */
.sw-thread__search { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; margin: 0 0 12px;
  border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); color: var(--muted); }
.sw-thread__search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--t-14); color: var(--text); outline: none; }
.sw-thread__search:focus-within { box-shadow: 0 0 0 2px var(--focus); }
.sw-thread__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.sw-thread__title { margin: 0; font-size: var(--t-16); font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }
.sw-thread__filter .sw-dd__btn { gap: 8px; }
.sw-thread__filter .sw-dd__menu { right: 0; left: auto; min-width: 200px; }
.sw-thread__opt { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: var(--t-13); color: var(--text); cursor: pointer; border-radius: var(--r-sm); }
.sw-thread__opt:hover { background: var(--sunken); }
.sw-thread__optk { display: block; padding: 8px 10px 2px; font-size: var(--t-11); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sw-thread .sw-compose { margin-bottom: 16px; }
.sw-tl { list-style: none; margin: 0; padding: 0; }
.sw-tl__item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 0 0 18px; }
.sw-tl__item::before { content: ""; position: absolute; left: 13.5px; top: 32px; bottom: 4px; width: 1px; background: var(--hairline); }
.sw-tl__item:last-child::before { display: none; }
.sw-tl__icon { width: 28px; height: 28px; border-radius: 50%; background: var(--sunken); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; }
.sw-tl__main { min-width: 0; }
.sw-tl__line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 28px; font-size: var(--t-14); }
.sw-pf--tl { width: 26px; height: 26px; margin-left: 0; border-width: 0; font-size: var(--t-11); }
.sw-tl__who { color: var(--text); font-weight: 600; }
.sw-tl__what { color: var(--muted); }
.sw-tl__dot { color: var(--muted); }
.sw-tl__when { color: var(--muted); font-size: var(--t-13); }
.sw-tl__bubble { margin: 8px 0 0; padding: 10px 12px; background: var(--sunken); border-radius: var(--r-md); font-size: var(--t-14); line-height: 1.5; color: var(--text); }
.sw-tl__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sw-tl__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 2px 0; border: 0; background: none;
  font: inherit; font-size: var(--t-14); color: var(--ink-blue); cursor: pointer; }
.sw-tl__more:hover span[data-tl-more-label] { text-decoration: underline; }
.sw-pfs--mini { display: inline-flex; padding-left: 8px; }
.sw-pfs--mini .sw-pf { width: 24px; height: 24px; margin-left: -8px; border: 2px solid var(--surface); font-size: 9px; }
.sw-tl__replies { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--hairline); display: flex; flex-direction: column; gap: 12px; }
.sw-tl__reply .sw-tl__bubble { margin-top: 6px; }

/* ---------------------------------------------------------------- M32, fourth cut
   D156 (the card, slimmer), D152 (Subtasks and Activity as cards), D153 (stacked
   replies), D154/D155 (one people window). */
.sw-attrs--cols .sw-attr { min-height: 28px; padding: 1px 6px; }
.sw-attrs--cols .sw-attr__control,
.sw-attrs--cols .sw-select--slim,
.sw-attrs--cols .sw-input { min-height: 26px; height: 26px; padding-top: 0; padding-bottom: 0; font-size: var(--t-13); line-height: 24px; }
.sw-attrs--cols .sw-when { min-height: 24px; padding: 0 9px 0 7px; font-size: var(--t-12); gap: 5px; }
.sw-attrs--cols .sw-button--small { min-height: 24px; padding-top: 0; padding-bottom: 0; }
.sw-attrs--cols .sw-attr__value > .sw-attr__empty,
.sw-attrs--cols .sw-attr__value { line-height: 26px; }
.sw-attrs--cols .sw-attr--wide { align-items: center; }
.sw-attrs--cols .sw-attr--wide .sw-attr__label { padding-top: 0; }

.sw-desc__head { gap: 6px; min-height: 24px; }
.sw-desc__title { line-height: 24px; }
.sw-desc .sw-desc__edit { width: 24px; height: 24px; margin: 0; }

.sw-cardh { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-ui); font-size: var(--t-14);
  font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); line-height: 24px; }
.sw-cardh__n { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.sw-subcard, .sw-actcard { margin: 0 0 var(--s-3); padding: 12px 14px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: none; }
.sw-subcard > .sw-files__head { margin-bottom: 8px !important; }

.sw-thread__tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sw-actcard .sw-thread__search { min-height: 32px; margin: 0; padding: 0 10px; width: 220px; max-width: 42vw; }
.sw-actcard .sw-thread__search input { font-size: var(--t-13); }
.sw-tltabs { display: flex; gap: 18px; margin: 0 0 12px; border-bottom: 1px solid var(--hairline); }
.sw-tltab { display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; margin-bottom: -1px; border: 0;
  border-bottom: 2px solid transparent; background: none; font: inherit; font-size: var(--t-13); font-weight: 600; color: var(--muted); cursor: pointer; }
.sw-tltab:hover { color: var(--text); }
.sw-tltab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.sw-tltab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-tltab__n { font-weight: 500; font-variant-numeric: tabular-nums; }
.sw-thread__composer .sw-compose { margin-bottom: 16px; }
.sw-tl__loadrow { display: flex; justify-content: center; }
.sw-tl__load[hidden] { display: none; }

.sw-tl__stack { margin-top: 8px; }
.sw-tl__stack .sw-tl__more { margin: 0 0 8px; }
.sw-tl__older { display: flex; flex-direction: column; gap: 12px; }
.sw-tl__older[hidden] { display: none; }

.sw-who__face--team { background: var(--sunken); color: var(--muted); }
.sw-pick__role { margin-left: auto; }
[data-sheet-body].is-busy { opacity: 0.6; pointer-events: none; }
@media (max-width: 560px) {
  .sw-thread__head { flex-wrap: wrap; }
  .sw-actcard .sw-thread__search { width: auto; flex: 1; max-width: none; }
  .sw-thread__tools { flex: 1 1 100%; }
}
.sw-pick .sw-pick__role { min-height: 28px; height: 28px; padding-top: 0; padding-bottom: 0; font-size: var(--t-13); }

/* ---------------------------------------------------------------- M33: Maya on the page
   D157 (her switches), D158 (Show me), D159 (the strip), D160 (docked). */
.sw-mstrip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s-3);
  padding: 8px 10px 8px 12px; border-radius: var(--r-md); background: var(--gold-quiet); color: var(--text); }
.sw-mstrip__who { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-sm);
  background: var(--surface); color: var(--gold-ink); flex: none; }
.sw-mstrip__ask { font-size: var(--t-13); font-weight: 600; white-space: nowrap; margin-right: 2px; }
.sw-mstrip__chips { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.sw-mstrip__chip, .sw-mstrip__more { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
  border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--t-13); cursor: pointer; white-space: nowrap; }
.sw-mstrip__chip:hover, .sw-mstrip__more:hover { border-color: var(--gold-ink); }
.sw-mstrip__more { border-style: dashed; color: var(--muted); }
.sw-mstrip__chip:focus-visible, .sw-mstrip__more:focus-visible, .sw-mstrip__x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-mstrip__x { margin-left: auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0;
  border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; }
.sw-mstrip__x:hover { background: var(--surface); color: var(--text); }
.sw-peek .sw-mstrip { margin: 0 0 var(--s-2); }
@media (max-width: 760px) {
  .sw-mstrip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sw-mstrip__chips { flex-wrap: nowrap; }
  .sw-mstrip__ask { display: none; }
}

/* The AI switch in her header, and the switches on You / Team / her settings. */
.sw-maya__who { flex-wrap: nowrap; }
.sw-maya__ai { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; margin-left: 4px; padding: 0 8px 0 4px;
  border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--t-12); font-weight: 600; cursor: pointer; }
.sw-maya__ai:disabled { cursor: not-allowed; color: var(--muted); }
.sw-maya__ai:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-maya__ai-track { position: relative; width: 26px; height: 16px; border-radius: 999px; background: var(--hairline); flex: none; }
.sw-maya__ai-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 0 0 1px var(--hairline); transition: translate 160ms ease; }
.sw-maya__ai[aria-checked="true"] .sw-maya__ai-track { background: var(--ink-blue); }
.sw-maya__ai[aria-checked="true"] .sw-maya__ai-track::after { translate: 10px 0; box-shadow: none; }
.sw-mset { margin: var(--s-3) 0; }
.sw-mset[hidden] { display: none; }
.sw-mswitch { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer; max-width: 640px; }
.sw-mswitch + .sw-mswitch { border-top: 1px solid var(--hairline); }
.sw-mswitch.is-locked { cursor: not-allowed; }
.sw-mswitch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-mswitch__track { position: relative; flex: none; width: 36px; height: 20px; margin-top: 1px; border-radius: 999px; background: var(--hairline); }
.sw-mswitch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); transition: translate 160ms ease; }
.sw-mswitch input:checked + .sw-mswitch__track { background: var(--ink-blue); }
.sw-mswitch input:checked + .sw-mswitch__track::after { translate: 16px 0; }
.sw-mswitch input:focus-visible + .sw-mswitch__track { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-mswitch input:disabled + .sw-mswitch__track { opacity: 0.5; }
.sw-mswitch__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-mswitch__label { font-size: var(--t-14); font-weight: 600; color: var(--text); }
.sw-mswitch__note { font-size: var(--t-13); color: var(--muted); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .sw-mswitch__track::after, .sw-maya__ai-track::after { transition: none; } }

/* The guide's card, and the spotlight Show me draws. */
.sw-maya__guide { margin-top: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--sunken); }
.sw-maya__guide .sw-maya__sec { margin-top: 0; }
.sw-maya__steps { margin: 6px 0 8px; padding-left: 20px; font-size: var(--t-14); line-height: 1.5; }
.sw-maya__steps li + li { margin-top: 4px; }
.sw-spot { position: fixed; z-index: 95; pointer-events: none; border-radius: var(--r-md);
  box-shadow: 0 0 0 3px var(--gold-ink), 0 0 0 9999px rgb(0 0 0 / 0.18); }
.sw-spot__tip { position: absolute; left: 0; top: calc(100% + 8px); max-width: 280px; padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--text); color: var(--surface); font-size: var(--t-13); font-weight: 600; white-space: nowrap; }
.sw-spot.is-above .sw-spot__tip { top: auto; bottom: calc(100% + 8px); }
@media (prefers-reduced-motion: no-preference) {
  .sw-spot { animation: spot-in 260ms ease-out; }
  @keyframes spot-in { from { opacity: 0; } }
}

/* D160: docked beside the page from 1100px (it was 1280), the task panel moves over
   to make room, and on a phone she is a bottom sheet rather than the whole screen. */
@media (min-width: 1100px) {
  html[data-maya="open"] .app { padding-right: 400px; }
  html[data-maya="open"] .sw-maya { border-radius: 0; box-shadow: -1px 0 0 var(--hairline); }
  html[data-maya="open"] .sw-peek { right: 400px; }
}
@media (max-width: 760px) {
  .sw-maya { top: auto; height: min(76vh, 640px); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-panel); }
}

/* I-130: on a phone the top bar's buttons ran over "Menu". Tighter buttons there. */
@media (max-width: 480px) {
  .main__bar-right { gap: 0; }
  .main__bar-right .sw-button { padding-left: 8px; padding-right: 8px; }
}
.sw-attrs--cols .sw-depends .sw-row__code { white-space: nowrap; }
.sw-attrs--cols .sw-depends__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* I-131: `.sw-tl__item` is a grid, and a class's display beats the [hidden]
   attribute — so the Comments tab hid changes in the DOM and showed them anyway,
   and Load more's paging never hid anything either. */
.sw-tl__item[hidden], .sw-tl__none[hidden], [data-tl-composer][hidden] { display: none !important; }

/* ---------------------------------------------------------------- D161: what Maya would do next */
.sw-mstrip__sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-mstrip__sugg[hidden] { display: none; }
.sw-mstrip__act { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px 0 9px;
  border: 0; border-radius: 999px; background: var(--text); color: var(--surface);
  font: inherit; font-size: var(--t-13); font-weight: 600; cursor: pointer; white-space: nowrap; }
.sw-mstrip__act .sw-mark { color: var(--gold); }
.sw-mstrip__act:hover { opacity: 0.88; }
.sw-mstrip__act:focus-visible, .sw-mstrip__row:focus-visible, .sw-mstrip__pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-mstrip__looking { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px;
  border-radius: 999px; background: var(--surface); color: var(--muted); font-size: var(--t-13); }
@media (prefers-reduced-motion: no-preference) {
  .sw-mstrip__looking { animation: maya-look 1.4s ease-in-out infinite; }
  @keyframes maya-look { 50% { opacity: 0.55; } }
}
.sw-mstrip[data-kind="today"] .sw-mstrip__sugg { order: 10; flex: 1 1 100%; }
.sw-mstrip__list { list-style: none; margin: 2px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.sw-mstrip__row { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px;
  border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; }
.sw-mstrip__row:hover { border-color: var(--gold-ink); }
.sw-mstrip__rowlabel { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-14); font-weight: 600; }
.sw-mstrip__rowlabel .sw-mark { color: var(--gold-ink); }
.sw-mstrip__why { font-size: var(--t-13); color: var(--muted); padding-left: 22px; }
.sw-mstrip.is-min { display: inline-flex; padding: 0; background: none; margin-bottom: var(--s-2); }
.sw-mstrip__pill { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px 0 8px;
  border: 1px solid var(--hairline); border-radius: 999px; background: var(--gold-quiet); color: var(--text);
  font: inherit; font-size: var(--t-13); font-weight: 600; cursor: pointer; }
.sw-mstrip__pill .sw-mark { color: var(--gold-ink); }
.sw-mstrip__pill [data-msugg-n] { font-weight: 500; color: var(--muted); }
.sw-maya__next { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sw-maya__nextbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px;
  border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; }
.sw-maya__nextbtn:hover { border-color: var(--gold-ink); }
.sw-maya__nextbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-maya__nextlabel { font-size: var(--t-14); font-weight: 600; }
.sw-maya__nextwhy { font-size: var(--t-13); color: var(--muted); }
@media (max-width: 760px) { .sw-mstrip__sugg { flex-wrap: nowrap; } .sw-mstrip[data-kind="today"] .sw-mstrip__sugg { flex-wrap: wrap; } }
.sw-maya__ai { white-space: nowrap; flex: none; }
.sw-maya__who > div { min-width: 0; }
.sw-maya__sub { white-space: nowrap; }

/* ---------------------------------------------------------------- D163–D166: Maya learns, watches, is metered */
/* "Not now" on every suggestion. In the strip the × sits inside the dark pill. */
.sw-mstrip__actg { display: inline-flex; align-items: center; border-radius: 999px; background: var(--text); }
.sw-mstrip__actg .sw-mstrip__act { background: none; }
.sw-mstrip__no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 28px;
  margin-left: -6px; padding: 0 4px 0 0; border: 0; border-radius: 0 999px 999px 0; background: none;
  color: var(--surface); opacity: 0.6; cursor: pointer; }
.sw-mstrip__no:hover { opacity: 1; }
.sw-mstrip__no:focus-visible, .sw-mstrip__nonow:focus-visible, .sw-maya__nono:focus-visible,
.sw-spend__day:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-mstrip__li { display: flex; align-items: stretch; gap: 6px; }
.sw-mstrip__li .sw-mstrip__row { flex: 1 1 auto; min-width: 0; }
.sw-mstrip__nonow, .sw-maya__nono { flex: none; align-self: center; min-height: 28px; padding: 0 10px; border: 0;
  border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: var(--t-13); cursor: pointer; }
.sw-mstrip__nonow:hover, .sw-maya__nono:hover { background: var(--sunken); color: var(--text); }
.sw-mstrip__because, .sw-maya__because { color: var(--gold-ink); }
.sw-maya__nextrow { display: flex; align-items: stretch; gap: 4px; }
.sw-maya__nextrow .sw-maya__nextbtn { flex: 1 1 auto; min-width: 0; }

/* The spend view on the Team page. */
.sw-spend__days { display: inline-flex; gap: 4px; margin-bottom: var(--s-2); }
.sw-spend__day { min-height: 28px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-13); cursor: pointer; }
.sw-spend__day.is-on { background: var(--text); color: var(--surface); border-color: var(--text); }
.sw-spend__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s-2);
  margin: 0 0 var(--s-3); }
.sw-spend__stats > div { padding: 10px 12px; border-radius: var(--r-md); background: var(--sunken); }
.sw-spend__stats dt { font-size: var(--t-13); color: var(--muted); }
.sw-spend__stats dd { margin: 2px 0 0; font-size: var(--t-18); font-weight: 700; font-variant-numeric: tabular-nums; }
.sw-spend__fail { font-size: var(--t-13); font-weight: 500; color: var(--muted); }
/* D176: the month's budget — a meter, a sentence, and a tone only past 80% */
.sw-budget { margin-top: var(--s-2); padding: 12px; border-radius: var(--r-md); background: var(--sunken); }
.sw-budget__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.sw-budget__k { font-size: var(--t-13); color: var(--muted); }
.sw-budget__v { font-variant-numeric: tabular-nums; }
.sw-budget__src { font-size: var(--t-13); color: var(--muted); }
.sw-budget__bar { height: 8px; margin: 8px 0 6px; border-radius: 4px; background: var(--surface); overflow: hidden; }
.sw-budget__bar > span { display: block; height: 100%; border-radius: 4px; background: var(--ink-blue); }
.sw-budget.is-warn .sw-budget__bar > span { background: var(--attention); }
.sw-budget.is-over .sw-budget__bar > span { background: var(--risk); }
.sw-budget__say { margin: 0; font-size: var(--t-13); color: var(--muted); }
.sw-budget.is-warn { background: var(--attention-bg); }
.sw-budget.is-over { background: var(--risk-bg); }
.sw-budget.is-over .sw-budget__say { color: var(--text); font-weight: 600; }
.sw-spend__h { margin: var(--s-3) 0 var(--s-1); font-size: var(--t-14); font-weight: 700; }
.sw-spend__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sw-spend__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto auto; align-items: center;
  gap: var(--s-2); min-height: 32px; font-size: var(--t-14); }
.sw-spend__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-spend__bar { height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.sw-spend__bar > span { display: block; height: 100%; border-radius: 3px; background: var(--ink-blue); }
.sw-spend__num { font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; white-space: nowrap; }
.sw-spend__usd { color: var(--text); font-weight: 600; min-width: 56px; }
@media (max-width: 560px) {
  .sw-spend__row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .sw-spend__bar { display: none; }
}
/* On a phone the strip is one scrolling row — except on Today, where her list is a
   list: it wraps below the questions at full width (found by probe_m33c). */
@media (max-width: 760px) {
  .sw-mstrip[data-kind="today"] { flex-wrap: wrap; overflow-x: visible; }
  .sw-mstrip[data-kind="today"] .sw-mstrip__chips { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
}

/* ---------------------------------------------------------------- D168: Projects as tiles */
.sw-ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.sw-ptile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 14px;
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-soft);
  transition: box-shadow 160ms ease, translate 160ms ease; }
.sw-ptile:hover, .sw-ptile:focus-within { box-shadow: var(--shadow-lift); }
@media (prefers-reduced-motion: no-preference) { .sw-ptile:hover { translate: 0 -2px; } }
.sw-ptile__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.sw-ptile__space { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; max-width: 70%;
  min-height: 26px; padding: 0 10px 0 8px; border-radius: var(--r-pill); background: var(--sunken); color: var(--text);
  font-size: var(--t-13); font-weight: 600; text-decoration: none; }
.sw-ptile__space span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-ptile__space .sw-mark { color: var(--muted); flex: none; }
a.sw-ptile__space:hover { background: var(--gold-quiet); }
a.sw-ptile__space:focus-visible, .sw-ptile__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-ptile__space--none { color: var(--muted); font-weight: 500; }
.sw-ptile__status { flex: none; min-height: 22px; display: inline-flex; align-items: center; padding: 0 9px;
  border-radius: var(--r-pill); background: var(--attention-bg); color: var(--attention); font-size: var(--t-13); font-weight: 600; }
.sw-ptile__name { margin: 4px 0 0; font-size: var(--t-18); font-weight: 700; line-height: 1.3; }
.sw-ptile__link { color: var(--text); text-decoration: none; }
.sw-ptile__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sw-ptile__created { margin: 0; font-size: var(--t-13); color: var(--muted); }
.sw-ptile__tasks { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font-size: var(--t-13); }
.sw-ptile__k { font-weight: 600; }
.sw-ptile__n { font-variant-numeric: tabular-nums; color: var(--muted); }
.sw-ptile__bar { height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.sw-ptile__bar > span { display: block; height: 100%; border-radius: 3px; background: var(--ink-blue); }
.sw-ptile__flags { margin: 2px 0 0; font-size: var(--t-13); color: var(--risk); }
.sw-ptile__foot { display: flex; align-items: center; justify-content: flex-start; gap: 18px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--hairline); min-height: 44px; }
.sw-ptile__files { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-13); color: var(--muted);
  font-variant-numeric: tabular-nums; }
.sw-ptile__nobody { font-size: var(--t-13); color: var(--muted); }
.sw-pfs--tile { position: relative; z-index: 1; cursor: default; padding-left: 10px; }
.sw-pfs--tile .sw-pf { width: 30px; height: 30px; font-size: 11px; }
@media (max-width: 560px) { .sw-ptiles { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- D169: welcome, tour, Getting started */
.sw-obw { width: min(460px, calc(100vw - 32px)); padding: 28px 28px 22px; background: var(--surface); color: var(--text); }
.sw-obw::backdrop { background: rgb(0 0 0 / 0.32); }
.sw-obw__mark { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-quiet); color: var(--gold-ink); margin-bottom: 12px; }
.sw-obw__title { margin: 0 0 8px; font-size: var(--t-24); font-weight: 800; line-height: 1.2; }
.sw-obw__lead { margin: 0 0 14px; color: var(--muted); font-size: var(--t-14); line-height: 1.5; }
.sw-obw__list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sw-obw__list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-14); line-height: 1.45; }
.sw-obw__list .sw-mark { flex: none; margin-top: 2px; color: var(--gold-ink); }
.sw-obw__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-obw__note { margin: 12px 0 0; font-size: var(--t-13); color: var(--muted); }

.sw-tour__ring { position: fixed; z-index: 96; pointer-events: none; border-radius: var(--r-md);
  box-shadow: 0 0 0 3px var(--gold-ink), 0 0 0 9999px rgb(0 0 0 / 0.22); }
.sw-tour__ring[hidden] { display: none; }
.sw-tour { position: fixed; z-index: 97; padding: 16px 18px 14px; border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-panel); }
.sw-tour.is-center { box-shadow: var(--shadow-panel), 0 0 0 9999px rgb(0 0 0 / 0.22); }
.sw-tour__step { margin: 0 0 2px; font-size: var(--t-12); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-ink); }
.sw-tour__title { margin: 0 0 6px; font-size: var(--t-18); font-weight: 700; }
.sw-tour__text { margin: 0 0 12px; font-size: var(--t-14); line-height: 1.5; color: var(--muted); }
.sw-tour__dots { display: flex; gap: 5px; margin-bottom: 12px; }
.sw-tour__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--hairline); }
.sw-tour__dots span.is-on { width: 18px; border-radius: 3px; background: var(--gold-ink); }
.sw-tour__actions { display: flex; align-items: center; gap: 8px; }
.sw-tour__skip { margin-right: auto; border: 0; background: none; padding: 6px 4px; color: var(--muted);
  font: inherit; font-size: var(--t-13); cursor: pointer; }
.sw-tour__skip:hover { color: var(--text); }
.sw-tour__skip:focus-visible, .sw-ob__hide:focus-visible, .sw-ob__go:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sw-ob { margin: 0 0 var(--s-3); padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-soft); }
.sw-ob[hidden] { display: none; }
.sw-ob--maya { margin: 8px 0 0; padding: 12px 14px; box-shadow: none; border: 1px solid var(--hairline); }
.sw-ob__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sw-ob__title { margin: 0; font-size: var(--t-16); font-weight: 700; }
.sw-ob__count { margin: 2px 0 0; font-size: var(--t-13); color: var(--muted); font-variant-numeric: tabular-nums; }
.sw-ob__hide { border: 0; background: none; padding: 4px 8px; border-radius: var(--r-pill); color: var(--muted);
  font: inherit; font-size: var(--t-13); cursor: pointer; }
.sw-ob__hide:hover { background: var(--sunken); color: var(--text); }
.sw-ob__bar { height: 6px; margin: 10px 0 8px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.sw-ob__bar > span { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
.sw-ob__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 16px; }
.sw-ob--maya .sw-ob__list { grid-template-columns: 1fr; }
.sw-ob__step { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; }
.sw-ob__tick { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--hairline); color: var(--surface); }
.sw-ob__step.is-done .sw-ob__tick { background: var(--ok); border-color: var(--ok); }
.sw-ob__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sw-ob__name { font-size: var(--t-14); font-weight: 600; }
.sw-ob__step.is-done .sw-ob__name { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--hairline); }
.sw-ob__why { font-size: var(--t-13); color: var(--muted); }
.sw-ob__go { flex: none; min-height: 28px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-13); font-weight: 600; cursor: pointer; }
.sw-ob__go:hover { border-color: var(--gold-ink); }

/* ---------------------------------------------------------------- D170–D175: undo, archive, stars, drag */
/* The Undo bar: bottom left, as Gmail does (D171). */
.sw-undo { position: fixed; left: var(--s-3); bottom: var(--s-3); z-index: 90; display: flex; align-items: center; gap: 4px;
  max-width: min(460px, calc(100vw - 32px)); padding: 6px 6px 6px 16px; border-radius: var(--r-md);
  background: var(--text); color: var(--surface); box-shadow: var(--shadow-panel); font-size: var(--t-14); }
.sw-undo[hidden] { display: none; }
.sw-undo__t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; }
.sw-undo__go { min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: none;
  color: var(--gold); font: inherit; font-weight: 700; cursor: pointer; }
.sw-undo__go:hover { background: rgb(255 255 255 / 0.1); }
.sw-undo__x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--surface); opacity: 0.7; cursor: pointer; }
.sw-undo__x:hover { opacity: 1; }
.sw-undo__go:focus-visible, .sw-undo__x:focus-visible, .sw-star:focus-visible, .sw-seg__b:focus-visible,
.sw-pdone__opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 760px) { .sw-undo { left: 12px; right: 12px; bottom: 76px; max-width: none; } }

/* Stars (D172). Outline off, filled gold-ink on. */
.sw-star { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--muted); cursor: pointer; flex: none; }
.sw-star:hover { background: var(--sunken); color: var(--text); }
.sw-star.is-on { color: var(--gold-ink); }
.sw-star.is-on svg path { fill: currentColor; }
.sw-star--head { width: 36px; height: 36px; margin-left: 4px; align-self: center; }
.sw-star--head .sw-mark { width: 20px; height: 20px; }
.sw-ph__head { display: flex; align-items: center; }
.sw-tbl__star { width: 36px; text-align: center; }
.sw-row__star { display: inline-flex; margin-left: 6px; color: var(--gold-ink); vertical-align: -1px; }
.sw-row__star svg path { fill: currentColor; }
.rail__mark--star { color: var(--gold-ink); }
.rail__fav.is-drop-before { box-shadow: inset 0 2px 0 var(--gold-ink); }
.rail__fav.is-drop-after { box-shadow: inset 0 -2px 0 var(--gold-ink); }

/* Archived work (D170). */
.sw-arch { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 6px; min-height: 18px;
  border-radius: var(--r-pill); background: var(--sunken); color: var(--muted); font-size: var(--t-12); font-weight: 600;
  vertical-align: 1px; white-space: nowrap; }
.sw-arch--cancelled { background: var(--risk-bg); color: var(--risk); }
.sw-board__arch { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: var(--t-12); color: var(--muted); text-decoration: none; }
.sw-board__arch:hover { color: var(--text); text-decoration: underline; }
/* D366 */
.sw-board__archrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.sw-board__archrow .sw-board__arch { margin-top: 0; }
.sw-board__archall { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-12); cursor: pointer; }
.sw-board__archall:hover { background: var(--hover, var(--surface-2)); }
.sw-board__archall:disabled { opacity: .5; cursor: default; }
.sw-arch__lead { margin: 0 0 var(--s-2); }
.sw-arch__search { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.sw-arch__search .sw-input { min-height: 32px; width: 220px; }
.sw-seg { display: inline-flex; padding: 2px; border-radius: var(--r-pill); background: var(--sunken); }
.sw-seg__b { min-height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: none;
  color: var(--muted); font: inherit; font-size: var(--t-13); font-weight: 600; cursor: pointer; }
.sw-seg__b[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft); }
.sw-arow { display: flex; align-items: center; gap: var(--s-2); padding: 8px 12px; border-bottom: 1px solid var(--hairline); }
.sw-arow:last-child { border-bottom: 0; }
.sw-arow__main { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 116px 84px minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.sw-arow__st { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-13); color: var(--muted); }
.sw-arow__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sw-arow__where, .sw-arow__when { font-size: var(--t-13); color: var(--muted); white-space: nowrap; }
@media (max-width: 760px) {
  .sw-arow__main { grid-template-columns: minmax(0, 1fr) auto; }
  .sw-arow__st, .sw-arow .sw-row__code, .sw-arow__where { display: none; }
  .sw-arch__search .sw-input { width: 100%; }
  .sw-arch__search { flex: 1 1 100%; }
}

/* Completing a project with work open (D170). */
.sw-pdone { width: min(480px, calc(100vw - 32px)); padding: 22px 24px 18px; background: var(--surface); color: var(--text); }
.sw-pdone::backdrop { background: rgb(0 0 0 / 0.32); }
.sw-pdone__p { margin: 6px 0 4px; font-size: var(--t-14); line-height: 1.5; }
.sw-pdone__codes { margin: 0 0 12px; font-size: var(--t-13); color: var(--muted); }
.sw-pdone__opts { display: flex; flex-direction: column; gap: 8px; }
.sw-pdone__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; text-align: left;
  border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.sw-pdone__opt:hover { border-color: var(--gold-ink); }
.sw-pdone__opt span { font-size: var(--t-13); color: var(--muted); }
.sw-pdone__err { margin: 10px 0 0; font-size: var(--t-13); color: var(--risk); }
.sw-pdone__err[hidden] { display: none; }

/* Drag and drop (D173–D175). */
.sw-grip { display: inline-grid; place-items: center; width: 16px; height: 24px; color: var(--muted); cursor: grab;
  opacity: 0; touch-action: none; flex: none; }
.sw-row { position: relative; }
.sw-row > .sw-grip { position: absolute; left: -16px; top: 10px; }
.sw-row:hover > .sw-grip, tr:hover .sw-grip, .sw-grip:focus-visible, .sw-manual .sw-grip { opacity: 1; }
.sw-tbl__sel .sw-grip { vertical-align: middle; margin-right: 2px; }
.sw-tbl__sel { width: 80px; white-space: nowrap; }
.sw-tbl__sel .sw-tbl__star { width: auto; vertical-align: middle; margin-left: 2px; }
@media (hover: none) { .sw-grip { display: none; } }
.sw-ghost { position: fixed; z-index: 120; pointer-events: none; display: inline-flex; align-items: center; gap: 6px;
  max-width: 280px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--text); color: var(--surface);
  font-size: var(--t-13); font-weight: 600; box-shadow: var(--shadow-panel); }
.sw-ghost span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-lifted { opacity: 0.45; }
body.is-dragging-dnd, body.is-dragging-dnd * { cursor: grabbing !important; user-select: none; }
.is-drop { outline: 2px dashed var(--gold-ink); outline-offset: -2px; background: var(--gold-quiet) !important; }
[data-row-id].is-drop-before { box-shadow: inset 0 3px 0 var(--gold-ink); }
[data-row-id].is-drop-after { box-shadow: inset 0 -3px 0 var(--gold-ink); }
[data-row-id].is-drop-in { background: var(--gold-quiet); outline: 2px solid var(--gold-ink); outline-offset: -2px; }
.sw-dd__note { margin: 6px 4px 2px; max-width: 220px; font-size: var(--t-12); color: var(--muted); line-height: 1.4; }

/* M34: while something is being dragged, the Undo bar and the toast step out of
   the way — they sit over the bottom of the rail, which is a drop target. */
body.is-dragging-dnd .sw-undo,
body.is-dragging-dnd #toast { pointer-events: none; opacity: 0.35; }

/* ================================================================ M36: the contact book
   D178–D183. Soft shapes (D095): fills not frames, tone-on-tint labels, 8/12/16 radii.
   No gold here — the page's one primary action carries it (the Seal Rule). */
.sw-cb__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin: var(--s-2) 0 0; }
.sw-cb__n { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; margin-left: 2px; }
.sw-cb__list { padding: 0; }
.sw-cb__row {
  display: grid; align-items: center; gap: var(--s-1) var(--s-2);
  grid-template-columns: 32px minmax(180px, 1.5fr) minmax(120px, 1fr) minmax(120px, 0.8fr) minmax(140px, 1fr) 96px;
  padding: 12px var(--s-2); color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
.sw-cb__row:last-child { border-bottom: 0; }
.sw-cb__row:hover { background: var(--sunken); }
.sw-cb__row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-sm); }
.sw-cb__face {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: var(--r-pill);
  background: var(--info-bg); color: var(--ink-blue); font-size: var(--t-12); font-weight: 700;
}
.sw-cb__face--biz { border-radius: var(--r-sm); background: var(--sunken); color: var(--text); }
.sw-cb__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-cb__name { font-weight: 600; font-size: var(--t-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-cb__nick { font-weight: 500; color: var(--muted); }
.sw-cb__sub, .sw-cb__mail, .sw-cb__proj { font-size: var(--t-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-cb__phone, .sw-cb__num { font-variant-numeric: tabular-nums; font-size: var(--t-13); }
.sw-cb__labels { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.sw-cb__label {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px;
  border-radius: var(--r-sm); background: var(--sunken); color: var(--text);
  font-size: var(--t-12); font-weight: 600; white-space: nowrap;
}
.sw-cb__label--customer   { background: var(--ok-bg);        color: var(--ok); }
.sw-cb__label--vendor     { background: var(--info-bg);      color: var(--ink-blue); }
.sw-cb__label--contractor { background: var(--attention-bg); color: var(--attention); }
.sw-cb__label--broker     { background: var(--st-review-bg); color: var(--st-review); }

/* the contact page */
.sw-cb__head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.sw-cb__head .sw-cb__face { width: 48px; height: 48px; font-size: var(--t-16); }
.sw-cb__title { flex: 1 1 240px; min-width: 0; }
.sw-cb__title h1 { overflow-wrap: anywhere; }
.sw-cb__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.sw-cb__type { font-size: var(--t-12); font-weight: 600; color: var(--muted); }
.sw-cb__acts { display: flex; gap: var(--s-1); }
.sw-cb__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-2); align-items: start; }
.sw-cb__card { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-2); box-shadow: var(--shadow-soft); min-width: 0; }
.sw-cb__form .sw-cb__card { margin-bottom: var(--s-2); }
.sw-cb__cardhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); margin-bottom: var(--s-1); }
.sw-cb__cardhead h2 { font-size: var(--t-14); font-weight: 700; margin: 0; }
.sw-cb__cardbody { display: flex; flex-direction: column; gap: var(--s-1); align-items: flex-start; }
.sw-cb__cardbody > * { max-width: 100%; }
.sw-cb__dl { margin: 0; display: grid; gap: 6px; width: 100%; }
.sw-cb__dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s-1); }
.sw-cb__dl dt { font-size: var(--t-12); color: var(--muted); font-weight: 600; }
.sw-cb__dl dd { margin: 0; font-size: var(--t-13); overflow-wrap: anywhere; }
.sw-cb__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.sw-cb__lines li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--s-1); font-size: var(--t-13); min-width: 0; }
.sw-cb__lines a { overflow-wrap: anywhere; }
.sw-cb__k { font-size: var(--t-12); color: var(--muted); }
.sw-cb__none { font-size: var(--t-13); color: var(--muted); margin: 0; }
.sw-cb__note { font-size: var(--t-12); color: var(--muted); font-style: italic; }
.sw-cb__addrs { display: grid; gap: var(--s-1); width: 100%; }
.sw-cb__addr { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-13); padding: var(--s-1); border-radius: var(--r-sm); background: var(--sunken); }
.sw-cb__bank { margin: 0; font-size: var(--t-13); }
.sw-cb__x {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); cursor: pointer; margin-left: auto;
}
.sw-cb__x:hover { background: var(--sunken); color: var(--text); }
.sw-cb__x:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* the pickers */
.sw-cb__pick { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; margin: 6px 0; gap: 2px; }
.sw-cb__opt {
  display: flex; justify-content: space-between; gap: var(--s-1); text-align: left;
  font: inherit; font-size: var(--t-13); padding: 6px var(--s-1); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text); cursor: pointer;
}
.sw-cb__opt:hover, .sw-cb__opt[aria-selected="true"] { background: var(--sunken); }
.sw-cb__opt[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--muted); }
.sw-cb__opt:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sw-cb__plabel { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-12); color: var(--muted); font-weight: 600; margin-top: 6px; }

/* the form */
.sw-cb__form { max-width: 880px; }
.sw-cb__form .sw-cform__grid { width: 100%; }
.sw-cb__seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--sunken); }
.sw-cb__seg label { position: relative; }
.sw-cb__seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sw-cb__seg span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s-2); border-radius: var(--r-sm);
                   font-size: var(--t-13); font-weight: 600; color: var(--muted); }
.sw-cb__seg input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft); }
.sw-cb__seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-cb__lchip { position: relative; display: inline-flex; }
.sw-cb__lchip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sw-cb__lchip span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-sm);
                     background: var(--sunken); font-size: var(--t-13); font-weight: 600; color: var(--muted); }
.sw-cb__lchip input:checked + span { background: var(--info-bg); color: var(--ink-blue); box-shadow: inset 0 0 0 1px var(--ink-blue); }
.sw-cb__lchip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-cb__rep { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); width: 100%; }
.sw-cb__rep .sw-cform__phone { flex: 1 1 260px; min-width: 0; }
.sw-cb__rep > input[type="email"] { flex: 1 1 240px; min-width: 0; }
.sw-cb__radio { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); color: var(--muted); }
.sw-cb__primary { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-12); color: var(--muted); font-weight: 600; width: 100%; }
.sw-cb__addrform { border: 0; margin: 0; padding: var(--s-1); border-radius: var(--r-md); background: var(--sunken); width: 100%; box-sizing: border-box; min-width: 0; }
.sw-cb__addrform .sw-soft { background: var(--surface); }
.sw-cb__addrtop { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; margin-bottom: var(--s-1); }
.sw-cb__agrid--one { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-1); }
.sw-cb__formacts { display: flex; justify-content: flex-end; gap: var(--s-1); margin: var(--s-2) 0 var(--s-5); }
.sw-cb__mlist { display: flex; flex-direction: column; gap: var(--s-1); }
.sw-cb__mrow { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.sw-cb__mrow .sw-soft { flex: 1 1 180px; }

/* a project's contacts, in its header */
.sw-cb__pchips { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.sw-cb__pchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  border-radius: var(--r-sm); background: var(--sunken); color: var(--text); text-decoration: none;
  font-size: var(--t-13); font-weight: 600;
}
.sw-cb__pchip:hover { background: var(--info-bg); }

@media (max-width: 820px) {
  .sw-cb__row { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "f w" "f l" "f p"; }
  .sw-cb__row .sw-cb__face { grid-area: f; align-self: start; }
  .sw-cb__row .sw-cb__who { grid-area: w; }
  .sw-cb__row .sw-cb__labels { grid-area: l; }
  .sw-cb__row .sw-cb__phone { grid-area: p; }
  .sw-cb__row .sw-cb__mail, .sw-cb__row .sw-cb__proj { display: none; }
  .sw-cb__grid { grid-template-columns: minmax(0, 1fr); }
  .sw-cb__form .sw-cform__grid { grid-template-columns: minmax(0, 1fr); }
  .sw-cb__acts { width: 100%; }
}
@media (pointer: coarse) {
  .sw-cb__seg span, .sw-cb__lchip span, .sw-cb__pchip { min-height: 44px; }
  .sw-cb__x { width: 44px; height: 44px; }
}
.sw-cb__pchips { padding: var(--s-1) var(--s-2) var(--s-2); }
.sw-gfilter [data-cb-q] { flex: 1 1 260px; }

/* M37: photos, the project-style header, the task tree, the country (D184–D190) */
.sw-cb__face { overflow: hidden; }
.sw-cb__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-cb__face--lg { width: 64px; height: 64px; font-size: var(--t-18, 18px); }
.sw-cb__face.is-nophoto img { display: none; }
.sw-ph__by { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-14); color: var(--text); white-space: nowrap; }
.sw-ph__by .sw-pfs { cursor: default; padding-left: 10px; }
.sw-pf--by { width: 28px; height: 28px; font-size: 10px; }
.sw-cb__hero { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: 0 0 var(--s-2); }
.sw-cb__heromain { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sw-cb__hero .sw-cb__meta { margin-top: 0; }
.sw-cb__photoacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-2); }
.sw-cb__file { position: relative; cursor: pointer; }
.sw-cb__file input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.sw-cb__file:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.sw-cb__who1 { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); width: 100%; }
.sw-cb__photoin { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--s-2); }
.sw-cb__photoin .is-bad { color: var(--risk); }
.sw-cb__bcc { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-12); color: var(--muted); font-weight: 600; margin-bottom: var(--s-1); max-width: 320px; }
[data-bank-box] { width: 100%; }
.sw-cb__projs li { row-gap: 2px; }
.sw-cb__tbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin: var(--s-1) 0; }
.sw-cb__tsetall { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-12); color: var(--muted); font-weight: 600; }
.sw-cb__tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 55vh; overflow-y: auto; }
.sw-cb__trow { display: flex; align-items: center; gap: var(--s-1); padding: 4px var(--s-1) 4px calc(var(--s-1) + var(--depth, 0) * 20px); border-radius: var(--r-sm); }
.sw-cb__trow:hover { background: var(--sunken); }
.sw-cb__tick { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s-1); font-size: var(--t-13); cursor: pointer; }
.sw-cb__tick input { flex: none; width: 18px; height: 18px; margin: 0; }
.sw-cb__tcode { flex: none; font-size: var(--t-12); color: var(--muted); font-variant-numeric: tabular-nums; }
.sw-cb__ttitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-cb__tacc { flex: none; width: auto; max-width: 170px; }
.sw-cb__tacc:disabled { opacity: 0.45; }
.sw-viewonly { padding: var(--s-2); border-radius: var(--r-md); background: var(--sunken); margin: var(--s-2) 0 0; }
.sw-locale__row { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-1) 0 var(--s-2); }
.sw-locale__pick { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-12); color: var(--muted); font-weight: 600; max-width: 320px; }
.sw-locale__is { margin: 0; font-size: var(--t-14); }
.sw-locale__what { padding: 0; }
@media (max-width: 820px) {
  .sw-cb__tacc { max-width: 150px; }
  .sw-cb__tcode { display: none; }
  .sw-cb__trow { padding-left: calc(4px + var(--depth, 0) * 12px); }
}
@media (pointer: coarse) {
  .sw-cb__trow { min-height: 44px; }
}

/* M38 (D194): How people say it — learned names on the Team page. */
.sw-names__note { max-width: 70ch; }
.sw-names__add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-1); padding: var(--s-1) 0 var(--s-2); }
.sw-names__f { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-12); color: var(--muted); font-weight: 600; min-width: 0; flex: 1 1 200px; max-width: 320px; }
.sw-names__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-names__g { display: grid; grid-template-columns: minmax(140px, 240px) minmax(0, 1fr); gap: var(--s-1); align-items: start;
  padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); }
.sw-names__what { margin: 0; font-size: var(--t-14); font-weight: 600; color: var(--text); display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.sw-names__kind { font-size: var(--t-11); font-weight: 400; color: var(--muted); }
.sw-names__said { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sw-names__n { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 10px;
  border-radius: var(--r-sm); background: var(--sunken); font-size: var(--t-13); color: var(--text); }
.sw-names__n.is-pinned { background: var(--gold-quiet); }
.sw-names__t { overflow-wrap: anywhere; }
.sw-names__meta { font-size: var(--t-11); color: var(--muted); white-space: nowrap; }
.sw-names__b { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--t-12); cursor: pointer;
  min-height: 24px; min-width: 24px; padding: 0 6px; border-radius: var(--r-xs); display: inline-grid; place-items: center; }
.sw-names__b:hover { background: var(--surface); color: var(--text); }
.sw-names__b:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (max-width: 760px) {
  .sw-names__g { grid-template-columns: minmax(0, 1fr); }
  .sw-names__f { max-width: none; }
}

/* M39: talking live. The compose area becomes one bar: a still dot, what is happening,
   the language, End. The Talk button sits in the panel's tools. */
.sw-maya__talk .sw-mark { width: 16px; height: 16px; }
.sw-maya__talk[hidden] { display: none; }
.sw-maya__talk[aria-pressed="true"] { background: var(--gold-quiet); }
.sw-maya__livebar { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px var(--s-2); }
.sw-maya__livebar[hidden] { display: none; }
.sw-maya__livedot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: none; }
.sw-maya__livestate { flex: 1 1 auto; margin: 0; min-width: 0; padding: 8px 12px; border-radius: var(--r-md);
  background: var(--sunken); font-size: var(--t-14); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-maya__livelang { flex: none; max-width: 120px; }
.sw-maya__liveend { flex: none; }

/* M41: a call in progress, and what came of it. */
.sw-maya__callbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-md);
  background: var(--sunken); font-size: var(--t-13); }
.sw-maya__callstate { flex: 1 1 auto; font-variant-numeric: tabular-nums; }
.sw-maya__callres { display: flex; flex-direction: column; gap: 6px; }
.sw-maya__answers { margin: 0; padding: 10px 12px 10px 26px; border-radius: var(--r-md); background: var(--surface);
  box-shadow: var(--shadow-soft); font-size: var(--t-13); line-height: 1.5; }
.sw-maya__q { display: block; color: var(--muted); font-size: var(--t-12); }
.sw-maya__transcript { font-size: var(--t-12); color: var(--body); }
.sw-maya__transcript summary { cursor: pointer; color: var(--muted); padding: 4px 0; }
.sw-maya__transcript ul { margin: 4px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; }
.sw-cb__mayacall { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) { .sw-maya__livelang { max-width: 92px; } }
.sw-maya__compose[hidden] { display: none; }   /* I-150: display:flex beat [hidden] */

/* ============================================================ M42 (D210): signing in */
.sw-signin { display: flex; flex-direction: column; gap: var(--s-2); max-width: 400px; }
.sw-signin > .sw-button { align-self: flex-start; }
.sw-signin__or { display: flex; align-items: center; gap: var(--s-2); margin: 0; color: var(--muted); font-size: var(--t-13); }
.sw-signin__or::before, .sw-signin__or::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--hairline); }
.sw-signin__form { display: flex; flex-direction: column; gap: var(--s-2); }
.sw-signin__form .sw-input { width: 100%; }
.sw-signin__step[hidden] { display: none; }
.sw-signin__step { display: flex; flex-direction: column; gap: 6px; }
.sw-signin__lbl { font-size: var(--t-13); font-weight: 600; color: var(--text); }
.sw-signin__code { font-family: var(--font-mono); letter-spacing: 0.3em; font-size: var(--t-18); }
.sw-signin__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.sw-signin__note { margin: 0; min-height: 1.2em; font-size: var(--t-13); color: var(--muted); }
.sw-signin__note.is-bad { color: var(--risk); }

/* M42 (D211, D212): the team row's face and times, a colleague's page, your profile. */
.sw-person .sw-cb__face.sw-person__face { width: 32px; height: 32px; font-size: var(--t-12); }
a.sw-person__name { color: var(--text); text-decoration: none; }
a.sw-person__name:hover { text-decoration: underline; }
.sw-person__times { flex-direction: column; align-items: flex-start; gap: 0; color: var(--text); }
.sw-person__k { color: var(--muted); font-size: var(--t-11); font-family: var(--font-ui); }
.sw-pfphone { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.sw-pfphone__cc { flex: 0 1 190px; min-width: 0; }
.sw-pfphone__num { flex: 1 1 160px; min-width: 0; font-variant-numeric: tabular-nums; }
.sw-pfphone-edit { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-2); align-items: flex-start; }
.sw-pfname { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sw-pfname .sw-input { flex: 1 1 160px; min-width: 0; }
.sw-pfadd { margin-top: var(--s-1); }
.sw-meprof { margin-bottom: var(--s-2); }
.sw-meprof__grid { margin-bottom: var(--s-4); }
.sw-meprof__grid .sw-cb__cardbody { display: flex; flex-direction: column; gap: var(--s-1); }
.sw-signin__again { align-self: flex-start; }

/* ============================================================ M43 (D214–D217): Maya's seat */
.sw-bymaya {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  padding: 1px 8px 1px 6px; border-radius: var(--r-pill);
  font-size: var(--t-11); font-weight: 600; font-family: var(--font-ui);
  color: var(--gold-ink); background: var(--gold-quiet); white-space: nowrap;
}
.sw-tl__why { display: block; margin: 2px 0 0; font-size: var(--t-12); color: var(--muted); }
.sw-tl__whyk { font-weight: 600; color: var(--text); }
.sw-cb__why { margin: 0 0 var(--s-2); }
.sw-cb__face--ai { background: var(--gold-quiet); color: var(--gold-ink); }
.sw-cb__face--ai .sw-mark { width: 55%; height: 55%; }
.sw-maya-runlist li { flex-wrap: wrap; }
.sw-maya-runs { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- M45 (D223–D227) */
/* D223: Maya's tools are marks, right-aligned, 32px targets; the words are their label
   and tooltip. Talk while live keeps D193's quiet gold. */
.sw-maya__tools--icons { margin-left: auto; gap: 2px; flex: none; }
.sw-maya__tool {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer;
}
.sw-maya__tool .sw-mark { width: 17px; height: 17px; }
.sw-maya__tool:hover { background: var(--sunken); color: var(--text); }
.sw-maya__tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-maya__tool[hidden] { display: none; }
.sw-maya__tool.sw-maya__talk[aria-pressed="true"] { background: var(--gold-quiet); color: var(--gold-ink); }
.sw-maya__tools--icons .sw-modal__x { width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; }
.sw-maya__who { flex: 1 1 auto; }
@media (max-width: 760px) { .sw-maya__tools--icons .sw-maya__tool { font-size: inherit; } }

/* D224: the board card — faces, the end date and the project, each with its mark. */
.sw-card2__foot { align-items: center; font-family: inherit; }
.sw-card2__who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font-size: var(--t-12); }
.sw-card2__who--none { font-style: normal; }
.sw-card2__faces { display: inline-flex; align-items: center; flex: none; }
.sw-card2__faces .sw-card2__face { width: 22px; height: 22px; font-size: 9.5px; box-shadow: 0 0 0 2px var(--surface); }
.sw-card2__faces .sw-card2__face + .sw-card2__face { margin-left: -6px; }
.sw-card2__face--owner { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink-blue); }
.sw-card2__face--more { display: inline-grid; place-items: center; border-radius: var(--r-pill);
  background: var(--sunken); color: var(--text); font-weight: 700; }
.sw-card2__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sw-card2__due { display: inline-flex; align-items: center; gap: 4px; flex: none; margin-left: auto;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-12); color: var(--muted); }
.sw-card2__due .sw-mark, .sw-card2__where .sw-mark { width: 13px; height: 13px; flex: none; }
.sw-card2__none { font-variant-numeric: normal; }
.sw-card2__where { display: flex; align-items: center; gap: 5px; min-width: 0; }
.sw-card2__where > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-card2--parent .sw-card2__faces .sw-card2__face { box-shadow: 0 0 0 2px color-mix(in oklch, var(--ink-blue) 6%, var(--surface)); }

/* D227: Approvals as a table. The answer sits in its row. */
.sw-tbl--appr td { white-space: nowrap; }
.sw-tbl--appr td.sw-tbl__title { white-space: normal; min-width: 260px; }
.sw-appr__code { margin-right: 4px; }
.sw-appr__act { display: flex; align-items: center; gap: 6px; }

.sw-appr__said { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.sw-card2__due.sw-row__date--late { color: var(--risk); font-weight: 700; }
.sw-appr__code { font-variant-numeric: tabular-nums; font-size: var(--t-12); font-weight: 500; color: var(--muted); margin-right: 6px; white-space: nowrap; }
.sw-appr__ver { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.sw-appr__act .sw-button { white-space: nowrap; }
/* The phone rule that drops a work table's context columns (M4) is about THAT table's
   column order; Approvals keeps all its columns and scrolls sideways instead. */
@media (max-width: 820px) {
  .sw-tbl--appr th:nth-child(n), .sw-tbl--appr td:nth-child(n) { display: table-cell; }
  .sw-tbl--appr td.sw-tbl__title { min-width: 180px; }
}
code.sw-appr__code { font-family: var(--font-ui); background: none; padding: 0; }
.sw-tbl--appr td.sw-tbl__title { min-width: 240px; }
.sw-tbl--appr td.sw-tbl__where { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.sw-appr__ver { max-width: 200px; }
/* I-164: on a phone the strip scrolls sideways, but its chip group could still shrink
   (min-width: 0), so the chips slid under "Ask something else". It keeps its width. */
@media (max-width: 760px) { .sw-mstrip__chips, .sw-mstrip__sugg { flex: none; } }
.sw-appr__at { line-height: 1.25; }
.sw-appr__by { display: block; font-size: var(--t-12); color: var(--muted); }
.sw-tbl--appr td.sw-tbl__title { min-width: 220px; }
.sw-tbl--appr td.sw-tbl__where { max-width: 170px; }
.sw-appr__ver { max-width: 170px; }
.sw-tbl--appr td.sw-appr__ver, .sw-tbl--appr td.sw-tbl__where { white-space: normal; overflow: visible; text-overflow: clip; min-width: 120px; }
.sw-tbl--appr td.sw-appr__ver { max-width: 180px; }
.sw-tbl--appr td.sw-tbl__where { max-width: 150px; }
.sw-tbl--appr td.sw-appr__said { white-space: normal; min-width: 160px; max-width: 220px; }
/* I-165: the card's screen-reader names are absolutely placed; without a positioned
   card they escaped the board's own scroller and widened the phone page to 1713px. */
.sw-card2 { position: relative; }

/* ---------------------------------------------------------------- M46: Google Drive (D228–D232) */
.sw-file--drive .sw-file__name { color: var(--text); text-decoration: none; min-width: 0; flex: 1 1 auto; }
.sw-file--drive .sw-file__name:hover { text-decoration: underline; }
.sw-file--drive > .sw-mark { color: var(--ink-blue); flex: none; }
.sw-file--drive .sw-file__share { margin-left: 0; }
.sw-file--drive .sw-file__share:hover { color: var(--ink-blue); }
.sw-file--drive .sw-file__off + .sw-file__off { margin-left: 0; }
.sw-folder__drive { margin: 0 0 var(--s-2); }
.sw-dchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.sw-dchips[hidden] { display: none; }
.sw-dchip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 26px; padding: 0 10px 0 8px;
  border-radius: var(--r-pill); background: color-mix(in oklch, var(--ink-blue) 11%, var(--surface)); color: var(--text);
  font-size: var(--t-12); font-weight: 600; text-decoration: none; }
.sw-dchip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sw-dchip .sw-mark { width: 12px; height: 12px; color: var(--ink-blue); flex: none; }
a.sw-dchip:hover { background: color-mix(in oklch, var(--ink-blue) 18%, var(--surface)); }
a.sw-dchip:focus-visible, .sw-dchip button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-dchip button { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: -6px; padding: 0;
  border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); cursor: pointer; }
.sw-dchip button:hover { color: var(--risk); background: var(--surface); }
.sw-compose__drive { padding: 0 var(--s-1); margin: 0 0 6px; }
.sw-pick__tag { font-size: var(--t-11); color: var(--muted); background: var(--sunken); border-radius: var(--r-pill);
  padding: 1px 7px; white-space: nowrap; }
.sw-pick__has { flex: none; font-size: var(--t-12); color: var(--muted); white-space: nowrap; }
.sw-pick__has.is-has { color: var(--ok, var(--text)); font-weight: 600; }
.sw-dshare__role { display: flex; gap: var(--s-2); margin: var(--s-2) 0 0; font-size: var(--t-14); }
.sw-dshare__role label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sw-dshare__role input { accent-color: var(--gold-ink); }
.sw-dshare__out p { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; font-size: var(--t-13); }
.sw-dshare__ok { color: var(--text); }
.sw-dshare__ok .sw-mark { color: var(--ok, var(--ink-blue)); }
.sw-dshare__no { color: var(--muted); }
.sw-dshare__no .sw-mark { color: var(--risk); flex: none; margin-top: 2px; }
.sw-drivecard { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0 0 var(--s-3); max-width: 640px; }
.sw-drivecard .sw-section__note { margin: 0; flex: 1 1 320px; }
.sw-drive__dom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); max-width: 560px; }
.sw-drive__dom .sw-input { flex: 1 1 220px; min-width: 0; }

.sw-file--drive .sw-file__body { flex: 1 1 auto; }
.sw-file--drive .sw-file__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ================================================================ M47: Maya reads files
   D233–D237. A paperclip (and on a phone the camera) in her compose bar; files dropped on
   her panel; each comes back as a card that says what it is and what she'd do with it.
   Nothing is filed until OK. */
.sw-maya__filein { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sw-maya__cam { display: none; }
@media (pointer: coarse) { .sw-maya__cam { display: inline-flex; } }
.sw-maya__compose.is-recording .sw-maya__clip, .sw-maya__compose.is-recording .sw-maya__cam { display: none; }
/* M49: the camera's menu — Photo · Video · Video note. */
.sw-maya__compose { position: relative; }
.sw-maya__cammenu {
  position: absolute; right: 8px; bottom: calc(100% + 6px); z-index: 5; min-width: 210px;
  display: flex; flex-direction: column; padding: 6px; border-radius: var(--r-md);
  background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 0 0 1px var(--hairline);
}
.sw-maya__cammenu button {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 0;
  border-radius: var(--r-sm); background: none; color: var(--text); font: inherit; font-size: var(--t-14); text-align: left; cursor: pointer;
}
.sw-maya__cammenu button:hover, .sw-maya__cammenu button:focus-visible { background: var(--sunken); outline: none; }
.sw-maya__cammenu button > span { display: flex; flex-direction: column; }
.sw-maya__cammenu small { color: var(--muted); font-size: var(--t-12); }
.sw-maya__cammenu .sw-mark { width: 18px; height: 18px; flex: none; }
/* M49: the recorder. */
.sw-rec { display: flex; flex-direction: column; gap: 12px; }
.sw-rec [hidden] { display: none !important; }   /* .sw-button sets display; hidden must win */
.sw-rec__stage { position: relative; border-radius: var(--r-md); overflow: hidden; background: #111; aspect-ratio: 16 / 9; }
.sw-rec--note .sw-rec__stage { aspect-ratio: 3 / 4; max-height: 60vh; margin: 0 auto; width: 100%; max-width: 420px; }
.sw-rec__view { width: 100%; height: 100%; object-fit: cover; display: block; background: #111; }
.sw-rec.is-mirror .sw-rec__view { transform: scaleX(-1); }
.sw-rec.is-done .sw-rec__view { object-fit: contain; }
.sw-rec__clock {
  position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  border-radius: var(--r-xs); background: rgba(0,0,0,.55); color: #fff; font-size: var(--t-12); font-variant-numeric: tabular-nums;
}
.sw-rec__dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; }
.sw-rec.is-rec .sw-rec__dot { background: #e5484d; animation: sw-rec-blink 1s steps(2) infinite; }
@keyframes sw-rec-blink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .sw-rec.is-rec .sw-rec__dot { animation: none; } }
.sw-rec.is-done .sw-rec__clock { display: none; }
.sw-rec__hint { margin: 0; color: var(--muted); font-size: var(--t-13); }
.sw-rec__acts { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.sw-rec__go {
  width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--text); background: none; padding: 4px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sw-rec__go span { width: 100%; height: 100%; border-radius: 50%; background: #e5484d; transition: all .15s; }
.sw-rec.is-rec .sw-rec__go span { width: 26px; height: 26px; border-radius: 6px; }
.sw-rec__go:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* M49: a video on a file card. */
.sw-filecard__vid { position: relative; flex: none; width: 56px; height: 56px; }
.sw-filecard__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff;
  pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.sw-filecard__play .sw-mark { width: 18px; height: 18px; }
.sw-filecard__len {
  position: absolute; right: 3px; bottom: 3px; padding: 0 4px; border-radius: 3px; background: rgba(0,0,0,.6);
  color: #fff; font-size: 10px; line-height: 14px; font-variant-numeric: tabular-nums;
}
.sw-maya.is-drop { box-shadow: inset 0 0 0 2px var(--gold); }
.sw-maya.is-drop .sw-maya__log::after {
  content: "Drop to give Maya the file"; position: sticky; bottom: 8px; display: block; margin: 8px auto 0;
  width: max-content; padding: 6px 12px; border-radius: var(--r-md); background: var(--text); color: var(--surface);
  font-size: var(--t-13); font-weight: 600;
}
.sw-maya__files { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; justify-content: flex-end; }
.sw-maya__fchip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px;
  border-radius: var(--r-xs); background: var(--sunken); color: var(--body); font-size: var(--t-12);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-filecard { gap: 10px; }
.sw-filecard__top { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.sw-filecard__thumb {
  flex: none; width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover;
  background: var(--sunken); box-shadow: inset 0 0 0 1px var(--hairline);
}
.sw-filecard__icon {
  flex: none; width: 56px; height: 56px; border-radius: var(--r-sm); background: var(--sunken);
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
}
.sw-filecard__icon .sw-mark { width: 22px; height: 22px; }
.sw-filecard__id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-filecard__name { margin: 0; font-size: var(--t-13); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.sw-filecard__kind { margin: 0; font-size: var(--t-12); color: var(--muted); }
.sw-filecard__flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.sw-filecard__flag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-xs);
  font-size: var(--t-11); font-weight: 700; letter-spacing: 0.02em;
}
.sw-filecard__flag--due { background: var(--attention-bg); color: var(--attention); }
.sw-filecard__flag--paid { background: var(--ok-bg); color: var(--ok); }
.sw-filecard__flag .sw-mark { width: 12px; height: 12px; }
.sw-filecard__bill { margin: 0; font-size: var(--t-13); color: var(--body); }
.sw-filecard__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sw-filecard__step { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-13); color: var(--text); line-height: 1.4; }
.sw-filecard__step .sw-mark { flex: none; margin-top: 2px; width: 14px; height: 14px; color: var(--muted); }
.sw-filecard__step.is-off { color: var(--muted); text-decoration: line-through; }
.sw-filecard__edit { display: none; flex-direction: column; gap: 6px; width: 100%; }
.sw-filecard.is-editing .sw-filecard__edit { display: flex; }
.sw-filecard.is-editing .sw-filecard__line { display: none; }
.sw-filecard__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sw-filecard__edit .sw-input { width: 100%; min-width: 0; font-size: var(--t-13); padding: 6px 8px; }
.sw-filecard__on { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--muted); }
.sw-filecard__reading summary { cursor: pointer; font-size: var(--t-12); font-weight: 600; color: var(--muted); }
.sw-filecard__reading pre {
  margin: 6px 0 0; max-height: 180px; overflow: auto; white-space: pre-wrap; font: inherit;
  font-size: var(--t-12); line-height: 1.5; color: var(--body); background: var(--sunken);
  padding: 8px 10px; border-radius: var(--r-sm);
}
.sw-filecard__redo { display: flex; gap: 6px; }
.sw-filecard__redo .sw-input { flex: 1; min-width: 0; font-size: var(--t-13); padding: 6px 8px; }
.sw-maya__waiting { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.sw-maya__wrow { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: var(--t-13); }
.sw-maya__wrow span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) { .sw-filecard__row { grid-template-columns: 1fr; } }
.sw-file__read {
  border: 0; background: none; padding: 0; font: inherit; color: var(--gold-ink);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.sw-file__reading {
  margin: 8px 0 0; white-space: pre-wrap; font: inherit; font-size: var(--t-13); line-height: 1.55;
  color: var(--body); background: var(--sunken); padding: 10px 12px; border-radius: var(--r-sm);
  max-height: 60vh; overflow: auto;
}

/* ------------------------------------------------------------------ M48: bills
   The table is the Approvals card; a bill's page is a contact-style page. Status pills
   wear their stage's tint (To be approved = In review, Scheduled = Ready, Paid = Done);
   "To be scheduled" is the attention tint with the `due` mark (Arvind's highlight);
   Rejected and Overdue are `risk`. Figures are tabular. Gold stays the seal. */
.sw-status--attention:not([data-st]) {
  background: var(--attention-bg); border-radius: var(--r-sm); padding: 3px 10px 3px 7px; min-height: 26px;
}
.sw-bill__num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sw-tbl--bills th:nth-last-child(2) { text-align: right; }
.sw-bill__late { color: var(--risk); font-weight: 700; }
.sw-bill__kind {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-xs);
  background: var(--ok-bg); color: var(--ok); font-size: var(--t-11); font-weight: 700;
}
.sw-bill__search { width: 220px; max-width: 100%; }
.sw-bill__hero {
  display: flex; flex-direction: column; gap: var(--s-2); background: var(--surface);
  border-radius: var(--r-lg); padding: var(--s-2); box-shadow: var(--shadow-soft); margin: 0 0 var(--s-2);
}
.sw-bill__heromain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.sw-bill__amount { margin-left: auto; font-size: var(--t-24); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sw-bill__flag--late { background: var(--risk-bg); color: var(--risk); }
.sw-bill__track { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sw-bill__stop {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--r-sm);
  background: var(--sunken); color: var(--muted); font-size: var(--t-12); font-weight: 600;
}
.sw-bill__stop.is-done { background: var(--st-done-bg); color: var(--st-done); }
.sw-bill__stop.is-now { outline: 2px solid currentColor; outline-offset: -2px; }
.sw-bill__receipt { margin: 0; display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-size: var(--t-13); font-weight: 600; }
.sw-bill__rejected { margin: 0; color: var(--risk); font-size: var(--t-13); }
.sw-bill__acts { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.sw-bill__lines { width: 100%; border-collapse: collapse; font-size: var(--t-13); }
.sw-bill__lines th { text-align: left; font-size: var(--t-11); color: var(--muted); font-weight: 700; padding: 0 4px 4px; }
.sw-bill__lines th:not(:first-child) { text-align: right; }
.sw-bill__lines td { padding: 4px; border-top: 1px solid var(--hairline); overflow-wrap: anywhere; }
.sw-bill__file { margin: 0 0 var(--s-1); }
.sw-bill__file .sw-file__name { text-align: left; }
.sw-bill__up { cursor: pointer; }
.sw-bill__hist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: var(--t-13); }
.sw-bill__hist li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.sw-bill__hwhat { font-weight: 600; color: var(--text); }
.sw-bill__hnote { flex-basis: 100%; color: var(--body); font-size: var(--t-12); }
.sw-bill__sums { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: 0 0 var(--s-1); font-size: var(--t-13); font-variant-numeric: tabular-nums; }
.sw-bill__sums .sw-cb__k { margin-right: 4px; }
.sw-bill__owed { color: var(--attention); font-weight: 700; }
.sw-bill__kinds { border: 0; margin: 0 0 var(--s-1); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.sw-bill__kinds legend { padding: 0; margin-bottom: 4px; }
.sw-bill__kindopt { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-13); }
.sw-bill__form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); }
.sw-bill__fld { display: flex; flex-direction: column; min-width: 0; }
.sw-bill__fld[hidden] { display: none; }
.sw-bill__fld .sw-input { width: 100%; }
.sw-bill__linesin { width: 100%; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .sw-bill__form { grid-template-columns: minmax(0, 1fr); }
  .sw-bill__amount { margin-left: 0; flex-basis: 100%; }
  .sw-bill__search { width: 100%; }
}

/* M47b: a task's project as a dropdown — in the table like Status, and in Fields. */
.sw-tbl__proj { max-width: 220px; min-width: 120px; text-overflow: ellipsis; }
.sw-tbl__proj:disabled { opacity: 0.7; cursor: not-allowed; }
.sw-meta__proj { max-width: 100%; min-width: 0; }

/* M50 (D251): Fast decisions (Jev) — the Team switch, the report, the chip. */
.sw-jev__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
  padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.sw-jev__what { display: flex; flex-direction: column; min-width: 0; }
.sw-jev__name { font-weight: 600; color: var(--text); }
.sw-jev__row .sw-spend__days { margin-bottom: 0; }
.sw-jev__privacy { padding: var(--s-2) 0 !important; }
.sw-jev__rules { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.sw-jev__rules li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.sw-jev__card { margin-bottom: var(--s-3); }
.sw-jev__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: var(--s-2); }
.sw-jev__title { margin: 0; font-size: var(--t-16); }
.sw-byjev { margin-left: 6px; }

/* ================================================================== M54: at the site
   The strip under the bar while you are at a site (or owe a log), the On site page, and
   Calls. Same materials: paper cards, hairlines, gold only for the one primary action. */
.sw-sitebar { padding: 0 var(--s-2); }
.sw-sitebar[hidden] { display: none; }
.sw-sitebar__link {
  display: flex; align-items: center; gap: var(--s-1);
  margin: var(--s-1) 0 0; padding: var(--s-1) var(--s-2);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); text-decoration: none; font-size: var(--t-14);
}
.sw-sitebar__link .sw-mark, .sw-sitebar__link svg { flex: 0 0 auto; color: var(--gold-ink); }
.sw-sitebar__link > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-sitebar__go { flex: 0 0 auto; color: var(--gold-ink); font-weight: 600; }
.sw-sitebar__link--ask { border-color: var(--gold-ink); }

.sw-site { margin: 0 0 var(--s-2); padding: var(--s-2); }
.sw-site__head { display: flex; gap: var(--s-1); align-items: flex-start; margin-bottom: var(--s-1); }
.sw-site__pin { color: var(--gold-ink); margin-top: 3px; }
.sw-site__name { margin: 0; font-size: var(--t-20); line-height: 1.25; }
.sw-site__h2 { margin: 0 0 var(--s-0); font-size: var(--t-16); }
.sw-site__h { margin: var(--s-2) 0 var(--s-0); font-size: var(--t-13); color: var(--muted); font-weight: 600; }
.sw-site__sub, .sw-site__help { margin: var(--s-0) 0; color: var(--muted); font-size: var(--t-13); }
.sw-site__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-0); margin: var(--s-1) 0; }
.sw-site__tasks, .sw-site__sites { list-style: none; margin: 0; padding: 0; }
.sw-site__task a {
  display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1) 0;
  border-bottom: 1px solid var(--hairline); color: var(--text); text-decoration: none; min-height: 44px;
}
.sw-site__title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sw-site__meta { flex: 0 0 auto; color: var(--muted); font-size: var(--t-12); }
.sw-site__meta--bad { color: var(--text); font-weight: 700; }
.sw-site__sites li { display: flex; flex-wrap: wrap; gap: var(--s-0) var(--s-1); align-items: baseline;
  padding: var(--s-1) 0; border-bottom: 1px solid var(--hairline); }
.sw-site__acts { display: flex; flex-wrap: wrap; gap: var(--s-1); justify-content: flex-end; margin-top: var(--s-2); }
.sw-site__acts .sw-button { min-height: 44px; }
.sw-site__types { display: flex; flex-wrap: wrap; gap: var(--s-0); margin: var(--s-1) 0; }
.sw-site__types .sw-chip { cursor: pointer; min-height: 36px; }
.sw-site__types input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-site__types .sw-chip:has(input:checked), .sw-site__types .sw-chip.is-on {
  background: var(--gold-quiet); outline: 1px solid var(--gold-ink); }
.sw-site__types .sw-chip:has(input:focus-visible) { outline: 2px solid var(--gold-ink); }
.sw-site__log .sw-label { display: block; margin-top: var(--s-1); }
.sw-site__log .sw-textarea, .sw-site__log .sw-input { width: 100%; }
.sw-site__manual { margin-top: var(--s-2); }
.sw-site__manual summary { cursor: pointer; color: var(--gold-ink); font-size: var(--t-14); }
.sw-site__draft { white-space: pre-wrap; font: inherit; font-size: var(--t-14); background: var(--sunken);
  padding: var(--s-1); border-radius: var(--r-sm); margin-top: var(--s-1); }

/* Maya's number: in the bar (the number shows from tablet width up; the phone mark always). */
.sw-maya-call { text-decoration: none; }
.sw-maya-call svg, .sw-maya-call .sw-mark { color: var(--gold-ink); }
@media (max-width: 760px) { .sw-maya-call__num { display: none; } }
.sw-signin__phone-open { align-self: center; }

.sw-calls { list-style: none; margin: 0; padding: 0; }
.sw-calls__row { margin: 0 0 var(--s-1); padding: var(--s-2); }
.sw-calls__head { display: flex; gap: var(--s-1); align-items: flex-start; }
.sw-calls__mark { color: var(--muted); margin-top: 3px; }
.sw-calls__mark.is-in { color: var(--gold-ink); }
.sw-calls__who, .sw-calls__when, .sw-calls__sum, .sw-calls__items, .sw-calls__more { margin: 0; }
.sw-calls__when { color: var(--muted); font-size: var(--t-13); }
.sw-calls__sum { margin-top: var(--s-1); }
.sw-calls__items { display: flex; flex-wrap: wrap; gap: var(--s-0); margin-top: var(--s-1); }
.sw-calls__items .sw-chip { text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-calls__more { margin-top: var(--s-1); font-size: var(--t-13); }
.sw-calls__filter { margin-bottom: var(--s-2); }
.sw-calls__filter .sw-chip { text-decoration: none; color: var(--text); }

/* M54b: a voice note that did not arrive stays, with a way to send it again. */
.sw-maya__again { display: block; margin-top: var(--s-1); min-height: 40px; }

/* D269: a task's sub-contractor links to their contact page. */
.sw-with__name { color: var(--text); text-decoration: none; }
.sw-with__name:hover { text-decoration: underline; }
.sw-cb__suggest { color: var(--text); }

/* ================================================================ B1: project fields (D271)
   The Details card on a project, Settings › Project fields, and the Projects filters/table. */
.sw-pcard { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3) var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm); }
.sw-pcard__group { min-width: 0; }
/* D367: inside a card the Details grid is the card's body, not a second box in it. */
.sw-section__body > .sw-pcard { border: 0; background: transparent; border-radius: 0; padding: var(--s-3) var(--s-2) var(--s-3); }
.sw-pcard__g { margin: 0 0 6px; font-size: var(--t-13); font-weight: 700; color: var(--muted); }
.sw-pcard__rows { margin: 0; display: grid; gap: 2px; }
.sw-pcard__row { display: grid; grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); gap: 10px; align-items: center; min-height: 36px; }
.sw-pcard__row dt { font-size: var(--t-13); color: var(--muted); }
.sw-pcard__row dd { margin: 0; min-width: 0; }
.sw-pcard__val { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 32px; font-size: var(--t-14); color: var(--text); overflow-wrap: anywhere; }
.sw-pcard__btn { border: 0; background: none; padding: 0 6px; margin-left: -6px; border-radius: var(--r-sm); font: inherit; font-size: var(--t-14); text-align: left; cursor: pointer; }
.sw-pcard__btn:hover { background: var(--sunken); }
.sw-pcard__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-pcard__val.is-derived { color: var(--body); }
.sw-pcard__none { color: var(--muted); }
.sw-pcard__link { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.sw-pcard__pen { width: 32px; height: 32px; }
.sw-pcard__acts { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.sw-pcard__pick { display: grid; gap: 2px; margin-top: 6px; max-height: 240px; overflow: auto; }
.sw-pcard__opt { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: var(--r-sm); font: inherit; font-size: var(--t-14); color: var(--text); cursor: pointer; min-height: 40px; }
.sw-pcard__opt:hover, .sw-pcard__opt:focus-visible { background: var(--sunken); }
.sw-fdef { display: flex; align-items: center; gap: var(--s-2); padding: 10px 14px; border-bottom: 1px solid var(--hairline); }
.sw-fdef:last-child { border-bottom: 0; }
.sw-fdef.is-off { opacity: .75; }
.sw-fdef__main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.sw-fdef__meta { font-size: var(--t-13); color: var(--muted); overflow-wrap: anywhere; }
.sw-fdef__key { font-size: var(--t-13); color: var(--body); }
.sw-fdef__acts { flex: none; display: flex; gap: 6px; }
.sw-fdform { display: grid; gap: var(--s-2); }
.sw-fdf { display: grid; gap: 6px; margin: 0; border: 0; padding: 0; min-width: 0; }
.sw-fdf[hidden] { display: none; }
.sw-fdf__label { font-size: var(--t-13); font-weight: 600; color: var(--text); padding: 0; }
.sw-fdf .sw-input { width: 100%; box-sizing: border-box; }
.sw-fdf textarea.sw-input { padding: var(--s-1); line-height: 1.5; resize: vertical; }
.sw-sheet__foot { display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-2); }
.sw-ptile__facts { margin: 0; font-size: var(--t-13); color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-pfilter { display: inline-flex; }
.sw-input--small { min-height: 36px; font-size: var(--t-13); max-width: 220px; }
.sw-seg__b[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft); }
a.sw-seg__b { display: inline-flex; align-items: center; text-decoration: none; }
.sw-ptable-wrap { margin-top: var(--s-3); overflow-x: auto; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-soft); max-width: 100%; }
.sw-ptable { width: 100%; border-collapse: collapse; font-size: var(--t-13); }
.sw-ptable th, .sw-ptable td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.sw-ptable thead th { font-weight: 700; color: var(--muted); background: var(--surface); }
.sw-ptable tbody th a { color: var(--text); font-weight: 600; text-decoration: none; }
.sw-ptable tbody th a:hover { text-decoration: underline; }
.sw-ptable td a { color: var(--text); text-decoration: underline; }
.sw-ptable__n { text-align: right; font-variant-numeric: tabular-nums; }
.sw-ptable tbody tr:last-child > * { border-bottom: 0; }

/* ================================================================ B5: templates (D273, D274) */
.sw-tshelf { margin-top: var(--s-3); }
.sw-tshelf__h { margin: 0 0 var(--s-2); font-size: var(--t-14); font-weight: 700; color: var(--muted); }
.sw-ttiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-2); }
.sw-ttile { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-soft);
  color: var(--text); text-decoration: none; min-width: 0; }
.sw-ttile:hover, .sw-ttile:focus-visible { box-shadow: var(--shadow-lift); }
.sw-ttile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-ttile__top { display: flex; gap: 6px; align-items: center; }
.sw-ttile__kind, .sw-ttile__draft { font-size: var(--t-13); font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); background: var(--sunken); color: var(--body); }
.sw-ttile__draft { background: var(--attention-bg); color: var(--attention); }
.sw-ttile__name { font-size: var(--t-16, 1rem); font-weight: 700; overflow-wrap: anywhere; }
.sw-ttile__meta { font-size: var(--t-13); color: var(--muted); overflow-wrap: anywhere; }
.sw-tmeta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s-2); }
.sw-chip--attention { background: var(--attention-bg); color: var(--attention); }
.sw-tacts { margin: var(--s-2) 0 var(--s-3); }
.sw-tph { display: inline-block; padding: 0 6px; border-radius: var(--r-xs); background: var(--info-bg); color: var(--text); font-size: .92em; }
.sw-tph::before { content: "{"; color: var(--muted); }
.sw-tph::after { content: "}"; color: var(--muted); }
.sw-ttree { list-style: none; margin: 0; padding: 0; }
.sw-ttree__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px 8px calc(12px + var(--d, 0) * 18px);
  border-bottom: 1px solid var(--hairline); min-height: 40px; }
.sw-ttree__row:last-child { border-bottom: 0; }
.sw-ttree__row.is-phase { background: var(--sunken); }
.sw-ttree__row.is-phase .sw-ttree__t { font-weight: 700; }
.sw-ttree__main { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 220px; min-width: 0; }
.sw-ttree__t { overflow-wrap: anywhere; font-size: var(--t-14); }
.sw-ttree__k { color: var(--muted); display: inline-flex; }
.sw-ttree__g { font-size: var(--t-13); color: var(--muted); font-weight: 600; }
.sw-ttree__meta { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--t-13); color: var(--muted); }
.sw-ttree__role { padding: 1px 8px; border-radius: var(--r-pill); background: var(--info-bg); color: var(--text); font-size: var(--t-13); }
.sw-ttree__role.is-choose { background: var(--attention-bg); color: var(--attention); }
.sw-ttree__edit { margin-left: auto; width: 32px; height: 32px; }
.sw-ttree--pv { max-height: 46vh; overflow: auto; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--hairline); }
.sw-tpv { display: grid; gap: var(--s-1); }
.sw-tpv__sum, .sw-tpv__miss { margin: 0; font-size: var(--t-13); color: var(--body); }
.sw-tpv__miss { color: var(--attention); }
.sw-tdays { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: var(--t-13); color: var(--body); }
.sw-tdays label { display: inline-flex; align-items: center; gap: 6px; }
.sw-tdays .sw-input { width: 70px; min-height: 36px; }
.sw-thist { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: var(--t-14); }
.sw-sat__did { margin: 0; padding-left: 1.2em; font-size: var(--t-13); color: var(--body); display: grid; gap: 4px; }
.sw-sat__flags { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--attention-bg); font-size: var(--t-13); color: var(--text); }
.sw-sat__flags p { margin: 0; }
.sw-sat__flags .sw-button { justify-self: start; }
.sw-sat__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.sw-sat__list { display: grid; gap: 4px; max-height: 50vh; overflow: auto; padding: 4px; border: 1px solid var(--hairline); border-radius: var(--r-sm); }
.sw-sat__row { display: grid; gap: 4px; padding: 6px 6px 6px calc(6px + var(--d, 0) * 14px); border-radius: var(--r-sm); }
.sw-sat__row.is-flagged { background: var(--attention-bg); }
.sw-sat__row .sw-input { width: 100%; box-sizing: border-box; min-height: 38px; }
.sw-sat__row .sw-ttree__role { justify-self: start; }
.sw-sat__why { margin: 0; padding-left: 1.2em; font-size: var(--t-13); color: var(--text); overflow-wrap: anywhere; }
.sw-sat__why mark { background: none; color: var(--attention); font-weight: 600; }
@media (max-width: 560px) { .sw-sat__two { grid-template-columns: 1fr; } }

/* ==================================================================== M56: the viewer (D277)
   A full-screen room for one photo or one plan page. Dark stage so a drawing's white paper
   reads as paper; the bars are the app's own surface so the controls look like Swarm. */
body.has-viewer { overflow: hidden; }
body.has-viewer .sw-toast { z-index: 80; }
.sw-viewer {
  position: fixed; inset: 0; z-index: 70;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-columns: minmax(0, 1fr);
  background: var(--canvas); color: var(--text);
}
.sw-viewer:focus { outline: none; }
.sw-viewer__bar, .sw-viewer__tools {
  display: flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-2); background: var(--surface);
}
.sw-viewer__bar { border-bottom: 1px solid var(--hairline); padding-top: max(var(--s-1), env(safe-area-inset-top)); }
.sw-viewer__tools { border-top: 1px solid var(--hairline); }
.sw-viewer__title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sw-viewer__title > span:first-child {
  font-size: var(--t-14); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-viewer__sub { font-size: var(--t-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-viewer__circle { flex: none; gap: 6px; }
.sw-viewer__pos { font-size: var(--t-13); color: var(--muted); min-width: 5ch; text-align: center; }
.sw-viewer__stage {
  position: relative; overflow: hidden; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--sunken); touch-action: none; user-select: none;
}
.sw-viewer__canvas { position: relative; transform-origin: center center; max-width: 100%; max-height: 100%; min-width: 0; }
.sw-viewer__canvas img {
  display: block; max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px);
  width: auto; height: auto; -webkit-user-drag: none; background: var(--surface);
}
.sw-viewer__ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sw-viewer__loading {
  position: absolute; inset: auto 0 var(--s-3); margin: 0; text-align: center;
  font-size: var(--t-13); color: var(--muted);
}
.sw-viewer.is-circling .sw-viewer__stage { cursor: crosshair; }
.sw-viewer.is-circling .sw-viewer__canvas img { outline: 2px dashed var(--gold); outline-offset: 2px; }

/* The ink: the person's circles are gold (their seal on the question); Maya's marks are
   tape, so the two are never confused. Strokes stay the same width at any zoom. */
.sw-ink__mine, .sw-ink__maya { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.sw-ink__mine { stroke: var(--gold); }
.sw-ink__maya { stroke: var(--tape); stroke-width: 3.5; }
.sw-ink__head { fill: var(--tape); }
.sw-ink__n, .sw-ink__label {
  font: 700 26px var(--font-ui); paint-order: stroke; stroke: var(--surface); stroke-width: 5px;
}
.sw-ink__n { fill: var(--gold-ink); }
.sw-ink__label { fill: var(--text); }
.sw-viewer__ink.is-hidden-maya .sw-ink__maya,
.sw-viewer__ink.is-hidden-maya .sw-ink__label { display: none; }

/* The ask area under the picture. */
.sw-viewer__ask {
  background: var(--surface); border-top: 1px solid var(--hairline);
  padding: var(--s-1) var(--s-2) max(var(--s-2), env(safe-area-inset-bottom));
  max-height: 45vh; overflow-y: auto;
}
.sw-viewer__ask[hidden] { display: none; }
.sw-circle__bar { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.sw-circle__hint { flex: 1 1 180px; margin: 0; font-size: var(--t-13); color: var(--muted); }
.sw-circle__chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.sw-circle__chips .sw-chip { flex: none; font: inherit; font-size: var(--t-13); color: var(--text); cursor: pointer; white-space: nowrap; }
.sw-circle__chips .sw-chip:hover { background: var(--gold-quiet); }
.sw-circle__form { display: flex; align-items: flex-end; gap: 6px; }
.sw-circle__q { flex: 1 1 auto; min-width: 0; resize: none; min-height: 40px; max-height: 120px; font-size: var(--t-16); }
.sw-circle__mic.is-rec { background: var(--tape-quiet); color: var(--text); }
.sw-circle__out { font-size: var(--t-14); line-height: 1.5; }
.sw-circle__out p { margin: 6px 0; }
.sw-circle__wait, .sw-circle__heard { color: var(--muted); font-size: var(--t-13); }
.sw-circle__err { color: var(--danger); }
.sw-circle__answer { background: var(--sunken); border-radius: var(--r-md); padding: 2px var(--s-1); }
.sw-circle__note { font-size: var(--t-13); color: var(--muted); }
.sw-circle__acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.sw-circle__acts .sw-button { gap: 6px; }
.sw-circle__again { text-align: right; }

/* ==================================================================== M56: circle a page (D276)
   A clear layer over the whole app while the person draws; Maya's panel steps back. */
.sw-pagecircle { position: fixed; inset: 0; z-index: 65; cursor: crosshair; touch-action: none; background: var(--gold-quiet); }
.sw-pagecircle__ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sw-pagecircle__bar {
  position: absolute; left: 50%; top: max(var(--s-2), env(safe-area-inset-top)); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s-1);
  background: var(--surface); color: var(--text); border-radius: var(--r-md); box-shadow: var(--shadow-panel);
  padding: 6px 6px 6px var(--s-2); max-width: calc(100vw - var(--s-4)); cursor: default;
}
.sw-pagecircle__bar p { margin: 0; font-size: var(--t-13); }
#maya.is-behind { visibility: hidden; }

/* ==================================================================== M56: feature requests (D279) */
.sw-fr__asked { font-style: italic; color: var(--muted); }

@media (max-width: 640px) {
  .sw-viewer__canvas img { max-height: calc(100dvh - 130px); }
  .sw-viewer__tools { gap: 2px; padding-inline: var(--s-1); }
}
@media (prefers-reduced-motion: reduce) { .sw-viewer__canvas { transition: none; } }

/* ==================================================================== M57: circle a page (D281–D287)
   The pinned circle above Maya's input, her code-built first reply, and the in-chat controls. */
.sw-maya__pin {
  flex: none; display: flex; align-items: center; gap: 6px; margin: 6px var(--s-2) 0; padding: 4px 4px 4px 10px;
  border-radius: var(--r-md); background: var(--gold-quiet); color: var(--text); font-size: var(--t-13); min-width: 0;
}
.sw-maya__pin[hidden] { display: none; }
.sw-maya__pin > .sw-mark { width: 15px; height: 15px; flex: none; color: var(--gold-ink); }
.sw-maya__pin-k { color: var(--muted); flex: none; }
.sw-maya__pin-v { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-maya__pin-more { flex: none; font-size: var(--t-12); color: var(--muted); padding: 1px 6px; border-radius: var(--r-xs); background: var(--surface); }
.sw-maya__pin-rec { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-variant-numeric: tabular-nums; }
.sw-maya__pin-rec[hidden] { display: none; }
.sw-maya__pin-x {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: auto; padding: 0;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer;
}
.sw-maya__pin-x + .sw-maya__pin-x { margin-left: 0; }
.sw-maya__pin-rec:not([hidden]) ~ .sw-maya__pin-x { margin-left: 0; }
.sw-maya__pin-x:hover { background: var(--surface); color: var(--text); }
.sw-maya__pin-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-maya__pin.is-recording [data-pc-talk] { display: none; }

.sw-pcopen { display: flex; flex-direction: column; gap: 8px; }
.sw-pcopen__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-pcopen__chip {
  display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; min-height: 28px; padding: 4px 10px;
  border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow-soft);
  color: var(--text); font-size: var(--t-13); text-decoration: none; min-width: 0;
}
a.sw-pcopen__chip:hover { box-shadow: var(--shadow-lift); }
.sw-pcopen__code { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.sw-pcopen__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.sw-pcopen__sub { flex: none; font-size: var(--t-11); color: var(--muted); }
.sw-pcopen__asks [hidden] { display: none; }

.sw-pcact {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-soft);
}
.sw-pcact__f { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-12); color: var(--muted); }
.sw-pcact__f > span, .sw-pcact__f > label { font-weight: 600; }
.sw-pcact__sel, .sw-pcact .sw-input { width: 100%; min-height: 40px; font-size: var(--t-14); color: var(--text); }
.sw-pcact__date { gap: 6px; }
.sw-pcact__date [hidden] { display: none; }
.sw-pcact__date .sw-button { align-self: flex-start; }
.sw-pcact__none { margin: 0; font-size: var(--t-12); color: var(--muted); }
.sw-pcact__confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--t-13); color: var(--text); }
.sw-pcact__confirm[hidden] { display: none; }
.sw-pcact__said { margin: 0; font-size: var(--t-13); color: var(--ok); }
.sw-pcact__said:empty { display: none; }
.sw-pcact__said.is-bad { color: var(--risk); }

.sw-pcmenu kbd.sw-pcmenu__k {
  margin-left: auto; padding: 1px 6px; border-radius: var(--r-xs); background: var(--sunken);
  font: inherit; font-size: var(--t-11); color: var(--muted);
}
#maya-circle { position: relative; }
#maya-circle .sw-hk { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; white-space: nowrap; z-index: 2; }
.sw-circle-open { gap: 6px; }
.sw-circle-open .sw-mark { width: 17px; height: 17px; }
@media (max-width: 640px) { .sw-circle-open__l { display: none; } }

/* A contractor's circle panel (D286): the ask, nothing else of Maya's. */
#maya.is-guestcircle .sw-maya__ai, #maya.is-guestcircle #maya-new, #maya.is-guestcircle #maya-prefs,
#maya.is-guestcircle #maya-talk, #maya.is-guestcircle #maya-attach, #maya.is-guestcircle #maya-cam,
#maya.is-guestcircle #maya-mic { display: none; }

/* M59 (D291–D294): Maya's knowledge */
.sw-know__bar { display: flex; gap: var(--s-1); align-items: center; margin: var(--s-2) 0; flex-wrap: wrap; }
.sw-know__bar .sw-input { flex: 1 1 200px; min-width: 0; }
.sw-know__list { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: 6px; }
.sw-know__row { display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--hairline);
  border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.sw-know__row:hover { background: var(--sunken); }
.sw-know__row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-know__row.is-deleted { opacity: .7; }
.sw-know__title { font-weight: 600; }
.sw-know__snip { color: var(--muted); font-size: var(--t-13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-know__meta { color: var(--muted); font-size: var(--t-12); }
.sw-know__edit { padding: var(--s-2); display: grid; gap: var(--s-1); margin-bottom: var(--s-3); }
.sw-know__edit p { margin: 0; }
.sw-know__edit .sw-field { display: block; margin-bottom: 4px; }
.sw-know__body { width: 100%; min-height: 220px; font: inherit; line-height: 1.5; }
.sw-know__acts { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.sw-know__rev { display: flex; justify-content: space-between; align-items: center; gap: var(--s-1); padding: 8px 0;
  border-bottom: 1px solid var(--hairline); font-size: var(--t-13); flex-wrap: wrap; }
.sw-know__gap { padding: 8px 12px; border-radius: var(--r-md); background: var(--sunken); font-size: var(--t-13); }

/* ---------------------------------------------------------------- M62 (D300): hold to talk
   A bar that slides down from the top over the header, which shows through it blurred.
   The bars follow whoever is speaking: ink for you, blue for Maya; a slow ripple while she
   thinks. On a phone it spans the width; on a laptop it is a centred card. */
.sw-ptt {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: flex; justify-content: center;
  padding: max(env(safe-area-inset-top), var(--s-1)) var(--s-2) var(--s-3);
  background: color-mix(in oklch, var(--canvas) 55%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid color-mix(in oklch, var(--hairline) 70%, transparent);
  transform: translateY(-105%); opacity: 0;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease;
  pointer-events: none;
}
.sw-ptt.is-in { transform: none; opacity: 1; pointer-events: auto; }
.sw-ptt[hidden] { display: none; }
.sw-ptt__box {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-2);
  width: min(640px, 100%);
  padding: var(--s-2); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-panel);
}
.sw-ptt__wave { display: flex; align-items: center; gap: 4px; height: 44px; width: 64px; }
.sw-ptt__wave i {
  display: block; flex: 1; height: 100%; border-radius: 3px;
  background: var(--text); transform: scaleY(.15); transform-origin: center;
  transition: background-color 160ms ease;
}
.sw-ptt[data-who="maya"] .sw-ptt__wave i { background: var(--ink-blue); }
.sw-ptt__words { min-width: 0; }
.sw-ptt__state { margin: 0; font-weight: 600; font-size: var(--t-14); color: var(--text); }
.sw-ptt__heard { margin: 2px 0 0; font-size: var(--t-13, 13px); color: var(--muted); overflow-wrap: anywhere; }
.sw-ptt__heard:empty, .sw-ptt__line:empty { display: none; }
.sw-ptt__line {
  margin: var(--s-0) 0 0; font-size: var(--t-14); color: var(--body); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.sw-ptt__hint { margin: var(--s-0) 0 0; font-size: var(--t-12); color: var(--faint); }
.sw-ptt__acts { display: flex; align-items: center; gap: var(--s-0); }
html[data-ptt="on"] .main__bar { filter: blur(1px); }
/* the Maya button is held on a phone: no callout, no text selection, no double-tap zoom */
#maya-open { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
@media (max-width: 640px) {
  .sw-ptt { padding-left: var(--s-1); padding-right: var(--s-1); }
  .sw-ptt__box { grid-template-columns: auto 1fr; }
  .sw-ptt__acts { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-ptt { transition: opacity 120ms ease; transform: none; }
}

/* ---------------------------------------------------------------- M62 (D300): Chats with Maya
   Threads on the left, the conversation on the right; on a phone, the list, then a thread. */
.sw-chats {
  display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: var(--s-2);
  min-height: 60vh; align-items: start;
}
.sw-chats__list {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  overflow: hidden; position: sticky; top: 72px; max-height: calc(100vh - 96px); display: flex; flex-direction: column;
}
.sw-chats__search { padding: var(--s-1); border-bottom: 1px solid var(--hairline); }
.sw-chats__search .sw-input { width: 100%; }
.sw-chats__items { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.sw-chats__item {
  display: block; padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--hairline);
  color: inherit; text-decoration: none;
}
.sw-chats__item:hover { background: var(--sunken); }
.sw-chats__item.is-on { background: var(--sunken); box-shadow: inset 3px 0 0 var(--ink-blue); }
.sw-chats__t { display: flex; gap: var(--s-0); align-items: baseline; font-weight: 600; font-size: var(--t-14); color: var(--text); }
.sw-chats__t span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-chats__when { font-weight: 400; font-size: var(--t-12); color: var(--faint); white-space: nowrap; }
.sw-chats__s { margin: 2px 0 0; font-size: var(--t-13, 13px); color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw-chats__more { padding: var(--s-1); text-align: center; }
.sw-chats__pane {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: var(--s-3); min-width: 0;
}
.sw-chats__head { display: flex; gap: var(--s-1); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.sw-chats__head h2 { margin: 0; font-size: var(--t-16); }
.sw-chats__meta { margin: 2px 0 0; font-size: var(--t-12); color: var(--faint); }
.sw-chats__sum {
  margin: var(--s-2) 0; padding: var(--s-1) var(--s-2); border-radius: var(--r-xs);
  background: var(--sunken); font-size: var(--t-14); color: var(--body);
}
.sw-chats__sum p { margin: 0; }
.sw-chats__sum ul { margin: var(--s-0) 0 0; padding-left: 1.2em; }
.sw-chats__log { display: flex; flex-direction: column; gap: var(--s-1); }
.sw-chats__log [data-maya-confirm], .sw-chats__log [data-maya-cancel] { display: none; }
.sw-chats__back { display: none; }
@media (max-width: 760px) {
  .sw-chats { grid-template-columns: 1fr; }
  .sw-chats__list { position: static; max-height: none; }
  .sw-chats.is-thread .sw-chats__list { display: none; }
  .sw-chats:not(.is-thread) .sw-chats__pane { display: none; }
  .sw-chats__back { display: inline-flex; margin-bottom: var(--s-1); }
  .sw-chats__pane { padding: var(--s-2); }
}

/* M62b (D305): the Mac and Windows shortcut sheets */
.sw-keys__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.sw-keys__os { font-size: var(--t-13); }
.sw-keys__list dt.sw-keys__group { grid-column: 1 / -1; margin-top: var(--s-2); font-size: var(--t-12);
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: normal; }
.sw-keys__list dt.sw-keys__group:first-child { margin-top: 0; }
.sw-keys__list dd.sw-keys__group { display: none; }

/* ---------------------------------------------------------------- M62c (D306): what's new */
.sw-obnew { text-align: left; }
.sw-obnew__tag {
  display: inline-block; margin: 0 0 var(--s-1); padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--ink-blue); color: var(--surface); font-size: var(--t-12); font-weight: 700; letter-spacing: .04em;
}
.sw-obnew__wave { display: flex; align-items: center; gap: 5px; height: 40px; width: 84px; margin: 0 0 var(--s-1); }
.sw-obnew__wave i {
  display: block; flex: 1; height: 100%; border-radius: 3px; background: var(--ink-blue);
  transform: scaleY(.3); animation: sw-obnew-talk 1.1s ease-in-out infinite;
}
.sw-obnew__wave i:nth-child(2) { animation-delay: -.15s; } .sw-obnew__wave i:nth-child(3) { animation-delay: -.3s; }
.sw-obnew__wave i:nth-child(4) { animation-delay: -.45s; } .sw-obnew__wave i:nth-child(5) { animation-delay: -.6s; }
.sw-obnew__wave i:nth-child(6) { animation-delay: -.75s; } .sw-obnew__wave i:nth-child(7) { animation-delay: -.9s; }
@keyframes sw-obnew-talk { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.sw-obnew__other { margin: var(--s-1) 0 0; font-size: var(--t-13); color: var(--muted); }
.sw-obnew kbd {
  font-family: var(--font-mono); font-size: var(--t-11); font-weight: 700; padding: 1px 5px;
  border: 1px solid var(--hairline); border-radius: var(--r-xs); background: var(--sunken);
}
@media (prefers-reduced-motion: reduce) { .sw-obnew__wave i { animation: none; transform: scaleY(.55); } }

/* Google's Picker positions itself from the top of the document, so on a scrolled page it opened
   above the fold behind a grey sheet that also stopped scrolling (Chall, 2 Oct). Pin it to the
   viewport instead. */
.picker-dialog-bg { position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; z-index: 2000 !important; }
.picker-dialog { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%);
  max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); z-index: 2001 !important; }

/* D385: the sheet shown non-modal while Google's Picker is over it — stays where it was, under the Picker. */
.sw-modal[data-picker-held] { position: fixed; inset: 0; margin: auto; z-index: 1500; height: fit-content; }

/* D318 — the Reminders page */
.sw-rem__bar { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: center; margin: 0 0 var(--s-3); }
.sw-rem__filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sw-rem__flabel { font-size: var(--t-12, 12px); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.sw-rem__search { margin-left: auto; min-width: 200px; }
.sw-rem__day { margin: 0 0 var(--s-3); }
.sw-rem__dayh { display: flex; align-items: center; gap: var(--s-1); font-size: var(--t-14); font-weight: 700; margin: 0 0 var(--s-1); }
.sw-rem__list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm); }
.sw-rem__row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; padding: 10px var(--s-2); border-bottom: 1px solid var(--hairline); }
.sw-rem__row:last-child { border-bottom: 0; }
.sw-rem__time { font-variant-numeric: tabular-nums; font-weight: 600; display: flex; flex-direction: column; }
.sw-rem__missed { font-size: var(--t-12, 12px); font-weight: 600; color: var(--risk); }
.sw-rem__body { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.sw-rem__what { font-weight: 600; overflow-wrap: anywhere; }
.sw-rem__who { flex-basis: 100%; font-size: var(--t-12, 12px); color: var(--muted); }
.sw-rem__acts { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.sw-rem__snooze { width: auto; font-size: var(--t-13); padding-top: 4px; padding-bottom: 4px; }
.sw-rem__row.is-past .sw-rem__time { color: var(--risk); }
.sw-rem__row.is-done .sw-rem__what { text-decoration: line-through; color: var(--muted); }
.sw-rem__when { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
@media (max-width: 640px) {
  .sw-rem__row { grid-template-columns: 72px minmax(0, 1fr); }
  .sw-rem__acts { grid-column: 1 / -1; justify-content: flex-start; }
  .sw-rem__search { margin-left: 0; width: 100%; }
}

/* D320 — dependencies you can add and remove */
.sw-depends__row { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.sw-depends__x { width: 24px; height: 24px; }
.sw-depends__add { margin-left: 4px; }
.sw-dep__opt { width: 100%; text-align: left; border: 0; background: none; padding: 8px; border-radius: var(--r-sm); cursor: pointer; font: inherit; }
.sw-dep__opt:hover { background: var(--sunken); }
.sw-tbl__deps .sw-add { margin-left: 4px; }

/* D324: keep me signed in */
.sw-signin__remember { display: flex; align-items: center; gap: var(--s-1, 6px); font-size: 14px;
  color: var(--ink-2, inherit); margin: 0 0 var(--s-2, 10px); cursor: pointer; }
.sw-signin__remember input { width: 18px; height: 18px; accent-color: var(--accent, #2f6f4f); }

/* D328: the With filter */
.sw-dd__hint { margin: 2px 8px 6px; font-size: var(--t-11); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sw-dd__n--quiet { margin-left: auto; background: var(--sunken); color: var(--muted); font-weight: 600; }

/* D328: contacts — an Edit button in the header and on each row; Primary / Secondary numbers with a WhatsApp tick */
.sw-cb__editbtn { flex: 0 0 auto; gap: 6px; }
.sw-cb__item { display: flex; align-items: center; gap: var(--s-1); border-bottom: 1px solid var(--hairline); padding-right: var(--s-2); }
.sw-cb__item:last-child { border-bottom: 0; }
.sw-cb__item:hover { background: var(--sunken); }
.sw-cb__item .sw-cb__row { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
.sw-cb__item .sw-cb__row:hover { background: transparent; }
.sw-cb__rowedit { flex: 0 0 auto; gap: 4px; }
.sw-cb__phone { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.sw-cb__wa { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-12); font-weight: 600; color: var(--ok); }
.sw-cb__wa .sw-mark { flex: 0 0 auto; }
.sw-cb__wa .sw-link { font-weight: 500; margin-left: 4px; }
.sw-cb__wa--list { padding: 0 6px; min-height: 20px; border-radius: var(--r-sm); background: var(--ok-bg); }
.sw-cb__phones .sw-cb__ph { align-items: flex-start; }
.sw-cb__slot { flex: 0 0 96px; padding-top: 1px; font-weight: 600; }
.sw-cb__phmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-cb__phones { display: flex; flex-direction: column; gap: var(--s-1); width: 100%; }
.sw-cb__phrow { padding: var(--s-1); border-radius: var(--r-sm); background: var(--sunken); }
.sw-cb__phlab { flex: 0 0 100%; font-size: var(--t-12); font-weight: 600; color: var(--muted); }
.sw-cb__watick { min-height: 36px; color: var(--text); }
.sw-cb__watick input { width: 18px; height: 18px; accent-color: var(--ok); }
@media (max-width: 820px) {
  .sw-cb__rowedit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sw-cb__item { padding-right: var(--s-1); }
}

/* D328: bills — filters (vendor, project, client, card, date, with a photo), the bill's copy
   and its description in the table, the period's totals, and the export sheet. */
.sw-billf { flex-wrap: wrap; }
.sw-billf__menu { max-height: min(60vh, 420px); overflow-y: auto; }
.sw-billf__photo { display: inline-flex; align-items: center; gap: 6px; height: 32px; border-radius: var(--r-pill);
  padding: 0 12px; font: inherit; font-size: var(--t-13); color: var(--body); cursor: pointer; }
.sw-billf__photo.is-on { background: color-mix(in oklch, var(--ink-blue) 10%, var(--surface)); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--ink-blue); }
.sw-billf__custom { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-1) 6px 4px;
  margin-top: 4px; border-top: 1px solid var(--hairline); }
.sw-billf__k { font-size: var(--t-12); color: var(--muted); }
.sw-billf__range { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.sw-billf__range > * { flex: 1 1 130px; min-width: 0; }
.sw-billf__custom .sw-button { align-self: flex-start; }
.sw-billf__presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s-2); }
.sw-billf__presets .sw-chip { cursor: pointer; font: inherit; font-size: var(--t-13); padding: 6px 12px; border-radius: var(--r-pill); }
.sw-billf__presets .sw-chip:hover { background: var(--gold-quiet); }
.sw-tbl--billsx th:nth-last-child(2) { text-align: left; }
.sw-tbl--billsx th:nth-child(7) { text-align: right; }
.sw-billx__desc { display: block; font-size: var(--t-12); color: var(--muted); margin-top: 2px;
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-billx__general { color: var(--muted); }
.sw-billx__copycell { width: 1%; white-space: nowrap; }
.sw-billx__copy { display: inline-flex; align-items: center; gap: 4px; border: 0; cursor: pointer;
  background: var(--sunken); color: var(--text); font: inherit; font-size: var(--t-12); font-weight: 600;
  padding: 3px 9px; border-radius: var(--r-pill); }
.sw-billx__copy:hover { background: var(--gold-quiet); }
.sw-billx__copy .sw-mark { width: 13px; height: 13px; }
.sw-billx__sum { display: flex; justify-content: flex-end; gap: var(--s-1); align-items: baseline;
  margin: var(--s-1) 0 0; font-variant-numeric: tabular-nums; }
.sw-billx__fix { margin-left: 6px; font-size: var(--t-12); }
@media (max-width: 760px) {
  .page__head [data-bills-export] { padding-left: 10px; padding-right: 10px; }
  .sw-billx__desc { max-width: 22ch; }
}

/* D328: ⌘K as a conversation — what the words were read as, Save search, Show. */
.sw-cmdk .sw-cmd__input::placeholder { color: var(--muted); opacity: 0.85; }
.sw-cmdk__foot {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-top: 1px solid var(--hairline); background: var(--surface);
}
.sw-cmdk__foot[hidden] { display: none; }
.sw-cmdk__read { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sw-cmdk__readnone { font-size: var(--t-12); color: var(--muted); }
.sw-chip--quiet { background: var(--sunken); color: var(--text); border-color: transparent; font-size: var(--t-12); }
.sw-cmdk__forget {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: var(--r-sm); color: var(--muted); cursor: pointer;
}
.sw-cmdk__forget:hover { background: var(--surface); color: var(--text); }
@media (max-width: 560px) {
  .sw-cmdk__foot { flex-wrap: wrap; }
  .sw-cmdk__read { flex-basis: 100%; }
}

/* D328: Projects page — the count and "+ Add project" together at the right of the title. */
.sw-headacts { display: inline-flex; align-items: center; gap: var(--s-2); }
.sw-headacts .sw-dd { position: relative; }
.sw-dd__menu--right { left: auto; right: 0; }

/* D329: ⌘K's mic — dictation. Quiet until listening; then a soft pulse in the focus colour. */
.sw-cmdk__mic {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-pill); border: 1px solid var(--hairline);
  background: var(--surface); color: var(--muted); cursor: pointer;
}
.sw-cmdk__mic:hover { color: var(--text); background: var(--sunken); }
.sw-cmdk__mic:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-cmdk__mic.is-on { color: var(--on-gold); background: var(--gold); border-color: var(--gold); animation: sw-mic-pulse 1.4s ease-out infinite; }
@keyframes sw-mic-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--gold) 55%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in oklch, var(--gold) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .sw-cmdk__mic.is-on { animation: none; } }

/* D330: mail
   The person's own mailbox: folders · list · reading pane on a desk; list → message on a
   phone. Soft shapes (D095): cards lift, controls are fills, one gold action per screen —
   on the reading pane that is the card's Add, so "Add to Swarm" there is secondary. */
.sw-mail__head { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.sw-mail__who { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); color: var(--muted); }
/* D426: the address opens "Your Gmail" (status, Reconnect, Disconnect) — the Mailboxes page is retired. */
button.sw-mail__who { background: none; border: 0; border-radius: var(--r-sm); padding: 6px 8px; margin: -6px 0;
  font: inherit; font-size: var(--t-13); color: var(--muted); cursor: pointer; min-height: 32px; }
button.sw-mail__who:hover { color: var(--text); background: var(--sunken); }
button.sw-mail__who:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-mail__acct { margin: 0 0 var(--s-3); display: block; }
.sw-mail__acct .sw-meta__row { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: var(--s-2); }
.sw-mail__acct dd { overflow-wrap: anywhere; }
button.sw-mail__who { text-align: left; }

.sw-mail {
  display: grid; grid-template-columns: 200px minmax(280px, 380px) minmax(0, 1fr); gap: var(--s-2);
  align-items: start; min-height: 60vh;
}
.sw-mail__side { position: sticky; top: 72px; }
.sw-mail__folders { display: flex; flex-direction: column; gap: 2px; }
.sw-mail__folder {
  display: flex; align-items: center; gap: var(--s-1); padding: 6px 12px; border-radius: var(--r-sm);
  color: var(--body); text-decoration: none; font-size: var(--t-14);
}
.sw-mail__folder:hover { background: var(--sunken); color: var(--text); }
.sw-mail__folder.is-on { background: var(--sunken); color: var(--text); font-weight: 600; }
.sw-mail__fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-mail__fn { font-size: var(--t-12); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.sw-mail__fhead {
  margin: var(--s-2) 12px 4px; font-size: var(--t-11); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--faint);
}
.sw-mail__fselect { display: none; }
.sw-mail__list, .sw-mail__pane {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); min-width: 0;
}
.sw-mail__list {
  position: sticky; top: 72px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; overflow: hidden;
}
.sw-mail__search { padding: var(--s-1); border-bottom: 1px solid var(--hairline); }
.sw-mail__search .sw-input { width: 100%; }
.sw-mail__listbody { overflow-y: auto; }
.sw-mail__rows { list-style: none; margin: 0; padding: 0; }
.sw-mail__row {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; font: inherit;
  padding: 10px var(--s-2); border: 0; border-bottom: 1px solid var(--hairline); background: transparent;
  color: var(--body); cursor: pointer;
}
.sw-mail__row:hover { background: var(--sunken); }
.sw-mail__row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sw-mail__row.is-on { background: var(--info-bg); }
.sw-mail__rtop { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sw-mail__from {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--t-14); color: var(--text);
}
.sw-mail__count { font-size: var(--t-12); color: var(--muted); font-variant-numeric: tabular-nums; }
.sw-mail__star, .sw-mail__clip { display: inline-flex; color: var(--muted); }
.sw-mail__date { font-size: var(--t-12); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sw-mail__subj { font-size: var(--t-13); color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-mail__snip {
  font-size: var(--t-13); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-mail__row.is-unread .sw-mail__from, .sw-mail__row.is-unread .sw-mail__subj { font-weight: 700; color: var(--text); }
.sw-mail__row.is-unread .sw-mail__date { color: var(--text); font-weight: 600; }
.sw-mail__more { padding: var(--s-1); text-align: center; }
.sw-mail__pane { padding: var(--s-2) var(--s-3) var(--s-3); min-height: 60vh; }
.sw-mail__none { text-align: center; color: var(--muted); padding: var(--s-5) var(--s-2); }
.sw-mail__none .sw-mark { width: 28px; height: 28px; color: var(--faint); }
.sw-mail__none p { margin: var(--s-1) auto 0; max-width: 46ch; }
.sw-mail__hint { font-size: var(--t-13); color: var(--muted); }
.sw-mail__loading { color: var(--muted); font-size: var(--t-14); padding: var(--s-3) 0; }
.sw-mail__rhead { display: flex; align-items: flex-start; gap: var(--s-1); flex-wrap: wrap; }
.sw-mail__rsubj { flex: 1 1 260px; min-width: 0; margin: 4px 0 0; font-size: var(--t-20); line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.sw-mail__back { display: none; }
.sw-mail__backmark { transform: rotate(180deg); }
.sw-mail__made {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-0) var(--s-1);
  margin: var(--s-1) 0 0; padding: var(--s-1) 12px; border-radius: var(--r-sm); background: var(--ok-bg);
}
.sw-mail__madeh { font-size: var(--t-12); font-weight: 600; color: var(--ok); }
.sw-mail__msgs { display: flex; flex-direction: column; margin-top: var(--s-2); }
.sw-mail__msg { border-top: 1px solid var(--hairline); }
.sw-mail__msg:first-child { border-top: 0; }
.sw-mail__mhead {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 0; border: 0;
  background: transparent; font: inherit; text-align: left; color: var(--body); cursor: pointer;
}
.sw-mail__mhead:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
.sw-mail__avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--info-bg); color: var(--ink-blue); font-weight: 700; font-size: var(--t-12);
}
.sw-mail__mwho { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-1); align-items: baseline; }
.sw-mail__mfrom { font-weight: 700; color: var(--text); font-size: var(--t-14); }
.sw-mail__maddr { font-size: var(--t-12); color: var(--muted); }
.sw-mail__mto {
  flex-basis: 100%; font-size: var(--t-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-mail__mdate { flex: none; font-size: var(--t-12); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sw-mail__mbody { display: none; padding: 0 0 var(--s-2) 44px; }
.sw-mail__msg.is-open .sw-mail__mbody { display: block; }
.sw-mail__imgs {
  display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; margin-bottom: var(--s-1);
  padding: 6px 12px; border-radius: var(--r-sm); background: var(--sunken); font-size: var(--t-13); color: var(--body);
}
.sw-mail__imgs span { flex: 1 1 220px; }
/* The email's own page: white whatever the theme, because mail is written for white. */
.sw-mail__paper { background: #fff; border-radius: var(--r-sm); padding: var(--s-1); }
.sw-mail__frame { display: block; width: 100%; height: 120px; border: 0; background: #fff; }
.sw-mail__atts { list-style: none; margin: var(--s-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.sw-mail__att {
  display: inline-flex; align-items: center; gap: 6px; max-width: 280px; padding: 6px 12px; font: inherit;
  font-size: var(--t-13); border: 0; border-radius: var(--r-sm); background: var(--sunken); color: var(--text); cursor: pointer;
}
.sw-mail__att:hover { background: var(--hairline); }
.sw-mail__att:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-mail__attn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-mail__atts-size { color: var(--muted); font-size: var(--t-12); white-space: nowrap; }
.sw-mail__connect {
  max-width: 560px; margin: var(--s-4) auto; padding: var(--s-4) var(--s-3); text-align: center;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
}
.sw-mail__connect-mark .sw-mark { width: 32px; height: 32px; color: var(--muted); }
.sw-mail__connect-h { margin: var(--s-1) 0 0; font-size: var(--t-20); color: var(--text); }
.sw-mail__connect-p { margin: var(--s-1) auto var(--s-3); max-width: 48ch; color: var(--body); font-size: var(--t-14); }

/* Select → Add to Swarm: the floating button (phones and touch) and the menu. */
.sw-mail__fab {
  position: fixed; z-index: 65; display: inline-flex; align-items: center; gap: 6px; width: 150px;
  justify-content: center; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-pill);
  background: var(--solid-cta); color: var(--solid-cta-ink); font: inherit; font-size: var(--t-13); font-weight: 600;
  box-shadow: var(--shadow-lift); cursor: pointer;
}
.sw-mail__fab[hidden] { display: none; }
.sw-mail__fab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-mail__menu {
  position: fixed; z-index: 66; min-width: 200px; padding: 6px; background: var(--surface);
  border-radius: var(--r-md); box-shadow: var(--shadow-panel);
}
.sw-mail__menuh { padding: 4px 8px 6px; font-size: var(--t-12); color: var(--muted); }
.sw-mail__mi {
  display: flex; align-items: center; gap: var(--s-1); width: 100%; padding: 8px; border: 0; border-radius: var(--r-sm);
  background: transparent; font: inherit; font-size: var(--t-14); color: var(--text); text-align: left; cursor: pointer;
}
.sw-mail__mi:hover, .sw-mail__mi:focus-visible { background: var(--sunken); outline: 0; }

/* The card: prefilled from the words picked, with place, person, dates and priority. */
.sw-mailadd { position: fixed; inset: 0; z-index: 70; }
.sw-mailadd[hidden] { display: none; }
.sw-mailadd__scrim { position: absolute; inset: 0; background: oklch(22% 0.015 265 / 0.22); }
.sw-mailadd__card {
  position: absolute; left: 50%; top: 10vh; transform: translateX(-50%); width: min(640px, calc(100vw - 32px));
  max-height: 84vh; overflow-y: auto; background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-panel); padding: var(--s-2);
}
.sw-mailadd__title {
  width: 100%; border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: var(--t-20); font-weight: 600; padding: 2px 0 6px;
}
.sw-mailadd__title:focus-visible { box-shadow: inset 0 -2px 0 var(--focus); }
.sw-mailadd__desc {
  width: 100%; border: 0; outline: 0; resize: vertical; background: var(--sunken); border-radius: var(--r-sm);
  color: var(--text); font: inherit; font-size: var(--t-14); padding: var(--s-1);
}
.sw-mailadd__desc:focus-visible { background: var(--surface); box-shadow: 0 0 0 2px var(--focus); }
.sw-mailadd__src {
  display: flex; align-items: center; gap: 6px; margin: var(--s-1) 0; font-size: var(--t-13); color: var(--muted);
}
.sw-mailadd__src span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-mailadd__src b { color: var(--body); font-weight: 600; }
.sw-mailadd__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-2); }
.sw-mailadd__f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sw-mailadd__f--wide { grid-column: 1 / -1; }
.sw-mailadd__l { font-size: var(--t-12); font-weight: 600; color: var(--muted); }
.sw-mailadd__ctl { width: 100%; min-width: 0; }
button.sw-mailadd__ctl {
  display: flex; align-items: center; gap: var(--s-1); min-height: 36px; padding: 0 12px; border: 0;
  border-radius: var(--r-sm); background: var(--sunken); color: var(--text); font: inherit; font-size: var(--t-14);
  text-align: left; cursor: pointer;
}
button.sw-mailadd__ctl span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.sw-mailadd__ctl:hover { background: var(--hairline); }
button.sw-mailadd__ctl:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-mailadd__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-1); margin-top: var(--s-2); }
.sw-mailadd__note { flex: 1; font-size: var(--t-13); color: var(--muted); }
.sw-mailadd__note.is-bad { color: var(--risk); }
@media (pointer: coarse) {
  button.sw-mailadd__ctl, .sw-mail__fab, .sw-mail__mi { min-height: 44px; }
}

@media (max-width: 1100px) {
  .sw-mail { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
  .sw-mail__side { grid-column: 1 / -1; position: static; }
  .sw-mail__folders { display: none; }
  .sw-mail__fselect { display: block; max-width: 320px; }
  .sw-mail__fselect .sw-select { width: 100%; }
}
@media (max-width: 760px) {
  .sw-mail { grid-template-columns: minmax(0, 1fr); }
  .sw-mail__list { position: static; max-height: none; }
  .sw-mail.is-reading .sw-mail__side, .sw-mail.is-reading .sw-mail__list { display: none; }
  .sw-mail:not(.is-reading) .sw-mail__pane { display: none; }
  .sw-mail__back { display: inline-flex; }
  .sw-mail__pane { padding: var(--s-2); }
  .sw-mail__mbody { padding-left: 0; }
  .sw-mail__rsubj { flex-basis: 100%; order: 2; font-size: var(--t-18); }
  .sw-mail__rhead > [data-mail-add-email] { margin-left: auto; }
  .sw-mailadd__card { top: auto; bottom: 0; transform: translateX(-50%); border-radius: var(--r-xl) var(--r-xl) 0 0; width: 100vw; max-height: 90vh; }
  .sw-mailadd__grid { grid-template-columns: minmax(0, 1fr); }
}

/* D331: Follow up by call */
.sw-fu__list { margin: 0 0 var(--s-3); padding-left: 18px; color: var(--muted); font-size: var(--t-13); max-height: 160px; overflow: auto; }
.sw-fu__list li + li { margin-top: 2px; }

/* ---------------------------------------------------------------- D332: scheduled calls, via Maya */
.sw-fu__when { border: 0; padding: 0; margin: 0 0 var(--s-2); }
.sw-fu__when > legend { padding: 0; margin-bottom: var(--s-1); }
.sw-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-md); background: var(--sunken); }
.sw-seg__opt { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s-2);
  border-radius: calc(var(--r-md) - 2px); cursor: pointer; font-size: var(--t-13); color: var(--text); }
.sw-seg__opt:has(input:checked) { background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .08); font-weight: 600; }
.sw-seg__opt input { accent-color: var(--gold-ink); margin: 0; }
.sw-callwhen { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-end; margin-top: var(--s-2); }
.sw-callwhen__f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sw-callwhen__f .sw-input { min-height: 40px; }
.sw-callwhen__hint { flex-basis: 100%; margin: 0; color: var(--muted); font-size: var(--t-12); }
.sw-maya__sched { margin-top: var(--s-2); }
.sw-maya__sched .sw-callwhen { margin-top: 0; }
.sw-calls__row--sched { background: var(--gold-quiet); }
.sw-calls__mark.is-sched { color: var(--gold-ink); }
.sw-calls__at { font-weight: 600; color: var(--text); }
.sw-calls__acts { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.sw-calls__row.is-hit { box-shadow: inset 0 0 0 2px var(--gold-ink); outline: none; }
.sw-calls__talk { margin-top: var(--s-2); font-size: var(--t-13); }
.sw-calls__talk summary { cursor: pointer; color: var(--muted); }
.sw-calls__lines { margin: var(--s-1) 0 0; padding-left: 18px; max-height: 320px; overflow: auto; }
.sw-calls__lines li + li { margin-top: 4px; }
button.sw-bymaya--src { border: 0; cursor: pointer; text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 2px; transition: text-decoration-color .15s; }
button.sw-bymaya--src:hover, button.sw-bymaya--src:focus-visible { text-decoration-color: currentColor; }
.sw-src__said { margin: 0 0 var(--s-2); padding: var(--s-2); border-radius: var(--r-md); background: var(--sunken);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.sw-src__said--maya { background: var(--gold-quiet); }
.sw-chats__log .sw-maya__msg.is-hit .sw-maya__bubble, .sw-chats__log .sw-maya__msg.is-hit .sw-maya__said {
  box-shadow: 0 0 0 2px var(--gold-ink); }
@media (max-width: 520px) {
  .sw-callwhen__f { flex: 1 1 140px; }
  .sw-seg { display: flex; } .sw-seg__opt { flex: 1; justify-content: center; }
}

/* ================================================================= D334
   The work table: Title pinned beside the tick and star, Recent comments, and the same
   columns on a phone as on a desk (it scrolls sideways under the pinned part instead of
   dropping columns — M4's phone rule was about the old eight-column order). */
.sw-tbl--work th.sw-th--pin { cursor: default; }
.sw-tbl--work td.sw-tbl__title { min-width: 240px; max-width: 360px; white-space: normal; }
.sw-tbl--work .sw-tbl__tt { min-width: 0; }
.sw-tbl__rc { min-width: 220px; max-width: 300px; white-space: normal; }
.sw-tbl__rcb {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--body); text-decoration: none; font-size: var(--t-12); line-height: 1.35;
}
.sw-tbl__rcb:hover { text-decoration: underline; }
.sw-tbl__rcby { display: block; margin-top: 2px; font-size: var(--t-11); color: var(--muted); white-space: nowrap; }
@media (max-width: 820px) {
  .sw-tbl--work th:nth-child(n), .sw-tbl--work td:nth-child(n),
  .sw-tbl--work .sw-tbl__where, .sw-tbl--work .sw-tbl__who { display: table-cell; }
  .sw-tbl--work td.sw-tbl__title { min-width: 150px; max-width: 190px; }
  .sw-tbl--work .sw-tbl__sel { width: auto; }
  .sw-tbl--work .sw-tbl__sel .sw-grip { display: none; }
}

/* D334: the Projects table wears the work table's clothes; the name is pinned. */
.sw-tbl--proj td, .sw-tbl--proj th { white-space: nowrap; }
.sw-tbl--proj td.sw-tbl__title { min-width: 200px; max-width: 320px; white-space: normal; }
.sw-tbl--proj .sw-th__sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.sw-tbl--proj .sw-th__sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sw-tbl--proj .sw-th__sort.is-on .sw-mark { opacity: 1; }
.sw-tbl--proj .sw-th__sort .sw-mark { opacity: 0.35; }
.sw-tbl--proj .is-late { color: var(--risk); font-weight: 600; }
.sw-tbl--proj .sw-ptbar { display: inline-block; width: 56px; height: 5px; margin-left: 6px; vertical-align: middle;
  border-radius: 3px; background: var(--sunken); overflow: hidden; }
.sw-tbl--proj .sw-ptbar span { display: block; height: 100%; background: var(--st-done); }
@media (max-width: 820px) {
  .sw-tbl--proj th:nth-child(n), .sw-tbl--proj td:nth-child(n), .sw-tbl--proj .sw-tbl__where { display: table-cell; }
  .sw-tbl--proj td.sw-tbl__title { min-width: 150px; max-width: 190px; }
}

/* D334: 1d · 7d · 15d · 1m, then a day. */
.sw-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
.sw-quick__b {
  min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-13); font-weight: 600; cursor: pointer;
}
.sw-quick__b:hover { background: var(--sunken); }
.sw-quick__b.is-on { border-color: var(--ink-blue); background: color-mix(in oklch, var(--ink-blue) 9%, var(--surface)); }
.sw-quick__b:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-quick input[type="date"] { min-height: 30px; padding: 2px 8px; width: auto; }
.sw-tbl--proj .sw-th__sort .sw-mark { transform: rotate(90deg); }
.sw-tbl--proj .sw-th__sort .sw-mark.sw-th__left { transform: rotate(-90deg); }
.sw-tbl--proj td a { color: var(--text); text-decoration: none; }
.sw-tbl--proj td a:hover { text-decoration: underline; }
.sw-tbl--proj td.sw-tbl__title a { font-weight: 600; }

/* ============================================================ D335: the phone's tab bar
   Arvind, 5 Oct: on a phone the rail becomes an Apple-style bar at the bottom — four tabs
   (Attention, Work, Spaces, More), icon over name, and a raised round button in the middle
   whose action follows the tab. The middle button is the screen's primary action, so it is
   gold (the Seal Rule's second gold thing); a lit tab is ink, not gold. Drawn by
   screens/tabbar.js; nothing here applies above 760px. */
.sw-tabbar, .sw-fan, .sw-cmdk__x, .sw-cmd-open__s { display: none; }
@media (max-width: 760px) {
  .rail, .rail__scrim, #rail-open, #maya-call, #zen-toggle { display: none !important; }
  /* D341 (5 Oct): the bar sat on the screen's bottom edge, where a tap is iOS's home gesture
     (Siri, the app switcher). It rises by --tb-lift above the inset — at least 12px when the
     inset is 0 (Safari with its own toolbar), 8px over a home indicator. Everything that sits
     above the bar (page padding, toasts, the fan) moves by the same --tb-lift. */
  :root { --tb-lift: max(12px, calc(env(safe-area-inset-bottom) + 8px)); }
  .main { padding-bottom: calc(96px + var(--tb-lift)); }

  .sw-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 76px repeat(2, minmax(0, 1fr));
    align-items: end; padding: 6px 4px calc(6px + var(--tb-lift));
    background: color-mix(in oklch, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 -1px 0 var(--hairline);
    transition: transform var(--d-panel, 200ms) var(--e, ease);
  }
  .sw-tabbar--guest { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html[data-kb] .sw-tabbar, html[data-maya="open"] .sw-tabbar, body.has-qt .sw-tabbar,
  html:has(#cmd:not([hidden])) .sw-tabbar { transform: translateY(130%); }
  .sw-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 48px; padding: 2px 0 0; border: 0; border-radius: var(--r-md); background: none;
    color: var(--muted); font: inherit; font-size: var(--t-11); font-weight: 600; letter-spacing: 0.01em;
    text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .sw-tab[aria-current="page"] { color: var(--text); }
  .sw-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  .sw-tab__i { position: relative; display: inline-flex; }
  .sw-tab__i .sw-mark { width: 24px; height: 24px; }
  .sw-tab[aria-current="page"] .sw-tab__i .sw-mark { stroke-width: 2; }
  .sw-tab__n {
    position: absolute; top: -4px; left: 15px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    border-radius: var(--r-pill); background: var(--solid-cta); color: var(--solid-cta-ink);
    font-size: var(--t-11); font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
  }
  .sw-tab__l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sw-tabbar__mid { display: flex; justify-content: center; }
  .sw-tabbar__go {
    display: inline-grid; place-items: center; width: 58px; height: 58px; margin: -26px 0 2px;
    border: 0; border-radius: 50%; background: var(--gold); color: var(--on-gold); cursor: pointer;
    box-shadow: 0 0 0 5px var(--surface), var(--shadow-lift);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  }
  .sw-tabbar__go .sw-mark { width: 26px; height: 26px; stroke-width: 1.9; }
  .sw-tabbar__go:active { transform: scale(0.95); background: var(--gold-hover); }
  .sw-tabbar__go:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

  /* D338: the centre's fan of actions — they rise above the bar over a scrim; the first (this
     page's own) sits nearest the thumb. Not gold: the centre button is the one gold thing. */
  .sw-fan { display: block; position: fixed; inset: 0; z-index: 34; }
  .sw-fan[hidden] { display: none; }
  .sw-fan__scrim {
    position: absolute; inset: 0; background: oklch(22% 0.015 265 / 0.42);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity 180ms var(--e, ease);
  }
  .sw-fan.is-on .sw-fan__scrim { opacity: 1; }
  .sw-fan__list {
    position: absolute; left: 50%; bottom: calc(92px + var(--tb-lift));
    display: flex; flex-direction: column-reverse; align-items: center; gap: 10px;
    transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px);
  }
  .sw-fan__item {
    display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 18px 4px 4px;
    border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--text);
    box-shadow: var(--shadow-lift); font: inherit; font-size: var(--t-14); font-weight: 600;
    text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    opacity: 0; transform: translateY(18px) scale(0.92);
    transition: opacity 200ms var(--e, ease), transform 240ms cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(var(--i, 0) * 28ms);
  }
  .sw-fan.is-on .sw-fan__item { opacity: 1; transform: none; }
  .sw-fan__item:active { transform: scale(0.96); background: var(--sunken); }
  .sw-fan__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .sw-fan__i {
    display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
    border-radius: 50%; background: var(--sunken); color: var(--text);
  }
  .sw-fan__i .sw-mark { width: 20px; height: 20px; }
  .sw-fan__l { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
  .sw-fan__s { color: var(--muted); font-size: var(--t-12); font-weight: 500; font-variant-numeric: tabular-nums; }
  .sw-tabbar__go .sw-mark { transition: transform 220ms var(--e, ease); }
  html[data-fan] .sw-tabbar__go .sw-mark { transform: rotate(45deg); }
  @media (prefers-reduced-motion: reduce) {
    .sw-fan__item, .sw-fan__scrim, .sw-tabbar__go .sw-mark { transition: none; }
  }
  .sw-tbrow--check input { width: 18px; height: 18px; flex: none; accent-color: var(--ink-blue); }

  /* D338: the fan carries Add, so the page-level gold Adds it duplicates step aside on a phone;
     the five views then fit (icons a touch tighter). */
  .sw-views-bar .sw-views__add, .sw-headacts > [data-sp-new], .sw-headacts > .sw-dd,
  .page__head > [data-rem-new] { display: none; }
  .sw-views { flex: 1 1 auto; justify-content: space-between; }
  .sw-views__tab { padding: 0 5px; gap: 3px; }
  .sw-views__tab .sw-mark { width: 14px; height: 14px; }

  /* The sheets the tabs open (the one #sheet dialog, a bottom sheet on a phone). */
  .sw-tbsheet { display: flex; flex-direction: column; gap: 2px; padding-bottom: env(safe-area-inset-bottom); }
  .sw-tbrow {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 10px;
    border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font: inherit;
    font-size: var(--t-14); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
  }
  .sw-tbrow[aria-current="page"] { background: var(--sunken); font-weight: 650; }
  .sw-tbrow:active { background: var(--sunken); }
  .sw-tbrow__m { width: 20px; height: 20px; color: var(--muted); flex: none; }
  .sw-tbrow__l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sw-tbrow__s { color: var(--muted); font-size: var(--t-13); font-variant-numeric: tabular-nums; }
  .sw-tbrow__n { color: var(--muted); font-size: var(--t-13); font-weight: 700; font-variant-numeric: tabular-nums; }
  .sw-tbsheet__h { margin: 12px 10px 4px; font-size: var(--t-12); font-weight: 700; color: var(--muted); }
  .sw-tbsheet__who { margin: 0 10px 4px; font-size: var(--t-13); color: var(--muted); }
  .sw-tbsheet__none { margin: 8px 10px; font-size: var(--t-14); color: var(--muted); }

  /* The header: Maya, a search icon and the bell — the number and Zen Mode are in More. */
  .main__bar-right { gap: 2px; }
  #cmd-open, #bell { width: 40px; min-width: 40px; padding: 0; justify-content: center; position: relative; }
  .sw-cmd-open__k { display: none; }
  .sw-cmd-open__s { display: inline-flex; }
  .sw-cmd-open__s .sw-mark { width: 20px; height: 20px; }
  /* The bell: the word "Alerts" is set to nothing and the bell is drawn here, so app.js keeps
     its one string (its brotli budget, I-221). */
  #bell { font-size: 0; }
  #bell::before {
    content: ""; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: var(--bell-mark) center / contain no-repeat; mask: var(--bell-mark) center / contain no-repeat;
    --bell-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 10.9V7.3a3.8 3.8 0 0 1 7.6 0v3.6l1.3 1.5H2.9z'/%3E%3Cpath d='M6.5 13.7a1.6 1.6 0 0 0 3 0'/%3E%3C/svg%3E");
  }
  #bell .sw-bell__n {
    position: absolute; top: 3px; right: 1px; margin: 0; min-width: 16px; height: 16px; padding: 0 4px;
    box-sizing: border-box; border-radius: var(--r-pill); background: var(--solid-cta); color: var(--solid-cta-ink);
    font-size: 10px; line-height: 16px; text-align: center;
  }

  /* Toasts and Undo sit above the bar. */
  .sw-toast { bottom: calc(84px + var(--tb-lift)); }
  .sw-undo { bottom: calc(84px + var(--tb-lift)); left: var(--s-2); }

  /* Maya opens full screen on a phone, over the bar, and follows the visual viewport so her
     input stays above the keyboard (tabbar.js keeps --vvh / --vvt). */
  .sw-maya {
    top: var(--vvt, 0px); bottom: auto; left: 0; right: 0; width: 100vw;
    height: var(--vvh, 100dvh); max-height: none; border-radius: 0; z-index: 45;
    padding: env(safe-area-inset-top) 0 0; box-sizing: border-box;
  }
  html:not([data-kb]) .sw-maya__compose { padding-bottom: max(env(safe-area-inset-bottom), 8px); }
}
/* Search on a phone or a touch screen: a round × instead of the esc key, no key hints. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .sw-cmdk__kbd, #cmd-hint { display: none; }
  .sw-cmdk__x {
    flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 50%; background: var(--solid-cta); color: var(--solid-cta-ink); cursor: pointer;
  }
  .sw-cmdk__x .sw-mark { width: 16px; height: 16px; stroke-width: 2.1; }
  .sw-cmdk__x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
}


/* ========================================================================
   D344/D345 — the alert banner, the opt-in card, the Alerts page.
   The banner is a card that drops from the top edge, below the notch (safe area),
   one at a time. Ink on white with an ink-blue mark: nothing here is gold (the Seal
   Rule — gold stays the seal and the page's primary action). */
.sw-banners {
  position: fixed; left: 0; right: 0; top: 0; z-index: 2100;
  display: flex; justify-content: center; pointer-events: none;
  padding: calc(env(safe-area-inset-top, 0px) + var(--s-1)) var(--s-1) 0;
}
.sw-banner {
  pointer-events: auto; position: relative;
  display: flex; align-items: stretch; width: min(460px, 100%);
  background: var(--surface); color: var(--text);
  border-radius: var(--r-md); box-shadow: var(--shadow-panel);
  transform: translateY(calc(-100% - 24px)); opacity: 0;
  transition: transform var(--d-panel) var(--e), opacity var(--d-panel) var(--e);
}
.sw-banner.is-in { transform: none; opacity: 1; }
.sw-banner.is-out { transform: translateY(calc(-100% - 24px)); opacity: 0; transition-duration: var(--d-move); }
@media (prefers-reduced-motion: reduce) {
  .sw-banner, .sw-banner.is-out { transform: none; transition: opacity var(--d-state) linear; }
}
.sw-banner__go {
  flex: 1; min-width: 0; display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 4px 12px var(--s-2); color: inherit; text-decoration: none;
  border-radius: var(--r-md) 0 0 var(--r-md); min-height: 56px;
}
.sw-banner__go:focus-visible, .sw-banner__x:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sw-banner__mark {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--info-bg); color: var(--ink-blue);
}
.sw-banner__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-banner__title { font-size: var(--t-14); font-weight: 600; line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sw-banner__body { font-size: var(--t-13); color: var(--muted); line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sw-banner__more { font-size: var(--t-12); color: var(--muted); font-variant-numeric: tabular-nums; }
.sw-banner__x {
  flex: none; width: 44px; min-height: 44px; border: 0; background: none; color: var(--muted);
  border-radius: 0 var(--r-md) var(--r-md) 0; cursor: pointer;
  display: inline-flex; align-items: flex-start; justify-content: center; padding-top: 14px;
}
.sw-banner__x:hover { color: var(--text); background: var(--sunken); }

/* The opt-in, on Today, once. A quiet card under the heading — never a modal. */
.sw-pushcard {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
  padding: var(--s-2); margin: 0 0 var(--s-2);
}
.sw-pushcard__mark {
  flex: none; width: 36px; height: 36px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--info-bg); color: var(--ink-blue);
}
.sw-pushcard__text { flex: 1 1 260px; min-width: 0; }
.sw-pushcard__h { margin: 0; font-size: var(--t-14); font-weight: 600; }
.sw-pushcard__p { margin: 2px 0 0; font-size: var(--t-13); color: var(--muted); }
.sw-pushcard__acts { display: flex; gap: var(--s-1); flex-wrap: wrap; }

/* The Alerts page. Rows lift on hover like every list; unread is a dot AND bold (not colour alone). */
.sw-alerts__bar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: 0 0 var(--s-2); }
.sw-alerts__kind { min-width: 180px; }
.sw-alerts__all { margin-left: auto; }
.sw-alerts { list-style: none; margin: 0; padding: 0; background: var(--surface);
  border-radius: var(--r-lg); box-shadow: var(--shadow-soft); overflow: hidden; }
.sw-alerts__row + .sw-alerts__row { border-top: 1px solid var(--hairline); }
.sw-alerts__go { display: flex; gap: 12px; align-items: flex-start; padding: 12px var(--s-2);
  color: inherit; text-decoration: none; min-height: 44px; }
.sw-alerts__go:hover { background: var(--sunken); }
.sw-alerts__go:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sw-alerts__mark { flex: none; width: 28px; height: 28px; border-radius: var(--r-sm); margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--sunken); color: var(--muted); }
.is-unread .sw-alerts__mark { background: var(--info-bg); color: var(--ink-blue); }
.sw-alerts__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sw-alerts__top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sw-alerts__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-blue); }
.sw-alerts__subject { font-size: var(--t-14); color: var(--body); overflow: hidden; text-overflow: ellipsis; }
.is-unread .sw-alerts__subject { font-weight: 600; color: var(--text); }
.sw-alerts__body { font-size: var(--t-13); color: var(--muted); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sw-alerts__meta { font-size: var(--t-12); color: var(--muted); font-variant-numeric: tabular-nums; }
.is-stale .sw-alerts__subject { text-decoration: none; color: var(--muted); }
.sw-alerts__more { display: flex; justify-content: center; padding: var(--s-2) 0; }
@media (max-width: 540px) {
  .sw-alerts__all { margin-left: 0; }
  .sw-alerts__kind { flex: 1 1 100%; }
}

/* ===================================================================== D349–D354 Finance
   Bills Received / Bills Paid, the bill form, payments linked to invoices, and the one
   "due soon / overdue" hue every table, list, calendar and timeline uses (D354). */

/* --- due soon (today, the next two days) and overdue: a tint and a 3px edge, never colour alone */
.sw-tbl tbody tr.sw-due--soon td { background: var(--attention-bg); }
.sw-tbl tbody tr.sw-due--late td { background: var(--risk-bg); }
.sw-tbl tbody tr.sw-due--soon:hover td { background: color-mix(in oklch, var(--attention-bg) 70%, var(--sunken)); }
.sw-tbl tbody tr.sw-due--late:hover td { background: color-mix(in oklch, var(--risk-bg) 70%, var(--sunken)); }
.sw-row.sw-due--soon { background: var(--attention-bg); }
.sw-row.sw-due--late { background: var(--risk-bg); }
.sw-calitem.sw-due--soon { background: var(--attention-bg); color: var(--attention); }
.sw-calitem.sw-due--late { background: var(--risk-bg); color: var(--risk); }
.sw-gbar.sw-due--soon { outline: 2px solid var(--attention); outline-offset: 1px; }
.sw-gbar.sw-due--late { outline: 2px solid var(--risk); outline-offset: 1px; }
.sw-bill__soon { color: var(--attention); font-weight: 700; }
.sw-bill__flag--soon { background: var(--attention-bg); color: var(--attention); }
.sw-bill__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: var(--s-1) 0 0;
  font-size: var(--t-12); color: var(--muted); }
.sw-bill__key { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: -8px; vertical-align: -1px; }
.sw-bill__key--soon { background: var(--attention-bg); outline: 1px solid var(--attention); outline-offset: -1px; }
.sw-bill__key--late { background: var(--risk-bg); outline: 1px solid var(--risk); outline-offset: -1px; }
.sw-bill__mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw-bill__left { display: block; font-size: var(--t-12); font-weight: 600; color: var(--attention); text-align: right; }
.sw-bill__stop.is-part { background: var(--attention-bg); color: var(--attention); }
.sw-bbulk { margin: 0 0 var(--s-1); }
.sw-bcall { margin: 0 0 var(--s-1); padding-left: 18px; font-size: var(--t-13); display: grid; gap: 4px; }

/* --- the bill form (a dialog of its own) */
.sw-bf__dlg { width: min(720px, calc(100vw - 16px)); padding: 0; flex-direction: column; }
.sw-bf__dlg[open] { display: flex; }
.sw-bf__dlg:not([open]), .sw-side:not([open]) { display: none; }   /* D358: a closed form was still laid out, invisibly, over the page */
.sw-bf__dlg > .sw-modal__head { padding: var(--s-2) 20px 0; margin: 0; }
.sw-bf__body { padding: var(--s-2) 20px 0; overflow: auto; flex: 1 1 auto; }
.sw-bf__dlg > .sw-modal__actions { display: flex; gap: var(--s-1); padding: var(--s-2) 20px 20px; }
.sw-bf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px var(--s-2); margin: var(--s-2) 0; }
.sw-bf__fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sw-bf__fld[hidden] { display: none; }
.sw-bf__wide { grid-column: 1 / -1; }
.sw-bf__hint { margin: 2px 0 0; font-size: var(--t-12); color: var(--muted); }
.sw-bf__hint[hidden] { display: none; }
.sw-bill__kinds .sw-bf__hint { margin-left: var(--s-1); }
.sw-bf__lock { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--muted); }
.sw-bf__under { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--s-1);
  font-size: var(--t-12); color: var(--muted); }
.sw-bf__under span { display: inline-flex; align-items: center; gap: 4px; }
.sw-bf__under .sw-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-12); }
.sw-bf__err[hidden] { display: none; }
.sw-bf__err { color: var(--risk); }
/* the vendor list */
.sw-bf__combo { position: relative; }
.sw-bf__list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow: auto;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-panel); padding: 4px; }
.sw-bf__list[hidden] { display: none; }
.sw-bf__opt { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; color: var(--text);
  text-align: left; padding: 8px; border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: var(--t-14); }
.sw-bf__opt:hover, .sw-bf__opt.is-active { background: var(--sunken); }
.sw-bf__optl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-bf__opts { font-size: var(--t-12); color: var(--muted); white-space: nowrap; }
.sw-bf__opt--new { color: var(--gold-ink); font-weight: 600; }
/* currency with its flag */
.sw-flag { flex: none; width: 21px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px oklch(22% 0.015 265 / 0.12); }
.sw-flag--none { display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700;
  background: var(--sunken); color: var(--muted); }
.sw-bf__cur { position: relative; }
.sw-bf__curbtn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; }
.sw-bf__curbtn:disabled { cursor: not-allowed; opacity: .7; }
.sw-bf__caret { margin-left: auto; color: var(--muted); }
.sw-bf__curmenu { position: absolute; z-index: 5; left: 0; min-width: 100%; top: calc(100% + 4px); padding: 4px;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-panel); }
.sw-bf__curmenu[hidden] { display: none; }
.sw-bf__curopt { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: var(--text);
  padding: 8px; border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: var(--t-14); text-align: left; }
.sw-bf__curopt:hover, .sw-bf__curopt:focus-visible, .sw-bf__curopt[aria-selected="true"] { background: var(--sunken); }
.sw-bf__curk { font-weight: 700; min-width: 3ch; }
.sw-bf__curn { color: var(--muted); flex: 1 1 auto; }
.sw-bf__curd { font-size: var(--t-11); color: var(--gold-ink); font-weight: 700; }
/* a segmented choice (method, frequency) */
.sw-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-seg__b { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-sm);
  background: var(--sunken); color: var(--text); font: inherit; font-size: var(--t-13); font-weight: 600; cursor: pointer; }
.sw-seg__b:hover { background: color-mix(in oklch, var(--sunken) 70%, var(--hairline)); }
.sw-seg__b[aria-checked="true"] { background: var(--gold-quiet); box-shadow: inset 0 0 0 1px var(--gold-ink); }
.sw-bf__cards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-1); }
.sw-bf__cards .sw-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-height: 30px; font-weight: 600; color: var(--text); }
.sw-bf__cards .sw-chip.is-on { background: var(--gold-quiet); box-shadow: inset 0 0 0 1px var(--gold-ink); }
.sw-bf__newcard { display: grid; grid-template-columns: 1fr 140px; gap: 8px var(--s-1); margin-top: var(--s-1); }
.sw-bf__newcard > div { display: flex; flex-direction: column; gap: 4px; }
.sw-bf__newcard .sw-bf__hint { grid-column: 1 / -1; }
.sw-bf__mxone { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s-1); max-width: 320px; }
/* the project, Spaces › Projects */
.sw-bf__place { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; }
.sw-bf__place span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-bf__pp { margin-top: 6px; padding: 8px; border-radius: var(--r-md); background: var(--sunken); display: grid; gap: 6px; }
.sw-bf__ppq { background: var(--surface); }
.sw-bf__ppcrumbs { display: flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--muted); }
.sw-bf__pplist { display: grid; gap: 2px; max-height: 240px; overflow: auto; }
.sw-bf__pprow { display: flex; align-items: center; gap: 8px; border: 0; background: var(--surface); color: var(--text); text-align: left;
  padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: var(--t-14); }
.sw-bf__pprow:hover, .sw-bf__pprow[aria-selected="true"] { background: var(--gold-quiet); }
.sw-bf__pprow--here { color: var(--muted); }
.sw-bf__ppl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-bf__ppn { font-size: var(--t-12); color: var(--muted); white-space: nowrap; }
.sw-bf__ppgo { transform: rotate(-90deg); color: var(--muted); }
.sw-bf__ppnone { margin: 4px; font-size: var(--t-13); color: var(--muted); }
.sw-bf__ppfoot { margin: 0; font-size: var(--t-12); }
/* the file */
.sw-bf__file { margin-top: var(--s-2); }
.sw-bf__file.is-over .sw-bf__pick { box-shadow: inset 0 0 0 2px var(--gold-ink); background: var(--gold-quiet); }
.sw-bf__pick { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); cursor: pointer;
  background: var(--sunken); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--text); }
.sw-bf__pick:hover { box-shadow: inset 0 0 0 1px var(--gold-ink); }
.sw-bf__pick:focus-within { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.sw-bf__pick.is-set { background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok); }
.sw-bf__picktxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-bf__picktxt strong { font-size: var(--t-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-bf__picksub { font-size: var(--t-12); color: var(--muted); }
.sw-bf__scan { margin: 6px 0 0; font-size: var(--t-12); color: var(--ink-blue); }
.sw-bf__scan.is-bad { color: var(--risk); }
.sw-bf__scan[hidden] { display: none; }
@media (max-width: 760px) {
  .sw-bf { grid-template-columns: 1fr; }
  .sw-bf__dlg { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }
  .sw-bf__newcard { grid-template-columns: 1fr 110px; }
}

/* --- the side panel (the vendor's full details beside the form) */
.sw-side { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(560px, 100vw); max-width: 100vw; border: 0;
  border-radius: var(--r-xl) 0 0 var(--r-xl); padding: 0; background: var(--paper, var(--surface)); color: var(--text);
  box-shadow: var(--shadow-panel); }
.sw-side[open] { display: flex; flex-direction: column; animation: sw-side-in .2s ease-out; }
.sw-side::backdrop { background: oklch(22% 0.015 265 / 0.32); }
.sw-side__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) 20px var(--s-1); }
.sw-side__head h2 { margin: 0; font-size: var(--t-16, 1rem); }
.sw-side__body { overflow: auto; padding: 0 20px 20px; flex: 1 1 auto; }
@keyframes sw-side-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sw-side[open] { animation: none; } }
@media (max-width: 760px) { .sw-side { border-radius: 0; } }

/* --- the bill page: payments ⇄ invoices, the Trash, comments */
.sw-blinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sw-blink { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--sunken); }
.sw-blink__m { color: var(--muted); flex: none; }
.sw-blink__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; color: var(--text); text-decoration: none; }
.sw-blink__main:hover .sw-blink__t { text-decoration: underline; }
.sw-blink__t { font-weight: 600; font-size: var(--t-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-blink__s { font-size: var(--t-12); color: var(--muted); }
.sw-blink__amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.sw-blink__sum { display: flex; flex-wrap: wrap; gap: 4px var(--s-2); margin: 0 0 var(--s-1); font-size: var(--t-13); }
.sw-blink__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-1); }
.sw-blinks--pick { max-height: 340px; overflow: auto; margin-bottom: var(--s-1); }
.sw-blink--pick { width: 100%; border: 0; text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.sw-blink--pick:hover { background: color-mix(in oklch, var(--sunken) 60%, var(--hairline)); }
.sw-blink--pick.is-on { background: var(--gold-quiet); box-shadow: inset 0 0 0 1px var(--gold-ink); }
.sw-bill__trashed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); padding: 10px 12px; margin: 0 0 var(--s-2);
  border-radius: var(--r-md); background: var(--risk-bg); color: var(--risk); font-size: var(--t-13); font-weight: 600; }
.sw-bill__trashed span { flex: 1 1 auto; }
.sw-bill__foot { margin: var(--s-2) 0 0; }
.sw-bthread { margin-top: var(--s-2); }
.sw-bc__in { width: 100%; resize: vertical; }
.sw-bc__go { display: flex; justify-content: flex-end; margin-top: 6px; }
.sw-bc__del { margin-left: auto; font-size: var(--t-12); }
.sw-face--sm { width: 20px; height: 20px; font-size: 9px; }
.sw-face--maya { background: var(--gold); color: var(--on-gold); }
.sw-brems { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sw-tbl.sw-tbl--billsx th { text-align: left; }
.sw-tbl.sw-tbl--billsx th.sw-bill__num { text-align: right; }
@media (max-width: 820px) {
  /* D349: the bills tables scroll sideways in their own box (the first columns stay), so every
     column stays — the generic phone rule above would hide headings and cells out of step. */
  .sw-tbl.sw-tbl--billsx th, .sw-tbl.sw-tbl--billsx td { display: table-cell; }
}
/* D356: what a bill change was, old → new */
.sw-bchg { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: var(--t-13); }
.sw-bchg__k { color: var(--muted); }
.sw-bchg__from { text-decoration: line-through; color: var(--muted); }

/* D357: Mail on a desk is a fixed window — each column scrolls inside itself (mail.js sets the
   height to what is left below the heading). */
@media (min-width: 761px) {
  .sw-mail.sw-mail--fit { align-items: stretch; min-height: 0; }
  .sw-mail--fit .sw-mail__side { position: static; overflow-y: auto; min-height: 0; }
  .sw-mail--fit .sw-mail__list { position: static; max-height: none; min-height: 0; }
  .sw-mail--fit .sw-mail__listbody { flex: 1 1 auto; min-height: 0; }
  .sw-mail--fit .sw-mail__pane { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .sw-mail.sw-mail--fit { grid-template-rows: auto minmax(0, 1fr); }
}


/* ===================================================================== D358 Finance, redesigned
   Built from the task page's parts (the code line, sw-attrs--cols, sw-desc, sw-files, sw-subcard,
   sw-actcard) and Acme's language: quiet grey labels, ink values, soft cards that never touch,
   tinted chips, and segmented meters for "how much of it". */
.sw-billpage { max-width: 1080px; }
.sw-billpage > * + * { margin-top: 0; }
.sw-billpage .sw-attrs { margin-bottom: var(--s-3); }

/* the summary */
.sw-bsum { margin: 0 0 var(--s-3); padding: var(--s-2) 18px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-md); box-shadow: none; display: grid; gap: 14px; }
.sw-bsum__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.sw-bsum__money { display: flex; flex-direction: column; gap: 2px; }
.sw-bsum__k { font-size: var(--t-12); color: var(--muted); font-weight: 600; letter-spacing: 0.02em; }
.sw-bsum__amt { font-size: var(--t-28, 1.75rem); font-weight: 700; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sw-bsum__cur { font-size: var(--t-12); color: var(--muted); }
.sw-bsum__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-bsum__paid { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sw-bsum__pk { font-size: var(--t-13); color: var(--muted); }
.sw-bsum__pk strong { color: var(--text); font-variant-numeric: tabular-nums; }
.sw-bsum__left { color: var(--attention); font-weight: 600; }
.sw-bsum__note { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); color: var(--ok); font-weight: 600; }
.sw-bsum__rej { margin: 0; display: flex; gap: 8px; align-items: center; font-size: var(--t-13); color: var(--risk); }

/* where it stands: a quiet stepper */
.sw-bsteps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.sw-bsteps__s { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: var(--r-pill, 999px);
  background: var(--sunken); color: var(--muted); font-size: var(--t-12); font-weight: 600; }
.sw-bsteps__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px var(--hairline); }
.sw-bsteps__s.is-done { background: var(--st-done-bg); color: var(--st-done); }
.sw-bsteps__s.is-done .sw-bsteps__dot { background: var(--st-done); color: var(--surface); box-shadow: none; }
.sw-bsteps__s.is-part { background: var(--attention-bg); color: var(--attention); }
.sw-bsteps__s.is-part .sw-bsteps__dot { box-shadow: inset 0 0 0 1px var(--attention); }

/* Acme's segmented meter */
.sw-meter { display: inline-flex; gap: 2px; align-items: center; height: 12px; }
.sw-meter i { display: block; width: 4px; height: 12px; border-radius: 2px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--hairline); }
.sw-meter i.is-on { background: var(--ink-blue); box-shadow: none; }
.sw-meter--ok i.is-on { background: var(--ok); }
.sw-meter--attention i.is-on { background: var(--attention); }
.sw-meter--risk i.is-on { background: var(--risk); }

/* the attribute grid: the task's rows; values are ink, labels grey */
.sw-battr__v { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: var(--t-13); }
.sw-battr__mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sw-battr__link { color: var(--text); font-size: var(--t-13); font-weight: 600; text-decoration: underline; text-decoration-color: var(--hairline);
  text-underline-offset: 3px; }
.sw-battr__link:hover { text-decoration-color: currentColor; }
.sw-battr__who { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-13); color: var(--text); font-weight: 600; }
.sw-battr__who .sw-pf--tl { width: 22px; height: 22px; }
.sw-battr--soon { color: var(--attention); font-weight: 600; }
.sw-battr--late { color: var(--risk); font-weight: 600; }
.sw-battrs .sw-status { font-size: var(--t-12); }

.sw-bnote__why { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; font-size: var(--t-12); color: var(--muted); }
.sw-breading { margin-top: 4px; }
.sw-breading pre { margin: 8px 0 0; padding: 10px 12px; max-height: 280px; overflow: auto; background: var(--sunken); border-radius: var(--r-sm);
  font-size: var(--t-12); line-height: 1.5; white-space: pre-wrap; color: var(--body); }

/* payments and lines: cards like Subtasks */
.sw-bcard .sw-files__head { align-items: center; margin-bottom: 10px; }
.sw-bcard__none { margin: 4px 0 8px; font-size: var(--t-13); color: var(--muted); }
.sw-bcard__acts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.sw-bcard__edit { font-size: var(--t-13); }
.sw-bpays { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sw-bpay { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--sunken); }
.sw-bpay__icon { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--surface); color: var(--muted); flex: none;
  display: inline-flex; align-items: center; justify-content: center; }
.sw-bpay__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; color: var(--text); text-decoration: none; }
.sw-bpay__main:hover .sw-bpay__t { text-decoration: underline; }
.sw-bpay__t { font-size: var(--t-14); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-bpay__s { font-size: var(--t-12); color: var(--muted); }
.sw-bpay__amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; color: var(--text); }
.sw-bpays--pick { max-height: 340px; overflow: auto; margin-bottom: var(--s-1); }
.sw-bpay--pick { width: 100%; border: 0; text-align: left; cursor: pointer; font: inherit; }
.sw-bpay--pick:hover { background: color-mix(in oklch, var(--sunken) 60%, var(--hairline)); }
.sw-bpay--pick.is-on { background: var(--gold-quiet); box-shadow: inset 0 0 0 1px var(--gold-ink); }
.sw-blines { width: 100%; border-collapse: collapse; font-size: var(--t-13); }
.sw-blines th { text-align: left; font-size: var(--t-11); color: var(--muted); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0 8px 6px; border-bottom: 1px solid var(--hairline); }
.sw-blines td { padding: 8px; border-bottom: 1px solid var(--hairline); color: var(--text); }
.sw-blines th:not(:first-child), .sw-blines td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw-bsums { margin: 10px 0 0 auto; display: grid; gap: 4px; max-width: 280px; font-size: var(--t-13); }
.sw-bsums > div { display: flex; justify-content: space-between; gap: var(--s-2); }
.sw-bsums dt { color: var(--muted); }
.sw-bsums dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.sw-bsums .is-total { padding-top: 6px; border-top: 1px solid var(--hairline); font-weight: 700; }
.sw-bsums .is-total dt { color: var(--text); }
.sw-btrash { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); padding: 10px 14px; margin: 0 0 var(--s-3);
  border-radius: var(--r-md); background: var(--risk-bg); color: var(--risk); font-size: var(--t-13); font-weight: 600; }
.sw-btrash span { flex: 1 1 auto; }
.sw-bchg { list-style: none; margin: 6px 0 0; padding: 8px 10px; display: grid; gap: 4px; font-size: var(--t-13);
  background: var(--sunken); border-radius: var(--r-sm); }
.sw-bchg li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sw-bchg__k { color: var(--muted); min-width: 92px; }
.sw-bchg__from { color: var(--muted); text-decoration: line-through; }
.sw-bchg__to { color: var(--text); font-weight: 600; }
.sw-bchg .sw-mark { color: var(--faint); }

/* the list pages: stat tiles */
.sw-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 var(--s-2); }
.sw-kpi { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-md); color: var(--text); text-decoration: none; min-width: 0; }
a.sw-kpi[href]:hover { border-color: color-mix(in oklch, var(--hairline) 50%, var(--muted)); }
.sw-kpi__k { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--muted); font-weight: 600; }
.sw-kpi__v { font-size: var(--t-22, 1.375rem); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-kpi__s { font-size: var(--t-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-kpi--risk .sw-kpi__v { color: var(--risk); }
.sw-kpi--attention .sw-kpi__v { color: var(--attention); }
.sw-kpi--ok .sw-kpi__v { color: var(--ok); }
.sw-kpis--mini { margin: 4px 0 12px; }
.sw-kpis--mini .sw-kpi { padding: 10px 12px; gap: 2px; }
.sw-kpis--mini .sw-kpi__v { font-size: var(--t-16); }
@media (max-width: 1100px) { .sw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the table's cells */
.sw-bven { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.sw-bven:hover .sw-bven__name { text-decoration: underline; }
.sw-bven__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sw-bven__name { font-size: var(--t-14); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-bven__sub { font-size: var(--t-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
.sw-bmono { width: 30px; height: 30px; flex: none; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-11); font-weight: 700; letter-spacing: 0.02em; background: var(--sunken); color: var(--muted); }
.sw-bmono--0 { background: var(--info-bg); color: var(--ink-blue); }
.sw-bmono--1 { background: var(--ok-bg); color: var(--ok); }
.sw-bmono--2 { background: var(--attention-bg); color: var(--attention); }
.sw-bmono--3 { background: var(--st-done-bg); color: var(--st-done); }
.sw-bmono--4 { background: var(--gold-quiet); color: var(--gold-ink); }
.sw-bmono--5 { background: var(--risk-bg); color: var(--risk); }
.sw-bappr { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); font-weight: 600; color: var(--muted); white-space: nowrap; }
.sw-bappr.is-ok { color: var(--ok); }
.sw-bappr__who { padding: 1px 7px; border-radius: var(--r-pill, 999px); background: var(--sunken); color: var(--text); font-weight: 600; }
.sw-bmeth { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); color: var(--text); white-space: nowrap; }
.sw-bmeth .sw-mark { color: var(--muted); }
.sw-sticker--quiet { font-size: var(--t-11); padding: 1px 6px; vertical-align: 1px; }

/* ===================================================================== D359 tables, filters, search
   One table language for All work, the spaces' and projects' tables, and Finance. */
/* the search sits beside +Add: the same height and corners as the button, not a chip's oval */
.sw-views-bar { gap: 8px; }
.sw-views-bar .sw-searchpill, .sw-searchpill--input { width: min(280px, 40vw); min-height: 30px; padding: 0 10px; border-radius: var(--r-sm);
  background: var(--surface); font-size: var(--t-13); }
.sw-searchpill--input { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hairline); color: var(--muted); cursor: text; }
.sw-searchpill--input input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--text); outline: none; }
.sw-searchpill--input:focus-within, .sw-views-bar .sw-searchpill:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
@media (max-width: 760px) { .sw-views-bar .sw-searchpill { width: 40px; padding: 0; justify-content: center; } .sw-views-bar .sw-searchpill span, .sw-views-bar .sw-searchpill kbd { display: none; } }

/* the tick column: Gmail's — tick, then star, in one grid, the header's tick over the rows' */
.sw-tbl__sel { width: 1%; }
.sw-selin { display: inline-grid; grid-template-columns: 12px 18px 20px; align-items: center; gap: 4px; vertical-align: middle; }
.sw-selin__g { display: inline-flex; justify-content: center; }
.sw-selin .sw-check { margin: 0; justify-self: center; }
.sw-selin .sw-tbl__star { margin: 0; padding: 0; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.sw-tbl--work .sw-tbl__sel .sw-selin__g .sw-grip { display: inline-flex; }
.sw-selall { position: relative; display: inline-flex; }
.sw-selall__btn.sw-dd__btn { min-height: 20px; height: 20px; width: 20px; padding: 0; justify-content: center; border: 0; background: transparent; border-radius: var(--r-xs); }
.sw-selall__btn.sw-dd__btn:hover { background: var(--hairline); }
.sw-selall__menu { position: absolute; top: 24px; left: -30px; z-index: 30; min-width: 150px; padding: 4px; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-panel); text-transform: none; letter-spacing: 0; }
.sw-selall__menu[hidden] { display: none; }
.sw-selall__opt { text-align: left; padding: 7px 12px; border: 0; background: none; border-radius: var(--r-sm); font: inherit; font-size: var(--t-13);
  font-weight: 500; color: var(--text); cursor: pointer; }
.sw-selall__opt:hover { background: var(--sunken); }

/* sorting by a column's name */
.sw-th__sort { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; color: inherit;
  letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.sw-th__arrow { font-size: 11px; color: var(--faint); opacity: 0; transition: opacity var(--d-state); }
.sw-th__sort:hover .sw-th__arrow, .sw-th__sort:focus-visible .sw-th__arrow { opacity: 1; }
.sw-th__sort.is-on { color: var(--text); }
.sw-th__sort.is-on .sw-th__arrow { opacity: 1; color: var(--text); }

/* numbers are centred in their cells; the column names stay left */
.sw-tbl td.sw-tbl__num, .sw-tbl--billsx td.sw-bill__num { text-align: center; }
.sw-tbl th.sw-th--num { text-align: left; }
.sw-tbl th.sw-th--narrow, .sw-tbl--work td.sw-tbl__num { width: 92px; min-width: 0; }
.sw-tbl__kids { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; margin-left: 6px;
  border-radius: var(--r-pill); background: var(--sunken); color: var(--muted); font-size: var(--t-11); font-weight: 700; font-variant-numeric: tabular-nums; }

/* counts beside a filter's options: a quiet oval */
.sw-stage__n, .sw-dd__n--quiet { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--sunken);
  color: var(--muted); font-family: var(--font-ui); font-size: var(--t-11); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.sw-stage[aria-pressed="true"] .sw-stage__n { background: var(--surface); color: var(--text); }
.sw-scopeopt .sw-dd__n--quiet { margin-left: auto; }

/* the legend under a table */
.sw-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: var(--s-1) 0 0; font-size: var(--t-12); color: var(--muted); }
.sw-legend__key { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: -10px; vertical-align: -1px; }
.sw-legend__key--soon { background: var(--attention-bg); outline: 1px solid var(--attention); outline-offset: -1px; }
.sw-legend__key--late { background: var(--risk-bg); outline: 1px solid var(--risk); outline-offset: -1px; }

/* ⌘K on one line (a phone shows only the search mark there) */
@media (min-width: 761px) {
  .sw-cmd-open__k { display: inline-flex; align-items: center; gap: 1px; white-space: nowrap; }
  #cmd-open { white-space: nowrap; }
}
/* D359: a column's tools (move, hide) float over its name on hover rather than reserving their
   width in every header — the columns are as narrow as their content. */
@media (min-width: 761px) {
  .sw-tbl--m16 th.sw-th { position: relative; }
  .sw-tbl--m16 th.sw-th.sw-frz { position: sticky; }
  .sw-th__tools { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: var(--sunken);
    border-radius: var(--r-sm); box-shadow: -8px 0 8px -4px var(--sunken); pointer-events: none; }
  .sw-tbl--m16 th.sw-th:hover .sw-th__tools, .sw-tbl--m16 th.sw-th:focus-within .sw-th__tools { pointer-events: auto; }
}

/* ===================================================================== D361 Bills: Table · List · Timeline
   The same switcher as All work; List and Timeline grouped by "List by" (Client by default). */
.sw-bviews { margin: 0 0 var(--s-2); }
.sw-bby .sw-scopeopt .sw-mark { color: var(--muted); }
/* the list: All work's grouped list, a bill's row */
.sw-blist .sw-group__label .sw-bmono { width: 18px; height: 18px; font-size: 9px; border-radius: 5px; }
.sw-bgroup__sum { margin-left: auto; font-size: var(--t-12); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sw-blist__body { border-radius: var(--r-lg); padding: 0; overflow: hidden; }
.sw-brow { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center;
  border-bottom: 1px solid var(--hairline); background: var(--surface); }
.sw-brow:last-child { border-bottom: 0; }
.sw-brow:hover { background: color-mix(in oklch, var(--text) 3%, var(--surface)); }
.sw-brow.is-sel { background: color-mix(in oklch, var(--gold) 8%, var(--surface)); }
.sw-brow.sw-due--soon { background: var(--attention-bg); }
.sw-brow.sw-due--late { background: var(--risk-bg); }
.sw-brow__sel { display: flex; justify-content: center; }
.sw-brow__main { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 4px 10px 0; color: var(--text); text-decoration: none; }
.sw-brow__main:hover .sw-brow__name { text-decoration: underline; }
.sw-brow__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sw-brow__name { font-size: var(--t-14); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-brow__sub { font-size: var(--t-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-brow__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.sw-brow__appr { font-size: var(--t-11); }
.sw-brow__right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; text-align: right; }
.sw-brow__amt { font-size: var(--t-14); font-weight: 700; font-variant-numeric: tabular-nums; }
.sw-brow__when { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-12); color: var(--muted); white-space: nowrap; }
.sw-brow__when.is-soon { color: var(--attention); font-weight: 600; }
.sw-brow__when.is-late { color: var(--risk); font-weight: 600; }
.sw-brow__right .sw-status { font-size: var(--t-11); }
.sw-brow__star { justify-self: center; }
/* the timeline: All work's gantt, a bill's bar is a link (and lets a finger scroll the chart) */
.sw-bgantt .sw-gname { width: var(--gleft, 300px); }
.sw-bgantt .sw-gname .sw-bmono { width: 18px; height: 18px; font-size: 9px; border-radius: 5px; }
.sw-bgantt .sw-gname__who { max-width: 96px; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.sw-gbar--bill { cursor: pointer; touch-action: auto; text-decoration: none; }
.sw-gbar--bill:hover { filter: brightness(0.97); }
.sw-bgsum { position: absolute; top: 10px; font-size: var(--t-11); font-weight: 700; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .sw-bviews .sw-views { flex: 1 1 auto; }
  .sw-bviews .sw-views__tab { flex: 1 1 0; justify-content: center; }
  .sw-bviews { flex-wrap: wrap; }
  .sw-bviews .sw-bby { width: 100%; }
  .sw-bviews .sw-bby .sw-dd__btn { width: 100%; }
  .sw-brow { grid-template-columns: 30px minmax(0, 1fr) 30px; }
  .sw-brow__main .sw-bmono { display: none; }
  .sw-brow__main { gap: 8px; }
  .sw-brow__sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .sw-bgroup__sum { font-size: var(--t-11); }
  .sw-bgantt .sw-gname__who { display: inline; max-width: 64px; font-size: var(--t-11); }
  /* D361: on a phone the frozen Vendor column was 330 px wide in a 358 px box — frozen columns
     covered the whole width, so "scroll right" showed nothing. The tick and Vendor now take less
     than half the width; the rest scrolls under them. */
  .sw-tbl--billsx .sw-tbl__sel { width: 52px; min-width: 52px; padding-left: 6px; padding-right: 2px; }
  .sw-tbl--billsx .sw-tbl__sel .sw-selin { grid-template-columns: 18px 20px; }
  .sw-tbl--billsx .sw-tbl__sel .sw-selin__g { display: none; }
  .sw-tbl--billsx td.sw-tbl__title, .sw-tbl--billsx th[data-col-key="title"] { width: 132px; min-width: 132px; max-width: 132px; }
  .sw-tbl--billsx .sw-bven { gap: 0; }
  .sw-tbl--billsx .sw-bven .sw-bmono { display: none; }
  .sw-tbl--billsx .sw-bven__txt { max-width: 120px; }
  .sw-tbl--billsx .sw-bven__name, .sw-tbl--billsx .sw-bven__sub { max-width: 120px; font-size: var(--t-13); }
  .sw-tbl--billsx .sw-bven__sub { font-size: var(--t-11); }
}

/* ===================================================================== D362 split a payment
   One stacked bar: each share its own tint (the monogram hues), what is left empty. */
.sw-sbar { position: relative; display: flex; flex: 1 1 auto; min-width: 120px; height: 12px; border-radius: 6px; overflow: hidden;
  background: var(--sunken); box-shadow: inset 0 0 0 1px var(--hairline); }
.sw-sbar.is-over { box-shadow: inset 0 0 0 2px var(--risk); }
.sw-sbar__seg { display: block; height: 100%; flex: none; }
.sw-sbar__seg + .sw-sbar__seg { border-left: 2px solid var(--surface); }
.sw-sbar__seg--0 { background: var(--ink-blue); }
.sw-sbar__seg--1 { background: var(--ok); }
.sw-sbar__seg--2 { background: var(--attention); }
.sw-sbar__seg--3 { background: var(--st-done); }
.sw-sbar__seg--4 { background: var(--gold); }
.sw-sbar__seg--5 { background: var(--st-review, var(--muted)); }
.sw-sstate { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); color: var(--muted); white-space: nowrap; }
.sw-sstate strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.sw-sstate.is-done { color: var(--ok); font-weight: 600; }
.sw-scard__bar { display: flex; align-items: center; gap: 10px; margin: 2px 0 var(--s-2); }
.sw-scard__pct { font-size: var(--t-13); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.sw-sline { gap: 10px; }
.sw-sline__key { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sw-sline__fig { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; }
.sw-sline__pct { font-size: var(--t-12); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sw-sline__link { flex: none; }
.sw-bsum__paid .sw-sbar { max-width: 360px; }
/* the sheet */
.sw-ssheet__top { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s-2); }
.sw-srows { display: grid; gap: 8px; margin: 0 0 var(--s-1); }
.sw-srow { display: grid; grid-template-columns: 10px minmax(0, 1.6fr) 120px 92px minmax(0, 1fr) 28px; align-items: center; gap: 8px; }
.sw-srow__t { min-width: 0; }
.sw-srow__v { display: flex; align-items: center; gap: 4px; }
.sw-srow__v .sw-input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.sw-srow__u { font-size: var(--t-13); color: var(--muted); }
.sw-srow__eq { font-size: var(--t-12); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sw-ssum { display: grid; gap: 6px; margin: var(--s-2) 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--sunken); }
.sw-ssum__t { font-size: var(--t-13); color: var(--muted); }
.sw-ssum__t > strong { color: var(--text); }
.sw-ssum__over { color: var(--risk) !important; }
.sw-ssum__of { margin-left: 6px; }
/* Bills Paid's Split column: a small bar and what's left */
.sw-bsplitc { white-space: nowrap; }
.sw-mbar { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--hairline);
  overflow: hidden; vertical-align: middle; margin-right: 8px; }
.sw-mbar i { display: block; height: 100%; background: var(--attention); }
.sw-mbar.is-done i { background: var(--ok); }
.sw-bsplitc__t { font-size: var(--t-12); font-weight: 600; color: var(--attention); }
.sw-bsplitc__t.is-done { color: var(--ok); display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 760px) {
  .sw-srow { grid-template-columns: 10px minmax(0, 1fr) 96px 28px; grid-template-areas: "k t v x" ". eq n n"; }
  .sw-srow .sw-sline__key { grid-area: k; } .sw-srow__t { grid-area: t; } .sw-srow__v { grid-area: v; }
  .sw-srow__eq { grid-area: eq; } .sw-srow__n { grid-area: n; } .sw-srow .sw-file__off { grid-area: x; }
  .sw-sline { flex-wrap: wrap; }
  .sw-sline__link { margin-left: 30px; }
  .sw-sline__link span { display: inline; }
}

/* D364: notifications off on this device — a thin bar under the header, on every page. */
.sw-pushbar { display: flex; align-items: center; gap: 10px; margin: var(--s-1) var(--s-2) 0; padding: 8px 8px 8px 12px;
  border-radius: var(--r-md); background: var(--attention-bg); color: var(--text); font-size: var(--t-13); }
.sw-pushbar__mark { display: inline-flex; color: var(--attention); flex: none; }
.sw-pushbar__t { flex: 1 1 auto; min-width: 0; }
.sw-pushbar .sw-button { flex: none; }
.sw-pushbar__x { flex: none; }
.sw-person__off { color: var(--attention); font-weight: 600; }
@media (max-width: 760px) { .sw-pushbar { margin: var(--s-1) var(--s-1) 0; font-size: var(--t-12); } }

/* D365: Gmail's "•••" — the quoted history of a reply, hidden until asked */
.sw-mail__paper { position: relative; }
.sw-mail__trim { display: inline-flex; align-items: center; justify-content: center; margin: 4px 0 2px 2px; padding: 0 8px;
  height: 18px; border: 0; border-radius: 9px; background: var(--sunken); color: var(--muted); font: 700 12px/1 inherit;
  letter-spacing: 1px; cursor: pointer; }
.sw-mail__trim:hover, .sw-mail__trim[aria-pressed="true"] { background: color-mix(in oklch, var(--text) 10%, var(--sunken)); color: var(--text); }

/* ---------------------------------------------------------------- D375: Compose */
.sw-mail__ract { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); margin-left: auto; }
.sw-mail__atts li { display: inline-flex; align-items: center; gap: 2px; }
.sw-mail__attsave {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; font: inherit; font-size: var(--t-12);
  border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--surface); color: var(--muted); cursor: pointer;
}
.sw-mail__attsave:hover { color: var(--text); background: var(--sunken); }
.sw-mail__attsave:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 760px) { .sw-mail__attsave span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.sw-compose { display: flex; flex-direction: column; gap: 6px; min-width: min(640px, 100%); }
.sw-compose .sw-input, .sw-compose .sw-textarea { width: 100%; box-sizing: border-box; }
.sw-compose__from { margin: 0 0 var(--s-1); font-size: var(--t-13); color: var(--muted); }
.sw-compose__from b { color: var(--text); font-weight: 600; }
.sw-compose__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-1); margin-top: var(--s-1); }
.sw-compose__cc { display: flex; flex-direction: column; gap: 6px; }
.sw-compose__cc[hidden], .sw-compose__points[hidden], .sw-compose__tones[hidden] { display: none; }
.sw-compose__link {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: 0; background: none; font: inherit;
  font-size: var(--t-13); font-weight: 600; color: var(--ink-blue); cursor: pointer;
}
.sw-compose__link:hover { text-decoration: underline; }
.sw-compose__link:disabled { opacity: .55; cursor: progress; }
.sw-compose__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
.sw-compose__body { min-height: 220px; resize: vertical; font-size: var(--t-14); line-height: 1.5; }
.sw-compose__help { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.sw-compose__points { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; }
.sw-compose__pact { display: flex; gap: var(--s-1); }
.sw-compose__tones { font-size: var(--t-13); color: var(--muted); }
.sw-compose__atth { display: flex; align-items: center; gap: 6px; margin-top: var(--s-2); font-size: var(--t-12);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sw-compose__size { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.sw-compose__size.is-over { color: var(--risk); font-weight: 600; }
.sw-compose__files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sw-compose__file { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--hairline);
  border-radius: var(--r-sm); font-size: var(--t-13); }
.sw-compose__fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-compose__fsize { color: var(--muted); font-size: var(--t-12); }
.sw-compose__x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: var(--r-xs); }
.sw-compose__x:hover { color: var(--text); background: var(--sunken); }
.sw-compose__add { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.sw-compose__add label { cursor: pointer; }
.sw-compose__note { margin: var(--s-1) 0 0; }
.sw-compose__grant { display: flex; gap: 6px; align-items: flex-start; margin: var(--s-1) 0 0; padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm); background: var(--sunken); font-size: var(--t-13); color: var(--text); }
.sw-compose__status { font-size: var(--t-13); color: var(--muted); }

/* ---------------------------------------------------------------- D376: Maya flags mail */
.sw-mail__folder--maya { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.sw-mail__achips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.sw-mail__achip { font-size: var(--t-11); font-weight: 600; letter-spacing: .02em; padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--sunken); color: var(--muted); white-space: nowrap; }
.sw-mail__achip.is-high { background: var(--risk); color: var(--surface); }
.sw-mail__maya { margin: var(--s-2) 0; padding: var(--s-2); border: 1px solid var(--hairline); border-left: 3px solid var(--ink-blue);
  border-radius: var(--r-md); background: var(--surface); }
.sw-mail__mayah { display: flex; align-items: center; gap: 6px; font-size: var(--t-13); }
.sw-mail__mayawhy { margin: 6px 0 0; font-size: var(--t-13); color: var(--text); }
.sw-mail__mayaq { margin: var(--s-1) 0 4px; font-size: var(--t-13); font-weight: 600; }
.sw-mail__mayadraft { margin: 0; padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); background: var(--sunken);
  font-size: var(--t-14); line-height: 1.5; white-space: pre-wrap; max-height: 260px; overflow: auto; }
.sw-mail__mayact { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.sw-mail__watch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: var(--s-2);
  padding-top: var(--s-2); border-top: 1px solid var(--hairline); font-size: var(--t-13); color: var(--muted); }
.sw-mail__watchon { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; }
.sw-mail__watchq { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sw-mail__watchq .sw-select { width: auto; padding: 2px 6px; font-size: var(--t-13); }

/* D381: Maya suggests — one queue on Today (email replies, chasers, meeting follow-ups). */
.sw-sugg { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-1); }
.sw-sugg__item { padding: var(--s-2); border: 1px solid var(--hairline);
  border-radius: var(--r-md); background: var(--surface); min-width: 0; }
.sw-sugg__head { display: flex; align-items: center; gap: 6px; font-size: var(--t-14); min-width: 0; }
.sw-sugg__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-sugg__open { margin-left: auto; font-size: var(--t-13); white-space: nowrap; }
.sw-sugg__why { margin: 4px 0 0; font-size: var(--t-13); color: var(--muted); }
.sw-sugg__where { margin: var(--s-1) 0 4px; font-size: var(--t-12); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.sw-sugg__draft { margin: 0; padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); background: var(--sunken);
  font-size: var(--t-14); line-height: 1.5; white-space: pre-wrap; max-height: 220px; overflow: auto; overflow-wrap: anywhere; }
.sw-sugg__edit { width: 100%; font: inherit; font-size: var(--t-14); line-height: 1.5; }
.sw-sugg__act { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.sw-sugg__switch { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--muted); cursor: pointer; }

/* D389 — the Maya queue (Settings → Maya queue). After Arvind's references: a soft card per job, a time
   column, a ring on a thin line that fills with a tick when the step was checked done, an icon tile, the
   step and its pill; a Maya line at the foot. */
.sw-mq__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1); margin: 0 0 var(--s-2); }
.sw-mq__stat { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--s-1) var(--s-2);
  display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-mq__stat b { font-size: var(--t-20, 20px); font-weight: 700; color: var(--text); }
.sw-mq__stat span { font-size: var(--t-12); color: var(--muted); }
.sw-mq__stat.is-waiting b { color: var(--attention); }
.sw-mq__stat.is-failed b { color: var(--risk); }
.sw-mq__stat.is-done b { color: var(--st-done); }
.sw-mq__tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--sunken); margin: 0 0 var(--s-2); }
.sw-mq__tab { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted); font: inherit;
  font-size: var(--t-14); font-weight: 600; padding: 6px 12px; border-radius: var(--r-sm); cursor: pointer; }
.sw-mq__tab.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft); }
.sw-mq__tab:focus-visible, .sw-mq__chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-mq__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--s-2); }
.sw-mq__chip { border: 1px solid var(--hairline); background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-13);
  padding: 4px 12px; border-radius: var(--r-pill); cursor: pointer; }
.sw-mq__chip.is-on { background: var(--ink-blue); border-color: var(--ink-blue); color: var(--surface); }
.sw-mq__sel { width: auto; font-size: var(--t-13); padding: 4px 8px; }
.sw-mq { display: flex; flex-direction: column; gap: var(--s-2); }
.sw-mq__job { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft); padding: var(--s-2); min-width: 0; }
.sw-mq__jhead { display: flex; align-items: flex-start; gap: var(--s-1); margin-bottom: var(--s-1); }
.sw-mq__jicon, .sw-mq__icon { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--sunken); color: var(--text); }
.sw-mq__jtitle { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sw-mq__jtitle b { font-size: var(--t-16, 16px); font-weight: 600; overflow-wrap: anywhere; }
.sw-mq__jmeta { font-size: var(--t-12); color: var(--muted); }
.sw-mq__jright { display: flex; align-items: center; gap: 8px; flex: none; }
.sw-mq__count { font-size: var(--t-12); color: var(--muted); font-variant-numeric: tabular-nums; }
.sw-mq__steps { list-style: none; margin: 0; padding: 0; }
.sw-mq__step, .sw-mq__asked { display: grid; grid-template-columns: 76px 22px 40px minmax(0, 1fr) auto;
  align-items: center; column-gap: 10px; padding: 7px 0; position: relative; }
.sw-mq__asked { padding: 4px 0 0; }
.sw-mq__askedtxt { grid-column: 3 / 6; font-size: var(--t-12); color: var(--muted); font-style: italic; }
.sw-mq__time { font-size: var(--t-13); color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.sw-mq__when { font-size: var(--t-12); line-height: 1.25; }
.sw-mq__axis { align-self: stretch; display: flex; align-items: center; justify-content: center; position: relative; }
.sw-mq__axis::before { content: ""; position: absolute; top: -7px; bottom: -7px; left: 50%; width: 0;
  border-left: 1.5px solid var(--hairline); }
.sw-mq__steps > li:first-child .sw-mq__axis::before { top: 50%; }
.sw-mq__steps > li:last-child .sw-mq__axis::before { bottom: 50%; }
.sw-mq__step.is-done + li .sw-mq__axis::before, .sw-mq__step.is-done .sw-mq__axis::before { border-left-style: dashed; border-color: var(--st-done); }
.sw-mq__ring { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; border: 1.5px solid var(--muted); background: var(--surface); font-size: 12px; line-height: 1; color: var(--surface); }
.sw-mq__ring.is-done { background: var(--st-done); border-color: var(--st-done); }
.sw-mq__ring.is-waiting { border-color: var(--attention); background: var(--attention-bg); }
.sw-mq__ring.is-failed { background: var(--risk); border-color: var(--risk); font-weight: 700; }
.sw-mq__ring.is-skipped { background: var(--sunken); border-color: var(--hairline); }
.sw-mq__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-mq__label { font-size: var(--t-14); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.sw-mq__step.is-done .sw-mq__label { text-decoration: line-through; text-decoration-color: var(--muted); color: var(--muted); font-weight: 500; }
.sw-mq__step.is-skipped .sw-mq__label { color: var(--muted); }
.sw-mq__sub { font-size: var(--t-12); color: var(--muted); overflow-wrap: anywhere; }
.sw-mq__pill { font-size: var(--t-12); font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--sunken); color: var(--muted); }
.sw-mq__pill.is-done, .sw-mq__pill.is-quiet { background: var(--st-done-bg); color: var(--st-done); }
.sw-mq__pill.is-waiting { background: var(--attention-bg); color: var(--attention); }
.sw-mq__pill.is-failed, .sw-mq__pill.is-partly, .sw-mq__pill.is-late { background: var(--risk-bg); color: var(--risk); }
.sw-mq__pill.is-open { background: var(--st-progress-bg); color: var(--st-progress); }
.sw-mq__pill.is-pending { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--hairline); }
.sw-mq__week { display: inline-flex; gap: 3px; margin-top: 3px; }
.sw-mq__week i { width: 10px; height: 10px; border-radius: 3px; background: var(--sunken); }
.sw-mq__week i.is-ok { background: var(--st-done); }
.sw-mq__week i.is-bad { background: var(--risk); }
.sw-mq__foot { display: flex; align-items: center; gap: 8px; margin-top: var(--s-1); padding: 10px 12px;
  border-radius: var(--r-md); background: var(--sunken); font-size: var(--t-13); color: var(--text); }
.sw-mq__foot.is-failed, .sw-mq__foot.is-partly { background: var(--risk-bg); }
.sw-mq__foot.is-waiting { background: var(--attention-bg); }
@media (max-width: 640px) {
  .sw-mq__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-mq__step, .sw-mq__asked { grid-template-columns: 52px 18px minmax(0, 1fr) auto; column-gap: 8px; }
  .sw-mq__icon { display: none; }
  .sw-mq__askedtxt { grid-column: 3 / 5; }
  .sw-mq__time { font-size: var(--t-12); }
  .sw-mq__jhead { flex-wrap: wrap; }
}
/* D390: "(optional)" beside a field label. */
.sw-bf__optw { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.sw-bp__file { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-13); color: var(--muted); }

/* D391 — the mail compose card, after Arvind's reference (9 Oct): roomy, quiet label rows with
   recipient chips, an open page for the message with Maya's tools above it, file cards, one footer. */
#sheet:has(.sw-mc) { width: min(720px, calc(100vw - 24px)); background: var(--sunken); }
#sheet:has(.sw-mc) .sw-modal__box { padding: 14px 14px 12px; }
#sheet:has(.sw-mc) .sw-modal__head { padding: 2px 6px; margin-bottom: 10px; }
#sheet:has(.sw-mc) .sw-modal__title { font-size: var(--t-16, 16px); font-weight: 600; }
.sw-mc { display: flex; flex-direction: column; gap: 0; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); box-shadow: var(--shadow-soft); overflow: hidden; }
.sw-mc__head { padding: 6px 20px; border-bottom: 1px solid var(--hairline); }
.sw-mc__row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0; }
.sw-mc__row + .sw-mc__row, .sw-mc__cc .sw-mc__row, .sw-mc__row--subj { border-top: 1px solid var(--hairline); }
.sw-mc__cc[hidden] { display: none; }
.sw-mc__lab { flex: none; width: 64px; font-size: var(--t-14); color: var(--muted); }
.sw-mc__from { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border: 1px solid var(--hairline);
  border-radius: var(--r-pill); font-size: var(--t-13); color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.sw-mc__practice { font-size: var(--t-12); color: var(--attention); }
.sw-mc__av { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold-quiet); color: var(--gold-ink); font-size: 11px; font-weight: 700; }
.sw-mc__av--sm { width: 18px; height: 18px; font-size: 10px; }
.sw-mc__chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; cursor: text; }
.sw-mc__chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 3px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--surface); font-size: var(--t-13);
  color: var(--text); overflow-wrap: anywhere; }
.sw-mc__chip.is-bad { border-color: var(--risk); background: var(--risk-bg); color: var(--risk); }
.sw-mc__chipx { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer; padding: 0; }
.sw-mc__chipx:hover { background: var(--sunken); color: var(--text); }
.sw-mc__chipin, .sw-mc__plain { flex: 1; min-width: 120px; border: 0; background: none; color: var(--text); font: inherit;
  font-size: var(--t-14); padding: 6px 0; outline: none; }
.sw-mc__plain { font-weight: 500; }
.sw-mc__chipin::placeholder, .sw-mc__plain::placeholder, .sw-mc__body::placeholder { color: var(--faint, var(--muted)); }
.sw-mc__ccbtn { flex: none; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--t-13);
  letter-spacing: .02em; cursor: pointer; padding: 6px 4px; border-radius: var(--r-sm); }
.sw-mc__ccbtn:hover { color: var(--text); background: var(--sunken); }
.sw-mc__ccbtn[hidden] { display: none; }
.sw-mc__page { position: relative; padding: 10px 20px 14px; display: flex; flex-direction: column; gap: 10px; }
.sw-mc__ai { display: inline-flex; align-self: flex-start; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-soft); }
.sw-mc__aib { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--text); font: inherit;
  font-size: var(--t-13); padding: 5px 10px; border-radius: var(--r-sm); cursor: pointer; }
.sw-mc__aib:hover { background: var(--sunken); }
.sw-mc__aib:disabled { opacity: .55; cursor: progress; }
.sw-mc__tones { display: inline-flex; align-items: center; gap: 2px; }
.sw-mc__tones[hidden] { display: none; }
.sw-mc__sep { width: 1px; height: 16px; background: var(--hairline); margin: 0 4px; }
.sw-mc__body { width: 100%; box-sizing: border-box; min-height: 260px; border: 0; background: none; resize: vertical; outline: none;
  color: var(--text); font: inherit; font-size: var(--t-15, 15px); line-height: 1.6; padding: 4px 0; }
.sw-mc__points { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--sunken); }
.sw-mc__points[hidden] { display: none; }
.sw-mc__plabel { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--t-13); font-weight: 600; }
.sw-mc__pact { display: flex; justify-content: flex-end; gap: 8px; }
.sw-mc__fwd { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--t-13); color: var(--muted); }
.sw-mc__atts { display: flex; flex-direction: column; gap: 8px; }
.sw-mc__atts[hidden] { display: none; }
.sw-mc__atts .sw-mc__lab { width: auto; font-size: var(--t-13); }
.sw-mc__size { margin-left: 6px; font-size: var(--t-12); }
.sw-mc__size.is-over { color: var(--risk); font-weight: 600; }
.sw-mc__files { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.sw-mc__file { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 10px; border: 1px solid var(--hairline);
  border-radius: var(--r-md); background: var(--surface); min-width: 0; }
.sw-mc__ext { flex: none; display: inline-grid; place-items: center; width: 36px; height: 40px; border-radius: var(--r-sm);
  background: var(--sunken); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.sw-mc__fmeta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sw-mc__fname { font-size: var(--t-13); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-mc__fsize { font-size: var(--t-12); color: var(--muted); }
.sw-mc__grant { margin: 0 20px 10px; padding: 10px 12px; display: flex; gap: 8px; align-items: flex-start; border-radius: var(--r-md);
  background: var(--attention-bg); font-size: var(--t-13); }
.sw-mc__foot { display: flex; align-items: center; gap: 4px; padding: 10px 14px; border-top: 1px solid var(--hairline);
  background: var(--surface); flex-wrap: wrap; }
.sw-mc__ic { display: inline-flex; align-items: center; gap: 6px; height: 34px; min-width: 34px; justify-content: center; padding: 0 8px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font: inherit; font-size: var(--t-13); cursor: pointer; }
.sw-mc__ic:hover { background: var(--sunken); color: var(--text); }
.sw-mc__ic--maya { color: var(--text); }
.sw-mc__ic:focus-visible, .sw-mc__aib:focus-visible, .sw-mc__ccbtn:focus-visible, .sw-mc__chipx:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-mc__status { margin-left: 6px; font-size: var(--t-12); color: var(--muted); }
.sw-mc .sw-grow { flex: 1; }
@media (max-width: 640px) {
  #sheet:has(.sw-mc) .sw-modal__box { padding: 10px 8px; }
  .sw-mc__head, .sw-mc__page { padding-left: 14px; padding-right: 14px; }
  .sw-mc__lab { width: 54px; }
  .sw-mc__ic--maya span { display: none; }
  .sw-mc__body { min-height: 200px; }
  #sheet:has(.sw-mc) { width: 100%; }
  .sw-mc__foot { flex-wrap: nowrap; gap: 2px; padding: 8px 10px; }
  .sw-mc__foot [data-sheet-close] { display: none; }
  .sw-mc__status:not(:empty) { position: absolute; left: 14px; right: 14px; bottom: calc(100% + 4px); margin: 0; }
  .sw-mc__foot { position: relative; }
}
.sw-mc__status:empty { display: none; }

/* ============================================================ D392: compose as Gmail's window
   Docked bottom-right over the page (nothing behind it is blocked, a click outside does nothing),
   minimise / full screen / close on its bar, Gmail's bottom bar and formatting bar. */
.sw-cw { position: fixed; right: 24px; bottom: 0; z-index: 70; width: min(560px, calc(100vw - 32px)); }
.sw-cw__scrim { display: none; }
.sw-cw__win { position: relative; display: flex; flex-direction: column; height: min(640px, calc(100vh - 72px), calc(100dvh - 72px));
  background: var(--surface); color: var(--text); border: 1px solid var(--hairline); border-bottom: 0;
  border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: var(--shadow-lift), 0 12px 40px oklch(22% 0.015 265 / 0.18); overflow: hidden; }
.sw-cw.is-min { width: 320px; }
.sw-cw.is-min .sw-cw__win { height: auto; }
.sw-cw.is-min .sw-cw__form, .sw-cw.is-min .sw-cw__pop, .sw-cw.is-min .sw-cw__saved { display: none; }
.sw-cw.is-min .sw-cw__bar { cursor: pointer; }
.sw-cw.is-full { inset: 0; width: auto; display: grid; place-items: center; }
.sw-cw.is-full .sw-cw__scrim { display: block; position: absolute; inset: 0; background: oklch(22% 0.015 265 / 0.45); }
.sw-cw.is-full .sw-cw__win { width: min(1000px, calc(100vw - 48px)); height: min(820px, calc(100vh - 48px)); border-radius: var(--r-md); border-bottom: 1px solid var(--hairline); }

.sw-cw__bar { flex: none; display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 6px 0 16px; background: var(--sunken);
  border-bottom: 1px solid var(--hairline); }
.sw-cw__title { margin: 0; flex: 1; min-width: 0; font-size: var(--t-14); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-cw__saved { font-size: var(--t-12); color: var(--muted); margin-right: 6px; white-space: nowrap; }
.sw-cw__barb { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--r-sm); background: none;
  color: var(--muted); cursor: pointer; }
.sw-cw__barb:hover { background: var(--hairline); color: var(--text); }

.sw-cw__form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sw-cw__practice { margin: 0; padding: 6px 16px; font-size: var(--t-12); color: var(--attention); border-bottom: 1px solid var(--hairline); }
.sw-cw__line { flex: none; display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 16px; padding: 3px 0;
  border-bottom: 1px solid var(--hairline); }
.sw-cw__line[hidden] { display: none; }
.sw-cw__lab { flex: none; font-size: var(--t-14); color: var(--muted); }
.sw-cw__lab[hidden] { display: none; }
.sw-cw__line .sw-mc__chipin { min-width: 100px; padding: 6px 0; font-size: var(--t-14); }
.sw-cw__ccb { flex: none; display: inline-flex; gap: 2px; }
.sw-cw__ccbtn { border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--t-14); padding: 4px 6px; border-radius: var(--r-xs); cursor: pointer; }
.sw-cw__ccbtn:hover { color: var(--text); text-decoration: underline; }
.sw-cw__ccbtn[hidden] { display: none; }
.sw-cw__subj { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: var(--t-14); padding: 8px 0; outline: none; }
.sw-cw__subj::placeholder, .sw-cw__line .sw-mc__chipin::placeholder { color: var(--muted); }

.sw-cw__scroll { flex: 1; min-height: 0; overflow: auto; padding: 10px 16px 8px; cursor: text; }
.sw-cw__body { min-height: 100%; outline: none; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; color: var(--text);
  overflow-wrap: anywhere; }
.sw-cw__body.is-plain { font-family: inherit; }
.sw-cw__body img { max-width: 100%; height: auto; }
.sw-cw__body blockquote { margin: 0 0 0 .8ex; padding-left: 1ex; border-left: 1px solid var(--hairline); }
.sw-cw__body a { color: var(--ink-blue); }
.sw-cw__body ul, .sw-cw__body ol { margin: 0; padding-left: 28px; }
.sw-cw__fwd { margin: 10px 0 0; display: flex; align-items: center; gap: 6px; font-size: var(--t-13); color: var(--muted); }
.sw-cw__files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sw-cw__files:empty { display: none; }
.sw-cw__file { display: flex; align-items: center; gap: 6px; max-width: 420px; padding: 6px 6px 6px 10px; border-radius: var(--r-sm);
  background: var(--sunken); font-size: var(--t-13); }
.sw-cw__file.is-up { opacity: .7; }
.sw-cw__fname { font-weight: 600; color: var(--ink-blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sw-cw__fsize { color: var(--muted); white-space: nowrap; }
.sw-cw__file .sw-mc__chipx { margin-left: auto; }

.sw-cw__help { flex: none; margin: 0 12px 8px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-lift); display: flex; flex-direction: column; gap: 8px; }
.sw-cw__help[hidden] { display: none; }
.sw-cw__helphead { display: flex; align-items: center; gap: 6px; font-size: var(--t-14); }
.sw-cw__points { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--sunken); color: var(--text); font: inherit; font-size: var(--t-14); padding: 8px 10px; }
.sw-cw__points:focus { outline: 2px solid var(--focus); outline-offset: 0; }
.sw-cw__helpacts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sw-cw__refine { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sw-cw__chip { border: 1px solid var(--hairline); background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-13);
  padding: 5px 10px; border-radius: var(--r-pill); cursor: pointer; }
.sw-cw__chip:hover { background: var(--sunken); }
.sw-cw__chip:disabled { opacity: .6; cursor: progress; }

.sw-cw__fmt { flex: none; display: flex; align-items: center; gap: 1px; margin: 0 12px 6px; padding: 3px 4px; border-radius: var(--r-sm);
  background: var(--surface); box-shadow: 0 1px 3px oklch(22% 0.015 265 / 0.16), 0 0 0 1px var(--hairline); overflow-x: auto; scrollbar-width: none; }
.sw-cw__fmt[hidden] { display: none; }
.sw-cw__fb { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 28px; height: 30px; padding: 0 4px;
  border: 0; border-radius: var(--r-xs); background: none; color: var(--muted); font: inherit; font-size: var(--t-13); cursor: pointer; }
.sw-cw__fb--wide { padding: 0 8px; color: var(--text); white-space: nowrap; }
.sw-cw__fb:hover { background: var(--sunken); color: var(--text); }
.sw-cw__fb[aria-pressed="true"] { background: var(--gold-quiet); color: var(--text); }
.sw-cw__fb { position: relative; }
.sw-cw__swatch { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px; border-radius: 2px; background: var(--text); }
.sw-cw__sep { flex: none; width: 1px; height: 18px; margin: 0 3px; background: var(--hairline); }

.sw-cw__grant { flex: none; margin: 0 12px 8px; padding: 8px 10px; display: flex; gap: 8px; align-items: flex-start; border-radius: var(--r-sm);
  background: var(--attention-bg); font-size: var(--t-13); }
.sw-cw__foot { flex: none; display: flex; align-items: center; gap: 2px; padding: 10px 12px 12px 16px; }
.sw-cw__send { min-width: 88px; height: 36px; border-radius: var(--r-pill); margin-right: 8px; font-weight: 600; }
.sw-cw__ic { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer; }
.sw-cw__ic .sw-mark { width: 18px; height: 18px; }
.sw-cw__ic:hover { background: var(--sunken); color: var(--text); }
.sw-cw__ic[aria-pressed="true"] { background: var(--gold-quiet); color: var(--text); }
.sw-cw__ic[hidden] { display: none; }
.sw-cw__ic--maya { color: var(--gold-ink); }
.sw-cw__ic:focus-visible, .sw-cw__fb:focus-visible, .sw-cw__barb:focus-visible, .sw-cw__ccbtn:focus-visible, .sw-cw__chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-cw__status { margin-left: 6px; font-size: var(--t-12); color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-cw__status:empty { display: none; }

.sw-cw__pop { position: absolute; z-index: 3; min-width: 160px; max-width: calc(100% - 16px); padding: 6px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-lift); }
.sw-cw__pop[hidden] { display: none; }
.sw-cw__menu { display: flex; flex-direction: column; }
.sw-cw__menu--row { flex-direction: row; }
.sw-cw__menu button { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--text); font: inherit; font-size: var(--t-14);
  padding: 7px 10px; border-radius: var(--r-xs); text-align: left; cursor: pointer; white-space: nowrap; }
.sw-cw__menu button:hover, .sw-cw__menu button:focus-visible { background: var(--sunken); outline: none; }
.sw-cw__poplab { margin: 0 0 6px; font-size: var(--t-12); color: var(--muted); }
.sw-cw__grid { display: grid; grid-template-columns: repeat(6, 22px); gap: 4px; }
.sw-cw__color { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--hairline); cursor: pointer; padding: 0; }
.sw-cw__color:hover { transform: scale(1.12); }
.sw-cw__emoji { display: grid; grid-template-columns: repeat(8, 32px); gap: 2px; }
.sw-cw__emoji button { width: 32px; height: 32px; border: 0; background: none; border-radius: var(--r-xs); font-size: 18px; cursor: pointer; }
.sw-cw__emoji button:hover { background: var(--sunken); }
.sw-cw__linkf { width: min(320px, calc(100vw - 64px)); display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.sw-cw__fl { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-12); color: var(--muted); }

.sw-cw__drop { position: absolute; inset: 40px 0 0; z-index: 4; display: grid; place-items: center; margin: 8px; border: 2px dashed var(--gold-ink);
  border-radius: var(--r-md); background: var(--surface); color: var(--text); font-size: var(--t-16); font-weight: 600; pointer-events: none; }
.sw-cw__drop[hidden] { display: none; }
.sw-cw__drop span { display: inline-flex; align-items: center; gap: 8px; }

.sw-cw__onphone { display: none !important; }
@media (max-width: 640px) { .sw-cw__menu .sw-cw__onphone { display: flex !important; } }
.sw-cw__menu kbd { margin-left: auto; padding-left: 16px; font: inherit; font-size: var(--t-12); color: var(--muted); }
.sw-mail__dhead { margin: 10px 12px 4px; font-size: var(--t-12); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sw-mail__dmark { color: var(--risk); font-weight: 600; }

@media (max-width: 640px) {
  .sw-cw, .sw-cw.is-full { inset: 0; width: auto; right: 0; }
  .sw-cw .sw-cw__win, .sw-cw.is-full .sw-cw__win { width: 100%; height: 100%; height: 100dvh; border-radius: 0; border: 0; }
  .sw-cw.is-min { inset: auto 0 0 auto; width: 260px; }
  .sw-cw.is-min .sw-cw__win { height: auto; border-radius: var(--r-md) 0 0 0; }
  .sw-cw [data-cw-full] { display: none; }
  .sw-cw__offphone { display: none; }
  .sw-cw__foot { padding-left: 10px; padding-right: 8px; }
  .sw-cw__ic { width: 32px; }
  .sw-cw__send { min-width: 76px; margin-right: 4px; }
  .sw-cw__foot { overflow-x: auto; scrollbar-width: none; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .sw-cw__body { font-size: 16px; }
  .sw-cw__line .sw-mc__chipin, .sw-cw__subj { font-size: 16px; }
}

/* D394: answered — the last word in the conversation is ours */
.sw-mail__replied { display: inline-flex; color: var(--ok, var(--muted)); transform: scaleX(-1); }

.sw-cw__maya { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 8px 16px 0; padding: 3px;
  align-self: flex-start; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--surface); }
.sw-cw__mayab { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--text); font: inherit;
  font-size: var(--t-13); padding: 5px 10px; border-radius: var(--r-pill); cursor: pointer; }
.sw-cw__mayab:hover { background: var(--sunken); }
.sw-cw__mayab:disabled { opacity: .6; cursor: progress; }
.sw-cw__mayab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-cw__mayab .sw-mark { color: var(--gold-ink); }
.sw-cw__tones { display: inline-flex; align-items: center; gap: 2px; }
.sw-cw__tones[hidden] { display: none; }

.sw-mailadd__rems { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; }

/* D395: a project's About card — Description and Address */
.sw-pa { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px 32px; padding: 6px 2px; }
.sw-pa__block { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sw-pa__h { margin: 0; font-size: var(--t-12); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sw-pa__desc { white-space: pre-wrap; font-size: var(--t-14); line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.sw-pa__desc a { color: var(--ink-blue); }
.sw-pa__empty { margin: 0; color: var(--muted); font-size: var(--t-14); }
.sw-pa__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sw-pa__maya .sw-mark { color: var(--gold-ink); }
.sw-pa__text { width: 100%; box-sizing: border-box; min-height: 150px; resize: vertical; line-height: 1.55; }
.sw-pa__points { display: flex; flex-direction: column; gap: 4px; }
.sw-pa__points[hidden] { display: none; }
.sw-pa__lbl { font-size: var(--t-12); color: var(--muted); }
.sw-pa__note { font-size: var(--t-12); color: var(--muted); }
.sw-pa__note.is-bad { color: var(--risk); }
.sw-pa__place { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; font-size: var(--t-14); }
.sw-pa__place > .sw-mark { margin-top: 3px; color: var(--muted); }
.sw-pa__addr { flex: 1; min-width: 160px; line-height: 1.5; }
.sw-pa__find { display: flex; flex-direction: column; gap: 8px; }
.sw-pa__sugg { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; }
.sw-pa__opt { display: flex; align-items: flex-start; gap: 8px; text-align: left; border: 0; background: none; color: var(--text); font: inherit;
  font-size: var(--t-14); padding: 8px; border-radius: var(--r-sm); cursor: pointer; }
.sw-pa__opt:hover, .sw-pa__opt:focus-visible { background: var(--sunken); outline: none; }
.sw-pa__opt > .sw-mark { margin-top: 3px; color: var(--muted); flex: none; }
.sw-pa__sec { display: block; font-size: var(--t-12); color: var(--muted); }
@media (max-width: 760px) { .sw-pa { grid-template-columns: 1fr; } }

/* D396: the Folders page */
.sw-fld__bar { flex-wrap: wrap; gap: 8px; }
.sw-fld__search input { min-width: 220px; }
.sw-fld__next { display: block; margin-top: 2px; font-size: var(--t-12); color: var(--muted); font-weight: 400; max-width: 340px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-fld__by { display: block; font-size: var(--t-12); color: var(--muted); }
.sw-tbl--fld tbody tr { cursor: pointer; }
.sw-tbl--fld .sw-tbl__title a { display: inline-flex; align-items: center; gap: 6px; }

/* D397: "Swarm has been updated" — an open tab on an older build. Sits where the toast does,
   above the phone tab bar, and stays until Reload. */
.sw-update {
  position: fixed; left: 50%; bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--surface); color: var(--text);
  border-radius: var(--r-md); box-shadow: var(--shadow-panel);
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-2); font-size: var(--t-14);
  max-width: calc(100vw - var(--s-4)); z-index: 60;
  display: flex; align-items: center; gap: var(--s-2);
}
@media (max-width: 760px) { .sw-update { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* D398: "Paid with" — one dropdown; a new method's kind, name and last four open under it. */
.sw-pp__sel { width: 100%; max-width: 420px; }
.sw-pp__detail:empty { display: none; }
.sw-pp__detail { margin-top: var(--s-1); display: grid; gap: var(--s-1); }
.sw-pp__kind { justify-self: start; }

/* D398: Settings › Payment methods */
.sw-pm__intro { padding: var(--s-1) 0 var(--s-2); max-width: 72ch; }
.sw-pm__name { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 600; }
.sw-pm__note { display: block; color: var(--muted); font-weight: 400; font-size: var(--t-13, 13px); margin-top: 2px; }
.sw-pm__acts { white-space: nowrap; text-align: right; }
.sw-pm__acts .sw-link + .sw-link { margin-left: var(--s-2); }
.sw-tbl--pm tr.is-retired th, .sw-tbl--pm tr.is-retired td { color: var(--muted); }
.sw-pm__retired { margin-top: var(--s-3); }
.sw-pm__retired > summary { cursor: pointer; font-weight: 600; padding: var(--s-1) 0; }

/* D399: a receipt says which invoice(s) it pays, before it is recorded. */
.sw-bf__links { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-1); }
.sw-bf__lchip { display: inline-flex; align-items: center; gap: 6px; }
.sw-bf__lx { border: 0; background: none; color: inherit; padding: 2px; margin-left: 2px; cursor: pointer; display: inline-flex; border-radius: 50%; }
.sw-bf__lx:hover { background: color-mix(in oklab, currentColor 12%, transparent); }
.sw-bf__lbtn { justify-self: start; }
.sw-bf__lpanel { margin-top: var(--s-1); display: grid; gap: var(--s-1); padding: var(--s-1); border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.sw-bf__lrows { display: grid; gap: 2px; max-height: 260px; overflow: auto; }
.sw-bf__lrow { display: grid; gap: 2px; text-align: left; border: 0; background: none; padding: var(--s-1); border-radius: var(--r-sm); cursor: pointer; color: var(--text); font: inherit; }
.sw-bf__lrow:hover, .sw-bf__lrow:focus-visible { background: color-mix(in oklab, var(--text) 6%, transparent); }
.sw-bf__lmain { font-size: var(--t-14); }
.sw-bf__lsub { font-size: var(--t-13); color: var(--muted); }
.sw-bf__lmatch { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: var(--t-12); font-weight: 600;
  background: color-mix(in oklab, var(--ok, #2f7d4f) 16%, transparent); color: var(--ok, #2f7d4f); }

/* D400: the comment a tag's link points at — marked for a moment when the page opens on it. */
.sw-tl__item.is-target > .sw-tl__main, .sw-tl__item.is-target .sw-tl__bubble {
  outline: 2px solid color-mix(in oklab, var(--gold, #b8892b) 70%, transparent); outline-offset: 3px; border-radius: var(--r-md);
  transition: outline-color .6s ease;
}

/* ============================================================ D402: Chat
   The "Swarm Chat" canvas, in the app's tokens: conversation list | conversation | thread on a
   desk (rows, Slack-like); list → full-screen conversation on a phone (bubbles, WhatsApp-like),
   the composer riding above the keyboard. Gold stays for the screen's one main action (New on
   the list, Send in a conversation) and the unread counts; a tagged message gets a gold edge. */
.main:has(#sw-chat) { padding-bottom: var(--s-2); }
.main:has(#sw-chat) .sw-mstrip { display: none; }          /* Maya is in the conversation itself */
.main:has(#sw-chat) .main__bar { margin-bottom: var(--s-2); }
.sw-chat {
  --chat-h: calc(100dvh - 96px);
  display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 0;
  height: var(--chat-h); min-height: 480px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden;
}
.sw-chat.has-thread { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(300px, 380px); }
.sw-chat__side { border-right: 1px solid var(--hairline); min-height: 0; display: flex; flex-direction: column; background: var(--rail); }
.sw-chat__sidein { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.sw-chat__sidehead { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); padding: 14px 14px 8px; }
.sw-chat__sidehead h1 { margin: 0; font-size: var(--t-20); font-weight: 800; letter-spacing: -0.01em; }
.sw-chat__search { padding: 0 12px 8px; }
.sw-chat__search .sw-input { width: 100%; border-radius: var(--r-pill); background: var(--surface); }
.sw-chat__who { padding: 2px 0 6px; }
.sw-chat__whorow { display: flex; gap: 6px; overflow-x: auto; padding: 4px 12px; scrollbar-width: none; }
.sw-chat__whorow::-webkit-scrollbar { display: none; }
.sw-chat__whop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 52px; flex: none;
  padding: 2px 0; border: 0; background: none; font: inherit; color: var(--body); cursor: pointer; border-radius: var(--r-sm); }
.sw-chat__whop:hover { background: var(--sunken); }
.sw-chat__whon { max-width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-11); font-weight: 600; }
.sw-chat__site { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); padding: 0 4px; border-radius: var(--r-pill);
  background: var(--ok); color: var(--surface); font-size: 9px; font-weight: 800; line-height: 13px; white-space: nowrap; }
.sw-chat__chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 12px 8px; scrollbar-width: none; border-bottom: 1px solid var(--hairline); }
.sw-chat__chips::-webkit-scrollbar { display: none; }
.sw-chat__chip { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 11px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline); background: var(--surface); color: var(--body); font: inherit; font-size: var(--t-12); font-weight: 650; cursor: pointer; }
.sw-chat__chip.is-on { background: var(--solid-cta); border-color: var(--solid-cta); color: var(--solid-cta-ink); }
.sw-chat__chipn { font-variant-numeric: tabular-nums; opacity: 0.85; }
.sw-chat__list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 6px 12px; }
.sw-chat__grp { margin: 10px 8px 4px; font-size: var(--t-11); font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.sw-chat__row { display: flex; gap: 10px; align-items: center; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--r-md);
  background: none; color: inherit; text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
.sw-chat__row:hover { background: var(--sunken); }
.sw-chat__row.is-on { background: var(--surface); box-shadow: var(--shadow-soft); }
.sw-chat__row.is-out { opacity: 0.78; }
.sw-chat__rowb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sw-chat__rowt { display: flex; align-items: baseline; gap: 6px; }
.sw-chat__rown { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-14); font-weight: 550; color: var(--text); }
.sw-chat__row.is-unread .sw-chat__rown { font-weight: 800; }
.sw-chat__rowwhen { flex: none; font-size: var(--t-11); color: var(--faint); font-variant-numeric: tabular-nums; }
.sw-chat__row.is-unread .sw-chat__rowwhen { color: var(--gold-ink); font-weight: 700; }
.sw-chat__rowp { display: flex; align-items: center; gap: 6px; }
.sw-chat__rowpre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-13); color: var(--muted); }
.sw-chat__row.is-unread .sw-chat__rowpre { color: var(--body); }
.sw-chat__badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--gold); color: var(--on-gold);
  font-size: var(--t-11); font-weight: 800; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.sw-chat__at { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink-blue); color: var(--surface); font-size: 11px; font-weight: 800;
  display: inline-grid; place-items: center; }
.sw-chat__muted { color: var(--faint); display: inline-flex; }
.sw-chat__none, .sw-chat__loading { padding: var(--s-2); color: var(--muted); font-size: var(--t-14); }

/* faces and tiles */
.sw-cf { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--cf-bg, var(--sunken)); color: var(--cf-ink, var(--text)); font-size: 12px; font-weight: 750; letter-spacing: 0.01em; }
:root[data-theme="dark"] .sw-cf { filter: saturate(0.9) brightness(0.85); }
.sw-cf--maya { background: var(--gold); color: var(--on-gold); font-weight: 850; }
.sw-cf--tile, .sw-cf--who { width: 40px; height: 40px; font-size: 13px; }
.sw-cf--sm { width: 28px; height: 28px; font-size: 11px; }
.sw-cf--xs { width: 20px; height: 20px; font-size: 9px; }
.sw-cf__on { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--rail); }
.sw-ct { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; font-weight: 800; font-size: 17px;
  background: oklch(92% 0.05 var(--ct-h, 265)); color: oklch(38% 0.11 var(--ct-h, 265)); }
:root[data-theme="dark"] .sw-ct { background: oklch(32% 0.06 var(--ct-h, 265)); color: oklch(86% 0.08 var(--ct-h, 265)); }
.sw-ct--group { font-size: 13px; border-radius: 50%; }
.sw-ct--contact { border-radius: 12px 12px 12px 4px; }
.sw-ct--sm { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.sw-ct--sm.sw-ct--contact { border-radius: 8px 8px 8px 3px; }

/* the conversation */
.sw-chat__main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--canvas); }
.sw-chat__empty { margin: auto; max-width: 380px; padding: var(--s-4); text-align: center; color: var(--muted); }
.sw-chat__empty h2 { margin: 8px 0 4px; font-size: var(--t-18); color: var(--text); }
.sw-chat__emptymark { width: 44px; height: 44px; color: var(--faint); }
.sw-chat__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--hairline); background: var(--surface); min-height: 60px; }
.sw-chat__title { flex: 1; min-width: 0; }
.sw-chat__title h2 { margin: 0; font-size: var(--t-16); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-chat__title p { margin: 1px 0 0; font-size: var(--t-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-chat__hash { color: var(--faint); font-weight: 600; margin-right: 1px; }
.sw-chat__arch { font-size: var(--t-11); font-weight: 700; padding: 1px 6px; border-radius: var(--r-pill); background: var(--sunken); color: var(--muted); vertical-align: middle; }
.sw-chat__faces { display: inline-flex; align-items: center; }
.sw-chat__faces .sw-cf { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.sw-chat__facesn { margin-left: 4px; margin-right: 4px; font-size: var(--t-12); color: var(--muted); font-weight: 650; }
.sw-chat__back { display: none; }
.sw-iconbtn.is-on { color: var(--gold-ink); }
.sw-iconbtn.is-on .sw-mark { fill: currentColor; }
.sw-chat__pin { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--hairline);
  background: var(--gold-quiet); color: var(--body); font: inherit; font-size: var(--t-13); text-align: left; cursor: pointer; }
.sw-chat__pin .sw-mark { color: var(--gold-ink); flex: none; }
.sw-chat__pint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-chat__pinn { flex: none; font-size: var(--t-12); font-weight: 700; color: var(--gold-ink); }
.sw-chat__log { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0 12px; overscroll-behavior: contain; }
.sw-chat__older, .sw-chat__start { text-align: center; padding: 10px 16px; color: var(--muted); font-size: var(--t-13); line-height: 1.5; }
.sw-chat__start { margin: 18px auto; max-width: 460px; }
.sw-chat__day, .sw-chat__new, .sw-chat__tcount { display: flex; align-items: center; gap: 10px; margin: 12px 16px 6px; font-size: var(--t-12); font-weight: 700; color: var(--muted); }
.sw-chat__day::before, .sw-chat__day::after, .sw-chat__new::before, .sw-chat__new::after, .sw-chat__tcount::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.sw-chat__day span { padding: 2px 10px; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--surface); }
.sw-chat__new { color: var(--risk); }
.sw-chat__new::before, .sw-chat__new::after { background: var(--risk); opacity: 0.5; }
.sw-chat__typing { min-height: 18px; padding: 0 16px 2px; font-size: var(--t-12); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.sw-chat__dots { display: inline-flex; gap: 3px; }
.sw-chat__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: sw-dots 1.1s infinite ease-in-out; }
.sw-chat__dots i:nth-child(2) { animation-delay: 0.15s; } .sw-chat__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sw-dots { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .sw-chat__dots i { animation: none; } }
.sw-chat__below { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 3; padding: 6px 14px; border: 0; border-radius: var(--r-pill);
  background: var(--solid-cta); color: var(--solid-cta-ink); font: inherit; font-size: var(--t-13); font-weight: 700; box-shadow: var(--shadow-lift); cursor: pointer; }
.sw-chat__join { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 12px; font-size: var(--t-13); color: var(--muted); }
.sw-chat__ro { margin: 0; padding: 14px; text-align: center; color: var(--muted); border-top: 1px solid var(--hairline); }

/* one message (desk: rows) */
.sw-cm { position: relative; display: flex; gap: 10px; padding: 4px 16px 4px 14px; }
.sw-cm:hover { background: color-mix(in oklch, var(--sunken) 60%, transparent); }
.sw-cm.is-cont { padding-top: 1px; padding-bottom: 1px; }
.sw-cm__face { flex: none; width: 34px; display: flex; justify-content: center; padding-top: 2px; }
.sw-cm__t2 { display: none; font-size: 10.5px; color: var(--faint); padding-top: 3px; font-variant-numeric: tabular-nums; }
.sw-cm.is-cont:hover .sw-cm__t2 { display: block; }
.sw-cm__b { flex: 1; min-width: 0; }
.sw-cm__head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sw-cm__who { font-size: var(--t-14); font-weight: 750; color: var(--text); }
.sw-cm__ai { font-size: 10px; font-weight: 800; padding: 0 5px; border-radius: 4px; background: var(--gold-quiet); color: var(--gold-ink); }
.sw-cm__t { font-size: var(--t-11); color: var(--faint); font-variant-numeric: tabular-nums; }
.sw-cm__via, .sw-cm__pinned { font-size: var(--t-11); color: var(--muted); display: inline-flex; align-items: center; gap: 3px; }
.sw-cm__pinned { color: var(--gold-ink); font-weight: 650; }
.sw-cm__tb { display: none; }
.sw-cm__text { font-size: var(--t-14); line-height: 1.5; color: var(--body); overflow-wrap: anywhere; }
.sw-cm__text p { margin: 0; }
.sw-cm__text .sw-cm__gap { height: 0.5em; }
.sw-cm__text ul, .sw-cm__text ol { margin: 2px 0; padding-left: 1.3em; }
.sw-cm__text li { margin: 1px 0; }
.sw-cm__text blockquote { margin: 2px 0; padding: 0 0 0 10px; border-left: 3px solid var(--hairline); color: var(--muted); }
.sw-cm__text code { padding: 0 4px; border-radius: 4px; background: var(--sunken); font-size: 0.92em; }
.sw-cm__text a { color: var(--ink-blue); }
.sw-cm__ck { list-style: none; padding-left: 0 !important; }
.sw-cm__ck li { display: flex; gap: 6px; align-items: baseline; }
.sw-cm__box { flex: none; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--muted); display: inline-grid; place-items: center; font-size: 10px; font-weight: 800; transform: translateY(2px); }
.sw-cm__ck li.is-done > span:last-child { text-decoration: line-through; color: var(--muted); }
.sw-cm__ck li.is-done .sw-cm__box { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.sw-cm__ed { margin-left: 4px; font-size: var(--t-11); color: var(--faint); }
/* D441: the ask a reply of Maya's answers. One quiet line, never wider than the bubble. */
.sw-cm__re { display: flex; align-items: baseline; gap: 4px; max-width: 100%; margin: 0 0 4px; padding: 0;
  border: 0; background: none; font: inherit; font-size: var(--t-12); line-height: 1.35; color: var(--muted);
  text-align: left; cursor: pointer; min-width: 0; }
.sw-cm__re-a { flex: none; color: var(--faint); }
.sw-cm__re-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sw-cm__re b { font-weight: 600; }
.sw-cm__re:hover .sw-cm__re-t, .sw-cm__re:focus-visible .sw-cm__re-t { text-decoration: underline; }
.sw-cm__gone { margin: 0; font-style: italic; color: var(--faint); font-size: var(--t-13); }
.sw-cm.is-tagged:not(.is-mine) { box-shadow: inset 3px 0 0 var(--gold); background: color-mix(in oklch, var(--gold-quiet) 55%, transparent); }
.sw-cm.is-target { animation: sw-cm-flash 2.4s ease-out; }
@keyframes sw-cm-flash { 0%, 30% { background: var(--gold-quiet); } 100% { background: transparent; } }
.sw-cm--sys { justify-content: center; padding: 4px 16px; font-size: var(--t-12); color: var(--muted); }
.sw-cm--sys:hover { background: none; }
.sw-cm__rx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sw-cm__r { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border-radius: var(--r-pill); border: 1px solid var(--hairline);
  background: var(--surface); color: var(--body); font: inherit; font-size: var(--t-12); cursor: pointer; }
.sw-cm__r b { font-weight: 700; font-variant-numeric: tabular-nums; }
.sw-cm__r.is-mine { border-color: var(--gold); background: var(--gold-quiet); }
.sw-cm__radd { color: var(--muted); padding: 0 6px; opacity: 0; }
.sw-cm:hover .sw-cm__radd, .sw-cm__radd:focus-visible { opacity: 1; }
.sw-cm__thr { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 3px 8px 3px 4px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; font: inherit; font-size: var(--t-12); color: var(--muted); cursor: pointer; }
.sw-cm__thr b { color: var(--ink-blue); }
.sw-cm__thr:hover { border-color: var(--hairline); background: var(--surface); }
.sw-cm__thrf { display: inline-flex; }
.sw-cm__thrf .sw-cf { margin-right: -4px; box-shadow: 0 0 0 1.5px var(--surface); }
.sw-cm__tools { position: absolute; top: -14px; right: 14px; display: none; gap: 1px; padding: 2px; border-radius: var(--r-sm);
  border: 1px solid var(--hairline); background: var(--surface); box-shadow: var(--shadow-soft); z-index: 2; }
.sw-cm:hover .sw-cm__tools, .sw-cm:focus-within .sw-cm__tools { display: flex; }
.sw-cm__tool { width: 30px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 15px; cursor: pointer; display: inline-grid; place-items: center; }
.sw-cm__tool:hover { background: var(--sunken); color: var(--text); }
.sw-cm__pics { display: grid; gap: 4px; margin-top: 6px; max-width: 420px; }
.sw-cm__pics--1 { grid-template-columns: 1fr; } .sw-cm__pics--2 { grid-template-columns: 1fr 1fr; }
.sw-cm__pics--3, .sw-cm__pics--4 { grid-template-columns: 1fr 1fr; }
.sw-cm__pic { position: relative; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden; background: var(--sunken); cursor: zoom-in; aspect-ratio: 4 / 3; }
.sw-cm__pics--1 .sw-cm__pic { aspect-ratio: auto; max-height: 320px; }
.sw-cm__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-cm__picn { position: absolute; inset: 0; display: grid; place-items: center; background: oklch(22% 0.015 265 / 0.5); color: white; font-size: var(--t-20); font-weight: 800; }
.sw-cm__file { display: flex; align-items: center; gap: 8px; margin-top: 6px; max-width: 360px; width: 100%; padding: 8px 10px; border-radius: var(--r-md);
  border: 1px solid var(--hairline); background: var(--surface); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.sw-cm__fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-13); font-weight: 600; }
.sw-cm__fsize { font-size: var(--t-12); color: var(--muted); }

/* cards */
.sw-cc { margin-top: 6px; max-width: 460px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-soft); overflow: hidden; }
.sw-cc__k { display: flex; align-items: center; gap: 5px; padding: 10px 12px 0; font-size: var(--t-11); font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sw-cc__title { display: block; padding: 4px 12px 0; font-size: var(--t-16); font-weight: 750; color: var(--text); line-height: 1.35; }
.sw-cc__titleb { width: 100%; border: 0; background: none; font: inherit; font-size: var(--t-16); font-weight: 750; text-align: left; cursor: text; color: var(--text); }
.sw-cc__titleb .sw-mark { color: var(--faint); vertical-align: middle; }
.sw-cc__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
.sw-cc__chip { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline); background: var(--sunken); color: var(--text); font: inherit; font-size: var(--t-12); font-weight: 650; text-decoration: none; white-space: nowrap; }
.sw-cc__dd { cursor: pointer; }
.sw-cc__dd:hover { border-color: var(--muted); }
.sw-cc__chip--due { background: var(--tape-quiet); border-color: transparent; }
.sw-cc__chip--code { background: var(--surface); }
.sw-cc__sel, .sw-cc__date { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.sw-cc__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--hairline); background: var(--canvas); }
.sw-cc__wait { margin-right: auto; font-size: var(--t-12); color: var(--muted); }
.sw-cc.is-off { padding: 8px 12px; box-shadow: none; color: var(--muted); font-size: var(--t-13); }
.sw-cc.is-off .sw-cc__k { display: inline; padding: 0; }
.sw-cc__done { display: flex; gap: 10px; padding: 12px 12px 4px; }
.sw-cc__done .sw-cc__k, .sw-cc__done .sw-cc__title, .sw-cc__done .sw-cc__chips { padding-left: 0; padding-right: 0; }
.sw-cc__done .sw-cc__k { padding-top: 0; color: var(--ok); }
.sw-cc__ok { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: inline-grid; place-items: center; }
.sw-cc__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 4px; }
.sw-cc__head .sw-mark { color: var(--attention); }
.sw-cc__head b { flex: 1; font-size: var(--t-14); }
.sw-cc__n { font-size: var(--t-12); color: var(--muted); font-weight: 650; font-variant-numeric: tabular-nums; }
.sw-cc__items { list-style: none; margin: 0; padding: 0 6px 2px; }
.sw-cc__items li { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--r-sm); font-size: var(--t-14); }
.sw-cc__box { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.8px solid var(--muted); background: var(--surface); color: var(--surface);
  display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.sw-cc__box:hover { border-color: var(--ok); }
.sw-cc__items li.is-done .sw-cc__box { background: var(--ok); border-color: var(--ok); }
.sw-cc__it { flex: 1; min-width: 0; color: var(--body); }
.sw-cc__items li.is-done .sw-cc__it { text-decoration: line-through; color: var(--muted); }
.sw-cc__by { font-size: var(--t-11); color: var(--faint); }
.sw-cc__add { padding: 0 12px 10px 44px; }
.sw-cc__addin { width: 100%; border: 0; border-bottom: 1px dashed var(--hairline); background: none; padding: 6px 0; font: inherit; font-size: var(--t-14); color: var(--text); }
.sw-cc__addin:focus { outline: none; border-bottom-color: var(--ink-blue); }
.sw-cc--maya { border-color: var(--gold); }
.sw-cc--maya .sw-cc__k .sw-mark { color: var(--gold-ink); }
.sw-cc--maya .sw-cc__title { font-size: var(--t-14); font-weight: 600; padding-bottom: 10px; }
.sw-cc--maya.is-done { border-color: var(--hairline); }
.sw-cc--maya.is-done .sw-cc__k { color: var(--ok); }

/* the composer */
.sw-chat__comp { flex: none; margin: 0 12px 12px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-soft); }
.sw-chat__comp:focus-within { border-color: color-mix(in oklch, var(--ink-blue) 50%, var(--hairline)); }
.sw-chat__comp.is-editing { border-color: var(--gold); }
.sw-chat__editing { display: flex; align-items: center; gap: 6px; padding: 6px 12px 0; font-size: var(--t-12); color: var(--gold-ink); font-weight: 650; }
.sw-chat__editing span { flex: 1; }
.sw-chat__fmt { display: flex; gap: 2px; padding: 4px 6px 0; }
.sw-chat__fb { width: 30px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-grid; place-items: center; }
.sw-chat__fb:hover { background: var(--sunken); color: var(--text); }
.sw-chat__line { display: flex; align-items: flex-end; gap: 4px; padding: 4px 6px 6px; }
.sw-chat__input { flex: 1; min-width: 0; min-height: 36px; max-height: 220px; resize: none; border: 0; background: none; padding: 8px 4px;
  font: inherit; font-size: var(--t-14); line-height: 1.45; color: var(--text); }
.sw-chat__input:focus { outline: none; }
.sw-chat__send { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: inline-grid; place-items: center; cursor: pointer; }
.sw-chat__send:hover { background: var(--gold-hover); }
.sw-chat__files { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 10px 0; }
.sw-chat__files[hidden] { display: none; }
.sw-chat__up { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 4px 4px 4px 4px; border-radius: var(--r-sm); background: var(--sunken); font-size: var(--t-12); }
.sw-chat__up img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; }
.sw-chat__up.is-wait { opacity: 0.6; } .sw-chat__up.is-err { color: var(--risk); }
.sw-chat__upn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-chat__upx { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; display: inline-flex; }

/* the thread */
.sw-chat__thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--hairline); background: var(--canvas); }
.sw-chat__thread[hidden] { display: none; }
.sw-chat__tlog .sw-cm:first-child { padding-top: 10px; }
.sw-chat__tcount { margin-top: 4px; }

/* sheets */
.sw-chat__emopop { position: fixed; z-index: 90; display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; padding: 6px; border-radius: var(--r-md);
  border: 1px solid var(--hairline); background: var(--surface); box-shadow: var(--shadow-panel); }
.sw-chat__emopop button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; font-size: 19px; cursor: pointer; }
.sw-chat__emopop button:hover, .sw-chat__emopop button:focus-visible { background: var(--sunken); }
.sw-chat__act { display: flex; flex-direction: column; gap: 2px; }
.sw-chat__actrx { display: flex; justify-content: space-between; gap: 4px; padding: 4px 2px 8px; }
.sw-chat__actrx button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--sunken); font-size: 21px; cursor: pointer; display: inline-grid; place-items: center; color: var(--muted); }
.sw-chat__actq { margin: 0 4px 6px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--sunken); font-size: var(--t-13); color: var(--body);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sw-chat__acthr { border: 0; border-top: 1px solid var(--hairline); margin: 4px 0; }
.sw-chat__act .sw-tbrow, .sw-chat__plusg + .sw-tbrow, .sw-tbsheet .sw-tbrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font: inherit; font-size: var(--t-14); font-weight: 500; text-align: left; cursor: pointer; }
.sw-chat__act .sw-tbrow:hover, .sw-tbsheet .sw-tbrow:hover { background: var(--sunken); }
.sw-chat__act .sw-tbrow__m { width: 18px; height: 18px; color: var(--muted); }
.sw-tbrow--risk, .sw-tbrow--risk .sw-tbrow__m { color: var(--risk) !important; }
.sw-chat__plusg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 6px; padding: 6px 0 10px; }
.sw-chat__tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; font: inherit; font-size: var(--t-13); font-weight: 650; color: var(--text); cursor: pointer; border-radius: var(--r-md); }
.sw-chat__tile:hover { background: var(--sunken); }
.sw-chat__tilei { width: 54px; height: 54px; border-radius: 18px; display: inline-grid; place-items: center; background: var(--info-bg); color: var(--ink-blue); }
.sw-chat__tilei .sw-mark { width: 24px; height: 24px; }
.sw-chat__tilei--task { background: var(--gold-quiet); color: var(--gold-ink); }
.sw-chat__tilei--list { background: var(--attention-bg); color: var(--attention); }
.sw-chat__tilei--maya { background: var(--gold); color: var(--on-gold); }
.sw-chat__pplist { display: flex; flex-direction: column; gap: 1px; max-height: 46vh; overflow-y: auto; margin: 6px 0; }
.sw-chat__ppr { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 4px 8px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-size: var(--t-14); color: var(--text); text-align: left; cursor: pointer; }
.sw-chat__ppr:hover { background: var(--sunken); }
.sw-chat__ppn { flex: 1; min-width: 0; }
.sw-chat__ppn small { color: var(--muted); }
.sw-chat__ppbox { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.8px solid var(--muted); display: inline-grid; place-items: center; color: var(--surface); }
.sw-chat__ppr[aria-checked="true"] .sw-chat__ppbox { background: var(--ink-blue); border-color: var(--ink-blue); }
.sw-chat__nc .sw-label, .sw-chat__nt .sw-label, .sw-chat__info .sw-label, [data-nl] .sw-label, [data-ct-form] .sw-label { display: block; margin: 12px 0 4px; }
.sw-chat__nc .sw-input, .sw-chat__nt .sw-input, .sw-chat__info .sw-input, [data-nl] .sw-input, [data-ct-form] .sw-input, .sw-chat__pp .sw-input { width: 100%; }
.sw-chat__ncseg { display: flex; width: 100%; }
.sw-chat__ncseg .sw-seg__b, .sw-chat__info .sw-seg__b { flex: 1; }
.sw-chat__info .sw-seg { display: flex; width: 100%; }
.sw-seg__b[aria-selected="true"], .sw-seg__b[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft); }
.sw-chat__nccheck { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--t-14); }
.sw-chat__ntg { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.sw-chat__mem { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 10px; max-height: 36vh; overflow-y: auto; }
.sw-chat__memr { display: flex; align-items: center; gap: 10px; font-size: var(--t-14); }
.sw-chat__memr small { color: var(--muted); }
.sw-chat__memr > span:not(.sw-cf) { flex: 1; min-width: 0; }
.sw-chat__memx { margin-left: auto; width: 32px; height: 32px; color: var(--muted); }
.sw-chat__memx:hover { color: var(--text); }
.sw-chat__cplist { max-height: 30vh; }
.sw-chat__cpick { cursor: default; }
.sw-chat__cpick .sw-button { margin-left: auto; }
.sw-chat__cplist + .sw-bf__hint + .sw-label + .sw-input + .sw-chat__pplist { max-height: 28vh; }
.sw-chat__ppr.is-on { background: var(--sunken); font-weight: 600; }
.sw-chat__ppn small { color: var(--muted); }
.sw-chat__pins { display: flex; flex-direction: column; gap: 6px; }
.sw-chat__pinr { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); font: inherit; text-align: left; cursor: pointer; }
.sw-chat__pinr span { font-size: var(--t-14); color: var(--body); }
.sw-chat__pinr small { font-size: var(--t-12); color: var(--muted); }
.sw-chat__view img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: var(--r-md); }

/* ---------------------------------------------------------------- the phone */
@media (max-width: 760px) {
  .main:has(#sw-chat) .main__bar { margin-bottom: 8px; }
  .sw-chat { display: block; height: auto; min-height: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
  .sw-chat__side { border: 0; background: none; }
  .sw-chat__sidehead { padding: 4px 2px 8px; }
  .sw-chat__sidehead h1 { font-size: var(--t-24); }
  .sw-chat__sidehead .sw-button { display: none; }               /* the centre button's fan has New conversation */
  .sw-chat__search, .sw-chat__chips { padding-left: 0; padding-right: 0; }
  .sw-chat__whorow { padding-left: 0; padding-right: 0; }
  .sw-chat__list { padding: 4px 0 12px; overflow: visible; }
  .sw-chat__row { padding: 9px 4px; border-radius: var(--r-sm); }
  .sw-chat__row.is-on { box-shadow: none; background: none; }
  .sw-chat__rown { font-size: 15.5px; }
  .sw-chat__rowpre { font-size: var(--t-14); }
  .sw-cf__on { box-shadow: 0 0 0 2px var(--canvas); }

  /* a conversation (and a thread) is a full screen above everything, its composer above the keyboard */
  .sw-chat__main, .sw-chat__thread { display: none; }
  .sw-chat.is-open .sw-chat__main, .sw-chat.has-thread .sw-chat__thread {
    display: flex; position: fixed; left: 0; right: 0; top: var(--vvt, 0px); height: var(--vvh, 100dvh); z-index: 45;
    background: oklch(96.6% 0.006 85);
  }
  :root[data-theme="dark"] .sw-chat.is-open .sw-chat__main, :root[data-theme="dark"] .sw-chat.has-thread .sw-chat__thread { background: var(--canvas); }
  .sw-chat.has-thread .sw-chat__thread { z-index: 46; border: 0; }
  html:has(.sw-chat.is-open) .sw-tabbar { transform: translateY(130%); }
  html:has(.sw-chat.is-open) body { overflow: hidden; }
  .sw-chat__head { padding: calc(env(safe-area-inset-top) + 6px) 8px 8px 4px; gap: 6px; min-height: 0; }
  .sw-chat__back { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; color: var(--text); border: 0; background: none; }
  .sw-chat__back .sw-mark { transform: rotate(180deg); width: 20px; height: 20px; }
  .sw-chat__tx { display: none; }
  .sw-chat__faces { display: none; }
  .sw-chat__head .sw-ct, .sw-chat__head .sw-cf--tile { width: 36px; height: 36px; }
  .sw-chat__log { padding: 6px 0 10px; }

  /* bubbles */
  .sw-cm { padding: 2px 10px; gap: 6px; }
  .sw-cm:hover { background: none; }
  .sw-cm__face { width: 30px; align-items: flex-end; }
  .sw-cm__face .sw-cf { width: 30px; height: 30px; font-size: 11px; }
  .sw-cm__head .sw-cm__t, .sw-cm__head .sw-cm__via { display: none; }
  .sw-cm__head { padding: 0 12px 1px; }
  .sw-cm__who { font-size: var(--t-12); color: var(--muted); }
  .sw-cm__b { display: flex; flex-direction: column; align-items: flex-start; max-width: 84%; flex: 0 1 auto; }
  .sw-cm__bub { position: relative; max-width: 100%; padding: 7px 12px 6px; border-radius: 18px 18px 18px 6px; background: var(--surface);
    box-shadow: 0 1px 1px oklch(22% 0.015 265 / 0.06); }
  .sw-cm.is-cont .sw-cm__bub { border-radius: 6px 18px 18px 6px; }
  .sw-cm__text { font-size: 15px; }
  .sw-cm__tb { display: block; text-align: right; margin-top: 1px; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
  .sw-cm__ed { display: none; }
  .sw-cm.is-mine { flex-direction: row-reverse; }
  .sw-cm.is-mine .sw-cm__face { display: none; }
  .sw-cm.is-mine .sw-cm__b { align-items: flex-end; margin-left: auto; }
  .sw-cm.is-mine .sw-cm__head { display: none; }
  .sw-cm.is-mine .sw-cm__bub { background: oklch(93% 0.05 85); border-radius: 18px 18px 6px 18px; }
  :root[data-theme="dark"] .sw-cm.is-mine .sw-cm__bub { background: oklch(36% 0.06 78); }
  .sw-cm.is-mine.is-cont .sw-cm__bub { border-radius: 18px 6px 6px 18px; }
  .sw-cm.is-cont .sw-cm__face .sw-cf, .sw-cm.is-cont .sw-cm__t2 { visibility: hidden; display: block; }
  .sw-cm.has-card .sw-cm__bub { padding: 0; background: none; box-shadow: none; width: 100%; }
  .sw-cm.has-card .sw-cm__tb { padding: 0 6px; }
  .sw-cm.has-card .sw-cm__b { max-width: 92%; width: 92%; }
  .sw-cm.has-card .sw-cc { max-width: none; margin-top: 0; }
  .sw-cm.is-tagged:not(.is-mine) { box-shadow: none; background: none; }
  .sw-cm.is-tagged:not(.is-mine) .sw-cm__bub { box-shadow: inset 0 0 0 1.5px var(--gold); }
  .sw-cm__tools { display: none !important; }
  .sw-cm__radd { display: none; }
  .sw-cm__rx { margin-top: -4px; padding: 0 6px; position: relative; }
  .sw-cm__pics { max-width: 260px; }
  .sw-cm--sys span { padding: 2px 10px; border-radius: var(--r-pill); background: var(--surface); }
  .sw-cm.is-target .sw-cm__bub { animation: sw-cm-flash 2.4s ease-out; }

  .sw-chat__comp { margin: 0; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; box-shadow: none; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  html[data-kb] .sw-chat__comp { padding-bottom: 6px; }
  .sw-chat__fmt { display: none; justify-content: space-between; padding: 4px 8px 0; }
  .sw-chat__comp:focus-within .sw-chat__fmt { display: flex; }
  .sw-chat__fb { width: 38px; height: 34px; }
  .sw-chat__line { align-items: center; padding: 6px 8px; gap: 6px; }
  .sw-chat__plus { width: 40px; height: 40px; border-radius: 50%; background: var(--sunken); color: var(--text); flex: none; }
  .sw-chat__input { min-height: 40px; padding: 9px 14px; border-radius: 20px; background: var(--sunken); font-size: 16px; }
  .sw-chat__emo { display: none; }
  .sw-chat__send { width: 40px; height: 40px; }
  .sw-chat__below { bottom: 90px; }
  .sw-chat__typing { padding: 0 14px; min-height: 0; }
  .sw-chat__typing:empty { display: none; }
  .sw-chat__ntg { grid-template-columns: 1fr; }
}

/* C2 (D404): task chips with their state, in Chat */
.sw-ref--live { gap: 4px; }
.sw-ref--live .sw-ref__st { font-weight: 500; color: var(--muted); padding-left: 4px; margin-left: 2px; border-left: 1px solid var(--line); }
.sw-ref--live.is-done .sw-ref__st { color: var(--ok); }
.sw-ref--live.is-late .sw-ref__st { color: var(--risk); }
.sw-cm__tasks { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.sw-cc__live { display: inline-flex; }
.sw-cc__by2 { margin-top: 6px; font-size: var(--t-12); color: var(--muted); }
.sw-chat--embed { margin-top: 12px; }
.sw-chat--embed .sw-chat__side, .sw-chat--embed .sw-chat__back { display: none; }
.sw-chat.sw-chat--embed { grid-template-columns: minmax(0, 1fr); }
.sw-chat.sw-chat--embed.has-thread { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }

/* D405: approval and poll cards */
.sw-cc--appr .sw-cc__head .sw-mark { color: var(--ink-blue); }
.sw-cc--appr.is-approved { background: var(--ok-bg); }
.sw-cc--appr.is-rejected { background: var(--risk-bg); }
.sw-cc--appr.is-withdrawn { opacity: .75; }
.sw-cc__note { margin: 4px 0 0; font-size: var(--t-14); color: var(--muted); }
.sw-cc__poll { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sw-cc__opt { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--surface); font: inherit; font-size: var(--t-14); color: var(--text); text-align: left; cursor: pointer; overflow: hidden; }
.sw-cc__opt:disabled { cursor: default; }
.sw-cc__opt.is-on { border-color: var(--ink-blue); }
.sw-cc__bar { position: absolute; inset: 0; background: var(--sunken); transform-origin: left center; transform: scaleX(var(--pct, 0)); transition: transform .25s ease; }
.sw-cc__opt.is-on .sw-cc__bar { background: oklch(92% 0.04 265); }
:root[data-theme="dark"] .sw-cc__opt.is-on .sw-cc__bar { background: oklch(32% 0.05 265); }
.sw-cc__optt, .sw-cc__optn { position: relative; }
.sw-cc__optt { flex: 1; display: inline-flex; align-items: center; gap: 6px; }
.sw-cc__optn { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.sw-chat__pollin { margin-bottom: 6px; }

/* D406: voice notes and Drive links */
.sw-cm__voice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 6px; max-width: 420px; }
.sw-cm__voice audio { width: 100%; height: 36px; }
.sw-cm__vlen { font-size: var(--t-12); color: var(--muted); font-variant-numeric: tabular-nums; }
.sw-cm__heard { grid-column: 1 / -1; margin: 0; font-size: var(--t-14); color: var(--muted); }
.sw-cm__heard i { font-style: normal; opacity: .8; }
.sw-cc--drive { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.sw-cc__drive { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--sunken); color: var(--text); text-decoration: none; }
.sw-cc__drive:hover { background: var(--hairline); }
.sw-cc__dname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sw-cc__dopen { font-size: var(--t-12); color: var(--ink-blue); white-space: nowrap; }
.sw-chat__vn { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8px; }
.sw-chat__vbtn { width: 72px; height: 72px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--sunken); color: var(--text); cursor: pointer; }
.sw-chat__vbtn .sw-mark { width: 28px; height: 28px; }
.sw-chat__vbtn.is-on { background: var(--risk); color: #fff; animation: sw-vn-pulse 1.4s ease-in-out infinite; }
@keyframes sw-vn-pulse { 50% { box-shadow: 0 0 0 10px color-mix(in oklch, var(--risk) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .sw-chat__vbtn.is-on { animation: none; } }
.sw-chat__vt { margin: 0; font-size: var(--t-14); color: var(--muted); text-align: center; }
.sw-chat__vn audio { width: 100%; }
.sw-chat__vn .sw-modal__actions { width: 100%; }

/* D408: check-in lines, meeting and bill cards, the countdown chip */
.sw-cc--line { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: var(--t-14); background: var(--sunken); }
.sw-cc--line .sw-mark { color: var(--ok); flex: none; }
.sw-cc--meet .sw-cc__head .sw-mark, .sw-cc--bill .sw-cc__head .sw-mark { color: var(--ink-blue); }
.sw-cc--meet .sw-cc__foot { flex-wrap: wrap; }
.sw-chat__next { display: flex; align-items: center; gap: 8px; margin: 0 16px 6px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--sunken); font-size: var(--t-14); }
.sw-chat__next .sw-mark { flex: none; color: var(--ink-blue); }
.sw-chat__nextt { flex: 1; min-width: 0; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-chat__nexta { flex: none; font-weight: 600; color: var(--ink-blue); text-decoration: none; }
.sw-cc__edit { margin-top: 6px; }

/* D409: scheduled strip, catch-up, info actions */
.sw-chat__sched { padding: 0 4px 6px; }
.sw-chat__schedb { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--sunken); color: var(--text); font: inherit; font-size: var(--t-12); padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.sw-chat__schedr { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.sw-chat__schedr > div { flex: 1; min-width: 0; }
.sw-chat__schedr p { margin: 4px 0 0; font-size: var(--t-14); }
.sw-chat__schedr .is-bad, .sw-bf__hint.is-bad { color: var(--risk); }
.sw-chat__cu { font-size: var(--t-14); line-height: 1.5; }
.sw-chat__infoacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.sw-linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--ink-blue); font-weight: 600; cursor: pointer; text-decoration: underline; }
.sw-cm__head .sw-cm__via.is-import { display: inline-flex; }

/* D410: huddles — the bar that follows you around Swarm, the strip in the conversation, the line
   and the notes card. The bar sits over the conversation list on a desk; on a phone it's a
   pill above the composer / tab bar, opening upwards. */
.sw-hd {
  position: fixed; z-index: 47; left: calc(var(--rail-w) + 12px); bottom: 12px; width: 300px;   /* over a phone's open chat (45/46), under sheets (60) */
  background: var(--surface); color: var(--text); border-radius: var(--r-md);
  box-shadow: var(--shadow-lift); padding: 8px; font-size: var(--t-14);
}
.sw-hd__top { display: flex; align-items: center; gap: 6px; }
.sw-hd__title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 4px 6px; border-radius: var(--r-sm); cursor: pointer; }
.sw-hd__title:hover { background: var(--sunken); }
.sw-hd__tt { display: flex; flex-direction: column; min-width: 0; }
.sw-hd__tt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-hd__tt > span { font-size: var(--t-12); color: var(--muted); font-variant-numeric: tabular-nums; }
.sw-hd__dot, .sw-chat__hdot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.sw-hd__btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--sunken); color: var(--text); cursor: pointer; }
.sw-hd__btn.is-on { background: var(--text); color: var(--surface); }
.sw-hd__leave { background: var(--risk); color: var(--surface); }
.sw-hd__leave .sw-mark { transform: rotate(135deg); }
.sw-hd__notes { display: flex; align-items: center; gap: 6px; margin: 6px 4px 0; font-size: var(--t-12); color: var(--muted); }
.sw-hd__unblock { display: block; width: 100%; margin-top: 6px; border: 0; border-radius: var(--r-sm); background: var(--ok-bg); color: var(--text); font: inherit; padding: 8px; cursor: pointer; }
.sw-hd__people { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.sw-hd__p { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.sw-hd__f { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-12); font-weight: 600; background: var(--sunken); box-shadow: 0 0 0 2px transparent; transition: box-shadow 120ms ease; }
.sw-hd__p.is-speaking .sw-hd__f { box-shadow: 0 0 0 2px var(--ok); }
.sw-hd__p.is-wait .sw-hd__f { opacity: .6; }
.sw-hd__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-hd__mut, .sw-hd__st { color: var(--muted); font-size: var(--t-12); }
.sw-hd__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (max-width: 760px) {
  .sw-hd { left: 12px; right: 12px; width: auto; bottom: calc(84px + var(--tb-lift, 12px)); }
  html:has(.sw-chat.is-open) .sw-hd { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .sw-hd:not(.is-open) .sw-hd__notes { display: none; }
  html.has-huddle .sw-chat__log { padding-bottom: 72px; }
}
.sw-chat__huddle { display: flex; align-items: center; gap: 8px; margin: 0 16px 6px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--ok-bg); font-size: var(--t-14); }
.sw-chat__huddle .sw-mark { flex: none; }
.sw-chat__htxt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-chat__hin { flex: none; font-size: var(--t-12); color: var(--muted); }
.sw-cm--huddle span .sw-mark { vertical-align: -2px; margin-right: 4px; }
.sw-cm--huddle.is-live span { color: var(--text); }
.sw-cm__hjoin { margin-left: 8px; border: 0; background: var(--ok-bg); color: var(--text); font: inherit; font-weight: 600; padding: 2px 10px; border-radius: var(--r-pill); cursor: pointer; }
.sw-chat__tr { max-height: 60vh; overflow-y: auto; font-size: var(--t-14); line-height: 1.5; }
.sw-chat__tr p { margin: 0 0 6px; }

/* D412: the incoming-call sheet */
.sw-ring__who { display: flex; align-items: center; gap: 8px; font-size: var(--t-16); margin: 4px 0 8px; }

/* D414: Voice ID */
.sw-vid__lines { margin: 8px 0 12px; padding-left: 20px; display: grid; gap: 8px; font-size: var(--t-16); line-height: 1.45; }
.sw-vid__clock { font-variant-numeric: tabular-nums; color: var(--muted); margin: 4px 0 8px; }
.sw-vid__ws { margin-top: 12px; }

/* D415: Chat help beside New */
.sw-chat__sideacts { display: inline-flex; align-items: center; gap: var(--s-1); }

/* D416: huddle notes — the notes in the card, on the card padding the task panel uses (16px),
   sections apart, bullets with room ("too tight", Arvind 10 Oct). */
.sw-cc--huddle, .sw-cc--plan { max-width: 560px; }
.sw-cc--huddle .sw-cc__head, .sw-cc--plan .sw-cc__head { padding: 14px 16px 10px; gap: 10px; }
.sw-cc--plan .sw-cc__head { padding-bottom: 14px; }
.sw-cc__notes { padding: 4px 16px 16px; font-size: var(--t-14); line-height: 1.55; color: var(--body); overflow-wrap: anywhere; }
.sw-cc__notes p, .sw-cc__notes ul { margin: 0 0 10px; }
.sw-cc__notes p:last-child, .sw-cc__notes ul:last-child { margin-bottom: 0; }
.sw-cc__notes ul { padding-left: 18px; }
.sw-cc__notes li + li { margin-top: 4px; }
.sw-cc__notes strong, .sw-cc__notes b { display: inline-block; margin-top: 6px; }
.sw-cc--huddle .sw-cc__foot { padding: 10px 16px; gap: 10px; }
@media (max-width: 640px) {
  .sw-cc--huddle .sw-cc__head, .sw-cc__notes, .sw-cc--huddle .sw-cc__foot { padding-left: 14px; padding-right: 14px; }
}

/* D417: a project's Emails and Wiki — the task panel's cards: soft surface, 16px padding, cards that
   never touch, grey/dark/bold text hierarchy, tinted chips. */
.sw-pmail, .sw-pwiki { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 32px; max-width: 920px; }
.sw-pmail__lede { margin: 0; color: var(--muted); font-size: var(--t-13); line-height: 1.5; }
.sw-pmail__lede b { color: var(--text); font-weight: 650; }
.sw-pmail__loading { color: var(--muted); font-size: var(--t-14); padding: 16px 0; }
.sw-pmail__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-pmail__vchip { border: 0; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--sunken);
  color: var(--body); font: 600 var(--t-13)/1 var(--font-ui); cursor: pointer; }
.sw-pmail__vchip:hover { background: var(--hairline); }
.sw-pmail__vchip.is-on { background: var(--gold-quiet); color: var(--gold-ink); }
.sw-pmail__vchip:focus-visible, .sw-pmail__main:focus-visible, .sw-pmail__opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-pmail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sw-pmail__row { display: flex; align-items: flex-start; gap: 8px; padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-soft); }
.sw-pmail__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
a.sw-pmail__main:hover .sw-pmail__subj { text-decoration: underline; }
.sw-pmail__top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sw-pmail__from { font-size: var(--t-14); color: var(--text); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-pmail__n { font-size: var(--t-12); color: var(--muted); font-weight: 650; }
.sw-pmail__t { margin-left: auto; flex: none; font-size: var(--t-12); color: var(--muted); font-variant-numeric: tabular-nums; }
.sw-pmail__subj { font-size: var(--t-14); color: var(--body); overflow-wrap: anywhere; }
.sw-pmail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; }
.sw-pmail__tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--info-bg); color: var(--ink-blue); font-size: var(--t-12); font-weight: 650; }
.sw-pmail__box, .sw-pmail__why { font-size: var(--t-12); color: var(--muted); }
.sw-pmail__move { flex: none; }
.sw-pmail__empty { padding: 32px 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-soft); text-align: center; color: var(--muted); }
.sw-pmail__empty h2 { margin: 8px 0 4px; font-size: var(--t-16); color: var(--text); }
.sw-pmail__empty p { margin: 0 auto; max-width: 46ch; font-size: var(--t-14); line-height: 1.5; }
.sw-pmail__pick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow: auto; }
.sw-pmail__opt { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0;
  border-radius: var(--r-md); background: none; color: var(--text); font: 500 var(--t-14)/1.2 var(--font-ui); text-align: left; cursor: pointer; }
.sw-pmail__opt:hover { background: var(--sunken); }
.sw-pwiki__page { padding: 16px 20px 20px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-soft); }
.sw-pwiki__by { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--t-12); color: var(--muted); font-weight: 650; }
.sw-pwiki__by .sw-mark { color: var(--gold-ink); }
.sw-pwiki__body { font-size: var(--t-14); line-height: 1.6; color: var(--body); overflow-wrap: anywhere; }
.sw-pwiki__body h3 { margin: 18px 0 6px; font-size: var(--t-14); color: var(--text); }
.sw-pwiki__body h3:first-child { margin-top: 0; }
.sw-pwiki__body p, .sw-pwiki__body ul { margin: 0 0 8px; }
.sw-pwiki__body ul { padding-left: 18px; }
.sw-pwiki__note { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: var(--t-12); color: var(--muted); }
@media (max-width: 640px) {
  .sw-pmail__row { padding: 12px 14px; }
  .sw-pmail__move span { display: none; }
  .sw-pwiki__page { padding: 14px 14px 16px; }
}

/* Snagging Phase 1: video tiles in the huddle bar. The call is audio-first; tiles appear only
   when someone turns a camera on or shares a screen. */
.sw-hd__vid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin: 8px 0 2px; }
.sw-hd__tile { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: var(--sunken); aspect-ratio: 4 / 3; }
.sw-hd__tile video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.sw-hd__tile[data-mirror] video { transform: scaleX(-1); }        /* only a FRONT camera is mirrored (Randeep, 19 Oct) */
.sw-hd__snap { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 2px; }
.sw-hd__snap .sw-button { min-height: 48px; justify-content: center; }
.sw-hd__tile figcaption { position: absolute; left: 6px; bottom: 6px; font-size: var(--t-11, 11px); font-weight: 600;
  color: #fff; background: oklch(0% 0 0 / 0.5); padding: 1px 7px; border-radius: 999px; }
.sw-hd__cam { display: flex; gap: 6px; margin: 6px 0 2px; flex-wrap: wrap; }
.sw-hd__cam .is-on { background: var(--gold-quiet); color: var(--gold-ink); }

/* ================================================================ D422: the snag walk (Phase 2 of PROPOSAL-snagging)
   A phone screen first: big targets (a gloved thumb on a site), the room always in view, every capture's
   state in words ("On this phone" / "Uploaded") before any colour. */
.sw-snag { max-width: 720px; }
.sw-snag__card { margin: 0 0 var(--s-2); padding: var(--s-2); }
.sw-snag__h { margin: 0 0 var(--s-1); font-size: var(--t-16); display: flex; align-items: baseline; gap: var(--s-1); }
.sw-snag__n { color: var(--muted); font-size: var(--t-13); font-weight: 600; font-variant-numeric: tabular-nums; }
.sw-snag__help { margin: var(--s-1) 0 0; color: var(--muted); font-size: var(--t-13); }
.sw-snag__project { display: flex; align-items: center; gap: var(--s-0); margin: 0 0 var(--s-1); font-weight: 700; color: var(--text); }
.sw-snag__room .sw-input { width: 100%; min-height: 44px; font-size: var(--t-16); }
.sw-snag__shoot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); margin-top: var(--s-2); }
.sw-snag__big { min-height: 56px; justify-content: center; font-size: var(--t-16); display: inline-flex; align-items: center; gap: var(--s-0); cursor: pointer; }
.sw-snag__big.is-on { outline: 2px solid var(--risk); outline-offset: 2px; }
.sw-snag__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-1); }
.sw-snag__cell { display: flex; flex-direction: column; gap: var(--s-0); min-width: 0; }
.sw-snag__thumb { aspect-ratio: 4 / 3; background: var(--sunken); border-radius: var(--r-xs); overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: var(--t-12); }
.sw-snag__media { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-snag__state { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-12); color: var(--ok); }
.sw-snag__state.is-waiting { color: var(--attention); }
.sw-snag__said { font-size: var(--t-13); color: var(--body); overflow-wrap: anywhere; }
.sw-snag__snag { padding: var(--s-1) 0 var(--s-2); border-bottom: 1px solid var(--hairline); }
.sw-snag__snag:last-child { border-bottom: 0; padding-bottom: 0; }
.sw-snag__snag .sw-label { display: block; margin-top: var(--s-1); }
.sw-snag__snag .sw-input { width: 100%; min-height: 44px; }
.sw-snag__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); }
@media (max-width: 420px) { .sw-snag__two { grid-template-columns: 1fr; } }
.sw-snag__voice { width: 100%; height: 36px; }
.sw-snag__title { margin: var(--s-1) 0 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.sw-snag__meta { color: var(--muted); font-size: var(--t-12); font-weight: 400; }
.sw-snag__acts { display: flex; flex-wrap: wrap; gap: var(--s-1); justify-content: flex-end; margin-top: var(--s-2); }
.sw-snag__acts .sw-button { min-height: 44px; }
.sw-snag__end { margin-top: var(--s-2); }
.sw-snag__end-note { text-align: right; }
.sw-snag__bad { background: var(--risk-bg); }
.sw-snag__bad p { margin: 0; color: var(--text); }
.sw-snag__list { margin: 0; padding-left: var(--s-2); }
.sw-snag__wait { text-align: center; padding: var(--s-4) var(--s-2); }
.sw-snag__wait .sw-snag__h { justify-content: center; margin-top: var(--s-1); }
.sw-snag__walks { list-style: none; margin: 0; padding: 0; }
.sw-snag__walks a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-0) var(--s-1); padding: var(--s-1) 0;
  border-bottom: 1px solid var(--hairline); color: var(--text); text-decoration: none; min-height: 44px; align-items: center; }
.sw-snag__compose, .sw-snag__cam { display: flex; flex-direction: column; gap: var(--s-1); }
.sw-snag__compose .sw-snag__media, .sw-snag__live { width: 100%; max-height: 50vh; object-fit: contain; background: var(--sunken); border-radius: var(--r-xs); }
.sw-snag__compose .sw-textarea { width: 100%; }
.sw-snag__summary { margin: 0 0 var(--s-2); }
/* D423: the live walk — the camera is the page; the Snag button is the biggest thing under it. */
.sw-snag__stage { position: relative; margin: 0 0 var(--s-2); border-radius: var(--r-xs); overflow: hidden; background: var(--sunken); }
.sw-snag__live--stage { display: block; width: 100%; max-height: 52vh; object-fit: cover; aspect-ratio: 16 / 9; }
.sw-snag__live--stage.is-mirror { transform: scaleX(-1); }            /* the front camera only; a snapped frame is never mirrored */
.sw-snag__flip { position: absolute; top: 8px; left: 8px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: oklch(0% 0 0 / 0.55); color: #fff; cursor: pointer; }
.sw-snag__flip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sw-snag__clock { position: absolute; top: var(--s-1); right: var(--s-1); padding: 2px var(--s-1); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text); font-size: var(--t-13); font-weight: 700; font-variant-numeric: tabular-nums; }
.sw-snag__snapbtn { min-height: 72px; font-size: var(--t-18); touch-action: none; user-select: none; -webkit-user-select: none; }
.sw-snag__snapbtn.is-on { outline: 3px solid var(--risk); outline-offset: 2px; }
/* I-257: on a phone the tab bar, and during a call the huddle bar, sit over the bottom of the page —
   the snag pages leave room for them so Submit / Finish can always be scrolled clear and tapped. */
@media (max-width: 760px) {
  .sw-snag { padding-bottom: 96px; }
  html.has-huddle .sw-snag { padding-bottom: 190px; }
}
.sw-snag__shoot--live { margin-top: 0; margin-bottom: var(--s-2); }
.sw-snag--live .sw-snag__project { margin: var(--s-2) 0 0; color: var(--muted); font-weight: 600; font-size: var(--t-13); }
@media (max-width: 760px) {
  .sw-snag__live--stage { max-height: 34vh; }
}
.sw-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* D428 (C5 Phase 1): a vendor's or contractor's channel, shared with them or not; Team-only notes.
   Fills, not frames (D095): the strip is a tint, the note's mark is tone on tint. */
.sw-chat__share { display: flex; align-items: center; gap: 8px; margin: 0 16px 6px; padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--sunken); font-size: var(--t-14); color: var(--body); }
.sw-chat__share.is-shared { background: var(--info-bg); }
.sw-chat__share .sw-mark { flex: none; }
.sw-chat__sharet { flex: 1; min-width: 0; }
.sw-chat__share .sw-button { flex: none; }
.sw-chat__team { flex: none; display: inline-flex; align-items: center; gap: 4px; border: 0; cursor: pointer; font: inherit;
  font-size: var(--t-12); font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: transparent; color: var(--muted); min-height: 32px; }
.sw-chat__teamrow { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 4px 8px 0; }
.sw-chat__teamhint { font-size: var(--t-12); color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-chat__team:hover { background: var(--sunken); color: var(--text); }
.sw-chat__team.is-on { background: var(--attention-bg); color: var(--text); }
.sw-cm__team { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-11); font-weight: 600; color: var(--text);
  background: var(--attention-bg); border-radius: var(--r-pill); padding: 1px 8px; margin: 0 0 4px; }
.sw-cm.is-team .sw-cm__bub { background: var(--attention-bg); }
@media (max-width: 760px) {
  .sw-chat__share { margin: 0 12px 6px; flex-wrap: wrap; }
  .sw-chat__team { padding: 4px 8px; }
}

/* D429: where a team message stands on the contractor's WhatsApp — quiet, under the bubble. */
.sw-cm__wa { display: flex; align-items: center; gap: 4px; margin: 2px 0 0; font-size: var(--t-12); color: var(--muted); }
.sw-cm__wa.is-sent { color: var(--muted); }
.sw-cm__wa.is-held, .sw-cm__wa.is-recorded { color: var(--body); }
.sw-cm__wa.is-failed { color: var(--risk); }
.sw-cm__wa .sw-mark { flex: none; }
@media (max-width: 760px) {
  .sw-cm.is-mine .sw-cm__wa { justify-content: flex-end; text-align: right; }      /* I-272: under its own bubble */
}

/* I-282 (D433): a phone never zooms when a field takes focus. iOS zooms the page in
   whenever a field under 16px is focused and leaves it there, so the person pinches back
   to 100% after every message. On a finger, every field you can type into is 16px.
   It has to win over every field's own size, hence the one !important in this file's
   field rules; desks keep the 13–14px sizes. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  textarea, select, [contenteditable=""], [contenteditable="true"] { font-size: 16px !important; }
}

/* D443: AI assistants on the You page — the connector address and the connections. */
.sw-aic__addr { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; margin: var(--s-1) 0 var(--s-2); }
.sw-aic__addr code { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; padding: 8px 12px; border-radius: 10px;
  background: color-mix(in oklch, var(--muted) 10%, transparent); font-size: var(--t-14); }
.sw-aic__list { list-style: none; margin: 0; padding: 0; }
.sw-aic__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-1) 0;
  border-top: 1px solid color-mix(in oklch, var(--muted) 18%, transparent); }
.sw-aic__app { display: flex; flex-direction: column; min-width: 0; }
.sw-aic__app .sw-section__note { margin: 0; }

/* ------------------------------------------------------------ D444: Your Maya
   One Maya per person: Maya's mark on a disc in the person's colour. Six colours, each an
   existing ink on its own chip (the stage hues, and ink-blue on info-bg) — every pair is
   asserted by check_contrast.py in both modes. Gold stays the seal's (the Seal Rule). */
[data-mhue="teal"]    { --mhue-ink: var(--st-ready);    --mhue-bg: var(--st-ready-chip); }
[data-mhue="blue"]    { --mhue-ink: var(--st-progress); --mhue-bg: var(--st-progress-chip); }
[data-mhue="violet"]  { --mhue-ink: var(--st-review);   --mhue-bg: var(--st-review-chip); }
[data-mhue="magenta"] { --mhue-ink: var(--st-approval); --mhue-bg: var(--st-approval-chip); }
[data-mhue="green"]   { --mhue-ink: var(--st-done);     --mhue-bg: var(--st-done-chip); }
[data-mhue="indigo"]  { --mhue-ink: var(--ink-blue);    --mhue-bg: var(--info-bg); }
.sw-maya__avatar[data-mhue], .sw-mstrip__who[data-mhue] { background: var(--mhue-bg); color: var(--mhue-ink); }
.sw-mydisc {
  flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--mhue-bg); color: var(--mhue-ink);
}
.sw-mydisc .sw-mark { width: 55%; height: 55%; }
.sw-mydisc--lg { width: 56px; height: 56px; }
.sw-mypage { min-width: 0; }
.sw-myhead { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); min-width: 0; }
.sw-myhead__who { flex: 1; min-width: 0; }
.sw-myhead__who h1 { margin: 0; line-height: 1.15; }
.sw-myhead__line { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--t-14); color: var(--muted); }
.sw-myhead__handle { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.sw-myhead__colour { flex: none; }
.sw-myintro {
  display: flex; gap: var(--s-2); align-items: flex-start; margin: 0 0 var(--s-3);
  padding: var(--s-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-soft);
}
.sw-myintro__body { min-width: 0; }
.sw-myintro h2 { margin: 0 0 var(--s-0); font-size: var(--t-16); }
.sw-myintro p { margin: 0 0 var(--s-0); color: var(--body); font-size: var(--t-14); }
.sw-myintro .sw-button { margin-top: var(--s-1); min-height: 44px; }
.sw-mycolours { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-1); }
.sw-mycolours__opt {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px;
  border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--t-14); cursor: pointer;
}
.sw-mycolours__opt[aria-checked="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.sw-mycolours__opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-mypage .sw-views-bar { margin-bottom: var(--s-2); }
@media (pointer: coarse) {
  .sw-myhead__colour { min-height: 44px; }
  .sw-mypage .sw-views__tab { min-height: 44px; }
}
@media (max-width: 560px) {
  .sw-myhead { gap: var(--s-1); }
  .sw-mydisc--lg { width: 44px; height: 44px; }
}
/* ------------------------------------------------------------ D445: Your Maya → Scheduled
   Her standing jobs: a card per job (title, the read-back sentence, next run, state, last run),
   a sheet per job, and a short form whose live read-back is the confirmation. Fills, not frames
   (D095); existing pills (sw-mq__pill) and inks only, so no new contrast pair. */
.sw-duty__page { min-width: 0; }
.sw-duty__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); margin: 0 0 var(--s-2); }
.sw-duty__head h2 { margin: 0; font-size: var(--t-16); }
.sw-duty__sub { margin: 2px 0 0; color: var(--muted); font-size: var(--t-13); }
.sw-duty__new { flex: none; min-height: 44px; }
.sw-duty__cap { margin: 0 0 var(--s-2); font-style: normal; display: flex; gap: 6px; align-items: center; }
.sw-duties { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.sw-duty { display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 44px; text-align: left; font: inherit;
  color: var(--text); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft); padding: var(--s-2); cursor: pointer; min-width: 0; }
.sw-duty:hover { background: var(--sunken); }
.sw-duty:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-duty__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); min-width: 0; }
.sw-duty__title { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.sw-duty__rb { color: var(--body); font-size: var(--t-14); overflow-wrap: anywhere; }
.sw-duty__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--muted); font-size: var(--t-13); margin: 0; }
.sw-duty__next, .sw-duty__last { display: inline-flex; align-items: center; gap: 4px; }
.sw-duty__last.is-found { color: var(--attention); }
.sw-duty__last.is-bad { color: var(--risk); }
.sw-duty__empty { background: var(--sunken); border-radius: var(--r-lg); padding: var(--s-2); }
.sw-duty__empty p { margin: 0 0 var(--s-1); color: var(--body); }
.sw-duty__examples { display: flex; flex-direction: column; gap: 6px; }
.sw-duty__chip { font: inherit; font-size: var(--t-14); text-align: left; color: var(--text); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 10px 12px; min-height: 44px; cursor: pointer; }
.sw-duty__chip:hover { background: var(--info-bg); }
.sw-duty__chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-duty__ended { margin-top: var(--s-2); }
.sw-duty__ended summary { cursor: pointer; color: var(--muted); font-size: var(--t-13); min-height: 44px; display: flex; align-items: center; }
.sw-duty__form { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.sw-duty__text { width: 100%; resize: vertical; }
.sw-duty__set { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sw-duty__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sw-duty__row[hidden], .sw-duty__days[hidden], .sw-duty__time[hidden], .sw-duty__problem[hidden], .sw-duty__result[hidden] { display: none; }
.sw-duty__row .sw-select { width: auto; flex: 1 1 160px; }
.sw-duty__time { width: auto; flex: 0 1 130px; }
.sw-duty__num { width: 90px; }
.sw-duty__days, .sw-duty__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-duty__opt { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--sunken); color: var(--text); font-size: var(--t-14); cursor: pointer; }
.sw-duty__opt:has(input:checked) { background: var(--info-bg); color: var(--ink-blue); font-weight: 600; }
.sw-duty__opt input { margin: 0; accent-color: var(--ink-blue); }
.sw-duty__opt:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-duty__readback { background: var(--sunken); border-radius: var(--r-md); padding: 10px 12px; }
.sw-duty__readback p { margin: 0; color: var(--text); }
.sw-duty__rbh { display: flex; align-items: center; gap: 6px; font-size: var(--t-12); font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.sw-duty__readback .sw-duty__rbh { color: var(--muted); }
.sw-duty__readback .sw-duty__problem { color: var(--risk); font-size: var(--t-13); margin-top: 4px; }
.sw-duty__actions { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s-1) 0; }
.sw-duty__actions .sw-button { min-height: 44px; }
.sw-duty__detail { min-width: 0; }
.sw-duty__rbig { margin: 0 0 var(--s-1); font-size: var(--t-16); color: var(--text); overflow-wrap: anywhere; }
.sw-duty__result { background: var(--sunken); border-radius: var(--r-md); padding: 10px 12px; margin: 0 0 var(--s-1); }
.sw-duty__result p { margin: 0 0 4px; color: var(--text); }
.sw-duty__runs-h { margin-top: var(--s-1); }
.sw-duty__runs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sw-duty__runs > li { border-top: 1px solid var(--hairline); padding-top: 6px; font-size: var(--t-13); color: var(--muted); }
.sw-duty__runs p { margin: 2px 0 0; color: var(--body); font-size: var(--t-14); }
.sw-duty__items { margin: 4px 0 0; padding-left: 18px; font-size: var(--t-14); }
.sw-duty__items a { color: var(--ink-blue); }
@media (pointer: coarse) {
  #sheet:has(.sw-duty__form, .sw-duty__detail) .sw-modal__x { min-width: 44px; min-height: 44px; }
  .sw-duty__opt { min-height: 44px; }
  .sw-duty__items a { display: inline-block; min-height: 44px; line-height: 44px; }
}
/* D446: Your Maya → Activity. Built from the Maya queue's cards (sw-mq__*): sections Needs you · Working ·
   Done, the yes/no right on the card, "New" for what she did on her own that you haven't opened. Existing
   inks only (info-bg/ink-blue, risk-bg/risk, sunken/text). The count on her button is the bell's. */
.sw-act { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.sw-act__sec { min-width: 0; }
.sw-act__h { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s-1); font-size: var(--t-14); font-weight: 700; color: var(--text); }
.sw-act__n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-12); color: var(--muted); font-weight: 600; }
.sw-act__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.sw-act__empty { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--sunken); color: var(--muted); font-size: var(--t-13); }
.sw-act__new { font-size: var(--t-12); font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); background: var(--info-bg); color: var(--ink-blue); }
.sw-act__draft { margin: 0 0 var(--s-1); color: var(--body); font-size: var(--t-14); overflow-wrap: anywhere; }
.sw-act__why { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 var(--s-1); padding: 8px 10px; border-radius: var(--r-md);
  background: var(--risk-bg); color: var(--risk); font-size: var(--t-13); overflow-wrap: anywhere; }
.sw-act__ask { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin: 0 0 6px; border-radius: var(--r-md); background: var(--attention-bg); }
.sw-act__asktxt { min-width: 0; flex: 1 1 200px; font-size: var(--t-14); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.sw-act__btns { display: inline-flex; gap: 6px; flex: none; }
.sw-act__more summary { cursor: pointer; font-size: var(--t-13); color: var(--muted); padding: 4px 0; }
.sw-act__more[open] summary { margin-bottom: 4px; }
.sw-views__tab .sw-bell__n { margin-left: 4px; }
#maya-open { position: relative; }
#maya-open .sw-bell__n { margin-left: 6px; }
@media (max-width: 760px) {
  #maya-open .sw-bell__n {
    position: absolute; top: 3px; right: 1px; margin: 0; min-width: 16px; height: 16px; padding: 0 4px;
    box-sizing: border-box; border-radius: var(--r-pill); background: var(--solid-cta); color: var(--solid-cta-ink);
    font-size: 10px; line-height: 16px; text-align: center;
  }
}
@media (pointer: coarse) {
  .sw-act__btns .sw-button { min-height: 44px; min-width: 64px; }
  .sw-act__more summary { min-height: 44px; display: flex; align-items: center; }
}
/* D447: Your Maya → Rules, and the rule on a card. Existing inks only. */
.sw-rl__list, .sw-rl__floors { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sw-rl__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--hairline); }
.sw-rl__words { display: flex; align-items: flex-start; gap: 8px; min-width: 0; flex: 1 1 220px; color: var(--text);
  font-size: var(--t-14); overflow-wrap: anywhere; }
.sw-rl__right { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.sw-rl__floors li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--r-md);
  background: var(--sunken); color: var(--text); font-size: var(--t-13); }
.sw-rl__teamnew { margin-top: var(--s-1); }
.sw-duty__opt.is-off { opacity: 0.55; cursor: not-allowed; }
.sw-duty__opt small { color: var(--muted); }
.sw-maya__rule { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: var(--t-12); color: var(--muted); }
.sw-maya__details { margin-top: 6px; font-size: var(--t-12); color: var(--muted); }
.sw-maya__details summary { cursor: pointer; }
.sw-maya__details pre { margin: 4px 0 0; padding: 8px; border-radius: var(--r-md); background: var(--sunken); color: var(--text);
  font-family: var(--font-mono); font-size: var(--t-12); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 200px; overflow: auto; }
@media (pointer: coarse) {
  .sw-rl__row .sw-button, .sw-rl__teamnew, .sw-maya__card-actions .sw-button { min-height: 44px; }
  .sw-maya__details summary { min-height: 44px; display: flex; align-items: center; }
}
/* D449: a run's summary keeps its lines (the risk watch lists one task per line). */
.sw-duty__result p, .sw-duty__runs p { white-space: pre-line; }

/* D460: task rows no longer carry the task code before the name. */
.sw-row__main--nocode { grid-template-columns: 132px 1fr auto; }
.sw-row__main--nocode.sw-row__main--grouped { grid-template-columns: 1fr auto; }
@media (max-width: 820px) {
  .sw-row__main--nocode, .sw-row__main--nocode.sw-row__main--grouped {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "status . date" "title title title" "meta meta meta";
  }
}

/* D460: project fields, switched per project. */
.sw-pcard__acts--end { justify-content: flex-end; margin-top: var(--s-1); }
.sw-pfmode__opt { display: flex; gap: var(--s-1); align-items: flex-start; padding: var(--s-1) 0; }
.sw-pfmode__opt input { margin-top: 4px; }
/* D460: dropping files on a project's Files card. */
[data-fold="project:files"].is-drop { outline: 2px dashed var(--focus); outline-offset: 4px; background: var(--surface); }
.sw-file__drophint { margin: var(--s-1) 0 0; font-size: var(--t-13); color: var(--muted); }
@media (pointer: coarse) { .sw-file__drophint { display: none; } }
/* I-301: change a bill's project from its row. */
.sw-battr__chg { margin-left: var(--s-1); font-size: var(--t-13); }