/* The look follows what people already know from the assistants they use: a quiet side panel the
   full height of the window, a near-white page, one narrow column, the question in a bubble on the
   right and the answer as plain text, and a rounded box to ask in. System fonts only.
   Colors (Dan, 2026-10-15): Oxblood to start with, a white page so it doesn't read as Claude, a warm-gray left
   column, deep burgundy for buttons, links and the selected row, and brass for unread; three more in the account
   menu's Color palette. Ivory & Ink (Dan, 2026-10-12): warm ivory page and menu, warm near-black text, deep navy.
   Navy & Brass: a navy left column with light writing, gray-blue boxes, navy buttons, brass highlights.
   Plum: a pale heather column and deep plum accents. */
:root {
  --bg: #ffffff; --side: #f4efec; --panel: #ffffff; --ink: #1e1a19; --muted: #6d6663; --line: #e8e3df;
  --hover: #ede6e2; --bubble: #f4e8e7; --button: #7a2331; --button-ink: #fff; --selected: #f3e3e3;
  --accent: #7a2331; --accent-ink: #fff; --brass: #b08a3e; --brass-ink: #1e1a19; --warn: #c2410c;
  --rose: #b0506a; --rose-wash: #f9eef1;
}
:root[data-palette=ivory] { --bg: #faf8f4; --side: #f3f0ea; --panel: #fffefb; --ink: #1c1a17; --muted: #6e6a62; --line: #e6e1d8;
  --hover: #ebe6dc; --bubble: #e6ecf3; --button: #1f3a5f; --button-ink: #fff; --selected: #dfe6ef;
  --accent: #1f3a5f; --accent-ink: #fff; --brass: #b08a3e; --brass-ink: #1c1a17; --warn: #9a3b2a; }
:root[data-palette=navy] { --bg: #ffffff; --side: #f4f6f9; --panel: #ffffff; --ink: #16202e; --muted: #5b6676; --line: #e1e6ee;
  --hover: #eef1f6; --bubble: #e8eef7; --button: #1b2a41; --button-ink: #fff; --selected: #e3e9f2;
  --accent: #1f3a5f; --accent-ink: #fff; --brass: #b8913f; --brass-ink: #16202e; --warn: #a33a2a; }
:root[data-palette=navy] #side { --side: #1b2a41; --panel: #23344f; --ink: #eef2f7; --muted: #a8b4c6; --line: #2e4060;
  --hover: #26395a; --selected: #31486c; --accent: #e6c77f; --button: #d2ad5b; --button-ink: #16202e; }
:root[data-palette=plum] { --bg: #ffffff; --side: #f3eef5; --panel: #ffffff; --ink: #1f1a24; --muted: #6b6472; --line: #e7e2ec;
  --hover: #ece5f0; --bubble: #f1e8f1; --button: #6b2d62; --button-ink: #fff; --selected: #f1e4ee;
  --accent: #6b2d62; --accent-ink: #fff; --brass: #b08a3e; --brass-ink: #1f1a24; --warn: #a33a2a; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #1b1717; --side: #151212; --panel: #241f1f; --ink: #eee6e4; --muted: #aaa09d; --line: #3a3232;
    --hover: #2b2424; --bubble: #3d2629; --button: #e0a3a8; --button-ink: #2a0f13; --selected: #3b2a2c;
    --accent: #e0a3a8; --accent-ink: #2a0f13; --brass: #d1ad62; --brass-ink: #1b1717; --warn: #f29466;
    --rose: #e08aa2; --rose-wash: #35262b; }
  :root[data-palette=ivory] { --bg: #1d1b18; --side: #171513; --panel: #262320; --ink: #ece7df; --muted: #a8a197; --line: #3a362f;
    --hover: #2e2a25; --bubble: #2a3240; --button: #9db8dd; --button-ink: #0f1a2a; --selected: #2b3442;
    --accent: #9db8dd; --accent-ink: #0f1a2a; --brass: #d1ad62; --brass-ink: #1d1b18; --warn: #e08a76; }
  :root[data-palette=navy] { --bg: #121821; --side: #0f151e; --panel: #1a2230; --ink: #e6ebf2; --muted: #98a3b3; --line: #2a3445;
    --hover: #1f2938; --bubble: #22324a; --button: #8fb0dc; --button-ink: #0d1a2b; --selected: #24344d;
    --accent: #8fb0dc; --accent-ink: #0d1a2b; --brass: #d8b562; --brass-ink: #121821; --warn: #e08a76; }
  :root[data-palette=navy] #side { --side: #13213a; --panel: #1a2a45; --line: #263a5a; --hover: #1d2f4d; --selected: #2a4166; }
  :root[data-palette=plum] { --bg: #1a161c; --side: #141016; --panel: #221d25; --ink: #ece6ef; --muted: #a99fae; --line: #362e3a;
    --hover: #2a2330; --bubble: #3a2840; --button: #d4a5cc; --button-ink: #2a1026; --selected: #3a2a3f;
    --accent: #d4a5cc; --accent-ink: #2a1026; --brass: #d1ad62; --brass-ink: #1a161c; --warn: #e08a76; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#shell { display: flex; align-items: flex-start; }
#side { flex: none; width: var(--side-w, 260px); height: 100vh; position: sticky; top: 0; z-index: 6; display: flex; flex-direction: column; gap: 8px; padding: 12px 8px; background: var(--side); border-right: 1px solid var(--line); font-size: 14px; }
#side:has(#tree[hidden]) { display: none; }
#grip { position: absolute; top: 0; right: -4px; bottom: 0; width: 8px; cursor: col-resize; z-index: 6; }
#grip:hover, #grip:focus-visible, #grip.on { background: var(--line); outline: none; }
.brand { padding: 4px 8px; font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; }
.side-top { display: flex; align-items: center; justify-content: space-between; }
.side-search { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.side-search:hover, .side-search:focus-visible { background: var(--hover); color: var(--ink); }
.side-search.ico::before { width: 18px; height: 18px; margin-right: 0; }
#page { flex: 1; min-width: 0; }
header { position: sticky; top: 0; z-index: 5; padding: 12px 24px; background: var(--bg); font-size: 14px; }
#crumbs { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A thread's Documents at the right end of its row of people, in the thread's column (Dan, 2026-10-15). */
.docs-slot:empty { display: none; }
.docs-slot .docs-btn { flex: none; padding: 4px 8px; border: 0; border-radius: 6px; background: none; color: var(--ink); font-size: 13px; font-weight: 600; }   /* its icon and number (Dan, 2026-10-20) */
.docs-slot .docs-btn::before { margin-right: 4px; }
.docs-slot .docs-btn:hover { background: var(--hover); }
.rail ul.files-list { list-style: none; margin: 4px 0 8px; padding: 0; }
.rail .files-list .docs-row { display: grid; gap: 2px; padding: 2px 0 6px; }
.rail .files-list .docs-row + .docs-row { border-top: 1px solid var(--line); padding-top: 6px; }
.rail .files-list .docs-line { display: flex; align-items: center; gap: 4px; }
.rail .files-list .docs-line > button.quiet { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; padding: 6px 8px; border-color: transparent; border-radius: 6px; background: none; }   /* a plain band, as the menu's rows were */
.rail .files-list .docs-line > button.quiet:hover, .rail .files-list .docs-line > button.quiet:focus-visible { background: var(--hover); outline: none; }
.rail .files-list .docs-line > button.quiet > span { display: grid; min-width: 0; }
.rail .files-list .docs-line > button.dots { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 18px; line-height: 1; }
.rail .files-list .docs-line > button.dots::before { content: "\22EE"; }
.rail .files-list .docs-line > button.dots:hover { background: var(--hover); color: var(--ink); }
.rail .files-list .docs-row .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.rail .files-list .docs-row > .error, .rail .files-list .docs-row > .meta { padding-left: 42px; font-size: 13px; }
.rail .files-list .docs-row .error:empty { display: none; }
#crumbs a { color: var(--muted); text-decoration: none; }
#crumbs a:hover { color: var(--ink); }
#crumbs a.over { color: var(--accent); outline: 1px dashed var(--accent); outline-offset: 2px; border-radius: 4px; }   /* a thread or folder dragged onto the path */
#who { padding: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
/* The account button (Dan, 2026-10-13): my initial in a circle and my name; its menu opens upward. */
#who .account { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); font-size: 14px; font-weight: 500; text-align: left; }
#who .account:hover { background: var(--hover); }
#who .account .avatar { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--button); color: var(--button-ink); font-size: 13px; font-weight: 600; }
/* A person's colour (Dan, 2026-10-14): eight that stay clearly apart, white initials on each; their name in
   the same colour, a lighter shade of it in the dark. */
.who-c0 { --who-bg: #2563eb; --who-fg: #2563eb; } .who-c1 { --who-bg: #15803d; --who-fg: #15803d; }
.who-c2 { --who-bg: #7e22ce; --who-fg: #7e22ce; } .who-c3 { --who-bg: #c2410c; --who-fg: #c2410c; }
.who-c4 { --who-bg: #be185d; --who-fg: #be185d; } .who-c5 { --who-bg: #0f766e; --who-fg: #0f766e; }
.who-c6 { --who-bg: #475569; --who-fg: #475569; } .who-c7 { --who-bg: #a16207; --who-fg: #a16207; }
@media (prefers-color-scheme: dark) {
  .who-c0 { --who-fg: #7aa7f7; } .who-c1 { --who-fg: #5cc483; } .who-c2 { --who-fg: #c08af0; } .who-c3 { --who-fg: #f29466; }
  .who-c4 { --who-fg: #f07aab; } .who-c5 { --who-fg: #4fc4b8; } .who-c6 { --who-fg: #a3b1c4; } .who-c7 { --who-fg: #e0b54a; }
}
.avatar { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--who-bg); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.avatar[data-initials]::before { content: attr(data-initials); }
.avatar { position: relative; }
.avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
#who .account .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#who .account .org { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; font-weight: 400; }
.account-menu { display: flex; min-width: 220px; font-size: 14px; }
.account-menu .head { padding: 4px 8px 6px; color: var(--muted); font-size: 12px; }
.account-menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
/* Color palette (Dan, 2026-10-15): a submenu beside its entry, above it on a phone, where there is no room beside. */
.account-menu .submenu { position: relative; display: flex; flex-direction: column; }
.account-menu .submenu > button { display: flex; align-items: center; }
.account-menu .submenu > button::after { content: "\203A" / ""; margin-left: auto; padding-left: 12px; color: var(--muted); }
.account-menu .palette-menu { display: flex; left: 100%; bottom: -6px; min-width: 190px; }
.account-menu .palette-menu[hidden] { display: none; }
@media (max-width: 560px) { .account-menu .palette-menu { left: 16px; bottom: calc(100% + 2px); } }
.account-menu [role=menuitemradio] { display: flex; align-items: center; gap: 8px; }
.account-menu [role=menuitemradio]::before, .palette-choices .swatch { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); background: linear-gradient(90deg, var(--sw-side) 50%, var(--sw-accent) 50%); }
.account-menu [role=menuitemradio][aria-checked=true]::after { content: "\2713" / ""; margin-left: auto; color: var(--accent); }
.swatch-ivory { --sw-side: #f3f0ea; --sw-accent: #1f3a5f; } .swatch-navy { --sw-side: #1b2a41; --sw-accent: #d2ad5b; }
.swatch-plum { --sw-side: #f3eef5; --sw-accent: #6b2d62; } .swatch-oxblood { --sw-side: #f4efec; --sw-accent: #7a2331; }
/* User settings (Dan, 2026-10-17): the photo beside its button, and the four palettes to pick from, each with its swatch. */
.settings-photo { display: flex; align-items: center; gap: 16px; }
.settings-photo .avatar { width: 64px; height: 64px; font-size: 24px; }
.system-form { display: grid; gap: 8px; max-width: 900px; }
.system-form > .row { display: flex; align-items: center; gap: 12px; }
.system-text { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.system-tabs [role=tab] { padding: 4px 12px; border-radius: 8px; text-decoration: none; color: var(--muted); }
.system-tabs [role=tab][aria-selected=true] { background: var(--hover); color: var(--ink); }
.system-history { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.system-history > li { border-top: 1px solid var(--line); padding: 8px 0; }
.system-history summary { cursor: pointer; }
.system-history pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--panel); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.palette-choices { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.palette-choices label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.palette-choices input { margin: 0; accent-color: var(--accent); }
/* The Admin area (Dan, 2026-10-13): one entry with a shield, and its sections in a side list, as Google's Admin console. */
:root { --i-org: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E"); }
.i-org { --i: var(--i-org); }   /* everyone at the organization (Dan, 2026-10-20, PC 2462) */
:root { --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3C/svg%3E"); }
.i-shield { --i: var(--i-shield); }
main:has(.admin-cols) { max-width: 1180px; }
.admin-cols { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; align-items: start; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 64px; }
.admin-nav a { padding: 6px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.admin-nav a:hover { background: var(--hover); }
.admin-nav a[aria-current=page] { background: var(--selected); color: var(--accent); font-weight: 600; }
.admin-main > h2:first-child { margin-top: 0; }
ul.list li.member-row { display: grid; grid-template-columns: var(--col-member-w, minmax(0, 1fr)) var(--col-email-w, minmax(0, 1fr)) var(--col-role-w, 110px) var(--col-signed-w, 100px) 28px; align-items: center; gap: 4px 12px; }
ul.list li.member-row, ul.list li.member-row:has(> .row-dots) { padding: 9px 12px; }
ul.list li.member-row > .row-dots { position: static; }
ul.list li.member-row > form.transfer { grid-column: 1 / -1; }
li.member-row > .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
li.member-row select { font: inherit; font-size: 14px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; }
ul.list li.member-head { padding-top: 6px; padding-bottom: 6px; }
li.member-head > .meta { font-size: 13px; font-weight: 600; }
@media (max-width: 760px) { .admin-cols { grid-template-columns: minmax(0, 1fr); } .admin-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  ul.list li.member-row { grid-template-columns: minmax(0, 1fr) 110px 28px; } li.member-row > .meta { display: none; } }
#tree .tree-more { display: block; width: 100%; margin: 0; padding: 4px 8px 4px 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 13px; font-weight: 400; text-align: left; }
#tree .tree-more:hover { background: var(--hover); color: var(--ink); }
/* Every page starts at the same left edge, the left column's plus 24px (Dan, 2026-10-16); a page may be narrower, never moved. */
main { max-width: 768px; margin: 0; padding: 8px 24px 64px; }
#tree { flex: 1; overflow: auto; }
#tree ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
#tree > ul { padding: 0; }
#tree [role=treeitem] { display: inline-block; max-width: calc(100% - 20px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border-radius: 8px; line-height: 20px; color: var(--ink); text-decoration: none; cursor: pointer; vertical-align: top; }
#tree [role=treeitem]:hover { background: var(--hover); }
#tree [role=treeitem][aria-current=page] { background: var(--selected); color: var(--accent); font-weight: 500; }
#tree .leaf { padding-left: 18px; }
#tree .twist { background: none; border: 0; color: var(--muted); padding: 6px 0; width: 18px; font-size: 12px; text-align: center; }
#tree .tree-head { color: var(--muted); margin: 0; padding: 6px 8px; }
#tree .projects-head, #tree .head-link { color: var(--ink); border-radius: 8px; }
#tree .projects-head:hover, #tree .head-link:hover { background: var(--hover); }
#tree .projects-head > a, #tree .head-link > a { flex: 1; color: inherit; text-decoration: none; }
#tree p.tree-head[role=link] { color: var(--ink); border-radius: 8px; cursor: pointer; }
#tree p.tree-head[role=link]:hover { background: var(--hover); }
#tree p.tree-head[aria-current=page] { background: var(--selected); color: var(--accent); }
#tree :is(p.files-head, p.skills-head):has(> a[aria-current=page]) { background: var(--selected); color: var(--accent); }   /* Files lit on its pages and Collections' (PC 3280), Skills on its own */
.collect-menu .collect-new { flex-wrap: nowrap; gap: 6px; padding: 4px; } .collect-menu .collect-new input { width: 12em; }   /* naming a new collection in the menu (PC 3280) */
/* Many files at once (Dan, 2026-10-26, PC 3261-3280): a box over each row's badge, on pointing or once any is ticked, and the bar of
   what can be done to them all above the list. */
ul.list.files li.file-row > .pick-cell { position: relative; display: grid; place-items: center; }
ul.list.files .pick-cell > .pick { position: absolute; margin: 0; width: 16px; height: 16px; opacity: 0; accent-color: var(--accent); cursor: pointer; }
ul.list.files li.file-row:is(:hover, :focus-within) > .pick-cell > .pick, ul.list.files.picking .pick-cell > .pick, ul.list.files li.file-head .pick { opacity: 1; }
ul.list.files li.file-row:is(:hover, :focus-within) > .pick-cell > .ftype, ul.list.files.picking .pick-cell > .ftype { visibility: hidden; }
.pick-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.pick-bar > strong { margin-right: 6px; }
/* Many threads at once (Dan, 2026-10-26, PC 3323-3326): each row's box before its mark, on pointing or once one is ticked; its room
   kept, so a click on the mark still opens the thread. A row without one (a subfolder, a locked thread) keeps the same room. */
li.thread-row > .tname > .pick { margin: 0 8px 0 0; width: 16px; height: 16px; vertical-align: -3px; opacity: 0; accent-color: var(--accent); cursor: pointer; }
ul.list li.thread-row:is(:hover, :focus-within) > .tname > .pick, ul.list.picking li.thread-row > .tname > .pick { opacity: 1; }
ul.list:has(> li > .tname > .pick) > li.thread-row:not(.thread-head) > .tname:not(:has(> .pick)) { padding-left: 24px; }
ul.list.deleted-list li.deleted-row > .tname:has(> .pick) { position: relative; padding-left: 24px; }   /* a Deleted page's box in the room before its mark */
ul.list.deleted-list li.deleted-row > .tname > .pick { position: absolute; left: 0; top: calc((1lh - 16px) / 2); margin: 0; font: inherit; }
li.thread-head .name-head > .pick { flex: none; align-self: center; margin: 0 8px 0 0; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.share-dialog .pick-people { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; margin: 8px 0 12px; }
.share-body > .row:has(> .pick-level) { gap: 8px; align-items: center; }
.share-body .pick-person { display: flex; align-items: center; gap: 8px; }
#tree p.tree-head { display: flex; align-items: center; }
#tree .tree-head .dots { margin-left: auto; padding: 0 6px; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 6px; visibility: hidden; }
#tree .tree-head .dots::before { content: "\22EE"; }
#tree .tree-head:hover .dots, #tree .tree-head .dots:focus-visible { visibility: visible; }
#tree .tree-head .dots:hover { background: var(--line); color: var(--ink); }
#tree :is(li.folder, li.project) { position: relative; display: block; margin-left: 0; }
#tree :is(li.folder, li.project) > [role=treeitem] { max-width: calc(100% - 76px); }
#tree :is(li.folder, li.project) > .dots, #tree :is(li.folder, li.project) > .add-here { position: absolute; top: 4px; right: 0; width: 26px; height: 24px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; border-radius: 6px; cursor: pointer; visibility: hidden; }
#tree :is(li.folder, li.project) > .add-here:has(+ .dots) { right: 28px; }
#tree :is(li.folder, li.project) > .add-here::before { margin: 0; }
#tree :is(li.folder, li.project) > .dots::before { content: "\22EE"; }
#tree :is(li.folder, li.project):hover:not(:has(li:hover)) > .dots, #tree :is(li.folder, li.project):hover:not(:has(li:hover)) > .add-here, #tree :is(li.folder, li.project) > .dots:focus-visible, #tree :is(li.folder, li.project) > .add-here:focus-visible { visibility: visible; }
#tree :is(li.folder, li.project) > .dots:hover, #tree :is(li.folder, li.project) > .add-here:hover { background: var(--line); color: var(--ink); }
/* A thread row's ⋮ (Pin, Unpin, and what else may be done), shown on hover like a folder's (Dan, 2026-10-13); the name keeps the room a badge doesn't take. */
#tree li.leaf:has(> .dots) { position: relative; }
#tree li.leaf:has(> .dots) > [role=treeitem] { max-width: calc(100% - 34px); }
#tree li.leaf > .dots { position: absolute; top: 4px; right: 0; width: 26px; height: 24px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; border-radius: 6px; cursor: pointer; visibility: hidden; }
#tree li.leaf > .dots::before { content: "\22EE"; }
#tree li.leaf:hover > .dots, #tree li.leaf > .dots:focus-visible { visibility: visible; }
#tree li.leaf > .dots:hover { background: var(--line); color: var(--ink); }
/* With no pointing (a phone, a tablet), the left column's ⋮ is always shown, as the lists' are (Dan, 2026-10-19). */
@media (hover: none) { #tree :is(li.folder, li.project) > .dots, #tree li.leaf > .dots, #tree .tree-head .dots { visibility: visible; } }
#tree p.meta, #tree p.error { margin: 0; padding: 4px 8px; font-size: 13px; }
#tree li.over { background: var(--hover); border-radius: 8px; outline: 1px dashed var(--muted); }
.tree-menu { position: absolute; z-index: 10; flex-direction: column; gap: 2px; margin: 0; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }
.tree-menu button.quiet { border-color: transparent; border-radius: 6px; text-align: left; }   /* a menu's items keep a plain band */
.tree-menu button.quiet:hover, .tree-menu button.quiet:focus-visible { background: var(--selected); outline: none; }
/* On a phone the left column is a drawer behind ☰, over the page (Dan, 2026-10-13); menus opened from it stay above it. */
.side-toggle, .side-backdrop { display: none; }
@media (max-width: 900px) {
  #shell { display: block; }
  #side { position: fixed; top: 0; left: 0; bottom: 0; width: min(85vw, 320px); height: 100dvh; z-index: 8; visibility: hidden; transform: translateX(-100%); transition: transform 0.2s ease, visibility 0.2s; box-shadow: 0 0 24px rgba(0, 0, 0, 0.2); }
  body.side-open #side { visibility: visible; transform: none; }
  body.side-open .side-backdrop { display: block; position: fixed; inset: 0; z-index: 7; background: rgba(0, 0, 0, 0.35); }
  header { display: flex; align-items: center; gap: 8px; }
  #crumbs { min-width: 0; }
  .side-toggle { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-size: 18px; font-weight: 400; }
  .side-toggle::before { content: "\2630"; }
  body:has(#tree[hidden]) .side-toggle { display: none; }
  #grip { display: none; }
}
@media (prefers-reduced-motion: reduce) { #side { transition: none; } }
h1 { font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0 0 16px; }
a { color: var(--accent); }
button, .button {
  font: inherit; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--button);   /* one button shape, the pill (Dan, 2026-10-16) */
  background: var(--button); color: var(--button-ink); cursor: pointer; text-decoration: none; display: inline-block;
}
/* No underlines in Sesh's own words (Dan, 2026-10-20, PC 2431-2436): a text action darkens on pointing; a link to another page
   underlines only on pointing, as a row's does; an answer's own links, and the chosen "questions · summaries", keep theirs. */
button.plain { background: none; color: var(--muted); border-color: transparent; padding: 0; font-weight: 400; text-decoration: none; }
button.plain:hover { color: var(--ink); }
.meta a, .scroll:not(.md *) a, #view > a, #view > p > a { text-decoration: none; }
.meta a:hover, .scroll:not(.md *) a:hover, #view > a:hover, #view > p > a:hover { text-decoration: underline; }
input[type=text], input[type=email], input[type=number] {
  font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--ink); min-width: 0; flex: 1;
}
form.row { display: flex; gap: 8px; margin: 0 0 24px; flex-wrap: wrap; }
ul.list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
ul.list li { padding: 12px 14px; border-top: 1px solid var(--line); }
ul.list li:first-child { border-top: 0; }
/* Archived (Dan, 2026-10-15): a small box, not the set-aside tray with its arrow; the project list's rows are their links,
   marked on pointing like the right column's cards; archived ones in their own section, dimmed, with Unarchive. */
:root { --i-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18v4H3zM5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8M10 12h4'/%3E%3C/svg%3E"); }
.archived-mark { display: inline-block; width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; background: var(--muted); -webkit-mask: var(--i-box) center / contain no-repeat; mask: var(--i-box) center / contain no-repeat; }
h2.list-head { display: flex; align-items: center; gap: 6px; margin: 20px 0 8px; font-size: 18px; font-weight: 700; }   /* every section heading (Dan, 2026-10-16) */
h2.list-head .archived-mark { margin-left: 0; width: 16px; height: 16px; }
ul.list.projects { overflow: hidden; }
ul.list li.project-row { position: relative; }
ul.list li.project-row:hover { background: var(--hover); }
ul.list li.project-row .row-link { color: var(--ink); font-weight: 600; text-decoration: none; }
ul.list li.project-row .row-link::after { content: ""; position: absolute; inset: 0; }
ul.list.projects-list li.archived .row-link, ul.list.projects-list li.archived .meta { color: var(--muted); }
ul.list li.project-row .unarchive { position: relative; z-index: 1; float: right; }
/* Archived ones set apart (Dan, 2026-10-15): the side columns' warm grey and a dashed edge; a line before the active ones. */
ul.list.projects.shelved { background: var(--side); border-style: dashed; }
h2.list-head.active-head { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.switch-label { display: inline-flex; align-items: center; gap: 8px; }
.filter input.switch:checked { background: var(--accent); }
ul.list a { font-weight: 500; color: var(--ink); text-decoration: none; }
ul.list a:hover { text-decoration: underline; }
.meta { color: var(--muted); font-size: 14px; }
.empty { color: var(--muted); padding: 24px 0; }
.error { color: var(--warn); margin: 0 0 16px; }
.signin, .connect { display: grid; gap: 12px; max-width: 360px; margin: 48px auto; }
.connect .row { display: flex; gap: 8px; justify-content: flex-end; }
.signin form { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 16px; }
.turn { margin: 0 0 28px; }
.turn .prompt, .turn .answer { overflow-wrap: anywhere; }
/* A thread reads like Claude (Dan, 2026-10-11): a question sits in a bubble; the answer runs from the
   left edge, with no speaker tag, after a quieter note of what the AI did. */
.turn .prompt, .turn .answer { line-height: 1.625; }
.turn .answer > .md { font: 17.5px/1.65 Georgia, "Times New Roman", serif; }
.turn .prompt { width: fit-content; max-width: 85%; margin: 0 0 22px auto; padding: 10px 16px; border-radius: 18px; background: var(--bubble); border: 1px solid var(--line); white-space: pre-wrap; }
.turn .by { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 4px; }
/* Yours on the right headed by "You", your circle to its right; a colleague's on the left, in a plainer bubble
   headed by their name, their circle to its left; each name in its asker's colour (Dan, 2026-10-14). */
.turn .prompt.mine, .turn .prompt.theirs { position: relative; }
.turn .prompt.mine { margin-right: 40px; }
.turn .prompt.mine > .avatar { position: absolute; right: -40px; top: 0; }
.turn .prompt.theirs { margin: 0 auto 22px 40px; background: var(--hover); }
.turn .prompt.theirs > .avatar { position: absolute; left: -40px; top: 0; }
.turn .prompt > .by .name { font-weight: 600; color: var(--who-fg); }
.turn .answer > .by { display: none; }
.turn .tools:not(:empty) { margin: 0 0 16px; color: var(--muted); font-size: 14px; font-style: italic; }
.turn .text { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Ask about this (Dan, PC 2523): the passage a question is about, at the top of its bubble and above the question box,
   with a bar at its left as a quote; in the bubble it takes you to the passage, which shows where it landed. */
.turn .prompt .quoted { width: 100%; margin: 4px 0 8px; padding: 2px 0 2px 10px; border: 0; border-left: 3px solid color-mix(in srgb, var(--muted) 50%, transparent); border-radius: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 400; text-align: left; white-space: pre-wrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.turn .prompt button.quoted:hover { color: var(--ink); border-left-color: var(--accent); }
.quote-card { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; padding: 8px 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--panel); color: var(--muted); font-size: 14px; }
.quote-card .quote-text { flex: 1; white-space: pre-wrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.quote-card button.plain { font-size: 18px; line-height: 1; }
.menu-pin { position: fixed; width: 0; height: 0; pointer-events: none; }
.ask-about { position: absolute; z-index: 4; transform: translateX(-50%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); white-space: nowrap; }
.turn .md .landed { border-radius: 0 6px 6px 0; animation: landed 2s ease-out forwards; }
.turn .tools div::before { content: "↳ "; }
.composer { position: sticky; bottom: 0; background: var(--bg); padding: 8px 0 16px; }
main:has(.composer) { padding-bottom: 0; }
.composer::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
/* The round arrow, and Back to where you were beside it (Dan, PC 2523), centred above the question box. */
.composer .jumps { position: absolute; left: 0; right: 0; top: -44px; z-index: 1; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.composer .jumps > button { pointer-events: auto; height: 36px; border-radius: 999px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.composer .jumps > button:hover { background: var(--hover); }
.composer .to-bottom { width: 36px; padding: 0; font-size: 18px; line-height: 1; }
.composer .jumps > .back-to { padding: 0 8px 0 14px; font-weight: 400; white-space: nowrap; border-right: 0; border-radius: 999px 0 0 999px; box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.08); }
/* Its × at its right end, one pill with it (Dan, PC 2612-2614). */
.composer .jumps > .back-x { margin-left: -8px; padding: 0 12px 0 6px; border-left: 0; border-radius: 0 999px 999px 0; color: var(--muted); font-size: 16px; line-height: 1; box-shadow: 4px 2px 8px rgba(0, 0, 0, 0.08); }
.composer .jumps > .back-x:hover { color: var(--ink); }
.composer .to-bottom::before { content: "↓"; }
/* New turns below are green, as someone live is, and pulse as the live dot does when they first show, then hold still (Dan, 2026-10-28, PC 3512-3523). */
.composer .jumps > .to-bottom.has-new { width: auto; padding: 0 16px 0 12px; border-color: #22c55e; background: #22c55e; color: #052e16; font-size: 14px; font-weight: 600; animation: live-ring 1.6s ease-out 3; }
.composer .jumps > .to-bottom.has-new::before { margin-right: 6px; font-size: 16px; }
.composer .jumps > .to-bottom.has-new:hover { background: var(--accent); filter: brightness(1.1); }
form.compose { display: flex; gap: 8px; align-items: flex-end; margin-top: 6px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
form.compose:focus-within { border-color: var(--muted); }
.composer .hint { margin: 6px 4px; }
form.compose button { border-radius: 999px; }
.preview { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 10px 14px; margin: 0 0 8px; max-height: 40vh; overflow-y: auto; }
.preview .total { font-weight: 600; margin-bottom: 6px; }
.preview .line { display: flex; gap: 12px; justify-content: space-between; padding: 4px 0; border-top: 1px solid var(--line); font-size: 14px; }
.preview-alert .error { margin: 0 0 8px; }
form.compose textarea { flex: 1; font: inherit; padding: 6px 84px 6px 0; border: 0; outline: 0; background: none; color: var(--ink); resize: none; max-height: 200px; overflow-y: auto; }
.signin label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
h2 { font-size: 16px; font-weight: 600; margin: 28px 0 10px; }
#who select { font: inherit; font-size: 14px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; }
#who a { color: var(--muted); }
.badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--brass); color: var(--brass-ink); font-size: 12px; font-weight: 700; text-align: center; vertical-align: 2px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0; }
.tile { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 12px 14px; }
.tile .value { font-size: 22px; font-weight: 700; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--panel); border: 1px solid var(--line); font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: top; }
th { border-top: 0; color: var(--muted); font-weight: 600; white-space: nowrap; }
button.quiet { background: var(--panel); color: var(--ink); border-color: var(--line); font-weight: 400; padding: 6px 12px; }
.drop { border: 1px dashed var(--line); border-radius: 8px; padding: 14px; color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.drop.over { border-color: var(--accent); background: var(--panel); }
.tag { display: inline-block; margin-left: 8px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 12px; font-weight: 400; vertical-align: 2px; }
td select { font: inherit; font-size: 14px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; max-width: 100%; }
form.row select { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); max-width: 100%; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md .scroll { margin: 0 0 10px; }
.md h3, .md h4, .md h5, .md h6 { margin: 16px 0 6px; line-height: 1.3; }
.md h3 { font-size: 18px; } .md h4 { font-size: 16px; } .md h5, .md h6 { font-size: 15px; }
.md ul, .md ol { padding-left: 24px; }
.md li { margin: 2px 0; }
.md li > ul, .md li > ol { margin: 2px 0 0; }
.md code { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.md pre { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; overflow-x: auto; }
.md pre code { border: 0; padding: 0; background: none; white-space: pre; }
.md blockquote { border-left: 3px solid var(--line); padding-left: 12px; color: var(--muted); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.md .page-ref { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 0 6px; white-space: nowrap; }

/* SESH-000042: a hidden control stays hidden — button/.button set display:inline-block,
   which otherwise overrides the [hidden] attribute (the Stop button showed on every turn). */
[hidden] { display: none !important; }
/* Set aside (Dan, 2026-10-12): rose, the one colour nothing else uses, steady on a set-aside turn shown in the
   thread; nothing flashes (Dan, 2026-10-15). */
.turn.aside, .turn.choosing { border-left: 4px solid var(--rose); border-radius: 10px; padding: 12px 14px; }
.turn.choosing { background: var(--rose-wash); }
/* Set aside, again (Dan, 2026-10-15): no fill, the bar on the left, everything in the turn faded to show the whole of it is
   out, and a label at its top in the rose, not faded: "Set aside · not sent to the AI · <reason>", who and when, Restore. */
.turn.aside > :not(.aside-note):not(.restore-ask) { opacity: 0.45; }
.turn.aside > .aside-note { margin: 0 0 10px; color: var(--rose); font-weight: 600; }
/* A restored turn where it landed (Dan, 2026-10-15): pale rose with the bar in the margin, held, then one fade; nothing moves. */
.turn.restored { border-radius: 0 10px 10px 0; animation: restored 3s ease-out forwards; }
@keyframes restored { 0%, 66% { background-color: var(--rose-wash); box-shadow: -14px 0 0 var(--rose-wash), -18px 0 0 var(--rose); }
  100% { background-color: transparent; box-shadow: -14px 0 0 transparent, -18px 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .turn.restored { animation-timing-function: steps(1, end); } }
.turn.aside > .aside-note .aside-who { color: var(--muted); font-weight: 400; }
.preview .line.question.choosing { background: var(--rose-wash); border-radius: 6px; }
.reasons { display: flex; min-width: 200px; font-size: 14px; border-color: var(--rose); }
.reasons .head { padding: 4px 10px 6px; color: var(--rose); font-weight: 600; }
.reasons button.cancel { color: var(--muted); }
.reasons button.quiet:not(.cancel):hover, .reasons button.quiet:not(.cancel):focus-visible { background: var(--rose-wash); color: var(--rose); font-weight: 600; outline: none; }
.reasons hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.turn.ghost { pointer-events: none; }
.aside-gap { display: flex; align-items: center; gap: 12px; width: 100%; margin: -8px 0 20px; padding: 4px 0; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 400; cursor: pointer; }
.aside-gap::before, .aside-gap::after { content: ""; flex: 1; border-top: 1px dashed currentColor; opacity: 0.45; }
.aside-gap:hover, .aside-gap:focus-visible, .aside-gap.open { color: var(--rose); }
/* A change of owner among the turns (Dan, 2026-10-24, PC 2822-2824): a quiet line between rules, as a group chat's "X joined". */
.owner-line { display: flex; align-items: center; gap: 12px; margin: -8px 0 20px; color: var(--muted); font-size: 12px; }
.owner-line::before, .owner-line::after { content: ""; flex: 1; border-top: 1px solid currentColor; opacity: 0.3; }
.aside-gap.open { font-weight: 600; }
.aside-gap.open::before, .aside-gap.open::after { opacity: 1; }
.turn.asking .aside-note .restore-at { display: none; }
.restore-ask { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; color: var(--rose); font-weight: 600; }
input.switch { appearance: none; flex: none; position: relative; width: 30px; height: 18px; margin: 0; border-radius: 9px; background: var(--line); cursor: pointer; transition: background 0.15s; }
input.switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.15s; }
input.switch:checked { background: var(--rose); }
input.switch:checked::before { transform: translateX(12px); }
input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.preview .line.question { padding-left: 16px; overflow-wrap: anywhere; }
.preview .line.question .meta { white-space: nowrap; }
.filter { display: flex; gap: 16px; margin: 0 0 8px; }
form.setting { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
form.setting input[type=number] { flex: 0 1 120px; }
.tree { display: grid; gap: 10px; margin: 0 0 24px; }
.tree > button.quiet { justify-self: start; }
.folder { border-left: 3px solid var(--line); padding: 4px 0 4px 12px; display: grid; gap: 8px; }
.folder-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.folder-head button.plain, ul.list li > button.plain { font-size: 14px; margin-left: 8px; }
form.folder-name { margin: 0; }
/* The left column's name box (Dan, 2026-10-16): the name across the column, small Save and Cancel under it. */
form.row.tree-name { margin: 4px 6px 8px 22px; gap: 6px; justify-content: flex-end; }
form.row.tree-name input[type=text] { flex-basis: 100%; padding: 4px 10px; font-size: 14px; }
form.row.tree-name button { flex: none; padding: 4px 10px; font-size: 13px; }
.move-menu { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.folder.over { border-left-color: var(--accent); background: var(--panel); }
.tree.over { outline: 1px dashed var(--accent); outline-offset: 4px; }
.folder-head strong[draggable="true"] { cursor: grab; }
/* SESH-000028: the comment rail — beside the thread, set apart, never part of what is sent. */
/* The right column (Dan, 2026-10-15): full height at the window's right edge in the left column's colour, a thin line
   beside the thread, as Figma and VS Code frame their middle; the thread keeps its width, centred in what is left. */
main:has(.with-rail) { max-width: none; padding-right: 0; }
.with-rail { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w, 372px); gap: 0; align-items: start; }
.with-rail > .thread-main { width: 100%; max-width: 836px; justify-self: center; padding-right: 24px; }
.with-rail.rail-closed > .thread-main { max-width: 1132px; }   /* closed, the thread takes the room (patches 55, 57) */
.thread-main { min-width: 0; }
.thread-main:has(> .composer) { min-height: calc(100vh - 53px); display: flex; flex-direction: column; }
.thread-main > .composer { margin-top: auto; }
.rail { background: var(--side); border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 10px 14px 0; font-size: 14px; }
.rail .tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin: 0 0 6px; }
/* The tab strip stays under the page header while the thread scrolls (Dan, 2026-10-12), so the rail runs the thread's height. */
.with-rail > .rail { position: sticky; top: 0; z-index: 6; height: 100vh; margin-top: -53px; display: flex; flex-direction: column; }   /* from the very top, as the left column (Dan, 2026-10-15): the bar above the thread stops where it begins */
.rail .tabs { flex: none; background: var(--side); }
.rail .tabs button { display: inline-flex; align-items: center; gap: 5px; background: none; color: var(--ink); border: 0; border-bottom: 2px solid var(--accent); border-radius: 6px 6px 0 0; padding: 6px 3px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.rail .tabs button .count { padding: 0 4px; border-radius: 9px; background: var(--hover); color: var(--muted); font-size: 12px; font-weight: 600; line-height: 18px; }
.rail .tabs button .count:empty { display: none; }
.rail .tabs button.ico::before { margin-right: 0; }
.rail .tab-sep { width: 1px; margin: 5px 5px 7px; background: var(--muted); }   /* a line between the tabs you can see (Dan, 2026-10-15) */
.rail .tab-sep:has(+ [hidden]) { display: none; }   /* none beside the Files tab while the thread has no files */
.rail .tab-list { flex: 1; }   /* the tabs share the row up to the close arrow, each its whole share clickable (Dan, 2026-10-15) */
.rail .tab-list > [role=tab] { flex: 1; justify-content: center; }
.rail.tight .tabs [role=tab]:not([aria-selected=true]) .tab-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* names only where they fit (Dan, 2026-10-15); the open tab keeps its name (Dan, PC 2593-2597) */
.rail .marker { font-style: italic; margin: 0 0 8px; }
.rail form.setting input { flex: 1; font-size: 14px; }
.rail ul.comments { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.rail ul.comments li { border-top: 1px solid var(--line); padding-top: 6px; }
.rail .on-turns { display: grid; gap: 14px; }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; }
/* The thread scrolls in a box of its own across its whole column, its scrollbar just left of the right column, or of the
   closed column's strip (Dan, PC 2557-2559); the page stays put, so the scrollbar at the window's edge no longer seems to
   scroll the right column. The thread's text keeps its width and place, centred in the box. */
@media (min-width: 901px) {
  #page:has(.with-rail) { height: 100vh; display: flex; flex-direction: column; }
  main:has(.with-rail) { flex: 1; min-height: 0; padding-top: 0; }
  .with-rail { height: 100%; }
  .with-rail > .thread-main { height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; max-width: none; justify-self: stretch; padding: 8px calc(max(0px, (100% - 836px) / 2) + 24px) 0 max(10px, (100% - 836px) / 2); }   /* never 0 on the left: an answer's icons start a little left of its text (Dan, PC 2829) */
  .with-rail.rail-closed > .thread-main { max-width: none; padding-left: max(10px, (100% - 1132px) / 2); padding-right: calc(max(0px, (100% - 1132px) / 2) + 24px); }
  .with-rail > .thread-main .top-tools { position: fixed; }   /* its right end set to the title's (placeTools) */
  .with-rail > .thread-main .turn { scroll-margin-top: 65px; }   /* the bar above the box no longer covers it: lands where it did */
}
@media (max-width: 900px) { .with-rail { grid-template-columns: minmax(0, 1fr); } main:has(.with-rail) { padding-right: 24px; } .with-rail > .thread-main { max-width: none; padding-right: 0; }
  .with-rail > .rail { position: static; height: auto; margin: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); } .rail .aside-panel, .rail .comments-panel, .rail .toc-panel, .rail .files-panel { overflow: visible; } }
.rail .tabs button[aria-selected="false"] { border-bottom-color: transparent; color: var(--muted); font-weight: 400; }
.rail .tabs button[aria-selected="false"]:hover { background: var(--hover); color: var(--ink); }
.rail ul.aside-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 14px; }
/* The Set aside tab stays in view under the tab strip, so what was just set aside can be seen arriving. */
.rail .aside-panel, .rail .comments-panel, .rail .toc-panel, .rail .files-panel { flex: 1; min-height: 0; max-height: calc(100vh - 100px); overflow: auto; padding-bottom: 16px; }
/* The Reading pane (Dan, PC 2523, 2539-2541): its name with its icon and ×, what it is in a line, Show in thread and Pop
   out; the answer under them in the thread's own type. */
.rail .beside-panel:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.beside-head { padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
.beside-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.beside-title h2 { margin: 0; font-size: 15px; font-weight: 600; }
.beside-head .beside-close { font-size: 20px; line-height: 1; padding: 0 4px; }
.beside-head > .meta { margin: 4px 0 10px; font-size: 13px; line-height: 1.4; }
.beside-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rail .beside-empty { margin: 4px 0; font-size: 14px; line-height: 1.5; }
.rail .beside-empty .ico::before { margin: 0 2px; vertical-align: -3px; }
.rail .beside-body { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 12px 2px 16px 0; font-size: 16px; }
/* The Viewer (Dan, PC 3436-3448; SESH-001684): the file framed below its name and buttons, filling the column, which is at least half the
   page while it shows: a thread's right column, or on any other page a column of its own at the right edge. A narrow window gives it the
   whole page, ← Back in place of ×. */
:root { --i-view: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.i-view { --i: var(--i-view); }   /* the Viewer: an eye */
.viewer-panel:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.viewer-panel h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-frame { flex: 1; min-height: 0; width: 100%; margin: 10px 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.with-rail.viewing { grid-template-columns: minmax(0, 1fr) max(var(--rail-w, 372px), 50%); }
/* A PDF drawn by PDF.js (Dan, PC 3454-3458): its pages on a grey ground, one under another, a slim bar above them for the page and
   zoom; a page zoomed wider than the column scrolls sideways. */
.pdf-box:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 10px 0 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #525659; }
.pdf-bar { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--panel); border-bottom: 1px solid var(--line); }
.pdf-bar .pdf-at { margin-right: auto; font-size: 13px; }
.pdf-bar button { padding: 2px 10px; }
.pdf-pages { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: flex; flex-direction: column; align-items: safe center; gap: 12px; }
.pdf-page { position: relative; flex: none; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.pdf-page canvas { display: block; }
/* PDF.js's text layer, from its web/pdf_viewer.css (6.4.299), unnested: the page's words laid over it, unseen, to select and find. */
.textLayer { position: absolute; text-align: initial; inset: 0; overflow: clip; opacity: 1; line-height: 1; letter-spacing: normal; word-spacing: normal; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 0;
  --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; user-select: text; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.textLayer .markedContent { display: contents; }
.textLayer span[role="img"] { user-select: none; cursor: default; }
.textLayer ::selection { background: color-mix(in srgb, AccentColor, transparent 50%); color: transparent; }
.textLayer.selectionRendering ::selection { background: transparent; color: transparent; }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
.textLayer.selecting .endOfContent { top: 0; }
/* A workbook (Dan, Tracker chat 995-996; SESH-001684): its worksheets as tabs above a plain table, the column letters and row numbers
   in grey and kept in sight as it scrolls, numbers to the right as Excel has them. Every row one line of 24px, the height app.js
   counts on to draw only the rows in sight; a cell too long for its column ends in "…". Popped out, it fills a window of its own. */
.sheet-box:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 10px 0 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.sheet-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.sheet-window > .sheet-view { height: 100vh; background: var(--panel); }
.sheet-tabs { flex: none; display: flex; gap: 2px; overflow-x: auto; padding: 4px 8px 0; background: var(--side); border-bottom: 1px solid var(--line); }
.sheet-tabs button { flex: none; margin-bottom: -1px; padding: 4px 12px; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; background: none; color: var(--muted); font-size: 13px; white-space: nowrap; }
.sheet-tabs button[aria-selected="true"] { background: var(--panel); border-color: var(--line); color: var(--ink); font-weight: 600; }
.sheet-tabs button[aria-selected="false"]:hover { background: var(--hover); color: var(--ink); }
.sheet-grid { flex: 1; min-height: 0; overflow: auto; }
table.sheet { table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 19px; }
table.sheet :is(th, td) { box-sizing: border-box; height: 24px; padding: 2px 8px; border-top: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: pre; vertical-align: top; text-align: left; }
table.sheet td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.sheet tr.sheet-gap td { padding: 0; border: 0; }
table.sheet th { position: sticky; background: var(--side); color: var(--muted); font-weight: 400; text-align: center; }
table.sheet thead th { top: 0; z-index: 1; }
table.sheet tbody th { left: 0; }
table.sheet thead th:first-child { left: 0; z-index: 2; }
.sheet-said { margin: 10px 12px; }
#viewer:not([hidden]) { flex: 0 0 50%; min-width: 0; box-sizing: border-box; height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; padding: 8px 16px 0; background: var(--side); border-left: 1px solid var(--line); }
.viewer-back { display: none; }
@media (max-width: 900px) {
  .with-rail.viewing { grid-template-columns: minmax(0, 1fr); }
  #viewer:not([hidden]), .with-rail.viewing > .rail { position: fixed; inset: 0; z-index: 9; height: 100dvh; margin: 0; padding: 8px 12px 0; background: var(--side); }
  .viewer-panel .viewer-back { display: inline-block; flex: none; }
  .viewer-panel .beside-title { justify-content: flex-start; gap: 12px; }   /* ← Back, then the file's name */
  .viewer-panel .beside-close { display: none; }
}
.answer-alone { max-width: 760px; margin: 0 auto; }
.answer-alone > .beside-head { margin-bottom: 20px; }
/* A thread in its own window (Dan, 2026-10-22): no left column, a head above its name. */
body.thread-window #side, body.thread-window .side-toggle, body.thread-window .side-backdrop { display: none; }
.window-head { margin-bottom: 14px; }
.window-brand { display: none; }
body.thread-window header { display: flex; align-items: center; gap: 16px; }
body.thread-window .window-brand { display: inline; padding: 0; }
body.thread-window #crumbs { min-width: 0; }
.beside-title h2 .from { font-weight: 400; color: var(--muted); }
.rail .aside-panel > label, .rail .comments-panel > label { display: flex; gap: 8px; align-items: center; margin: 2px 0 8px; }
/* Contents (Dan, 2026-10-15), as on-screen contents are: one line per entry, no boxes; In order numbered "1." in the text's
   own colour; By topic an index, the topic in bold, its questions set in under it; pointing underlines; the one being
   read in the accent colour with a thin bar. */
.toc-dock { position: sticky; top: 0; z-index: 1; background: var(--side); }
@media (max-width: 900px) { .toc-dock { position: static; } }   /* under the thread on a narrow screen, the page scrolls as one */
.toc-views { display: flex; width: fit-content; margin: 2px 0 10px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.toc-views button { border: 0; border-radius: 6px; padding: 3px 12px; background: none; color: var(--muted); font: inherit; font-size: 13px; }
.toc-views button:hover { color: var(--ink); }
.toc-views button[aria-pressed="true"] { background: var(--selected); color: var(--ink); font-weight: 600; }
.toc-sum { margin: -4px 0 10px 2px; color: var(--muted); font-size: 12px; }
.toc-sum button.plain { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: none; cursor: pointer; }
.toc-sum button.plain[aria-pressed="true"] { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.toc-sum button.plain:hover { color: var(--ink); }
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-item { display: flex; gap: 8px; align-items: baseline; flex: 1; min-width: 0; padding: 4px 6px 4px 8px; border: 0; border-left: 2px solid transparent; border-radius: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; line-height: 1.45; text-align: left; cursor: pointer; }
.toc-n { flex: none; min-width: var(--toc-n, 2ch); font-variant-numeric: tabular-nums; }   /* flush left (Dan, 2026-10-15) */
.toc-ref { flex: none; margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; }   /* which turn, under a topic (Dan, 2026-10-16) */
.toc-q { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }   /* up to three lines (Dan, 2026-10-15) */
.toc-list > li:hover { background: var(--hover); }   /* the same grey band as every list (Dan, 2026-10-16) */
.toc-item[aria-current] { border-left-color: var(--accent); color: var(--accent); font-weight: 600; }
.toc-item.aside .toc-q { opacity: 0.55; }
.toc-q.unsummed { color: var(--muted); }   /* not summarised yet: its question, grey */
.toc-item.aside :is(.toc-n, .toc-ref) { color: var(--rose); }
/* A colleague's restore lights its line here, not the thread (Dan, 2026-10-15): pale rose with the rose bar, held, then one fade. */
.toc-item.rose { animation: toc-rose 3s ease-out forwards; }
@keyframes toc-rose { 0%, 66% { background-color: var(--rose-wash); border-left-color: var(--rose); } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .toc-item.rose { animation-timing-function: steps(1, end); } }
.toc-topic h3 { display: flex; gap: 8px; align-items: baseline; margin: 12px 0 2px; padding: 8px 6px 2px 10px; border-top: 1px solid color-mix(in srgb, var(--muted) 45%, transparent); color: var(--ink); font-size: 14px; font-weight: 700; }   /* a heading as Word's and Docs' are, its own capitals, bold (Dan, 2026-10-16); a line you can see on the column's grey */
.toc-topic h3 .toc-count { color: var(--muted); font-weight: 400; }
.toc-topic .toc-list .toc-item { padding-left: 22px; }   /* its turns set in under it */
.toc-topic:first-child h3 { margin-top: 2px; border-top: 0; padding-top: 2px; }
.toc-topic-name { flex: 1; min-width: 0; }
.toc-body > p.meta { margin: 10px 0 0; }
/* A line cut short opens with the folders' chevron at its end, the lines below moving down (Dan, 2026-10-15). */
.toc-list > li, .toc-topic h3 { display: flex; align-items: baseline; }
.toc-text { flex: 1; min-width: 0; }
.open .toc-q { display: block; white-space: pre-wrap; }
.toc-asked { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 400; white-space: pre-wrap; overflow-wrap: anywhere; }   /* under an opened summary, its question */
.toc-more { --i: var(--i-chevron); flex: none; align-self: flex-start; width: 22px; height: 22px; margin-top: 3px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); }
.toc-more::before { content: ""; display: block; width: 12px; height: 12px; margin: auto; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.toc-more.open::before { transform: rotate(90deg); }
.toc-more:hover, .toc-more:focus-visible { background: var(--hover); color: var(--ink); }
/* A turn gone to from Contents: the accent's wash and bar in the margin, held, then one fade, as a restored turn's. */
.turn.landed { border-radius: 0 10px 10px 0; animation: landed 2s ease-out forwards; }
@keyframes landed { 0%, 50% { background-color: color-mix(in srgb, var(--accent) 8%, var(--bg)); box-shadow: -14px 0 0 color-mix(in srgb, var(--accent) 8%, var(--bg)), -18px 0 0 var(--accent); }
  100% { background-color: transparent; box-shadow: -14px 0 0 transparent, -18px 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .turn.landed { animation-timing-function: steps(1, end); } }
.turn .saved a { color: var(--accent); }
.tree-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cited-view { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 6px 0; }
.cited-text { white-space: pre-wrap; max-height: 20em; overflow: auto; }
/* SESH-000081, like Claude's (Dan, 2026-10-12): while a question runs, three dots rise in turn beside what it
   is doing and the time; still for anyone who asks for less motion. The › opens the steps in a box. */
.turn .label { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; }
.turn .label .took { color: var(--muted); }
.turn .label .more { font-size: 18px; line-height: 1; padding: 0 4px; color: var(--muted); text-decoration: none; transition: transform 0.15s; }
.turn .label .more[aria-expanded="true"] { transform: rotate(90deg); }
.turn .dots { display: inline-flex; gap: 3px; }
.turn .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--brass); animation: dot-rise 1.2s ease-in-out infinite; }
.turn .dots i:nth-child(2) { animation-delay: 0.15s; }
.turn .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot-rise { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .turn .dots i { animation: none; } }
.turn .tools:not(:empty) { border: 1px solid var(--line); border-radius: 10px; padding: 2px 12px; font-style: normal; }
.turn .tools div { padding: 6px 0; }
.turn .tools div + div { border-top: 1px solid var(--line); }
.turn .tools div::before { content: none; }
/* Support: an internal note stands apart, so staff never mistake it for a public reply. */
.support-timeline li.internal { border-left: 3px solid var(--warn); padding-left: 8px; }
.support-body { white-space: pre-wrap; }
.support-form textarea, .support-form input[type=text] { width: 100%; }

/* Icons: drawn in the text colour from small inline shapes, so there is nothing to download. */
:root { --i-project: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1zM9 8V6a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E"); --i-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); --i-thread: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); --i-collection: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 3 9l9 5 9-5zM3 14l9 5 9-5'/%3E%3C/svg%3E"); --i-new: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); --i-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E"); --i-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15l5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E"); --i-collapse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20l5-5 5 5M7 4l5 5 5-5'/%3E%3C/svg%3E"); }
.ico::before, .twist::before, .send::before, .folder-head strong::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-project { --i: var(--i-project); } .i-folder, .folder-head strong { --i: var(--i-folder); } .i-thread { --i: var(--i-thread); } .i-collection { --i: var(--i-collection); } .i-new { --i: var(--i-new); } .i-expand { --i: var(--i-expand); } .i-collapse { --i: var(--i-collapse); }
#tree .twist { --i: var(--i-chevron); }
#tree .twist::before { width: 12px; height: 12px; margin: 0; vertical-align: -1px; }
#tree .twist.open::before { transform: rotate(90deg); }
#tree .new-thread { display: block; width: 100%; margin: 0 0 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); font-weight: 400; text-align: left; }
#tree .new-thread:hover { background: var(--hover); }
/* New thread stands out, first in the column (Dan, 2026-10-13), as Claude's "+ New": a white + in a filled navy circle. */
#tree .new-thread.i-new { font-weight: 600; }
#tree > .new-thread.i-new { margin-bottom: 12px; border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; padding-bottom: 10px; }   /* the actions' line, under New thread now Search is by Sesh's name */
#tree .new-thread.i-new::before { width: 22px; height: 22px; margin-right: 8px; vertical-align: -6px; border-radius: 50%; -webkit-mask: none; mask: none;
  background: linear-gradient(var(--button-ink), var(--button-ink)) center / 10px 2px no-repeat, linear-gradient(var(--button-ink), var(--button-ink)) center / 2px 10px no-repeat, var(--button); }
form.compose button.send { --i: var(--i-send); width: 36px; height: 36px; padding: 0; }
form.compose button.send::before { margin: 0; width: 18px; height: 18px; vertical-align: -4px; background: var(--button-ink); }
form.compose button.send:disabled { opacity: 0.4; cursor: default; }
/* Stop, while a question is answered (Dan, 2026-10-19): the same filled round button, a square in place of the arrow. */
form.compose button.send.stopping::before { width: 12px; height: 12px; vertical-align: -1px; border-radius: 2px; -webkit-mask: none; mask: none; }
/* The project page: three tabs, Threads | Files | Settings, as Slack's channel details and Linear's project settings. */
.project-main { min-width: 0; }
.project-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin: 0 0 16px; }
.project-tabs a { padding: 6px 2px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; }
.project-tabs a:hover { color: var(--ink); }
.project-tabs a[aria-current=page] { border-bottom-color: var(--ink); color: var(--ink); font-weight: 600; }
/* A project's threads as a table, as All files (Dan, 2026-10-13): the fixed columns keep to the right, so a folder's rows line up under the headings. */
ul.list li.thread-row, .thread-head { display: grid; grid-template-columns: minmax(0, 1fr) 150px 52px 92px 28px; align-items: center; gap: 2px 12px; }
ul.list li.thread-row, ul.list li.thread-row:has(> .row-dots) { padding: 9px 12px; }
ul.list li.thread-row > .row-dots { position: static; }
ul.list li.thread-row > .move-menu { grid-column: 1 / -1; }
li.thread-row .tname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One rule for lists (Dan, 2026-10-16), as Gmail, Notion and Drive have it: a row that opens one thing opens it from
   anywhere on it, with the same grey band on pointing; its buttons, menus and other links act on their own. */
li.row-open { cursor: pointer; }
li.row-open:hover { background: var(--hover); }
li.row-open .row-link { color: var(--ink); text-decoration: none; }
/* A row's name is not underlined under the pointer: the shaded row is what is clicked, as in Drive's and Gmail's lists (Dan,
   2026-10-19, PC 2352-2354); a separate link inside a row (a file's Where, a share word) still underlines. */
ul.list li.row-open a.row-link:hover, ul.list li.file-row a.fname:hover { text-decoration: none; }
li.thread-row .tname .tlast { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 13px; }   /* the latest question, small and grey (Dan, 2026-10-16) */
li.thread-row > .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.thread-head { padding: 4px 12px; }
.thread-head button.plain { justify-self: start; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.thread-head button.plain:hover { color: var(--ink); }
@media (max-width: 640px) { ul.list li.thread-row, .thread-head { grid-template-columns: minmax(0, 1fr) 28px; } li.thread-row > .meta, .thread-head > :not(:first-child):not(:last-child), li.thread-row > span:empty:not(:last-child) { display: none; } }
.title-actions .new-btn { padding: 6px 14px; border-radius: 999px; font-size: 14px; }
.title-actions .new-btn::before { background: var(--button-ink); margin-right: 4px; }
.title-actions .row-dots { width: 30px; height: 30px; font-size: 20px; }
form.row input[type=text] { padding: 8px 12px; border-radius: 10px; }   /* one text box shape, as Files, Search and Admin have (Dan, 2026-10-16) */
form.row button { border-radius: 999px; padding: 8px 18px; }
/* A row's actions wait until the row is pointed at or focused, as they do in the tools people know. */
@media (hover: hover) {
  ul.list li > button.plain, .folder-head button.plain { opacity: 0; }
  ul.list li:hover > button.plain, ul.list li:focus-within > button.plain, .folder-head:hover button.plain, .folder-head:focus-within button.plain { opacity: 1; }
}
.folder { border-left: 0; padding: 0; }
.folder .folder { margin-left: 24px; }
.folder-head strong { font-weight: 600; }
.project-settings textarea { display: block; width: 100%; margin: 4px 0 8px; font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
:root { --i-artifact: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6zM14 3v4h4M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.i-artifact { --i: var(--i-artifact); }
:root { --i-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M7 9l5-5 5 5M4 15v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E"); }
.i-upload { --i: var(--i-upload); }
/* Icons before menu items (Dan, 2026-10-26, PC 3143-3147): small and grey before the words, Delete's red with its word; an item
   without one keeps its words in line with the others'. Pick-one menus keep their ✓ and no icons. */
:root { --i-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5ZM15 5l4 4'/%3E%3C/svg%3E");
  --i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M4 15v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E"); }
.i-pencil { --i: var(--i-pencil); } .i-download { --i: var(--i-download); } .i-box { --i: var(--i-box); }
/* Folders (Dan, 2026-10-26, PC 3168-3173): the shared first, a thin line, then mine; a shared one has the people mark after its name. */
.share-mark { color: var(--muted); } .share-mark::before { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
:root { --i-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); }
.i-inbox { --i: var(--i-inbox); }   /* Private – unfiled: the pile waiting to be filed */
:root { --i-skill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9zM19 15l.8 1.9 1.9.8-1.9.8L19 20.4l-.8-1.9-1.9-.8 1.9-.8z'/%3E%3C/svg%3E"); }
.i-skill { --i: var(--i-skill); }   /* Skills: a spark, what the AI picks up when a question matches */
.skill-made .skill-acts > * { margin-left: 8px; }   /* a made skill's buttons, or what each did, apart from its name (SESH-001692) */
/* The Skills page (Dan, Tracker chat 935): one skill a row, its description and who and when under its name. */
ul.list.skills-page li.skill-row { display: block; padding: 10px 14px; }
ul.list.skills-page li.skill-row > p { margin: 2px 0 0 24px; }
ul.list.skills-page li.skill-row > .skill-about { color: var(--ink); }
/* An upload's name and description, asked before it is saved (Dan, PC 3413; SESH-001695). */
form.skill-draft { display: grid; gap: 8px; max-width: 640px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }
form.skill-draft > p { margin: 0; }
form.skill-draft label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
form.skill-draft textarea { font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); resize: vertical; }
form.skill-draft .row { display: flex; gap: 8px; }
#tree li.folder-sub { margin: 10px 8px 2px; font-size: 12px; color: var(--muted); }   /* Shared folders, Private folders: small headings inside Folders (Dan, 2026-10-26, PC 3297) */
[role=menu] button.quiet.ico::before { background: var(--muted); }
[role=menu] button.quiet.ico.danger::before { background: currentColor; }
[role=menu]:has(button.quiet.ico) button.quiet[role=menuitem]:not(.ico):not([aria-checked])::before { content: ""; display: inline-block; width: 16px; margin-right: 8px; }
/* The rest of the menus' icons (Dan, 2026-10-26, PC 3252-3253): the account menu, the question box's, removing, restoring. */
:root { --i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E"); --i-restore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); --i-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E"); --i-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E"); --i-palette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1.1 0 1.6-.9 1.1-1.8-.6-1.1.1-2.2 1.3-2.2H17a4 4 0 0 0 4-4c0-5.5-4-10-9-10z'/%3E%3Ccircle cx='7.5' cy='11' r='1'/%3E%3Ccircle cx='11' cy='7' r='1'/%3E%3Ccircle cx='15.5' cy='8.5' r='1'/%3E%3C/svg%3E"); --i-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 2.5-3 4M12 17h.01'/%3E%3C/svg%3E"); --i-signout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E"); --i-paperclip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.1l-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E"); }
.i-minus { --i: var(--i-minus); } .i-restore { --i: var(--i-restore); } .i-settings { --i: var(--i-settings); } .i-camera { --i: var(--i-camera); } .i-palette { --i: var(--i-palette); } .i-help { --i: var(--i-help); } .i-signout { --i: var(--i-signout); } .i-paperclip { --i: var(--i-paperclip); } [role=menu] .i-send { --i: var(--i-send); }
[role=menu] button.quiet.ico { margin-left: 0; }   /* .i-info's own margin is for the answer's bar */
:root { --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); }
.i-pin { --i: var(--i-pin); }
.i-ai::before { content: "AI"; content: "AI" / ""; overflow: hidden; -webkit-mask: none; mask: none; background: var(--button); color: var(--button-ink); border-radius: 3px; font: 700 8px/16px system-ui, sans-serif; text-align: center; }
#tree ul + .tree-head { margin-top: 20px; }   /* a little more space above each part (Dan, 2026-10-16) */
/* One light line between the actions (New thread, Search) and the places under them (Dan, 2026-10-16). */
.folder > ul.list { margin-left: 24px; }
.folder > .folder-empty { margin: 0 0 0 24px; font-size: 13px; }
.tree > .loose-head { margin: 8px 0 0; color: var(--muted); font-size: 13px; font-weight: 600; }
ul.list.requests > li.request-row { display: grid; gap: 4px; padding: 12px 14px; }
ul.list.requests > li.request-row > .row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
/* Who is in the thread: circles of their initials, a little overlapped, that stay at the top of the
   conversation while its history scrolls beneath (Dan, 2026-10-14). A circle changes colour and pulses
   while its person types, or while the AI answers. */
.people-row { display: flex; align-items: center; gap: 8px; }   /* by the title, then in the top bar (Dan, 2026-10-20) */
.people { display: flex; align-items: center; }
/* Someone else typing: a bubble just above the question box (Dan, 2026-10-23, PC 2689) */
p.typing { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; color: var(--muted); }
p.typing .avatar { width: 26px; height: 26px; font-size: 11px; box-shadow: 0 0 0 2px var(--bg); }
p.typing .avatar + .avatar { margin-left: -6px; }
p.typing .avatar:first-child { z-index: 1; }
p.typing .typing-words { color: var(--ink); }
p.typing .typing-dots { display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 16px 16px 16px 4px; background: var(--hover); }
p.typing .typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: dot-rise 1.2s ease-in-out infinite; }
p.typing .typing-dots i:nth-child(2) { animation-delay: 0.15s; }
p.typing .typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) { p.typing .typing-dots i { animation: none; } }
/* Who else has the thread open now: a line under its name, pinned at the top as the thread scrolls, each person and what they are doing
   (Dan, 2026-10-23/24, PC 2684, 2706) */
.here-now { position: sticky; top: -6px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0 0 14px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 100vmax var(--bg); clip-path: inset(-4px -100vmax -10px); }   /* a rounded box on a band of page colour, flush under the top bar: nothing shows around it; its pulsing dot says live (Dan, PC 2804, 2836-2846) */
#crumbs.under-title { visibility: hidden; }   /* a thread's name at the top, until its big name scrolls away (Dan, PC 2809) */
@media (max-width: 900px) { .here-now { top: calc(var(--bar-h, 60px) + 2px); } }   /* the page scrolls under the header there */
.here-who { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; transition: background-color 0.3s; }
.here-who .avatar { width: 26px; height: 26px; font-size: 11px; }
.here-who.joined { margin: -3px 0; padding: 3px 12px 3px 3px; border-radius: 999px; background: color-mix(in srgb, #22c55e 18%, var(--bg)); }
.here-who.left { color: var(--muted); font-weight: 400; }
.here-who.left .avatar { opacity: 0.5; }
/* A live visit (SESH-001678; Dan, 2026-10-24, PC 2762, 3059-3071): "(visiting)" as plain grey text after the name; End visit and
   + Invite together at the right as plain grey links on one line; the visitor's own tinted bar across the top, with Leave. */
.here-who .here-visiting { color: var(--muted); font-weight: 400; }
.here-now .here-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.here-now .here-acts > .here-link { padding-left: 10px; border-left: 1px solid var(--line); border-radius: 0; }   /* a thin line before each action, as a toolbar's (PC 3073-3074) */
.here-now .here-link { padding: 0 2px; font-size: 14px; font-weight: 500; line-height: 1.4; }
.here-now .here-link:hover { color: var(--ink); text-decoration: underline; }
.visit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, var(--panel)); font-size: 14px; }
.visit-bar > span { flex: 1 1 260px; }
/* What the person invited could not open (SESH-001678 V3; PC 2766-2767): a warning in the invite window, before anything is sent. */
.invite-live .visit-warn { margin: 10px 0 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--warn) 7%, var(--bg)); }
.invite-live .visit-warn p { margin: 0 0 6px; overflow-wrap: anywhere; }
.invite-live .visit-warn ul { margin: 0 0 8px; padding-left: 20px; overflow-wrap: anywhere; }
.invite-form .share-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.invite-live .visit-warn label.grant { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 6px; overflow-wrap: anywhere; cursor: pointer; }
.invite-live .visit-warn label.grant input { margin-top: 4px; }
.here-who .typing-dots { display: inline-flex; gap: 3px; padding: 7px 9px; border-radius: 12px 12px 12px 3px; background: var(--hover); }
.here-who .typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot-rise 1.2s ease-in-out infinite; }
.here-who .typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.here-who .typing-dots i:nth-child(3) { animation-delay: 0.3s; }
.live-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; animation: live-ring 1.6s ease-out infinite; }
.here-now.quiet .live-dot { background: var(--muted); animation: none; }
@keyframes live-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, #22c55e 60%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
/* Someone else is in this thread now: a green dot on the corner of its icon, taking no room (Dan, 2026-10-24, PC 2718, 2724) */
.thread-live { position: absolute; z-index: 2; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px var(--bg); }
#tree .thread-live { margin: 17px 0 0 21px; box-shadow: 0 0 0 2px var(--side); }
#view .tname > .thread-live { margin: 12px 0 0 10px; }
.live-faces { display: inline-flex; align-items: center; margin-right: 6px; vertical-align: -4px; }
.live-faces .avatar { width: 18px; height: 18px; font-size: 8px; box-shadow: 0 0 0 1.5px var(--bg); }
#tree .live-faces .avatar { box-shadow: 0 0 0 1.5px var(--side); }
.live-faces > * + * { margin-left: -4px; }
.live-faces > :first-child { z-index: 1; }
.live-more { display: inline-grid; place-items: center; height: 18px; min-width: 18px; padding: 0 4px; border-radius: 9px; background: var(--hover); color: var(--ink); font-size: 9px; font-weight: 600; position: relative; }
.live-more::before { content: attr(data-more); }
/* Live now: the left column's section and the lists' button (Dan, 2026-10-24, PC 2727) */
#tree .live-tree .tree-head a::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: #22c55e; vertical-align: 1px; }
/* An invitation to join a thread live, first under Live now (SESH-001678; Dan, 2026-10-24, PC 2762): who and which thread, Join and Decline. */
#tree .live-invites { list-style: none; margin: 2px 0 6px; padding: 0; }
#tree .live-invite { display: flex; flex-direction: column; gap: 6px; margin: 0 0 6px; padding: 8px 10px; border: 1px solid color-mix(in srgb, #22c55e 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, #22c55e 8%, var(--bg)); font-size: 14px; overflow-wrap: anywhere; }
#tree .live-invite .invite-acts { display: flex; gap: 8px; }
#tree .live-invite .invite-acts button { padding: 4px 12px; font-size: 13px; }
.live-btn { margin: 0 0 12px; padding: 4px 12px 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font-weight: 600; }
.live-btn::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #22c55e; vertical-align: 1px; }
.live-btn.on { border-color: #22c55e; background: color-mix(in srgb, #22c55e 14%, var(--bg)); }
@media (prefers-reduced-motion: reduce) { .live-dot, .here-who .typing-dots i, .composer .jumps > .to-bottom.has-new { animation: none; } }
/* The microphone sits in the ask box beside the arrow. It is not part of the form, so pressing Enter
   or the arrow never starts it; while it listens it is filled and pulses. */
:root { --i-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3zM5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E"); }
.composer .mic { --i: var(--i-mic); position: absolute; right: 52px; bottom: 50px; width: 36px; height: 36px; padding: 0; border-radius: 999px; background: none; border-color: transparent; color: var(--muted); }
.composer .mic::before { content: ""; display: inline-block; width: 18px; height: 18px; vertical-align: -4px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.composer .mic:hover { background: var(--hover); color: var(--ink); }
.composer .mic.on { background: var(--warn); color: #fff; animation: mic-ring 1.2s ease-out infinite; }
@keyframes mic-ring { 0% { box-shadow: 0 0 0 0 var(--warn); } 100% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .composer .mic.on { animation: none; } }
:root { --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM16 16l4.5 4.5'/%3E%3C/svg%3E"); }
.i-search { --i: var(--i-search); }
:root { --i-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 7.5V18l-4 2v-7.5z'/%3E%3C/svg%3E"); }
.i-filter { --i: var(--i-filter); }
#tree .tree-head .filter-btn { display: grid; place-items: center; margin-left: auto; width: 26px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
#tree .tree-head .filter-btn::before { margin: 0; width: 15px; height: 15px; }
#tree .tree-head .filter-btn.on { color: var(--accent); }
#tree .tree-head .filter-btn:hover, #tree .tree-head .filter-btn:focus-visible { background: var(--line); color: var(--ink); }
/* Threads (Dan, 2026-10-26, PC 3109-3118): thin grey lines around it; under its heading, the line saying how it is sorted and which
   are shown, each half a menu. */
#tree .tree-sep { margin: 12px 8px; border: 0; border-top: 1px solid color-mix(in srgb, var(--muted) 35%, transparent); }
#tree .sort-line { margin: -4px 0 4px; padding: 0 8px; font-size: 12px; color: var(--muted); }
:is(#tree, #view) .sort-line button.plain { font-size: inherit; }
#tree .sort-line + .sort-line { margin-top: -2px; margin-bottom: 12px; }   /* room between Sort and the list under it (PC 3328) */
#tree .tree-head + .sort-line { margin-top: 2px; }   /* a little room under the Threads heading (PC 3263) */
/* The same two lines on the Threads page, over its table (Dan, PC 3116-3117). */
#view .sort-line { margin: 0 0 2px; font-size: 13px; color: var(--muted); }
#view .sort-line:not(:has(+ .sort-line)) { margin-bottom: 12px; }
.tree-menu :is([role=menuitemradio], [role=menuitemcheckbox]) > .ico { color: var(--muted); }   /* Private's lock in the Show menu (PC 3277), Show archived's box (PC 3282) */
.tree-menu:has(:is([role=menuitemradio], [role=menuitemcheckbox]) > .ico) :is([role=menuitemradio], [role=menuitemcheckbox]):not(:has(> .ico)) { padding-left: 54px; }   /* the others' words in line with the marked ones' */
/* Its arrows big enough to see (Dan, 2026-10-26, PC 3130): a chevron drawn in the line's colour. */
:is(#tree, #view) .sort-line .caret { display: inline-block; width: 7px; height: 7px; margin: 0 4px 3px 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
:is(#tree, #view) .sort-line button.plain:hover, :is(#tree, #view) .sort-line button.plain:focus-visible { color: var(--ink); text-decoration: underline; }
#tree li.leaf:has(> .pin-left) { position: relative; }
#tree li.leaf > .pin-left { position: absolute; left: 3px; top: 10px; color: var(--muted); }   /* a pinned thread's pin, left of its own icon */
#tree li.leaf > .pin-left::before { width: 12px; height: 12px; margin: 0; vertical-align: top; }
.tree-menu .lined-up { padding-left: 30px; }   /* an item after ticked ones, its name in line with theirs */
/* The thread list's funnel, at the end of its headings (Dan, 2026-10-16). */
.thread-head > .filter-btn { justify-self: end; width: 26px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.thread-head > .filter-btn::before { margin: 0; width: 15px; height: 15px; }
.thread-head > .filter-btn.on { color: var(--accent); }
.thread-head > .filter-btn:hover, .thread-head > .filter-btn:focus-visible { background: var(--line); color: var(--ink); }
/* Expand all and Collapse all on the Projects heading. */
#tree .tree-head .head-icons { display: flex; gap: 2px; margin-left: auto; }
#tree .tree-head .head-icon { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
#tree .tree-head .head-icon::before { margin: 0; width: 15px; height: 15px; }
#tree .tree-head .head-icon:hover, #tree .tree-head .head-icon:focus-visible { background: var(--line); color: var(--ink); }
#tree a.new-thread { text-decoration: none; }
.turn { scroll-margin-top: 110px; }
form.compose.over { border: 1px dashed var(--ink); background: var(--hover); }
ul.list a.archived, #tree a.archived { text-decoration: line-through; }
.turn .source-rows:not(:empty) { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.rail ul.comments li.on-question { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; padding: 0; border-top: 0; font-size: 14px; }
.rail ul.comments li.on-question a { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); font-weight: 600; text-decoration: none; }
.rail ul.comments li.on-question .on-turn { flex: none; font-size: 12px; color: var(--muted); }
.rail ul.comments.card > li[data-comment] { padding-left: 16px; }
.rail ul.comments li.on-question a:hover { text-decoration: underline; }
.turn.commented .prompt { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A stopped question edited where it is (Dan, 2026-10-19), as Claude's is: a box in its place, Cancel and Ask under it. */
.turn form.prompt-edit { display: flex; flex-direction: column; gap: 8px; width: min(85%, 640px); margin: 0 0 22px auto; }
.turn form.prompt-edit textarea { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--accent); border-radius: 14px; background: var(--panel); color: var(--ink); font: inherit; resize: vertical; }
.turn form.prompt-edit .prompt-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* A stopped answer's box (Dan, 2026-10-19, PC 2345), as Claude's: ⓘ who stopped it and when, Edit prompt and Try again at its right. */
.turn .interrupted:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 8px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.turn .interrupted .stopped-i { color: var(--muted); font-size: 16px; }
.turn .interrupted .stopped-note { flex: 1; min-width: 0; color: var(--ink); font-size: 14px; }
.turn .interrupted .interrupted-actions { display: flex; gap: 8px; }
/* The column's entries are cards (Dan, 2026-10-12): one for the whole thread's comments, one per answer's, one per
   set-aside turn. White on the grey column with a soft shadow, a yellow stripe for comments and a rose one for set
   aside, as in the thread, no lines inside and more room between cards than within (Dan, 2026-10-13). Colour fills
   one only while something is happening to it: yellow for comments (pointed at, gone to, being answered or edited),
   pink for set aside (pointed at, opened in the thread, just set aside). */
.rail ul.comments.card, .rail ul.aside-list li:not(.meta) { border: 0; border-left: 4px solid var(--note); border-radius: 8px; padding: 8px 10px; background: var(--panel); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06); transition: background 0.15s, border-color 0.15s; }
.rail ul.aside-list li:not(.meta) { border-left-color: var(--rose); }
.rail ul.aside-list .aside-acts { display: flex; justify-content: flex-end; margin-top: 6px; }
.rail ul.aside-list .aside-acts button { padding: 3px 12px; font-size: 13px; }
.rail ul.comments.card { gap: 0; }
.rail ul.comments.card:empty { display: none; }
.rail ul.comments.card > li { padding: 6px 0; border-top: 0; }
.rail ul.comments.card > li:first-child { border-top: 0; padding-top: 0; }
.rail ul.comments.card:hover, .rail ul.comments.card:focus-within { background: var(--hover); }
.rail ul.comments.card.active, .rail ul.comments.card.lit { background: var(--note-wash); }
.rail ul.aside-list li:hover, .rail ul.aside-list li.shown { background: var(--rose-wash); border-color: var(--rose); }
/* Replies sit under their comment, set in (SESH-001596); a deleted comment keeps its place for them. */
.rail ul.replies { list-style: none; margin: 6px 0 0 16px; padding: 0; display: grid; gap: 6px; }
.rail ul.replies > li { border-top: 0; padding: 2px 0 2px 8px; border-left: 2px solid var(--line); }
.rail .comment-body.deleted { font-style: italic; color: var(--muted); }
.rail .comment-tools { display: none; }   /* no Reply or ⋮ in the column: a click on a card goes to the comment in the thread, where they are (Dan, 2026-10-15) */
.rail .comment-edit textarea { width: 100%; font: inherit; }
dialog.confirm { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--panel); color: var(--ink); }
dialog.confirm .row { display: flex; gap: 8px; justify-content: flex-end; }
/* What removes, deletes or shuts someone out is red wherever it is offered, and asks first (Dan, 2026-10-13). */
dialog.confirm { max-width: 420px; }
dialog.confirm p:first-child { margin-top: 0; font-weight: 600; }
button.danger { color: var(--warn); }
dialog.confirm button.danger { background: var(--warn); border-color: var(--warn); color: var(--panel); }
/* One ⋮ per row, at its right end, for what can be done to it (Dan, 2026-10-13); shown on pointing, as the left column's. */
.row-dots { width: 26px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.row-dots::before { content: "\22EE"; }
.row-dots:hover { background: var(--line); color: var(--ink); }
ul.list li:has(> .row-dots) { position: relative; padding-right: 44px; }
ul.list li > .row-dots { position: absolute; top: 10px; right: 10px; }
.folder-head > .row-dots, .comment-tools > .row-dots { margin-left: auto; align-self: center; }
@media (hover: hover) {
  ul.list li:not(:hover):not(:focus-within) > .row-dots, .folder-head:not(:hover):not(:focus-within) > .row-dots,
  ul.comments li:not(:hover):not(:focus-within) > .comment-tools > .row-dots { visibility: hidden; }
}
/* A thread's mark (Dan, 2026-10-11): a lock when shared with nobody, two heads when shared — filled if
   you own it, outline if it is shared with you. Its title says which. */
:root { --i-people-shared: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='16.5' cy='8.5' r='2.5'/%3E%3Cpath d='M3 20v-1a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v1M17 14h.5a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E");
  --i-people-own: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='16.5' cy='8.5' r='2.5'/%3E%3Cpath d='M3 20v-1a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v1zM17 14h.5a4 4 0 0 1 4 4v2h-4.5'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3Ccircle cx='12' cy='16' r='1'/%3E%3C/svg%3E"); }
/* A private folder (Dan, 2026-10-11 21:29): a folder with a lock in it, so it never looks like a project's. */
:root { --i-folder-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Crect x='8.5' y='12' width='7' height='5' rx='1' stroke-width='1.5'/%3E%3Cpath d='M10 12v-1.5a2 2 0 0 1 4 0V12' stroke-width='1.5'/%3E%3C/svg%3E"); }
.i-folder.locked, .folder-head strong.locked { --i: var(--i-folder-lock); }
/* A members-only folder at the top of the left column: the briefcase with the private folders' lock (Dan, 2026-10-18). */
:root { --i-project-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1zM9 8V6a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3Crect x='8.5' y='12.5' width='7' height='4.5' rx='1' stroke-width='1.5'/%3E%3Cpath d='M10 12.5v-1.25a2 2 0 0 1 4 0v1.25' stroke-width='1.5'/%3E%3C/svg%3E"); }
.i-project.locked { --i: var(--i-project-lock); }
:root { --i-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M9 7V4h6v3'/%3E%3Cpath d='M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12'/%3E%3C/svg%3E"); }
.i-trash { --i: var(--i-trash); }
/* Deleted threads (SESH-001637): the name, then Restore at the row's end, always shown. */
ul.list li.deleted-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; }
ul.list li.deleted-row > .meta, ul.list li.deleted-row > .error { grid-column: 1 / -1; }
.i-people-shared { --i: var(--i-people-shared); } .i-people-own { --i: var(--i-people-own); } .i-lock { --i: var(--i-lock); }
/* Dan, 2026-10-12: the + at the left inside the question box. */
.composer .add { --i: var(--i-new); flex: none; width: 36px; height: 36px; padding: 0; background: none; border-color: transparent; color: var(--muted); }
.composer .add::before { content: ""; display: inline-block; width: 18px; height: 18px; vertical-align: -4px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.composer .add:hover { background: var(--hover); color: var(--ink); }
/* An answer coming in fades in word by word; the newest question sits at the top with room below it, like Claude. */
@keyframes fade-in { from { opacity: 0; } }
.md .fade { animation: fade-in .6s ease-out both; }
@media (prefers-reduced-motion: reduce) { .md .fade { animation: none; } }
.thread-main .turn.asked:last-of-type { min-height: calc(100vh - 210px); }
/* Answers in a serif face; everything Sesh says about itself stays sans serif. */
.turn .answer .md { font-family: Georgia, 'Times New Roman', serif; }
#tree .show-more { margin: 2px 0; padding: 4px 8px; border-radius: 6px; font-size: 13px; }   /* lights up as the column's rows do */
#tree .show-more:hover { background: var(--hover); }
/* Below the question box (Dan, 2026-10-12, like Claude's): "AI can make mistakes." at the left, the thread's model
   and effort at the right; its owner opens the menu from there. 26px tall with its gap, which the mic above allows for. */
.composer .below-box { display: flex; justify-content: space-between; align-items: center; height: 20px; margin: 6px 12px 0; font-size: 12.5px; }
.composer .model-at { position: relative; }
.composer .model-btn { color: var(--muted); text-decoration: none; padding: 0 4px; }
.composer button.model-btn:hover { color: var(--ink); }
.composer .model-menu { bottom: calc(100% + 6px); right: 0; min-width: 240px; font-size: 14px; }
.composer .model-menu button { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding-left: 30px; }   /* a column for the ✓ */
.composer .model-menu button .meta { margin-left: auto; }
.composer .model-menu button .check { position: absolute; left: 11px; color: var(--accent); }
/* A turn's comments, read by pointing at its Comments link (Dan, 2026-10-12): the column's yellow notes, in a card. */
.comment-at { position: relative; }
.comment-peek { position: absolute; z-index: 6; top: calc(100% + 6px); left: 0; width: min(340px, 80vw); max-height: 300px; overflow: auto; display: grid; gap: 6px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); font-size: 14px; line-height: 1.45; text-align: left; }
.comment-peek.up { top: auto; bottom: calc(100% + 6px); }
.comment-peek::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.comment-peek.up::before { top: auto; bottom: -8px; }
.comment-peek .peek-note { border: 1px solid var(--line); border-left: 4px solid var(--note); border-radius: 8px; padding: 6px 8px; background: var(--panel); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-peek .meta { color: var(--muted); }
.comment-peek .peek-reply { margin: 6px 0 0 10px; padding-left: 8px; border-left: 2px solid var(--line); }
/* Where the comments are (Dan, 2026-10-12): a bubble with the count beside each answer that has some (2026-10-15); with
   "Show comments in the thread" on, its notes under it, and no card. Going to one from the column rings it in yellow. */
.turn.has-notes { position: relative; }
/* Comments (Dan, 2026-10-15): white cards with a warm-yellow edge, each headed by its writer's circle and name in their
   colour, and a heading saying what they are; yellow only marks things: the edge, an answer's comment button with
   the count, and the card or comment being pointed at or gone to, as Google Docs and Word do. */
:root { --note: #e3c04a; --note-wash: #fff6d1; }
@media (prefers-color-scheme: dark) { :root { --note: #c9a227; --note-wash: #3a3320; } }
/* An answer's comment button, when it has comments, is their marker (Dan, 2026-10-15): yellow with the count, lit when its card is pointed at. */
.turn-bar .comment-btn.has-notes { padding: 0 8px 0 6px; border-radius: 8px; background: var(--note-wash); box-shadow: inset 0 0 0 1px var(--note); color: var(--ink); font-size: 13px; font-weight: 600; }
.turn-bar .comment-btn.has-notes:hover, .turn-bar .comment-btn.has-notes:focus-visible, .turn.commented .comment-btn.has-notes { box-shadow: inset 0 0 0 2px var(--note); outline: none; }
.comment-by { display: flex; align-items: baseline; gap: 6px; }   /* the circle on the name line, whatever the font, when the time wraps too */
.comment-by { font-size: 12px; }   /* who and when, smaller than what they wrote (Dan, 2026-10-16) */
.comment-by .avatar { top: -2px; width: 18px; height: 18px; font-size: 8px; }
.comment-by .name { font-size: 13px; font-weight: 600; color: var(--who-fg); }
/* The heading folds the comments under it (Dan, 2026-10-15); a quiet line opens the box; a long comment shows four lines. */
.notes-inline .notes-head { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 400; text-align: left; cursor: pointer; }
/* The left tree's chevron (Dan, 2026-10-15), a little bigger: right when folded, turned down when open. */
.notes-inline .notes-head::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: currentColor; -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; transform: rotate(90deg); transition: transform 0.15s; }
.notes-inline.folded .notes-head::before { transform: none; }
.notes-inline .notes-head strong { color: var(--ink); }
.notes-inline .notes-head:hover strong { text-decoration: underline; }
.notes-inline.folded > :not(.notes-head) { display: none; }
.notes-inline .add-comment { justify-self: start; font-size: 13px; }
.turn:has(form.comment-new.open) .add-comment { display: none; }
.comment-body.long:not(.full) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
button.plain.more { font-size: 13px; }
.rail .comments-panel input.switch:checked { background: #c9a227; }
.notes-inline { display: none; }
/* An answer's comments are their own block, set in from the answer on a light tint of the comment yellow, so they never read
   as more of the AI's text (Dan, 2026-10-16), as Teams' replies and GitHub's line comments sit. */
.turn.notes-open .notes-inline:not(:empty) { display: grid; gap: 6px; max-width: 560px; margin: 10px 0 0 32px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--note) 14%, var(--panel)); font-size: 14px; line-height: 1.45; }
.turn.notes-open .notes-inline.folded { display: none; }   /* closed, nothing shows: the yellow Comment button with its count opens them (Dan, 2026-10-16) */
/* The column closes to a slim tab at the right edge (Michael, 2026-10-12) and drags wider or narrower by its left edge (Dan). */
.rail { position: relative; }
.rail-grip { position: absolute; top: 0; bottom: 0; left: -5px; width: 8px; border-radius: 4px; cursor: col-resize; z-index: 4; }
.rail-grip:hover, .rail-grip:focus-visible, .rail-grip.on { background: var(--line); outline: none; }
.rail .tab-list { display: flex; gap: 2px; }
.rail .tabs button.rail-close { margin-left: auto; padding: 2px 6px; border: 0; color: var(--muted); font-size: 16px; font-weight: 400; }
.rail .tabs button.rail-close:hover { color: var(--ink); }
/* Search in the column (Dan, PC 2551-2554): the magnifying glass at the right of each list's top row, pressed while its box is open under the tabs. */
.rail .panel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rail .tab-about { margin: 2px 0 8px; font-size: 13px; line-height: 1.4; }
.rail .comments-panel > .panel-top { align-items: center; margin-bottom: 6px; }
.rail button.rail-find-btn { flex: none; margin: 0 0 0 auto; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); }
.rail button.rail-find-btn::before { margin-right: 0; }
.rail button.rail-find-btn:hover, .rail button.rail-find-btn[aria-pressed=true] { color: var(--ink); background: var(--hover); }
.rail-find { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 0 4px; }
.rail-find .find-field { position: relative; display: flex; flex: 1; min-width: 0; color: var(--muted); }
.rail-find .find-field::before { position: absolute; left: 10px; top: 50%; margin: 0; transform: translateY(-50%); pointer-events: none; }
.rail-find input[type=search] { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 6px 10px 6px 32px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
.rail-find button.plain { font-size: 18px; line-height: 1; padding: 0 4px; }
.rail-find input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.rail-find > .meta { flex-basis: 100%; margin: 4px 0 0; }
::highlight(rail-find) { background-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.rail-strip { display: none; }
.with-rail.rail-closed { grid-template-columns: minmax(0, 1fr); padding-right: 48px; }
.with-rail.rail-closed > .rail { display: none; }
/* Closed, the column is a thin strip of icons with counts (Dan, 2026-10-13). */
.with-rail.rail-closed > .rail-strip { display: flex; flex-direction: column; gap: 4px; position: fixed; right: 0; top: 8px; z-index: 6; padding: 6px 4px; background: var(--panel); border: 1px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); cursor: pointer; }
.rail-strip button { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); }
.rail-strip button::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.rail-strip button:hover, .rail-strip button:focus-visible { background: var(--hover); color: var(--ink); }
.rail-strip .badge { position: absolute; top: 0; right: 0; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; font-size: 10px; font-weight: 600; line-height: 15px; }
.rail-strip .i-comment .badge { background: #f2d65c; color: #1a1a1a; }
.rail-strip .i-aside .badge { background: var(--rose); color: #fff; }
:root { --i-comment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H9l-4 3v-3H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zM7 9h10M7 13h6'/%3E%3C/svg%3E"); --i-aside: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18v4H3zM5 9v10h14V9M10 13h4'/%3E%3C/svg%3E"); }
.i-comment { --i: var(--i-comment); } .i-aside { --i: var(--i-aside); }
:root { --i-toc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='M4.5 6h.01M4.5 12h.01M4.5 18h.01' stroke-width='2.75'/%3E%3C/svg%3E"); }
.i-toc { --i: var(--i-toc); }
:root { --i-bookmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h11v17l-5.5-4-5.5 4z'/%3E%3C/svg%3E"); }
.i-bookmark { --i: var(--i-bookmark); }
/* A bookmarked turn's button, filled, as Chrome's star and X's bookmark are once set (Dan, 2026-10-24, PC 2856), not the comments' yellow. */
:root { --i-bookmark-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h11v17l-5.5-4-5.5 4z'/%3E%3C/svg%3E"); }
.turn-bar .i-bookmark.marked { --i: var(--i-bookmark-on); color: var(--accent); }   /* red, the accent, as the Contents tab it leads to (Dan, 2026-10-24, PC 2875) */
.turn form.bookmark-new { display: none; flex-wrap: wrap; gap: 8px; max-width: 560px; margin: 10px 0 0; }
.turn form.bookmark-new.open { display: flex; }
.turn form.bookmark-new input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
.turn form.bookmark-new .error:empty { display: none; }
.toc-item.toc-mark .avatar { align-self: flex-start; width: 20px; height: 20px; margin-top: 1px; font-size: 9px; }
/* A bookmark's × under its turn's number, for whoever may remove it (Dan, 2026-10-24, PC 2870); a line with one is two lines tall at least. */
.toc-list > li.toc-markrow { position: relative; }
.toc-markrow:has(.toc-del) .toc-mark { min-height: 50px; }
.toc-del { position: absolute; top: 25px; right: 3px; padding: 0 3px; border: 0; border-radius: 4px; background: none; color: var(--muted); font-size: 16px; line-height: 1.2; cursor: pointer; }
.toc-del:hover, .toc-del:focus-visible { background: var(--line); color: var(--ink); }
/* Shown from its turn's bookmark button: the accent bar and a pale wash, held, then one fade, as a restore's line is. */
.toc-list > li.lit { animation: toc-lit 3s ease-out forwards; }
@keyframes toc-lit { 0%, 66% { background-color: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 2px 0 0 var(--accent); } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .toc-list > li.lit { animation-timing-function: steps(1, end); } }
@media (max-width: 900px) { .rail-grip { display: none; } }
/* Comments in the thread, worked on where they are (Dan, 2026-10-12): yellow notes; a click selects one and shows
   its Reply, Edit, Delete; the box to add one is a yellow note under them. A card in the column is clickable anywhere. */
.notes-inline ul.note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.notes-inline ul.note-list > li { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); color: var(--ink); }
.notes-inline li[data-comment] { cursor: pointer; }
.notes-inline .meta, .notes-inline li button.plain { color: var(--muted); }
.notes-inline .comment-body.deleted { font-style: italic; }
.notes-inline ul.replies { list-style: none; margin: 6px 0 0 10px; padding: 0 0 0 8px; border-left: 2px solid var(--line); display: grid; gap: 6px; }
.notes-inline .comment-tools { display: none; gap: 10px; }
.notes-inline li.selected > .comment-tools { display: flex; }
.notes-inline li.selected, .notes-inline ul.note-list > li.selected { background: var(--note-wash); box-shadow: 0 0 0 2px var(--note); border-radius: 8px; }
.notes-inline .comment-edit textarea { width: 100%; font: inherit; }
.turn form.comment-new { display: none; gap: 8px; max-width: 560px; margin: 10px 0 0 32px; }
.turn form.comment-new.open { display: flex; }   /* only once asked for (Dan, 2026-10-15) */
.turn form.comment-new input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
.rail ul.comments.card, .rail ul.aside-list li { cursor: pointer; }
/* The box's "⋮", left of the microphone, and its menu at the right (Dan, 2026-10-13). */
.composer .more-btn { position: absolute; right: 92px; bottom: 50px; width: 36px; height: 36px; padding: 0; border-radius: 999px; background: none; border-color: transparent; color: var(--muted); font-size: 20px; line-height: 1; }
.composer .more-btn:hover { background: var(--hover); color: var(--ink); }
form.compose { position: relative; }
.compose .box-menu { display: flex; bottom: calc(100% + 6px); min-width: 230px; font-size: 14px; }
.compose .box-menu.add-menu { left: 0; }
.compose .box-menu.more-menu { right: 0; }
.compose .box-menu button { width: 100%; border-radius: 8px; text-align: left; }
/* Skills in the + menu (Dan, PC 3412-3426): beside its entry, above it on a phone, as the colour palette's submenu is. */
.compose .add-menu .submenu { position: relative; display: flex; flex-direction: column; }
.compose .add-menu .submenu > button { display: flex; align-items: center; }
.compose .add-menu .submenu > button::after { content: "\203A" / ""; margin-left: auto; padding-left: 12px; color: var(--muted); }
.compose .skills-menu { display: flex; left: 100%; bottom: -6px; min-width: 230px; max-height: 60vh; overflow-y: auto; font-size: 14px; }
.compose .skills-menu[hidden] { display: none; }
.compose .skills-menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.compose .skills-menu > p { margin: 4px 8px; }
.compose .skills-menu [role=menuitem] { padding-left: 6px; }   /* with the + menu's 24px spacer before a plain item, in line with the skills' names after their ✓ column */
@media (max-width: 560px) { .compose .add-menu .submenu { position: static; } .compose .skills-menu { left: 0; bottom: calc(100% + 4px); } }   /* above the whole + menu */
.preview .panel-head { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 6px; }
.preview .panel-head button.close { font-size: 20px; line-height: 1; text-decoration: none; color: var(--muted); padding: 0 4px; }
.preview .panel-head button.close:hover { color: var(--ink); }

/* Search, like Claude's (Dan, 2026-10-13): over the page from the left column, or as the #/search page. */
dialog.search-pop { width: min(760px, calc(100vw - 32px)); max-height: min(80vh, 760px); margin: 10vh auto auto; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); }
dialog.search-pop::backdrop { background: rgba(0, 0, 0, 0.25); }
.search-pop .search-in { position: relative; display: flex; flex-direction: column; max-height: min(80vh, 760px); padding: 14px 18px 10px; box-sizing: border-box; }
.search-pop .close { position: absolute; top: 12px; right: 14px; font-size: 22px; line-height: 1; text-decoration: none; color: var(--muted); }
.search { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.search-field { display: flex; align-items: center; color: var(--muted); }
.search-field::before { width: 18px; height: 18px; vertical-align: 0; flex: none; }
.search input[type=search] { flex: 1; min-width: 0; font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
.search-pop .search input[type=search] { font-size: 18px; padding: 6px 36px 6px 2px; border: 0; outline: none; background: none; }
.search input[type=search]::placeholder { color: var(--muted); opacity: 0.7; }
.search-bar { position: relative; display: flex; align-items: center; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.search-bar [role=tab], .kind-filter > a { padding: 4px 10px; border-radius: 8px; text-decoration: none; color: var(--muted); }
.search-bar [role=tab][aria-selected=true], .kind-filter > a[aria-current=page] { background: var(--hover); color: var(--ink); }
/* The Files page's kinds, as Search's filters (Dan, 2026-10-16). */
.kind-filter { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 12px; }
.kind-filter > a:hover { color: var(--ink); }
/* A collection's row on the Collections page: its icon where a file's badge sits. */
.collections-list .cbadge::before { margin: 0; width: 20px; height: 20px; }
.search-bar .where { margin-left: auto; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.search-bar .where-menu { display: flex; right: 0; top: 100%; max-height: 50vh; overflow-y: auto; font-size: 14px; }
.search-bar .show-archived { display: flex; align-items: center; gap: 4px; margin-left: 8px; white-space: nowrap; color: var(--muted); font-size: 14px; cursor: pointer; }
.search-bar .where[hidden] + .show-archived { margin-left: auto; }
.search-bar .show-archived input { margin: 0; accent-color: var(--accent); }
/* A chosen item in a pick-one menu (Dan, 2026-10-16), as macOS, Windows and Google Docs show it: a ✓ in a narrow column before the
   names, in the accent colour, no bold, every name lined up after it. The colour palette keeps its swatches there. */
.tree-menu [aria-checked]:not(.palette-menu *) { position: relative; padding-left: 30px; }   /* not the palette's swatches, in the account menu (sesh-testing, 2026-10-16) */
.tree-menu [aria-checked=true]:not(.palette-menu *)::before { content: "\2713" / ""; position: absolute; left: 11px; color: var(--accent); }
.where-menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.search-results { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; }
.search-results .result { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 8px 10px; border-radius: 10px; }
.search-results .result:hover, .search-results .result:focus-within { background: var(--hover); }
.search-results .result > a { flex: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--ink); text-decoration: none; }
.search-results .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-results .result .meta { margin-left: auto; padding-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; flex-shrink: 1000; }
.search-results .dots { width: 26px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; visibility: hidden; }
.search-results .dots::before { content: "\22EE"; }
.search-results .result:hover .dots, .search-results .result:focus-within .dots, .search-results .dots:focus-visible { visibility: visible; }
.search-results .dots:hover { background: var(--line); color: var(--ink); }
.search-results .snip { display: none; flex-basis: 100%; padding-left: 24px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.search-results .empty { padding: 16px 10px; }
.search-results .error { padding: 8px 10px; }
.search mark, .search-peek mark { background: none; color: inherit; font-weight: 700; }
.search-peek { position: fixed; z-index: 20; width: 300px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); font-size: 14px; pointer-events: none; }
.search-peek p { margin: 8px 0 0; overflow-wrap: anywhere; }
.result-menu { display: flex; min-width: 180px; font-size: 14px; }
.search > .quiet { align-self: center; }
.search input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
@media (max-width: 600px) { .search-results .result > a { flex-wrap: wrap; } .search-results .result .meta { flex-basis: 100%; margin-left: 24px; padding-left: 0; } }
@media (hover: none) { .search-results .snip { display: block; } .search-results .dots { visibility: visible; } }

/* The top of a thread (Dan, 2026-10-13): title, Share and ⋮ in one row; a box only for where else it shows. */
.thread-title { display: flex; align-items: flex-start; gap: 12px; }
.thread-title h1 { flex: 1; min-width: 0; }
.thread-title .title-name { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }   /* the bubble on the name's line of text */
.thread-title .title-name h1 { flex: 0 1 auto; }
.archived-pill { flex: none; padding: 2px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--hover); color: var(--ink); font-size: 14px; font-weight: 700; }
/* Phone and narrow screens (Dan, 2026-10-16): the title takes the width, its buttons go under it; a project's access table drops
   its Email column, as Admin › Members does; a page's wide tables scroll inside their own box and keep short columns on one line. */
@media (max-width: 640px) { .thread-title { flex-wrap: wrap; } .thread-title h1, .thread-title .title-name { flex-basis: 100%; } .access th:nth-child(2), .access td:nth-child(2) { display: none; } }
.admin-main .scroll td, main:has(.tiles) .scroll td { white-space: nowrap; }
.title-actions { position: relative; display: flex; align-items: center; gap: 4px; flex: none; margin-top: 2px; }
.share-btn { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font-size: 14px; font-weight: 400; }
.share-btn:hover { background: var(--hover); }
/* A thread's mark says only private or shared, the words on pointing; Share beside it opens the two kinds of access
   (Dan, 2026-10-24, PC 2977-2985, 3018-3020). */
.share-state { display: inline-grid; place-items: center; width: 22px; height: 30px; color: var(--muted); cursor: default; }
.share-state::before { margin-right: 0; }
.share-btn.share-small { padding: 2px 10px; font-size: 13px; }
.share-menu { display: flex; right: 0; top: calc(100% + 4px); width: 300px; font-size: 14px; }
.share-menu .share-choice { display: grid; gap: 2px; text-align: left; white-space: normal; }
.share-menu .share-choice .meta { font-size: 13px; }
.share-menu .share-choice + .share-choice { position: relative; margin-top: 9px; }   /* a thin line between the two kinds of access (Dan, PC 3036-3039) */
.share-menu .share-choice + .share-choice::before { content: ""; position: absolute; left: 8px; right: 8px; top: -5px; border-top: 1px solid var(--line); }

/* Once the title scrolls away, its people and share mark sit at the right of the top bar, smaller (Dan, 2026-10-20, PC 2439-2447). */
.top-bar { position: sticky; top: 0; z-index: 6; height: 0; }
.top-tools { position: absolute; top: 0; right: 0; height: 45px; display: flex; align-items: center; gap: 8px; padding-left: 12px; background: var(--bg); }
.top-tools[hidden] { display: none; }
@media (max-width: 900px) { .top-tools { height: 60px; } }
.share-mark { width: 22px; height: 28px; padding: 0; border: 0; background: none; color: var(--muted); display: inline-grid; place-items: center; cursor: default; }
.share-mark::before { margin-right: 0; }
.title-actions .dots { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.title-actions .dots::before { content: "\22EE"; }
.title-actions .dots:hover, .title-actions .dots[aria-expanded=true] { background: var(--hover); color: var(--ink); }
.thread-menu { display: flex; right: 0; top: calc(100% + 4px); min-width: 230px; font-size: 14px; }
.thread-menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.places { display: inline-block; align-self: flex-start; margin: 0 0 12px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 14px; }
/* Adding a thread to a folder (Dan, 2026-10-19): the picker's rows, a ▸ before each folder; its subfolders under it. A × by
   each folder's name shows on pointing, as a label's does. */
.folder-pick { min-width: 220px; max-height: 60vh; overflow-y: auto; }
.folder-pick .folder-pick-row > .row { flex-wrap: nowrap; gap: 0; }
.folder-pick .folder-pick-row > .row > button.quiet { flex: 1; }
.folder-pick .folder-subs { display: flex; flex-direction: column; gap: 2px; padding-left: 22px; }
.folder-pick .folder-subs[hidden] { display: none; }
.folder-pick p.meta { margin: 4px 8px; }
/* A folder's bubble opens it, the whole bubble, and lights up on pointing as Sesh's rows do; no underline (Dan, 2026-10-20, PC 2431). */
.places .place { display: inline-flex; align-items: center; margin: 2px 6px 2px 0; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.places .place a, .places .place a:hover { padding: 0 10px; color: var(--ink); text-decoration: none; }
.places .place.removable a { padding-right: 2px; }
.places .place:hover { background: var(--hover); }
/* The thread's grip, to drag onto a folder in the left column (Dan, 2026-10-20). */
.places .drag-chip { display: inline-block; margin-right: 6px; padding: 0 3px; border-radius: 4px; color: var(--muted); font-size: 1.15em; line-height: 1; cursor: grab; }
.places .drag-chip:hover { color: var(--ink); background: var(--line); }
.places .drag-chip:active { cursor: grabbing; }
.places .place-x { margin-left: 2px; padding: 0 6px; color: var(--muted); text-decoration: none; }
.places .place-x:hover { color: var(--ink); }
.places .place-add { margin-left: 2px; padding: 0 8px; border: 1px dashed var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; }
.places .place-add:hover { color: var(--ink); border-color: var(--muted); }
.shortcut-mark { margin-left: 4px; color: var(--muted); font-size: 12px; }
.pin-mark { color: var(--muted); } .pin-mark::before { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }

/* A document an answer saved (Dan, 2026-10-13): a card with its version as Word, PDF or Markdown. */
.turn .saved { display: grid; gap: 6px; margin: 8px 0; }
/* An AI document's card (Dan, 2026-10-15): the big "AI" page, the title and what it is, its formats as buttons, tinted with the accent. */
.doc-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, var(--panel)); font-size: 14px; }
.doc-card > .ftype.made { width: 30px; height: 38px; padding-bottom: 5px; font-size: 11px; }
.doc-card > .ftype::after { width: 10px; height: 10px; }
.doc-card .doc-what { display: grid; min-width: 0; }
.doc-card .doc-what strong { font-size: 15px; overflow-wrap: anywhere; }
.doc-card .doc-get { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; font-size: 0; }   /* the " · " between the formats goes */
.doc-card .doc-get > a, .doc-card .doc-get > button { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; }
.doc-card .doc-get > a:hover, .doc-card .doc-get > button:hover { background: var(--hover); }
.doc-card.ringed { box-shadow: 0 0 0 2px var(--accent); }
.attached > li.ringed { box-shadow: 0 0 0 2px var(--accent); border-radius: 8px; }
.doc-card.locked { border-left-color: var(--line); background: var(--panel); color: var(--muted); }
.doc-card.locked > .ftype { background: var(--line); color: var(--muted); }
.doc-card.locked .doc-what strong { color: var(--ink); font-weight: 600; }
.doc-card .doc-get > span { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) { .doc-card { grid-template-columns: auto minmax(0, 1fr); } .doc-card .doc-get { grid-column: 1 / -1; justify-content: flex-start; } }
.doc-card .doc-ask { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 14px; }
.doc-card .error:empty, .doc-card > span:last-child:empty, ul.list .error:empty { display: none; }
.doc-card .error, .doc-card > span:last-child { grid-column: 1 / -1; margin: 0; }
ul.list .doc-get { margin-left: 10px; font-size: 14px; }
ul.list .doc-get::before { content: "· "; color: var(--muted); }
ul.list li > .error { display: block; margin: 4px 0 0; }
.collect-menu { display: flex; max-width: 320px; max-height: 50vh; overflow-y: auto; font-size: 14px; }
.collect-menu .head { padding: 4px 10px 6px; color: var(--muted); font-size: 13px; }
/* Under an answer, an icon bar shown on pointing (Dan, 2026-10-13): Copy, Comment (with how many), Set aside, and ⓘ for usage and model. */
:root { --i-beside: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E"); --i-window: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); }
:root { --i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V6a2 2 0 0 1 2-2h8'/%3E%3C/svg%3E"); --i-comment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H10l-5 4v-4H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); --i-aside: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18v4H3zM5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8M12 11v6M9.5 14.5 12 17l2.5-2.5'/%3E%3C/svg%3E"); --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8v.01'/%3E%3C/svg%3E"); --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
.i-copy { --i: var(--i-copy); } .i-beside { --i: var(--i-beside); } .i-window { --i: var(--i-window); } .i-comment { --i: var(--i-comment); } .i-aside { --i: var(--i-aside); } .i-info { --i: var(--i-info); } .icon-btn.done { --i: var(--i-check); }
.turn-bar { display: flex; gap: 2px; align-items: center; margin: 4px 0 0 -6px; }
.icon-btn { display: inline-flex; align-items: center; gap: 3px; height: 28px; min-width: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 13px; font-weight: 400; cursor: pointer; }
.icon-btn.ico::before { margin-right: 0; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
/* The row under an answer (Dan, 2026-10-15): 20-pixel icons in 32-pixel buttons, a shade darker, as Gmail's and Word's toolbars. */
.turn-bar .icon-btn { height: 32px; min-width: 32px; color: color-mix(in srgb, var(--muted) 65%, var(--ink)); font-size: 14px; }
.turn-bar .icon-btn.ico::before { width: 20px; height: 20px; vertical-align: -4px; }
@media (hover: hover) {
  .turn:not(:hover):not(:focus-within):not(.choosing) .turn-bar > :is(.i-copy, .i-beside, .i-aside, .i-info:not([aria-pressed=true]), .i-bookmark:not(.marked)), .turn:not(:hover):not(:focus-within) .turn-bar .comment-btn:empty { visibility: hidden; }
}
/* Comment, Bookmark and Set aside first; Copy and Usage, for the reader alone, at the far right (Dan, 2026-10-16). An open item's
   button stays darker while it is open. */
.turn-bar > .i-copy { margin-left: auto; }
.turn-bar > .i-info { margin-left: 10px; }   /* Usage and model, about the answer rather than one more thing to do with it, set apart (Dan, PC 2563-2567) */
.turn:has(form.comment-new.open) .turn-bar .comment-btn, .turn:has(form.bookmark-new.open) .turn-bar .i-bookmark, .turn.choosing .turn-bar .i-aside,
.turn-bar .icon-btn[aria-pressed=true] { color: var(--ink); background: var(--line); }
/* The pages a turn read, as chips with each site's name in its line (Dan, 2026-10-13). */
.turn .label .sources:not(:empty) { margin-right: 4px; }
/* Sources under an answer (Dan, 2026-10-16): "Sources (N)" folds and opens a numbered list, its chevron as Comments' is. */
.sources-box { margin-top: 8px; font-size: 14px; }
/* The answer's pills (Dan, 2026-10-24, PC 712-726): outlined chips by default; the open one filled in the accent's tint. */
.answer-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.answer-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.answer-pill:hover, .answer-pill:focus-visible { border-color: var(--accent); }
.answer-pill.open { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); color: var(--accent); }
.answer-pill .pill-arrow { color: var(--muted); font-size: 11px; }
.answer-pill.open .pill-arrow { color: var(--accent); }
.answer-list { margin-top: 8px; }
.answer-list > h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.skills-list { display: grid; gap: 6px; margin: 0; padding-left: 22px; }
.skills-list a { color: var(--ink); }
.sources-list { display: grid; gap: 8px; margin: 0; padding-left: 22px; }
.sources-list q { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.sources-list a { color: var(--ink); }
/* [n] after a sentence a source supports (SESH-001636): small, the accent's colour, opening the list at that source. */
.md sup.cite-n { display: inline-flex; gap: 2px; margin-left: 2px; vertical-align: super; line-height: 1; }
.md sup.cite-n > button { min-width: 16px; padding: 1px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--accent); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.md sup.cite-n > button:hover, .md sup.cite-n > button:focus-visible { border-color: var(--accent); }
.sources-list > li.landed { animation: landed 1.6s ease-out; }
.thread-menu .head { padding: 6px 10px 2px; color: var(--muted); font-size: 13px; }
/* Share, as a window over the page (Dan, 2026-10-13), as Google Docs has it. */
dialog.share-dialog { width: min(560px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); }
dialog.share-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.share-body { padding: 20px 22px; }
.share-body h2 { margin: 0 0 14px; font-size: 18px; overflow-wrap: anywhere; }
.share-body h3 { margin: 16px 0 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
.share-body > .row { display: flex; justify-content: flex-end; margin-top: 16px; }
dialog.share-dialog ul.list li.share-row > .row-dots { visibility: visible; }   /* a few people in a window: each one's ⋮ in view */
.share-row > .avatar { width: 26px; height: 26px; margin-right: 8px; font-size: 11px; vertical-align: middle; }
/* One field for people and addresses (Dan, 2026-10-24, PC 2930-2935): the chips and the search in one box, what matches listed under it;
   the level beside it once someone is picked (in a Share window, Cancel and Share at its foot, PC 3500-3507); the list hangs under the whole row (PC 2998-3004). Shared by email (SESH-001677b): an invited address waits in grey, a
   declined one says so in the warning colour, with the admin's reason. */
.share-add { position: relative; }
.invite-live .share-add .share-field { flex-basis: 100%; }   /* a narrow window: the field its own row, the level and Invite under it */
dialog.invite-live { overflow: visible; }   /* its list may hang past the window's foot, as a menu does */
.share-add .share-field { flex: 1 1 220px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; padding: 4px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.share-add .share-field:focus-within { border-color: var(--accent); }
.share-add .share-field > input[type=text] { flex: 1 1 160px; padding: 4px 6px; border: 0; border-radius: 0; background: none; outline: none; }
.share-chips { display: contents; }
.share-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 3px 2px 10px; border-radius: 999px; background: var(--line); font-size: 14px; }
.share-chip > button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 15px; font-weight: 400; line-height: 1; cursor: pointer; }
.share-chip > button:hover { background: var(--panel); color: var(--ink); }
.share-found { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0; max-height: 240px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
.share-found > li { padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.share-found > li.active { background: var(--line); }
.share-found > li > .meta { margin-left: 8px; }
.share-body .share-add > select { margin-left: auto; }
.share-add > [hidden] { display: none; }
/* Adding people, as Drive's window (Dan, 2026-10-28, PC 3500-3507): the chosen names, one level for all, Cancel and Share at the foot;
   the people with access, General access and Done step aside until then. */
.share-body.adding > :not(h2, .share-add, .error, .add-foot) { display: none; }
.share-body:not(.adding) > .add-foot { display: none; }
.share-body > .add-foot { gap: 8px; }
.share-body.adding .share-found { position: static; flex: 1 0 100%; }   /* open for the next pick, it pushes Cancel and Share down rather than covering them */
/* A visit you invited has ended (Dan, 2026-10-24, PC 2949-2960): one line each at the top of the thread, until answered. */
.visit-ended { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 14px; }
.visit-ended > span { flex: 1 1 260px; }
.visit-ended > button.plain { color: var(--accent); font-weight: 600; }
.visit-ended > button.close-x { color: var(--muted); font-size: 20px; font-weight: 400; line-height: 1; }   /* × closes it, as notices do (PC 3149) */
.visit-ended > button.close-x:hover { color: var(--ink); }
.share-row.pending > strong { font-weight: 600; color: var(--muted); }
.share-row .meta.declined { color: var(--warn); }
ul.list li.share-row:has(> .share-clear) { position: relative; padding-right: 44px; }
.share-row > .share-clear { position: absolute; top: 10px; right: 10px; width: 26px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.share-row > .share-clear:hover, .share-row > .share-clear:focus-visible { background: var(--line); color: var(--ink); }
.photo-dialog .photo-preview { display: flex; justify-content: center; margin: 8px 0 12px; }
.photo-dialog .photo-preview .avatar { width: 88px; height: 88px; font-size: 32px; }
.share-body select { margin-left: 6px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: 14px; }
.share-body form.setting { margin: 0 0 4px; }
.thread-docs { display: grid; gap: 8px; }

/* All files (Dan, 2026-10-13): found by name, kept to a project or a kind. */
.files-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.files-bar > button { align-self: stretch; }   /* a button beside a box takes its height */
.files-bar select { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
ul.list.files.over { outline: 2px dashed var(--accent); outline-offset: 2px; }
.file-row.file-empty > .meta { grid-column: 2 / -1; }
/* A file's rename box (Dan, 2026-10-19): the name wide enough for a suggested "(2)", its type beside it, what the server said on a line of its own. */
form.file-rename { flex-wrap: wrap; align-items: center; padding: 6px 12px; }
form.file-rename input { flex: 1 1 280px; min-width: 0; }
form.file-rename > span.meta:last-child { flex-basis: 100%; }
form.file-rename > span.meta:last-child:empty { display: none; }
.files-bar input[type=search] { flex: 1 1 240px; min-width: 0; font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
/* A magnifier inside the left of every "Find by name" box, as the Search page has one (Dan, 2026-10-19). */
.files-bar .find-field { position: relative; display: flex; flex: 1 1 240px; min-width: 0; color: var(--muted); }
.files-bar .find-field::before { position: absolute; left: 12px; top: 50%; margin: 0; transform: translateY(-50%); pointer-events: none; }
.files-bar .find-field input[type=search] { flex: 1; padding-left: 36px; }

/* A file as one line (Dan, 2026-10-13), as Drive, OneDrive and iManage list them: its badge, the name, quiet
   columns (where, modified, pages) and a ⋮; on a phone the columns go under the name. */
main:has(ul.list.files) { max-width: 1400px; }   /* a file list uses the screen, as file apps do */
main:has(.project-main) { max-width: 1400px; }   /* a project's three tabs share one column, so its title and New stay put */
main:has(.tiles) { max-width: 1400px; }   /* Metrics' tables too (Dan, 2026-10-13) */
ul.list.files { container-type: inline-size; }
ul.list li.file-row { display: grid; grid-template-columns: 28px minmax(0, 1.6fr) 118px minmax(0, 1fr) 84px 72px 28px; align-items: center; gap: 2px 12px; padding: 8px 12px; }
/* A dragged Name width gives way when the window is narrower, so the other columns always stay in view. */
ul.list.files.sized li.file-row { grid-template-columns: 28px min(var(--name-w), 55%, calc(100% - 528px)) 118px minmax(120px, 1fr) 84px 72px 28px; }   /* 528px: the other fixed tracks and gaps, and 120px kept for Where */
/* A file list's Sharing column, after Type (Dan, 2026-10-16); the Collections page keeps its own columns. */
ul.list.shares li.file-row { grid-template-columns: 28px minmax(0, 1.6fr) var(--col-type-w, 118px) var(--col-share-w, 170px) var(--col-where-w, minmax(0, 1fr)) var(--col-modified-w, 84px) var(--col-size-w, 72px) 28px; }
ul.list.shares.sized li.file-row { grid-template-columns: 28px min(var(--name-w), 55%, calc(100% - 146px - var(--col-type-w, 118px) - var(--col-share-w, 170px) - var(--col-where-w, 120px) - var(--col-modified-w, 84px) - var(--col-size-w, 72px))) var(--col-type-w, 118px) var(--col-share-w, 170px) var(--col-where-w, minmax(120px, 1fr)) var(--col-modified-w, 84px) var(--col-size-w, 72px) 28px; }
.shares .file-row > .dots, .shares .file-row > .nodots { grid-column: 8; }
/* The Collections page: Name, Owner, Sharing, Files, each the reader's width once dragged. */
ul.list.collections-list li.file-row { grid-template-columns: 28px var(--list-name-w, minmax(0, 1.6fr)) var(--col-owner-w, 118px) var(--col-share-w, minmax(0, 1fr)) var(--col-files-w, 84px) 72px 28px; }
.share-cell, button.share-cell { color: inherit; font-size: 13px; text-decoration: none; }
/* Who it is shared with, in words (Dan, 2026-10-19): one line, cut with … when the column is narrower, whole on pointing. */
.share-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .fcols button.share-cell { display: block; max-width: 100%; text-align: left; }   /* a button sizes to its words, so it is held to its column */
/* Metrics' tables, once a column is sized: laid out by their headings' widths, a cell cut with … */
.scroll th { position: relative; }
.scroll th .col-grip { z-index: 1; right: -4px; }   /* above the next heading, which sits against it */
.scroll table.sized { table-layout: fixed; }
.scroll table.sized :is(th, td) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-cell::before { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
button.share-cell:hover { color: var(--accent); text-decoration: underline; }
.file-row .fname { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; color: var(--ink); text-decoration: none; }
.file-row .fname:hover { text-decoration: underline; }
.file-row .fcols { display: contents; color: var(--muted); font-size: 13px; }
.file-row .fcols > * { color: var(--muted); font-size: 13px; }
:is(.file-head, .thread-head) .name-head { position: relative; display: flex; }
.col-grip { position: absolute; top: -4px; bottom: -4px; right: -8px; width: 8px; border-radius: 4px; cursor: col-resize; touch-action: none; }
/* Its line, always there between headings, as Excel's, Google Sheets' and Finder's are (Dan, 2026-10-19, PC 2321): thin and light,
   in the accent colour and thicker under the pointer. */
.col-grip::after { content: ""; position: absolute; top: 25%; bottom: 25%; left: 50%; width: 1px; background: var(--muted); opacity: 0.35; transform: translateX(-50%); }
.col-grip:hover::after, .col-grip:active::after { top: 4px; bottom: 4px; width: 2px; background: var(--accent); opacity: 1; }
.file-row .fcols > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .fcols a { color: inherit; text-decoration: none; }
.file-row .fcols a:hover { color: var(--accent); text-decoration: underline; }
.file-row > .dots, .file-row > .nodots { grid-column: 7; }
.file-row.locked .fname { color: var(--muted); }   /* a file in a collection I can't open (Dan, 2026-10-16) */
.file-row.locked .ftype { filter: grayscale(1); opacity: 0.45; }
.file-row.locked .fname .ico::before { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.file-row.locked .fcols button.quiet { padding: 2px 10px; font-size: 13px; }   /* Request access (Dan, 2026-10-16) */
.file-row > .dots { width: 26px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.file-row > .dots::before { content: "\22EE"; }
.file-row > .dots:hover { background: var(--line); color: var(--ink); }
.file-row > :last-child:not(.nodots):not(.dots) { grid-column: 2 / -1; font-size: 13px; }
.file-row > :last-child:empty { display: none; }
.file-head .plain, .file-head .fcols > span { color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; text-align: left; }
ul.list li.file-head > button.plain { opacity: 1; }   /* a heading, not a row action waiting for hover */
.ftype { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; box-sizing: border-box; width: 20px; height: 25px; padding-bottom: 3px; border-radius: 2px; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); color: #fff; font-size: 7px; font-weight: 700; line-height: 1; letter-spacing: 0.02em; flex: none; }
/* A page with its corner folded, as Windows, Box and Dropbox draw a file (Dan, 2026-10-13): coloured by family, our own drawing. */
.ftype::after { content: ""; position: absolute; top: 0; right: 0; width: 7px; height: 7px; background: rgba(255, 255, 255, 0.5); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.ftype.word, .ftype.sheet, .ftype.slides { font-size: 11px; } .ftype.made { font-size: 8px; }
.ftype.made { background: var(--button); color: var(--button-ink); } .ftype.pdf { background: #c62828; } .ftype.word { background: #2b579a; } .ftype.sheet { background: #217346; } .ftype.slides { background: #c43e1c; } .ftype.image { background: #7b3fa0; } .ftype.audio { background: #00796b; font-size: 13px; } .ftype.video { background: #37474f; font-size: 11px; } .ftype.text, .ftype.other { background: #6e6a62; }
.search-results .ftype { align-self: center; }
.row-menu { display: flex; min-width: 200px; font-size: 14px; }
.answer-menu { display: flex; min-width: 180px; font-size: 14px; }   /* right-click on text chosen in an answer: stacked, as every menu (Dan, PC 2619-2623) */
.row-menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
/* By the list's own width, not the window's: with the left column open a list is narrow sooner. */
@container (max-width: 640px) {
  ul.list li.file-row, ul.list.files.sized li.file-row, ul.list.shares li.file-row, ul.list.shares.sized li.file-row, ul.list.collections-list li.file-row { grid-template-columns: 28px minmax(0, 1fr) 28px; }
  .file-row > .dots, .file-row > .nodots, .shares .file-row > .dots, .shares .file-row > .nodots { grid-column: 3; grid-row: 1; }
  .share-word { display: none; }
  .share-cell::before { margin-right: 0; }
  .file-row .fcols { grid-column: 2; grid-row: 2; display: flex; gap: 0; }
  .col-grip { display: none; }
  .file-row .fcols > :not(:empty) ~ :not(:empty)::before { content: "\00a0·\00a0"; }
  .file-row .fcols { display: block; }   /* one line of details that wraps, never each cut short (Dan, 2026-10-16) */
  .file-row .fcols > * { display: inline; white-space: normal; overflow: visible; }
  .file-head { display: flex !important; flex-wrap: wrap; gap: 4px 14px; }   /* only its filters (Dan, 2026-10-16) */
  .file-head > :not(.fcols), .file-head .fcols > :not(.col-head:has(.col-filter)) { display: none !important; }   /* every heading has a grip now, so a filter is what tells them apart */
  .file-head .fcols > .col-head:has(.col-filter) { display: inline-flex !important; }
}
/* My threads › Shared: each project's name over its threads (Dan, 2026-10-16). */
h2.group-head { margin: 20px 0 8px; font-size: 15px; }
h2.group-head a { color: var(--ink); text-decoration: none; }
h2.group-head a:hover { text-decoration: underline; }
/* Private threads and a project's threads as one table (Dan, 2026-10-16): folders are rows that open in place with ▸, as the left column's do,
   and what is inside a folder is set in under it. */
ul.list.nested-list li.thread-row { padding-left: calc(12px + var(--depth, 0) * 24px); }
/* A row with no ▸ is set in by the ▸'s width and gap, so its icon and name line up with the folders' beside it, as the left
   column's are (Dan, 2026-10-19). */
ul.list.nested-list li.thread-row:not(.folder-row):not(.thread-head) { padding-left: calc(12px + 22px + var(--depth, 0) * 24px); }
li.folder-row .tname { display: flex; align-items: center; }
:is(li.folder-row, h2.section-head, .folder-pick) .twist { flex: none; width: 18px; padding: 0; margin-right: 4px; border: 0; background: none; color: var(--muted); cursor: pointer; --i: var(--i-chevron); }
:is(li.folder-row, h2.section-head, .folder-pick) .twist::before { width: 12px; height: 12px; margin: 0; vertical-align: -1px; }
:is(li.folder-row, h2.section-head, .folder-pick) .twist.open::before { transform: rotate(90deg); }
li.folder-row .fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; cursor: pointer; }
:is(li.folder-row, h2.section-head) .count { flex: none; margin-left: 10px; color: var(--muted); font-size: 13px; }
ul.list li.thread-row.over { background: var(--panel); outline: 1px dashed var(--accent); }
li.thread-row.folder-empty { color: var(--muted); font-size: 14px; }
.tree-menu .menu-head { margin: 2px 8px 4px; color: var(--muted); font-size: 13px; }
/* The thread tables (Dan, 2026-10-16): every row is laid on its table's own columns. Name takes the spare width, as Drive's and
   Gmail's lists do, so the other columns and the ⋮ sit together at the right end with nothing empty between (Dan, 2026-10-26,
   PC 3188-3193; the spare went before the ⋮ before). A Name width set by its grip is its least.
   Private: Name, Project, Last activity. Shared: Name, Project, Owner, Sharing, Last activity. A project: Name, Owner,
   Sharing, Turns, Last activity. */
ul.list.private-list, ul.list.shared-list, ul.list.project-list, ul.list.deleted-list { display: grid; column-gap: 12px; }
ul.list.private-list { grid-template-columns: minmax(var(--list-name-w, 120px), 1fr) var(--col-folder-w, fit-content(160px)) var(--col-owner-w, fit-content(120px)) var(--col-share-w, fit-content(220px)) var(--col-turns-w, 52px) var(--col-when-w, 110px) 0px 28px; }   /* the same as Recent threads' (Dan, 2026-10-19) */
ul.list.shared-list { grid-template-columns: minmax(var(--list-name-w, 120px), 1fr) var(--col-folder-w, fit-content(160px)) var(--col-owner-w, fit-content(120px)) var(--col-share-w, fit-content(220px)) var(--col-turns-w, 52px) var(--col-when-w, 110px) 0px 28px; }   /* Name, Project, Owner, Sharing, Turns, Last activity */
ul.list.project-list { grid-template-columns: minmax(var(--list-name-w, 120px), 1fr) var(--col-folder-w, fit-content(160px)) var(--col-owner-w, fit-content(120px)) var(--col-share-w, fit-content(220px)) var(--col-turns-w, 52px) var(--col-when-w, 110px) 0px 28px; }   /* the same as Recent threads' (Dan, 2026-10-19): Name, Folder, Owner, Sharing, Turns, Last activity */
ul.list.deleted-list { grid-template-columns: minmax(var(--list-name-w, 120px), 1fr) var(--col-folder-w, fit-content(160px)) var(--col-deleted-w, 110px) var(--col-until-w, 110px) 0px auto; }   /* Deleted: Name, Project, Deleted, Restore until, Restore */
ul.list.deleted-list.deleted-folders { grid-template-columns: minmax(var(--list-name-w, 120px), 1fr) var(--col-deleted-w, 110px) var(--col-until-w, 110px) 0px auto; }   /* Deleted folders: Name, Deleted, Restore until, Restore */
ul.list.deleted-list.deleted-collections { grid-template-columns: minmax(var(--list-name-w, 120px), 1fr) var(--col-deleted-w, 110px) 0px auto; }   /* Deleted collections: Name, Deleted, Restore */
:is(ul.list.private-list, ul.list.shared-list, ul.list.project-list, ul.list.deleted-list) > li { grid-column: 1 / -1; grid-template-columns: subgrid; }
:is(ul.list.private-list, ul.list.shared-list, ul.list.project-list) > :not(li) { grid-column: 1 / -1; margin: 6px 12px; }   /* a name box */
/* The headings are the table's first row, as the Files page's are. */
ul.list li.thread-head { padding-top: 8px; padding-bottom: 8px; }
ul.list li.thread-head > button.plain, ul.list li.thread-head > :is(.col-head, .name-head) > button.plain { opacity: 1; margin-left: 0; font-size: 13px; white-space: nowrap; }
@media (max-width: 640px) { ul.list.private-list, ul.list.shared-list, ul.list.project-list { grid-template-columns: minmax(0, 1fr) 28px; } ul.list.deleted-list, ul.list.deleted-list.deleted-folders, ul.list.deleted-list.deleted-collections { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 640px) { .thread-head .col-grip { display: none; } }   /* the columns fold away on a phone, so there is no width to set */
ul.list.deleted-list li.deleted-row { padding: 9px 12px; }
ul.list.deleted-list li.deleted-row > .tname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.list.deleted-list li.deleted-row > .meta { grid-column: auto; }
/* The folders' table, then a gap and "Not in a folder" with its own table (Dan, 2026-10-16): both tables on one set of
   columns, so they line up. */
.table-stack { display: grid; column-gap: 12px; }
.table-stack.private-cols { grid-template-columns: minmax(var(--list-name-w, 120px), 1fr) fit-content(180px) 110px 0px 28px; }
.table-stack.project-cols { grid-template-columns: minmax(var(--list-name-w, 120px), 1fr) var(--col-folder-w, fit-content(160px)) var(--col-owner-w, fit-content(120px)) var(--col-share-w, fit-content(220px)) var(--col-turns-w, 52px) var(--col-when-w, 110px) 0px 28px; }
.table-stack.projects-cols { grid-template-columns: minmax(var(--list-name-w, 120px), 1fr) var(--col-owner-w, fit-content(120px)) var(--col-share-w, fit-content(220px)) var(--col-threads-w, 70px) var(--col-when-w, 110px) 0px 28px; }
.table-stack > * { grid-column: 1 / -1; }
.table-stack > ul.list.private-list, .table-stack > ul.list.project-list, .table-stack > ul.list.projects-list { grid-template-columns: subgrid; }
.table-stack > ul.list.over { outline: 1px dashed var(--accent); outline-offset: 2px; }
h2.section-head { margin: 36px 0 10px; }   /* Folders and Not in a folder (Dan, 2026-10-16), well apart */
.table-stack > h2.section-head:first-child { margin-top: 4px; }
h2.section-head > span { cursor: pointer; }
@media (max-width: 640px) { .table-stack.private-cols, .table-stack.project-cols, .table-stack.projects-cols { grid-template-columns: minmax(0, 1fr) 28px; } }
/* Filters on the columns (Dan, 2026-10-16): the heading that sorts, and beside it its funnel. */
:is(.thread-head, .file-head, .member-head) .col-head { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; }   /* relative: its grip */
/* A column narrowed by its reader cuts what doesn't fit with …, its heading's words too. */
:is(.thread-head, .file-head, .member-head) .col-head > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A file's and a member's columns clip what overflows; their headings may not, or the grip past the right edge is cut away. */
ul.list li.file-head .fcols > .col-head, ul.list li.member-head > .col-head { overflow: visible; }
:is(ul.list.private-list, ul.list.shared-list, ul.list.project-list, ul.list.projects-list, ul.list.deleted-list) > li > .meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.thread-head, .file-head) .col-filter { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
:is(.thread-head, .file-head) .col-filter::before { margin: 0; width: 13px; height: 13px; }
:is(.thread-head, .file-head) .col-filter.on { color: var(--accent); }
:is(.thread-head, .file-head) .col-filter:hover, :is(.thread-head, .file-head) .col-filter:focus-visible { background: var(--line); color: var(--ink); }
ul.list li.empty-row { color: var(--muted); font-size: 14px; }
/* On a phone the columns fold away, so the heading row keeps only the filters, in a line that wraps. */
@media (max-width: 640px) { ul.list li.thread-head { display: flex; flex-wrap: wrap; gap: 4px 14px; } ul.list li.thread-head > .col-head { display: flex; } }
a.has-new, ul.list a.has-new, [role=treeitem].has-new { font-weight: 700; }   /* a thread with something new is bold, as unread is in Slack and Gmail (Dan, 2026-10-16) */
.drag-tag { position: fixed; z-index: 1000; top: -200px; left: 0; max-width: 260px; padding: 6px 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-size: 14px; white-space: nowrap; text-overflow: ellipsis; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }   /* what follows a dragged row (Dan, 2026-10-16) */
/* The Folders page as a table (Dan, 2026-10-16). */
ul.list.projects-list { display: grid; column-gap: 12px; grid-template-columns: minmax(120px, var(--list-name-w, max-content)) var(--col-owner-w, fit-content(120px)) var(--col-share-w, fit-content(220px)) var(--col-threads-w, 70px) var(--col-when-w, 110px) minmax(0, 1fr) 28px; }   /* Name, Owner, Sharing, Threads, Last activity (Dan, 2026-10-19) */
ul.list.projects-list > li { grid-column: 1 / -1; grid-template-columns: subgrid; }
ul.list.projects-list > :not(li) { grid-column: 1 / -1; margin: 6px 12px; }
@media (max-width: 640px) { ul.list.projects-list { grid-template-columns: minmax(0, 1fr) 28px; } }

/* The Undo notice (Dan, 2026-10-19): a compact dark box at the bottom left of the window, above everything. */
.undo-notice { position: fixed; left: 16px; bottom: 16px; z-index: 1000; display: flex; align-items: center; gap: 14px; max-width: min(560px, calc(100vw - 32px));
  padding: 10px 12px 10px 16px; border-radius: 10px; background: #2b2523; color: #fff; font-size: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); }
.undo-notice .undo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo-notice button.plain { color: #fff; font-weight: 600; text-decoration: none; }
.undo-notice button.undo-btn { color: #f3c4cb; }
.undo-notice button.undo-btn:hover { text-decoration: underline; }
.undo-notice button.undo-x { font-size: 18px; line-height: 1; opacity: 0.8; }
.undo-notice button.undo-x:hover { opacity: 1; }
/* A thread's General access in its Share window, as Drive's (Dan, 2026-10-20, SESH-001664): the mark, what it is, and at what. */
.general-access { display: flex; align-items: center; gap: 12px; padding: 6px 0 10px; }
.general-access .ga-mark { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--hover); display: grid; place-items: center; }
.general-access .ga-mark::before { margin: 0; }
.general-access .ga-what { flex: 1; min-width: 0; display: grid; gap: 2px; }
.general-access .ga-what select { justify-self: start; margin-left: -6px; padding: 2px 4px 2px 2px; border: 0; border-radius: 6px; background: none; color: var(--ink); font-weight: 600; }
.general-access .ga-what select:hover:not(:disabled) { background: var(--hover); }
.general-access select:disabled { appearance: none; margin-left: 0; padding: 2px 0; border: 0; background: none; color: var(--ink); opacity: 1; }   /* read only: words, not a list */