/* ====== MPad — the iOS face (2026-10-01) ======

   Loaded after app.css. This is the design system; app.css is the older
   component sheet underneath it and is being retired a screen at a time.

   The rules of the house, so the next screen matches the last one:

     1. A screen is a stack of GROUPS. A group is a rounded block of
        CELLS with hairlines between them, exactly as in iOS Settings.
        `.gh` is a group's heading. There is no footer text.
     2. A cell is one line: what it is on the left, its value on the
        right, a chevron if it goes somewhere. A second line is allowed
        when it is data (a date, a venue) and never when it is an
        explanation.
     3. Nothing explains itself. No helper paragraph above or below a
        section, no sentence in an empty state. If a control needs a
        sentence, the control is wrong.
     4. Going deeper pushes a screen (it slides in from the right and
        Back slides it away). Making or editing something opens a sheet
        (it rises from the bottom; Cancel on the left, the action on the
        right). Choosing between a few things is an action sheet.
     5. One tint. Blue is "you can press this". Red only ever deletes,
        green only ever means done, orange only ever means missing.
     6. Type follows the phone's own text-size setting, every target is
        at least 44 points, and motion stops when Reduce Motion is on.

   Three widths, and only three — the same three as app.css:
     (max-width: 700px)  (max-width: 899px)  (min-width: 900px) */

/* ---------------------------------------------------------------- tokens */
:root {
  --sys-bg: #f2f2f7;
  --sys-cell: #ffffff;
  --sys-cell-2: #f2f2f7;
  --sys-press: #d1d1d6;
  --fill: rgba(120, 120, 128, .20);
  --fill-2: rgba(120, 120, 128, .16);
  --fill-3: rgba(118, 118, 128, .12);
  --sep: rgba(60, 60, 67, .22);
  --label: #000000;
  /* Apple's secondary label is 60% and lands near 3.5:1 on white. Small
     grey text is most of what this app prints, so it is taken darker. */
  --label-2: #6a6a70;
  --label-3: #a2a2a8;
  --tint: #007aff;
  --tint-ink: #ffffff;
  --red: #ff3b30;
  --orange: #ff9500;
  --green: #34c759;
  --yellow: #ffcc00;
  --indigo: #5856d6;
  --teal: #30b0c7;
  --pink: #ff2d55;
  --gray: #8e8e93;
  /* The same hues, dark enough to be read as small text on white. */
  --red-text: #d70015;
  --orange-text: #b25000;
  --green-text: #1a7f37;
  --bar: rgba(249, 249, 249, .82);
  --bar-solid: #f9f9f9;
  --thick: rgba(248, 248, 250, .93);
  --sheet: #f2f2f7;
  --scrim: rgba(0, 0, 0, .28);
  --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, .12);
  --shadow-pop: 0 12px 44px rgba(0, 0, 0, .18);

  --r-group: 12px;
  --r-ctl: 10px;
  --gutter: 16px;
  --nav-h: 44px;
  --tab-h: 50px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --t-push: 460ms;
  --t-sheet: 420ms;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
          "Segoe UI", Roboto, Arial, sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", -apple-system,
                BlinkMacSystemFont, "Helvetica Neue", sans-serif;

}

/* The old sheet reads these names. Pointing them at the new palette is
   what recolours every screen that has not been rebuilt yet. Written
   against the same selectors app.css uses for its own light palette —
   one of them outranks a bare :root — so these win whichever theme is
   in force. */
:root, :root[data-theme], :root:not([data-theme]) {
  --bg: var(--sys-bg);
  --bg-elev: var(--sys-cell);
  --bg-elev-2: var(--fill-3);
  --bg-input: var(--fill-3);
  --border: var(--sep);
  --border-soft: var(--sep);
  --text: var(--label);
  --text-dim: var(--label-2);
  --text-faint: var(--label-2);
  --accent: var(--tint);
  --accent-dim: var(--tint);
  --accent-ink: var(--tint-ink);
  --btn-primary-bg: var(--tint);
  --btn-primary-hover: var(--tint);
  --btn-primary-ink: var(--tint-ink);
  --ok: var(--green-text);
  --warn: var(--orange-text);
  --danger: var(--red-text);
  --info: var(--tint);
  --shadow-modal: var(--shadow-pop);
  --shadow-card: none;
  --radius: var(--r-group);
  --radius-sm: var(--r-ctl);
}

/* Dark, written once and applied from the two places that can pick it. */
:root[data-theme="dark"] {
  --sys-bg: #000000;
  --sys-cell: #1c1c1e;
  --sys-cell-2: #2c2c2e;
  --sys-press: #3a3a3c;
  --fill: rgba(120, 120, 128, .36);
  --fill-2: rgba(120, 120, 128, .32);
  --fill-3: rgba(118, 118, 128, .24);
  --sep: rgba(84, 84, 88, .60);
  --label: #ffffff;
  --label-2: #a0a0a8;
  --label-3: #5f5f66;
  --tint: #0a84ff;
  --red: #ff453a;
  --orange: #ff9f0a;
  --green: #30d158;
  --yellow: #ffd60a;
  --indigo: #5e5ce6;
  --teal: #40c8e0;
  --pink: #ff375f;
  --red-text: #ff6961;
  --orange-text: #ffb340;
  --green-text: #30d158;
  --bar: rgba(22, 22, 24, .80);
  --bar-solid: #161618;
  --thick: rgba(44, 44, 46, .94);
  --sheet: #1c1c1e;
  --scrim: rgba(0, 0, 0, .48);
  --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, .5);
  --shadow-pop: 0 12px 44px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --sys-bg: #000000;
    --sys-cell: #1c1c1e;
    --sys-cell-2: #2c2c2e;
    --sys-press: #3a3a3c;
    --fill: rgba(120, 120, 128, .36);
    --fill-2: rgba(120, 120, 128, .32);
    --fill-3: rgba(118, 118, 128, .24);
    --sep: rgba(84, 84, 88, .60);
    --label: #ffffff;
    --label-2: #a0a0a8;
    --label-3: #5f5f66;
    --tint: #0a84ff;
    --red: #ff453a;
    --orange: #ff9f0a;
    --green: #30d158;
    --yellow: #ffd60a;
    --indigo: #5e5ce6;
    --teal: #40c8e0;
    --pink: #ff375f;
    --red-text: #ff6961;
    --orange-text: #ffb340;
    --green-text: #30d158;
    --bar: rgba(22, 22, 24, .80);
    --bar-solid: #161618;
    --thick: rgba(44, 44, 46, .94);
    --sheet: #1c1c1e;
    --scrim: rgba(0, 0, 0, .48);
    --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, .5);
    --shadow-pop: 0 12px 44px rgba(0, 0, 0, .6);
  }
}
/* In a sheet the surface behind the groups is one step lighter in the
   dark, so the cells have to step up with it or they vanish into it. */
:root[data-theme="dark"] .modal { --sys-cell: #2c2c2e; --sys-cell-2: #3a3a3c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .modal { --sys-cell: #2c2c2e; --sys-cell-2: #3a3a3c; }
}

/* Increase Contrast, the iOS accessibility switch. */
@media (prefers-contrast: more) {
  :root { --label-2: #3c3c43; --sep: rgba(60, 60, 67, .5); --tint: #0040dd; }
  :root[data-theme="dark"] { --label-2: #d8d8de; --sep: rgba(140, 140, 146, .8);
    --tint: #409cff; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --label-2: #d8d8de; --sep: rgba(140, 140, 146, .8);
    --tint: #409cff; }
}
/* Reduce Transparency: the bars stop being glass. */
@media (prefers-reduced-transparency: reduce) {
  :root { --bar: var(--bar-solid); --thick: var(--sys-cell); }
}

/* ------------------------------------------------------------------ base */
html { font-size: 17px; }
/* Dynamic Type. On an iPhone or iPad this keyword resolves to whatever
   the person chose under Settings › Display & Text Size, and every rem
   below scales with it. Touch devices only: on a Mac the same keyword
   means 13px, which is a desktop app's density and not this one's. */
@supports (font: -apple-system-body) {
  @media (pointer: coarse) { html { font: -apple-system-body; } }
}
@media (min-width: 900px) { html { font-size: 16px; } }

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  background: var(--sys-bg);
  color: var(--label);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; letter-spacing: inherit; }
a, button { touch-action: manipulation; }
h1, h2, h3, h4 { letter-spacing: -.02em; }
::selection { background: color-mix(in srgb, var(--tint) 28%, transparent); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tint) 55%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ----------------------------------------------------------------- shell */
.app {
  display: flex;
  position: fixed;
  inset: 0;
  height: auto;
  overflow: hidden;
  background: var(--sys-bg);
  transform-origin: 50% 0;
  transition: transform var(--t-sheet) var(--ease),
              border-radius var(--t-sheet) var(--ease);
}
main.main {
  position: relative;
  flex: 1;
  min-width: 0;
  display: block;
  overflow: hidden;
  background: var(--sys-bg);
}

/* The stage is where screens live and slide. It runs the whole height,
   under both bars, so content shows through them as it scrolls. */
.stage { position: absolute; inset: 0; overflow: hidden; }
.page {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: var(--sys-bg);
  padding-top: calc(var(--nav-h) + var(--safe-t));
  padding-bottom: calc(var(--tab-h) + var(--safe-b) + 24px);
  scroll-padding-top: calc(var(--nav-h) + var(--safe-t) + 8px);
}
.page-ghost { pointer-events: none; }

/* While the keyboard is up (app.js fits the shell to what can be seen)
   it covers the tab bar, as it does in any app, and nothing is padded
   for a bar or a home indicator that is not showing. */
body.has-keys { --tab-h: 0px; --safe-b: 0px; }
body.has-keys .tabbar { display: none; }
.page.is-over { box-shadow: -1px 0 0 var(--sep), -24px 0 48px rgba(0, 0, 0, .10); }
.page-dim {
  position: absolute; inset: 0; background: #000; opacity: 0;
  pointer-events: none;
}

.view {
  display: block;
  flex: none;
  overflow: visible;
  padding: 0 var(--gutter);
  max-width: 760px;
  margin: 0 auto;
}
.view.is-wide { max-width: none; }

/* -- the large title ---------------------------------------------------- */
.large-title {
  max-width: 760px;
  margin: 0 auto;
  padding: 3px var(--gutter) 8px;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.022em;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.large-title.is-long { font-size: 1.65rem; }
.large-title.is-tight { font-size: 1.36rem; letter-spacing: -.015em; }
.large-title:empty { display: none; }
.page.is-wide .large-title { max-width: none; }

/* -- the navigation bar ------------------------------------------------- */
.navbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  height: calc(var(--nav-h) + var(--safe-t));
  padding: var(--safe-t) 8px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  background: transparent;
  border-bottom: .5px solid transparent;
  transition: background-color .2s, border-color .2s;
}
.navbar.is-scrolled {
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--sep);
}
.nav-lead { display: flex; align-items: center; min-width: 0; }
.nav-trail { display: flex; align-items: center; justify-content: flex-end;
  gap: 2px; min-width: 0; }
.nav-title {
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s, transform .18s;
}
.navbar.is-scrolled .nav-title,
.navbar.no-large .nav-title { opacity: 1; transform: none; }

.nav-back {
  display: inline-flex; align-items: center; gap: 3px;
  min-height: 44px; padding: 0 8px 0 2px; margin: 0;
  background: none; border: 0; color: var(--tint);
  font-size: 1rem; cursor: pointer; min-width: 0;
}
.nav-back svg { width: 12px; height: 21px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 2.6; stroke-linecap: round;
  stroke-linejoin: round; }
.nav-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-back:active { opacity: .35; }

/* Bar buttons. A view hands the bar ordinary buttons and they are drawn
   the way a navigation bar draws them: tint, no chrome. */
