/* uBoard — every style in the app.
 *
 * Lifted out of index.html unchanged: the file was 1,500 lines of CSS above 9,000 lines of
 * JavaScript, and neither could be read without scrolling past the other. Nothing here was
 * rewritten, and tests/split-test.ts checks that it is still byte-for-byte what the <style> block
 * held.
 */
  :root {
    --purple: #7b68ee;
    --purple-dark: #5b4bd4;
    --purple-light: #efeafd;
    --bg: #f9f9fb;
    --panel: #ffffff;
    --border: #e7e5f0;
    --text: #292640;
    --text-soft: #4d4a63;
    --hint: #8b87a0;
    --placeholder-icon: #b9b6c8;
    --sidebar-bg: #0a0a0a;
    --sidebar-text: #a3a3a3;
    --sidebar-hover: #222222;
    --sidebar-active: #2a2a2a;
    --todo: #87909e;
    --inprogress: #1090e0;
    --done: #008844;
    --urgent: #9c2b3a;
    --high: #f8ae00;
    --normal: #0ea5c9;
    --low: #87909e;
    /* Surfaces that used to be written as literal whites and blacks, so the dark theme can change
       them in one place. */
    --text-strong: #000000;
    --ink: #111111;              /* the black buttons */
    --ink-text: #ffffff;
    --glass: rgba(255, 255, 255, 0.62);
    --glass-strong: rgba(255, 255, 255, 0.86);
    --ch-scrim: rgba(20, 15, 40, 0.13);
    --code-tint: rgba(20, 15, 40, 0.07); --code-tint-mine: rgba(255, 255, 255, 0.16);
    --quote-rule: rgba(20, 15, 40, 0.22); --quote-rule-mine: rgba(255, 255, 255, 0.4);
    --glass-edge: rgba(255, 255, 255, 0.6);
    --main-surface: rgba(255, 255, 255, 0.92);
    --row-hover: #faf9ff;
    --row-picked: #f3f1fd;
    --tab-active-bg: #f0eff4;
    --bubble-mine: #e2eaf3;
    --input-bg: #ffffff;
    --page-bg:
      radial-gradient(760px 520px at 5% 8%, rgba(123, 104, 238, 0.42), transparent 62%),
      radial-gradient(640px 540px at 12% 90%, rgba(16, 144, 224, 0.34), transparent 64%),
      radial-gradient(820px 560px at 88% 16%, rgba(214, 69, 93, 0.14), transparent 62%),
      radial-gradient(700px 520px at 78% 92%, rgba(47, 158, 68, 0.12), transparent 64%),
      linear-gradient(140deg, #eceaf4 0%, #f4f3f8 45%, #eef1f7 100%);
    --chip-bg: #eeecf4;
    --chip-fg: #625d7a;
    --chip-fg-soft: #7b7690;
    --col-bg: #f5f3fb;
    --count-bg: #f0eef8;
    --swatch-hover: #ececec;
    --avatar-bg: #e3e3e3;
    --track-bg: #e6e6e6;
    --row-hover-soft: #eeeef3;
    --row-hover-strong: #e4e4ec;
    --row-linked: #fcfcfe;
    --row-picked-hover: #ebe8fb;
    --warn-bg: #fff5e6;
    --warn-bg-2: #fff7ed;
    --warn-bg-3: #fff8e6;
    --warn-bg-4: #fff4e0;
    --mark-bg: #fff3bf;
    --warn-fg: #8a4f00;
    --warn-fg-2: #b45309;
    --warn-edge: #fed7aa;
    --warn-edge-2: #f3d38a;
    --ok-bg: #e9f7ee;
    --ok-bg-2: #e9f7ef;
    --ok-bg-3: #e6f6ee;
    --ok-fg: #1c6b38;
    --ok-fg-2: #1e6b41;
    --info-bg: #eef2fe;
    --info-bg-2: #eaf2fe;
    --info-fg: #2a3f8f;
    --info-fg-2: #1b4f9c;
    --danger-bg: #fdecec;
    --ref-hover: #e4dbff;
    --tpl-hover: #f6f3ff;
    --check-edge: #c9c5d8;
    --avatar-fg: #555;
    color-scheme: light;
  }
  /* The dark theme. Chosen in Settings, or — the default — whatever the device is set to: the
     media query applies it unless somebody picked light, and data-theme="dark" applies it whatever
     the device says. The two blocks hold the same values; CSS has no way to say "either". A dark
     palette of its own rather than the light one inverted: surfaces step up in lightness the higher
     they sit, text is off-white, and the accent is lifted so it still reads on a dark ground. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --purple: #8f80f7; --purple-dark: #b7adff; --purple-light: #2b2644;
      --bg: #17161f; --panel: #1f1e29; --border: #302e3e;
      --text: #ecebf4; --text-soft: #c3c0d4; --hint: #8e8aa5; --placeholder-icon: #5f5c73;
      --text-strong: #ffffff; --ink: #ecebf4; --ink-text: #15141c;
      --glass: rgba(31, 30, 41, 0.62); --glass-strong: rgba(31, 30, 41, 0.86); --glass-edge: rgba(255, 255, 255, 0.08);
      --ch-scrim: rgba(0, 0, 0, 0.30);
      --code-tint: rgba(255, 255, 255, 0.09); --code-tint-mine: rgba(255, 255, 255, 0.12);
      --quote-rule: rgba(255, 255, 255, 0.24); --quote-rule-mine: rgba(255, 255, 255, 0.34);
      --main-surface: rgba(28, 27, 37, 0.94);
      --row-hover: #25242f; --row-picked: #2a2641; --tab-active-bg: #2b2a37;
      --bubble-mine: #2c4461; --input-bg: #262532;
      --page-bg:
        radial-gradient(760px 520px at 5% 8%, rgba(123, 104, 238, 0.22), transparent 62%),
        radial-gradient(640px 540px at 12% 90%, rgba(16, 144, 224, 0.15), transparent 64%),
        radial-gradient(820px 560px at 88% 16%, rgba(214, 69, 93, 0.08), transparent 62%),
        linear-gradient(140deg, #111018 0%, #15141d 45%, #11131a 100%);
      --chip-bg: #2c2b38; --chip-fg: #b8b4cb; --chip-fg-soft: #9a96ad; --col-bg: #1a1922; --count-bg: #2c2b38; --swatch-hover: #2c2b38; --avatar-bg: #3a3947; --track-bg: #2c2b38; --row-hover-soft: #26252f; --row-hover-strong: #2e2d3a; --row-linked: #22212c; --row-picked-hover: #322d4d; --warn-bg: #3a2a12; --warn-bg-2: #3a2a12; --warn-bg-3: #3a2a12; --warn-bg-4: #3a2a12; --mark-bg: #4a3c10; --warn-fg: #f3b765; --warn-fg-2: #f3b765; --warn-edge: #6b4a1c; --warn-edge-2: #6b4a1c; --ok-bg: #16301f; --ok-bg-2: #16301f; --ok-bg-3: #16301f; --ok-fg: #7fd6a0; --ok-fg-2: #7fd6a0; --info-bg: #1b2644; --info-bg-2: #1b2644; --info-fg: #a9bcff; --info-fg-2: #a9bcff; --danger-bg: #3d1d22; --ref-hover: #3a3160; --tpl-hover: #2b2644; --check-edge: #4a4860; --avatar-fg: #d6d4e0; 
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --purple: #8f80f7; --purple-dark: #b7adff; --purple-light: #2b2644;
    --bg: #17161f; --panel: #1f1e29; --border: #302e3e;
    --text: #ecebf4; --text-soft: #c3c0d4; --hint: #8e8aa5; --placeholder-icon: #5f5c73;
    --text-strong: #ffffff; --ink: #ecebf4; --ink-text: #15141c;
    --glass: rgba(31, 30, 41, 0.62); --glass-strong: rgba(31, 30, 41, 0.86); --glass-edge: rgba(255, 255, 255, 0.08);
    --ch-scrim: rgba(0, 0, 0, 0.30);
    --code-tint: rgba(255, 255, 255, 0.09); --code-tint-mine: rgba(255, 255, 255, 0.12);
    --quote-rule: rgba(255, 255, 255, 0.24); --quote-rule-mine: rgba(255, 255, 255, 0.34);
    --main-surface: rgba(28, 27, 37, 0.94);
    --row-hover: #25242f; --row-picked: #2a2641; --tab-active-bg: #2b2a37;
    --bubble-mine: #2c4461; --input-bg: #262532;
    --page-bg:
      radial-gradient(760px 520px at 5% 8%, rgba(123, 104, 238, 0.22), transparent 62%),
      radial-gradient(640px 540px at 12% 90%, rgba(16, 144, 224, 0.15), transparent 64%),
      radial-gradient(820px 560px at 88% 16%, rgba(214, 69, 93, 0.08), transparent 62%),
      linear-gradient(140deg, #111018 0%, #15141d 45%, #11131a 100%);
    --chip-bg: #2c2b38; --chip-fg: #b8b4cb; --chip-fg-soft: #9a96ad; --col-bg: #1a1922; --count-bg: #2c2b38; --swatch-hover: #2c2b38; --avatar-bg: #3a3947; --track-bg: #2c2b38; --row-hover-soft: #26252f; --row-hover-strong: #2e2d3a; --row-linked: #22212c; --row-picked-hover: #322d4d; --warn-bg: #3a2a12; --warn-bg-2: #3a2a12; --warn-bg-3: #3a2a12; --warn-bg-4: #3a2a12; --mark-bg: #4a3c10; --warn-fg: #f3b765; --warn-fg-2: #f3b765; --warn-edge: #6b4a1c; --warn-edge-2: #6b4a1c; --ok-bg: #16301f; --ok-bg-2: #16301f; --ok-bg-3: #16301f; --ok-fg: #7fd6a0; --ok-fg-2: #7fd6a0; --info-bg: #1b2644; --info-bg-2: #1b2644; --info-fg: #a9bcff; --info-fg-2: #a9bcff; --danger-bg: #3d1d22; --ref-hover: #3a3160; --tpl-hover: #2b2644; --check-edge: #4a4860; --avatar-fg: #d6d4e0; 
    color-scheme: dark;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  [hidden] { display: none !important; }
  /* scrollbars stay functional but out of sight */
  #drawer-body, #fields-pane, #activity-list, #view-body, #sidebar, .props-panel, #field-panel .panel-body, .table-wrap, #link-suggestions {
    scrollbar-width: none; -ms-overflow-style: none;
  }
  #drawer-body::-webkit-scrollbar, #fields-pane::-webkit-scrollbar, #activity-list::-webkit-scrollbar, #view-body::-webkit-scrollbar,
  #sidebar::-webkit-scrollbar, .props-panel::-webkit-scrollbar, #field-panel .panel-body::-webkit-scrollbar,
  .table-wrap::-webkit-scrollbar, #link-suggestions::-webkit-scrollbar { width: 0; height: 0; display: none; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--page-bg);
    background-attachment: fixed; color: var(--text);
    /* dvh, not vh: on a phone 100vh is the height with the browser's toolbar hidden, so with it
       showing the bottom of the page sat behind the menu bar — the chat's input with it. The vh
       line stays for browsers that do not know dvh. */
    height: 100vh; height: 100dvh; overflow: hidden; font-size: 13px; -webkit-font-smoothing: antialiased;
    padding: 8px; box-sizing: border-box;
  }
  button, input, select, textarea { font-family: inherit; font-size: inherit; }

  /* Login */
  .oidc-btn {
    border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer;
    border-radius: 9px; padding: 10px 18px; font: inherit; font-size: 14px; font-weight: 600;
  }
  .oidc-btn:hover { border-color: var(--purple); color: var(--purple-dark); }

  #signup-screen {
    display: none; position: fixed; inset: 0; z-index: 300; overflow-y: auto;
    background: var(--bg); padding: 40px 18px calc(40px + env(safe-area-inset-bottom, 0px));
  }
  #signup-screen.visible { display: block; }
  .signup-card {
    max-width: 420px; margin: 0 auto; background: var(--panel); border: 1px solid var(--border);
    border-radius: 16px; padding: 28px 26px; display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 18px 50px rgba(16, 16, 30, 0.10);
  }
  .signup-card h2 { font-size: 21px; font-weight: 700; }
  .signup-card p { font-size: 13.5px; color: var(--text-soft); line-height: 1.5; }
  .signup-card label { font-size: 12px; font-weight: 600; color: var(--hint); margin-top: 4px; }
  .signup-card input {
    padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: 14px;
    background: var(--panel); color: var(--text); width: 100%; box-sizing: border-box;
  }
  .signup-card input:focus { outline: 2px solid var(--purple); outline-offset: -1px; }
  .signup-slug { display: flex; align-items: center; gap: 6px; }
  .signup-slug input { flex: 1; min-width: 0; }
  #signup-domain { font-size: 13px; color: var(--hint); white-space: nowrap; }
  .signup-note { font-size: 12px; min-height: 16px; }
  .signup-note.ok { color: var(--done); }
  .signup-note.bad { color: var(--urgent); }
  .signup-who { font-size: 13px; color: var(--text-soft); background: var(--bg); border-radius: 9px; padding: 8px 10px; }
  .signup-error { color: var(--urgent); font-size: 13px; }
  .signup-card .primary-btn {
    align-self: flex-start; margin-top: 8px; border: none; background: #111111; color: #fff;
    border-radius: 9px; padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .signup-card .primary-btn:disabled { opacity: 0.6; cursor: default; }

  #login-screen {
    display: none; position: fixed; inset: 0; background: var(--bg);
    flex-direction: column; align-items: center; justify-content: center; gap: 20px; z-index: 999;
  }
  #login-screen.visible { display: flex; }
  #login-screen h2 { font-size: 22px; font-weight: 700; }
  .login-link {
    border: none; background: none; color: var(--hint); font: inherit; font-size: 13px;
    cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 2px;
  }
  .login-link:hover { color: var(--purple-dark); }
  .login-form { display: flex; flex-direction: column; gap: 8px; width: 264px; }
  .login-form input {
    padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: 14px;
    background: var(--panel); color: var(--text); width: 100%; box-sizing: border-box;
  }
  .login-form input:focus { outline: 2px solid var(--purple); outline-offset: -1px; }
  .login-form button { width: 100%; }
  #login-error { color: var(--urgent); }
  #login-screen p { font-size: 14px; color: var(--hint); text-align: center; max-width: 260px; }

  /* App shell: floating panels on a soft page, one dark menu */
  #app { display: none; height: calc(100vh - 16px); height: calc(100dvh - 16px); gap: 10px; }
  #app.visible { display: flex; }

  /* The single menu: dark frosted glass */
  #sidebar {
    width: 244px; flex-shrink: 0; box-sizing: border-box;
    background: linear-gradient(180deg, rgba(3, 3, 5, 0.82) 0%, rgba(0, 0, 0, 0.90) 100%);
    backdrop-filter: blur(34px) saturate(220%); -webkit-backdrop-filter: blur(34px) saturate(220%);
    --side-text: #f2f2f4; --side-text-soft: #c9c8d2; --side-hint: #8c8b98;
    --side-hover: rgba(255, 255, 255, 0.07); --side-active: rgba(255, 255, 255, 0.13);
    color: var(--side-text);
    display: flex; flex-direction: column; padding: 12px 10px; overflow-y: auto;
    transition: margin-left 0.2s; font-size: 13px;
    border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 40px rgba(255, 255, 255, 0.03),
      0 14px 40px rgba(6, 6, 16, 0.30);
  }
  .side-head { display: flex; align-items: center; gap: 9px; padding: 2px 6px 10px; }
  .side-head .ws-icon img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; display: block; }
  .side-search {
    display: flex; align-items: center; gap: 7px; margin: 0 2px 10px; padding: 7px 9px;
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px; color: var(--side-hint);
  }
  .side-search:focus-within { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.1); }
  .side-search input {
    flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: 12.5px; color: var(--side-text);
  }
  .side-search input::placeholder { color: var(--side-hint); }
  .side-search kbd {
    font: inherit; font-size: 10.5px; color: var(--side-hint); background: rgba(255, 255, 255, 0.08);
    border-radius: 5px; padding: 1px 5px;
  }
  .side-nav { display: flex; flex-direction: column; gap: 2px; }
  .side-nav-item {
    display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 9px; cursor: pointer;
    color: var(--side-text-soft); font-size: 13px; font-weight: 500;
  }
  .side-nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
  .side-nav-item:hover { background: var(--side-hover); color: var(--side-text); }
  .side-nav-item.active { background: var(--side-active); color: var(--side-text); font-weight: 600; }
  /* a digest is waiting: one quiet dot, no counter to dismiss */
  .side-nav-item.has-news { color: var(--side-text); }
  .side-nav-item.has-news::after {
    content: ''; margin-left: auto; width: 6px; height: 6px; border-radius: 50%;
    background: #36d07a; box-shadow: 0 0 0 3px rgba(54, 208, 122, 0.18);
  }
  .side-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; align-items: center; gap: 8px; }
  .side-foot .side-nav-item { flex: 1; }
  .side-me { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: inline-flex; }
  .side-me .avatar { width: 28px; height: 28px; font-size: 12px; }
  .side-section-add {
    margin-left: auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; color: var(--side-hint); border-radius: 6px; cursor: pointer;
  }
  .side-section-add:hover { background: var(--side-hover); color: var(--side-text); }
  .side-section-title {
    display: flex; align-items: center; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--side-hint); padding: 14px 9px 5px;
  }
  /* The row keeps its height whether or not the hover actions are in it: the buttons are taller
     than the text, so without this the row grew by 7px on hover and pushed everything below it
     down — the menu appeared to jump under the cursor. */
  .side-item {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    padding: 4px 9px; min-height: 27px; box-sizing: border-box;
    border-radius: 6px; cursor: pointer; color: var(--side-text-soft);
    font-size: 13px; margin-bottom: 1px;
  }
  .side-item:hover { background: var(--side-hover); }
  .side-item.active { background: var(--side-active); color: var(--side-text); font-weight: 600; }
  .side-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-item .count { font-size: 11px; color: var(--side-hint); }
  .side-item.active .count { color: var(--side-text-soft); }
  .side-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); flex-shrink: 0; }
  .side-icon { display: inline-flex; flex-shrink: 0; color: var(--side-hint); }
  .side-item.active .side-icon { color: var(--side-text); }
  #new-space-btn {
    margin-top: 6px; background: none; border: none; color: var(--side-hint); display: flex; align-items: center; gap: 8px;
    border-radius: 6px; padding: 6px 9px; cursor: pointer; text-align: left; font-size: 13px;
  }
  #new-space-btn:hover { background: var(--side-hover); color: var(--side-text-soft); }

  /* Spaces tree */
  .side-space {
    display: flex; align-items: center; gap: 8px; padding: 5px 9px; min-height: 30px; box-sizing: border-box;
    margin-top: 6px; border-radius: 6px;
    font-size: 13px; font-weight: 600; color: var(--side-text); cursor: pointer;
  }
  .side-space:hover { background: var(--side-hover); }
  .side-space.active { background: var(--side-active); }
  .side-space .space-icon {
    width: 20px; height: 20px; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative;
  }
  /* The glyph is an inline SVG, so by default it sits on the text baseline and leaves the
     descender gap below it — which lifts it inside the badge and makes the whole icon read as too
     high next to the space's name. Centring it in its own box puts it back on the middle. */
  .side-space .space-icon .space-letter { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
  .side-space .space-icon .space-caret { display: none; }
  .side-space:hover .space-icon .space-letter { display: none; }
  .side-space:hover .space-icon .space-caret { display: inline-flex; }
  .side-space.collapsed .space-caret svg { transform: none; }
  .space-caret svg { transform: rotate(90deg); transition: transform 0.12s; }
  .side-space .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-space-lists { margin-left: 18px; padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
  .side-space-lists .empty-hint { color: var(--side-hint); font-size: 12px; padding: 5px 9px; }
  .side-item.folder-row { font-weight: 600; }
  .side-item.folder-row .folder-caret svg { transform: rotate(90deg); transition: transform 0.12s; }
  .side-item.folder-row.collapsed .folder-caret svg { transform: none; }
  .folder-children { margin-left: 16px; padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
  .side-actions { display: none; align-items: center; gap: 1px; flex-shrink: 0; }
  .side-item:hover .side-actions, .side-space:hover .side-actions, .side-actions.open { display: inline-flex; }
  .side-item:hover .count, .side-item.menu-open .count { display: none; }
  .side-item.menu-open .side-actions, .side-space.menu-open .side-actions { display: inline-flex; }
  /* 19px so that 4px of padding above and below adds up to the row's 27px exactly */
  .side-act-btn {
    width: 21px; height: 19px; border: none; background: none; border-radius: 5px; color: var(--side-text-soft);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  }
  .side-act-btn:hover { background: rgba(255, 255, 255, 0.14); color: var(--side-text); }
  .side-rename-input {
    flex: 1; min-width: 0; font: inherit; border: 1px solid var(--purple); border-radius: 5px; padding: 1px 5px; outline: none;
    background: var(--input-bg); color: var(--text);
  }
  .side-item.drop-before, .side-space.drop-before { box-shadow: inset 0 2px 0 0 var(--purple); }
  .side-item.drop-after, .side-space.drop-after { box-shadow: inset 0 -2px 0 0 var(--purple); }
  .side-space.drop-into { background: rgba(255, 255, 255, 0.18); }
  .side-item.dragging, .side-space.dragging { opacity: 0.45; }
  .menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }
  .menu-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hint); padding: 6px 9px 2px; }
  .status-menu-item.danger { color: var(--urgent); }
  .status-menu-item.disabled { color: var(--placeholder-icon, #b9b5c6); pointer-events: none; }
  /* The space's code, beside its name in the new-space dialog. Small, because it is three
     characters and looks silly at the width of a name field. */
  .new-space-code { display: flex; align-items: center; gap: 10px; padding: 0 0 10px; }
  .new-space-code span { font-size: 12px; font-weight: 600; color: var(--hint); }
  .new-space-code input {
    width: 78px; border: 1px solid var(--border); border-radius: 9px; padding: 7px 9px;
    font: inherit; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; outline: none;
  }
  .new-space-code input:focus { border-color: var(--purple); }
  .color-swatches { display: grid; grid-template-columns: repeat(5, 18px); gap: 7px; padding: 4px 9px 6px; }
  #new-space-colors { grid-template-columns: repeat(10, 18px); }
  .color-swatch { width: 18px; height: 18px; border-radius: 5px; cursor: pointer; border: 2px solid transparent; }
  .color-swatch.selected { border-color: var(--text); }
  .icon-swatches { display: grid; grid-template-columns: repeat(6, 24px); gap: 4px; padding: 4px 9px 6px; }
  #new-space-icons { grid-template-columns: repeat(9, 24px); padding: 0 0 12px; }
  .icon-swatch {
    width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: #333; border: 1.5px solid transparent; font-size: 11px; font-weight: 700;
  }
  .icon-swatch:hover { background: var(--swatch-hover); }
  .icon-swatch.selected { border-color: var(--text); background: var(--swatch-hover); }
  .icon-swatch svg, .space-icon .space-letter svg { width: 13px; height: 13px; }
  .modal-box .modal-text { font-size: 13px; color: var(--text-soft); margin-bottom: 12px; line-height: 1.45; }
  .modal-box label.modal-choice { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; cursor: pointer; }
  #delete-choices:not(:empty) { margin-bottom: 16px; }
  .modal-box label.modal-choice input { width: auto; margin: 0; }
  .modal-box select { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 7px 8px; margin: 0 0 12px; font: inherit; }
  /* Share dialog */
  #share-modal .modal-box { width: 460px; }
  .share-section { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hint); margin: 12px 0 6px; }
  .share-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
  .share-row .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .share-row .who small { color: var(--hint); margin-left: 4px; }
  .share-row .fixed-role { color: var(--hint); font-size: 12px; }
  .share-row select, .share-invite select { width: auto; margin: 0; padding: 4px 6px; border-radius: 6px; font-size: 12.5px; }
  .share-row .remove-btn { border: none; background: none; color: var(--hint); cursor: pointer; font-size: 15px; padding: 0 4px; }
  .share-row .remove-btn:hover { color: var(--urgent); }
  .share-invite { display: flex; gap: 6px; margin-top: 4px; }
  .share-invite input { flex: 1; margin: 0 !important; }
  .share-invite button { padding: 0 12px; border-radius: 8px; border: none; background: var(--purple); color: #fff; font-weight: 600; cursor: pointer; }
  .avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-fg); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
  .avatar img { width: 100%; height: 100%; object-fit: cover; }
  .share-hint { font-size: 12px; color: var(--hint); line-height: 1.4; margin-top: 4px; }

  /* Settings */
  .settings { max-width: 760px; }
  .settings h2 { font-size: 16px; margin: 4px 0 4px; }
  .settings .settings-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 12px 0 20px; }
  .plan-top { display: flex; align-items: flex-start; gap: 16px; }
  .plan-band { font-size: 17px; font-weight: 700; }
  .plan-price { margin-left: auto; font-size: 17px; font-weight: 700; white-space: nowrap; }
  .plan-meter { height: 7px; border-radius: 4px; background: var(--bg); overflow: hidden; margin: 12px 0 8px; }
  .plan-meter-fill { height: 100%; background: linear-gradient(90deg, var(--purple), #9b8cff); border-radius: 4px; transition: width 0.3s; }
  .plan-line { font-size: 13.5px; }
  .plan-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 12.5px; color: var(--hint); }
  .storage-details { margin-top: 10px; }
  .storage-details summary { cursor: pointer; font-size: 13px; font-weight: 600; }
  .storage-details input {
    width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 8px; font: inherit; font-size: 13px; background: var(--panel); color: var(--text);
  }
  .backups-block { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
  .backups-head { font-size: 13.5px; font-weight: 700; display: flex; gap: 8px; align-items: baseline; }
  .backups-head .muted { font-weight: 500; }
  .backup-list { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
  .backup-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
  .oidc-redirect { margin-top: 10px; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .oidc-redirect code { background: var(--bg); padding: 3px 7px; border-radius: 6px; font-size: 12.5px; }
  .oidc-label { display: block; font-size: 12px; font-weight: 600; color: var(--hint); margin: 10px 0 3px; }
  #import-card input[type=file] { font: inherit; font-size: 13px; }
  .import-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
  .import-fact { background: var(--bg); border-radius: 9px; padding: 7px 12px; display: flex; flex-direction: column; }
  .import-fact b { font-size: 16px; font-variant-numeric: tabular-nums; }
  .import-fact span { font-size: 11.5px; color: var(--hint); }
  .import-warn { margin-top: 6px; font-size: 12.5px; color: var(--warn-fg); background: var(--warn-bg); border-radius: 8px; padding: 7px 10px; }
  .import-error { margin-top: 8px; font-size: 13px; color: var(--urgent); }
  .import-sample { margin: 10px 0; display: flex; flex-direction: column; gap: 3px; }
  .import-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; border-bottom: 1px solid var(--border); padding-bottom: 3px; }
  /* The wiki import's own preview: a page tree, indented the way it will end up. */
  .import-summary { margin: 12px 0 6px; font-size: 13px; }
  .import-summary b { font-size: 16px; font-variant-numeric: tabular-nums; }
  #wiki-preview .import-sample { max-height: 220px; overflow-y: auto; font-size: 12.5px; }
  #wiki-preview .import-sample li { list-style: none; }
  .import-notes { margin: 8px 0 4px 16px; font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }
  .import-skipped { font-size: 12.5px; color: var(--warn-fg); background: var(--warn-bg); border-radius: 8px; padding: 6px 10px; margin: 6px 0; }
  #wiki-import-card select {
    padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px;
    background: var(--panel); color: var(--text);
  }
  #import-card select {
    padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px;
    background: var(--panel); color: var(--text);
  }
  #audit-card select {
    padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px;
    background: var(--panel); color: var(--text);
  }
  .sys-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 12px 0 4px; }
  .sys-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hint); }
  .sys-value { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0 1px; }
  .sys-value code { font-size: 15px; font-weight: 600; }
  .sys-line { margin-top: 8px; font-size: 13px; color: var(--text-soft); }
  .sys-bad { color: var(--urgent); }
  #sys-routes td.num, #sys-routes th.num { text-align: right; font-variant-numeric: tabular-nums; }

  /* The one screen a person sees when the workspace requires a second factor they have not set
     up. Deliberately not a dialog: there is nothing behind it to go back to. */
  #enrol-gate:not([hidden]) {
    position: fixed; inset: 0; z-index: 400; overflow-y: auto; background: var(--bg);
    padding: 8vh 18px calc(40px + env(safe-area-inset-bottom, 0px));
  }
  .gate-card {
    max-width: 460px; margin: 0 auto; background: var(--panel); border: 1px solid var(--border);
    border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 18px 50px rgba(16, 16, 30, 0.10);
  }
  .gate-card h2 { font-size: 20px; font-weight: 700; }
  .gate-card p { font-size: 13.5px; color: var(--text-soft); line-height: 1.55; }
  .gate-card input {
    padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; font: inherit;
    font-size: 15px; background: var(--panel); color: var(--text); max-width: 180px;
  }
  .gate-secret { font-size: 15px; letter-spacing: 1px; user-select: all; word-break: break-all; }

  .member-2fa { color: var(--done); font-weight: 600; }

  #sessions-table { margin-top: 8px; }
  #sessions-table tr.session-current td { background: var(--bg); }
  #sessions-table td:last-child, #sessions-table th:last-child { text-align: right; }

  .security-form {
    display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px;
    background: var(--bg); border-radius: 10px; max-width: 420px;
  }
  .security-form input {
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit;
    background: var(--panel); color: var(--text); max-width: 280px;
  }
  .totp-secret { font-size: 15px; letter-spacing: 1px; user-select: all; }
  .recovery-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
  .recovery-list code { font-size: 13.5px; }

  #oidc-card input, #oidc-card select {
    width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 8px; font: inherit; font-size: 13.5px; background: var(--panel); color: var(--text);
  }
  .oidc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
  .plan-notice { margin-top: 12px; padding: 9px 11px; border-radius: 9px; font-size: 13px; }
  .plan-notice.ok { background: var(--ok-bg); color: var(--ok-fg); }
  .plan-notice.info { background: var(--info-bg); color: var(--info-fg); }
  .plan-notice.warn { background: var(--warn-bg); color: var(--warn-fg); }
  .plan-licence { margin-top: 10px; font-size: 13px; }
  .plan-next { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-soft); }
  .settings .muted { color: var(--hint); font-size: 12.5px; line-height: 1.45; }
  .settings table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .settings td, .settings th { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .settings th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hint); font-weight: 700; }
  .settings select, .settings input[type=text], .settings input[type=email] { border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; font: inherit; }
  .settings .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
  .settings .btn { border: none; border-radius: 7px; padding: 7px 12px; font-weight: 600; cursor: pointer; background: var(--purple); color: #fff; }
  .settings .btn.secondary { background: var(--bg); color: var(--text-soft); border: 1px solid var(--border); }
  .settings .btn.danger { background: none; color: var(--urgent); padding: 4px 6px; }
  .settings code, .token-reveal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; word-break: break-all; }
  .token-reveal { background: var(--warn-bg-3); border: 1px solid var(--warn-edge-2); border-radius: 8px; padding: 10px 12px; margin-top: 10px; font-size: 12.5px; line-height: 1.5; }
  .settings .table-wrap { overflow-x: auto; }
  .audit-item { font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--border); }
  .audit-item .when { color: var(--hint); margin-right: 6px; }
  #drawer.readonly #drawer-body input, #drawer.readonly #drawer-body select, #drawer.readonly #drawer-body textarea,
  #drawer.readonly #drawer-header select, #drawer.readonly #drawer-delete, #drawer.readonly #drawer-body button { pointer-events: none; opacity: 0.6; }
  #drawer.readonly #comment-input { display: none; }
  #properties-btn { background: none; border: 1px solid var(--border); border-radius: 8px; height: 30px; padding: 0 12px; cursor: pointer; color: var(--text-soft); font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; }
  #properties-btn:hover { background: var(--bg); }
  .props-panel { width: 260px; max-height: 70vh; overflow-y: auto; padding: 6px; }
  .props-panel .props-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; font-weight: 700; font-size: 13px; }
  .props-panel .props-head span { color: var(--hint); font-weight: 600; font-size: 12px; }
  .prop-row { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
  .prop-row:hover { background: var(--bg); }
  .prop-row .prop-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .prop-row .prop-icon { color: var(--hint); display: inline-flex; }
  .switch { width: 32px; height: 18px; border-radius: 9px; background: #d4d4d4; position: relative; flex-shrink: 0; transition: background 0.15s; }
  .switch.on { background: var(--purple); }
  .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
  .switch.on::after { transform: translateX(14px); }
  .cell-muted { color: var(--hint); font-size: 12px; }
  .cell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  /* Field type picker (right-hand panel) */
  #field-panel {
    position: fixed; top: 0; right: 0; height: 100vh; width: 340px; max-width: 94vw; background: var(--panel);
    border-left: 1px solid var(--border); box-shadow: -8px 0 28px rgba(20,15,40,0.12); z-index: 400;
    transform: translateX(105%); transition: transform 0.18s ease; display: flex; flex-direction: column;
  }
  #field-panel.open { transform: none; }
  #field-panel header { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; font-weight: 700; font-size: 15px; }
  #field-panel header button { margin-left: auto; border: none; background: var(--bg); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; color: var(--text-soft); }
  #field-panel .panel-body { padding: 0 16px 18px; overflow-y: auto; flex: 1; }
  #field-search { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; outline: none; font: inherit; margin-bottom: 10px; }
  .field-type { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
  .field-type:hover { background: var(--bg); }
  .field-type .ft-icon, .chosen-type .ft-icon { width: 20px; display: inline-flex; justify-content: center; align-items: center; color: var(--purple-dark); }
  .field-type small { color: var(--hint); }
  .field-type.unavailable { opacity: 0.45; cursor: not-allowed; }
  .field-type.unavailable .ft-icon { color: var(--hint); }
  .field-section { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hint); padding: 14px 8px 4px; }
  .field-section.spread { display: flex; justify-content: space-between; align-items: center; }
  .field-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--border); margin: 2px 0 8px; }
  .field-tabs button { border: none; background: none; padding: 8px 2px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--hint); cursor: pointer; border-bottom: 2px solid transparent; }
  .field-tabs button.active { color: var(--text); border-bottom-color: var(--text); }
  .field-type.col-row { gap: 9px; }
  .field-type.col-row .col-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .field-type.col-row .col-label small { color: var(--hint); }
  .field-type.col-row .ft-icon { color: var(--text-soft); }
  .field-type.col-row.locked { opacity: 0.55; pointer-events: none; }
  #field-form label { display: block; font-size: 12px; font-weight: 600; color: var(--text-soft); margin: 12px 0 4px; }
  #field-form input[type=text], #field-form input[type=number], #field-form textarea, #field-form select {
    width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; outline: none; background: var(--panel); color: var(--text);
  }
  #field-form textarea { min-height: 76px; resize: vertical; }
  #field-form .form-actions { display: flex; gap: 8px; margin-top: 16px; }
  #field-form .form-actions button { flex: 1; padding: 9px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; }
  .chosen-type { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-soft); background: var(--bg); padding: 8px 10px; border-radius: 8px; }
  .chosen-type button { margin-left: auto; border: none; background: none; color: var(--purple-dark); cursor: pointer; font-size: 12.5px; }
  .cf-bar { position: relative; height: 6px; border-radius: 3px; background: var(--track-bg); width: 100%; }
  .cf-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--purple); }
  .cf-stars { letter-spacing: 1px; color: #f8ae00; }
  .cf-chips { display: flex; gap: 4px; overflow: hidden; }
  .cf-link { display: flex; align-items: center; gap: 4px; overflow: hidden; }
  .cf-link a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cf-edit { border: none; background: none; color: var(--hint); cursor: pointer; padding: 0 2px; display: none; flex-shrink: 0; }
  tr.task-row:hover .cf-edit, .jf-row:hover .cf-edit { display: inline-flex; }
  .cf-edit:hover { color: var(--purple-dark); }
  table.task-table th.col-dragging { opacity: 0.45; }
  table.task-table th.col-drop-left { box-shadow: inset 2px 0 0 0 var(--purple); }
  table.task-table th.col-drop-right { box-shadow: inset -2px 0 0 0 var(--purple); }
  .props-hint { font-size: 11.5px; color: var(--hint); padding: 10px 8px 4px; line-height: 1.4; }
  .cf-check { width: 15px; height: 15px; }
  /* An article. There is no pane of pages beside it any more: an article is reached from the tree
     on the left like anything else in a space, and the only list it carries is of the articles
     inside it — its contents, at the top, where a table of contents belongs. */
  .doc-layout { display: flex; gap: 22px; align-items: flex-start; height: 100%; }
  .doc-main { flex: 1; min-width: 0; max-width: 860px; }
  .doc-loading { display: flex; justify-content: center; padding: 60px 0; }
  .doc-contents { margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
  .doc-contents.empty { border: none; background: none; padding: 0 0 10px; }
  .doc-contents h4 { margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hint); }
  .doc-contents-rows { display: flex; flex-direction: column; gap: 2px; }
  .doc-contents-rows button {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none;
    font: inherit; font-size: 14px; color: var(--text); padding: 6px 8px; margin-left: -8px; border-radius: 8px; cursor: pointer;
  }
  .doc-contents-rows button:hover { background: var(--row-hover); color: var(--purple-dark); }
  .doc-contents-icon { display: inline-flex; width: 18px; justify-content: center; }
  .doc-contents > .quiet-link { margin-top: 8px; }
  /* An article in the tree on the left: the same row as a list, with its own emoji when it has one
     and a caret when it holds other articles. */
  .side-item.article-row.leaf { padding-left: 10px; }
  .side-item.article-row .side-icon:first-child { flex-shrink: 0; }
  .doc-title { width: 100%; border: none; outline: none; background: none; font: inherit; font-size: 26px; font-weight: 700; color: var(--text); padding: 4px 8px; margin-left: -8px; border-radius: 8px; }
  .doc-title:hover, .doc-title:focus { background: var(--bg); }
  .doc-meta { font-size: 11.5px; color: var(--hint); margin: 2px 0 12px 0; }
  .doc-body { width: 100%; min-height: 320px; border: none; outline: none; resize: none; overflow: hidden; background: none;
    font: inherit; font-size: 14px; line-height: 1.65; color: var(--text); padding: 8px; margin-left: -8px; border-radius: 8px; }
  .doc-body:hover, .doc-body:focus { background: var(--bg); }
  .doc-view { font-size: 14px; min-height: 200px; }
  .task-ref { color: var(--purple-dark); border-bottom: 1px dashed var(--purple); text-decoration: none; }
  .task-ref.missing { color: var(--hint); border: none; }
  /* whiteboard */
  #view-body.flush { padding: 0; overflow: hidden; position: relative; }
  .wb-wrap { position: absolute; inset: 0; overflow: hidden; }
  .board-canvas { position: absolute; inset: 0; overflow: hidden; background-color: var(--row-hover);
    background-image: radial-gradient(circle, #dedbe9 1.1px, transparent 1.1px); cursor: default; }
  .board-canvas[data-tool="hand"] { cursor: grab; }
  .board-canvas[data-tool="pen"] { cursor: crosshair; }
  .board-canvas[data-tool="note"], .board-canvas[data-tool="text"], .board-canvas[data-tool="rect"],
  .board-canvas[data-tool="ellipse"], .board-canvas[data-tool="task"] { cursor: crosshair; }
  .board-canvas[data-tool="arrow"] .board-item { cursor: crosshair; }
  .board-layer { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
  .board-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 0 0; pointer-events: none; }
  .board-svg > g, .board-svg > polyline { pointer-events: auto; }
  .board-stroke { cursor: move; }
  .board-stroke.selected, .board-arrow.selected line:last-child { filter: drop-shadow(0 0 0 var(--purple)); stroke-dasharray: 7 4; }
  .board-arrow { cursor: pointer; }

  .board-item { position: absolute; border-radius: 10px; box-sizing: border-box; cursor: move;
    display: flex; flex-direction: column; font-size: 14px; color: #2e2b3f; }
  .board-item.selected { outline: 2px solid var(--purple); outline-offset: 2px; }
  .board-note { box-shadow: 0 3px 10px rgba(46, 43, 63, 0.16); padding: 12px 13px; border-radius: 4px; }
  .board-rect { border: 1.5px solid rgba(46, 43, 63, 0.22); padding: 12px 13px; }
  .board-ellipse { border: 1.5px solid rgba(46, 43, 63, 0.22); border-radius: 50%; padding: 18px 22px; align-items: center; justify-content: center; text-align: center; }
  .board-body { flex: 1; outline: none; overflow: hidden; white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
  .board-item.board-text { background: none; padding: 6px 8px; font-size: 20px; font-weight: 600; }
  .board-rect .board-body, .board-ellipse .board-body { display: flex; align-items: center; justify-content: center; text-align: center; }
  .board-item.editing { cursor: text; }
  .board-item.editing .board-body { cursor: text; }
  .board-item:not(.editing) .board-body { pointer-events: none; }
  .board-ph { position: absolute; inset: 12px 13px auto; color: rgba(46, 43, 63, 0.35); font-size: 13px; pointer-events: none; }
  .board-handle { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 3px;
    background: var(--panel); border: 2px solid var(--purple); cursor: nwse-resize; }

  .board-label { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px;
    font-size: 12px; text-align: center; justify-content: center; box-shadow: 0 1px 4px rgba(46, 43, 63, 0.08); }
  .board-label .board-body { flex: none; }
  .board-frame { background: rgba(255, 255, 255, 0.55); border: 1.5px solid #cfcadd; border-radius: 12px; cursor: move; }
  .board-frame.selected { outline-offset: 3px; }
  .board-frame-title { background: none; border: none; box-shadow: none; padding: 0 4px; font-size: 13px; font-weight: 700;
    color: var(--text-soft); align-items: center; }
  .board-frame-title .board-body { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .frame-no { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 8px;
    border-radius: 5px; background: var(--bg); font-size: 11px; font-weight: 700; color: var(--hint); }
  .wb-wrap.presenting .board-toolbar, .wb-wrap.presenting .board-zoom,
  .wb-wrap.presenting .board-hint, .wb-wrap.presenting .board-sel-tools, .wb-wrap.presenting .board-empty { display: none; }
  .wb-wrap.presenting .board-frame { border-color: transparent; background: #fff; }
  .wb-wrap.presenting .board-frame-title { display: none; }
  body.presenting #sidebar, body.presenting #topbar { display: none; }
  body.presenting .board-canvas { background-image: none; background-color: var(--chip-bg); }
  .board-present-bar { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 6px 10px; box-shadow: 0 8px 24px rgba(46, 43, 63, 0.16); }
  .board-present-bar button { border: none; background: none; font: inherit; font-size: 17px; line-height: 1; color: var(--text-soft);
    cursor: pointer; padding: 4px 8px; border-radius: 7px; }
  .board-present-bar button:hover:not(:disabled) { background: var(--bg); }
  .board-present-bar button:disabled { color: var(--placeholder-icon, #cfcadd); cursor: default; }
  .board-present-bar .pb-name { font-size: 13px; font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .board-present-bar .pb-count { font-size: 12px; color: var(--hint); }
  .board-present-bar .pb-exit { font-size: 12.5px; color: var(--purple-dark); font-weight: 600; }
  .board-cbadge { position: absolute; right: -8px; top: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
    background: var(--purple); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center;
    justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(46, 43, 63, 0.25); }
  .board-cbadge.done { background: var(--done, #2f9e44); }
  .board-thread { position: absolute; width: 288px; max-height: 60%; display: flex; flex-direction: column; z-index: 6;
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(46, 43, 63, 0.18); }
  .board-thread .bt-head { display: flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
  .board-thread .bt-close { margin-left: auto; border: none; background: none; color: var(--hint); cursor: pointer; font-size: 13px; }
  .board-thread .bt-list { overflow: auto; padding: 4px 12px; flex: 1; }
  .board-thread .bt-comment { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
  .board-thread .bt-comment:last-child { border-bottom: none; }
  .board-thread .bt-comment.resolved { opacity: 0.55; }
  .board-thread .bt-meta { display: flex; gap: 8px; align-items: baseline; font-size: 11.5px; color: var(--hint); }
  .board-thread .bt-meta b { font-size: 12.5px; color: var(--text); }
  .board-thread .bt-text { margin: 3px 0 5px; line-height: 1.45; word-break: break-word; }
  .board-thread .bt-actions { display: flex; gap: 10px; }
  .board-thread .bt-actions button { border: none; background: none; padding: 0; font-size: 11.5px; color: var(--hint); cursor: pointer; }
  .board-thread .bt-actions button:hover { color: var(--purple-dark); }
  .board-thread .bt-actions button.danger:hover { color: var(--urgent); }
  .board-thread .bt-compose { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
  .board-thread textarea { width: 100%; resize: none; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; outline: none; }
  .board-thread textarea:focus { border-color: var(--purple); }
  .board-minimap { position: absolute; left: 16px; bottom: 16px; width: 168px; height: 112px; background: var(--panel);
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; box-shadow: 0 4px 14px rgba(46, 43, 63, 0.1); }
  .wb-wrap.presenting .board-minimap, .wb-wrap.presenting .board-thread { display: none; }
  .board-lock { position: absolute; left: -8px; top: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--panel);
    border: 1px solid var(--border); color: var(--hint); display: inline-flex; align-items: center; justify-content: center; }
  .board-item.found { outline: 2px solid #f8ae00; outline-offset: 2px; }
  .board-search { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 5px 8px; box-shadow: 0 6px 18px rgba(46, 43, 63, 0.14); }
  .board-search input { border: none; outline: none; font: inherit; font-size: 13px; width: 190px; background: none; }
  .board-search span { font-size: 11.5px; color: var(--hint); min-width: 40px; text-align: center; }
  .board-search button { border: none; background: none; color: var(--text-soft); cursor: pointer; padding: 2px 6px; border-radius: 6px; font-size: 13px; }
  .board-search button:hover { background: var(--bg); }
  .board-image { padding: 0; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(46, 43, 63, 0.12); }
  .board-img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; pointer-events: none; }
  .board-img-loading { margin: auto; font-size: 12px; color: var(--hint); }
  .board-task { background: var(--panel); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(46, 43, 63, 0.1); padding: 10px 12px; gap: 6px; }
  .bt-head { display: flex; align-items: center; gap: 8px; }
  .bt-id { font-size: 11px; color: var(--hint); margin-left: auto; }
  .bt-name { font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .bt-name.missing { color: var(--hint); font-weight: 500; }
  .bt-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; }
  .bt-due { font-size: 11.5px; color: var(--hint); }
  .bt-due.overdue { color: var(--urgent); }
  .bt-people { margin-left: auto; display: inline-flex; }
  .bt-people .avatar { width: 22px; height: 22px; font-size: 10px; margin-left: -6px; border: 2px solid var(--panel); }

  .board-toolbar { position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 3px; padding: 5px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 6px 20px rgba(46, 43, 63, 0.12); }
  .board-tool { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; border-radius: 8px; color: var(--text-soft); cursor: pointer; }
  .board-tool:hover { background: var(--bg); color: var(--text); }
  .board-tool.active { background: var(--purple-light); color: var(--purple-dark); }
  .board-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
  .board-swatches { display: inline-flex; gap: 4px; }
  .board-swatch { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid rgba(46, 43, 63, 0.12); cursor: pointer; padding: 0; }
  .board-swatch.on { box-shadow: 0 0 0 2px var(--purple); }
  .board-readonly { font-size: 12px; color: var(--hint); padding: 6px 10px; }

  .board-sel-tools { position: absolute; display: flex; align-items: center; gap: 2px; padding: 4px 5px; z-index: 5;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 18px rgba(46, 43, 63, 0.16); }
  .board-sel-tools button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; border-radius: 7px; color: var(--text-soft); cursor: pointer; }
  .board-sel-tools button:hover { background: var(--bg); color: var(--text); }
  .board-sel-tools button.danger:hover { background: var(--danger-bg); color: var(--urgent); }

  .board-zoom { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 2px; padding: 4px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 14px rgba(46, 43, 63, 0.12); font-size: 12px; }
  .board-zoom button { border: none; background: none; color: var(--text-soft); cursor: pointer; padding: 4px 8px; border-radius: 6px; font: inherit; }
  .board-zoom button:hover { background: var(--bg); }
  .board-zoom span { min-width: 44px; text-align: center; color: var(--hint); cursor: pointer; }
  .board-hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); font-size: 11.5px; color: var(--hint);
    background: rgba(255, 255, 255, 0.82); padding: 4px 12px; border-radius: 20px; pointer-events: none; white-space: nowrap; }
  .board-band { position: absolute; border: 1.5px solid var(--purple); background: rgba(123, 104, 238, 0.09); border-radius: 4px; pointer-events: none; }
  .board-band.ghost { border-style: dashed; background: rgba(123, 104, 238, 0.05); }

  .board-empty { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); text-align: center; max-width: 620px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px 26px; box-shadow: 0 8px 30px rgba(46, 43, 63, 0.1); }
  .board-empty h3 { font-size: 16px; font-weight: 700; }
  .board-empty p { font-size: 13px; color: var(--hint); margin: 6px 0 14px; }
  .board-empty-templates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .board-empty-templates button { text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg); cursor: pointer; font: inherit; color: var(--text); }
  .board-empty-templates button:hover { border-color: var(--purple); background: var(--tpl-hover); }
  .board-empty-templates b { display: block; font-size: 13px; }
  .board-empty-templates small { color: var(--hint); font-size: 11.5px; }
  .board-template-item { display: block; line-height: 1.35; }
  .board-template-item small { display: block; color: var(--hint); font-size: 11.5px; }
  .board-cursors { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .board-cursor { position: absolute; display: flex; align-items: flex-start; gap: 2px; transform: translate(-2px, -2px); transition: left 0.08s linear, top 0.08s linear; }
  .board-cursor span { font-size: 11px; font-weight: 600; color: #fff; padding: 2px 7px; border-radius: 10px; white-space: nowrap; margin-top: 10px; }
  .board-people { position: absolute; right: 16px; top: 16px; display: flex; gap: -4px; }
  .board-person { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; font-weight: 700; border: 2px solid var(--panel); margin-left: -6px; }
  .board-task-menu { width: 300px; }
  .board-task-option { align-items: center; gap: 8px; }
  .bto-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bto-list { font-size: 11px; color: var(--hint); flex-shrink: 0; }
  .doc-head-row { display: flex; align-items: center; gap: 6px; }
  .doc-icon-btn { border: none; background: none; font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 8px; }
  .doc-icon-btn:hover:not(:disabled) { background: var(--bg); }
  .doc-menu { width: 262px; max-height: 260px; overflow: auto; }
  .doc-menu .status-menu-item { display: block; line-height: 1.35; }
  .doc-menu .status-menu-item small { display: block; color: var(--hint); font-size: 11.5px; }
  .doc-menu .status-menu-item.active { background: var(--purple-light); }
  .icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 6px; }
  .icon-grid button { border: none; background: none; font-size: 19px; cursor: pointer; padding: 5px; border-radius: 7px; }
  .icon-grid button:hover { background: var(--bg); }
  .md-table-wrap { overflow-x: auto; margin: 10px 0; }
  .md-table { border-collapse: collapse; font-size: 13.5px; }
  .md-table th, .md-table td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
  .md-table th { background: var(--bg); font-weight: 600; }
  .md-view hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
  ul.md-todo { list-style: none; padding-left: 2px; }
  .md-todo-item { display: flex; align-items: flex-start; gap: 8px; }
  .md-todo-item input { margin-top: 3px; }
  .md-todo-item.done { color: var(--hint); text-decoration: line-through; }
  .doc-templates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-size: 12.5px; color: var(--hint); }
  .doc-templates button { border: 1px solid var(--border); background: var(--panel); border-radius: 20px; padding: 5px 12px;
    font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; }
  .doc-templates button:hover { border-color: var(--purple); color: var(--purple-dark); }
  .doc-backlinks { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border); }
  .doc-backlinks h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hint); margin-bottom: 8px; }
  .doc-backlinks button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--panel);
    border-radius: 8px; padding: 5px 10px; margin: 0 6px 6px 0; font: inherit; font-size: 12.5px; cursor: pointer; }
  .doc-backlinks button:hover { border-color: var(--purple); }
  .page-ref { display: inline-flex; align-items: center; gap: 4px; color: var(--purple-dark); text-decoration: none;
    border-bottom: 1px solid var(--purple); }
  .doc-link-icon { display: inline-block; width: 16px; }
  .doc-conflict { background: var(--warn-bg-2); border: 1px solid var(--warn-edge); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 13px; }
  .doc-conflict p { color: var(--text-soft); margin: 4px 0 10px; }
  .dc-actions { display: flex; gap: 8px; }
  .dc-actions button { border: 1px solid var(--border); background: var(--panel); border-radius: 8px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
  .dc-actions .primary-btn { border-color: var(--purple); }
  .app-dialog-overlay { position: fixed; inset: 0; background: rgba(28, 25, 45, 0.35); display: flex; align-items: center;
    justify-content: center; z-index: 200; padding: 20px; }
  .app-dialog { background: var(--panel); border-radius: 14px; box-shadow: 0 20px 50px rgba(28, 25, 45, 0.25); padding: 20px 22px;
    width: 100%; max-width: 380px; }
  .app-dialog h3 { font-size: 15.5px; font-weight: 700; }
  .app-dialog p { font-size: 13px; color: var(--text-soft); margin-top: 6px; line-height: 1.45; }
  .app-dialog input { width: 100%; margin-top: 14px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
    font: inherit; font-size: 13.5px; outline: none; }
  .app-dialog input:focus { border-color: var(--purple); }
  /* The statuses editor: a row per status, dragged into the order a team works in. */
  .app-dialog.wide { width: min(560px, 92vw); }
  /* The edit button sits with the person it edits, not in a trailing column: on a phone the table
     scrolls sideways and the last column is the one nobody ever reaches. */
  .member-who { display: inline-flex; align-items: center; gap: 6px; }
  .member-edit {
    border: none; background: none; color: var(--hint); cursor: pointer; padding: 2px 3px;
    border-radius: 6px; line-height: 0; opacity: 0.55;
  }
  .member-edit:hover { background: var(--bg); color: var(--purple-dark); opacity: 1; }
  .mm-block { margin: 6px 0 14px; }
  .mm-block > label { display: block; font-size: 11px; font-weight: 700; color: var(--hint); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; }
  .mm-block input[type="text"], .mm-block input:not([type]) {
    border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; outline: none;
  }
  .mm-block .muted { font-size: 12px; margin-top: 5px; line-height: 1.45; }
  .st-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
  .st-row { display: flex; align-items: center; gap: 8px; }
  .st-grip { color: var(--placeholder-icon); cursor: grab; user-select: none; }
  .st-name { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 13px; outline: none; }
  .st-name:focus, .st-cat:focus { border-color: var(--purple); }
  .st-cat { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12.5px; outline: none; background: var(--panel); }
  .st-colour { width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; }
  .st-remove { border: none; background: none; color: var(--hint); cursor: pointer; padding: 4px 6px; border-radius: 7px; }
  .st-remove:hover:not(:disabled) { background: var(--bg); color: var(--urgent); }
  .st-remove:disabled { opacity: 0.3; cursor: default; }
  .st-add { display: flex; gap: 8px; align-items: center; }
  .st-add input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; outline: none; }
  .st-add select { border: 1px solid var(--border); border-radius: 8px; padding: 7px 8px; font: inherit; font-size: 12.5px; background: var(--panel); }
  .st-note { font-size: 12px; margin-top: 10px; line-height: 1.5; }
  .app-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
  .app-dialog-actions button { border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; }
  .app-dialog-actions .ghost-btn { border: 1px solid var(--border); background: var(--panel); color: var(--text-soft); }
  .app-dialog-actions .ghost-btn:hover { background: var(--bg); }
  .app-dialog-actions .primary-btn { border: none; background: var(--purple); color: #fff; }
  .app-dialog-actions .primary-btn.danger { background: var(--urgent); }
  /* rich text editor */
  .rich { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
  .rich-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; padding: 5px 6px; border-bottom: 1px solid var(--border); }
  .rich-bar button { min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none;
    background: none; border-radius: 7px; color: var(--text-soft); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; padding: 0 6px; }
  .rich-bar button:hover { background: var(--bg); color: var(--text); }
  .rich-sep { width: 1px; height: 18px; background: var(--border); margin: 0 5px; }
  .rich-body { padding: 12px 14px; min-height: 120px; outline: none; font-size: 14px; line-height: 1.65; }
  .rich-body.empty::before { content: attr(data-placeholder); color: var(--placeholder-icon, #b9b5c6); pointer-events: none; }
  .rich-body:focus { outline: none; }
  .rich-body > *:first-child { margin-top: 0; }
  .rich-body p { margin: 0 0 8px; }
  .rich-body ul, .rich-body ol { margin: 0 0 8px 20px; }
  .rich-body blockquote { border-left: 3px solid var(--border); padding-left: 12px; color: var(--text-soft); margin: 0 0 8px; }
  .rich-body pre { background: var(--bg); border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: 0 0 8px; }
  .rich-modes { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
  .rich-modes button { border: none; background: none; font: inherit; font-size: 12.5px; color: var(--hint); cursor: pointer; padding: 3px 8px; border-radius: 7px; }
  .rich-modes button.active { background: var(--purple-light); color: var(--purple-dark); font-weight: 600; }
  .doc-presence { display: inline-flex; margin-left: 6px; }
  .doc-person { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11.5px; font-weight: 700; border: 2px solid var(--panel); margin-left: -6px; }
  .doc-person.editing { box-shadow: 0 0 0 2px #2f9e44; }
  .ref-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 6px; background: var(--purple-light);
    color: var(--purple-dark); font-size: 0.95em; cursor: pointer; }
  .ref-chip:hover { background: var(--ref-hover); }
  /* comments on a passage */
  .doc-comment-btn { position: fixed; z-index: 60; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 14px rgba(46, 43, 63, 0.16);
    font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; }
  .doc-comment-btn:hover { border-color: var(--purple); color: var(--purple-dark); }
  mark.commented { background: var(--mark-bg); border-bottom: 2px solid #f8ae00; padding: 0 1px; cursor: pointer; }
  .page-comments { width: 260px; flex-shrink: 0; border-left: 1px solid var(--border); padding-left: 16px; }
  .pc-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--hint); margin-bottom: 10px; }
  .pc-head .count { background: var(--purple); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 10.5px; }
  .pc-thread { border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; margin-bottom: 8px; cursor: pointer; background: var(--panel); }
  .pc-thread.open { border-color: var(--purple); }
  .pc-thread.resolved { opacity: 0.55; }
  .pc-thread.draft { border-color: var(--purple); cursor: default; }
  .pc-quote { font-size: 11.5px; color: var(--text-soft); border-left: 2px solid #f8ae00; padding-left: 7px; margin-bottom: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pc-meta { display: flex; gap: 8px; align-items: baseline; font-size: 11px; color: var(--hint); }
  .pc-meta b { font-size: 12.5px; color: var(--text); }
  .pc-text { font-size: 13px; line-height: 1.45; margin: 3px 0 6px; word-break: break-word; }
  .pc-thread textarea { width: 100%; resize: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px;
    font: inherit; font-size: 13px; outline: none; }
  .pc-thread textarea:focus { border-color: var(--purple); }
  .pc-actions { display: flex; gap: 8px; margin-top: 6px; }
  .pc-actions button { border-radius: 7px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; border: 1px solid var(--border); background: var(--panel); }
  .pc-actions .primary-btn { border: none; background: var(--purple); color: #fff; }
  .pc-actions.small button { border: none; background: none; padding: 0; color: var(--hint); font-size: 11.5px; }
  .pc-actions.small button:hover { color: var(--purple-dark); }
  .pc-actions.small button.danger:hover { color: var(--urgent); }
  /* Frosted glass for the things that float: menus, dialogs, panels, toolbars */
  .status-menu, .app-dialog, #field-panel, .board-toolbar, .board-sel-tools, .board-zoom, .board-present-bar,
  .board-thread, .board-minimap, .board-search, .doc-comment-btn {
    background: var(--glass-strong) !important;
    backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  }
  /* The task card and the modals keep the plain white they had: no glass on the surfaces
     that hold a whole screen of content. */
  .status-menu, .app-dialog { border: 1px solid var(--glass-edge); }
  .app-dialog-overlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .board-canvas { background-color: rgba(251, 250, 255, 0.55); }
  /* The assistant inside the chat view is a chat like the others: no panel of its own, the pane's
     wallpaper behind it, and its messages drawn as bubbles. These win over the panel rules below,
     which were for the side panel it used to be. */
  .ch-main #assistant {
    position: static; inset: auto; z-index: auto; width: auto; height: auto; flex: 1; min-height: 0;
    display: flex; flex-direction: column; background: none; border: none; border-radius: 0;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible;
  }
  .ch-msg .ch-bubble.chat-msg { align-self: auto; font-size: 16px; line-height: 1.45; color: var(--text-strong); white-space: normal; }
  .ch-msg .ch-bubble.chat-msg.you { background: var(--bubble-mine); border-color: transparent; padding: 7px 11px 7px 12px; border-radius: 17px; border-bottom-right-radius: 5px; }
  .ch-msg .ch-bubble.chat-msg.bot {
    max-width: min(92%, 680px); background: var(--panel); border: 1px solid rgba(20, 15, 40, 0.06);
    padding: 9px 12px; border-radius: 17px; border-bottom-left-radius: 5px;
  }
  .asst-avatar { background: linear-gradient(135deg, #7c6cf0, #3fa2e8) !important; color: #fff !important; }
  .chat-row .asst-avatar svg { width: 27px; height: 27px; }
  .chat-pin { color: var(--hint); display: inline-flex; margin-left: 2px; }
  .asst-note {
    font-size: 13px; color: var(--text-soft); background: var(--glass-strong); border-radius: 12px;
    padding: 8px 12px; margin-top: 8px;
  }
  /* A digest waiting: a dot on Chats, where the assistant lives. */
  #rail-chat.has-news::after, #tab-chats.has-news::after {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--purple);
    position: absolute; top: 6px; right: 14px;
  }
  #rail-chat { position: relative; }

  /* The Spaces page: every space with what is in it, in rows made for a thumb. */
  .sp-page { max-width: 720px; margin: 0 auto; padding: 0 12px; }
  .sp-head { display: flex; align-items: center; gap: 10px; padding: 8px 2px 10px; }
  .sp-head h1 { margin: 0; flex: 1; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
  .sp-add {
    width: 38px; height: 38px; border: none; border-radius: 50%; cursor: pointer;
    background: var(--purple-light); color: var(--purple-dark); display: inline-flex; align-items: center; justify-content: center;
  }
  .sp-add svg { width: 18px; height: 18px; }
  .sp-search { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
  .sp-rows { padding-bottom: 8px; }
  .sp-row {
    display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 4px 8px; border-radius: 12px;
    cursor: pointer; color: var(--text);
  }
  .sp-row:active, .sp-row:hover { background: var(--bg); }
  .sp-icon {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: inline-flex; align-items: center;
    justify-content: center; color: var(--text-soft); border: 1px solid var(--border);
  }
  .sp-icon svg { width: 17px; height: 17px; }
  .sp-space .sp-icon { border: none; }
  .sp-dot {
    width: 30px; height: 30px; border-radius: 8px; color: #fff; font-size: 15px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .sp-name { flex: 1; min-width: 0; font-size: 17px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sp-space .sp-name { font-weight: 650; }
  .sp-count { font-size: 14px; color: var(--hint); }
  .sp-where { font-size: 13px; color: var(--hint); flex-shrink: 0; }
  .sp-btn {
    width: 36px; height: 36px; flex-shrink: 0; border: none; background: none; border-radius: 50%; cursor: pointer;
    color: var(--hint); display: inline-flex; align-items: center; justify-content: center;
  }
  .sp-btn svg { width: 18px; height: 18px; }
  .sp-caret svg { transform: rotate(90deg); transition: transform 0.15s; }
  .sp-caret.closed svg { transform: none; }
  /* What is inside a space hangs from it on a thin line, as in the reference. */
  .sp-children { margin-left: 22px; padding-left: 12px; border-left: 1.5px solid var(--border); }
  .sp-empty { padding: 10px 8px; font-size: 14px; color: var(--hint); }
  .sp-row.obj-article .sp-icon { color: #2f7fe0; }
  .sp-row.obj-whiteboard .sp-icon { color: #e0a800; }
  .sp-row.obj-dashboard .sp-icon { color: #9b4fd6; }

  /* The theme choice: three settings side by side, the chosen one lifted. */
  .theme-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .theme-pick { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
  .theme-pick button {
    border: none; background: none; color: var(--text-soft); font: inherit; font-size: 13px; font-weight: 600;
    padding: 6px 14px; border-radius: 8px; cursor: pointer;
  }
  .theme-pick button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(20, 15, 40, 0.15); }

  /* assistant */
  #assistant {
    width: 380px; flex-shrink: 0; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;
    background: var(--glass-strong);
    backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--glass-edge); border-radius: 18px;
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 14px 40px rgba(16, 16, 30, 0.10);
  }
  .chat-head { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
  .chat-badge { font-size: 10.5px; color: var(--hint); background: var(--bg); border-radius: 20px; padding: 2px 8px; }
  .chat-close { margin-left: auto; border: none; background: none; color: var(--hint); cursor: pointer; font-size: 13px; }
  .chat-log { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
  .chat-msg { font-size: 13px; line-height: 1.5; }
  .chat-msg.you { align-self: flex-end; max-width: 85%; background: var(--ink); color: var(--ink-text); padding: 7px 11px; border-radius: 12px 12px 3px 12px; white-space: pre-wrap; }
  .chat-msg.bot { align-self: flex-start; max-width: 100%; background: var(--panel); border: 1px solid var(--border);
    padding: 9px 11px; border-radius: 12px 12px 12px 3px; }
  .chat-msg.bot p { margin: 0 0 6px; }
  .chat-msg.bot p:last-child { margin-bottom: 0; }
  .chat-list { margin: 4px 0 6px 16px; display: flex; flex-direction: column; gap: 3px; }
  .chat-list li { line-height: 1.4; }
  .chat-task { color: var(--purple-dark); text-decoration: none; border-bottom: 1px solid rgba(91, 75, 212, 0.35); }
  .chat-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hint); margin: 8px 0 2px; }
  .chat-dim { font-size: 11.5px; color: var(--hint); }
  .chat-start { font-size: 12.5px; }
  .chat-digest-head { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--purple-dark); }
  .chat-when { font-size: 11.5px; color: var(--hint); margin-left: 4px; }
  .chat-when.late, .chat-when.overdue { color: var(--urgent); }
  .chat-who { font-size: 11.5px; color: var(--hint); margin-left: 4px; }
  .chat-score { font-size: 11px; color: var(--placeholder-icon); margin-left: 4px; }
  .chat-group { margin: 6px 0; }
  .chat-group-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hint); }
  .chat-more { color: var(--hint); }
  .chat-actions { display: flex; gap: 8px; margin-top: 6px; }
  .chat-actions button, .chat-draft-foot button { border: 1px solid var(--border); background: var(--panel); border-radius: 8px;
    padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; }
  .chat-actions button:hover { border-color: var(--purple); color: var(--purple-dark); }
  .chat-draft { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 5px; }
  .chat-item { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.4; }
  /* a subtask sits under its task, with a hairline to show what it belongs to */
  .chat-item.sub { margin-left: 16px; padding-left: 9px; border-left: 2px solid var(--border); }
  .chat-sub-item { margin-left: 14px; list-style: circle; }
  .chat-item-text { flex: 1; }
  .chat-item-meta { display: flex; flex-wrap: wrap; gap: 4px; }
  .chat-item-meta .chip { font-size: 10.5px; background: var(--bg); border-radius: 20px; padding: 1px 7px; color: var(--text-soft); }
  .chat-item-meta .chip.urgent { background: var(--danger-bg); color: var(--urgent); }
  .chat-item-meta .chip.high { background: var(--warn-bg-4); color: var(--warn-fg-2); }
  .chat-item-meta .chip.warn { background: var(--warn-bg-2); color: var(--warn-fg-2); }
  /* Said when the tasks have nowhere to go yet — a space with no lists, or a place we could not
     find. It carries an input, so it needs to read as part of the form rather than as a caption. */
  .chat-draft-note { font-size: 12px; color: var(--text-soft); line-height: 1.5; margin: 2px 0 4px; }
  .chat-inline-input { border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px;
    font: inherit; font-size: 12px; background: var(--panel); color: inherit; min-width: 110px; max-width: 180px; }
  .chat-draft-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
  .chat-draft-foot select { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 5px 7px; font: inherit; font-size: 12px; }
  .chat-draft-foot .primary-btn { border: none; background: var(--ink); color: var(--ink-text); }
  .chat-compose { border-top: 1px solid var(--border); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
  .chat-compose textarea { width: 100%; resize: none; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
    font: inherit; font-size: 13px; outline: none; max-height: 160px; }
  .chat-compose textarea:focus { border-color: var(--purple); }
  .chat-compose .primary-btn { align-self: flex-end; border: none; background: var(--ink); color: var(--ink-text); border-radius: 8px;
    padding: 6px 14px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
  .meaning-block { margin: 14px 24px 22px; border-top: 1px solid var(--border); padding-top: 10px; }
  .meaning-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hint); margin-bottom: 4px; }
  .meaning-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 7px; cursor: pointer; font-size: 13px; }
  .meaning-row:hover { background: var(--bg); }
  .meaning-where { margin-left: auto; font-size: 11.5px; color: var(--hint); }
  .overdue-banner { display: flex; align-items: center; gap: 10px; background: var(--warn-bg-2); border: 1px solid var(--warn-edge);
    border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; font-size: 12.5px; color: #92400e; }
  /* dashboard */
  .dashboard { display: flex; flex-direction: column; gap: 16px; }
  .dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .dash-tile { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
  .dash-tile.bad .dash-value { color: var(--urgent); }
  .dash-label { font-size: 12px; color: var(--hint); }
  .dash-value { font-size: 28px; font-weight: 700; margin-top: 4px; }
  .chart-legend.row { flex-direction: row; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
  .dash-toolbar { display: flex; gap: 14px; justify-content: flex-end; }
  .dash-plain { grid-column: 1 / -1; position: relative; padding-top: 4px; }
  .dash-plain .dash-menu { position: absolute; right: 2px; top: -18px; }
  .dash-menu { border: none; background: none; color: var(--hint); cursor: pointer; margin-left: auto; padding: 0 2px; display: inline-flex; }
  .dash-menu:hover { color: var(--purple-dark); }
  .dash-card h3 { display: flex; align-items: center; }
  .dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
  .dash-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; overflow: hidden; }
  .dash-card.wide { grid-column: 1 / -1; }
  .dash-card h3 { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
  .chart-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
  .chart-legend { font-size: 12.5px; display: flex; flex-direction: column; gap: 6px; }
  .chart-legend .dot, .stacked-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 7px; }
  .chart-legend b { margin-left: 8px; }
  .chart-legend .pct { color: var(--hint); margin-left: 6px; }
  .stacked { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--bg); }
  .stacked span { display: block; height: 100%; }
  .stacked-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--text-soft); }
  .dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .dash-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hint); padding: 4px 8px; }
  .dash-table td { padding: 7px 8px; border-top: 1px solid var(--border); cursor: pointer; }
  .dash-table tr:hover td { background: var(--bg); }
  .dash-table .muted { color: var(--hint); }
  .dash-table .overdue { color: var(--urgent); font-weight: 600; }
  .dash-activity { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
  .dash-activity .act-event { cursor: pointer; }
  #toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #111; color: #fff; padding: 9px 14px; border-radius: 8px; font-size: 13px; z-index: 1000; max-width: 90vw; }
  .btn-danger { background: var(--urgent); color: #fff; border: none; border-radius: 8px; padding: 7px 14px; cursor: pointer; font-weight: 600; }

  /* ---------- the bell and what is waiting ---------- */
  /* The count sits on the bell, not in a corner: the bell is where a person looks to find out. */
  /* ---------- channels ----------
     Prefixed `ch-`, not `chat-`: the assistant panel already owns .chat-head, .chat-msg and
     friends, and these rules sat further down the file, so they were quietly restyling it. */
  /* The unread total on the menu item, so a channel with something in it is visible from anywhere
     rather than only once you go looking for it. */
  #ch-unread {
    margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--urgent); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px;
    text-align: center; box-sizing: border-box;
  }
  /* Chats are laid out the way a messenger is, because that is what everybody already knows how to
     use: one list of every chat, newest first, each row saying who had the last word and what it
     was; open one and it has the screen. Side by side when there is room, one after the other on
     a phone (see the max-width rules below). */
  .ch-wrap { display: flex; height: 100%; min-height: 0; }
  .ch-list {
    width: 320px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0;
    border-right: 1px solid var(--border);
  }
  .chat-list-head { display: flex; align-items: center; gap: 8px; padding: 0 12px 10px 0; }
  .chat-search {
    flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 20px; background: var(--bg);
    padding: 8px 14px; font: inherit; font-size: 15px; color: var(--text); outline: none;
  }
  .chat-search:focus { border-color: var(--purple); background: var(--panel); }
  .chat-new {
    width: 34px; height: 34px; flex-shrink: 0; border: none; border-radius: 50%; cursor: pointer;
    background: var(--purple-light); color: var(--purple-dark);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .chat-new:hover { background: var(--purple); color: #fff; }
  .chat-rows { flex: 1; min-height: 0; overflow-y: auto; padding-right: 8px; }
  .chat-row {
    display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 12px;
    cursor: pointer; margin-bottom: 2px;
  }
  .chat-row:hover { background: var(--bg); }
  .chat-row.active { background: var(--purple-light); }
  .chat-row .ch-avatar { width: 54px; height: 54px; border-radius: 50%; font-size: 20px; }
  .chat-hash { background: var(--bg); color: var(--hint); font-weight: 600; }
  .chat-row-main { flex: 1; min-width: 0; }
  .chat-row-top, .chat-row-bottom { display: flex; align-items: center; gap: 6px; }
  .chat-row-bottom { margin-top: 6px; }
  .chat-row-name {
    font-size: 17px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .chat-row-time { margin-left: auto; flex-shrink: 0; font-size: 13px; color: var(--hint); }
  .chat-row.unread .chat-row-time { color: var(--purple); font-weight: 600; }
  .chat-row-line {
    flex: 1; min-width: 0; font-size: 15.5px; color: #858a94;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .chat-row.unread .chat-row-line { color: #6b707a; }
  .chat-row-who { color: var(--purple-dark); }
  .chat-quiet { color: var(--hint); }
  .ch-count {
    margin-left: auto; flex-shrink: 0; background: var(--purple); color: #fff; font-size: 11px;
    font-weight: 700; border-radius: 10px; padding: 0 7px; line-height: 20px; min-width: 20px;
    text-align: center; box-sizing: border-box;
  }
  /* Quiet on purpose: which of your colleagues is an agent is worth knowing and not worth
     shouting, and the list is read by name. */
  .ch-bot {
    flex-shrink: 0; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--hint); border: 1px solid var(--border); border-radius: 5px; padding: 0 4px;
    line-height: 14px; vertical-align: middle;
  }

  /* The way back to the list. Only a phone needs it: on a wide screen the list never went away. */
  .chat-back {
    display: none; width: 34px; height: 34px; margin-left: -8px; flex-shrink: 0; border: none;
    border-radius: 50%; background: none; color: var(--text); cursor: pointer;
    align-items: center; justify-content: center;
  }
  .chat-back:hover { background: var(--bg); }
  .chat-head-text { min-width: 0; }
  .chat-head-name { font-weight: 700; font-size: 18.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ch-head .ch-avatar { width: 38px; height: 38px; border-radius: 50%; font-size: 15px; }

  @media (max-width: 780px) {
    .ch-list { width: 100%; border-right: none; }
    .chat-list-head { padding: 0 10px 10px; }
    .chat-rows { padding: 0 4px; }
    .ch-wrap.has-open .ch-list { display: none; }
    .ch-wrap:not(.has-open) .ch-main { display: none; }
    /* On a phone an open chat is the whole screen, picture included: it runs from the top edge to
       the bottom one, behind the floating menu bar, and the box you type in floats on it above the
       bar. The view's own padding is what kept it in a box. */
    body.view-chat.chat-open #view-body { padding: 0; }
    body.view-chat.chat-open .ch-wrap { height: 100%; }
    .ch-wrap .ch-main { margin-left: 0; border-radius: 0; }
    /* --kb-top and --kb-bottom are what the keyboard covers (applyChatViewport in app/channels.js):
       both bars move with it, so the line saying who you are writing to stays on screen and the box
       you type in sits on the keyboard rather than behind it. */
    .ch-wrap .ch-head {
      top: calc(var(--kb-top, 0px) + 6px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px;
      padding: 5px 10px;
    }
    .ch-wrap .ch-head .ch-avatar { width: 32px; height: 32px; font-size: 13px; }
    .ch-wrap .chat-head-name { font-size: 15.5px; }
    .ch-wrap .ch-topic { font-size: 12px; }
    .ch-wrap .chat-back { margin-left: -4px; }
    .ch-wrap .ch-foot {
      bottom: calc(var(--kb-bottom, 0px) + 10px + env(safe-area-inset-bottom, 0px)); left: 10px; right: 10px;
    }
    .ch-wrap .ch-messages {
      padding-left: 10px; padding-right: 10px;
      padding-top: calc(var(--kb-top, 0px) + var(--ch-head-h, 56px) + 20px);
      padding-bottom: calc(var(--kb-bottom, 0px) + var(--ch-foot-h, 56px) + 20px);
    }
    /* Inside a conversation the menu bar steps away, as it does in Telegram: the chat is the whole
       screen and the way out is the arrow at the top. The list of chats keeps it. */
    body.view-chat.chat-open #tabbar { display: none; }
    .ch-wrap .ch-head { border-radius: 16px; }
    .chat-back { display: inline-flex; }
  }

  .ch-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; margin-left: 18px; }
  .ch-head {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px;
    background: var(--glass-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 6px 18px rgba(20, 15, 40, 0.16);
  }
  .ch-topic { font-weight: 400; font-size: 13.5px; color: var(--hint); }
  /* The conversation sits on its own tinted ground so the bubbles read as bubbles. */
  /* The picture sits behind the whole conversation — its header, the messages and the box you type
     in — the way a messenger's wallpaper does, rather than in a frame of its own. */
  /* The conversation fills the whole pane and the header and the box you type in float over it, so
     what is said scrolls under their glass instead of stopping above and below it. How much room
     the messages leave for them is measured (fitChatChrome in app/channels.js). */
  .ch-main { background: #cfe3dc url('/chat-bg.jpg') center / cover; border-radius: 14px; position: relative; }
  .ch-head, .ch-foot { position: absolute; left: 14px; right: 14px; z-index: 3; }
  .ch-head { top: 12px; }
  .ch-foot { bottom: 12px; }
  .ch-messages {
    position: absolute; inset: 0; overflow-y: auto;
    padding: calc(var(--ch-head-h, 56px) + 22px) 14px calc(var(--ch-foot-h, 56px) + 22px);
  }
  /* A message does not simply vanish at the edge: it dims into the band the header and the box sit
     in, so the top and the bottom of the conversation read as edges rather than as cuts. */
  .ch-main::before, .ch-main::after {
    content: ''; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
    border-radius: inherit;
  }
  .ch-main::before {
    top: 0; height: calc(var(--kb-top, 0px) + var(--ch-head-h, 56px) + 58px);
    background: linear-gradient(to bottom, var(--ch-scrim),
      var(--ch-scrim) calc(var(--kb-top, 0px) + var(--ch-head-h, 56px) + 12px), transparent);
  }
  .ch-main::after {
    bottom: 0; height: calc(var(--kb-bottom, 0px) + var(--ch-foot-h, 56px) + 58px);
    background: linear-gradient(to top, var(--ch-scrim),
      var(--ch-scrim) calc(var(--kb-bottom, 0px) + var(--ch-foot-h, 56px) + 12px), transparent);
  }

  /* Messages are bubbles, the way every messenger draws them: yours on the right in the accent
     colour, everybody else's on the left, each message its own bubble with the time tucked into its
     corner. A run from one person sits closer together; its last bubble has the pointed corner. */
  .ch-msg { display: flex; align-items: flex-end; gap: 8px; margin-top: 3px; }
  .ch-msg:not(.run-on) { margin-top: 10px; }
  .ch-msg.mine { flex-direction: row-reverse; }
  .ch-bubble {
    min-width: 0; max-width: min(80%, 620px); padding: 7px 11px 7px 12px; border-radius: 17px;
    background: var(--panel); border: 1px solid rgba(20, 15, 40, 0.06);
    box-shadow: 0 1px 2px rgba(20, 15, 40, 0.14);
  }
  /* Yours in light blue, black text on both sides: read at a glance, and as dark as text gets. */
  .ch-msg.mine .ch-bubble { background: var(--bubble-mine); border-color: transparent; }
  .ch-msg.theirs.run-end .ch-bubble { border-bottom-left-radius: 5px; }
  .ch-msg.mine.run-end .ch-bubble { border-bottom-right-radius: 5px; }
  .ch-author { font-size: 14.5px; font-weight: 600; color: var(--purple-dark); margin-bottom: 2px; }
  .ch-text { font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--text-strong); }
  /* The time floats into the last line's corner when there is room, and drops below when not. */
  .ch-meta {
    float: right; margin: 9px 0 -6px 12px; font-size: 12px; line-height: 1; color: var(--hint);
    white-space: nowrap;
  }
  .ch-msg .ch-avatar { width: 32px; height: 32px; border-radius: 50%; font-size: 13px; }
  .ch-avatar {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; object-fit: cover;
    background: var(--purple-light); color: var(--purple-dark);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
  }
  .ch-avatar-gap { visibility: hidden; }
  /* Between days, a chip saying which day — the only place a date needs saying at all. */
  .ch-day { display: flex; justify-content: center; margin: 14px 0 4px; }
  .ch-day span {
    font-size: 14px; font-weight: 600; color: #fff; background: rgba(20, 40, 50, 0.32);
    border-radius: 12px; padding: 3px 11px;
  }

  /* The composer is the app's own rounded box, and it grows with what is typed: a message is
     allowed more than one line. */
  .ch-send {
    display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px;
    border: 1px solid var(--border); border-radius: 20px; background: var(--panel);
    box-shadow: 0 -4px 18px rgba(20,15,40,0.16);
  }
  .ch-send:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-light), 0 -4px 18px rgba(20,15,40,0.16); }
  .ch-send textarea {
    flex: 1; min-width: 0; border: none; outline: none; background: none; font: inherit;
    font-size: 17px; line-height: 1.4; padding: 7px 0; color: var(--text); resize: none;
    max-height: 40vh; overflow-y: auto;
  }
  .ch-send button {
    flex-shrink: 0; border: none; border-radius: 50%; background: var(--purple); color: #fff;
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .ch-send button:hover { background: var(--purple-dark); }
  .ch-send button:disabled { background: var(--border); cursor: default; }

  /* Files in a chat: pictures drawn in the bubble, anything else a card you can take away. */
  .ch-photos { display: flex; flex-wrap: wrap; gap: 4px; margin: -2px -6px 4px; }
  .ch-photo {
    max-width: min(100%, 320px); max-height: 320px; border-radius: 12px; cursor: zoom-in;
    object-fit: cover; background: rgba(0, 0, 0, 0.06); min-width: 80px; min-height: 60px;
  }
  .ch-file {
    display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 4px; margin: 2px 0 4px;
    text-decoration: none; color: var(--text); border-radius: 10px;
  }
  .ch-file:hover { background: rgba(0, 0, 0, 0.04); }
  .ch-file-icon {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--purple);
    display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  }
  .ch-file-text { display: flex; flex-direction: column; min-width: 0; }
  .ch-file-name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
  .ch-file-size { font-size: 13.5px; color: var(--hint); }
  .ch-text-empty { min-height: 12px; }
  /* The phone's shell before a workspace is chosen: the same ground as the sign-in screen, and a
     row per workspace this address is in (app/mobile.js). */
  #workspace-screen { display: none; place-items: center; min-height: 100%; padding: 40px 18px; text-align: center; }
  #workspace-screen.visible { display: grid; }
  /* The chooser is not the app yet: nothing of the app's own furniture belongs on it — no tab bar,
     no new-task button, no title bar for a workspace that has not been chosen. */
  body:has(#workspace-screen.visible) #tabbar,
  body:has(#workspace-screen.visible) #tab-add,
  body:has(#workspace-screen.visible) #topbar,
  body:has(#workspace-screen.visible) #sidebar { display: none; }
  #workspace-screen h2 { margin: 0 0 6px; font-size: 26px; }
  .ws-lead { color: var(--text-soft); margin: 0 0 16px; }
  .ws-google { display: flex; justify-content: center; margin-bottom: 12px; }
  .ws-list { display: flex; flex-direction: column; gap: 8px; width: min(420px, 90vw); margin: 0 auto 14px; }
  .ws-row {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
    font: inherit; color: var(--text); cursor: pointer; text-align: left;
  }
  .ws-row:hover { border-color: var(--purple); }
  .ws-row.current { border-color: var(--purple); background: var(--purple-light); }
  .ws-name { font-weight: 600; font-size: 15.5px; }
  .ws-where { font-size: 12.5px; color: var(--hint); }
  .ws-error { color: #c0392b; font-size: 13.5px; margin: 10px 0; }
  .ws-looking { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-soft); font-size: 14px; margin: 14px 0; }
  .ws-looking .ch-spinner { width: 18px; height: 18px; border-width: 2px; }
  /* A chat that is still loading says so with a turning ring, not with "nothing here yet" — that
     sentence is about a conversation, and it should only be read about one that really is empty. */
  .ch-loading { display: flex; align-items: center; justify-content: center; padding: 40px 0; }
  .ch-spinner {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2.5px solid var(--quote-rule); border-top-color: var(--purple);
    animation: ch-spin 0.8s linear infinite;
  }
  @keyframes ch-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .ch-spinner { animation-duration: 2.4s; } }
  /* A message that was written in markdown is drawn as markdown — the same shapes as a document
     page, sized for a bubble: nothing here gets a page's margins, and a code block scrolls on its
     own rather than stretching the bubble. Plain messages keep `white-space: pre-wrap` above. */
  .ch-text.has-md, .ch-bubble.chat-msg .ch-text { white-space: normal; }
  .ch-md-body > :first-child, .ch-text.has-md > :first-child, .ch-bubble.chat-msg.bot > :first-child { margin-top: 0; }
  .ch-text.has-md p, .ch-bubble.chat-msg.bot > p { margin: 0; }
  .ch-text.has-md .md-blank, .ch-bubble.chat-msg.bot > .md-blank { height: 0.6em; }
  .ch-text.has-md h3, .ch-text.has-md h4, .ch-bubble.chat-msg.bot h3, .ch-bubble.chat-msg.bot h4 {
    font-size: 1.02em; font-weight: 650; margin: 8px 0 2px;
  }
  .ch-text.has-md h5, .ch-text.has-md h6 { font-size: 1em; font-weight: 650; margin: 8px 0 2px; }
  .ch-text.has-md ul, .ch-text.has-md ol, .ch-bubble.chat-msg.bot > ul, .ch-bubble.chat-msg.bot > ol {
    margin: 3px 0; padding-left: 22px;
  }
  .ch-text.has-md li, .ch-bubble.chat-msg.bot > ul li { margin: 1px 0; }
  .ch-text.has-md code, .ch-bubble.chat-msg.bot code {
    background: var(--code-tint); border-radius: 5px; padding: 1px 5px;
    font-family: ui-monospace, Menlo, monospace; font-size: 0.88em;
  }
  .ch-text.has-md pre, .ch-bubble.chat-msg.bot pre {
    background: var(--code-tint); border-radius: 10px; padding: 8px 11px; overflow-x: auto; margin: 5px 0;
  }
  .ch-text.has-md pre code, .ch-bubble.chat-msg.bot pre code { background: none; padding: 0; }
  .ch-text.has-md blockquote, .ch-bubble.chat-msg.bot blockquote {
    border-left: 3px solid var(--quote-rule); margin: 4px 0; padding: 1px 0 1px 10px; color: var(--text-soft);
  }
  .ch-text.has-md hr { border: none; border-top: 1px solid var(--quote-rule); margin: 8px 0; }
  .ch-text.has-md .md-table-wrap { margin: 6px 0; }
  .ch-text.has-md .md-table { font-size: 0.92em; }
  .ch-text.has-md .md-img, .ch-text.has-md img { max-width: 100%; border-radius: 10px; margin: 4px 0; }
  .ch-text.has-md a { color: inherit; text-decoration: underline; }
  .ch-msg.mine .ch-text.has-md code, .ch-msg.mine .ch-text.has-md pre { background: var(--code-tint-mine); }
  .ch-msg.mine .ch-text.has-md blockquote { border-left-color: var(--quote-rule-mine); }

  /* The paperclip, and what is waiting to go with the next message. */
  /* `.ch-send button` is the round purple Send; the paperclip beside it is a quiet icon, and has to
     say so at the same weight or it turns purple too. */
  .ch-send .ch-attach {
    flex-shrink: 0; width: 36px; height: 36px; margin-left: -8px; border: none; background: none;
    color: var(--hint); cursor: pointer; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ch-send .ch-attach:hover { color: var(--purple-dark); background: var(--bg); }
  .ch-pending { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .ch-pending-file {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px;
    border-radius: 14px; background: var(--panel); box-shadow: 0 1px 2px rgba(20, 15, 40, 0.12); font-size: 13px;
  }
  .ch-pending-photo {
    position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden;
    background: var(--panel); box-shadow: 0 1px 3px rgba(20, 15, 40, 0.18);
  }
  .ch-pending-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ch-pending-photo button {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
    border: none; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 15px; line-height: 1;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  }
  .ch-pending-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
  .ch-pending-size { color: var(--hint); font-size: 12px; }
  .ch-pending-file button {
    border: none; background: none; cursor: pointer; color: var(--hint); font-size: 16px; line-height: 1;
    padding: 0 4px;
  }

  /* The action on a message appears under the cursor, like the row actions in a list. */
  .ch-act {
    opacity: 0; flex-shrink: 0; align-self: center; border: none; background: none;
    color: var(--hint); cursor: pointer; padding: 3px; border-radius: 7px;
  }
  .ch-msg:hover .ch-act { opacity: 1; }
  .ch-act:hover { background: var(--panel); color: var(--purple-dark); }
  /* The task that came out of a message, sitting under it: the link people otherwise lose. */
  .ch-task {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 3px 9px 3px 7px;
    border: 1px solid var(--border); border-radius: 11px; background: var(--panel);
    font: inherit; font-size: 12px; color: var(--purple-dark); cursor: pointer; max-width: 100%;
  }
  .ch-task:hover { border-color: var(--purple); background: var(--purple-light); }
  .ch-task-form { display: flex; flex-direction: column; gap: 5px; padding: 10px; min-width: 260px; }
  .ch-task-form label { font-size: 11px; font-weight: 700; color: var(--hint); text-transform: uppercase; letter-spacing: 0.4px; }
  .ch-task-form input, .ch-task-form select {
    border: 1px solid var(--border); border-radius: 9px; padding: 7px 9px; outline: none;
    font: inherit; font-size: 13px; background: var(--panel);
  }
  .ch-task-form input:focus, .ch-task-form select:focus { border-color: var(--purple); }
  .ch-task-form .primary-btn { margin-top: 4px; }

  .ch-empty { padding: 40px 10px; text-align: center; color: var(--hint); font-size: 13px; }
  .ch-empty b { display: block; color: var(--text); font-size: 14px; margin-bottom: 4px; }

  #bell-btn {
    position: relative; border: 1px solid var(--border); background: var(--panel); color: var(--text-soft);
    width: 32px; height: 32px; border-radius: 9px; cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; flex-shrink: 0;
  }
  #bell-btn:hover { color: var(--purple-dark); border-color: #cfc9ee; }
  #bell-btn.has-unread { color: var(--purple-dark); }
  #bell-count {
    position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: var(--urgent); color: #fff; font-size: 10px; font-weight: 700;
    line-height: 16px; text-align: center; box-sizing: border-box;
  }
  #notif-panel {
    position: absolute; top: 52px; right: 12px; width: min(380px, calc(100vw - 32px)); z-index: 120;
    background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 18px 50px rgba(20,15,40,0.20); overflow: hidden;
  }
  .notif-head {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-weight: 700; font-size: 13px;
    border-bottom: 1px solid var(--border);
  }
  .notif-head .quiet-link { margin-left: auto; }
  .notif-body { max-height: min(60vh, 460px); overflow-y: auto; }
  .notif-row { padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
  .notif-row:last-child { border-bottom: none; }
  .notif-row:hover { background: var(--bg); }
  /* Unread is carried by the bar down the left as well as the tint: a tint alone is invisible to
     anyone who cannot see that particular difference in colour. */
  .notif-row.unread { background: var(--row-hover); box-shadow: inset 3px 0 0 var(--purple); }
  .notif-line { font-size: 13px; color: var(--text); }
  .notif-task { font-size: 13px; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
  .notif-quote { font-size: 12.5px; color: var(--text-soft); margin-top: 3px; overflow-wrap: anywhere; }
  .notif-when { font-size: 11px; color: var(--hint); margin-top: 4px; }
  .notif-none { padding: 22px 14px; text-align: center; color: var(--hint); font-size: 13px; }


  #main {
    flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; position: relative;
    background: var(--main-surface);
    backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
    border: 1px solid var(--glass-edge); border-radius: 18px;
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 14px 40px rgba(16, 16, 30, 0.10);
  }
  #topbar {
    display: flex; align-items: center; gap: 14px; padding: 0 18px; border-bottom: 1px solid var(--border);
    background: var(--panel); border-radius: 18px 18px 0 0; flex-shrink: 0; flex-wrap: wrap; height: 52px;
  }
  #hamburger { display: none; background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text); }
  #view-title { font-size: 14px; font-weight: 700; margin-right: 6px; color: var(--text); white-space: nowrap; }
  .view-tabs { display: flex; align-items: center; gap: 4px; }
  .view-tab {
    padding: 0 10px; height: 30px; border: none; cursor: pointer; font-weight: 600; font-size: 12.5px;
    background: transparent; color: var(--hint); border-radius: 8px;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .view-tab svg { color: currentColor; }
  .view-tab:hover { background: var(--bg); color: var(--text-soft); }
  .view-tab.active { background: var(--tab-active-bg); color: var(--text-strong); }
  #topbar-spacer { flex: 1; }
  #add-task-btn {
    background: #111111; color: #fff; border: 1px solid #111111; border-radius: 8px;
    height: 30px; padding: 0 14px; font-weight: 600; cursor: pointer; font-size: 12.5px;
    display: inline-flex; align-items: center; box-sizing: border-box;
  }
  #add-task-btn:hover { background: #2a2a2a; border-color: #2a2a2a; }
  /* the search box lives inside the menu now, so it takes the menu's look */

  #view-body { flex: 1; overflow: auto; padding: 18px 22px 40px; background: var(--panel); }

  /* List sections (shown when "All tasks" groups by list) */
  .list-section { margin-bottom: 10px; }
  .list-section-head {
    padding: 16px 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
  }
  .list-section-eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hint); margin-bottom: 2px; }
  .list-section-name { font-weight: 700; font-size: 15px; color: var(--text); }
  .list-section:first-child .list-section-head { padding-top: 0; }

  /* Group headers (List view) */
  .group { margin-bottom: 18px; }
  .group-head {
    display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.4px; padding: 6px 4px; color: var(--hint); cursor: pointer;
  }
  .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
  .dot-todo { background: var(--todo); } .dot-inprogress { background: var(--inprogress); } .dot-done { background: var(--done); }
  .group-count { font-size: 11px; background: var(--count-bg); color: var(--hint); border-radius: 10px; padding: 1px 7px; }

  table.task-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--panel); border-radius: 10px; overflow: hidden; }
  table.task-table th {
    position: relative; text-align: left; font-size: 11px; text-transform: uppercase; color: var(--hint); font-weight: 700;
    padding: 8px 10px; border-bottom: 1px solid var(--border); overflow: hidden; white-space: nowrap;
  }
  table.task-table td { height: 38px; box-sizing: border-box; padding: 0 10px; border-bottom: 1px solid var(--border); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
  .sort-arrow { display: inline-flex; align-items: center; color: var(--hint); }
  .sort-arrow-neutral { opacity: 0; transition: opacity 0.12s; }
  .th-inner { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
  .th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sort-btn {
    width: 20px; height: 20px; border-radius: 6px; border: 1px solid transparent; background: transparent;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; margin-left: 1px;
  }
  .sort-btn:hover { background: var(--purple-light); border-color: var(--purple); }
  .sort-btn:hover .sort-arrow { color: var(--purple-dark); }
  .sort-btn.active .sort-arrow { color: var(--purple-dark); }
  .status-menu-item.checked { color: var(--purple-dark); font-weight: 600; }
  table.task-table th.spacer-cell, table.task-table td.spacer-cell { padding: 0; }
  table.task-table th.spacer-cell:hover { background: none; }
  table.task-table th:hover { background: var(--bg); }
  table.task-table th:hover .sort-arrow-neutral { opacity: 0.75; }
  table.task-table th:hover .sort-btn:hover .sort-arrow-neutral { opacity: 1; }
  td.name-cell { position: relative; }
  .col-resize {
    position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 2;
  }
  .col-resize:hover { background: var(--purple); opacity: 0.3; }
  table.task-table tr.task-row:hover { background: var(--row-hover); cursor: pointer; }
  tr.task-row.done .task-title { text-decoration: line-through; color: var(--hint); }
  /* Inside a group that is entirely one status, the line through every row says nothing the heading
     has not said already, and a screen of finished work becomes hard to read. The muted colour
     stays — that still distinguishes a finished task in a mixed table. */
  .group.one-status tr.task-row.done .task-title { text-decoration: none; }
  .task-title { font-weight: 500; margin-left: 3px; }
  /* Long titles used to run underneath the hover actions, which sit absolutely at the right edge of
     this same cell — so the last words were struck through by three buttons. Two things fix it, and
     both are needed: room reserved for the buttons, and permission for the title to wrap instead of
     pushing on forever. `min-width: 0` is the part that is easy to leave out — without it a flex
     item refuses to shrink below its content and wraps nowhere. */
  .task-title-cell { width: 100%; min-width: 0; padding-right: 82px; box-sizing: border-box; }
  .task-title { min-width: 0; overflow-wrap: anywhere; }
  /* Back to the original 13px circle with its 1.6px ring and 8px dot, but drawn as a vector
     so the ring stays even: the same shapes at the same size, without the fractional pixels. */
  .status-icon {
    width: 13px; height: 13px; border: none; border-radius: 50%; background: none no-repeat center / 13px 13px;
    cursor: pointer; padding: 0; margin: 0; flex-shrink: 0; display: inline-flex; align-items: center;
    justify-content: center; line-height: 1; vertical-align: middle; box-sizing: border-box;
    position: relative;
  }
  /* The circle is 13px across, which is a very small thing to hit — and missing it opens the task
     instead, which is the wrong action rather than no action. The target is widened with a
     pseudo-element so the circle itself does not move or grow: about 25 by 33, which is the row's
     full height and the empty space either side of the icon, and nothing a neighbour was using. */
  .status-icon::after { content: ''; position: absolute; inset: -10px -6px; border-radius: 4px; }
  .status-icon.todo {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.77' fill='none' stroke='%238b87a0' stroke-width='2.46' stroke-dasharray='3.8 3'/%3E%3C/svg%3E");
  }
  .status-icon.inprogress {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.02' fill='none' stroke='%231090e0' stroke-width='1.97'/%3E%3Ccircle cx='8' cy='8' r='4.92' fill='%231090e0'/%3E%3C/svg%3E");
  }
  .status-icon.done {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.02' fill='none' stroke='%232f9e44' stroke-width='1.97'/%3E%3Ccircle cx='8' cy='8' r='4.92' fill='%232f9e44'/%3E%3C/svg%3E");
  }
  /* Paused: the same ring, amber, with two bars for the pause */
  .status-icon.hold {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.02' fill='none' stroke='%23e8890c' stroke-width='1.97'/%3E%3Crect x='5.6' y='4.9' width='1.7' height='6.2' rx='0.6' fill='%23e8890c'/%3E%3Crect x='8.7' y='4.9' width='1.7' height='6.2' rx='0.6' fill='%23e8890c'/%3E%3C/svg%3E");
  }
  /* Abandoned: a grey ring struck through, so it reads as "not happening" at a glance */
  .status-icon.obsolete {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.02' fill='none' stroke='%238b87a0' stroke-width='1.97'/%3E%3Cline x1='4.4' y1='11.6' x2='11.6' y2='4.4' stroke='%238b87a0' stroke-width='1.97' stroke-linecap='round'/%3E%3C/svg%3E");
  }

  .editable-cell { cursor: pointer; }
  .editable-cell:hover { background: var(--bg); }
  .cell-placeholder-btn {
    border: none; background: none; cursor: pointer; color: var(--placeholder-icon); padding: 2px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .editable-cell:hover .cell-placeholder-btn { color: var(--text-soft); }
  .date-picker { width: 240px; padding: 6px; }
  .dp-cal-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 6px; font-weight: 700; font-size: 13px; }
  .dp-nav { border: none; background: none; cursor: pointer; color: var(--hint); font-size: 15px; padding: 2px 6px; border-radius: 5px; }
  .dp-nav:hover { background: var(--bg); color: var(--text); }
  .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .dp-dow { font-size: 10.5px; font-weight: 700; color: var(--hint); text-align: center; padding-bottom: 4px; }
  .dp-cell {
    border: none; background: none; cursor: pointer; font-size: 12.5px; color: var(--text);
    width: 30px; height: 26px; border-radius: 6px;
  }
  .dp-cell:hover { background: var(--purple-light); }
  .dp-cell.dp-today { font-weight: 700; color: var(--purple-dark); }
  .dp-cell.dp-selected { background: var(--purple); color: #fff; }
  .dp-cell.dp-empty { cursor: default; }
  .dp-cell.dp-empty:hover { background: none; }
  .status-menu {
    position: fixed; z-index: 400; background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15); padding: 6px; min-width: 150px;
  }
  .desc-popup {
    max-width: 340px; padding: 14px 16px; font-size: 13px; line-height: 1.6; color: var(--text);
    white-space: normal; word-break: break-word; max-height: 300px; overflow-y: auto;
  }
  .desc-icon-btn {
    border: 1px solid transparent; background: none; cursor: pointer; color: var(--hint); padding: 2px; flex-shrink: 0;
    display: inline-flex; align-items: center; border-radius: 5px;
  }
  .desc-icon-btn:hover { color: var(--purple-dark); border-color: var(--purple); background: var(--purple-light); }
  .status-menu-item {
    display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 6px; cursor: pointer; font-size: 13px;
  }
  .status-menu-item:hover { background: var(--bg); }
  .status-menu-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--hint); padding: 7px 9px 2px; }

  /* Picking several rows: the box is out of the way until you hover, or until something is picked */
  .row-check, .group-check { display: inline-flex; align-items: center; flex-shrink: 0; }
  .row-check { width: 15px; opacity: 0; transition: opacity 0.1s; }
  tr.task-row:hover .row-check, body.picking .row-check, tr.task-row.picked .row-check { opacity: 1; }
  /* Drawn rather than native, so it can be a hairline instead of a slab; the group box is the
     same thing one pixel larger, with a dash for "some of these" */
  .row-check input, .group-check input {
    appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer;
    width: 13px; height: 13px; border: 1px solid var(--check-edge); border-radius: 3.5px; background: #fff;
    transition: border-color 0.1s, background 0.1s;
  }
  .group-check input { width: 14px; height: 14px; }
  .row-check input:hover, .group-check input:hover { border-color: #9a94b4; }
  .row-check input:checked, .group-check input:checked, .group-check input:indeterminate {
    border-color: var(--purple); background: var(--purple) no-repeat center / 9px 9px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.3 2.3 4.9-5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .group-check input:indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  .row-check input:focus-visible, .group-check input:focus-visible { outline: 2px solid var(--purple); outline-offset: 1px; }
  tr.task-row.picked { background: var(--row-picked); }
  tr.task-row.picked:hover { background: var(--row-picked-hover); }
  .group-head .group-check { margin-right: 2px; }

  #bulk-bar {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 40;
    display: flex; align-items: center; gap: 6px; padding: 7px 8px 7px 14px; border-radius: 12px;
    background: rgba(10, 10, 14, 0.92); backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 0 18px 44px rgba(16, 16, 30, 0.28); color: #fff; font-size: 12.5px;
  }
  #bulk-bar .bulk-count { font-weight: 600; margin-right: 6px; white-space: nowrap; }
  #bulk-bar button {
    border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.08); color: #fff;
    border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer;
  }
  #bulk-bar button:hover { background: rgba(255, 255, 255, 0.18); }
  #bulk-bar button.danger { border-color: rgba(229, 72, 77, 0.5); color: #ff9ea1; }
  #bulk-bar button.danger:hover { background: rgba(229, 72, 77, 0.24); color: #fff; }
  #bulk-bar button.bulk-close { border: none; background: none; color: rgba(255, 255, 255, 0.6); padding: 5px 6px; }
  .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; color: #6c6881; }
  /* A status a space defined: its own colour on the dot, and the category behind the chip so
     finished work still reads as finished at a glance. */
  .status-chip.own { background: var(--bg); color: var(--text-soft); }
  .status-chip.own .dot { background: var(--placeholder-icon); }
  .status-chip.own.cat-doing { background: var(--info-bg-2); color: var(--info-fg-2); }
  .status-chip.own.cat-doing .dot { background: #2f80ed; }
  .status-chip.own.cat-done { background: var(--ok-bg-2); color: var(--ok-fg-2); }
  .status-chip.own.cat-done .dot { background: #27ae60; }
  .status-chip {
    display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
    padding: 3px 11px; border-radius: 12px; text-transform: uppercase; white-space: nowrap;
  }
  .status-chip.todo { background: var(--chip-bg); color: var(--chip-fg); }
  .status-chip.inprogress { background: var(--inprogress); color: #fff; }
  .status-chip.done { background: var(--done); color: #fff; }
  .status-chip.hold { background: #e8890c; color: #fff; }
  .status-chip.obsolete { background: var(--chip-bg); color: var(--chip-fg-soft); text-decoration: line-through; }
  .status-chip.obsolete .dot { background: #9793ab; }
  .status-chip .dot { background: currentColor; opacity: 0.8; }
  .status-chip.todo .dot { background: #9793ab; }
  .team-tag { display: inline-flex; align-items: center; font-size: 13px; font-weight: 400; border-radius: 6px; padding: 1px 9px; white-space: nowrap; }
  .team-tag-fill { display: flex; width: calc(100% - 14px); justify-content: space-between; box-sizing: border-box; }
  .team-menu-row { padding: 3px 6px; }
  .team-menu-row:hover { background: none; }
  .team-menu-row:hover .team-tag { filter: brightness(0.94); }
  .team-menu-row .team-tag-fill { width: 100%; justify-content: flex-start; }
  .team-menu-input {
    width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; margin-bottom: 6px;
    outline: none; background: var(--bg); color: var(--text); font-size: 13px; box-sizing: border-box;
  }
  .due-text { font-size: 12px; color: var(--text); }
  .due-text.overdue { color: var(--urgent); font-weight: 600; }
  .due-text.soon { color: #b9770e; font-weight: 600; }
  .subtask-count { display: inline-flex; align-items: center; font-size: 11px; color: var(--hint); }
  .expand-btn {
    width: 22px; height: 22px; flex-shrink: 0; border: none; background: none; cursor: pointer; color: var(--text-soft);
    padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px;
    transition: transform 0.15s, background 0.1s, color 0.1s;
  }
  .expand-btn:hover { background: var(--purple-light); color: var(--purple-dark); }
  .expand-btn-empty { opacity: 0; transition: opacity 0.12s, background 0.1s, color 0.1s; }
  .task-row:hover .expand-btn-empty { opacity: 1; }
  .row-drag-handle {
    display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 22px;
    flex-shrink: 0; color: var(--placeholder-icon); opacity: 0; cursor: grab; transition: opacity 0.12s, color 0.12s;
  }
  .row-drag-handle:hover { color: var(--hint); }
  .task-row:hover .row-drag-handle { opacity: 1; }
  .row-drag-handle:active { cursor: grabbing; }
  tr.task-row.dragging { opacity: 0.35; }
  tr.task-row.drag-over-top td { box-shadow: inset 0 2px 0 0 var(--purple); }
  tr.task-row.drag-over-bottom td { box-shadow: inset 0 -2px 0 0 var(--purple); }
  tr.task-row.drag-over-top td.name-cell::before,
  tr.task-row.drag-over-bottom td.name-cell::after {
    content: ''; position: absolute; left: var(--tail-x, 0px); width: 0; height: 0;
    border-left: 7px solid var(--purple);
  }
  tr.task-row.drag-over-top td.name-cell::before { top: 0; border-top: 0; border-bottom: 7px solid transparent; }
  tr.task-row.drag-over-bottom td.name-cell::after { bottom: 0; border-bottom: 0; border-top: 7px solid transparent; }
  .group-add-row { cursor: pointer; }
  .group-add-row:hover .group-add-cell { color: var(--text-soft); background: var(--bg); }
  table.task-table td.group-add-cell { display: flex; align-items: center; gap: 8px; color: var(--hint); font-size: 13px; padding-left: 60px; }
  .expand-spacer { display: inline-block; width: 22px; flex-shrink: 0; }
  .inline-add-input { border: none; outline: none; background: none; padding: 4px 8px; width: 100%; max-width: 260px; font-size: 12.5px; color: var(--text); }
  .inline-add-input::placeholder { color: var(--hint); }
  .row-actions {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    display: flex; gap: 4px; opacity: 0; transition: opacity 0.1s;
  }
  .task-row:hover .row-actions { opacity: 1; }
  .row-icon-btn {
    width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); background: transparent;
    color: var(--hint); cursor: pointer; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  }
  .row-icon-btn:hover { background: var(--purple-light); color: var(--purple-dark); border-color: var(--purple); }
  .task-tag { font-size: 10px; font-weight: 600; background: var(--chip-bg); color: var(--text-soft); border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
  .inline-rename-input { font-size: 13px; border: 1px solid var(--purple); border-radius: 6px; padding: 2px 6px; outline: none; background: var(--panel); color: var(--text); width: 100%; }

  /* Board view */
  .board-wrap { display: flex; gap: 14px; height: 100%; overflow-x: auto; }
  .board-col { flex: 0 0 280px; display: flex; flex-direction: column; background: var(--col-bg); border-radius: 10px; min-height: 0; }
  .board-col-head { padding: 12px 12px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .board-col-body { flex: 1; overflow-y: auto; padding: 6px 8px 12px; display: flex; flex-direction: column; gap: 8px; }
  .board-card {
    background: var(--panel); border-radius: 10px; padding: 10px 11px; box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    cursor: pointer; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border);
  }
  .board-card:hover { border-color: var(--purple); }
  /* A picked card, in the same colour the picked row uses, so a selection made in one view is
     recognisable in the other. The border carries it as well as the fill: cards sit on a tinted
     column, where a fill alone is easy to miss. */
  .board-card.picked { background: var(--row-picked); border-color: var(--purple); }
  .board-card[draggable="true"] { cursor: grab; }
  .board-card .task-title { font-size: 13px; }
  .board-card-top { display: flex; align-items: center; gap: 6px; }
  .board-card-top .expand-btn { width: 18px; height: 18px; }
  .board-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .board-col-body.drag-over { background: var(--purple-light); }
  .board-add { border: 1px dashed #d3cfe6; background: none; border-radius: 8px; padding: 8px; margin: 0 8px 8px; color: var(--hint); cursor: pointer; text-align: left; }

  /* Calendar view */
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .cal-dow { font-size: 11px; font-weight: 700; color: var(--hint); text-align: center; padding: 4px 0; }
  .cal-cell { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; min-height: 90px; padding: 5px; display: flex; flex-direction: column; gap: 3px; }
  .cal-cell.other-month { opacity: 0.4; }
  .cal-cell.today { border-color: var(--purple); }
  .cal-daynum { font-size: 11px; font-weight: 700; color: var(--hint); }
  .cal-task { font-size: 10.5px; background: var(--purple-light); color: var(--purple-dark); border-radius: 5px; padding: 2px 5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cal-task.done { background: var(--ok-bg-3); color: var(--done); text-decoration: line-through; }
  .cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .cal-nav button { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
  .cal-nav .label { font-weight: 700; }

  /* Journal view */
  .week-nav { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 14px; }
  .week-nav button { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
  .week-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 20px; }
  @media (max-width: 900px) { .week-grid { grid-template-columns: repeat(2, 1fr); } }
  .day-cell { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 10px 34px; position: relative; display: flex; flex-direction: column; gap: 4px; }
  .day-cell.today { border-color: var(--purple); }
  .day-name { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--hint); }
  .day-date { font-size: 16px; font-weight: 700; }
  .day-notes { width: 100%; border: none; background: transparent; resize: none; font-size: 12px; line-height: 1.5; outline: none; min-height: 160px; font-family: inherit; color: var(--text); }
  .day-rating-btn { position: absolute; bottom: 8px; right: 8px; background: none; border: none; font-size: 18px; cursor: pointer; opacity: 0.4; }
  .day-rating-btn.rated { opacity: 1; }

  /* Task drawer */
  #overlay { display: none; position: fixed; inset: 0; background: rgba(20,15,40,0.35); z-index: 200; }
  #overlay.open { display: block; }
  /* Task card: a large centred window, details on the left, activity on the right */
  #drawer {
    position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%) scale(0.98);
    width: min(1180px, 94vw); height: min(880px, 88vh);
    background: var(--panel); border-radius: 14px; box-shadow: 0 24px 70px rgba(20,15,40,0.28);
    z-index: 201; display: none; flex-direction: column; overflow: hidden; opacity: 0; transition: opacity 0.14s, transform 0.14s;
  }
  #drawer.open { display: flex; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  /* Docked to the right: the same card, moved to the edge and given the window's full height, so
     opening a task stops covering the list it came from. There is no overlay in this mode — the
     list stays lit and clickable, and clicking another row moves the panel to it. */
  #drawer.docked, #drawer.docked.open {
    inset: 8px 8px 8px auto; transform: none;
    width: var(--drawer-w, 560px); height: auto; border-radius: 18px;
  }
  #app.docked-open { margin-right: calc(var(--drawer-w, 560px) + 10px); transition: margin-right 0.14s; }
  /* The handle sits on the panel's left edge, which is the edge that moves. It is wider than it
     looks: 8px is about the narrowest thing a person can reliably catch with a mouse. */
  #drawer-resize { display: none; }
  #drawer.docked #drawer-resize {
    display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; z-index: 3; cursor: ew-resize;
  }
  #drawer.docked #drawer-resize:hover, body.drawer-sizing #drawer-resize { background: var(--purple-light); }
  body.drawer-sizing { cursor: ew-resize; user-select: none; }
  /* Beside the list there is no room for two columns, so the fields go under the body — and the two
     of them scroll as one column rather than as two boxes each with its own scrollbar, which at
     this width leaves half a comment box showing above a wall of fields. */
  #drawer.docked #drawer-cols { flex-direction: column; overflow-y: auto; }
  #drawer.docked #drawer-body, #drawer.docked #fields-pane { overflow: visible; flex: 0 0 auto; }
  #drawer.docked #fields-pane { width: auto; border-left: none; border-top: 1px solid var(--border); }
  #drawer.docked .card-props { grid-template-columns: 1fr; }
  #drawer-cols { flex: 1; display: flex; min-height: 0; }
  #fields-pane { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--panel); overflow-y: auto; padding: 16px 16px 24px; }
  #fields-pane .pane-head { display: flex; align-items: center; padding: 13px 16px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--border); color: var(--text); }
  #fields-pane .pane-hint { font-weight: 400; font-size: 11px; color: var(--hint); margin-left: auto; }
  #card-fields { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
  .jf-row { display: flex; align-items: flex-start; gap: 12px; padding: 7px 6px; border-radius: 8px; font-size: 14px; }
  .jf-row:hover { background: var(--row-hover-soft); }
  .jf-row.dragging { opacity: 0.45; }
  .jf-row.drop-above { box-shadow: inset 0 2px 0 0 var(--purple); }
  .jf-row.drop-below { box-shadow: inset 0 -2px 0 0 var(--purple); }
  .jf-label { width: 126px; flex-shrink: 0; color: #6b6b78; font-size: 14px; cursor: grab; padding-top: 1px; }
  .jf-value { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-radius: 6px; padding: 2px 6px; margin: -2px -6px; }
  .jf-value.editable { cursor: pointer; }
  .jf-value.editable:hover { background: var(--row-hover-strong); }
  .jf-value, .jf-value a { color: #1d4ed8; font-size: 14px; text-decoration: none; }
  .jf-value a { overflow: hidden; text-overflow: ellipsis; }
  .jf-value .v-empty { color: var(--placeholder-icon); }
  .jf-value .v-chip, .jf-value .v-muted { color: #1d4ed8; font-size: 14px; }
  .jf-value .team-tag, .jf-value .task-tag { flex: 0 0 auto; width: auto; }
  .v-muted { color: var(--text-soft); font-size: 12.5px; }
  .card-top { display: flex; align-items: flex-start; gap: 10px; }
  .card-top-actions { display: flex; gap: 2px; padding-top: 6px; }
  .quiet-icon { border: none; background: none; color: var(--hint); cursor: pointer; width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
  .quiet-icon:hover { background: var(--bg); color: var(--purple-dark); }
  .quiet-icon.danger:hover { color: var(--urgent); }
  .quiet-link { margin-left: auto; border: none; background: none; color: var(--purple-dark); cursor: pointer; font: inherit; font-size: 12.5px; }
  .card-block { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 14px; }
  .card-block-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
  .card-block-head .count { font-weight: 500; color: var(--hint); font-size: 12px; }
  .card-none { color: var(--hint); font-size: 12.5px; padding: 2px 0 4px; }
  .link-group { margin-bottom: 12px; }
  .related-block { margin-top: 10px; }
  .related-block .linked-row { background: var(--row-linked); }
  .link-group-title { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--hint); margin: 0 0 4px 2px; }
  .link-add-box { margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--panel); }
  .seg { display: inline-flex; background: var(--bg); border-radius: 9px; padding: 3px; gap: 2px; margin-bottom: 8px; }
  .seg button { border: none; background: none; font: inherit; font-size: 12.5px; color: var(--text-soft); padding: 5px 12px; border-radius: 7px; cursor: pointer; }
  .seg button.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(20,15,40,0.12); font-weight: 600; }
  .link-search-wrap { position: relative; }
  .link-search-wrap input { width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; outline: none; font: inherit; font-size: 13px; }
  .link-search-wrap input:focus { border-color: var(--purple); }
  /* A commit, a branch or a merge request that named this task. Read like a list of links,
     because that is what it is: the repository stays the truth about the code. */
  .commit-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 13px; }
  .commit-kind { color: var(--hint); flex-shrink: 0; line-height: 0; }
  .commit-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--purple-dark); text-decoration: none; }
  a.commit-title:hover { text-decoration: underline; }
  .commit-meta { font-size: 11.5px; color: var(--hint); white-space: nowrap; }
  .commit-meta code { font-size: 11px; background: var(--bg); border-radius: 5px; padding: 1px 4px; }
  .linked-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
    margin-bottom: 6px; cursor: pointer; font-size: 13px; background: var(--panel); }
  .linked-row:hover { border-color: #cfc9ee; background: var(--row-hover); }
  .linked-id { color: var(--hint); font-size: 12px; min-width: 62px; }
  .linked-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .linked-name.done { text-decoration: line-through; color: var(--hint); }
  .linked-remove { border: none; background: none; color: var(--hint); cursor: pointer; visibility: hidden; }
  .linked-row:hover .linked-remove { visibility: visible; }
  .attach-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
  .attach-row .file-drop { flex: 1; padding: 8px 10px; }
  .attach-row #url-input { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; outline: none; font: inherit; font-size: 12.5px; background: var(--panel); }
  .card-tabs { display: flex; gap: 14px; margin-bottom: 8px; }
  .card-tabs button { border: none; background: none; padding: 4px 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--hint); cursor: pointer; border-bottom: 2px solid transparent; }
  .card-tabs button.active { color: var(--text); border-bottom-color: var(--text); }

  #activity-list { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 0 10px; }
  .act-event { font-size: 12.5px; color: var(--text-soft); display: flex; gap: 8px; line-height: 1.45; }
  .act-event::before { content: '·'; color: var(--hint); }
  .act-event .when, .act-comment .when { color: var(--hint); font-size: 11px; white-space: nowrap; }
  .act-event b { font-weight: 600; }
  .act-comment { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
  .act-comment .meta { display: flex; gap: 6px; align-items: center; margin-top: 5px; font-size: 11px; color: var(--hint); }
  .act-comment .resolve-btn { border: none; background: none; color: var(--hint); cursor: pointer; font-size: 11px; padding: 0; text-decoration: none; }
  .act-comment .resolve-btn:hover { color: var(--purple-dark); text-decoration: underline; }
  /* Reacting to a comment: the chips sit under it, the button appears with the rest of the line's
     controls. A chip you are part of is filled in, so "did I already say yes" is answerable by eye. */
  /* A thread: replies indented under the comment they answer, with a rule down the left so the
     shape is visible at a glance rather than inferred from the indent. */
  .thread { margin: 4px 0 0 14px; padding-left: 10px; border-left: 2px solid var(--border); }
  .act-comment.reply { background: var(--bg); }
  .thread-reply, .thread-more {
    border: none; background: none; color: var(--hint); cursor: pointer; font: inherit; font-size: 11.5px;
    padding: 3px 0;
  }
  .thread-reply:hover, .thread-more:hover { color: var(--purple-dark); text-decoration: underline; }
  .reply-box { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
  .reply-box input {
    flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 9px; padding: 6px 9px;
    outline: none; font: inherit; font-size: 12.5px; background: var(--panel);
  }
  .reply-box input:focus { border-color: var(--purple); }
  .reply-box .primary-btn { padding: 5px 12px; font-size: 12.5px; }

  .react-btn { border: none; background: none; color: var(--hint); cursor: pointer; padding: 0 2px; display: inline-flex; align-items: center; }
  .react-btn:hover { color: var(--purple-dark); }
  .react-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  .react-chip {
    border: 1px solid var(--border); background: var(--panel); border-radius: 11px; padding: 1px 7px;
    font-size: 12px; line-height: 18px; cursor: pointer; color: var(--text-soft);
  }
  .react-chip:hover { border-color: #cfc9ee; }
  .react-chip.mine { background: var(--purple-light); border-color: var(--purple); color: var(--purple-dark); font-weight: 600; }
  .react-picker { display: flex; gap: 2px; padding: 4px; }
  .react-picker button {
    border: none; background: none; font-size: 18px; line-height: 1; padding: 5px 6px; border-radius: 8px; cursor: pointer;
  }
  .react-picker button:hover { background: var(--bg); }

  .act-comment.resolved { opacity: 0.55; }
  .breadcrumb { font-size: 12px; color: var(--hint); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
  .breadcrumb .crumb { border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: #55555f;
    padding: 3px 6px; border-radius: 6px; cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .breadcrumb .crumb:hover { background: var(--bg); color: var(--text); text-decoration: underline; }
  .breadcrumb .crumb-sep { color: var(--placeholder-icon); }
  .breadcrumb .crumb-copy { border: none; background: none; color: var(--hint); cursor: pointer; padding: 3px 5px; border-radius: 6px; display: inline-flex; }
  .breadcrumb .crumb-copy:hover { background: var(--bg); color: var(--purple-dark); }
  .card-props { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 2px 26px; }
  .card-empty-btn { background: none; border: none; color: var(--hint); cursor: pointer; font-size: 12.5px; padding: 4px 0; text-align: left; }
  #custom-fields .prop { min-height: 32px; }
  #custom-fields .prop-key { width: 200px; }
  .file-drop { display: block; border: 1px dashed var(--border); border-radius: 10px; padding: 12px; text-align: center; color: var(--hint); font-size: 12.5px; cursor: pointer; }
  .file-drop:hover, .file-drop.dragover { border-color: var(--purple); color: var(--purple-dark); background: var(--purple-light); }
  .file-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; }
  .file-item a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--purple-dark); }
  .file-item .size { color: var(--hint); font-size: 11.5px; }
  .file-item button { border: none; background: none; color: var(--hint); cursor: pointer; }
  .file-item button:hover { color: var(--urgent); }
  .checklist { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
  .checklist-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
  .checklist-head .count { color: var(--hint); font-weight: 400; font-size: 12px; }
  .checklist-head button { margin-left: auto; border: none; background: none; color: var(--hint); cursor: pointer; }
  .checklist-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
  .checklist-item.done span.text { text-decoration: line-through; color: var(--hint); }
  .checklist-item button.del { margin-left: auto; border: none; background: none; color: var(--hint); cursor: pointer; visibility: hidden; }
  .checklist-item:hover button.del { visibility: visible; }
  .checklist input.add-item, #checklists input.add-list { border: 1px dashed var(--border); border-radius: 8px; padding: 6px 8px; width: 100%; outline: none; background: none; font: inherit; font-size: 13px; margin-top: 6px; }
  @media (max-width: 900px) {
    #drawer { width: 96vw; height: 92vh; }
    #drawer-cols { flex-direction: column; }
    #fields-pane { width: auto; border-left: none; border-top: 1px solid var(--border); max-height: 45%; }
    .card-props { grid-template-columns: 1fr; }
  }
  /* Who else has this card open. Faces, not names: the question is "is anyone else in here", and
     the answer has to survive being glanced at rather than read. */
  /* The overlap is the negative margin on each face, not a gap: `gap` cannot be negative. */
  #drawer-watchers { display: flex; align-items: center; margin-left: auto; padding-right: 6px; }
  .watcher {
    width: 22px; height: 22px; border-radius: 50%; object-fit: cover; margin-left: -4px;
    border: 2px solid var(--panel); background: var(--purple-light); flex-shrink: 0;
  }
  .watcher.letter {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: var(--purple-dark); text-transform: uppercase;
  }

  #drawer-header { padding: 12px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
  #drawer-close { margin-left: auto; border: none; background: none; color: var(--hint); cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
  #drawer-close:hover { background: var(--bg); color: var(--text); }
  .status-pill {
    display: inline-flex; align-items: center; border-radius: 6px; padding: 3px 10px; font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.3px; background: var(--chip-bg); color: var(--chip-fg);
  }
  .status-pill.inprogress { background: var(--inprogress); color: #fff; }
  .status-pill.done { background: var(--done); color: #fff; }
  #drawer-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--hint); margin-left: auto; }
  #drawer-body { flex: 1; overflow-y: auto; padding: 22px 34px 48px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  /* quiet label/value rows: no boxes until you interact */
  .card-props { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 0 40px; margin: 10px 0 4px; }
  .prop { display: flex; align-items: center; gap: 10px; min-height: 30px; }
  .prop-key { display: inline-flex; align-items: center; gap: 8px; width: 132px; flex-shrink: 0; color: var(--hint); font-size: 12.5px; }
  .prop-key svg { width: 14px; height: 14px; flex-shrink: 0; }
  .prop-val { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; margin-left: -8px;
    border-radius: 7px; cursor: pointer; font-size: 13px; min-height: 26px; overflow: hidden; }
  .prop-val:hover { background: var(--bg); }
  .prop-val a { color: var(--purple-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .v-empty { color: var(--placeholder-icon); font-size: 13px; }
  .v-chip { color: var(--text); }
  .v-chip.overdue { color: var(--urgent); font-weight: 600; }
  .v-arrow { color: var(--hint); }
  .dates-pair { display: inline-flex; align-items: center; gap: 8px; }
  #drawer-desc { width: calc(100% + 8px); min-height: 40px; border: none; border-radius: 8px; padding: 8px; margin-left: -8px; outline: none;
    resize: none; overflow: hidden; background: none; color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.55; }
  .desc-placeholder { border: none; background: none; color: var(--hint); font: inherit; font-size: 13.5px; text-align: left;
    padding: 8px; margin-left: -8px; border-radius: 8px; cursor: pointer; width: calc(100% + 8px); }
  .desc-placeholder:hover { background: var(--bg); }
  .md-editor { margin: 2px 0 4px; }
  .md-tabs { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
  .md-tabs button { border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--hint); cursor: pointer; padding: 3px 0; border-bottom: 2px solid transparent; }
  .md-tabs button.active { color: var(--text); border-bottom-color: var(--text); }
  .md-hint { margin-left: auto; font-size: 11px; color: var(--placeholder-icon); }
  .md-view { font-size: 13.5px; line-height: 1.6; color: var(--text); border-radius: 8px; padding: 8px; margin-left: -8px; cursor: text; }
  .md-view:hover { background: var(--bg); }
  .md-view h3 { font-size: 17px; margin: 10px 0 6px; }
  .md-view h4 { font-size: 15px; margin: 10px 0 6px; }
  .md-view h5, .md-view h6 { font-size: 13.5px; margin: 8px 0 4px; }
  .md-view p { margin: 6px 0; }
  .md-view ul, .md-view ol { margin: 6px 0 6px 20px; }
  .md-view li { margin: 2px 0; }
  .md-view code { background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
  .md-view pre { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: 8px 0; }
  .md-view pre code { border: none; background: none; padding: 0; }
  .md-view blockquote { border-left: 3px solid var(--border); margin: 8px 0; padding: 2px 0 2px 12px; color: var(--text-soft); }
  .md-view a { color: var(--purple-dark); }
  .md-view .md-img, .md-view img { max-width: 100%; border-radius: 8px; margin: 6px 0; }
  /* attachments */
  #file-list { display: flex; flex-wrap: wrap; gap: 10px; }
  .att { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; width: 200px; background: var(--panel); margin: 0; }
  .att img { width: 100%; height: 118px; object-fit: cover; display: block; background: var(--bg); }
  .att-badge { display: flex; align-items: center; justify-content: center; height: 118px; background: var(--bg); color: var(--text-soft); font-weight: 700; font-size: 13px; letter-spacing: 0.5px; }
  .att figcaption { display: flex; align-items: center; gap: 6px; padding: 7px 9px; font-size: 12px; }
  .att .att-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
  .att .size { color: var(--hint); font-size: 11px; }
  .att button { border: none; background: none; color: var(--hint); cursor: pointer; }
  .att button:hover { color: var(--urgent); }
  /* subtasks reuse the list table, just tighter */
  .subtask-table table.task-table { font-size: 12.5px; }
  .subtask-table { overflow-x: auto; margin: 0 -4px 6px; }
  #drawer-desc:hover { background: var(--bg); }
  #drawer-desc:focus { background: var(--bg); }
  .card-section { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 8px; }
  .card-section-head { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
  .card-section-head .count { font-weight: 500; color: var(--hint); font-size: 12px; }
  .card-sub-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hint); margin: 14px 0 6px; }
  .quiet-add { border: none; border-radius: 8px; padding: 7px 8px; margin-left: -8px; width: calc(100% + 8px); outline: none; background: none;
    font: inherit; font-size: 13px; color: var(--text); }
  .quiet-add::placeholder { color: var(--hint); }
  .quiet-add:hover, .quiet-add:focus { background: var(--bg); }
  .quiet-btn { border: 1px solid var(--border); background: var(--panel); border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text-soft); }
  .quiet-btn:hover { border-color: var(--purple); color: var(--purple-dark); }
  .card-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 18px; }
  .card-actions button { display: inline-flex; align-items: center; gap: 8px; border: none; background: none; color: var(--text-soft);
    font: inherit; font-size: 13px; cursor: pointer; padding: 7px 8px; margin-left: -8px; border-radius: 8px; }
  .card-actions button:hover { background: var(--bg); color: var(--purple-dark); }
  .card-actions svg { width: 15px; height: 15px; }
  .card-meta { color: var(--hint); font-size: 11.5px; margin-top: 22px; }
  #drawer-title { font-size: 24px; font-weight: 700; border: none; outline: none; width: calc(100% + 8px); margin-left: -8px; padding: 4px 8px;
    background: none; color: var(--text); resize: none; min-height: 34px; line-height: 1.25; border-radius: 8px; }
  #drawer-title:hover, #drawer-title:focus { background: var(--bg); }
  .field-row { display: flex; align-items: center; gap: 10px; }
  .field-label { width: 100px; flex-shrink: 0; color: var(--hint); font-size: 12.5px; }
  .field-row select, .field-row input[type=date] {
    border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; background: var(--bg); color: var(--text); outline: none;
  }
  .section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--hint); margin-top: 4px; }
  .subtask-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
  .subtask-item input[type=text] { flex: 1; border: none; background: none; outline: none; color: var(--text); }
  .subtask-item.done span { text-decoration: line-through; color: var(--hint); }
  #add-subtask-input { border: 1px dashed var(--border); border-radius: 8px; padding: 6px 9px; width: 100%; outline: none; background: none; }
  .link-add { display: flex; gap: 6px; align-items: center; position: relative; margin-top: 6px; }
  .link-add input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; background: var(--bg); color: var(--text); outline: none; }
  .link-add select { border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: var(--bg); font-size: 12.5px; }
  #link-suggestions { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(20,15,40,0.14); max-height: 220px; overflow-y: auto; display: none; }
  #link-suggestions.open { display: block; }
  #link-suggestions div { padding: 7px 10px; font-size: 13px; cursor: pointer; }
  #link-suggestions div:hover { background: var(--bg); }
  .link-item, .url-item { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 5px 0; }
  .link-item .kind { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--hint); flex-shrink: 0; }
  .link-item .title, .url-item a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .link-item .title.done { text-decoration: line-through; color: var(--hint); }
  .link-item button, .url-item button { border: none; background: none; color: var(--hint); cursor: pointer; font-size: 15px; padding: 0 2px; }
  .link-item button:hover, .url-item button:hover { color: var(--urgent); }
  .composer { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; }
  .composer:focus-within { border-color: #c9c4e8; box-shadow: 0 0 0 3px rgba(123,104,238,0.08); }
  .composer textarea { width: 100%; border: none; outline: none; resize: none; padding: 12px 14px 6px; font: inherit; font-size: 13.5px;
    line-height: 1.5; background: none; color: var(--text); min-height: 22px; max-height: 220px; overflow-y: auto; }
  .composer textarea::placeholder { color: var(--hint); }
  .composer-bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px 8px; }
  .composer-btn { width: 30px; height: 30px; border: none; background: none; border-radius: 8px; color: var(--hint); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; }
  .composer-btn:hover { background: var(--bg); color: var(--text-soft); }
  .composer-btn.on { color: var(--purple-dark); background: var(--purple-light); }
  .composer-assignee { font-size: 11.5px; color: var(--purple-dark); background: var(--purple-light); border-radius: 20px; padding: 3px 4px 3px 9px; display: inline-flex; align-items: center; gap: 4px; }
  .composer-assignee button { border: none; background: none; color: inherit; cursor: pointer; font-size: 11px; }
  .composer-send { margin-left: auto; width: 32px; height: 30px; border: none; border-radius: 8px; background: var(--purple); color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; }
  .composer-send:hover { background: var(--purple-dark); }
  .comment-item.resolved { opacity: 0.55; }
  .comment-item .assigned { font-size: 10.5px; font-weight: 700; color: var(--purple-dark); }
  .comment-item .resolve-btn { border: none; background: none; color: var(--hint); cursor: pointer; font-size: 11.5px; padding: 0; text-decoration: underline; }
  .comment-item { background: var(--bg); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
  .comment-meta { font-size: 10.5px; color: var(--hint); margin-top: 3px; }
  #comment-input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; outline: none; background: var(--bg); color: var(--text); }
  #drawer-delete { color: var(--urgent); background: none; border: none; cursor: pointer; font-size: 12.5px; padding: 4px 0; text-align: left; }

  /* Generic sheet/modal (add list) */
  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(20,15,40,0.35); z-index: 300; align-items: center; justify-content: center; }
  .modal-overlay.open { display: flex; }
  .modal-box { background: var(--panel); border-radius: 12px; padding: 18px; width: 320px; max-width: 92vw; }
  .modal-box h3 { font-size: 15px; margin-bottom: 12px; }
  .modal-box input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; outline: none; margin-bottom: 12px; }
  .modal-btns { display: flex; gap: 8px; }
  .modal-btns button { flex: 1; padding: 9px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; }
  .btn-secondary { background: var(--bg); color: var(--hint); }
  .btn-primary { background: var(--purple); color: #fff; }

  .quick-add-row {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 10px;
    background: var(--panel); border-bottom: 1px solid var(--border);
  }
  .quick-add-row input {
    flex: 1; border: none; outline: none; background: none; font-size: 13px; color: var(--text);
  }
  .quick-add-row input::placeholder { color: var(--hint); }
  .quick-add-cancel, .quick-add-save { padding: 6px 12px; border-radius: 6px; border: none; font-weight: 600; cursor: pointer; font-size: 12.5px; }

  .empty-state { color: var(--hint); text-align: center; padding: 40px 10px; font-size: 13px; }

  /* ---------------- Phone layout ----------------
     A phone is not a narrow desktop: the menu becomes a drawer, navigation moves to a bar at
     the bottom where a thumb reaches it, menus arrive as sheets from the bottom edge, the task
     table keeps its Name column pinned while the rest scrolls sideways, and the board shows one
     column at a time with a snap. */
  #side-scrim, #tabbar { display: none; }

  @media (max-width: 780px) {
    body { padding: 0; }
    #app { gap: 0; padding: 0; height: 100%; }

    /* the menu slides over the content instead of taking a column of it */
    #sidebar {
      position: fixed; left: 0; top: 0; height: 100%; z-index: 150;
      width: min(80vw, 310px); margin-left: 0; transform: translateX(-102%);
      border-radius: 0 18px 18px 0; border-left: none;
      transition: transform 0.22s ease; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }
    #sidebar.open { transform: none; }
    #side-scrim {
      display: block; position: fixed; inset: 0; z-index: 140; background: rgba(12, 10, 24, 0.44);
      opacity: 0; pointer-events: none; transition: opacity 0.2s;
    }
    body.side-open #side-scrim { opacity: 1; pointer-events: auto; }
    .side-search kbd { display: none; }

    #main { border-radius: 0; border: none; box-shadow: none; background: var(--panel); }

    /* header on two rows: title and actions, then the views as a scrolling strip */
    #topbar { flex-wrap: wrap; height: auto; padding: 8px 12px 0; row-gap: 8px; align-items: center; }
    #hamburger { display: inline-flex; align-items: center; padding: 0 2px; margin-left: -4px; }
    /* The Spaces page has its own title and search, so the app's bar gives way, as it does in Chats. */
    body.view-spaces #topbar { display: none; }
    body.view-spaces #view-body { padding-top: calc(6px + env(safe-area-inset-top, 0px)); }
    #view-title { font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    #topbar-spacer, #properties-btn { display: none; }
    #add-task-btn { display: none; }                 /* the round button in the bar does this */
    .view-tabs {
      order: 3; width: 100%; overflow-x: auto; padding-bottom: 6px;
      scrollbar-width: none; -ms-overflow-style: none;
    }
    .view-tabs::-webkit-scrollbar { display: none; }
    .view-tab { flex: 0 0 auto; }

    #view-body { padding: 12px 0 calc(96px + env(safe-area-inset-bottom, 0px)); }
    /* the board carries its own bottom clearance, so it can fill the screen */
    #view-body:has(.board-wrap), #view-body:has(.wb-wrap) { padding-bottom: 0; }
    .list-section-head, .group-head, .overdue-banner, .meaning-block { padding-left: 12px; padding-right: 12px; }
    .empty-state { padding-left: 12px; padding-right: 12px; }
    /* The view itself has no side padding so a task table can run edge to edge and scroll under a
       pinned column. Everything that is read rather than scrolled sideways needs the margin back,
       or the words start at the glass: an article, the settings, the calendar. */
    #view-body:has(.doc-layout), #view-body:has(.settings), #view-body:has(.cal-grid) {
      padding-left: 14px; padding-right: 14px;
    }


    /* the table scrolls sideways under a pinned Name column */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Chromium will not stick a cell inside a table with collapsed borders, nor inside one that
       clips its own overflow — so on a phone the table separates its borders instead. */
    table.task-table { min-width: 0; border-collapse: separate; border-spacing: 0; overflow: visible; }
    /* The name takes the whole width at rest and gives way to the other columns as the table is
       scrolled, down to half the screen (fitNameColumn in app/views.js sets both numbers). Its
       layout width stays the screen's; only what is shown of it narrows, by clipping, and the text
       inside is held to that shown width so its "…" sits at the visible edge. */
    table.task-table col[data-colkey="name"] { width: var(--name-w, 208px) !important; }
    td.name-cell .task-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    table.task-table th:first-child, table.task-table td.name-cell {
      position: sticky; left: 0; z-index: 3; background: var(--panel);
      clip-path: inset(0 calc(100% - var(--name-vis, 100%)) 0 0);
    }
    table.task-table th:first-child > *, table.task-table td.name-cell > * {
      max-width: calc(var(--name-vis, 100%) - 16px); box-sizing: border-box;
    }
    /* Once the columns have come in, a hairline marks where the name ends. */
    /* "Add Task" is one cell a screen wide (it is laid out as a flex box, not a spanning cell), so
       it is pinned the way the names are, or it scrolls away sideways with nothing to replace it. */
    table.task-table td.group-add-cell { position: sticky; left: 0; z-index: 3; background: var(--panel); }
    .table-scroll.shifted table.task-table th:first-child::after,
    .table-scroll.shifted table.task-table td.name-cell::after {
      content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--name-vis, 100%) - 1px);
      width: 1px; background: var(--border);
    }
    tr.task-row.picked td.name-cell { background: var(--row-picked); }
    tr.task-row:hover td.name-cell { background: var(--row-hover); }
    .row-actions { display: none; }                  /* nothing hovers on a touch screen */
    .row-check { opacity: 1; }                       /* so picking is reachable without hover */
    .row-drag-handle { display: none; }

    /* one column per screen, with a snap, and a header you can hit */
    .board-wrap { gap: 10px; padding: 0 12px calc(90px + env(safe-area-inset-bottom, 0px));
      scroll-snap-type: x mandatory; scroll-padding-left: 12px; }
    .board-col { flex: 0 0 86vw; scroll-snap-align: start; }
    .board-col-head { padding: 10px 12px; }
    .board-col-head .status-chip { flex: 1; justify-content: center; padding: 5px 11px; }

    /* full-screen surfaces */
    #drawer { inset: 0; width: 100%; height: 100%; transform: none; border-radius: 0; }
    #drawer.open { transform: none; }
    #assistant {
      position: fixed; inset: 0; z-index: 160; width: 100%; height: 100%;
      border-radius: 0; border: none; background: var(--panel);
    }
    body.with-assistant #tabbar { display: none; }

    /* menus arrive from the bottom edge, not from a point on the screen */
    #popup-menu.sheet {
      position: fixed; left: 0; right: 0; bottom: 0; top: auto !important;
      width: 100%; max-width: none; max-height: 72vh; overflow-y: auto;
      border-radius: 18px 18px 0 0; padding: 8px 10px calc(14px + env(safe-area-inset-bottom, 0px));
      box-shadow: 0 -12px 40px rgba(16, 16, 30, 0.22); animation: sheet-up 0.2s ease;
      z-index: 240;
      background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    #popup-menu.sheet::before {
      content: ''; display: block; width: 38px; height: 4px; border-radius: 2px;
      background: var(--border); margin: 2px auto 10px;
    }
    #popup-menu.sheet .status-menu-item { padding: 12px 12px; font-size: 14.5px; border-radius: 10px; }
    #sheet-scrim { position: fixed; inset: 0; background: rgba(12, 10, 24, 0.38); z-index: 235; }
    @keyframes sheet-up { from { transform: translateY(14px); opacity: 0.6; } to { transform: none; opacity: 1; } }

    /* dialogs sit on the bottom edge too, where the keyboard leaves them visible */
    .app-dialog-overlay { align-items: flex-end; padding: 0; }
    .app-dialog { max-width: none; border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }

    #bulk-bar { left: 12px; right: 12px; transform: none; bottom: calc(80px + env(safe-area-inset-bottom, 0px));
      flex-wrap: wrap; justify-content: center; }

    /* the bar itself */
    /* The bar floats, the way Telegram's does: a rounded pill of frosted glass above the bottom
       edge, the current section sitting in a pill of its own. */
    #tabbar {
      display: flex; align-items: center; justify-content: space-around; gap: 2px;
      position: fixed; left: 10px; right: 10px; z-index: 130;
      bottom: calc(8px + env(safe-area-inset-bottom, 0px));
      padding: 5px; border-radius: 30px;
      background: var(--glass); backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      border: 1px solid var(--glass-edge);
      box-shadow: 0 10px 28px rgba(16, 16, 30, 0.16), 0 1px 3px rgba(16, 16, 30, 0.08);
    }
    .tab-item {
      position: relative; flex: 1; min-width: 0; border: none; background: none; cursor: pointer;
      padding: 6px 2px 5px; border-radius: 24px;
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      color: var(--text-soft); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0;
    }
    .tab-item svg { width: 23px; height: 23px; }
    .tab-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
    .tab-item.active { color: var(--purple-dark); background: var(--purple-light); }
    /* Unread, on the icon's shoulder, the way a messenger shows it. */
    .tab-count {
      position: absolute; top: 1px; left: calc(50% + 4px); min-width: 18px; height: 18px;
      padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--purple); color: #fff;
      font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
      border: 2px solid #fff;
    }
    /* In a chat the app's own bar above was a second header saying less than the chat's. */
    body.view-chat #topbar { display: none; }
    body.view-chat #view-body { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
    /* The list of chats runs down behind the floating bar, so the bar's glass has something to show
       through it; the rows keep clear of it at the very end of the list with their own padding. */
    body.view-chat:not(.chat-open) #view-body { padding-top: 0; padding-bottom: 0; }
    body.view-chat:not(.chat-open) .chat-rows {
      padding-top: calc(66px + env(safe-area-inset-top, 0px));
      padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
    /* And the search along the top is glass too: the rows run up behind it as well. */
    body.view-chat:not(.chat-open) .ch-list { position: relative; }
    body.view-chat:not(.chat-open) .chat-list-head {
      position: absolute; top: 0; left: 0; right: 0; z-index: 5;
      padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px;
      background: var(--glass); backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      border-bottom: 1px solid var(--border);
    }
    body.view-chat:not(.chat-open) .chat-search { background: var(--glass-strong); }
    .tab-item.has-news svg { color: #36d07a; }
    .tab-fab {
      flex: 0 0 auto; width: 44px; height: 44px; margin-left: 4px; border: none; border-radius: 50%;
      background: var(--ink); color: var(--ink-text); cursor: pointer; display: grid; place-items: center;
      box-shadow: 0 8px 20px rgba(16, 16, 30, 0.28);
    }
    .tab-fab svg { width: 20px; height: 20px; }
  }

  @media (max-width: 780px) and (display-mode: standalone) {
    #topbar { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  }