.nav-actions { display: flex; align-items: center; gap: 2px; }
.nav-actions:empty { display: none; }
.nav-actions .primary-btn, .nav-actions .ghost-btn, .nav-actions .danger-btn,
.nav-actions .link-btn, .nav-btn {
  min-height: 44px; min-width: 44px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 0;
  color: var(--tint); font-size: 1rem; font-weight: 400;
  white-space: nowrap; cursor: pointer;
}
.nav-actions .primary-btn { font-weight: 600; }
.nav-actions .danger-btn { color: var(--red-text); }
.nav-actions button:active, .nav-btn:active { opacity: .35; }
.nav-actions button:hover, .nav-btn:hover { background: none; }
.nav-btn svg, .nav-actions svg {
  width: 23px; height: 23px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.nav-btn { position: relative; }
.nav-btn .bell-count, .nav-btn .dock-dot {
  position: absolute; top: 6px; right: 3px;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: .65rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.nav-btn .dock-dot { min-width: 9px; width: 9px; height: 9px; padding: 0; }

/* -- the account switcher (talent) --------------------------------------- */
.acct {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; max-width: 100%; padding: 0 6px 0 8px;
  background: none; border: 0; color: var(--label); cursor: pointer;
  font-size: 1rem; font-weight: 600; min-width: 0;
}
.acct:active { opacity: .45; }
.acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-caret { width: 11px; height: 7px; flex: none; fill: none;
  stroke: var(--label-2); stroke-width: 2.2; stroke-linecap: round;
  stroke-linejoin: round; }

.avatar, .os-row .avatar {
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray); color: #fff;
  font-size: .68rem; font-weight: 600; letter-spacing: 0;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.avatar.lg { width: 60px; height: 60px; font-size: 1.25rem; }
.avatar.md { width: 40px; height: 40px; font-size: .88rem; }
.avatar.sm { width: 26px; height: 26px; font-size: .6rem; }
.avatar.all { background: var(--fill); color: var(--label); }
.avatar svg { width: 60%; height: 60%; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* -- the tab bar ---------------------------------------------------------- */
.tabbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
  height: calc(var(--tab-h) + var(--safe-b));
  padding: 0 2px var(--safe-b);
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--sep);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  min-height: var(--tab-h); padding: 5px 0 2px;
  color: var(--gray); font-size: .6rem; font-weight: 500;
  letter-spacing: 0; text-decoration: none; position: relative;
}
.tabbar a.is-active { color: var(--tint); font-weight: 500; }
.tabbar svg {
  width: 26px; height: 26px; fill: none; stroke: currentColor;
  stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round;
}
.tabbar a.is-active svg .fillable { fill: currentColor; }
.tabbar a.is-active svg .knock { stroke: var(--bar-solid); }
.tabbar a:active svg { transform: scale(.9); }
.tabbar svg { transition: transform .12s; }
.tabbar .tab-badge {
  position: absolute; top: 3px; left: calc(50% + 5px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: .65rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.tabbar .avatar { width: 26px; height: 26px; font-size: .58rem; }
.tabbar a.is-active .avatar { box-shadow: 0 0 0 1.5px var(--bar-solid), 0 0 0 3px var(--tint); }

/* -- the sidebar: desktop only, the iPad's split view --------------------- */
.sidebar {
  width: 272px; flex: 0 0 272px;
  background: var(--sys-bg);
  border-right: .5px solid var(--sep);
  padding: var(--safe-t) 0 0;
}
.brand { padding: 18px 20px 10px; }
.brand-logo { height: 26px; width: auto; }
.sidebar .acct { width: calc(100% - 20px); margin: 2px 10px 8px;
  padding: 6px 10px; border-radius: var(--r-ctl); justify-content: flex-start; }
.sidebar .acct:hover { background: var(--fill-3); }
.sidebar .acct .acct-caret { margin-left: auto; }
.nav { padding: 2px 10px; gap: 1px; }
.nav-group {
  padding: 18px 10px 5px; font-size: .76rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--label-2);
}
.nav-link {
  min-height: 38px; padding: 0 10px; gap: 10px;
  border-radius: var(--r-ctl); color: var(--label);
  font-size: .94rem; transition: none;
}
.nav-link:hover { background: var(--fill-3); color: var(--label); }
.nav-link.is-active { background: var(--tint); color: #fff; font-weight: 400; }
.nav-icon { width: 19px; height: 19px; color: var(--tint); stroke-width: 1.5; }
.nav-link.is-active .nav-icon { color: #fff; }
.nav-dot { margin-left: auto; }
.sidebar-foot { border-top: 0; padding: 6px 10px calc(10px + var(--safe-b)); }
.who { padding: 8px 10px 2px; }
.who-name { font-size: .8rem; color: var(--label-2); }
.sidebar-close, .menu-btn, .scrim { display: none !important; }

@media (max-width: 899px) {
  .sidebar { display: none; }
  .nav-desk { display: none !important; }
}
@media (min-width: 900px) {
  :root { --tab-h: 0px; }
  .tabbar { display: none; }
  .navbar { padding: 0 14px; }
  .navbar .acct { display: none; }
  .page { padding-bottom: 48px; }
  .nav-title { max-width: 40vw; }
}

/* ---------------------------------------------------------------- groups */
.gh, .os-label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin: 0 0 .42rem; padding: 0 var(--gutter);
  font-size: .78rem; line-height: 1.3; font-weight: 400;
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--label-2);
}
.gh > :last-child:not(:first-child), .os-label > :last-child:not(:first-child) {
  text-transform: none; letter-spacing: 0; flex: none;
}
.gh a, .gh button, .os-label a {
  font: inherit; font-size: .88rem; color: var(--tint); background: none;
  border: 0; padding: 0; cursor: pointer; text-transform: none;
  letter-spacing: 0;
}
.os-label.alert { color: var(--red-text); }

.group, .os-rows, .list {
  display: block;
  background: var(--sys-cell);
  border-radius: var(--r-group);
  overflow: hidden;
  margin: 0 0 1.6rem;
  gap: 0;
}
.os-section { margin: 0 0 1.6rem; }
.os-section > .os-rows, .os-section > .group { margin-bottom: 0; }

.cell, .os-row, .list-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 44px;
  margin: 0; padding: .62rem var(--gutter);
  background: transparent; color: var(--label);
  border: 0; border-radius: 0;
  font: inherit; font-size: 1rem; line-height: 1.3;
  text-align: left; text-decoration: none;
  cursor: default;
}
button.cell, a.cell, .cell[data-go], .cell.is-link,
button.os-row, a.os-row, .os-row[data-go], .os-row[data-goto],
.os-row[data-artist], .os-row[data-open-file] { cursor: pointer; }
/* The hairline starts where the text starts — after the icon, if there
   is one — which is the detail that makes a list read as iOS. */
.cell + .cell::before, .os-row + .os-row::before,
.list-item + .list-item::before {
  content: ""; position: absolute; top: 0; right: 0;
  left: var(--gutter); height: .5px; background: var(--sep);
}
/* …and where the text starts depends on what is in front of it. */
.cell { --inset: var(--gutter); }
.cell.has-icon { --inset: calc(var(--gutter) + 42px); }
.cell:has(> .ring) { --inset: calc(var(--gutter) + 34px); }
.cell:has(> .cell-date) { --inset: calc(var(--gutter) + 52px); }
.cell:has(> .file-ic) { --inset: calc(var(--gutter) + 44px); }
.cell:has(> .avatar) { --inset: calc(var(--gutter) + 42px); }
.cell:has(> .avatar.sm) { --inset: calc(var(--gutter) + 38px); }
.cell:has(> .avatar.md) { --inset: calc(var(--gutter) + 52px); }
.cell:has(> .avatar.lg) { --inset: calc(var(--gutter) + 74px); }
.cell + .cell::before { left: var(--inset); }
.os-row:hover, .list-item:hover { border-color: transparent; }
button.cell:active, a.cell:active, .cell.is-link:active,
button.os-row:active, a.os-row:active, .os-row[data-go]:active,
.os-row[data-goto]:active, .os-row[data-artist]:active,
.list-item.is-link:active { background: var(--sys-press); }
@media (hover: hover) {
  button.cell:hover, a.cell:hover, .cell.is-link:hover,
  button.os-row:hover, a.os-row:hover { background: var(--fill-3); }
}

.cell-main, .os-row .main, .list-main { flex: 1; min-width: 0; }
.cell-title, .os-row .t, .list-title {
  display: block; font-size: 1rem; font-weight: 400; line-height: 1.3;
  color: inherit; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-title.wrap { white-space: normal; }
.cell-sub, .os-row .s, .list-sub {
  display: block; margin-top: 1px; font-size: .82rem; line-height: 1.3;
  color: var(--label-2); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-sub.wrap { white-space: normal; }
.cell-value, .os-row .right {
  flex: none; max-width: 56%; color: var(--label-2); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.os-row .right b { font-size: 1rem; font-weight: 400; color: var(--label); }
.os-row .right small { font-size: .82rem; color: var(--label-2); }
.cell-value.is-missing { color: var(--tint); }
.cell-value.is-late { color: var(--red-text); }
.cell-value.is-good { color: var(--green-text); }

/* The disclosure chevron, drawn rather than typed. */
.chev, .cell.is-nav::after, a.os-row::after, .os-row.is-nav::after {
  content: ""; flex: none; width: 8px; height: 13px; margin-left: -2px;
  background: var(--label-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.5 1.5l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.5 1.5l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.os-row > .faint:last-child { display: none; }

/* A cell that is an action rather than a place: tint, or red. */
.cell.is-action { color: var(--tint); }
.cell.is-destructive { color: var(--red-text); }
.cell.is-center { justify-content: center; }
.cell.is-muted .cell-title { color: var(--label-2); }
.cell.is-off { opacity: .45; }

/* Settings-style icon tile at the head of a cell. */
.cell-icon {
  flex: none; width: 30px; height: 30px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray); color: #fff;
}
.cell-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cell-icon .solid { fill: currentColor; stroke: none; }
.ic-blue { background: var(--tint); } .ic-red { background: var(--red); }
.ic-orange { background: var(--orange); } .ic-green { background: var(--green); }
.ic-indigo { background: var(--indigo); } .ic-teal { background: var(--teal); }
.ic-pink { background: var(--pink); } .ic-yellow { background: var(--yellow); }
.ic-gray { background: var(--gray); }

/* The state ring on a "needed" row, and on a task. */
.ring {
  flex: none; width: 22px; height: 22px; border-radius: 999px;
  border: 1.5px solid var(--label-3); display: inline-flex;
  align-items: center; justify-content: center; color: #fff;
  background: transparent;
}
.ring svg { width: 12px; height: 12px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; }
.ring.is-done { background: var(--green); border-color: var(--green); }
.ring.is-done svg { opacity: 1; }
.ring.is-todo { border-color: var(--orange); }
.ring.is-late { border-color: var(--red); }
.ring.is-later, .ring.is-skipped { border-style: dashed; }
button.ring { padding: 0; cursor: pointer; }
/* A ring is 22 points; the finger gets 44. */
button.ring::after { content: ""; position: absolute; inset: -11px; }
button.ring { position: relative; }

/* A count that wants attention, at the tail of a row. */
.count {
  flex: none; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: var(--orange); color: #fff;
  font-size: .76rem; font-weight: 600; display: inline-flex;
  align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.count.is-late { background: var(--red); }
.count.is-quiet { background: var(--fill); color: var(--label-2); }

/* The date block at the head of a diary row. */
.cell-date, .os-row .date {
  flex: none; width: 40px; text-align: center; line-height: 1;
}
.cell-date b, .os-row .date b {
  display: block; font-size: 1.3rem; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.cell-date small, .os-row .date small {
  display: block; margin-top: 3px; font-size: .62rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--red-text);
}
.os-row .time { font-size: 1rem; font-weight: 600; min-width: 52px; }
.os-row.soft { border: 0; background: transparent; }
.os-row.soft .t { color: var(--label-2); }
.os-row.alert { border: 0; }

/* -- status words: text, not pills ---------------------------------------- */
.tag, .badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0; border: 0; border-radius: 0; background: none;
  font-size: .88rem; font-weight: 400; line-height: 1.3;
  letter-spacing: 0; text-transform: none; color: var(--label-2);
  white-space: nowrap; flex: none;
}
.tag.hot, .badge.danger { background: none; color: var(--red-text); }
.tag.warm, .badge.warn { background: none; color: var(--orange-text); }
.tag.ok, .badge.ok { background: none; color: var(--green-text); }
.tag.cool, .badge.info, .badge.accent { background: none; color: var(--label-2); }
.tag.mute, .badge.muted { background: none; color: var(--label-2); }
.tag .dot { width: 7px; height: 7px; }

/* ---------------------------------------------------------------- controls */
.primary-btn, .ghost-btn, .danger-btn {
  min-height: 36px; padding: 0 14px; border: 0;
  border-radius: var(--r-ctl); font-size: .94rem; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; transition: opacity .12s;
}
.primary-btn { background: var(--tint); color: #fff; font-weight: 600; }
.ghost-btn { background: var(--fill-3); color: var(--tint); }
.danger-btn { background: var(--fill-3); color: var(--red-text); }
.primary-btn:hover { background: var(--tint); }
.ghost-btn:hover { background: var(--fill-2); border: 0; }
.danger-btn:hover { background: var(--fill-2); border: 0; }
.primary-btn:active, .ghost-btn:active, .danger-btn:active { opacity: .55; }
.primary-btn:disabled, .ghost-btn:disabled { opacity: .4; }
.link-btn { font-size: 1rem; color: var(--tint); }
.link-btn:hover { text-decoration: none; }
.link-btn:active { opacity: .4; }
.link-btn.subtle { font-size: .88rem; color: var(--label-2); }
.icon-btn {
  min-width: 44px; min-height: 44px; padding: 0; color: var(--tint);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
}
.icon-btn:hover { background: none; color: var(--tint); }
.icon-btn:active { opacity: .4; }

/* The big button at the foot of a sheet or an empty page. */
.cta, .os-primary {
  width: 100%; min-height: 50px; margin: 0 0 1.6rem; padding: 0 16px;
  border: 0; border-radius: 14px; background: var(--tint); color: #fff;
  font-size: 1rem; font-weight: 600; display: flex; align-items: center;
  justify-content: center; gap: 8px; cursor: pointer;
}
.cta:active, .os-primary:active { opacity: .6; }
.cta.is-gray, .os-primary.ghost { background: var(--fill-3); color: var(--tint);
  border: 0; }

/* -- text fields ----------------------------------------------------------- */
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=date], input[type=datetime-local],
input[type=time], input[type=search], input[type=tel], select, textarea,
.modal-input {
  min-height: 44px; padding: 10px 14px; border: 0;
  border-radius: var(--r-ctl); background: var(--sys-cell);
  color: var(--label); font-size: 1rem; line-height: 1.3;
  transition: box-shadow .12s;
}
.view input[type=text], .view input[type=email], .view input[type=url],
.view input[type=number], .view input[type=date], .view input[type=tel],
.view input[type=datetime-local], .view select, .view textarea {
  background: var(--sys-cell);
}
input:focus, select:focus, textarea:focus {
  border: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tint) 60%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--label-3); opacity: 1; }
textarea { min-height: 96px; line-height: 1.35; }
@media (min-width: 900px) { input, select, textarea { font-size: 1rem; } }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M1.5 6L5 2.5 8.5 6M1.5 10L5 13.5 8.5 10' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: calc(100% - 13px) 50%;
  background-size: 9px 15px;
  background-repeat: no-repeat;
  padding-right: 34px;
  text-overflow: ellipsis;
}

/* A field is a row: its label at the left, its value at the right. A
   run of them is one group (ui.js groupFields puts them in one); a
   field on its own is a group of one. */
.field {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 44px; margin: 0 0 1.2rem; padding: 0 var(--gutter);
  background: var(--sys-cell); border-radius: var(--r-group);
}
.group.form { margin-bottom: 1.2rem; }
.group.form > .field { margin: 0; border-radius: 0; background: transparent; }
.group.form > .field + .field::before {
  content: ""; position: absolute; top: 0; right: 0; left: var(--gutter);
  height: .5px; background: var(--sep);
}
.field > span {
  display: block; flex: none; max-width: 46%; margin: 0; padding: 0;
  font-size: 1rem; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--label);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.field > span:empty { display: none; }
.field > input, .field > select, .field > .modal-input {
  flex: 1; width: auto; min-width: 0; min-height: 44px; padding: 0;
  border-radius: 0; background-color: transparent !important;
  box-shadow: none !important; text-align: right; color: var(--label);
}
.field > select {
  padding-right: 18px; background-position: right 0 top 50%;
  text-align-last: right; color: var(--label-2);
}
.field > input::-webkit-date-and-time-value { text-align: right; }
.field > input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.field > input[type=number]::-webkit-inner-spin-button { display: none; }
/* A text area has no room for a label beside it, so the label sits
   above the writing, small — and stays there once something is written,
   so a filled box still says what it is. */
.field:has(> textarea) { display: block; padding: 0; }
.field:has(> textarea) > span {
  max-width: none; padding: 9px var(--gutter) 0; font-size: .78rem;
  color: var(--label-2);
}
.field > textarea {
  display: block; width: 100%; min-height: 76px;
  padding: 3px var(--gutter) 11px; border-radius: 0;
  background: transparent !important; box-shadow: none !important;
}
.field:has(> span:empty) > textarea { padding-top: 11px; }
.field-row { display: block; }
/* Alerts hold a list of their own under a heading, not a value. */
.field.reminder-box { display: block; min-height: 0; padding: 0;
  background: none; border-radius: 0; }
.field.reminder-box > span {
  max-width: none; margin: 0 0 .42rem; padding: 0 var(--gutter);
  font-size: .78rem; letter-spacing: .02em; text-transform: uppercase;
  color: var(--label-2);
}

/* The search field: grey, rounded, a glass at the left. */
input[type=search], .search {
  min-height: 38px; padding: 0 12px 0 34px; border-radius: var(--r-ctl);
  background-color: var(--fill-3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.8' cy='6.8' r='4.8' fill='none' stroke='%238e8e93' stroke-width='1.7'/%3E%3Cpath d='M10.5 10.5L14 14' stroke='%238e8e93' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 10px 50%;
  background-size: 16px 16px;
  -webkit-appearance: none; appearance: none;
}
.view input[type=search] { background-color: var(--fill-3); }
.searchbar { margin: 0 0 1rem; }
button.search {
  width: 100%; display: flex; align-items: center; border: 0;
  color: var(--label-2); font-size: 1rem; text-align: left; cursor: text;
}

/* -- the switch -------------------------------------------------------------- */
input[type=checkbox].switch, .cell > input[type=checkbox],
.perm-row > input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 51px; height: 31px; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 999px; background: var(--fill);
  position: relative; cursor: pointer; transition: background-color .22s;
}
input[type=checkbox].switch::after, .cell > input[type=checkbox]::after,
.perm-row > input[type=checkbox]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 999px; background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .05);
  transition: transform .22s var(--ease);
}
input[type=checkbox].switch:checked, .cell > input[type=checkbox]:checked,
.perm-row > input[type=checkbox]:checked { background: var(--green); }
input[type=checkbox].switch:checked::after,
.cell > input[type=checkbox]:checked::after,
.perm-row > input[type=checkbox]:checked::after { transform: translateX(20px); }
input[type=checkbox].switch:disabled, .perm-row > input[type=checkbox]:disabled {
  opacity: .45; cursor: default; }
input[type=checkbox]:not(.switch) { accent-color: var(--tint); width: 20px;
  height: 20px; }
/* A switch row: the words on the left, the switch on the right. */
.perm-row {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding: .5rem var(--gutter); cursor: pointer; position: relative;
  flex-direction: row-reverse; justify-content: space-between;
}
.perm-row > span { flex: 1; min-width: 0; }
.perm-row b { font-weight: 400; }
.perm-row + .perm-row::before {
  content: ""; position: absolute; top: 0; right: 0; left: var(--gutter);
  height: .5px; background: var(--sep);
}

/* -- the segmented control ---------------------------------------------------- */
.seg, .tabs {
  position: relative; display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr); gap: 0;
  margin: 0 0 1rem; padding: 2px; border: 0;
  border-radius: 9px; background: var(--fill-3);
  --seg-i: 0; --seg-n: 1;
}
.seg::before, .tabs::before {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px;
  width: calc((100% - 4px) / var(--seg-n));
  border-radius: 7px; background: var(--sys-cell);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04);
  transform: translateX(calc(var(--seg-i) * 100%));
  transition: transform .28s var(--ease);
}
:root[data-theme="dark"] .seg::before, :root[data-theme="dark"] .tabs::before {
  background: #636366; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .seg::before, :root:not([data-theme]) .tabs::before {
    background: #636366; }
}
.seg > *, .tabs > .tab, .seg button, .seg span {
  position: relative; z-index: 1; min-height: 32px; padding: 0 6px;
  border: 0; border-radius: 7px; background: transparent !important;
  color: var(--label); font-size: .8rem; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; margin: 0;
}
.seg > .is-active, .tabs > .tab.is-active { font-weight: 600; color: var(--label); }
.tabs > .tab { border-bottom: 0; }
.seg .seg-count { font-size: .7rem; color: var(--label-2); font-weight: 500; }
.seg:has(> :nth-child(2):last-child) { --seg-n: 2; }
.seg:has(> :nth-child(3):last-child) { --seg-n: 3; }
.seg:has(> :nth-child(4):last-child) { --seg-n: 4; }
.seg:has(> :nth-child(5):last-child) { --seg-n: 5; }
.seg:has(> :nth-child(6):last-child) { --seg-n: 6; }
.tabs:has(> :nth-child(2):last-child) { --seg-n: 2; }
.tabs:has(> :nth-child(3):last-child) { --seg-n: 3; }
.tabs:has(> :nth-child(4):last-child) { --seg-n: 4; }
.tabs:has(> :nth-child(5):last-child) { --seg-n: 5; }
.tabs:has(> :nth-child(6):last-child) { --seg-n: 6; }
.tabs:has(> :nth-child(7):last-child) { --seg-n: 7; }
.seg:has(> :nth-child(2).is-active), .tabs:has(> :nth-child(2).is-active) { --seg-i: 1; }
.seg:has(> :nth-child(3).is-active), .tabs:has(> :nth-child(3).is-active) { --seg-i: 2; }
.seg:has(> :nth-child(4).is-active), .tabs:has(> :nth-child(4).is-active) { --seg-i: 3; }
.seg:has(> :nth-child(5).is-active), .tabs:has(> :nth-child(5).is-active) { --seg-i: 4; }
.seg:has(> :nth-child(6).is-active), .tabs:has(> :nth-child(6).is-active) { --seg-i: 5; }
.tabs:has(> :nth-child(7).is-active) { --seg-i: 6; }
.seg:not(:has(> .is-active))::before, .tabs:not(:has(> .is-active))::before {
  opacity: 0; }
.seg.small { margin: 0; }
.tabs { overflow: visible; }

/* ---------------------------------------------------------------- sheets */
.modal-root {
  position: fixed; inset: 0; z-index: 100; padding: 0;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--scrim); overflow: hidden;
  animation: scrim-in .25s ease-out both;
}
.modal {
  position: relative;
  width: 100%; max-width: 640px;
  max-height: calc(100% - var(--safe-t) - 10px);
  background: var(--sheet); color: var(--label);
  border: 0; border-radius: 14px 14px 0 0;
  box-shadow: var(--shadow-sheet);
  display: flex; flex-direction: column;
  animation: sheet-in var(--t-sheet) var(--ease) both;
  will-change: transform;
}
.modal.wide { max-width: 760px; }
.modal::before {
  content: ""; position: absolute; top: 6px; left: 50%;
  width: 36px; height: 5px; margin-left: -18px; border-radius: 3px;
  background: var(--label-3); opacity: .7; z-index: 3;
}
.modal-head {
  position: relative; flex: none; min-height: 56px; padding: 14px 72px 0;
  border: 0; display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: grab;
}
.modal-head h3 {
  font-size: 1rem; font-weight: 600; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The round grey close, only when the sheet has no Cancel of its own. */
.modal-head [data-close] {
  position: absolute; top: 15px; right: 12px; min-width: 30px; width: 30px;
  min-height: 30px; height: 30px; border-radius: 999px;
  background: var(--fill-3); color: var(--label-2); font-size: .8rem;
}
.modal:has(.modal-actions [data-close]) .modal-head [data-close] { display: none; }
.modal-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px var(--gutter) calc(20px + var(--safe-b));
}
/* A sheet's buttons are written at the foot of its form. They are drawn
   in its bar instead: Cancel at the left, the action at the right, bold.
   Anything else — Remove, mostly — stays at the foot, full width. */
.modal-actions { display: contents; }
.modal-actions > .spacer, .modal-actions > .key-hint { display: none; }
.modal-actions > [data-close]:not(.primary-btn),
.modal-actions > .primary-btn {
  position: absolute; top: 14px; z-index: 4; min-height: 42px;
  padding: 0 14px; background: none; border: 0; border-radius: 0;
  color: var(--tint); font-size: 1rem; font-weight: 400; max-width: 44%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-actions > [data-close]:not(.primary-btn) { left: 4px; }
.modal-actions > .primary-btn { right: 4px; font-weight: 600; }
.modal-actions > .primary-btn:disabled { color: var(--label-3); opacity: 1; }
.modal-actions > :not([data-close]):not(.primary-btn):not(.spacer):not(.key-hint),
.modal-actions > a.ghost-btn {
  display: flex; width: 100%; min-height: 44px; margin: 10px 0 0;
  border-radius: var(--r-group); background: var(--sys-cell);
  font-size: 1rem; font-weight: 400;
}
.modal-body > p:first-child { margin-top: 0; }
.modal-body .group, .modal-body .os-rows { margin-bottom: 1.2rem; }
.modal-body img { border-radius: var(--r-ctl); }

@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-out { from { transform: var(--from, none); } to { transform: translateY(100%); } }
@keyframes scrim-in { from { background-color: transparent; } }
@keyframes scrim-out { to { background-color: transparent; } }
.modal-root.is-leaving { animation: scrim-out .3s ease-in both; pointer-events: none;
  z-index: 99; }
.modal-root.is-leaving .modal, .modal-root.is-leaving .asheet,
.modal-root.is-leaving .alert {
  animation: sheet-out .3s cubic-bezier(.4, 0, 1, 1) both; }
.modal-root.is-leaving .alert { animation: alert-out .18s ease-in both; }

/* The screen behind a sheet steps back, the way iOS presents a card. */
@media (max-width: 899px) {
  body.has-sheet { background: #000; }
  body.has-sheet .app {
    transform: scale(.925) translateY(calc(var(--safe-t) * .6 + 4px));
    border-radius: 12px;
  }
}
@media (min-width: 900px) {
  .modal-root { align-items: center; padding: 24px; }
  .modal { border-radius: 14px; max-height: 100%;
    box-shadow: var(--shadow-pop); animation-name: card-in;
    animation-duration: .3s; }
  .modal::before { display: none; }
  .modal-head { padding-top: 0; cursor: default; }
  .modal-actions > [data-close]:not(.primary-btn),
  .modal-actions > .primary-btn { top: 7px; }
  .modal-head [data-close] { top: 13px; }
  .modal-body { padding-bottom: 20px; }
  .modal-root.is-leaving .modal { animation: card-out .2s ease-in both; }
}
@keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes card-out { to { opacity: 0; transform: translateY(16px) scale(.98); } }

/* -- action sheet and alert -------------------------------------------------- */
.asheet {
  width: 100%; max-width: 520px; padding: 0 8px calc(8px + var(--safe-b));
  animation: sheet-in .36s var(--ease) both;
}
.asheet-group {
  border-radius: 14px; overflow: hidden; margin-bottom: 8px;
  background: var(--thick); -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
}
.asheet-head { padding: 14px 16px 13px; text-align: center; }
.asheet-head b { display: block; font-size: .78rem; font-weight: 600;
  color: var(--label-2); }
.asheet-head span { display: block; margin-top: 3px; font-size: .78rem;
  color: var(--label-2); line-height: 1.35; }
.asheet-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 57px; padding: 0 16px; border: 0;
  border-top: .5px solid var(--sep); background: transparent;
  color: var(--tint); font-size: 1.18rem; font-weight: 400; cursor: pointer;
}
.asheet-group > .asheet-btn:first-child { border-top: 0; }
.asheet-btn.is-destructive { color: var(--red); }
.asheet-btn.is-bold { font-weight: 600; }
.asheet-btn.is-on::after { content: "✓"; font-size: 1rem; margin-left: 4px; }
.asheet-btn:active { background: var(--fill-2); }
.asheet-cancel { background: var(--sys-cell); font-weight: 600; border-radius: 14px;
  border-top: 0; }
@media (min-width: 900px) {
  .asheet { max-width: 320px; padding: 0; animation-name: alert-in;
    animation-duration: .22s; }
  .asheet-btn { min-height: 44px; font-size: 1rem; }
  .asheet-group { box-shadow: var(--shadow-pop); }
}

.modal-guard {
  position: fixed; inset: 0; z-index: 110; display: grid; place-items: center;
  padding: 24px; background: var(--scrim); animation: scrim-in .2s both;
}
.alert, .guard-card {
  width: 100%; max-width: 280px; padding: 0; border: 0; border-radius: 14px;
  overflow: hidden; text-align: center; background: var(--thick);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--shadow-pop); animation: alert-in .22s var(--ease) both;
}
.alert b, .guard-card b { display: block; padding: 19px 16px 0; font-size: 1rem;
  font-weight: 600; margin: 0; }
.alert p, .guard-card p { margin: 3px 0 0; padding: 0 16px 19px;
  font-size: .78rem; line-height: 1.35; color: var(--label); }
.guard-card .modal-actions { display: flex; flex-wrap: nowrap; gap: 0;
  padding: 0; border-top: .5px solid var(--sep); }
.guard-card .modal-actions > button {
  position: static !important; flex: 1; min-height: 44px; margin: 0 !important;
  max-width: none; width: auto !important; border: 0; border-radius: 0 !important;
  background: none !important; color: var(--tint); font-size: 1rem;
  font-weight: 400; display: flex; }
.guard-card .modal-actions > button + button { border-left: .5px solid var(--sep); }
.guard-card .modal-actions > .danger-btn { color: var(--red); }
.guard-card .modal-actions > .primary-btn { font-weight: 600; }
@keyframes alert-in { from { opacity: 0; transform: scale(1.12); } }
@keyframes alert-out { to { opacity: 0; } }

/* ---------------------------------------------------------------- feedback */
.toasts { bottom: calc(var(--tab-h) + var(--safe-b) + 12px); gap: 8px;
  width: min(420px, calc(100vw - 32px)); }
.toast {
  width: auto; max-width: 100%; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .16), 0 0 0 .5px var(--sep);
  font-size: .88rem; font-weight: 500; gap: 14px;
  animation: toast-in .36s var(--ease) both;
}
.toast .link-btn { font-size: .88rem; font-weight: 600; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }

.empty-state {
  padding: 3.4rem 1rem; border: 0; border-radius: 0; background: none;
  text-align: center; color: var(--label-2); font-size: 1rem;
}
.empty-state p { margin: 0 0 .9rem; }
.empty-state p:last-child { margin-bottom: 0; }
.empty {
  padding: 2.6rem 1rem; text-align: center; color: var(--label-2);
}

.skeleton { padding: 0; }
.sk-row { background: var(--sys-cell); border: 0; border-radius: 0;
  padding: 14px var(--gutter); margin: 0; }
.sk-row:first-child { border-radius: var(--r-group) var(--r-group) 0 0; }
.sk-row:last-of-type { border-radius: 0 0 var(--r-group) var(--r-group); }
.sk-bar { height: 10px; border-radius: 5px; background: var(--fill-3); }

.spinner {
  width: 22px; height: 22px; border-radius: 999px; display: inline-block;
  border: 2.4px solid var(--fill); border-top-color: var(--label-2);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ptr {
  position: absolute; left: 0; right: 0; z-index: 1;
  top: calc(var(--nav-h) + var(--safe-t) + 10px);
  display: flex; justify-content: center; opacity: 0; pointer-events: none;
}
.ptr.is-armed, .ptr.is-busy { opacity: 1; }
.ptr .spinner { animation-play-state: paused; }
.ptr.is-busy .spinner { animation-play-state: running; }

/* ---------------------------------------------------------------- typography helpers */
.muted, .faint { color: var(--label-2); font-size: .88rem; }
.section-title { font-size: .78rem; font-weight: 400; letter-spacing: .02em;
  color: var(--label-2); margin: 0 0 .42rem; padding: 0 var(--gutter); }
.sub { margin: -4px 0 1.1rem; padding: 0; color: var(--label-2);
  font-size: .94rem; }
.modal-body .sub { margin: 0 0 1rem; padding: 0 var(--gutter); }
.fig { font-family: var(--font-round); font-variant-numeric: tabular-nums; }
.good { color: var(--green-text); } .bad { color: var(--red-text); }
.warnc { color: var(--orange-text); }

/* ---------------------------------------------------------------- older blocks, re-dressed */
.card {
  background: var(--sys-cell); border: 0; border-radius: var(--r-group);
  padding: var(--gutter); margin: 0 0 1.6rem; box-shadow: none;
}
.card-head { margin-bottom: 10px; }
.card-head h2, .card-head h3 { font-size: 1rem; font-weight: 600; }
.stack { gap: 0; }
.stats, .os-tiles { gap: 8px; margin-bottom: 1.6rem; }
.stat, .os-tile { border: 0; border-radius: var(--r-group); background: var(--sys-cell);
  padding: 12px 14px; }
.os-tiles.joined { background: var(--sep); border: 0; }
.stat-value, .os-tile .fig { font-size: 1.3rem; font-weight: 600;
  font-family: var(--font-round); }
.stat-label, .os-tile .cap { font-size: .72rem; text-transform: none;
  letter-spacing: 0; color: var(--label-2); margin-top: 3px; }
.os-note { border: 0; border-radius: var(--r-group); background: var(--sys-cell); }
.table-wrap { border: 0; border-radius: var(--r-group); background: var(--sys-cell); }
table.data th { font-size: .72rem; font-weight: 400; text-transform: uppercase;
  letter-spacing: .02em; color: var(--label-2); border-color: var(--sep); }
table.data td { border-color: var(--sep); font-size: .94rem; }
.fold { border: 0; border-radius: var(--r-group); background: var(--sys-cell);
  margin: 0 0 1.6rem; }
.drop-zone { border: 1px dashed var(--label-3); border-radius: var(--r-group);
  color: var(--label-2); }
kbd { font-family: var(--font); }

/* ---------------------------------------------------------------- motion off */
@media (prefers-reduced-motion: reduce) {
  :root { --t-push: 1ms; --t-sheet: 1ms; }
  .app, .seg::before, .tabs::before { transition: none !important; }
  body.has-sheet .app { transform: none; border-radius: 0; }
}

/* ---------------------------------------------------------------- pieces */
/* A bar button that is switched on: a filter in use. */
.nav-btn.is-on svg { stroke: #fff; }
.nav-btn.is-on::before {
  content: ""; position: absolute; width: 30px; height: 30px;
  border-radius: 999px; background: var(--tint); z-index: -1;
}
.nav-btn { z-index: 0; }

/* The stage of a date is the one control on its screen, so it gets a
   little more height than a filter does. */
.seg.stage > * { min-height: 34px; font-size: .78rem; }

.cell.is-total .cell-title, .cell.is-total .cell-value {
  font-weight: 600; color: var(--label); }
.cell.is-total .cell-value.is-late { color: var(--red-text); }
.cell-value .was { color: var(--label-3); margin-right: 8px;
  text-decoration: line-through; text-decoration-thickness: .5px; }

/* The part of a row that is tapped when the row also holds a ring. */
.cell-tap {
  display: block; margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; text-decoration: none;
  cursor: pointer; align-self: stretch;
}
.cell-tap:active { opacity: .45; }

.tick-on { flex: none; color: var(--tint); display: inline-flex; }
.tick-on svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* A small word at the tail of a lineup row: has it, or has not. */
.mark {
  flex: none; padding: 2px 7px; border-radius: 6px;
  font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  color: var(--label-2); background: var(--fill-3);
  font-variant-numeric: tabular-nums;
}
.mark.is-on { color: #fff; background: var(--green); }

/* -- documents -------------------------------------------------------- */
.file-ic {
  flex: none; width: 32px; height: 38px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fill-3); color: var(--gray);
}
.file-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.file-ic.is-pdf { color: var(--red); }
.file-ic.is-sheet { color: var(--green); }
.file-ic.is-image { color: var(--teal); }
.file-ic.is-word { color: var(--tint); }
.file-ic.lg { width: 84px; height: 100px; border-radius: 12px; }
.file-ic.lg svg { width: 44px; height: 44px; stroke-width: 1.2; }
.doc-preview {
  display: block; width: 100%; border: 0; border-radius: var(--r-ctl);
  background: #fff; margin: 0 0 4px;
}
iframe.doc-preview { height: 62vh; }
.doc-preview.is-none { background: var(--sys-cell); min-height: 190px;
  display: flex; align-items: center; justify-content: center; }

/* -- the log's composer ------------------------------------------------ */
.composer { display: flex; align-items: flex-end; gap: 6px; padding: 5px; }
.composer textarea {
  flex: 1; min-height: 34px; height: 34px; padding: 6px 10px; resize: none;
  background: transparent !important; box-shadow: none !important;
  line-height: 1.3;
}
.composer-send {
  flex: none; width: 32px; height: 32px; margin: 1px; border: 0;
  border-radius: 999px; background: var(--tint); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.composer-send svg { width: 18px; height: 18px; fill: none;
  stroke: currentColor; stroke-width: 2.6; stroke-linecap: round;
  stroke-linejoin: round; }
.log-cell .cell-title { white-space: pre-wrap; }

/* -- a figure worth a whole cell --------------------------------------- */
.cell.hero { align-items: flex-end; padding-top: 14px; padding-bottom: 14px; }
.hero-fig { display: block; font-size: 2.3rem; font-weight: 700;
  line-height: 1; letter-spacing: -.02em; }
.hero-fig small { font-size: 1rem; font-weight: 400; color: var(--label-2);
  letter-spacing: 0; }
.bar { display: block; height: 6px; margin-top: 12px; border-radius: 3px;
  background: var(--fill-3); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px;
  background: var(--green); }

/* -- a field inside a cell: no box of its own --------------------------- */
.cell > input[type=text], .cell > input[type=email],
.cell > input[type=password], .cell > input[type=url],
.cell > input[type=number], .cell > input[type=tel] {
  flex: 1; min-width: 0; min-height: 22px; padding: 0; border-radius: 0;
  background: transparent !important; box-shadow: none !important;
}
label.cell { cursor: pointer; }

/* -- importing a sheet -------------------------------------------------- */
.import-row { align-items: flex-start; }
.import-row > input[type=checkbox] { margin-top: 2px; flex: none; }
.import-picks { display: flex; gap: 6px; margin-top: 6px; }
.import-picks select { min-height: 32px; padding: 4px 28px 4px 10px;
  font-size: .8rem; background-color: var(--fill-3); width: auto; flex: 1;
  min-width: 0; }
.field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* -- More: the talent at the top ---------------------------------------- */
.profile-cell { padding-top: .8rem; padding-bottom: .8rem; gap: 14px; }
.profile-cell .cell-title { font-size: 1.24rem; font-weight: 500; }

/* -- a sheet with no title: only the grabber ---------------------------- */
.modal.is-bare .modal-head { min-height: 30px; padding: 0; }
.modal.is-bare .modal-head h3, .modal.is-bare .modal-head [data-close] {
  display: none; }
@media (min-width: 900px) {
  .modal.is-bare .modal-head { min-height: 16px; }
  .modal.is-bare { max-width: 380px; }
}

/* -- sign in ------------------------------------------------------------- */
.login-screen {
  min-height: 100dvh; display: grid; place-items: center;
  padding: 24px var(--gutter); background: var(--sys-bg); text-align: left;
}
.login-card {
  width: 100%; max-width: 360px; padding: 0; background: none; border: 0;
  border-radius: 0; box-shadow: none;
}
.login-card > *:not(.login-logo) { text-align: left; }
.login-logo { display: block; width: 132px; margin: 0 auto 34px; }
.login-error { margin: -8px var(--gutter) 14px; color: var(--red-text);
  font-size: .82rem; }
.login-btn { margin-top: 4px; }

/* -- alerts ---------------------------------------------------------------- */
.reminder-box { margin-bottom: 1rem; }
.reminder-list { display: block; margin: 0; padding: 0; }
.cell.reminder-chip {
  display: flex; min-height: 44px; padding: .62rem var(--gutter);
  border: 0; border-radius: 0; background: transparent; font-size: 1rem;
  color: var(--label);
}
.reminder-drop {
  flex: none; width: 44px; height: 44px; margin: -11px -11px -11px 0;
  border: 0; background: none; color: var(--red); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.reminder-drop svg { width: 22px; height: 22px; fill: var(--red);
  stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.reminder-drop svg circle { stroke: none; }

/* -- switches that hang off another switch ----------------------------------- */
.cell.is-nested { padding-left: calc(var(--gutter) * 2); }
.perm-nest { position: relative; margin: 0; padding: 0; border: 0; }
.perm-nested { margin: 0; padding: 0; border: 0; }
.perm-nest::before { content: ""; position: absolute; top: 0; right: 0;
  left: var(--gutter); height: .5px; background: var(--sep); }
.perm-nest[data-muted] { opacity: .4; pointer-events: none; }
.perm-nest-note { display: none; }

/* -- phone: what the bar shows -------------------------------------------- */
@media (max-width: 899px) {
  #bellBtn { display: none; }
  .navbar.is-home #bellBtn { display: inline-flex; }
  .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field-row:has(input[type=datetime-local]) { grid-template-columns: 1fr; }
}

/* -- a toolbar: a few icon actions in a row, as under a photo -------------- */
.toolbar { display: flex; justify-content: space-around; align-items: center;
  margin: 6px 0 0; }
.toolbar > * {
  min-width: 56px; min-height: 44px; border: 0; background: none;
  color: var(--tint); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer;
}
.toolbar svg { width: 25px; height: 25px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.toolbar > .is-destructive { color: var(--red); }
.toolbar > :active { opacity: .4; }

/* While the large title is showing, the small one is not there to be
   read and must not take the Back button's room. */
.navbar:not(.is-scrolled):not(.no-large) .nav-title { max-width: 0; }

/* See the note beside this element in index.html. */
.statusbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  height: env(safe-area-inset-top, 0px); background: #000;
  pointer-events: none;
}

/* See "A segmented control slides" in app.js. */
.seg-slide::before { animation: seg-slide .28s var(--ease) both; }
@keyframes seg-slide {
  from { transform: translateX(calc(var(--seg-from, 0) * 100%)); }
}
@media (prefers-reduced-motion: reduce) {
  .seg-slide::before { animation: none; }
}

/* The bars do not grow with the text size past what they can hold —
   the same cap iOS puts on its own. */
.nav-title, .nav-back, .nav-actions button, .nav-actions .link-btn, .acct {
  font-size: clamp(15px, 1rem, 20px);
}
.tabbar a { font-size: 10px; }

/* On a tab's root the left of the bar is the talent's name, which gets
   all the room there is; the tab bar already says which tab this is, so
   the small title is not drawn. */
@media (max-width: 899px) {
  .navbar.is-root { grid-template-columns: minmax(0, 1fr) auto; }
  .navbar.is-root .nav-title { display: none; }
}

.alert p.is-empty, .guard-card p.is-empty { padding-bottom: 19px; margin: 0; }

/* Which side of a row gives way when there is not room for both.

   A one-line row is a label and its value — "Venue · Bahrain
   International…" — and the label is kept whole while the value is cut,
   the way a Settings row truncates its detail and never its name.

   A two-line row is a thing in a list — a payment, a date — with a
   figure or a word at its tail. There the figure is kept whole and the
   title is cut: "AED 22,500" must never read "AED 22,5…". */
.cell:has(> .cell-value):not(:has(.cell-sub)) > .cell-main {
  flex: 1 0 auto; max-width: 70%;
}
.cell > .cell-value { flex: 0 1 auto; min-width: 0; max-width: none;
  margin-left: auto; }
.cell:has(.cell-sub) > .cell-value { flex: none; max-width: 52%; }

/* -- pieces the screens share (lifted from the first to need them) --------- */
/* Somebody's writing in a cell — a note, a bio, the points on a date. It
   keeps its line breaks and runs as long as it needs to. */
.cell.is-prose { align-items: flex-start; }
.cell.is-prose .cell-title { white-space: pre-wrap; overflow-wrap: anywhere; }

/* A row whose value is a figure: the name gives way, the figure never
   does. Said twice so it also outranks the one-line rule above. */
.cell.is-figure > .cell-main,
.cell.is-figure:has(> .cell-value):not(:has(.cell-sub)) > .cell-main {
  flex: 1 1 0; min-width: 0; max-width: none;
}
.cell.is-figure > .cell-value { flex: none; }

/* Three cells, the tick on the one in use: app.js moves .is-active when
   one is tapped and the tick goes with it. */
.cell[data-theme-set] .tick-on { visibility: hidden; }
.cell[data-theme-set].is-active .tick-on { visibility: visible; }

/* A form group that also holds rows which are not fields. */
.form.is-mixed > .field + .cell::before,
.form.is-mixed > .cell + .field::before {
  content: ""; position: absolute; top: 0; right: 0; left: var(--gutter);
  height: .5px; background: var(--sep);
}

/* Thirty-two points drawn; the finger gets forty-four. */
.composer-send { position: relative; }
.composer-send::after { content: ""; position: absolute; inset: -6px; }

/* ====== Calendar ====== */
/* -- the month's name between its two steppers, and Today ---------------- */
.cal-top { margin: 0 0 .85rem; }
.cal-bar { display: flex; align-items: center; min-height: 44px;
  margin: -6px 0 4px; }
.cal-stepper { display: flex; align-items: center; flex: 0 1 19rem;
  min-width: 0; margin-left: -16px; }
.cal-step {
  flex: none; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: 999px; background: none; color: var(--tint);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.cal-step svg { width: 11px; height: 19px; fill: none;
  stroke: currentColor; stroke-width: 2.6; stroke-linecap: round;
  stroke-linejoin: round; }
.cal-title {
  flex: 1; min-width: 0; margin: 0; text-align: center;
  font-size: 1.18rem; line-height: 1.2; font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-today {
  flex: none; margin-left: auto; min-height: 44px; padding: 0 0 0 12px;
  border: 0; background: none; color: var(--tint); font: inherit;
  font-size: 1rem; cursor: pointer;
}
.cal-step:active, .cal-today:active { opacity: .35; }
.cal-top .seg { margin: 0; }
@media (min-width: 900px) {
  .cal-top { display: flex; align-items: center; gap: 20px; }
  .cal-bar { flex: 1; min-width: 0; margin: 0; }
  .cal-today { margin-left: 4px; padding: 0 12px; }
  .cal-top .seg { flex: 0 0 17rem; }
}

/* -- the block a month or a week is drawn on ------------------------------- */
.cal-box {
  margin: 0 0 1.6rem; border-radius: var(--r-group); overflow: hidden;
  background: var(--sys-cell);
  /* It is tapped, not read out of: a second tap must not zoom the page
     or select a number. */
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.cal-wdays, .cal-week {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-wdays {
  padding: 8px 0 6px; font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; text-align: right;
  color: var(--label-2);
}
.cal-wdays > span { padding-right: 11px; }

/* -- month: with room, each day is written out ----------------------------- */
.cal-week { border-top: .5px solid var(--sep); }
.cal-day {
  position: relative; min-width: 0; min-height: 6.7rem; padding: 4px 0 5px;
  display: flex; flex-direction: column;
  border-left: .5px solid var(--sep); cursor: pointer;
}
.cal-day:first-child { border-left: 0; }
.cal-num {
  flex: none; align-self: flex-end; width: 1.75rem; height: 1.75rem;
  margin: 0 5px 3px 0; padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--label); font: inherit; font-size: .88rem;
  font-variant-numeric: tabular-nums; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer;
}
.cal-day.is-outside .cal-num { color: var(--label-3); }
.cal-day.is-selected .cal-num { background: var(--label);
  color: var(--sys-cell); font-weight: 600; }
.cal-day.is-today .cal-num { background: var(--tint);
  color: var(--tint-ink); font-weight: 600; }
.cal-day.is-outside .cal-pills, .cal-day.is-outside .cal-marks {
  opacity: .45; }

.cal-pills { display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 0 4px; }
.cal-pill {
  display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 6px;
  min-width: 0; height: 1.3rem; margin: 0; padding: 0 5px; overflow: hidden;
  border: 0; border-radius: 5px; background: none; color: var(--label);
  font: inherit; font-size: .72rem; text-align: left; text-decoration: none;
  cursor: pointer;
}
/* The name of the thing, then whose it is. The second is not cut short:
   when it does not fit whole it drops to a line that is not shown. */
.cal-pill > span, .cal-pill > small {
  min-width: 0; height: 1.3rem; line-height: 1.3rem; font-size: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-pill > span { flex: 0 1 auto; max-width: 100%; }
.cal-pill > small { flex: none; color: var(--label-2); }
.cal-pill > span::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 7px; height: 7px; margin: -2px 5px 0 0; border-radius: 999px;
  background: var(--chip, var(--tint));
}
/* Nothing agreed yet: an outline, not a solid mark. */
.cal-pill.is-open > span::before { background: none;
  box-shadow: inset 0 0 0 1.5px var(--chip, var(--tint)); }
/* A deadline is a box to tick. */
.cal-pill.is-task > span::before { width: 8px; height: 8px;
  border-radius: 2.5px; background: none;
  box-shadow: inset 0 0 0 1.5px var(--chip, var(--tint)); }
.cal-pill.is-late { color: var(--red-text); }
.cal-pill.is-late > span::before {
  box-shadow: inset 0 0 0 1.5px var(--red); }
.cal-pill.is-external { color: var(--label-2); }
/* What runs across the day, or takes all of it, is a bar. */
.cal-pill.is-bar {
  background: color-mix(in srgb, var(--chip, var(--tint)) 22%, transparent);
}
.cal-pill.is-bar > span::before { display: none; }
.cal-pill.is-bar.is-open { background: none;
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--chip, var(--tint)) 65%, transparent); }
.cal-pill.is-bar.is-task > span::before { display: inline-block; }
.cal-pill.is-blocker { background: var(--fill-3); color: var(--label-2); }
/* A run of days is one bar: square where it carries on, and reaching
   over the line between the days. */
.cal-pill.is-cont { border-top-left-radius: 0;
  border-bottom-left-radius: 0; }
.cal-pill.is-on { border-top-right-radius: 0;
  border-bottom-right-radius: 0; }
.cal-pills > .cal-pill.is-cont { margin-left: -4.5px; }
.cal-pills > .cal-pill.is-on { margin-right: -4px; }
.cal-pill.is-gap { visibility: hidden; }
.cal-extra {
  height: 1.15rem; padding: 0 5px; border: 0; background: none;
  color: var(--label-2); font: inherit; font-size: .68rem;
  text-align: left; cursor: pointer;
}
@media (hover: hover) {
  .cal-day:not(.is-today):not(.is-selected):hover .cal-num {
    background: var(--fill-3); }
  .cal-pill:not(.is-bar):hover { background: var(--fill-3); }
  .cal-extra:hover { color: var(--tint); }
}
.cal-pill:active, .cal-extra:active { opacity: .5; }

/* -- month on a phone: dots and bars, and the day listed underneath --------- */
.cal-marks, .cal-list { display: none; }
@media (max-width: 700px) {
  .cal-box { margin-bottom: 1.1rem; }
  .cal-wdays { padding: 7px 0 5px; text-align: center; }
  .cal-wdays > span { padding: 0; }
  .cal-wd-rest { display: none; }
  .cal-day { align-items: center; min-height: 0; padding: 4px 0 5px;
    border-left: 0; }
  .cal-num { align-self: center; width: 2.05rem; height: 2.05rem;
    margin: 0; font-size: 1.12rem; }
  .cal-pills { display: none; }
  .cal-marks {
    display: flex; flex-direction: column; align-self: stretch; gap: 2px;
    height: 18px; padding-top: 3px;
  }
  .cal-dots { flex: none; display: flex; justify-content: center; gap: 3px;
    height: 5px; }
  .cal-dot { width: 5px; height: 5px; border-radius: 999px;
    background: var(--chip, var(--tint)); }
  .cal-dot.is-open { background: none;
    box-shadow: inset 0 0 0 1.25px var(--chip, var(--tint)); }
  .cal-dot.is-late { background: var(--red); }
  .cal-dot.is-more { background: var(--label-3); }
  /* Bars sit along the foot of the row, so a run reads straight across. */
  .cal-line { flex: none; display: block; height: 3px; margin: 0 3px;
    border-radius: 2px; background: var(--chip, var(--tint)); }
  .cal-dots + .cal-line { margin-top: auto; }
  .cal-line.is-open { background: none;
    box-shadow: inset 0 0 0 1px var(--chip, var(--tint)); }
  .cal-line.is-cont { margin-left: 0; border-top-left-radius: 0;
    border-bottom-left-radius: 0; }
  .cal-line.is-on { margin-right: 0; border-top-right-radius: 0;
    border-bottom-right-radius: 0; }
  .cal-line.is-gap { visibility: hidden; }
  .cal-list { display: block; }
  .cal-list .empty { padding: 1.1rem 1rem 1.9rem; }
}

/* A row of the day's list: its colour, or its ring, at the head. */
.cal-lead { flex: none; align-self: stretch; width: 22px;
  display: inline-flex; align-items: center; justify-content: center; }
.cal-stripe { align-self: stretch; width: 4px; min-height: 2rem;
  border-radius: 2px; background: var(--chip, var(--tint)); }
.cal-stripe.is-open { background: none;
  box-shadow: inset 0 0 0 1.25px var(--chip, var(--tint)); }
.cal-list .cell.has-lead + .cell.has-lead::before {
  left: calc(var(--gutter) + 34px); }
/* A row in one of the calendar's lists ends in a time, and the time is
   kept whole whether or not there is a second line under the title. */
.group > .cell.cal-row.is-nav > .cell-main { flex: 1 1 0; max-width: none; }
.group > .cell.cal-row.is-nav > .cell-value { flex: none; }

/* -- week and day ----------------------------------------------------------- */
.cal-box.is-time { margin-bottom: 0; --gut: 2.9rem; }
.cal-days, .cal-all, .cal-plane {
  display: grid;
  grid-template-columns: var(--gut) repeat(var(--cols, 7), minmax(0, 1fr));
}
.cal-days { padding: 7px 0 6px; }
.cal-days.is-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dayhead {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 0; margin: 0; padding: 0; border: 0; background: none;
  color: var(--label); font: inherit; cursor: pointer;
}
.cal-dayhead small { font-size: .62rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--label-2); }
.cal-dayhead b {
  width: 2rem; height: 2rem; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.06rem;
  font-weight: 400; font-variant-numeric: tabular-nums;
}
.cal-dayhead.is-selected b { background: var(--label);
  color: var(--sys-cell); font-weight: 600; }
.cal-dayhead.is-today b { background: var(--tint); color: var(--tint-ink);
  font-weight: 600; }
.cal-dayhead:active { opacity: .45; }

.cal-all { row-gap: 2px; padding: 3px 0; border-top: .5px solid var(--sep); }
.cal-all-label { grid-column: 1; padding-right: 6px; font-size: .6rem;
  line-height: 1.3rem; text-align: right; color: var(--label-2); }
.cal-all > .cal-pill { margin: 0 2px; }
.cal-all > .cal-pill.is-cont { margin-left: 0; }
.cal-all > .cal-pill.is-on { margin-right: 0; }

/* The only thing that scrolls, so the day headings stay put. The height
   is set to what is left of the screen when it is drawn. */
.cal-scroll { max-height: 62vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; border-top: .5px solid var(--sep); }
.cal-plane { padding: 9px 0; overflow: hidden; }
.cal-hr { position: relative; height: var(--hour, 44px); font-size: .64rem;
  color: var(--label-2); font-variant-numeric: tabular-nums; }
.cal-hr span { position: absolute; top: -.45rem; right: 6px;
  line-height: .9rem; white-space: nowrap; }
/* Each hour draws its own line across the days: a border is a whole
   pixel on any screen, which a painted half-pixel is not. */
.cal-hr::after { content: ""; position: absolute; top: 0; left: 100%;
  width: 100vw; border-top: .5px solid var(--sep); }
.cal-col { position: relative; min-width: 0;
  border-left: .5px solid var(--sep); }
.cal-ev {
  position: absolute; left: 2px; right: 2px; z-index: 1; display: flex;
  flex-direction: column; justify-content: flex-start; overflow: hidden;
  margin: 0; padding: 2px 5px 2px 8px; border: 0; border-radius: 5px;
  color: var(--label); font: inherit; font-size: .7rem; line-height: 1.25;
  text-align: left; text-decoration: none; cursor: pointer;
  background: color-mix(in srgb, var(--chip, var(--tint)) 20%,
                        var(--sys-cell));
  box-shadow: inset 3px 0 0 var(--chip, var(--tint));
}
.cal-ev b { display: block; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cal-ev span { display: block; color: var(--label-2); white-space: nowrap;
  overflow: hidden; }
.cal-ev.is-open {
  background: var(--sys-cell);
  box-shadow: inset 3px 0 0 var(--chip, var(--tint)), inset 0 0 0 1px
    color-mix(in srgb, var(--chip, var(--tint)) 50%, transparent);
}
.cal-ev.is-blocker {
  color: var(--label-2);
  background: color-mix(in srgb, var(--gray) 16%, var(--sys-cell));
  box-shadow: inset 3px 0 0 var(--label-3);
}
.cal-ev.is-external { color: var(--label-2);
  background: color-mix(in srgb, var(--chip, var(--gray)) 10%,
                        var(--sys-cell)); }
.cal-ev:active, .cal-pin:active { opacity: .55; }

/* Deadlines are laid over the day's bookings, a line each. */
.cal-pins { position: absolute; inset: 0 2px; z-index: 2;
  pointer-events: none; }
.cal-pin {
  position: absolute; display: flex; align-items: center; gap: 4px;
  overflow: hidden; margin: 0; padding: 0 5px; border: 0; border-radius: 5px;
  color: var(--label); font: inherit; font-size: .66rem; font-weight: 500;
  white-space: nowrap; text-align: left; cursor: pointer;
  pointer-events: auto;
  background: color-mix(in srgb, var(--chip, var(--tint)) 14%,
                        var(--sys-cell));
  box-shadow: 0 0 0 1px var(--sys-cell);
}
.cal-pin::before { content: ""; flex: none; width: 8px; height: 8px;
  border-radius: 2.5px;
  box-shadow: inset 0 0 0 1.5px var(--chip, var(--tint)); }
.cal-pin span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cal-pin.is-late { color: var(--red-text); }
.cal-pin.is-late::before { box-shadow: inset 0 0 0 1.5px var(--red); }

/* Now. */
.cal-now { position: absolute; left: 0; right: 0; z-index: 3; height: 1px;
  background: var(--red); pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -4px; top: -3.5px;
  width: 8px; height: 8px; border-radius: 999px; background: var(--red); }

/* One day has the width to say more. */
.cal-box.is-day .cal-ev { padding: 3px 8px 3px 10px; font-size: .78rem; }
.cal-box.is-day .cal-pin { font-size: .72rem; }

@media (max-width: 700px) {
  .cal-box.is-time { --gut: 2.5rem; }
  .cal-hr span { right: 5px; }
  .cal-box:not(.is-day) .cal-ev { padding: 2px 3px 2px 6px;
    font-size: .64rem; }
}

/* -- the Calendars sheet, and a date read in one ------------------------------ */
.cal-swatch { flex: none; width: 12px; height: 12px; border-radius: 999px;
  background: var(--chip, var(--gray)); }
.cell.cal-pick.has-lead + .cell.cal-pick.has-lead::before {
  left: calc(var(--gutter) + 24px); }
.cal-notes .cell-title { white-space: pre-wrap; }

/* ====== Tasks and Notes ====== */
/* -- tasks: a row ----------------------------------------------------------- */
.task-late { color: var(--red-text); }

/* A ticked row closes up and goes. */
.task-cell.is-leaving {
  height: 0 !important; min-height: 0; padding-top: 0; padding-bottom: 0;
  opacity: 0; overflow: hidden; pointer-events: none;
  transition: height .28s var(--ease), padding .28s var(--ease), opacity .18s;
}
/* A list dims only if its answer is slow in coming. */
.tasks-list.is-stale, .notes-list.is-stale { opacity: .45;
  transition: opacity .15s .18s; }

/* -- a form group that also holds rows which are not fields ----------------- */
.form.is-mixed > .people-list::before {
  content: ""; position: absolute; top: 0; right: 0; left: var(--gutter);
  height: .5px; background: var(--sep);
}
.form.is-mixed > .people-list { position: relative; }
/* The row that folds the others away: its chevron turns down when open. */
[data-people] .chev { transition: transform .22s var(--ease); }
[data-people][aria-expanded="true"] .chev { transform: rotate(90deg); }

/* -- notes: reading one ----------------------------------------------------- */
.note-head {
  margin: 0 0 .3rem; padding: 0 var(--gutter); font-size: 1.5rem;
  line-height: 1.2; font-weight: 700; letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.note-text {
  padding: .75rem var(--gutter) .85rem; font-size: 1rem; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
  -webkit-user-select: text; user-select: text;
}
.note-text .bullets { margin: 0; padding-left: 1.15em; font-size: inherit;
  line-height: inherit; color: inherit; white-space: normal; }
.note-text .bullets li { margin: 0 0 .4em; }
.note-text .bullets li:last-child { margin-bottom: 0; }
.note-text .bullets li::marker { color: var(--label-3); }

/* The composer's way out, while it holds a line that is being changed. */
.composer-cancel {
  flex: none; width: 32px; height: 32px; margin: 1px; border: 0;
  border-radius: 999px; background: var(--fill-3); color: var(--label-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.composer-cancel svg { width: 15px; height: 15px; fill: none;
  stroke: currentColor; stroke-width: 2.8; stroke-linecap: round;
  stroke-linejoin: round; }
.composer-cancel { position: relative; }
.composer-cancel::after { content: ""; position: absolute; inset: -6px; }

@media (prefers-reduced-motion: reduce) {
  [data-people] .chev, .tasks-list.is-stale, .notes-list.is-stale {
    transition: none; }
}

/* ====== Artists, Venues, Contacts ====== */
/* -- the face under the title ------------------------------------------- */
.profile-head {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 1.4rem;
}
.profile-head .sub { margin: 0; padding: 0; min-width: 0; }
.modal-body .profile-head { margin: 0 0 1.2rem; padding: 0 var(--gutter); }
.modal-body .profile-head .sub { margin: 0; padding: 0; }

/* -- a value that does something when pressed: rings, writes, opens ------- */
.cell-value.is-link { color: var(--tint); }
/* A favourite, said quietly at the end of its row. */
.cell-star { flex: none; color: var(--label-3); font-size: .88rem; }

/* -- words somebody wrote, under the small label that says what they are -- */
.cell.is-prose .cell-sub { margin: 0 0 2px; }

/* -- a list that can be put in order, where there is a mouse to do it ---- */
.grip {
  display: none; flex: none; width: 28px; height: 28px; margin-right: -8px;
  align-items: center; justify-content: center;
  color: var(--label-3); cursor: grab;
}
.grip:active { cursor: grabbing; }
.grip svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; }
@media (hover: hover) {
  .grip { display: inline-flex; }
}
.cell.is-dragging { opacity: .4; }
.cell.is-drop-target { outline: 0; background: var(--fill-3); }

/* -- the button at the end of a row that holds what else it can do ------- */
.cell-more {
  flex: none; width: 44px; height: 44px; margin: -11px -12px -11px -4px;
  padding: 0; border: 0; background: none; color: var(--tint);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.cell-more:active { opacity: .4; }
.cell-more svg { width: 22px; height: 22px; fill: none;
  stroke: currentColor; stroke-width: 1.7; }
.cell-more .solid { fill: currentColor; stroke: none; }

/* -- a contact's own fields: its name at the left, its value at the right - */
.cell.field-line > .f-label { flex: 0 1 36%; }
.cell.field-line > .f-value { flex: 1 1 0; text-align: right; }

/* ====== The artist portal ====== */
/* Under the calendar: the feed link, and the artist's own Google
   calendar if they have added one. */
.cal-extras { margin-top: 1.6rem; }
.embed-frame { display: block; width: 100%; height: 520px; border: 0; }

/* ====== Settings and Progress ====== */
/* Calendar: the colour picker opens under the row it belongs to, and the
   row after it keeps its hairline. */
.swatch-host { padding: 2px var(--gutter) .8rem; }
.swatch-host + .cell::before {
  content: ""; position: absolute; top: 0; right: 0;
  left: var(--gutter); height: .5px; background: var(--sep);
}

/* -- progress: tasks per day, week or month ---------------------------- */
.plot {
  display: flex; align-items: flex-end; gap: 5px;
  height: 172px; padding: 18px var(--gutter) 10px;
  overflow-x: auto; overscroll-behavior-x: contain;
}
.plot-col {
  flex: 1 0 18px; max-width: 34px; height: 100%;
  display: flex; flex-direction: column; gap: 6px;
}
.plot-col:first-child { margin-left: auto; }
.plot-col:last-child { margin-right: auto; }
.plot-stack {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 2px;
}
.plot-stack i {
  display: block; flex: none; min-height: 3px; border-radius: 3px;
  background: var(--green);
}
.plot-stack i.is-late { background: var(--orange); }
.plot-stack i.is-overdue { background: var(--red); }
.plot-label {
  font-size: .62rem; line-height: 1.2; text-align: center;
  white-space: nowrap; color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
/* The rows under the bars are their key: the colour, the name, the count. */
.plot + .cell::before {
  content: ""; position: absolute; top: 0; right: 0;
  left: var(--gutter); height: .5px; background: var(--sep);
}
.plot-dot {
  flex: none; width: 10px; height: 10px; border-radius: 3px;
  background: var(--green);
}
.plot-dot.is-late { background: var(--orange); }
.plot-dot.is-overdue { background: var(--red); }

/* -- choosing a colour: a row of circles a finger can hit ---------------- */
.swatch-btn, .swatch-pick {
  flex: none; width: 30px; height: 30px; padding: 0; border-radius: 999px;
  border: 0; background: var(--swatch); cursor: pointer; position: relative;
  box-shadow: inset 0 0 0 .5px var(--sep);
}
.swatch-btn { width: 24px; height: 24px; }
.swatch-btn::after, .swatch-pick::after { content: ""; position: absolute;
  inset: -7px; }
.swatch-btn:hover, .swatch-pick:hover { transform: none; }
.swatch-menu {
  display: flex; flex-wrap: wrap; gap: 14px; max-width: none; margin: 0;
  padding: 6px 0 2px; border: 0; border-radius: 0; background: none;
}
.swatch-pick.is-on { outline: 0;
  box-shadow: 0 0 0 2px var(--sys-cell), 0 0 0 4px var(--tint); }

/* The money switches are a group like any other. */
.perm-group { margin-top: 0; padding-top: 0; border-top: 0; }

/* ====== Assistant, search and notifications ====== */
/* The four parts of the shell that are not a list: a conversation, the
   same conversation in a side panel, a search sheet and the
   notification panel. */

/* ============================================================ the assistant
   A thread that fills the screen and a field pinned to its foot, as in
   Messages. The thread is the page — it scrolls under the bars like
   every other screen — and the field's bar sticks above the tab bar. */

.page:has(> .view.ask-view) {
  padding-bottom: calc(var(--tab-h) + var(--safe-b));
}
/* A conversation has a small title, the way it does on the phone. */
.page:has(> .view.ask-view) > .large-title { display: none; }
.view.ask-view {
  display: flex; flex-direction: column; min-height: 100%; padding: 0;
}
.ask { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ask > .empty:only-child { margin: auto 0; }
.ask-thread + .empty { padding: 1rem; }

.ask-thread {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  width: 100%; max-width: 760px; margin: 0 auto;
  padding: 10px var(--gutter);
}
/* Anchored to the bottom: a short exchange sits just above the field.
   An auto margin rather than justify-content, which would put the
   start of a long thread out of reach where the thread is the
   scroller (the panel). */
.ask-thread > :first-child { margin-top: auto; }

.ask-msg {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px; min-width: 0; margin-top: 10px;
}
.ask-msg.is-user { align-items: flex-end; }
.ask-msg.is-user + .ask-msg.is-user,
.ask-msg.is-assistant + .ask-msg.is-assistant { margin-top: 3px; }
/* A message said just now rises into place, from its own side. */
.ask-msg.is-new { animation: ask-in .3s var(--ease) both; }
.ask-msg.is-new.is-user { transform-origin: 100% 100%; }
.ask-msg.is-new.is-assistant { transform-origin: 0 100%; }
@keyframes ask-in {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
}

.ask-bubble {
  max-width: min(88%, 40rem); padding: .47rem .82rem;
  border-radius: 1.15rem; background: var(--sys-cell); color: var(--label);
  font-size: 1rem; line-height: 1.32; overflow-wrap: anywhere;
}
.ask-msg.is-user .ask-bubble {
  max-width: min(78%, 34rem); background: var(--tint); color: var(--tint-ink);
}
.ask-bubble.is-error { color: var(--red-text); }
.ask-bubble p { margin: 0 0 .5em; }
.ask-bubble ul { margin: 0 0 .5em; padding-left: 1.25em; }
.ask-bubble li + li { margin-top: .15em; }
.ask-bubble p:last-child, .ask-bubble ul:last-child { margin-bottom: 0; }
.ask-bubble strong { font-weight: 600; }
.ask-bubble code {
  padding: .05em .35em; border-radius: 5px; background: var(--fill-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em;
}
.ask-msg.is-user .ask-bubble code {
  background: color-mix(in srgb, var(--tint-ink) 22%, transparent);
}
.ask-msg.is-user .ask-bubble ::selection {
  background: color-mix(in srgb, var(--tint-ink) 34%, transparent);
}

/* What was attached: a picture as a picture, anything else by name. */
.ask-pic {
  display: block; height: 180px; width: auto; max-width: 100%;
  border-radius: 1.05rem; object-fit: cover; background: var(--fill-3);
}
.ask-file {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  min-height: 32px; padding: 0 12px 0 9px; border-radius: 999px;
  background: var(--sys-cell); color: var(--label); font-size: .88rem;
}
.ask-file > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ask-file svg, .ask-chip svg {
  flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.ask-file > svg { color: var(--label-2); }

/* What the assistant did, under what it said. */
.ask-did { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.ask-chip {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; min-height: 30px; padding: 0 11px 0 8px;
  border-radius: 999px; background: var(--fill-3); color: var(--label-2);
  font-size: .82rem; line-height: 1.2; text-decoration: none;
}
.ask-chip > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ask-chip.is-failed { color: var(--red-text); }
.ask-chip.is-link { color: var(--tint); cursor: pointer; }
/* Thirty points to look at, forty-four for the finger. */
.ask-chip.is-link::after { content: ""; position: absolute; inset: -7px 0; }
.ask-chip.is-link:active { opacity: .4; }

.ask-time { padding: 0 .5rem; font-size: .7rem; color: var(--label-2); }

.ask-dots {
  display: inline-flex; align-items: center; gap: 4px; height: 1.32em;
  padding: 0 2px; vertical-align: top;
}
.ask-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--label-3);
  animation: ask-dot 1.2s infinite;
}
.ask-dots i:nth-child(2) { animation-delay: .18s; }
.ask-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes ask-dot {
  0%, 60%, 100% { opacity: .4; transform: none; }
  30% { opacity: 1; transform: translateY(-2px); }
}

.ask-examples { margin-bottom: 2px; }

/* -- the field ---------------------------------------------------------- */
/* Sticky offsets are measured from inside the page's padding, and the
   page is already padded by the tab bar — so zero is "on the tab bar". */
.ask-bar {
  position: sticky; bottom: 0; z-index: 2;
  flex: none; margin: 0; padding: 7px var(--gutter) 8px;
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.ask-inner {
  display: flex; align-items: flex-end; gap: 8px;
  max-width: calc(760px - 2 * var(--gutter)); margin: 0 auto;
}
.ask-attach {
  position: relative; flex: none; width: 36px; height: 36px;
  margin: 0 0 1px; padding: 0; border: 0; border-radius: 50%;
  background: var(--fill-3); color: var(--tint); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ask-attach::after { content: ""; position: absolute; inset: -4px; }
.ask-attach svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round;
}
.ask-field {
  flex: 1; min-width: 0; border: .5px solid var(--sep);
  border-radius: 19px; background: var(--sys-cell);
  transition: border-color .15s, box-shadow .15s;
}
.ask-row { display: flex; align-items: flex-end; }
.ask-field textarea {
  display: block; flex: 1; width: auto; min-width: 0;
  height: 36px; min-height: 36px; max-height: 220px;
  padding: 7px 4px 7px 13px; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; color: var(--label);
  font-size: 1rem; line-height: 1.3; resize: none;
}
.ask-field textarea:focus { box-shadow: none; }
.ask-mic, .ask-send {
  position: relative; flex: none; width: 30px; height: 30px; margin: 3px;
  padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ask-mic::after, .ask-send::after {
  content: ""; position: absolute; inset: -7px;
}
.ask-mic { background: none; color: var(--label-2); }
.ask-mic svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* Listening: the microphone takes the tint and breathes. */
.ask-mic.is-live { color: var(--tint); animation: ask-live 1.4s infinite; }
@keyframes ask-live { 50% { opacity: .35; } }
.ask-send { background: var(--tint); color: var(--tint-ink); }
.ask-send svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.ask-send:disabled { opacity: .4; cursor: default; }
.ask-attach:active, .ask-mic:active, .ask-send:active { opacity: .45; }

/* Files waiting to go with the next message sit in the field with it. */
.ask-staged { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 8px 1px; }
.ask-staged .ask-file { background: var(--fill-3); padding-right: 3px; }
.ask-staged button {
  position: relative; flex: none; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--label-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ask-staged button::after { content: ""; position: absolute; inset: -9px -3px; }
.ask-staged button svg { width: 12px; height: 12px; stroke-width: 2.6; }
.ask.is-dropping .ask-field {
  border-color: var(--tint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 30%, transparent);
}

/* Earlier conversations: the time is kept whole and the title gives
   way (a one-line row in ios.css cuts its value instead). */
.modal-body .cell.ask-chat:has(> .cell-value) > .cell-main {
  flex: 1 1 0; max-width: none;
}
.modal-body .cell.ask-chat > .cell-value { flex: none; margin-left: 0; }

@media (min-width: 900px) {
  .ask-bar { padding-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-dots i, .ask-mic.is-live, .ask-msg.is-new { animation: none; }
}

/* ============================================================ floating surfaces
   The quick panel, the search card and the notification panel sit over
   the page rather than in it. They take the sheet's colour, and in the
   dark their cells step up with it the way a sheet's do, or a cell
   would vanish into the surface it is on. */
:root[data-theme="dark"] .dock-panel,
:root[data-theme="dark"] .spot-sheet,
:root[data-theme="dark"] .bell-panel { --sys-cell: var(--sys-cell-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .dock-panel,
  :root:not([data-theme]) .spot-sheet,
  :root:not([data-theme]) .bell-panel { --sys-cell: var(--sys-cell-2); }
}

/* ============================================================ the quick panel
   The assistant beside whatever is on screen: a slim panel hung from the
   bar at the right, with the page moved over to make room for it. On a
   phone the assistant is a screen of its own and this is never drawn. */
.dock-panel {
  position: fixed; right: 12px; bottom: 12px; z-index: 40;
  width: 360px; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 14px; background: var(--sheet); color: var(--label);
  box-shadow: var(--shadow-pop), 0 0 0 .5px var(--sep);
  animation: dock-in .34s var(--ease) both;
}
.dock-panel.is-leaving { animation: dock-out .22s ease-in both; }
@keyframes dock-in { from { transform: translateX(calc(100% + 24px)); } }
@keyframes dock-out { to { transform: translateX(calc(100% + 24px)); } }
.dock-top {
  flex: none; display: flex; align-items: center; min-height: 48px;
  padding: 0 4px 0 var(--gutter);
}
.dock-top b { flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; }
.dock-top .nav-btn svg { width: 20px; height: 20px; }
.dock-panel .ask-thread {
  flex: 1; min-height: 0; max-width: none; padding: 2px 12px 8px;
  overflow-y: auto; overscroll-behavior: contain;
}
.dock-panel .ask-thread > .empty { margin: auto 0; }
.dock-panel .ask-bar {
  position: static; padding: 6px 10px 10px; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (max-width: 899px) {
  .dock-panel { display: none; }
}
@media (min-width: 900px) {
  .stage { transition: right .34s var(--ease); }
  body.has-dock .stage { right: 384px; }
}
@media (prefers-reduced-motion: reduce) {
  .dock-panel, .dock-panel.is-leaving { animation: none; }
  .stage { transition: none; }
}

/* ============================================================ search
   Spotlight. On a phone a sheet that drops from the top, the field
   focused and Cancel beside it; on a desktop a card in the middle of the
   window. Results are ordinary groups of cells. */
.spot {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: flex-start; justify-content: center;
}
.spot-scrim {
  position: absolute; inset: 0; background: var(--scrim);
  animation: spot-fade .25s ease-out both;
}
.spot-sheet {
  position: relative; display: flex; flex-direction: column;
  width: 100%; height: 100%; padding-top: var(--safe-t);
  background: var(--sheet); color: var(--label);
  animation: spot-drop var(--t-sheet) var(--ease) both;
}
.spot.is-leaving .spot-scrim { animation: spot-fade-out .24s ease-in both; }
.spot.is-leaving .spot-sheet {
  animation: spot-lift .26s cubic-bezier(.4, 0, 1, 1) both;
}
@keyframes spot-drop { from { transform: translateY(-100%); } }
@keyframes spot-lift { to { transform: translateY(-100%); } }
@keyframes spot-fade { from { opacity: 0; } }
@keyframes spot-fade-out { to { opacity: 0; } }

.spot-bar {
  flex: none; display: flex; align-items: center; gap: 2px;
  padding: 8px 4px 6px var(--gutter);
}
.spot-bar input[type=search] { flex: 1; width: auto; min-width: 0; }
.spot-bar input[type=search]:focus { box-shadow: none; }
.spot-cancel {
  flex: none; min-height: 44px; padding: 0 12px; border: 0;
  background: none; cursor: pointer;
}
.spot-list {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px var(--gutter) calc(16px + var(--safe-b));
}
.spot-list .group { margin-bottom: 0; }
.spot-set + .spot-set { margin-top: 1.3rem; }
/* A date or a town at the tail is kept whole; the title gives way. */
.spot-list .cell:has(> .cell-value) > .cell-main { flex: 1 1 0; max-width: none; }
.spot-list .cell > .cell-value { flex: none; max-width: 52%; margin-left: 0; }
/* The marker the arrow keys move. Where there is a pointer it moves the
   same one, so a row is never lit twice. */
@media (hover: hover) {
  .spot-list button.cell:hover { background: transparent; }
  .spot-list button.cell.is-on,
  .spot-list button.cell.is-on:hover { background: var(--fill); }
}

@media (min-width: 900px) {
  .spot { padding: min(14vh, 120px) 20px 20px; }
  .spot-sheet {
    width: min(640px, 100%); height: auto; max-height: min(68vh, 620px);
    padding-top: 0; overflow: hidden; border-radius: 14px;
    box-shadow: var(--shadow-pop), 0 0 0 .5px var(--sep);
    animation: spot-pop .24s var(--ease) both;
  }
  .spot.is-leaving .spot-sheet { animation: spot-pop-out .16s ease-in both; }
  .spot-bar { padding: 12px 12px 6px; }
  .spot-bar input[type=search] { min-height: 44px; }
  .spot-cancel { display: none; }
  .spot-list { padding: 8px 12px 12px; }
}
@keyframes spot-pop { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
@keyframes spot-pop-out { to { opacity: 0; transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .spot-scrim, .spot-sheet { animation: none; }
}

/* ============================================================ notifications
   Notification Centre. On a phone the panel is the area between the
   bars: a sheet drops into it from under the navigation bar and what is
   left of the page is dimmed behind. On a desktop it is a popover hung
   under the bell. UI.hangFromHeader() sets its top, measured. */
.bell-panel {
  position: fixed; z-index: 40; display: block; overflow: hidden;
  border: 0; color: var(--label);
}
.bell-panel.is-leaving { pointer-events: none; }
.nc {
  display: flex; flex-direction: column; min-height: 0; max-height: 100%;
  background: var(--sheet);
}
.nc-head {
  flex: none; display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  min-height: 50px; padding: 4px 8px 0 var(--gutter);
}
.nc-head b { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.nc-head .link-btn {
  flex: none; min-height: 44px; padding: 0 8px; border: 0;
  background: none; cursor: pointer; white-space: nowrap;
}
.nc-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 6px var(--gutter) 2px;
}
.nc-body .group { margin-bottom: 1.2rem; }
.nc-body .empty { padding: 1.6rem 1rem 2.2rem; }

/* A row: the unread dot, then what it is and when, then the detail. */
.nc-row {
  align-items: flex-start; gap: 9px; padding-left: 11px;
  /* The hairline starts where the words do, after the dot's column. */
  --inset: 29px;
}
.nc-dot {
  flex: none; width: 9px; height: 9px; margin-top: .4rem;
  border-radius: 50%; background: transparent;
}
.nc-row.is-unread .nc-dot { background: var(--tint); }
.nc-row.is-unread .cell-title { font-weight: 600; }
.nc-top { display: flex; align-items: baseline; gap: 10px; }
/* The title is a sentence — who did it and what it is — and on a phone
   it is often all that is read, so it runs to a second line before it
   is cut. */
.nc-top .cell-title {
  flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; white-space: normal;
}
.nc-when {
  flex: none; font-size: .82rem; color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
/* Two lines of the detail, then an ellipsis: it is a preview, and a
   long note would otherwise push everything under it off the panel. */
.nc-row .cell-sub {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal;
}
.nc-row .cell-tap { width: 100%; }
.nc-answer {
  display: flex; align-items: center; gap: 8px; min-height: 32px;
  margin-top: 8px; font-size: .88rem; color: var(--label-2);
}
.nc-btn {
  position: relative; min-height: 32px; padding: 0 16px; border: 0;
  border-radius: 999px; background: var(--fill-3); color: var(--tint);
  font-size: .88rem; font-weight: 600; cursor: pointer;
}
.nc-btn.is-yes { background: var(--tint); color: var(--tint-ink); }
.nc-btn::after { content: ""; position: absolute; inset: -6px 0; }
.nc-btn:active { opacity: .5; }

@media (max-width: 899px) {
  .bell-panel {
    left: 0; right: 0; bottom: calc(var(--tab-h) + var(--safe-b));
    width: auto; max-height: none;
    /* Flush under the bar; the helper leaves a popover's gap. */
    margin-top: -6px;
    border-radius: 0; box-shadow: none; background: var(--scrim);
    animation: nc-dim .25s ease-out both;
  }
  .nc {
    border-radius: 0 0 14px 14px;
    animation: nc-drop .4s var(--ease) both;
  }
  .nc-body { padding-bottom: 6px; }
  .bell-panel.is-leaving { animation: nc-dim-out .2s ease-in both; }
  .bell-panel.is-leaving .nc { animation: nc-lift .2s ease-in both; }
}
@media (min-width: 900px) {
  .bell-panel {
    right: 14px; left: auto; bottom: auto;
    display: flex; flex-direction: column;
    width: 380px; max-height: min(74vh, 640px);
    border-radius: 14px; background: var(--sheet);
    box-shadow: var(--shadow-pop), 0 0 0 .5px var(--sep);
    transform-origin: calc(100% - 24px) 0;
    animation: nc-pop .22s var(--ease) both;
  }
  .bell-panel.is-leaving { animation: nc-pop-out .16s ease-in both; }
  .nc { background: none; }
  .nc-head b { font-size: 1.12rem; }
}
@keyframes nc-dim { from { background-color: transparent; } }
@keyframes nc-dim-out { to { background-color: transparent; } }
@keyframes nc-drop { from { transform: translateY(-100%); } }
@keyframes nc-lift { to { transform: translateY(-100%); } }
@keyframes nc-pop { from { opacity: 0; transform: scale(.94); } }
@keyframes nc-pop-out { to { opacity: 0; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) {
  .bell-panel, .bell-panel .nc { animation: none; }
}

/* The dot on the Assistant's sidebar entry: a reply is waiting. */
.nav-dot { background: var(--red); }

/* Native controls — the date picker's glyph, scrollbars — follow the theme. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}