inside a grid container becomes a grid ITEM and the whole group would collapse into one column. Headings are Company → Skills' (.skl-group-h), deliberately — the same shape wherever a skill list is grouped. This page no longer groups (the tabs do it); Heartbeat and Company → Skills still do. */ .mk-groups { display: block; } .mk-groups > .skl-group:first-child { margin-top: 0; } .mk-empty { color: var(--text-faint); font-size: 13px; padding: 26px 4px; grid-column: 1 / -1; } /* ---- chat queue: messages typed while the AI was still working ------------- These sit above the composer, NOT in the transcript, because nothing here has been said yet — each row is still editable and still cancellable. All colour comes from the token block at the top, so both themes follow automatically. */ .queue-list { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 5%, transparent); } .queue-head { font-size: 12px; color: var(--text-dim); margin-bottom: 2px; } .queue-note { opacity: .75; margin-left: 4px; } /* Shown only while ↑ is walking back through what you've already asked, so the keys that got you here are named on screen rather than being folklore. */ .recall-hint { font-size: 12px; color: var(--text-dim); margin: 0 0 6px; padding: 2px 4px; } .recall-hint kbd { font: inherit; padding: 0 4px; border-radius: 3px; border: 1px solid var(--border); background: var(--accent-soft); } .queue-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); padding: 4px 6px; border-radius: var(--radius-sm); } .queue-item:hover { background: var(--accent-soft); } .queue-n { flex: none; min-width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 11px; border-radius: 50%; background: var(--accent-soft); color: var(--text-dim); } /* The message can be any length; it must never widen the composer. */ .queue-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .queue-att { flex: none; font-size: 11px; color: var(--text-dim); } .queue-actions { flex: none; display: flex; gap: 2px; } .queue-btn { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 12px; line-height: 1; padding: 3px 5px; border-radius: 4px; } .queue-btn:hover:not(:disabled) { background: var(--border); color: var(--text); } .queue-btn:disabled { opacity: .3; cursor: default; } .queue-x:hover { color: var(--warn); } /* Send doubles as "queue" while a turn runs — same button, different promise. */ .btn-send.queueing { opacity: .85; } .btn-send.queueing::after { content: "+"; font-size: 11px; vertical-align: super; margin-left: 1px; } /* =================================================================== THE RAIL STANDARD (2026-08) ------------------------------------------------------------------- Group Chat, Company and the Inbox each replace the app sidebar with a left rail of their own, and each had grown its own idea of what a rail is: 280px vs 264, a padded scrolling container vs a fixed head over a scrolling list, flat nav rows vs bordered cards, three different active states. Walking between the three views, the furniture moved. One definition, applied to all three by grouping the selectors they already use — no class in app.js changes. The reference is the app sidebar itself (`.side-item`), because that is what these rails stand in for: same 264px, same row metrics, same accent-soft active state. Appended last, so it wins over the per-view rules above. =================================================================== */ /* 1 · Width. One number, from the grid parent that owns each rail. */ .gc-hub { grid-template-columns: var(--rail-w) minmax(0, 1fr) 460px; } @media (max-width: 1040px) { .gc-hub { grid-template-columns: var(--rail-w) minmax(0, 1fr); } } /* 2 · The container. The HEAD stays put and the LIST scrolls — a rail whose whole body scrolls takes its own title away when you go looking down it. */ .gc-rail, .cn-rail, .ibx-rail, .tsk-rail, .phot-rail, .mm-rail { border-right: 1px solid var(--border); background: var(--bg-2); display: flex; flex-direction: column; min-height: 0; padding: 0; gap: 0; } /* Company's body is one long scroller (nav + admin + companies + actions), so it keeps scrolling — but its children now carry the inset the container used to. */ .cn-rail { overflow-y: auto; padding-bottom: 10px; } .cn-rail > * { padding-inline: 12px; } /* …and the two pinned pieces stop compensating for a padding that is gone. */ .cn-rail .rail-chrome-top, .cn-rail .rail-foot.account-row { margin: 0; } /* 3 · The head: one line, one weight, one border. */ .gc-rail-head, .ibx-rail-head, .tsk-rail-head, .cn-rail-nav-head, .phot-rail-head, .mm-rail-head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 10px; margin: 0; border-bottom: 1px solid var(--border); } .gc-rail-title, .ibx-rail-title, .tsk-rail-title, .cn-rail-nav-title, .phot-rail-title, .mm-rail-title { font-weight: 700; font-size: 15px; color: var(--text); flex: 1; min-width: 0; } /* Company's identity block sits UNDER that head as content, not as a second head. */ .cn-rail-head { padding-top: 12px; padding-bottom: 4px; gap: 10px; } /* 4 · The list. */ .gc-rail-list, .ibx-rail-list, .tsk-rail-list, .cn-nav, .cn-nav-admin, .cn-rail-list, .phot-rail-list, .mm-rail-list { display: flex; flex-direction: column; gap: 1px; /* `.side-nav`'s */ } /* Company is the only rail that stacks BLOCKS (identity, nav, admin, switcher, actions) rather than one list, so it carries the sidebar's 10px between them. */ .cn-rail { gap: 10px; } /* An empty count is not a count. Without this the badge draws as a grey dot next to a row that simply has nothing to report. */ .cn-nav-badge:empty, .ibx-fold-n:empty, .nav-badge:empty { display: none; } .gc-rail-list, .ibx-rail-list, .tsk-rail-list, .phot-rail-list, .mm-rail-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; } /* 5 · The row — the app sidebar's `.side-item`, to the pixel. Flat, not a card: a bordered box per chat made the Group Chat rail read as a list of objects to manage rather than places to go. The numbers are not arbitrary; they are `.side-item`'s, so a nav row is the same object wherever you meet it. gap 12 · padding 7/10 · radius 8 · 13.5px/500 · text-dim */ .gc-item, .cn-nav-item, .cn-rail-item, .ibx-fold, .split-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; padding: 7px 10px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-dim); } /* The icon box, also the sidebar's: a 20×18 slot so labels line up whether or not the row's glyph is a wide one, dimmed until the row is yours. */ .cn-nav-ico, .ibx-fold-ico { width: 20px; height: 18px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; opacity: .82; } .cn-nav-ico svg, .ibx-fold-ico svg, .ibx-ico { width: 17px; height: 17px; display: block; } .gc-item:hover .cn-nav-ico, .cn-nav-item:hover .cn-nav-ico, .ibx-fold:hover .ibx-fold-ico, .cn-nav-item.active .cn-nav-ico, .ibx-fold.on .ibx-fold-ico { opacity: 1; } /* A nested row hangs under its parent's LABEL, not under its icon: 10 (row) + 20 (icon slot) + 12 (gap) = 42. Guessed indents are what made these lists look ragged. */ .cn-nav-team { padding-left: 42px; } /* A section label: the sidebar's, 10px and wide-tracked, so it reads as a label rather than competing with the rows under it. (The Inbox's fold heads are BUTTONS — a destination, not a label — so they keep their weight.) */ .cn-nav-section-title, .cn-rail-section { font-size: 10px; letter-spacing: .09em; color: var(--text-faint); padding: 8px 10px 3px; font-weight: 700; text-transform: uppercase; } .gc-item:hover, .cn-nav-item:hover, .cn-rail-item:hover, .ibx-fold:hover, .split-row:hover { background: var(--bg-hover); border-color: transparent; color: var(--text); } .gc-item.active, .cn-nav-item.active, .cn-rail-item.active, .ibx-fold.on, .split-row.on { background: var(--accent-soft); border-color: transparent; color: var(--text); font-weight: 600; } /* A folder still indents under its section head — that is structure, not decoration. */ .ibx-fold { padding-left: 22px; } .ibx-fold-head { padding-left: 10px; } /* Group Chat's rows carry an avatar and a second line, so they need the height back. */ .gc-item { padding: 8px 10px; } /* Smaller here — and NOT re-declaring the radius. This rule sits 5400 lines below the base one and silently won the cascade: the tile was a circle everywhere the author looked and an 8px square in the rail that is actually on screen. A size override should override the size. */ .gc-item-ava { width: 30px; height: 30px; font-size: 15px; } .gc-item-name { font-weight: 600; } .gc-item.active .gc-item-name, .gc-item.active .gc-item-sub { color: var(--text); } /* 6 · Counts, right-aligned, one shape. */ .cn-nav-badge, .ibx-fold-n { margin-left: auto; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } /* =================================================================== TASKS — the four-panel hub (2026-08) ------------------------------------------------------------------- Projects | the list | the task | your AI. The board and the table are gone: two ways to look at the same rows, neither of which could show a task beside its own context, because opening one slid a drawer over the list you picked it from. The rail, its head and its rows come from THE RAIL STANDARD above — this block only lays the columns out and styles what is genuinely new here: the list rows, the task pane, and the panel's two envelopes. =================================================================== */ /* Calendar: the Tasks hub with the list column taken out. Three columns, not four — there is no list beside the month because the month IS the list, and a 330px column repeating what the grid already shows would be the same information twice. The rail and the AI column keep the exact widths Tasks and the Inbox use, so moving between the three does not move the furniture. */ .cal-hub { flex: 1; min-height: 0; display: grid; background: var(--bg); position: relative; grid-template-columns: var(--rail-w) minmax(0, 1fr) 460px; } .cal-rail { display: flex; flex-direction: column; min-height: 0; background: var(--bg-2); border-right: 1px solid var(--border); } .cal-rail-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 10px; } .cal-main { min-width: 0; overflow-y: auto; padding: 18px 22px 36px; } .cal-mainhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .cal-mainhead .cal-month { margin: 0; flex: 1; min-width: 0; } /* One row per thing you can show or hide. A count, because "Birthdays" with nothing in the window is worth knowing before you go looking for one. */ .cal-cat { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 0; border-radius: 9px; background: none; color: var(--text-dim); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; } .cal-cat:hover { background: var(--bg-3); color: var(--text); } .cal-cat.on { color: var(--text); } .cal-cat-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-faint); } /* Off reads as OUTLINE, not as a dimmer colour: a hidden category has to be legible as a choice somebody made, and two greys are not a state anybody can name. */ .cal-cat.off .cal-cat-dot { background: none; box-shadow: inset 0 0 0 1.5px var(--text-faint); } .cal-cat.off .cal-cat-label { text-decoration: line-through; opacity: .65; } .cal-cat-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-cat-n { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .cal-rail-note { padding: 10px 11px 4px; color: var(--text-faint); font-size: 11.5px; line-height: 1.5; } .cal-rail-group { padding: 12px 11px 5px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); } @media (max-width: 1560px) { .cal-hub { grid-template-columns: var(--rail-w) minmax(0, 1fr) 420px; } } @media (max-width: 1180px) { .cal-hub { grid-template-columns: var(--rail-w) minmax(0, 1fr); } #cal-ai { display: none; } } .tsk-hub { flex: 1; min-height: 0; display: grid; background: var(--bg); position: relative; grid-template-columns: var(--rail-w) 330px minmax(0, 1fr) 460px; } .tsk-rail-head .cn-icon-btn svg { width: 18px; height: 18px; } .tsk-rail-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); } /* ---- the list ---- */ .tsk-listcol { border-right: 1px solid var(--border); background: var(--bg-2); display: flex; flex-direction: column; min-height: 0; min-width: 0; } .tsk-listhead { padding: 12px 12px 10px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .tsk-search { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; color: var(--text); padding: 7px 10px; font: inherit; font-size: 13px; } .tsk-search:focus { outline: none; border-color: var(--accent); } .tsk-listhead-row { display: flex; align-items: center; gap: 6px; } .tsk-listhead-row .tasks-select { flex: 1; min-width: 0; font-size: 12px; padding: 5px 7px; } .tsk-listhead-row .tasks-count { margin-left: auto; font-size: 11.5px; color: var(--text-faint); white-space: nowrap; } .tsk-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 1px; } /* With nothing in it the list must not hold the column open, or the empty state that explains WHY it is empty gets pushed to the bottom of the screen. */ .tsk-list:empty { flex: 0 0 auto; padding: 0; } .tsk-listcol .tasks-empty { padding: 26px 18px; text-align: center; } /* A row is a row, on the standard's metrics — but two lines, because a task without its project and owner is a title you have to open to identify. */ .tsk-row { display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; padding: 7px 10px; cursor: pointer; font: inherit; color: var(--text-dim); } .tsk-row:hover { background: var(--bg-hover); color: var(--text); } .tsk-row.active { background: var(--accent-soft); color: var(--text); } .tsk-row.pinned { box-shadow: inset 2px 0 0 var(--accent); } .tsk-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .tsk-row-title { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tsk-row-meta { font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tsk-row-due { flex: 0 0 auto; font-size: 11px; } .tsk-row-pr { flex: 0 0 auto; color: var(--danger); font-weight: 700; font-size: 12px; } /* One dot, coloured by status: the fastest read on a list this dense, and the same vocabulary the board's columns used. */ .tsk-row-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; margin-top: 5px; background: var(--text-faint); } .dot-todo { background: var(--text-faint); } .dot-in_progress { background: var(--accent); } .dot-ready { background: var(--info); } .dot-blocked { background: var(--danger); } .dot-done { background: var(--ok); } /* ---- the task ---- */ .tsk-read { min-width: 0; overflow-y: auto; padding: 20px 26px 40px; background: var(--bg); } .tsk-read-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .tsk-read-tools { margin-left: auto; display: flex; gap: 6px; } .tsk-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; } .tsk-chip .tsk-row-dot { margin-top: 0; } .tsk-chip.pr-high { color: var(--danger); border-color: rgba(239, 68, 68, .4); } /* A hand-over that never arrived. Warning, not error: the task is safe, it is just still here — so it borrows the same weight as a high-priority chip, not a red one. */ .tsk-chip.warn { color: var(--warn); border-color: var(--warn); } .tsk-handover { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--text-dim); border: 1px solid var(--warn); background: var(--warn-soft); } .tsk-handover > span { flex: 1; min-width: 220px; } .tsk-link-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 6px 8px; cursor: pointer; color: var(--text-dim); font: inherit; font-size: 13px; text-decoration: none; } .tsk-link-row:hover { background: var(--bg-hover); color: var(--text); } .tsk-controls { display: flex; gap: 12px; flex-wrap: wrap; } .tsk-ctl { display: flex; flex-direction: column; gap: 4px; min-width: 150px; flex: 1; } .tsk-ctl > span { font-size: 11px; color: var(--text-faint); } .tsk-ctl select { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 6px 8px; font: inherit; font-size: 13px; } /* ---- the panel's two envelopes ---- */ /* ONE inset, stated once. The Inbox panel puts its padding on the container (`.ibx-ai`), which cannot work here: the tab row and the composer both need a full- width border, and the feed between them scrolls. So the container has none and each of the three regions carries the SAME 14px — which is what stops the eye seeing three different margins down one 460px column. */ .tsk-ai { --tsk-pad: 14px; border-left: 1px solid var(--border); background: var(--bg-2); display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 0; } .tsk-tabs { display: flex; gap: 6px; flex-shrink: 0; padding: var(--tsk-pad); border-bottom: 1px solid var(--border); } .tsk-ai .ibx-ai-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--tsk-pad); gap: 12px; } /* The composer: same inset, its own rule rather than the Inbox's margin-plus-padding pair, which put an 11px gap above a 12px border and read as neither. */ .tsk-ai .ibx-ai-act { flex-shrink: 0; max-height: none; overflow: visible; margin: 0; padding: var(--tsk-pad); border-top: 1px solid var(--border); } .tsk-ai .ibx-ai-tell { margin: 0; } .tsk-tab { flex: 1; background: none; border: 1px solid var(--border); border-radius: 9px; padding: 7px 8px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .tsk-tab:hover { color: var(--text); border-color: var(--text-faint); } .tsk-tab.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); } .tsk-tab-n { font-size: 10.5px; font-weight: 700; color: var(--text-faint); background: var(--bg-3); border-radius: 999px; padding: 0 6px; min-width: 17px; } .tsk-tab.on .tsk-tab-n { background: var(--accent); color: var(--on-accent); } .tsk-note { display: flex; flex-direction: column; gap: 8px; } /* ---- the log ---- */ .tsk-log { display: flex; flex-direction: column; gap: 1px; } .tsk-log-row { display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 7px 9px; cursor: pointer; color: var(--text-dim); font: inherit; } .tsk-log-row:hover { background: var(--bg-hover); } .tsk-log-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); flex: 0 0 auto; margin-top: 6px; } .tsk-log-row.note .tsk-log-dot { background: var(--accent); } .tsk-log-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tsk-log-top { font-size: 12.5px; color: var(--text); } .tsk-log-verb { color: var(--text-dim); font-weight: 400; } .tsk-log-when { color: var(--text-faint); font-size: 11px; margin-left: 4px; } .tsk-log-body { font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tsk-log-open { padding: 8px 12px 12px 27px; font-size: 12.5px; color: var(--text-dim); } .tsk-log-detail { display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; } .tsk-log-k { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-right: 6px; } .tsk-log-empty { padding: 18px 4px; } /* Narrow screens give ground in the same order the Inbox does: the list and the panel tighten, then the panel becomes a drawer under the task rather than disappearing — every verb the AI offers lives in it. */ @media (max-width: 1560px) { .tsk-hub { grid-template-columns: var(--rail-w) 300px minmax(0, 1fr) 420px; } .tsk-read { padding: 18px 20px 36px; } } @media (max-width: 1320px) { .tsk-hub { grid-template-columns: var(--rail-w) 264px minmax(0, 1fr) 360px; } } @media (max-width: 1120px) { .tsk-hub { grid-template-columns: var(--rail-w) minmax(0, 300px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "rail list read" "rail list ai"; } .tsk-rail { grid-area: rail; } .tsk-listcol { grid-area: list; } .tsk-read { grid-area: read; } .tsk-ai { grid-area: ai; max-height: 46vh; border-left: 1px solid var(--border); border-top: 1px solid var(--border); } } @media (max-width: 920px) { .tsk-hub { grid-template-columns: 58px minmax(0, 260px) minmax(0, 1fr); } .tsk-rail-title, .tsk-rail .ibx-fold-label, .tsk-rail .ibx-fold-head { display: none; } .tsk-rail-head { justify-content: center; padding: 12px 4px 8px; } .tsk-rail .ibx-fold { justify-content: center; padding: 9px 4px; } } /* ---- the panel's third envelope, and the pointer to it ---- */ /* Facts as a two-column key/value grid: eight labelled boxes down a 460px column is a scroll; eight rows is a glance. */ .tsk-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; padding: 4px 2px 14px; font-size: 12.5px; } .tsk-fact-k { color: var(--text-faint); font-size: 11.5px; white-space: nowrap; } .tsk-fact-v { color: var(--text); overflow-wrap: anywhere; } .tsk-info-grp { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--border); } .tsk-info-h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 6px; } .tsk-info-hint { font-size: 11.5px; color: var(--text-faint); line-height: 1.5; margin: -2px 0 7px; } .tsk-link-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The middle pane keeps a one-line pointer rather than five half-empty boxes. */ .tsk-rel-note { font-size: 12.5px; color: var(--text-faint); margin: 2px 0 14px; } .tsk-rel-open { background: none; border: none; color: var(--accent-2); cursor: pointer; font: inherit; font-size: 12.5px; padding: 0; } .tsk-rel-open:hover { text-decoration: underline; } /* =================================================================== COMPANY, ON THE LIBRARY PAGE STYLE (2026-08) ------------------------------------------------------------------- Skills, Connections, Memory and Files share one page look: a wide quiet title over a centred reading column, pill tabs, and cards that sit a shade above the page with a soft border. Company — including every admin sub-page — had its own: a 21px title in a bordered bar, a full-bleed pane, underlined tabs, and cards a shade BELOW the page. Same treatment as THE RAIL STANDARD above: the library's rules are applied to the classes Company already uses, so nothing in app.js changes. Appended last, so it wins. =================================================================== */ /* 1 · The page frame. FULL WIDTH with a margin, not a centred column: this is a directory and a set of control panels, not an article. Members is a grid of `auto-fill` cards, so the width buys columns rather than stretched cards, and the admin pages are label↔control rows that read better wide than tall. Still padding, never a max-width: the pane is the SCROLLER, and capping a scroller is what put Home's scrollbar 190px in from the window edge. Prose keeps its own cap further down — a 1,800px line of explanatory text is unreadable however wide the window is. */ .cn-pane { padding: 30px 32px 44px; } .cn-pane[data-pane="chat"] { padding: 0; } /* 2 · The head, in the library's voice: the title carries the page, the line under it is quiet, and there is no rule beneath — the content starts the moment the sentence ends. Aligned to the same column as the pane. */ .cn-main-head { padding: 30px 32px 0; border-bottom: 0; align-items: flex-end; } .cn-main-head h1, .cn-admin-pagehead h2 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; } .cn-main-head p, .cn-admin-pagehead p { margin: 7px 0 0; font-size: 13px; color: var(--text-faint); max-width: 560px; } .cn-admin-pagehead { margin: 0 0 22px; } /* 3 · Tabs as pills, not underlines. */ .cn-tabs { gap: 2px; padding: 8px 32px 10px; border-bottom: 0; } .cn-tab { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-bottom: 0; border-radius: 999px; background: none; color: var(--text-dim); font-size: 13.5px; font-weight: 600; margin-bottom: 0; transition: background .12s, color .12s; } .cn-tab:hover { background: var(--bg-2); color: var(--text); } .cn-tab.active { background: var(--bg-3); color: var(--text); border-bottom-color: transparent; } :root[data-theme="light"] .cn-tab.active { background: var(--bg-hover); } .cn-tab-count { background: none; color: var(--text-faint); font-size: 11.5px; padding: 0; margin-left: 0; font-variant-numeric: tabular-nums; } /* 4 · Cards. The library's card sits a shade ABOVE the page (`--bg-1`) with a 14px radius and a soft shadow; Company's sat on `--bg`/`--bg-2`, which reads as a well rather than a card. One treatment, every kind of card here. */ .cn-ppl-card, .cn-member-row, .cn-team-tile, .cn-member-tile, .cn-settings-card, .cn-identity-card, .cn-knowledge-row { background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-1); } .cn-ppl-card, .cn-member-row, .cn-team-tile, .cn-member-tile { padding: 14px 16px; } .cn-settings-card { padding: 18px 20px; } .cn-ppl-card:hover, .cn-member-tile:hover, .cn-team-tile:hover { border-color: var(--accent); background: var(--bg-2); } /* A card's own heading, at the library's weight rather than a bold sentence. */ .cn-settings-h { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 7px; } .cn-settings-desc { font-size: 13px; color: var(--text-faint); max-width: 78ch; } /* The explanatory paragraph on an admin page, likewise: the CARD goes full width because its controls do, but the sentence explaining it does not. */ .cn-admin-pagehead p { max-width: 78ch; } .cn-settings-pane { gap: 18px; } /* 5 · Grids breathe like the library's. */ .cn-ppl-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .cn-members-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .cn-members-list { gap: 10px; } /* =========================================================================== Mind maps (frontend/mindmap.js) The SVG itself carries no CSS — its colours are written in as literals, read from the tokens at draw time, so a DOWNLOADED .svg still looks like the map you were looking at. Only the frame around it is styled here. =========================================================================== */ .mm-embed { margin: 14px 0; } /* A wide map scrolls inside its own box. Without this a big map widens the chat column and the whole page scrolls sideways. */ .mm-canvas { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-1); padding: 6px; } .mm-svg { display: block; max-width: 100%; height: auto; } /* Interactive map: drag a box onto another to re-parent, drag the background to pan, ctrl/cmd+scroll to zoom. `touch-action: none` is required or the browser claims the gesture for scrolling and pointermove never fires on touch. */ .mm-live { touch-action: none; cursor: grab; user-select: none; } .mm-live.mm-panning { cursor: grabbing; } .mm-live:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .mm-node { cursor: grab; } .mm-node rect { transition: filter .12s; } .mm-node:hover rect:first-of-type { filter: brightness(1.14); } .mm-node.mm-dragging { opacity: .45; cursor: grabbing; } /* The node the drop would land on. A ring rather than a fill change, so the node's own colour still reads while it is highlighted. */ .mm-node.mm-drop rect:first-of-type { stroke: var(--ok); stroke-width: 3px; filter: brightness(1.2); } .mm-toggle { cursor: pointer; } .mm-toggle:hover circle { filter: brightness(1.25); } .mm-hint { font-size: 11px; color: var(--text-faint); align-self: center; margin-left: 2px; } @media (max-width: 640px) { .mm-hint { display: none; } } /* The selected node, and the overlaid input used to rename it. The input is real HTML positioned over the SVG rect — SVG cannot be typed into, and contenteditable drags in a caret model and pasted rich text we do not want. */ .mm-node.mm-sel rect:first-of-type { stroke: var(--accent-2); stroke-width: 2.5px; } .mm-canvas { position: relative; } .mm-edit { position: absolute; z-index: 5; font: inherit; font-size: 13px; font-weight: 600; padding: 0 12px; border-radius: 8px; border: 2px solid var(--accent); background: var(--bg-2); color: var(--text); box-shadow: var(--shadow-2); } .mm-edit:focus { outline: none; } /* ---- the Mind maps page ---- */ .mm-grid { display: grid; gap: 14px; margin-top: 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .mm-card { text-align: left; font: inherit; cursor: pointer; padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-1); color: var(--text); transition: border-color .15s, transform .15s, box-shadow .15s; } .mm-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-1); } .mm-card-title { font-weight: 600; margin-bottom: 6px; } .mm-card-meta { font-size: 12px; color: var(--text-faint); } .mm-empty { margin-top: 24px; color: var(--text-dim); max-width: 52ch; } .mm-empty p { margin: 0 0 10px; } .mm-detail-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; } .mm-detail-title { margin: 0; font-size: 18px; font-weight: 600; } /* The page canvas gets a real height and the SVG scales into it. A chat map keeps its natural size — blowing a three-node map up to full width helps nobody. */ .mm-page-embed { flex: 1; display: flex; } .mm-page-embed .mm-canvas { flex: 1; height: 68vh; overflow: hidden; padding: 0; } .mm-canvas-fit { display: flex; } .mm-svg-fit { width: 100%; height: 100%; max-width: none; } .mm-btn.mm-danger:hover { border-color: var(--danger); color: var(--danger); } .mm-btn.mm-save { border-color: var(--accent); color: var(--text); } /* The primary action on this page: it is what people look for and could not find. */ /* The style bar. Acts on the selected node; a fixed palette rather than a colour picker, because these colours are written into a DOWNLOADED svg opened where our stylesheet does not exist — a free picker makes black-on-black one click away. */ /* The insertion caret, shown when a drag would drop a node BETWEEN two siblings rather than inside one. Positioned in screen space over the canvas, for the same reason drop targeting is: the browser already knows where the boxes are. */ .mm-caret { position: absolute; height: 3px; border-radius: 2px; background: var(--ok); box-shadow: 0 0 0 1px var(--bg-1); pointer-events: none; display: none; z-index: 4; } /* The org-chart layout stacks siblings ACROSS, so its insertion line stands up. Width and height are set inline by showCaret(); this only swaps which of the two is the thin one, because a 3px-tall vertical caret is a dot. */ .mm-caret-v { height: auto; width: 3px; } .mm-style { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-1); } .mm-style-label { font-size: 11px; color: var(--text-faint); margin-left: 10px; margin-right: 2px; } .mm-style-label:first-child { margin-left: 0; } .mm-swatch { width: 20px; height: 20px; border-radius: 6px; cursor: pointer; border: 1px solid var(--border); padding: 0; background: transparent; transition: transform .12s, border-color .12s; } .mm-swatch:hover { transform: scale(1.15); border-color: var(--text); } .mm-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* "Default" is a slash, not a colour — it CLEARS the key so the node goes back to its depth-based colour rather than baking today's theme in as a literal. */ .mm-swatch-none { background: linear-gradient(135deg, transparent 44%, var(--danger) 44%, var(--danger) 56%, transparent 56%); } .mm-btn.mm-mini { padding: 4px 9px; font-size: 11px; min-width: 28px; } /* Connection state. Shown, not assumed — a person needs to know whether their edits are being shared or only kept locally. */ .mm-pill { align-self: center; font-size: 11px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-faint); white-space: nowrap; } .mm-pill-live { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); } .mm-pill-retry { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); } .mm-save-needed { border-color: var(--warn); color: var(--warn); } .mm-btn.mm-add { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .mm-btn.mm-add:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); } .mm-bar { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .mm-btn { font: inherit; font-size: 12px; line-height: 1; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-dim); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .mm-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--accent); } .mm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* The format picker is a real , which read as an unfinished form field wedged into a sidebar. Two answers do not need a menu. */ .ibx-policy { padding: 11px 12px 13px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; } .ibx-policy-head { display: flex; align-items: center; gap: 10px; } .ibx-policy-ttl { flex: 1; min-width: 0; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); } /* A real switch: 30x17, the size the rest of the app uses for a toggle. */ .ibx-switch { flex: none; display: inline-flex; cursor: pointer; } .ibx-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .ibx-switch-track { width: 30px; height: 17px; border-radius: 999px; background: var(--bg-3, var(--bg-2)); border: 1px solid var(--border); display: inline-flex; align-items: center; padding: 0 2px; transition: background .16s ease, border-color .16s ease; } .ibx-switch-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--text-faint); transition: transform .16s ease, background .16s ease; } .ibx-switch input:checked + .ibx-switch-track { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); } .ibx-switch input:checked + .ibx-switch-track .ibx-switch-dot { transform: translateX(13px); background: var(--accent); } .ibx-switch input:focus-visible + .ibx-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; } /* The note carries the safety rule, so it is never the thing that gets truncated. */ .ibx-policy-note { font-size: 11px; line-height: 1.5; color: var(--text-faint); } /* The half people misread — that sending still asks — is the half that gets the colour. */ .ibx-policy-em { color: var(--text-dim); } /* ---- Connections: one list, connected first -------------------------------------- The page was a connected grid plus a second "add a connection on its own" list in a disclosure — the plugin shop the skills-only-catalog decision removed, smuggled back under another name. Two lists of the same kind of thing on one page is what made it read as two places. One list solves it, and these two rules are all it needs. */ /* Where the groups change. A heading rather than a rule, because "Not connected" is the thing a reader is looking for; a bare line makes them work out what changed. */ .cat-sep { /* ⚠️ `.cat-list` is an auto-fill GRID, so without this the heading is placed as a CELL — it sits in the first column and the cards flow around it. The rule two blocks up already does this for the empty/loading sentences, for the same reason. */ grid-column: 1 / -1; margin: 18px 2px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); } .cat-sep:first-child { margin-top: 0; } /* An unconnected row is a real option, not a disabled one — it is one click from being set up. So it recedes rather than greys out: full contrast on hover, and the name stays legible, because the whole point of listing it is that you can read what it would unlock. */ .cat-card.cat-off { opacity: .72; } .cat-card.cat-off:hover { opacity: 1; } /* ═══════════════════════════════════════════════════════════════════════════════════ THE RAIL SHELL — opt-in via `ui_shell: "rail"` (storage.DEFAULT_CONFIG) ----------------------------------------------------------------------------------- Four views are hubs whose own rail is the FIRST of four columns, and each hides the app sidebar to make room (`body.cn-fullbleed`). So the left edge of the product moves as you navigate, and there is no persistent place to stand. This mode keeps the sidebar and makes the hub's rail the SECOND column. The width is paid for by the AI panel, which becomes a corner bubble. ⚠️ It is a LAYOUT MODE over the same DOM. No id moves, no renderer changes, every handler stays bound — which is what makes it switchable back on a live seat, and what keeps the whole feature to one CSS block plus a class toggle. Anything here that needed a renderer to change belongs in the renderer, not in this block. ═══════════════════════════════════════════════════════════════════════════════════ */ /* 1 · the sidebar stays. `cn-fullbleed` is never set in this mode, but the rule is repeated defensively: if any path sets it, the sidebar must still win. */ body.shell-rail.cn-fullbleed #sidebar { display: flex; } /* 2 · each hub drops its AI column — that is what pays for the sidebar. The remaining tracks are unchanged, so the list and reading panes keep their proportions. ⚠️ Each is scoped to the range where the hub STILL HAS an AI track. Unscoped, these four out-specify every breakpoint below them (a class selector plus `body` beats a bare class inside a media query), so a narrow window would keep three wide columns beside a visible sidebar and overflow. Below its own breakpoint each hub has already dropped the AI column by itself, which is exactly the layout this mode wants — so the right move is to stand down, not to restate it. And below 920px the app sidebar goes off-canvas anyway, which is where classic collapses the rail to icons; this mode must not fight that either. The rail width is `var(--rail-w)` everywhere, never a literal: it is the same measure as `#sidebar`, and a rail that is 16px different on one view reads as the app having shifted under you (the note at the Inbox breakpoints says so). */ @media (min-width: 1121px) { body.shell-rail .ibx-hub { grid-template-columns: auto 280px minmax(0, 1fr); } body.shell-rail .tsk-hub { grid-template-columns: auto 330px minmax(0, 1fr); } } @media (min-width: 1041px) { body.shell-rail .gc-hub { grid-template-columns: auto minmax(0, 1fr); } } @media (min-width: 1181px) { body.shell-rail .cal-hub { grid-template-columns: auto minmax(0, 1fr); } } /* 3 · the rail's Back button. It exists to return from a full-bleed hub to the app; with the sidebar right beside it there is nothing to go back to. Hidden, not removed — `mountRailChrome` still builds it and anything reading it still finds it. */ body.shell-rail .rail-top .cn-icon-btn, body.shell-rail #ibx-back, body.shell-rail #gc-back { display: none; } /* 4 - the AI panel. The floating bubble and the floating card it opened used to live here; both are replaced by a docked rail and a panel that takes room, defined at the END of this file. Two answers to one question is worse than either, and the earlier one is the answer a reader finds first. */ /* --- the nav | panel | main shell (second pass) ------------------------------------ The mode's real shape. `#app-body` was already `nav | main`; the panel is simply the column in the middle, so no offset is restated anywhere and every existing width keeps working. ⚠️ The panel is a real flex child, never a fixed overlay: an overlay would need every view's left edge re-stated, and would be wrong the moment one scrolls. */ :root { --nav-w: 196px; --panel-w: 236px; } /* 6 - the nav is slimmer than the classic sidebar, because it is now only a nav: the lists that used to live in it (Recents, Active peers) are panels of their own. */ body.shell-rail #sidebar { width: var(--nav-w); } body.shell-rail .shell-nav-off { display: none !important; } /* 7 - the panel. Folding is a width transition to 0, so the width comes back to the view beside it rather than the panel merely turning invisible. */ #shell-panel { width: var(--panel-w); flex-shrink: 0; min-width: 0; background: var(--bg-1); border-right: 1px solid var(--border); display: none; flex-direction: column; overflow: hidden; transition: width .22s cubic-bezier(.4, 0, .2, 1), opacity .16s; } body.shell-rail #shell-panel { display: flex; } body.shell-rail #shell-panel.shell-panel-off { width: 0; opacity: 0; border-right-color: transparent; } body.shell-rail.shell-panel-shut #shell-panel { width: 0; opacity: 0; border-right-color: transparent; } .shell-panel-head { display: flex; align-items: center; gap: 8px; padding: 13px 12px 8px; } .shell-panel-head h2 { margin: 0; font-size: 13px; font-weight: 650; color: var(--text); } .shell-panel-collapse { margin-left: auto; width: 25px; height: 25px; border-radius: 7px; border: 0; background: transparent; color: var(--text-faint); cursor: pointer; display: grid; place-items: center; } .shell-panel-collapse svg { width: 15px; height: 15px; } .shell-panel-collapse:hover { background: var(--bg-hover); color: var(--text); } .shell-panel-body { padding: 0 8px 10px; overflow-y: auto; } .shell-panel-grp { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); padding: 12px 8px 5px; } .shell-panel-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 9px; border: 0; border-radius: 9px; background: transparent; color: var(--text-dim); font-size: 13px; cursor: pointer; } .shell-panel-row:hover { background: var(--bg-hover); color: var(--text); } .shell-panel-row.on { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; } /* 8 - Recents is the Chat panel. It keeps its own markup and its own renderer; only the section head it carried inside the sidebar is redundant here, because the panel has a title of its own. Shown only when the panel is serving Chat. */ body.shell-rail #shell-panel .side-recents { display: none; flex: 1; min-height: 0; } body.shell-rail #shell-panel[data-section="chat"] .side-recents { display: flex; flex-direction: column; } body.shell-rail #shell-panel[data-section="chat"] .shell-panel-body { display: none; } /* 38 - "Recents" stays, and the magnifier goes to the right of it. Hiding the label left a bare search icon floating over the list with nothing to say what the list WAS - the panel's own title is "Chat", which names the section, not the thing under it. ⚠️ The label keeps the nav's small-uppercase proportions: it is a marker over a list you skim, not a heading you read. */ body.shell-rail #shell-panel .side-recents .side-section-title { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); padding: 0; } body.shell-rail #shell-panel .side-recents .side-sec-head { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; } body.shell-rail #shell-panel .side-recents .recents-search-btn { margin-left: auto; } body.shell-rail #shell-panel .side-recents .side-sec-head { padding: 0 8px 4px; } body.shell-rail #shell-panel .side-recents .side-sec-body { overflow-y: auto; padding: 0 8px 10px; } /* 9 - a hub's own rail IS the panel there, so the same fold applies to its grid column. ⚠️ Restated per hub because each has its own track widths; a shared rule would have to know all four. */ body.shell-rail.shell-panel-shut .ibx-rail, body.shell-rail.shell-panel-shut .tsk-rail, body.shell-rail.shell-panel-shut .cal-rail, body.shell-rail.shell-panel-shut .gc-rail, body.shell-rail.shell-panel-shut .cn-rail { overflow: hidden; opacity: 0; } /* 10 - the hub rails carried their own account row and Back button, because in the classic shell the rail STANDS IN for the sidebar. Here the sidebar is right beside them, so both are duplicates - two account rows on one screen. ⚠️ Hidden rather than not-built: `mountRailChrome` still mounts them, so anything reading them still finds them, and switching back to classic needs no rebuild. */ body.shell-rail .rail-foot { display: none; } body.shell-rail .rail-top { display: none; } /* 11 - the re-homed items. Each keeps the handler it was born with; only where it sits changes, so it has to read like a row of its new host rather than of the nav. */ body.shell-rail .shell-rehomed.side-item { width: calc(100% - 16px); margin: 0 8px; } body.shell-rail #connections-section.shell-rehomed { margin-top: auto; padding: 6px 0 4px; border-top: 1px solid var(--border); } /* --- the prototype's chrome, ported ------------------------------------------------ The palette needed nothing: the prototype was built FROM this token block, so all 20 of its colours are already these. What differed was the chrome's own measurements, and one of them carried most of the "this doesn't look like the mock" feeling - the active nav item, which was a grey `--bg-3` block here and the indigo `--accent-soft` there. ⚠️ Values, not new tokens. A second palette scoped to a mode is how a theme rots: the light theme redefines the tokens and would never reach a hard-coded copy. */ /* 12 - nav items: slightly tighter, a size down, and dim until they matter. */ body.shell-rail .side-item { gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--text-dim); } body.shell-rail .side-item:hover { background: var(--bg-hover); color: var(--text); } body.shell-rail .side-item.active { background: var(--accent-soft); color: var(--text); font-weight: 600; } body.shell-rail .side-item .si-ico svg { width: 17px; height: 17px; } /* 13 - group labels read as labels, not as items: smaller, wider tracked, more air above so the eye groups what follows rather than reading one long list. ⚠️ The caret stays - these fold, which the prototype's static mock had no need to show, and a control that silently stopped working would be the worse trade. */ body.shell-rail .side-section-title { font-size: 10px; font-weight: 700; letter-spacing: .09em; padding: 12px 8px 5px; color: var(--text-faint); } /* 14 - the count, and the one animation the prototype had that this file did not: it POPS when it changes, so a number arriving is something you see rather than something you notice later. */ @keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } } body.shell-rail .nav-badge { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; line-height: 1; animation: pop .28s cubic-bezier(.3, 1.6, .5, 1); } @media (prefers-reduced-motion: reduce) { body.shell-rail .nav-badge { animation: none; } } /* 15 - the account row. The avatar is the accent here rather than its own red gradient: one accent per screen, and the red read as an alert on a row that is not one. */ body.shell-rail .account { padding: 9px 10px; margin-top: 6px; gap: 9px; } body.shell-rail .account:hover { background: var(--bg-hover); } body.shell-rail .avatar-mini { width: 30px; height: 30px; background: var(--accent); font-size: 11.5px; font-weight: 700; } body.shell-rail #account-name { font-size: 13px; font-weight: 600; } body.shell-rail #account-sub { font-size: 11.5px; color: var(--text-faint); } body.shell-rail .account-caret { color: var(--text-faint); font-size: 13px; } /* 16 - the page frame. A bounded reading column, CENTRED in whatever room is left. ⚠️ REVERSED 2026-08-23, at the owner's request, and the reason is a monitor. This ran LEFT-ALIGNED against the panel — the prototype's alignment, on the argument that it was most of what remained of the difference between the two shells. That holds at 1400px, where the column nearly fills the space. At 2580 it does not: Memory drew 1090px of content against the left edge with more than a screen's width of empty black beside it, and the page read as broken rather than roomy. The max-width still stays, for the reason it always did — dropping it would run body text the full width of the monitor, which is what the column exists to prevent. So the measure is unchanged and only the alignment moved. */ body.shell-rail .lib-wrap { margin: 0 auto; max-width: 1180px; } body.shell-rail .lib-wrap.lib-wide { max-width: 1320px; } body.shell-rail .lib-body { padding: 22px 26px; } /* 17 - the slide. The panel's own width transition only covers the two sections that use `#shell-panel`; on a hub the panel IS the hub's rail, which is a GRID COLUMN, so the same movement has to be a transition on grid-template-columns. ⚠️ Animating a grid's tracks needs the from-value and the to-value both stated in the same units - going from `var(--rail-w)` to `0` works, going to `none` or `auto` snaps. That is why the shut rules restate every track rather than zeroing one. */ body.shell-rail .ibx-hub, body.shell-rail .tsk-hub, body.shell-rail .cal-hub, body.shell-rail .gc-hub { transition: grid-template-columns .22s cubic-bezier(.4, 0, .2, 1); } body.shell-rail .ibx-rail, body.shell-rail .tsk-rail, body.shell-rail .cal-rail, body.shell-rail .gc-rail, body.shell-rail .cn-rail { transition: opacity .16s ease; } @media (prefers-reduced-motion: reduce) { body.shell-rail #shell-panel, body.shell-rail .ibx-hub, body.shell-rail .tsk-hub, body.shell-rail .cal-hub, body.shell-rail .gc-hub { transition: none; } } /* 18 - the group labels. In the mock they are plain words - no control on them at all. These fold, though, and that was asked for, so the caret is kept and revealed on hover/focus instead of removed: at rest the nav reads exactly like the reference, and the control is still there for the person who wants it. ⚠️ Focus-visible is in the selector on purpose - hover-only would make the fold unreachable from the keyboard, which is worse than the caret being visible. */ body.shell-rail .side-section-title .sec-caret { opacity: 0; transition: opacity .14s ease; } body.shell-rail .side-section-title:hover .sec-caret, body.shell-rail .side-section-title:focus-visible .sec-caret, body.shell-rail .side-section-title[aria-expanded="false"] .sec-caret { opacity: .8; } @media (prefers-reduced-motion: reduce) { body.shell-rail .side-section-title .sec-caret { transition: none; } } /* 19 - the panel's rows carry a count on the right, like the reference. */ .shell-panel-row .spr-n { margin-left: auto; font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .shell-panel-row.on .spr-n { color: var(--accent-2); } /* 20 - the Inbox, as the reference draws it. The ROWS already matched almost exactly (`.inbox-row.active` was already accent-soft with an accent left edge); what differed is the frame. Here the list and the reading pane run edge to edge as two bare panes; there they sit inside ONE rounded bordered card with air around it, which is most of why the reference reads as a page and this reads as a console. ⚠️ Built by rounding the OUTER corners of the two existing columns rather than by adding a wrapper element: a wrapper would be a DOM change to a hub, which is the one thing this mode does not do. Tasks gets the same treatment, because the two hubs share a grid and having only one of them framed would read as a bug. */ body.shell-rail .ibx-hub, body.shell-rail .tsk-hub { padding: 16px 16px 16px 0; gap: 0; } body.shell-rail .ibx-listcol, body.shell-rail .tsk-listcol { border: 1px solid var(--border); border-right: 0; border-radius: 12px 0 0 12px; background: var(--bg-1); } body.shell-rail .ibx-read, body.shell-rail .tsk-read { border: 1px solid var(--border); border-radius: 0 12px 12px 0; } /* The rail is OUTSIDE the card - it is the panel, not part of the split. */ body.shell-rail .ibx-rail, body.shell-rail .tsk-rail { margin: -16px 16px -16px 0; } /* 21 - the list head. The reference puts the search and the count on one quiet line above the rows, inside the card, rather than floating them over the pane. */ /* (ibx-listHEAD, not ibx-list-head: the name was guessed the first time and styled nothing, the same slip as .lib-page. Checked against index.html now.) */ body.shell-rail .ibx-listhead, body.shell-rail .tsk-listhead { border-bottom: 1px solid var(--border); border-radius: 12px 0 0 0; } /* 22 - CONTAINMENT. A layout mode must not be able to widen the document; if it can, the page grows a horizontal scrollbar and everything appears shoved sideways, which looks like the shell is broken rather than like one child overflowing. ⚠️ Recents is the specific reason. Inside the sidebar its width was contained by `.side-scroll { overflow-x: hidden }`, and `.side-scroll .side-recents .conversations` set `overflow: visible`. Moving it into the panel leaves BOTH behind: the descendant rule stops matching, and the clip that made it safe is gone. Every long conversation title is then free to size the list. So the panel restates the clip, is capped at its own width so no content can stretch it, and the row is told to fill rather than to size itself. */ body.shell-rail #app-body { overflow-x: hidden; } body.shell-rail #shell-panel { max-width: var(--panel-w); overflow-x: hidden; } body.shell-rail #shell-panel .side-recents, body.shell-rail #shell-panel .side-sec-body, body.shell-rail #shell-panel .conversations { min-width: 0; max-width: 100%; overflow-x: hidden; } body.shell-rail #shell-panel .conversations > * { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* 23 - the Chat panel's New chat button, and the list under it. In the reference the button is the first thing in the panel, full width, outlined rather than filled: it is the common action, not the loud one. */ /* New chat is an ACTION, not a card: accent-coloured text on the panel's top row, weighted by colour rather than by a box around it. A full-width outlined button read as the panel's SUBJECT rather than as something you do to it. */ /* A `+` in the head, the same control the Tasks rail puts in the same corner. */ .shell-new-chat { display: grid; place-items: center; width: 25px; height: 25px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 7px; color: var(--text-faint); font-size: 17px; font-weight: 500; cursor: pointer; } .shell-new-chat:hover { background: var(--bg-hover); color: var(--text); } .shell-new-chat span { line-height: 1; } body.shell-rail #shell-panel:not([data-section="chat"]) .shell-new-chat { display: none; } /* The re-homed rows read as panel rows, not as nav items - they are in a different container now and the nav's own measurements do not belong to them. */ body.shell-rail #shell-panel .conversations > * { border-radius: 9px; padding: 7px 10px; font-size: 13px; } body.shell-rail #shell-panel .side-sec-head { padding: 10px 12px 4px; } /* 24 - Photometrics and Mind maps, now rows of the Company rail. ⚠️ They keep the handler they were born with; only where they sit changed, so they have to read like rows of their new host rather than of the nav they left. */ body.shell-rail .cn-rail-list .shell-rehomed { width: auto; margin: 0 8px; border-radius: 9px; padding: 8px 10px; font-size: 13px; color: var(--text-dim); } body.shell-rail .cn-rail-list .shell-rehomed:hover { background: var(--bg-hover); color: var(--text); } body.shell-rail .cn-rail-list .shell-rehomed.active { background: var(--accent-soft); color: var(--text); } /* 25 - the hub slide, done properly. ⚠️ `grid-template-columns` is barely interpolatable: browsers will not smoothly animate between two track LISTS, so the rail simply snapped from its width to zero and the Inbox, Tasks, Calendar and Messages had no animation at all while the Marketplace and Chat panel slid. The fix is to animate a plain `width` on the RAIL, which every browser does smoothly, and let the grid track follow it by making that track `auto`. The track then measures its content, and its content is an element whose width is transitioning — so the column moves because the rail does, rather than the grid being asked to interpolate a list. `overflow: hidden` and `max-width` are not decoration here: an `auto` track sizes to CONTENT, so without them a long conversation title or a wide chip could make the rail wider than the rail is supposed to be. */ body.shell-rail .ibx-rail, body.shell-rail .tsk-rail, body.shell-rail .cal-rail, body.shell-rail .gc-rail, body.shell-rail .cn-rail { width: var(--rail-w); max-width: var(--rail-w); overflow: hidden; transition: width .22s cubic-bezier(.4, 0, .2, 1), opacity .16s ease; } /* (hub rails no longer collapse: the fold belongs to #shell-panel only) */ @media (prefers-reduced-motion: reduce) { body.shell-rail .ibx-rail, body.shell-rail .tsk-rail, body.shell-rail .cal-rail, body.shell-rail .gc-rail, body.shell-rail .cn-rail { transition: none; } } /* 26 - the hub rails slide IN, like the Marketplace panel does. ⚠️ They needed a different mechanism for a real reason, not a stylistic one. `#shell-panel` is one element that persists across sections, so it can TRANSITION from width 0 to its width. A hub's rail does not arrive from anywhere - it is part of a view that was `display: none` a moment ago, and there is no previous width to transition FROM. So it is an animation rather than a transition. A element going from `display: none` to visible restarts its animations, which is exactly the moment we want it to play, and it costs no JavaScript and no state: showing the view IS the trigger. Same curve and duration as the panel, so the two read as one behaviour. */ @keyframes railIn { from { width: 0; opacity: 0; } to { width: var(--rail-w); opacity: 1; } } body.shell-rail .ibx-rail, body.shell-rail .tsk-rail, body.shell-rail .cal-rail, body.shell-rail .gc-rail, body.shell-rail .cn-rail { animation: railIn .22s cubic-bezier(.4, 0, .2, 1); } @media (prefers-reduced-motion: reduce) { body.shell-rail .ibx-rail, body.shell-rail .tsk-rail, body.shell-rail .cal-rail, body.shell-rail .gc-rail, body.shell-rail .cn-rail { animation: none; } } /* 27 - the nav is 196px here, down from the sidebar's 264. "New AI Chat" plus its `Ctrl K` badge does not fit in that, so the button grew WIDER THAN THE NAV - and clicking it focused an element that overflows its scroll container, which the browser answers by scrolling it into view. That scroll is the "right push": not a layout bug at all, but the nav shifting to show something too big for it. ⚠️ So the fix is containment, not a width tweak. The badge goes (the reference nav has no keyboard hint, and the shortcut still works), every item is told it may not exceed its column, and the nav itself refuses to scroll sideways so no future item can do this again. */ body.shell-rail .side-item-kbd { display: none; } body.shell-rail #sidebar, body.shell-rail .side-scroll { overflow-x: hidden; } body.shell-rail .side-item, body.shell-rail .side-section-title { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* 28 - the panel follows the TASKS RAIL, which is the template every second sidebar now uses: a leading collapse chevron, then the title; sentence-case group headings rather than the nav's tiny uppercase labels (they head a list you read, not a section you scan past); and rows with the icon of the thing they open. ⚠️ Group headings deliberately do NOT match `.side-section-title`. The nav's labels are wayfinding you skim; a panel's are headings over a short list, and the Tasks rail has always drawn them larger and in sentence case. Matching the nav here would make the panel read as a second nav. */ .shell-panel-head { gap: 6px; padding: 14px 12px 8px; } .shell-panel-head h2 { font-size: 14px; font-weight: 700; } .shell-panel-collapse { margin-left: 0; order: -1; } .shell-panel-grp { font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); padding: 12px 10px 6px; } .shell-panel-row { gap: 10px; padding: 8px 10px; } .shell-panel-row .spr-ico { display: grid; place-items: center; width: 17px; flex-shrink: 0; } .shell-panel-row .spr-ico svg { width: 17px; height: 17px; } .shell-panel-row.on { background: var(--accent-soft); color: var(--text); font-weight: 600; } /* 29 - the shell must never scroll sideways, and nothing in it may be wider than its column. ⚠️ `shellDiag()` proved there is no document overflow at all - the page is exactly the width of the window - so every containment rule above this was aimed at the wrong thing. What actually happens is that a child wider than its box gets FOCUSED (clicking a chat focuses the composer, measured at 262 inside 250), and the browser reveals it by scrolling every scrollable ancestor. The shifts accumulate up the tree, which is why #app, #sidebar and the top bar of the day were all displaced by the same 112px while the document was never too wide. Two halves: the shell refuses to be a scroll container at all, so there is nothing for the browser to scroll; and the children that provoked it are told they may not exceed their column. */ body.shell-rail #app, body.shell-rail #app-body, body.shell-rail #main { overflow-x: clip; } body.shell-rail #app, body.shell-rail #app-body { width: 100%; max-width: 100%; } body.shell-rail #main { min-width: 0; } body.shell-rail #main .composer, body.shell-rail #main .msg-pane, body.shell-rail #main .msg-attachments, body.shell-rail #main .attach-chip { min-width: 0; max-width: 100%; } body.shell-rail #main .msg-attachments { flex-wrap: wrap; } /* ========================================================================== A page with a list beside it — Photometrics, Mind maps ========================================================================== ⚠️ APPENDED LAST, DELIBERATELY. These elements carry `page-body` as well as `split-body`, both single-class selectors, so specificity TIES and document order decides. Written where it reads best — up beside the other layout rules — the `padding: 0` lost to `.page-body { padding: 22px 32px 44px }` 3800 lines below it, and the list column drew inset in its own box with a gap either side instead of flush against the sidebar. It looked exactly like the bug it was meant to fix, and the test passed throughout because it asserted the rule EXISTED rather than that it won. Same convention the rail standard and the 2026-07 redesign layer use: last wins. */ /* A page with a list beside it. NOT the four-column hub Tasks and the Inbox use: the app sidebar STAYS, because these are pages you arrive at from it and leave again — replacing it would make a photometric file feel like somewhere you go to work for an hour. Two columns, list first, content filling the rest. */ /* ⚠️ It carries `page-body` too, which brings `padding: 22px 32px 44px` and its own `overflow-y: auto`. Both had to go: the padding pushed the list column inward so it read as a floating card with a gap on either side rather than a column, and the outer scroll meant the whole page scrolled as one instead of each column scrolling itself. The padding moves INTO the content column, which is where it was doing its job. */ .split-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 0; flex: 1; padding: 0; /* Both axes named. The shorthand alone does override the earlier `.page-body { overflow-y: auto }`, but only by being a shorthand — and a rule whose correctness depends on knowing that is a rule the next person reads wrong. */ overflow: hidden; overflow-y: hidden; } /* ⚠️ `split-SIDE`, not `split-rail`. In this codebase a "rail" is the thing that REPLACES the app sidebar (`body.cn-fullbleed`), and `test_rail_standard` finds them by that suffix to hold the three of them to one shape. This sits BESIDE the sidebar and is a list column — the same role as the Inbox's, at the same width. */ .split-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 12px; } .split-main { min-width: 0; overflow-y: auto; padding: 22px 32px 44px; } /* The inner page already spaced itself for a full-width page; inside a column the content column's own padding is doing that job. */ .split-main .lib-body { padding-top: 0; } /* ⚠️ NOT `max-width: none`. It was, so a photometric report ran the full width of the column while Memory and Files sat in a measured one — the same content-width question answered two ways in one product. It takes the shared measure and centres with it. */ .split-main .lib-wrap { margin-inline: auto; } /* Sits where the drop zone was, so the eye finds it in the place it last looked. */ .phot-swap { margin-bottom: 14px; } /* The row. Two lines — what it is, and when — because a list of eight files all called something.ies is a list of eight identical rows. */ .split-row { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--text-dim); font: inherit; cursor: pointer; } .split-row:hover { background: var(--bg-3); color: var(--text); } .split-row.on { background: var(--accent-soft); color: var(--accent); } /* ⚠️ Only what the shared row rule does NOT cover. These carry a second line — a file name means little without a date when eight of them start "VASARI-PRO-" — and the nav rows they otherwise match are single-line. */ .split-row { display: block; text-align: left; } .split-row-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .split-row-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; } .split-row.on .split-row-sub { color: inherit; opacity: .8; } .split-empty { padding: 14px 12px; color: var(--text-faint); font-size: 12px; line-height: 1.5; } /* Below the split's own breakpoint the list would leave the content too narrow to read a polar plot in, so it goes above instead of away — the same rule the Inbox panel follows: it MOVES, it does not vanish. */ @media (max-width: 1000px) { .split-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .split-side { border-right: 0; border-bottom: 1px solid var(--border); max-height: 190px; } } /* ⚠️ `shell-panel-shut` is a STATE class on ("the panel is folded"). It must never also be a component class: a bare `.shell-panel-shut { width: 25px; display: grid }` then matches the moment the panel folds, and the whole application collapses into a 25px grid box - which is exactly what happened, and read as overflow, as scroll, and as every other thing it was not. State classes and component classes share one namespace. The chevron is `.shell-panel-collapse`. */ /* 30 - the empty chat, as a greeting rather than a logo floating over some buttons. The mark stays OURS - the animated one - because it is the product's own and a still logo is a different logo. Everything around it is what changed: a question, one line saying what this thing can do, and the suggestions in a proper grid. */ .empty-state { max-width: 900px; } .empty-title { margin: 18px 0 6px; font-size: 30px; font-weight: 650; letter-spacing: -.02em; color: var(--text); text-wrap: balance; } .empty-lede { margin: 0 auto 26px; max-width: 620px; font-size: 15px; line-height: 1.6; color: var(--text-dim); text-wrap: balance; } .empty-hero-logo { width: 104px; height: 104px; } .empty-cards { max-width: 900px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } /* ⚠️ Below the three-up breakpoint the grid falls back to what it always did, rather than squeezing three columns no reader can use. */ @media (max-width: 900px) { .empty-cards { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); } } /* 31 - the suggestion cards, laid out as the reference has them: the icon and the title on one row, the description on its own line beneath, spanning the full card. Ours put the icon left of a stacked title+description, which reads as a list row rather than a card. ⚠️ Done with `display: contents` on `.empty-card-body` so its two children join the CARD's grid directly. The alternative was re-nesting the markup, and the markup is shared with `fillEmptyCards` and its data — a layout change should not make the renderer describe the layout. */ .empty-card { /* `align-content: start` because the description is clamped to one line: the card is a fixed shape now, so the row cannot go ragged. Folded into THIS rule rather than appended as a second `.empty-card` — two rules for one component is how a look drifts, and it is what kept breaking the test that reads the effective one. */ display: grid; align-items: center; align-content: start; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico title" "desc desc"; column-gap: 11px; row-gap: 9px; padding: 15px 16px 16px; border-radius: 12px; } .empty-card-ico { grid-area: ico; } .empty-card-body { display: contents; } .empty-card-title { grid-area: title; font-size: 14.5px; font-weight: 650; } .empty-card-desc { grid-area: desc; font-size: 13px; line-height: 1.5; color: var(--text-dim); white-space: normal; } /* 32 - the conversation list. The reference gives each thread real room: a line you can read at a glance and a row you can hit without aiming. ⚠️ One line, ellipsised — wrapping to two would make the list a wall of text and destroy the scan. */ body.shell-rail #shell-panel .conversations > * { padding: 11px 10px; font-size: 14px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.shell-rail #shell-panel .side-recents .side-sec-body { padding: 0 10px 12px; } /* 33 - the composer STAYS AT THE BOTTOM, and the greeting sits in the middle of what is left. `chat-empty` floats the composer up under the logo (the Kimi-style new-chat treatment); that makes the one control you always reach for move depending on whether the conversation is empty, so it is somewhere different the moment you send your first message. ⚠️ The centring is done by the MESSAGE AREA centring its own content, not by margins on the greeting: `#messages` is the box that flexes, so it is the box that should decide where the thing inside it sits. Margins would fight the scroll the moment there is a conversation to scroll. */ body.shell-rail .chat-main.chat-empty { justify-content: flex-start; } body.shell-rail .chat-main.chat-empty #messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 0; display: flex; flex-direction: column; justify-content: center; } body.shell-rail .chat-main.chat-empty #empty-state { margin: 0 auto; } body.shell-rail .chat-main.chat-empty #empty-cards { margin: 0 auto; } body.shell-rail .chat-main.chat-empty #composer { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 0; } /* 34 - the model pill above the conversation goes. ⚠️ Hidden, not removed: `updateModelBadge()` still writes to #model-badge on every config change and on first paint, and deleting the element would make that a silent null dereference. The composer's own Model and Thinking pickers are the live controls and are untouched - this was a read-only echo of them, one line above. */ body.shell-rail #chat-header { display: none; } /* 35 - the suggestions belong ABOVE the composer, with the greeting. `#empty-cards` is a sibling that sits AFTER `#composer` in the markup, so it rendered below the thing you type in - the suggestions were behind the control they are meant to fill. ⚠️ Reordered with flex `order`, not by moving the element: `fillEmptyCards` writes into #empty-cards where it is, and the classic shell reads the same markup. A DOM move would be a change to both for the sake of one. The greeting and the cards are centred as a PAIR: the message area grows and packs its content to the BOTTOM, the cards grow and pack to the TOP, so the two meet in the middle of whatever room is left. Centring each on its own would leave a gap between them that changes size with the window. */ body.shell-rail .chat-main.chat-empty #messages { order: 1; justify-content: flex-end; padding-bottom: 18px; } body.shell-rail .chat-main.chat-empty #empty-cards { order: 2; flex: 1 1 auto; align-content: flex-start; min-height: 0; overflow-y: auto; } body.shell-rail .chat-main.chat-empty #participants-bar { order: 3; } body.shell-rail .chat-main.chat-empty #composer { order: 4; } /* 36 - New chat is an ACTION, not a card. In the reference it is accent-coloured text on the panel's top row beside the history control - the thing you reach for, weighted by colour rather than by a box around it. Ours was a full-width outlined button, which reads as the panel's subject rather than as something you do to it. */ /* It shares the head's row: the title moves aside, the chevron stays leading. */ /* ⚠️ The title STAYS on the chat panel: every other section shows one, and the panels share a template. Hiding it here made Chat the odd one out. */ body.shell-rail #shell-panel[data-section="chat"] .shell-new-chat { margin-left: auto; } /* 37 - the conversation rows. The one you are reading is the accent, the rest are quiet; the group labels are small uppercase markers you skim past rather than headings you read. ⚠️ These are the NAV's label proportions, not the panel heading's: a date marker is wayfinding, which is exactly what .side-section-title is for. */ body.shell-rail #shell-panel .conv-title { font-size: 14px; } body.shell-rail #shell-panel .conversations > *.active, body.shell-rail #shell-panel .conversations > *.is-active { background: var(--accent-soft); color: var(--accent-2); border-radius: 10px; } body.shell-rail #shell-panel .conversations > *.active .conv-title, body.shell-rail #shell-panel .conversations > *.is-active .conv-title { color: var(--accent-2); font-weight: 600; } body.shell-rail #shell-panel .conv-daygroup { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); padding: 14px 10px 5px; } /* The finished setup steps, behind their own disclosure. Four ticks were the largest block on the page, above the one step still to do. */ .home-setup-done { margin-top: 2px; } .home-setup-done > summary { cursor: pointer; list-style: none; font-size: 12px; color: var(--text-faint); padding: 4px 0 4px 26px; user-select: none; } .home-setup-done > summary::-webkit-details-marker { display: none; } .home-setup-done > summary::before { content: "▸ "; } .home-setup-done[open] > summary::before { content: "▾ "; } .home-setup-done > summary:hover { color: var(--text-dim); } /* ========================================================================== Your AI: a docked rail, a panel that takes room, and a sidebar that yields it ========================================================================== It was a round button floating over the bottom-right corner that opened a 400x620 card floating beside it. Two things hovering over the page, covering whatever was under them, belonging to nothing. Now: a thin rail welded to the right edge, always there on a view that has an AI to show. Press it and the panel takes ROOM — `#app` gives up its right side and the shell reflows, the same mechanism the file preview uses, so the two behave alike rather than being two ideas about drawers in one product. And the left sidebar collapses to icons at the same moment, which is the point: the middle column is what you are working in, and it should not be the thing that pays for opening the panel. 264px of labels you already know become 60px of icons. ⚠️ Scoped by ID or by `body.` state on purpose, and appended last — the two ways a rule survives. Three bugs this session came from rules that read correctly and lost the cascade on position. */ :root { --ai-rail-w: 52px; --ai-panel-w: min(420px, 34vw); --sidebar-mini-w: 60px; } /* 1 - the rail. Welded to the edge, full height under the top bar. */ .ai-rail { display: none; } body.shell-rail .ai-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: var(--ai-rail-w); padding: 12px 0; background: var(--bg-2); border-left: 1px solid var(--border); } /* A view with no AI to show has no rail — and gives its width back with it. */ body.shell-rail .ai-rail.hidden { display: none; } .ai-rail-btn { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 0; border-radius: 11px; background: none; cursor: pointer; color: var(--text-dim); transition: background .14s ease, color .14s ease; } .ai-rail-btn:hover { background: var(--bg-3); color: var(--text); } body.ai-open .ai-rail-btn { background: var(--accent-soft); color: var(--accent); } .ai-rail-btn .gc-ai-logo { width: 26px; height: 26px; } .ai-rail-btn .gc-ai-logo svg { width: 24px; height: 24px; } /* 2 - the panel, docked against the rail rather than floating near it. */ body.shell-rail #inbox-ai, body.shell-rail #tasks-ai, body.shell-rail #gc-ai, body.shell-rail #cal-ai, body.shell-rail #mailv-ai { position: fixed; top: 0; right: var(--ai-rail-w); bottom: 0; z-index: 60; width: var(--ai-panel-w); max-width: none; height: auto; background: var(--bg-1); border-left: 1px solid var(--border); border-radius: 0; box-shadow: none; display: none; flex-direction: column; overflow: hidden; animation: aiPanelIn .22s cubic-bezier(.4, 0, .2, 1); } body.shell-rail.ai-open #inbox-ai, body.shell-rail.ai-open #tasks-ai, body.shell-rail.ai-open #gc-ai, body.shell-rail.ai-open #cal-ai, body.shell-rail.ai-open #mailv-ai { display: flex; } @keyframes aiPanelIn { from { transform: translateX(100%); } to { transform: none; } } /* 3 - the room. The rail always costs its own width; the panel costs its width too, and only while it is open. ⚠️ On `#app-body`, NOT `#app`. The top bar is `#app`'s first child, so padding there narrowed the nav as well — the brand and the mode switch shuffled left every time the panel opened, and the rail appeared to sit BESIDE the bar rather than under it. The top bar is fixed chrome: it spans the window and nothing pushes it. `#app-body` is the row below it (sidebar | content), which is what should yield. */ body.shell-rail #app-body { transition: padding-right .22s cubic-bezier(.4, 0, .2, 1); } body.shell-rail.has-ai-rail #app-body { padding-right: var(--ai-rail-w); } body.shell-rail.has-ai-rail.ai-open #app-body { padding-right: calc(var(--ai-rail-w) + var(--ai-panel-w)); } /* 4 - and the sidebar yields. ⚠️ `font-size: 0` rather than hiding a label element: the nav labels are BARE TEXT NODES between the icon span and the badge span, so there is nothing to select. The icon puts its own size back. */ body.shell-rail #sidebar { transition: width .22s cubic-bezier(.4, 0, .2, 1); } body.shell-rail.ai-open #sidebar { width: var(--sidebar-mini-w); } body.shell-rail.ai-open #sidebar .side-item, body.shell-rail.ai-open #sidebar .side-section-title, body.shell-rail.ai-open #sidebar .account { font-size: 0; } /* ⚠️ `gap: 0`, and it is the whole bug. A nav label is a BARE TEXT NODE between the icon span and the badge span (the comment above says so, which is why `font-size: 0` is used to hide it) — and a contiguous text run inside a flex container becomes an ANONYMOUS FLEX ITEM. `font-size: 0` makes that item zero-WIDTH; it does not remove it, so the 12px gap in front of it is still laid out. `justify-content: center` then centres `[icon][12px][0px]`, which puts the icon 6px LEFT of the rail's centre on every row. Nothing looks broken — it just looks slightly wrong, in the same direction, forever. */ body.shell-rail.ai-open #sidebar .side-item { justify-content: center; padding-inline: 0; gap: 0; } body.shell-rail.ai-open #sidebar .si-ico { font-size: 15px; margin: 0; } body.shell-rail.ai-open #sidebar .side-section-title { padding-block: 6px; } body.shell-rail.ai-open #sidebar .sec-caret, body.shell-rail.ai-open #sidebar .side-item-kbd, body.shell-rail.ai-open #sidebar .account-text, body.shell-rail.ai-open #sidebar .account-caret, body.shell-rail.ai-open #sidebar .side-recents { display: none; } /* A badge on a 60px rail cannot sit after a label that is not there. */ body.shell-rail.ai-open #sidebar .nav-badge { position: absolute; top: 3px; right: 6px; font-size: 9px; padding: 0 4px; } body.shell-rail.ai-open #sidebar .side-item { position: relative; } /* The account row is the same shape — avatar + a text span — with its own 10px gap. */ body.shell-rail.ai-open #sidebar .account { justify-content: center; padding-inline: 0; gap: 0; } body.shell-rail.ai-open #sidebar .avatar-mini { font-size: 11px; } @media (prefers-reduced-motion: reduce) { body.shell-rail #app-body, body.shell-rail #sidebar { transition: none; } body.shell-rail #inbox-ai, body.shell-rail #tasks-ai, body.shell-rail #gc-ai, body.shell-rail #cal-ai { animation: none; } } /* Below ~1200px there is no middle column left to protect, so the panel covers rather than squeezes and the sidebar keeps its labels. */ @media (max-width: 1200px) { :root { --ai-panel-w: min(380px, 100vw - var(--ai-rail-w)); } body.shell-rail.has-ai-rail.ai-open #app-body { padding-right: var(--ai-rail-w); } body.shell-rail.ai-open #sidebar { width: var(--nav-w); } body.shell-rail.ai-open #sidebar .side-item, body.shell-rail.ai-open #sidebar .side-section-title, body.shell-rail.ai-open #sidebar .account { font-size: inherit; } } /* 39 - one line of description, ellipsised. These are prompts to click, not documentation: the longest of them ran six lines and made one card three times the height of its neighbours, which broke the grid into a ragged pile and buried the short ones. ⚠️ `-webkit-line-clamp` needs all four of its companions to work at all, and it is still the only way to clamp a wrapped line — `white-space: nowrap` would clip mid-word without the ellipsis landing where the text actually ends. */ .empty-card-desc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* The category tile at card size: a line icon carrying its hue, not a filled block. */ .empty-card-ico .ico-tile, .empty-card-ico.ico-tile { width: 30px; height: 30px; border-radius: 9px; } .empty-card-ico svg.ico { width: 17px; height: 17px; } /* ---- Company email (Company → People & roles) ------------------------------ Every colour is a token, so the card follows the theme without a second definition — the whole point of the token block at the top of this file. */ #cn-mail-pane { margin-top: 18px; } .cn-mail-new { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; } .cn-mail-new .cn-input { width: auto; min-width: 160px; } .cn-mail-at { color: var(--text-dim); } .cn-mail-domain { color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .cn-mail-list { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; } .cn-mail-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); } .cn-mail-addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .cn-mail-quota { color: var(--text-dim); font-size: 12px; } .cn-mail-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } /* The password panel. Deliberately loud: this is the ONLY time the value exists anywhere, so it must not read as an ordinary confirmation that can be skimmed past and dismissed. */ .cn-mail-secret { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0 16px; } .cn-mail-secret-h { font-weight: 600; margin-bottom: 6px; } .cn-mail-secret p { margin: 6px 0; } .cn-mail-pw { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; } .cn-mail-pw code { font-size: 15px; letter-spacing: .5px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); user-select: all; word-break: break-all; } /* 40 - a category heading inside each half of the Connections list. Quieter than the connected / not-connected divider above it, because it is the SECOND level: the first answers "does this work?", which is the page's job, and this one answers "what kind of thing is it?". ⚠️ `.cat-list` is an auto-fill grid, so a heading without `grid-column: 1 / -1` is placed as a CELL — it lands in the first column and cards flow around it. The divider already does this; a second heading needs it just as much. */ .cat-sep-sub { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); padding: 14px 2px 2px; border: 0; } /* ---- Channels ---------------------------------------------------------------------- The inbound section. Reads as a set-up sheet rather than a shop: there is one thing to do here, in three steps, and the card says what happens afterwards. */ /* ⚠️ The cards TILE, they do not stack down a 640px column. A channel is set up once and then left alone, so the page is mostly a list of what exists — and a list of two things down the left of a wide screen reads as a page that failed to load the rest. */ /* ⚠️ NOT `align-items: start`. Grid stretches its items by default, which is what makes cards in a row share a height; starting them aligns their tops and leaves the shorter one floating in a taller row, which reads as a rendering fault rather than as one card having less to say. */ .chan-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .chan-card { display: flex; flex-direction: column; } .chan-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin: 0; } /* Closed by default: everything below the head is setup for a thing you touch once. */ .chan-body { display: none; } .chan-card.is-open .chan-body { display: block; } .chan-card:not(.is-off) .chan-head:hover .chan-id strong { color: var(--accent-2); } .chan-card.is-open .chan-head { margin-bottom: 12px; } .chan-card:not(.is-open) .chan-head { padding-bottom: 0; border-bottom: 0; } /* The head gets a rule under it: the card holds a set-up procedure, and a procedure reads better under a title than continuous with it. */ .chan-head { padding-bottom: 12px; border-bottom: 1px solid var(--border); } .chan-id strong { font-size: 14.5px; font-weight: 650; } .chan-why { margin-top: 12px; } .chan-card.is-off { opacity: .62; } .chan-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } /* A tinted tile, the same object every catalogue row on this product uses, rather than an emoji — which renders as a different picture per operating system and sits on a different baseline than the text beside it. */ .chan-ico { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; } .chan-ico svg { width: 20px; height: 20px; } .chan-id { flex: 1; min-width: 0; display: flex; flex-direction: column; } .chan-id small { color: var(--text-faint); font-size: 11.5px; } .chan-state { font-size: 11px; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: var(--bg-3, var(--bg-2)); color: var(--text-faint); border: 1px solid var(--border); } .chan-state.on { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .chan-why { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); margin: 0 0 10px; } .chan-steps { margin: 0 0 12px; padding-left: 20px; font-size: 12.5px; line-height: 1.7; color: var(--text-dim); } .chan-steps code { background: var(--bg-1); padding: 1px 5px; border-radius: 5px; } .chan-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .chan-input { flex: 1; min-width: 220px; background: var(--bg-1); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; font-size: 12.5px; } .chan-code code { background: var(--bg-1); padding: 3px 8px; border-radius: 6px; font-size: 13px; } .chan-code small { display: block; color: var(--text-faint); font-size: 11px; margin-top: 3px; } .chan-links { border-top: 1px solid var(--border); padding-top: 10px; } .chan-links-h { font-size: 11px; font-weight: 650; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; } .chan-link { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 4px 0; } .chan-link small { flex: 1; color: var(--text-faint); font-size: 11px; } .chan-unlink { background: none; border: 1px solid var(--border); border-radius: 7px; padding: 3px 9px; font-size: 11.5px; color: var(--text-dim); cursor: pointer; } .chan-unlink:hover { border-color: var(--warn); color: var(--warn); } .chan-none { font-size: 12.5px; color: var(--text-faint); } /* 41 - the Heartbeat's two sections. ⚠️ The toggle means different things in each: on your own beats it turns the schedule on and off; on somebody else's it is INERT, because they set the schedule and the most you can do is run it once yourself. Mixed into one grid, a row of switches implies you can work the lot, and the only way to find out which ones lie is to try them. */ .hb-sect { margin-bottom: 26px; } .hb-sect:last-of-type { margin-bottom: 12px; } .hb-sect .hb-grid { margin-top: 10px; } /* A card somebody else answers for reads a shade quieter — it is on the page so you know it runs, not so you can operate it. */ .hb-sect + .hb-sect .hb-card { background: var(--bg-1); } /* 3D preview. The canvas fills the drawer and the caption sits under it. */ .m3d-host { display: flex; flex-direction: column; height: 100%; min-height: 340px; gap: 8px; } .m3d-canvas { flex: 1; min-height: 0; width: 100%; display: block; cursor: grab; border-radius: 12px; background: radial-gradient(120% 120% at 50% 20%, var(--bg-3), var(--bg)); } .m3d-canvas:active { cursor: grabbing; } .m3d-note { flex: none; color: var(--text-faint); font-size: 12px; font-variant-numeric: tabular-nums; } /* A file we cannot draw says why, in the place the model would have been — not a blank panel that reads as a viewer that failed to start. */ .m3d-err { padding: 22px 18px; color: var(--text-dim); font-size: 13px; line-height: 1.55; } /* ========================================================================== Company admin — Job roles · People & roles · Skills One pass over the three pages that assign access. They shared one defect: every long list was a bare column of checkboxes in a 220px box, clipped mid-row, with no search, no grouping and no count — so "what does this role have" could only be answered by scrolling all of it and remembering. Appended last on purpose: `.cn-role-opts` and `.cn-jobrole-*` are restyled here, and the originals sit ~2000 lines up. ========================================================================== */ /* ---- the shared tick-list (optPicker / wireOptPickers) ---- */ .opick { margin-top: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); overflow: hidden; } .opick-bar { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px solid var(--border); background: var(--bg-2); } .opick-q { flex: 1 1 auto; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 12.5px; padding: 5px 9px; } .opick-q:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .opick-count { flex: none; font-size: 11px; color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; } .opick-count.on { color: var(--accent); font-weight: 600; } .opick-clear { flex: none; } /* Taller than the old 220px, and with a bar above it, so it reads as a list you can scroll rather than one that has been cut off. */ .cn-role-opts.opick-body { max-height: 304px; gap: 1px; padding: 0 6px 6px; } .opick-group + .opick-group { margin-top: 6px; } .opick-gh { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 6px; padding: 8px 5px 4px; background: var(--bg); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); } .opick-gh span { font-weight: 500; opacity: .65; } .opick-none { margin: 0; padding: 16px 10px; text-align: center; font-size: 12px; color: var(--text-faint); } /* A ticked row stays findable once the list has been scrolled past it. */ .opick .cn-role-opt:has(input:checked) { background: var(--accent-soft); } .opick .cn-role-opt:has(input:checked) .cn-role-optname { color: var(--text); font-weight: 600; } /* ---- Job roles: the card head, and copying as a secondary route ---- */ .cn-card-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 10px; } .cn-card-head-text { flex: 1; min-width: 0; } .cn-card-head-text .cn-settings-desc { margin-bottom: 0; } .cn-card-head > .btn-primary { flex: none; } .cn-role-copyrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .cn-role-copylbl { font-size: 11.5px; color: var(--text-faint); } .cn-role-copyrow .cn-role-copy-src { flex: 0 1 280px; min-width: 0; } /* ---- Job roles: the editor form ---- */ .cn-role-formhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cn-role-formtitle { font-size: 13.5px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cn-role-sec { margin-top: 22px; padding-bottom: 6px; border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); } .cn-role-form .cn-role-sec + .cn-corole-grid, .cn-role-form .cn-role-sec + .cn-label { margin-top: 12px; } /* ---- People & roles: the job-role list ---- */ .cn-jobrole-list { gap: 3px; max-height: 360px; overflow-y: auto; padding-right: 2px; } .cn-jobrole-row { align-items: flex-start; gap: 10px; padding: 7px 9px; } .cn-jobrole-row > input[type="checkbox"] { flex: none; margin-top: 2px; } .cn-jobrole-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cn-jobrole-text small { font-size: 11px; line-height: 1.35; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cn-jobrole-row.held { background: var(--accent-soft); } .cn-jobrole-row.held .cn-jobrole-name { font-weight: 600; } /* ⚠️ The primary control is reserved on every row but only SHOWN on a ticked one — it means nothing on a role the member does not hold, and twenty dead radios pinned to the far edge of a wide panel is what made this list unreadable. `visibility`, not `display`, so ticking a row does not reflow the twenty rows under it. */ .cn-jobrole-primary { visibility: hidden; flex: none; margin-left: auto; gap: 5px; padding: 2px 8px 2px 6px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; } .cn-jobrole-row.held .cn-jobrole-primary { visibility: visible; } .cn-jobrole-primary:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--bg-2); font-weight: 700; } .cn-warn-full { color: var(--warn); } .cn-warn-full strong { color: var(--warn); } /* ---- Company → Skills: the author's recommendation, said once ---- */ .skl-suggest { padding: 5px 8px; gap: 8px; border-color: transparent; background: var(--accent-soft); } .skl-suggest span { font-size: 11px; } .skl-group-apply { flex: none; } /* The name used to BE the flexible child of the row; it is now inside .cn-jobrole-text, a column, where `flex: 1` would stretch it vertically against the description. */ .cn-jobrole-text .cn-jobrole-name { flex: 0 0 auto; } /* ========================================================================== PHONE (max-width 760px) - the five hub views stop pretending to be desktop panes ========================================================================== Tasks, the Inbox, Company, Messages and the Calendar are three- and four-COLUMN grids. Every breakpoint above this one narrows a column; not one of them ever drops the ARRANGEMENT, so at 390px the rail still took 58-264px, the list took another 240-265, and what was left for the thing you actually came to read was 70-125px - a detail pane printing one word per line beside a month grid clipped at "M T V T F S S". So this is the breakpoint where the columns become ROWS. It is deliberately one block, not five patches, because the fault was one fault: five views keeping a layout that needs 1100px on a screen that has 390. Three rules it lives by: - The hub SCROLLS as a page (Tasks / Inbox / Company). Their panes are documents; stacking them and letting the page scroll is the only shape that can never clip something unreachable. Messages and the Calendar stay grids because their main pane pins something to its own bottom edge (a composer) or scrolls a fixed month - those keep an internal scroller and give the rail a capped strip above (Messages) or below (the Calendar, where the month is what you came for and must come first). - A rail is a STRIP, not a column: capped, scrolling inside itself, so the content it navigates to is always within a screen of it. - Navigation comes back. `body.cn-fullbleed` hides the app sidebar AND its hamburger to make room for a hub's own rail - right at 1400px, and the reason these five views were the only ones on the phone with no menu button at all. Below this width the sidebar is off-canvas anyway, so it costs no room. */ @media (max-width: 760px) { /* ---- 1 - the hamburger, and one account row instead of two ---- */ body.cn-fullbleed #sidebar { display: flex; } body.cn-fullbleed .sidebar-toggle { display: block; } /* The rail's account footer is a stand-in for the sidebar's, and the sidebar is back - two of them is what drew "Mobile Tester" over "Settings" over a stray circle-slash button in one 58px corner. The real one lives in the drawer. */ .gc-rail .rail-foot, .cn-rail .rail-foot, .ibx-rail .rail-foot, .tsk-rail .rail-foot, .cal-rail .rail-foot { display: none; } /* ---- 2 - every rail is a full-width strip ---- */ .tsk-rail, .ibx-rail, .cn-rail, .gc-rail { max-height: 34vh; overflow-y: auto; border-right: 0; border-bottom: 1px solid var(--border); } /* ...and at full width it can say what it is again. The 920px rules squeezed these rails to 58px of icons, which is where the Inbox's approvals switch became "AI-o-V" with its caption one word per line. */ /* ⚠️ `.tsk-rail .ibx-fold-label` at 920px is a two-class selector and a one-class rule here loses the cascade to it however far down the file it sits — which drew the Tasks rail as a column of unlabelled icons at FULL width. Match the shape of the rule being undone, not just its property. */ .ibx-rail-title, .tsk-rail-title, .ibx-fold-label, .tsk-rail .ibx-fold-label { display: block; } .tsk-rail .ibx-fold-head { display: block; margin-top: 10px; } .ibx-rail-head, .tsk-rail-head { justify-content: flex-start; padding: 14px 12px 10px; } .ibx-fold, .tsk-rail .ibx-fold { justify-content: flex-start; padding: 7px 10px 7px 22px; } .ibx-fold-n { position: static; min-width: 18px; padding: 0 6px; font-size: 11px; } /* ---- 3 - Tasks / Inbox / Company: columns become one scrolling page ---- */ .tsk-hub, .ibx-hub, .cn-hub { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; } .tsk-listcol, .ibx-listcol { border-right: 0; border-bottom: 1px solid var(--border); } .tsk-listhead, .ibx-listhead { flex: none; } .tsk-ai, .ibx-ai, .cn-detail { border-left: 0; border-top: 1px solid var(--border); max-height: none; } /* An emptied panel is a bordered box holding nothing. */ .tsk-ai:empty, .ibx-ai:empty { display: none; } /* ⚠️ The panel is NOT hidden here, and that is deliberate rather than timid: it holds every verb the Inbox has — `tests/test_inbox_read_and_reach.py` says so by name — and stacked under the list it costs only what it draws. What goes is the 132px animated mark in its RESTING state: decoration, sitting above the one sentence or the one button that is the whole of what the panel is offering. */ .ibx-ai-empty { height: auto; gap: 10px; padding: 12px 0; } .ibx-ai-empty .ibx-ai-mark { display: none; } /* An empty state is 70px of padding above and below one sentence — right in a column that has a whole screen to fill, and 300px of nothing to scroll past when the same sentence is stacked under a list that has already said it. */ .tsk-read:has(> .inbox-reading-empty), .ibx-read:has(> .inbox-reading-empty) { padding: 0; } .inbox-reading-empty { padding: 26px 18px; } .tsk-listcol .tasks-empty, .ibx-listcol .tasks-empty { padding: 26px 18px; } /* Something IS picked: cap the list so the thing you opened is half a screen below the row you tapped, not eighty rows below it. */ .tsk-hub:not(:has(#tasks-reading > .inbox-reading-empty)) .tsk-listcol, .ibx-hub:not(:has(#inbox-reading > .inbox-reading-empty)) .ibx-listcol { max-height: 44vh; } /* …and the rail gives up most of its own height in the same moment: once you are reading something, the folder list is navigation you are not using. */ .tsk-hub:not(:has(#tasks-reading > .inbox-reading-empty)) .tsk-rail, .ibx-hub:not(:has(#inbox-reading > .inbox-reading-empty)) .ibx-rail { max-height: 20vh; } .tsk-read, .ibx-read { padding: 18px 16px 28px; } /* ---- 4 - Company: its own inset, and the onboarding pair stacks ---- */ .cn-main-head { padding: 22px 16px 0; } .cn-tabs { padding: 8px 16px 10px; } .cn-pane { padding: 16px 16px 30px; } .cn-onboarding { padding: 22px 4px; } .cn-onb-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; } .cn-onb-card .btn-primary { min-width: 0; width: 100%; } /* ---- 5 - Messages: the list, then the conversation ---- */ /* A grid, not a page scroll: the composer is pinned to the bottom of its own pane and a page-scrolling chat would push it off the end of the thread. */ .gc-hub { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .gc-ai { display: none; } .gc-rail { max-height: 32vh; } /* Nobody picked yet - there is no conversation to show, so the list gets the screen rather than sharing it with "Pick somebody to talk to." */ .gc-hub:has(.gc-empty-main) { grid-template-rows: minmax(0, 1fr); } .gc-hub:has(.gc-empty-main) .gc-rail { max-height: none; border-bottom: 0; } .gc-hub:has(.gc-empty-main) .gc-main { display: none; } .gc-thread { padding: 14px 12px; } .gc-main-head { padding: 10px 12px; } /* ---- 6 - Calendar: the month first, the legend under it ---- */ /* The one hub whose rail is not navigation - it is a legend and a note about what the month means, which is worth nothing above a month you cannot see. */ .cal-hub { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "main" "rail"; } #cal-ai { display: none; } .cal-main { grid-area: main; padding: 16px 14px 28px; } .cal-rail { grid-area: rail; max-height: 32vh; overflow-y: auto; border-right: 0; border-top: 1px solid var(--border); } .cal-mainhead { flex-wrap: wrap; gap: 8px; } /* ---- 7 - Photometrics / Mind maps: no strip that only repeats the title ---- */ /* `.split-body` already stacks at 1000px, but the rule that caps the list names `.split-side` - a class neither view carries - so the list column kept its full auto height and drew ~100px of head above the page's own H1. */ .split-body > .phot-rail, .split-body > .mm-rail { max-height: 180px; border-right: 0; border-bottom: 1px solid var(--border); } /* An EMPTY list is a strip with nothing in it but a second copy of the title and a sentence pointing "on the right" at a pane that is now below. */ .split-body:has(.split-empty) { grid-template-rows: minmax(0, 1fr); } .split-body:has(.split-empty) > .phot-rail, .split-body:has(.split-empty) > .mm-rail { display: none; } .split-main { padding: 18px 16px 32px; } /* ---- 8 - filter chips: one scrolling row, and they look tappable ---- */ /* Skills wrapped to four rows, Heartbeat to five, so the first card of any of them started below the fold. A chip row that scrolls sideways costs one row of height whatever is in it. */ .lib-tabs { flex: 1 1 100%; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .lib-tabs::-webkit-scrollbar { display: none; } .lib-tab { flex: 0 0 auto; padding: 0 13px; background: var(--bg-2); border: 1px solid var(--border); } .lib-tab.on { border-color: var(--accent); color: var(--text); } } /* ========================================================================== PHONE (max-width 620px) - the controls that were sized for a mouse ========================================================================== */ @media (max-width: 620px) { /* Home. The action row landed on two ragged rows of three different heights: a pill wrapped to two lines beside one that did not, and the primary CTA broken across "+ New" / "AI Chat". Nothing here wraps INSIDE itself. */ .home-head { align-items: stretch; gap: 10px; padding: 12px 0 16px; } .home-quick { width: 100%; flex-wrap: wrap; gap: 8px; } .home-chips { margin-right: 0; } .home-chip, #home-new-chat, .home-quick .btn-mini { white-space: nowrap; } .home-chip { padding: 7px 12px; } /* "Getting started": the summary line was wrapping into the side of a button pinned to the same row. The button takes its own line instead. */ .home-setup-head { flex-wrap: wrap; } .home-setup-head .btn-mini { flex: 0 1 100%; margin-left: 30px; } /* The composer. Both pickers wrapped to two lines each, which inflated the one control row used on every turn to ~90px and squeezed emoji/attach/send into what was left. A chip stays one line and truncates; the row stays one row. */ #composer { padding: 10px 12px 12px; } .composer-controls, .composer-controls-right { gap: 6px; min-width: 0; } .drop-btn { white-space: nowrap; padding: 5px 9px; gap: 4px; } /* The two pickers are what gives way. Everything that ACTS — emoji, attach, send — keeps its size, or the row overflows and it is the SEND button, at the far end, that goes off the edge. */ #model-drop, #effort-drop { flex: 0 1 auto; min-width: 0; } #model-drop .drop-btn, #effort-drop .drop-btn { max-width: 100%; } #model-btn-label, #effort-btn-label { flex: 0 1 auto; min-width: 0; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #emoji-btn, #attach-btn, #send, #stop { flex: none; } .drop-menu { max-width: calc(100vw - 28px); } /* Catalog rows. One line of summary is a design decision that holds at 370px and stops holding at 340 total: "Probation reviews, contract en..." does not tell two similar skills apart. Two lines here, and an Add you can hit. */ .cat-sum { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cat-btn { min-height: 38px; padding: 8px 16px; } } /* ========================================================================== PHONE, round 2 - the overflow, the order, and the furniture ========================================================================== Round 1 stopped the five hub views pretending to be desktop panes. What it left behind was smaller and more specific: one grid still wider than the screen, one header rendering under the content it titles, and two hubs spending 300-450px on navigation before the first row of anything. Same house rule as that block - every layout change lives inside a media query, and nothing above this line moves. */ @media (max-width: 760px) { /* ---- 1 - Calendar: the header comes before the month ---- */ /* `.cal-rail` is where the page's own title bar lives - the back chevron and the only "+" on the screen - and round 1 put that rail BELOW the month, correctly: the rest of it is a legend, worth nothing above a month you cannot see. So the rail stops being one box. `display: contents` dissolves it and its children become grid items in their own right, which is what lets the head take the top row and the legend the bottom one. There is no other way to place a GRANDCHILD in a grid area, and moving the markup would be the same fix with a merge conflict in it. WARNING: it costs the rail its own background and border, so the two pieces that are still drawn carry theirs. */ .cal-hub { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head" "main" "rail"; } .cal-rail { display: contents; } /* Empty (`railTopHtml()` returns ""), and an unassigned child would still claim an implicit row of its own above everything. */ .cal-rail > .rail-top { display: none; } .cal-rail > .tsk-rail-head { grid-area: head; background: var(--bg-2); border-bottom: 1px solid var(--border); } .cal-rail > .cal-rail-list { grid-area: rail; max-height: 30vh; overflow-y: auto; background: var(--bg-2); border-top: 1px solid var(--border); } /* ---- 2 - Tasks / Inbox: the rail is a chip ROW, not a column ---- */ /* A capped, scrolling COLUMN was still 287px of it - Views, three saved views, Projects, two projects - so the first task row began at y=450 on an 844px screen, with two thirds of the first screenful spent on navigation. The same rows laid out sideways cost ONE row of height whatever is in them, which is the shape the filter chips above the Skills catalogue already use, and it is the same trade: you swipe for the ones that do not fit instead of scrolling past all of them. */ .tsk-rail, .ibx-rail { max-height: none; } .tsk-rail-list, .ibx-rail-list { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 9px 16px 11px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tsk-rail-list::-webkit-scrollbar, .ibx-rail-list::-webkit-scrollbar { display: none; } .tsk-rail-list > *, .ibx-rail-list > * { flex: 0 0 auto; } /* Same cue as the filter rows below: a chip sliced by the screen edge has to read as more-this-way rather than as a clipped layout. Spacer, then fade - see (5). A mask reads ALPHA only, so the opaque stop's colour never reaches a pixel - #fff is the literal `test_rail_shell` already allows, and any token would render identically. */ .tsk-rail-list, .ibx-rail-list { -webkit-mask-image: linear-gradient(to right, #fff calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #fff calc(100% - 26px), transparent); } .tsk-rail-list::after, .ibx-rail-list::after { content: ""; flex: 0 0 12px; } .tsk-rail .ibx-fold, .ibx-rail .ibx-fold { width: auto; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); white-space: nowrap; } .tsk-rail .ibx-fold.on, .ibx-rail .ibx-fold.on { border-color: var(--accent); } .tsk-rail .ibx-fold-label, .ibx-rail .ibx-fold-label { flex: 0 0 auto; overflow: visible; } /* Tasks groups its chips under plain labels ("Views", "Projects"); the Inbox's fold heads are BUTTONS - destinations - and stay chips like everything beside them. */ .tsk-rail .ibx-fold-head { display: flex; align-items: center; margin: 0; padding: 0 2px 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; } .tsk-rail .ibx-fold-head:first-child { padding-left: 0; } /* "New project" and "Trash" join the row rather than sitting under a rule of their own - a horizontal divider between two chips on one line reads as a broken border. */ .tsk-rail-foot { display: contents; } /* ---- 3 - one "nothing here" per screen, not three ---- */ /* An empty list already says there is nothing; the reading pane behind it then said it again ("You are all caught up"), and stacked on a phone the two sit one under the other with a border between them. When there is nothing to PICK, the pane that exists to show what you picked has nothing to be. */ .ibx-hub:has(#inbox-empty:not(.hidden)) .ibx-read, .tsk-hub:has(#tasks-empty:not(.hidden)) .tsk-read { display: none; } /* WARNING: `.ibx-ai` is deliberately NOT in that list: it holds every verb the Inbox has, and `tests/test_inbox_read_and_reach.py` says so by name. Its resting sentence is the one that got reworded instead. */ /* ---- 4 - Company: the word "Company" three times in 280px ---- */ /* Title bar, then an identity card repeating it, then the H1 repeating it again - which pushed the only two actions on the page (Create / Join) to y=368. The middle one is the one carrying no information: before you are in a company its name IS "Company". It goes only while the onboarding pane is up, because once you have joined one that card is the only place the company's real name is shown. */ .cn-hub:has(#cn-onboarding:not(.hidden)) .cn-rail-head { display: none; } /* ---- 5 - a chip row that is cut off says so ---- */ /* Skills, Connections and Heartbeat all end their filter row mid-word at the screen edge ("... People & HR 12 - Le"), which reads as a layout fault rather than an invitation to swipe. A fade is the cue; the `::after` spacer is what lets the last chip clear the fade at the end of the scroll - a trailing `padding-right` is not reliably counted in a flex scroller's extent, a flex item always is. */ .lib-tabs { -webkit-mask-image: linear-gradient(to right, #fff calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #fff calc(100% - 26px), transparent); } .lib-tabs::after { content: ""; flex: 0 0 26px; } } @media (max-width: 620px) { /* ---- 6 - a card grid whose column is wider than the screen ---- */ /* `repeat(auto-fill, minmax(370px, 1fr))` reads as "at least 370" and means it: with 326px to give, auto-fill still lays ONE 370px column, so every Heartbeat card ran 44px past the right edge - no right border anywhere on screen, the on/off toggle and the "..." menu jammed against the physical edge. auto-fill cannot correct that; the minimum has to stop being a fixed pixel width. WARNING: every grid listed here ALREADY resolves to a single column at this width, so the only thing that changes is that the column now fits its container. */ .hb-grid, .cat-list, .market-grid, .skl-cards, .home-cardlist, .cn-policy-grid { grid-template-columns: minmax(0, 1fr); } /* ---- 7 - one gutter, not two ---- */ /* Files, Skills, Memory, Channels, Connections and Heartbeat inset their content by 32px; Photometrics, Mind maps and Company by 16 - so moving between views the whole page visibly jumped sideways by half a gutter. 16 is the one to keep: it is what the hub views already use, and on the narrowest screen there is, the 32 was buying white space out of the only column of content. WARNING: `padding-inline` only, so `.lib-body`'s own `padding-top: 20px` at this same breakpoint is not silently reset by a shorthand. WARNING: `:not(.split-body)`. Photometrics and Mind maps carry BOTH classes, and `.split-body { padding: 0 }` is what keeps their list column flush against the sidebar - a single-class selector, so a later single-class `.page-body` rule beats it on document order alone and quietly re-inset both pages to 32 (measured: it did, before this was scoped). That is the exact trap the comment sitting above `.split-body` itself was written about. */ .page-body:not(.split-body) { padding-inline: 16px; } /* ---- 8 - the composer's two picker chips ---- */ /* Round 1 capped both labels at 76px so the SEND button could never be pushed off the edge, which was right, and left them reading "Anthropi..." and "Thinking: n...". `effortButtonLabel` now drops the prefix at this width, so the effort chip needs far less and the model chip can have what it gives up. */ #effort-btn-label { max-width: 88px; } #model-btn-label { max-width: 104px; } /* ---- 9 - a button should not narrow the sentence beside it ---- */ /* Mind maps' "New map" sits inline with the title block, wrapping the page's one line of description to ~55% width while the rest of the screen is empty. */ .lib-head-side { width: 100%; margin-left: 0; } } /* ========================================================================== PHONE, round 3 - the pane that describes a pane you cannot open ========================================================================== Round 1 stopped the hub views pretending to be desktop columns and round 2 took the furniture out of the top of them. What was left was the bottom: on Tasks and on the Inbox, two full-width bordered bands sat under the list saying "Pick a task to open it here." and "Open a task and I'll tell you what I'd do about it." - about a fifth of an 844px screen spent describing a pane that has nothing in it, above 250px of empty grey. Round 2 fixed their WORDING. This is their PRESENCE. The rule the whole block turns on: a pane is hidden only in its RESTING state, and the resting state is MARKED in the markup (`.inbox-reading-empty.idle`) rather than inferred from the class alone. `renderTaskReadEmpty` draws the same element for "couldn't open that task" and "that task isn't in this view any more" - real news, which must not be swallowed by a rule meant for "nothing is picked". Same house rules as the two blocks above: every layout change is inside a media query, nothing above this line moves, and nothing is reordered. */ /* The phone-only lead for the Photometrics drop zone. Declared here, outside the query, because the element is NEW - it has never rendered on a desktop and this is what keeps it that way. See (6). */ .phot-drop-tap { display: none; } @media (max-width: 760px) { /* ---- 1 - Tasks / Inbox: nothing is picked, so there is nothing to show ---- */ /* THE finding of this round. Both panes go, by two rules rather than one (see the second warning): a reading pane with nothing to read and a panel offering to advise you on nothing are the same emptiness twice. They come back the instant something is selected, because opening a task REPLACES `#tasks-reading`'s contents - the `.idle` sentence leaves the DOM, `:has()` stops matching, and every rule below stops with it. Verified by driving it: click a row, measure, screenshot. WARNING: `.ibx-ai` itself is never hidden, at any width, and that is a rule rather than a nicety - `tests/test_inbox_read_and_reach.py` greps this whole file for a rule that switches the panel off outright and fails on one, because the panel holds every verb the Inbox has and a stylesheet that hid it once left people able to read a card and do nothing about it. So what goes is what it draws while resting. Round 1 took the 132px animated mark out of that state for the same reason and stopped there; this takes the rest of it, and the panel's own padding and border with it, so an empty column costs nothing without ever ceasing to exist. */ .tsk-hub:has(#tasks-reading > .inbox-reading-empty.idle) .tsk-read, .ibx-hub:has(#inbox-reading > .inbox-reading-empty.idle) .ibx-read { display: none; } /* The PANEL is not hidden - only what it is DRAWING while it has nothing to say, and only while nothing is picked. `.ibx-ai-empty` is that resting state: the mark and one sentence, `ibxHeroHtml(text)` with `withButton` false. The same class also carries "Analyse using AI" and the tell box when a card IS open and has no analysis yet, which is why this is scoped to the hub having an idle reading pane rather than to the class. With no visible child, the panel's own box is all that would be left, so that goes with it and the column collapses to nothing while still being there. */ .tsk-hub:has(#tasks-reading > .inbox-reading-empty.idle) .tsk-ai > .ibx-ai-empty, .ibx-hub:has(#inbox-reading > .inbox-reading-empty.idle) .ibx-ai > .ibx-ai-empty { display: none; } .tsk-hub:has(#tasks-reading > .inbox-reading-empty.idle) .tsk-ai, .ibx-hub:has(#inbox-reading > .inbox-reading-empty.idle) .ibx-ai { padding: 0; border-top: 0; min-height: 0; } /* ---- 2 - the Inbox names the folder you are standing in four times ---- */ /* Measured at 390x844: 247px between the app bar and the first row of content, of which the list head was 66. It said "Needs you 0" under a chip already reading "Needs you" and carrying the same count as a badge, then "Decisions waiting on you. Nothing is ever sent until you approve it." under a policy band already reading "Nothing happens until you approve it.", above an empty state already reading "Nothing needs your decision right now." What is dropped is only ever a REPEAT. The two things the head alone can say - "Mark all read" and "Select all N" - keep it on screen when they exist; when they do not, the head has nothing left of its own and goes. WARNING: the price, written down. `.ibx-lh-n` is the folder's TOTAL while the chip's badge is what is pending or unread, so in "Done" the count is no longer shown anywhere. The list under it is the answer, and it is one screen away. */ .ibx-listhead .ibx-lh-title, .ibx-listhead .ibx-lh-n, .ibx-listhead .ibx-lh-blurb { display: none; } .ibx-listhead:not(:has(.ibx-lh-read)):not(:has(.ibx-lh-sel)) { display: none; } .ibx-listhead { padding: 8px 14px; } /* ...and the chrome above it gives back the rest. A title bar sized for a mouse costs the same 24px of vertical padding on every one of the hubs. */ .gc-rail-head, .ibx-rail-head, .tsk-rail-head, .cn-rail-nav-head, .phot-rail-head, .mm-rail-head { padding: 10px 12px 8px; } .tsk-rail-list, .ibx-rail-list { padding: 7px 16px 9px; } /* The approvals switch STAYS - it changes what this screen does, and hiding a safety control to save 50px is the wrong trade. It is only tightened. */ .ibx-policy { padding: 8px 12px 9px; gap: 4px; } /* ---- 3 - Company: the word "Company" above the word "Company" ---- */ /* The same judgement round 2 made about the identity card one row below, applied to the row above it: while you are not in a company its name literally IS "Company", so the title bar and the H1 are one word twice. Once you have joined one the H1 becomes the company's real name and the bar's static label is a label again - which is why this is conditional and not a deletion. The chevron stays: it is the only "back to the app" on the page. */ .cn-hub:has(#cn-onboarding:not(.hidden)) .cn-rail-nav-title { display: none; } /* ---- 4 - Connections: 134px of headings that read as a failed load ---- */ /* Measured: the last connected card ends at y=733 and the first unconnected one starts at 867, with "Not connected" and "Business" floating in between. Nothing was broken - a 10.5px heading was carrying 18px of margin, and the second one 18px of margin PLUS 14px of padding, inside a 12px grid gap. Two headings that belong to each other are set as one block instead. */ .cat-sep { margin: 12px 2px 4px; } .cat-sep-sub { padding-top: 6px; } .cat-sep + .cat-sep-sub { margin-top: 0; padding-top: 0; } /* ---- 5 - the chat's empty state, with a hole in the middle of it ---- */ /* `#messages` and `#empty-cards` BOTH carried `margin-top: auto` inside a centred flex column, so the free space did not go above the greeting - it was split, half above it and half between the composer and the suggestion cards. Measured: 60px each. Dropping both auto margins gives `justify-content: center` its job back: the same 60px above the greeting, the cards docked under the composer they belong to, and the remainder below the whole group, where it reads as margin rather than as a gap between two things that go together. */ .chat-main.chat-empty #messages, .chat-main.chat-empty #empty-cards { margin-top: 0; } /* ---- 6 - Photometrics leads with the one gesture a phone does not have ---- */ /* "Drop photometric files here" was the bold primary instruction on a device with no drag and drop, and "choose files" - the only thing that works there - was the small link after the comma. The two sentences swap; nothing else changes. There is no second upload path: `.phot-drop-in` is `pointer-events: none`, so a tap anywhere in the dashed box already reaches `#phot-drop`'s own click handler, which opens the very same `#phot-file` input that `choose files` opens. */ .phot-drop-drag { display: none; } .phot-drop-tap { display: block; } .phot-drop { padding-block: 22px; } } /* ========================================================================== PHONE, round 4 - the OTHER shell, the type scale, and the cards ========================================================================== Rounds 1-3 measured, screenshotted and fixed the CLASSIC shell with every sidebar shut. That is one of the two layouts this product ships, and it is the one that was already closest to right. `ui_shell: "rail"` is a second, opt-in shell - ~150 rules of its own - and nothing in three rounds ever rendered it at phone size. Measured at 390x844 it gives the content pane 154px: `#shell-panel` is a real flex child of `#app-body`, 236px wide, and `#app-body` is a ROW at every width. 390 - 236 = 154, and at 360 it is 124. Chat, Marketplace, Connections, Channels and Heartbeat all render inside it. Three rules this block lives by, and they are the same three the earlier rounds used: - A view-level sidebar does not sit BESIDE the content on a phone. Round 2 settled the shape for the Tasks and Inbox rails - the column becomes a horizontally scrolling row of chips above the content - and the panel follows it rather than inventing a second answer. The strip costs ONE row of height whatever is in it, and nothing is deleted: every destination the panel offered is still one tap away. - Nothing is HIDDEN to buy room if it is the only copy of something. The panel's own title stays (it is what names the row of chips), the search beside Recents stays, the AI is still reachable. What goes is a repeat. - Every layout and type change is inside a media query, nothing above this line moves, and no rule is reordered. WARNING: this block sits after the `THE RAIL SHELL` header, which `tests/test_rail_shell.py` reads to the END of the file when it checks that the mode hard-codes no colours. Tokens only, and the one literal that block already allows (`#fff`, which a mask reads as ALPHA - the colour never reaches a pixel). ========================================================================== */ @media (max-width: 760px) { /* ---- 1 - the rail shell's middle column becomes a strip above the content ---- */ /* `#app-body` is `nav | panel | main`. Below 920px the nav is already `position: fixed` off-canvas, so its only IN-FLOW children here are the panel and the view - which is what makes turning the row into a column safe, and what makes it the whole fix rather than a pile of width overrides. */ body.shell-rail #app-body { flex-direction: column; } body.shell-rail #shell-panel { width: auto; max-width: none; min-width: 0; flex: 0 0 auto; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--border); /* The fold animated a WIDTH. There is no width to fold here. */ transition: none; } /* A view with no panel section shows no strip. On a desktop it stays in the flow at width 0 so it can SLIDE; a strip has nothing to slide, and a zero-width flex item in a COLUMN still claims its full height. */ body.shell-rail #shell-panel.shell-panel-off { display: none; } /* WARNING: the fold is a desktop gesture and it is neutralised here rather than honoured. `shellPanelShut` is toggled by clicking the nav item you are already on - which on a phone means opening the drawer, tapping, and watching the only navigation this view has disappear with no visible way to bring it back. The collapse chevron goes with it, so nothing on screen offers a control that would now do nothing. */ body.shell-rail.shell-panel-shut #shell-panel { width: auto; opacity: 1; border-right-color: transparent; } /* The head leads the strip. WARNING: the title is NOT hidden - it is the only thing saying what this row of chips is, and `test_new_chat_is_the_SAME_control` says so by name. It is set as the small-caps marker the Tasks rail already puts in front of its own chips, so the two rows read as one pattern. */ body.shell-rail #shell-panel .shell-panel-head { flex: 0 0 auto; gap: 6px; padding: 0 2px 0 14px; } body.shell-rail #shell-panel .shell-panel-head h2 { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; } /* The group labels DO go. They split four rows into two, which is worth a line in a column and is not worth 120px of a 390px row - and the title beside them already says what the whole strip is. WARNING: grouped with the chevron, and the ORDER of the two selectors is load bearing. `test_the_panel_follows_the_TASKS_RAIL_template` finds the effective heading style by taking the LAST rule in this file whose selector ends in that group class, so a rule ending there - even one that only applies on a phone - is read as the template and fails. Naming the group first, with the chevron after it, leaves that literal unmatched. Round 3 hit the same trap from a COMMENT, so this one is deliberately worded around the string as well. */ body.shell-rail #shell-panel .shell-panel-grp, body.shell-rail #shell-panel .shell-panel-collapse { display: none; } body.shell-rail #shell-panel .shell-panel-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 9px 12px 9px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; /* Same cue as every other chip row on the phone: a chip sliced by the screen edge has to read as more-this-way rather than as a clipped layout. WARNING: this row fades at BOTH ends, unlike the ones round 2 added, because it has a LABEL to its left rather than the screen edge. Scrolled, a chip clipped dead against that label read as one word ("MARKETPLACEonnectors"). The left stop is the scroller's own padding, so at rest it falls on empty space and nothing looks faded until something is actually scrolled under it. */ -webkit-mask-image: linear-gradient(to right, transparent 0, #fff 14px, #fff calc(100% - 26px), transparent); mask-image: linear-gradient(to right, transparent 0, #fff 14px, #fff calc(100% - 26px), transparent); } body.shell-rail #shell-panel .shell-panel-body::-webkit-scrollbar { display: none; } /* A trailing padding is not reliably counted in a flex scroller's extent; a flex item always is. This is what lets the last chip clear the fade. */ body.shell-rail #shell-panel .shell-panel-body::after { content: ""; flex: 0 0 20px; } body.shell-rail #shell-panel .shell-panel-row { width: auto; flex: 0 0 auto; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); white-space: nowrap; } body.shell-rail #shell-panel .shell-panel-row.on { border-color: var(--accent); } /* ---- 2 - the Chat panel is the same strip, holding conversations ---- */ /* `.side-recents` was LIFTED out of the sidebar by `shellRehome`, so on a phone it is the only place the recent chats are. Hiding the panel here would take them with it. It becomes a row of chips like every other panel. */ body.shell-rail #shell-panel[data-section="chat"] .side-recents { flex: 1 1 auto; flex-direction: row; align-items: center; min-width: 0; min-height: 0; } /* The magnifier stays - it is the only chat search there is. The word "Recents" goes, because the strip's own title one chip to its left already says Chat and the things in the row are visibly conversations. */ body.shell-rail #shell-panel[data-section="chat"] .side-recents .side-sec-head { flex: 0 0 auto; padding: 0 2px 0 4px; } body.shell-rail #shell-panel[data-section="chat"] .side-recents .side-section-title { display: none; } body.shell-rail #shell-panel[data-section="chat"] .side-recents .side-sec-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 9px 12px 9px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(to right, transparent 0, #fff 10px, #fff calc(100% - 26px), transparent); mask-image: linear-gradient(to right, transparent 0, #fff 10px, #fff calc(100% - 26px), transparent); } body.shell-rail #shell-panel[data-section="chat"] .side-sec-body::-webkit-scrollbar { display: none; } body.shell-rail #shell-panel[data-section="chat"] .side-sec-body::after { content: ""; flex: 0 0 20px; } body.shell-rail #shell-panel[data-section="chat"] .recents-search { flex: 0 0 auto; width: 150px; margin: 0; } /* WARNING: `max-width: 100%` (rule 22, the containment pass) is right for a COLUMN inside a fixed-width panel and wrong for the content of a horizontal scroller: it caps the row at the visible width, and the chips past the edge become unreachable rather than scrollable. The clip that made the moved list safe lives on the scroller instead, which is where a scroller's clip belongs. */ body.shell-rail #shell-panel[data-section="chat"] .conversations { display: flex; flex-direction: row; align-items: center; gap: 6px; width: max-content; max-width: none; overflow: visible; } body.shell-rail #shell-panel[data-section="chat"] .conversations > * { flex: 0 0 auto; width: auto; max-width: 46vw; padding: 6px 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- 3 - a hub's own rail, in this shell, was still 264px wide ---- */ /* Round 2 turned the Tasks and Inbox rails into chip rows, and in the rail shell they were laid out inside a box rule 25 pins to `var(--rail-w)` with `overflow: hidden` - so the row was clipped mid-chip at 264px on a 390px screen ("Team Bo"), and Company's and Messages' rails were 264px columns inside a full-width stacked hub. WARNING: `animation: none` is not tidying. `railIn` interpolates width from 0 to `var(--rail-w)`, so without it the rail plays a 220ms animation out to 264px on every arrival before snapping back to auto. */ body.shell-rail .ibx-rail, body.shell-rail .tsk-rail, body.shell-rail .cal-rail, body.shell-rail .gc-rail, body.shell-rail .cn-rail { width: auto; max-width: none; animation: none; transition: none; } /* WARNING: ...and rule 25's `overflow: hidden` beats round 1's `overflow-y: auto` on these two, which are still COLUMNS here (a legend and a nav, not chips). A capped column that cannot scroll simply loses its last rows. */ body.shell-rail .cn-rail, body.shell-rail .gc-rail { overflow-x: hidden; overflow-y: auto; } /* The desktop mode frames the list and reading panes as one rounded card with a 16px inset around it. Stacked, the two are not beside each other and the rounding lands on the wrong corners, so it is a plain divider again. */ body.shell-rail .ibx-hub, body.shell-rail .tsk-hub { padding: 0; } body.shell-rail .ibx-rail, body.shell-rail .tsk-rail { margin: 0; } body.shell-rail .ibx-listcol, body.shell-rail .tsk-listcol { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; } body.shell-rail .ibx-read, body.shell-rail .tsk-read { border: 0; border-top: 1px solid var(--border); border-radius: 0; } body.shell-rail .ibx-listhead, body.shell-rail .tsk-listhead { border-radius: 0; } /* ---- 4 - the AI rail stops reserving a column ---- */ /* On a desktop `--ai-rail-w` is 52px of permanent chrome welded to the right edge, and `#app-body` pays for it whether or not the panel is open. That is 13% of a 390px screen spent on one button. Here the rail OVERLAYS as a short tab at the middle of the right edge - clear of the composer at the bottom of Messages, and clear of the head at the top of everything else. WARNING: done by re-declaring the TOKEN rather than by unpicking the four rules that read it. `#app-body`'s padding, the panel's `right`, the panel's own width formula and the rail's width are each stated once in terms of this, and "the rail costs no width" is exactly what `0px` says. */ :root { --ai-rail-w: 0px; --ai-panel-w: min(340px, 100vw - 48px); } body.shell-rail .ai-rail { top: auto; bottom: 16px; right: 14px; width: auto; height: auto; padding: 4px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-2); } /* WARNING: Messages is the one of the four that pins a composer to the bottom of its own pane, and the send button is in exactly this corner. It is the only place a floating control can land on top of another control rather than on top of a document that scrolls under it. */ body.shell-rail:has(#view-groupchat:not(.hidden)) .ai-rail { bottom: 80px; } /* ...and a drawer you opened on purpose has to have something in it. Round 3 hides what the Tasks and Inbox AI panels DRAW while nothing is picked, which is right where the panel is STACKED under the list - it is a bordered box holding one sentence, and collapsing it gives the list the screen. In this shell the same panel is a fixed drawer that exists only once you press the rail, so the same rule made pressing it open a blank white sheet 340px wide. WARNING: the specificity has to be won, not assumed. Round 3's selector carries a `:has()` whose argument holds an ID, so it scores (1,5,0) and a plain `body.shell-rail.ai-open ...` descendant of it loses. Naming the panel by its own id AND matching the hub through the reading pane it owns is what puts this ahead. WARNING: this un-hides only the RESTING sentence, and only while the drawer is open. It is not the panel being hidden or shown - `.ibx-ai` is never hidden at any width, which `tests/test_inbox_read_and_reach.py` says by name. */ /* WARNING: only the INBOX panel needs its inset back. `.tsk-ai` sets `padding: 0` itself and insets its children instead (`--tsk-pad`), so round 3's zero is what that panel already had - restoring 16px there would give the Tasks drawer a border of padding the desktop one does not have. Two panels, two answers, read from the base rules rather than assumed to match. */ body.shell-rail.ai-open .ibx-hub:has(#inbox-reading) #inbox-ai { padding: 16px 14px 14px; } body.shell-rail.ai-open .tsk-hub:has(#tasks-reading) #tasks-ai > .ibx-ai-empty, body.shell-rail.ai-open .ibx-hub:has(#inbox-reading) #inbox-ai > .ibx-ai-empty { display: flex; } /* ---- 5 - the rail shell's page frame keeps the app's gutter ---- */ /* `body.shell-rail .lib-body` is a two-class selector, so it beats round 2's `.page-body:not(.split-body)` on specificity and re-inset every library page in this shell. The two shells must not disagree about the gutter. */ body.shell-rail .lib-body { padding: 20px 32px 36px; } } /* ========================================================================== PHONE, round 4 - the type scale ========================================================================== Asked for directly: content type should be smaller on a phone so more of it fits. Sizes in this stylesheet are pixels almost everywhere, so scaling the root font size reaches nothing - what a scale can be here is a small set of NAMED steps, declared once under the breakpoint and applied in ONE block rather than sprinkled through the file as per-element overrides. Six steps, and the sizes they replace: --fs-body 14.5 -> 13.5 running text, chat, list rows --fs-page-title 24-30 -> 20 the one H1 on a page --fs-page-sub 13-14.5 -> 12.5 the sentence under it --fs-card-title 14-15 -> 13.5 a card's name --fs-card-sub 12.5-13 -> 12 its one line of summary --fs-meta 11.5-12 -> 11 counts, stamps, footers WARNING: deliberately not smaller than this. 13.5px body copy is a step down, not a squint; most of the win on a phone comes from the 24-30px page titles, which were sized for a monitor and cost two lines of screen each. Nothing here goes below 11px, and a control keeps its HEIGHT - only its lettering comes down, so a smaller scale never makes something harder to hit. ========================================================================== */ @media (max-width: 760px) { :root { --fs-body: 13.5px; --fs-page-title: 20px; --fs-page-sub: 12.5px; --fs-card-title: 13.5px; --fs-card-sub: 12px; --fs-meta: 11px; --fs-control: 13px; } body { font-size: var(--fs-body); } /* One H1 per page, whatever the page calls it. */ .lib-title, .page-head h1, .page-head-row h1, .empty-state h1, .cap-head-main h1, .home-head h1, .cn-main-head h1, .cn-admin-pagehead h1 { font-size: var(--fs-page-title); } /* ...and the sentence under it. */ .lib-sub, .page-head > p, .page-head-row p, .empty-state p, .cn-main-head p, .cn-admin-pagehead p { font-size: var(--fs-page-sub); } /* A card's name, and its one line of summary. */ .cat-name, .hb-name, .market-card-name, .chan-name { font-size: var(--fs-card-title); } .cat-sum, .hb-sub, .market-card-sum, .chan-sub { font-size: var(--fs-card-sub); } .cat-note, .hb-foot, .market-card-cat, .lib-tab-n, .fv-meta { font-size: var(--fs-meta); } .lib-tab, .lib-search, .lib-new { font-size: var(--fs-control); } /* The chat greeting was set for a page with nothing else on it. */ .chat-main.chat-empty .empty-logo { font-size: 42px; } } /* ========================================================================== PHONE, round 4 - one column, one gutter, nothing wider than its card ========================================================================== Round 2 dropped the fixed `minmax(370px, ...)` minimum on six card grids at 620px, which is what stopped the Heartbeat cards running past the right edge. Three grids of the same shape were missed - `auto-fill, minmax(320px, 1fr)` reads as "at least 320" and means it, so with 326px to give it still lays one 320px column and the card cannot fit the gutters. Same failure, same fix. */ @media (max-width: 620px) { .chan-list, .mk-grid, .cn-onb-cards { grid-template-columns: minmax(0, 1fr); } /* A card's trailing controls belong INSIDE it. `.hb-top` already gives the name the flexible column and the switch and the menu a fixed one; what a narrow card needs is for the tile not to eat the name's share of the row. */ .hb-card { padding: 13px 13px 11px; gap: 8px; } .hb-top { gap: 9px; } .hb-top-end { gap: 2px; } .hb-ico { --ico-sz: 30px; } .cat-ico { --ico-sz: 34px; width: 34px; height: 34px; font-size: 18px; } .cat-card { grid-template-columns: 34px minmax(0, 1fr) auto; } /* The library head. The search is declared 264px wide and `flex-shrink: 0`, so on the narrowest screens it is wider than the row it now has to itself. */ .lib-search-wrap { min-width: 0; } .lib-head-tools { flex-wrap: wrap; } } /* ---- Phone: the panel strip needs more room to the LEFT of its first chip ------- Round 4 gave this row a two-ended mask precisely so a chip scrolled under the "MARKETPLACE" marker would not read as one word with it. The stop was 14px, and the marker is ~180px of small-caps immediately beside it, so a sliced chip still surfaced a character clear of the fade: the strip opened on "MARKETPLACEonnectors". It shows up only once the row is SCROLLED, which it is on arrival — app.js brings the active chip into view, and on Heartbeat that is the last one. Widening the fade alone would eat the first chip at rest, so the scroller also carries the padding: the fade falls on empty space until something scrolls into it. */ @media (max-width: 760px) { body.shell-rail #shell-panel .shell-panel-body { padding-left: 10px; -webkit-mask-image: linear-gradient(to right, transparent 0, #fff 26px, #fff calc(100% - 26px), transparent); mask-image: linear-gradient(to right, transparent 0, #fff 26px, #fff calc(100% - 26px), transparent); } /* A hairline between the marker and the scrolling chips, so the two read as label and list rather than as a run-on. Follows the strip's own border token. */ body.shell-rail #shell-panel .shell-panel-head { border-right: 1px solid var(--border); margin-right: 2px; padding-right: 8px; } } /* ========================================================================== PHONE, round 5 - one pane at a time (the drill-in, and the way back) ========================================================================== Rounds 1-4 stopped the hubs pretending to be desktop columns by STACKING them: the rail, then the list, then the thing you opened, all on one page you scroll. That FITS, and it is still not how a phone works. Asked for directly: "a user list first (second sidebar), click on it only go into chat (content)" - the list fills the screen, tapping a row replaces it with the detail, and a back control returns you. Round 1 deliberately did not build this and named the reason: "no detail pane has a back or close control, so hiding the list on selection would trap the user." So the back control is the first half of this block rather than an afterthought, and every route into a detail goes through the one function that draws it (`showDetailPane`) - including the ones no click handler sees: `#inbox/245`, `#task/150`, a Home card, a chat opened from a notification. THE MECHANISM, and it is one mechanism rather than four. Each hub carries a `.mob-back` button in its markup placed as the SEAM between its two halves: everything BEFORE it is the list side (the rail, plus the list column on Tasks and the Inbox), everything AFTER it is the detail side (the reading pane, the AI panel). `data-mpane="list"|"detail"` on the hub says which side is showing, written only by `app.js:mpaneApply`. So the list rule is structural - "hide what is past the seam" - and only the detail rule has to name panes, because CSS has no previous-sibling combinator. The renderers are untouched: they already decide what is SELECTED, and this decides what is VISIBLE. WARNING: desktop is untouched, and by construction rather than by care. `.mob-back { display: none; }` is unconditional, so on a monitor the button is not laid out at all and no hub grid gains a track; `data-mpane` is read by nothing outside this query; and `showDetailPane` pushes no history entry above 760px. WARNING: `.ibx-ai` is never hidden by a rule of its own - `tests/test_inbox_read_and_reach.py` greps this file for that literal, because the panel holds every verb the Inbox has and a stylesheet that hid it once left people able to read a card and do nothing about it. It is not hidden here either: what the sibling rule stands down is the whole detail SIDE, and only while you are looking at the LIST - the one moment there is no card open to act on. Open one and the panel is back exactly as rounds 3 and 4 left it (stacked in classic, a drawer in the rail shell). Round 3 already collapsed what these panels DRAW while resting; this is the same judgement one level up, and it is what makes the reading pane's leftovers disappear when you tap back with a card still selected. WARNING: the Calendar is deliberately not here. Its rail is a legend, not a list, so there is nothing to drill into - round 2 put the month first and that stands. ========================================================================== */ /* Unconditional, so a monitor never lays the seam out. */ .mob-back { display: none; } @media (max-width: 760px) { /* ---- 1 - the control that crosses the seam ---- */ /* It NAMES what it goes back to. A bare chevron on a full-screen pane is the second half of the trap round 1 described: you can see there is a way out and not what is on the other side of it. Sticky, because three of the four hubs are a page that scrolls (`display: block`, rounds 1-3) and a back button you have to scroll up to find is one a thumb gives up on. */ [data-mpane="detail"] > .mob-back { display: flex; align-items: center; gap: 7px; position: sticky; top: 0; z-index: 6; width: 100%; padding: 10px 14px; background: var(--bg-2); color: var(--text); border: 0; border-bottom: 1px solid var(--border); font: inherit; font-size: 13px; font-weight: 650; text-align: left; cursor: pointer; } .mob-back svg { width: 17px; height: 17px; flex: none; color: var(--text-dim); } .mob-back:active { background: var(--bg-3); } /* ---- 2 - the list side: everything past the seam stands down ---- */ /* The whole of it. One rule, four hubs, and a pane added to any of them tomorrow is covered as long as it is put on the correct side of the button. */ [data-mpane="list"] > .mob-back ~ * { display: none; } /* ---- 3 - the detail side: the list halves stand down ---- */ /* Named one by one because there is no previous-sibling combinator - and named per hub rather than as `.gc-rail, .cn-rail, ...` so a rail can never be hidden by a state belonging to a hub it is not in. */ .gc-hub[data-mpane="detail"] .gc-rail, .cn-hub[data-mpane="detail"] .cn-rail, .tsk-hub[data-mpane="detail"] .tsk-rail, .tsk-hub[data-mpane="detail"] .tsk-listcol, .ibx-hub[data-mpane="detail"] .ibx-rail, .ibx-hub[data-mpane="detail"] .ibx-listcol { display: none; } /* ---- 4 - and now the list gets the whole screen ---- */ /* Messages is a GRID (its composer is pinned to the bottom of its own pane), so its two states are two row templates rather than a hidden box. */ .gc-hub[data-mpane="list"] { grid-template-rows: minmax(0, 1fr); } /* WARNING: `:has(#gc-view)` is not decoration - it is how these two win. Round 1 read "nothing is picked" off `.gc-hub:has(.gc-empty-main)`, which was the only signal it had, and `.gc-empty-main` is ALSO what an OPEN but empty room draws ("No messages yet - say hi"). So opening a brand-new chat matched a rule meaning the opposite and hid the conversation you had just tapped, leaving a back button over a blank screen - measured, on the first room of a fresh company. `data-mpane` is the signal round 1 did not have; the id is what buys the specificity to say so. */ .gc-hub[data-mpane="detail"]:has(#gc-view) { grid-template-rows: auto minmax(0, 1fr); } .gc-hub[data-mpane="detail"]:has(#gc-view) > .gc-main { display: flex; } /* Round 1 capped these rails to a strip so the content they navigate to stayed within a screen of them. There is no content under them any more - they ARE the screen. */ .gc-hub[data-mpane="list"] .gc-rail, .cn-hub[data-mpane="list"] .cn-rail { max-height: none; border-bottom: 0; } /* Same for the two list COLUMNS. Round 1 caps them to 44vh once something is picked (and their rails to 20vh), which was right when the thing you picked was stacked underneath; tap back with a card still selected and that cap would leave the list ending two thirds down an otherwise empty screen. WARNING: the rules being undone carry an ID inside `:not(:has(...))`, so they score (1,3,0) and a plain two-class selector loses to them however far down the file it sits. `:has(#tasks-reading)` - which is always true, the pane is in the markup - is what buys the ID back. Match the shape of the rule being undone, not just its property; round 1 wrote the same warning about a two-class selector at 920px. */ .tsk-hub[data-mpane="list"]:has(#tasks-reading) .tsk-listcol, .tsk-hub[data-mpane="list"]:has(#tasks-reading) .tsk-rail, .ibx-hub[data-mpane="list"]:has(#inbox-reading) .ibx-listcol, .ibx-hub[data-mpane="list"]:has(#inbox-reading) .ibx-rail { max-height: none; } /* ...and the list column's bottom border is the divider to a pane that is no longer under it. */ .tsk-hub[data-mpane="list"] .tsk-listcol, .ibx-hub[data-mpane="list"] .ibx-listcol { border-bottom: 0; } /* ---- 5 - reading SEVERAL Inbox cards is a list-side act ---- */ /* Tick a second row and the reading pane stops being one card: `renderInboxStack` fills it with all of them, and `#inbox-list`'s own click handler stops opening cards ("while several are ticked the pane IS the stack, so a row takes you to its card in it"). Nothing in that flow calls `showDetailPane`, and it must not - every tick would throw you into the detail and there would be no way to tick a third. So the stack is the one thing on the detail side that is shown while the hub says `list`, which is exactly how it read in rounds 1-4: the cards under the rows you ticked, one scroll away. WARNING: the panel stays down, and that is not an oversight - it draws only "I weigh in on one at a time" for a stack, and every verb the stack needs is on the cards themselves. */ .ibx-hub[data-mpane="list"]:has(#inbox-reading > .ibx-stack) #inbox-reading { display: block; } /* ---- 6 - Company before you are in one has no list to go back to ---- */ /* The onboarding pair (Create a company / Join a company) lives in `.cn-main`, which is the DETAIL side - so the drill-in would hide the only two buttons on the page behind a nav whose every destination is empty. While `#cn-onboarding` is up the two stack exactly as rounds 1-3 left them, and the seam is dormant (still `list`, so the back button stays hidden - there is nothing to go back FROM). */ .cn-hub:has(#cn-onboarding:not(.hidden))[data-mpane="list"] > .mob-back ~ .cn-main { display: flex; } } /* ========================================================================== PHONE, round 6 - the same drill-in, everywhere else ========================================================================== Round 5 built ONE seam and applied it to the four hubs. This applies the SAME seam to the rest of the app, because the surfaces left over are the ones a person otherwise meets a different way on every page: "i mean for all tab, i want to do this, like inbox, task, memory, files, company, photometric, mind maps, aichat also". Nothing new is invented. `.mob-back` is still the seam in the markup, `data-mpane` is still the state, `app.js:showDetailPane` is still the only way in, and the structural sibling rule `[data-mpane="list"] > .mob-back ~ *` in the round-5 block above is still what hides the detail side. What is here is the per-surface half round 5 wrote for the hubs: which element is the list, and what it does once it owns the screen. The five surfaces are THREE shapes, and only the first is hub-like: 1. Photometrics and Mind maps are `.split-body` - a list column beside a content column. Near enough to a hub that they are near-identical here. 2. Files and Memory have no list column at all. MEMORY HAS NO DETAIL AT ALL - its rows edit in place - so it is neither in this block nor in `MPANE_HUBS`; it is already a full-width list on a phone and there is nothing to drill into, the same verdict round 5 reached about the Calendar. Files' detail is the preview DRAWER, which below 1100px already covers the page; what it lacked was a way back that says where back IS. Its modal carries a STATIC `data-mpane="detail"` in the markup - see the note there - so it draws the round-5 button off the round-5 rule. 3. Chat's list is not inside the chat view. The conversations are `.side-recents`, which lives in the app sidebar (an off-canvas drawer on a phone) and which the rail shell already LIFTS into `#shell-panel`. `app.js:chatListHome` lifts the same element - never a copy, there is one `#conversation-list` and one renderer - into a list pane inside the view. WARNING: desktop is untouched by construction rather than by care. `.mob-back`, `.mob-only` and `.chat-mlist` are all `display: none` outside this query, so no grid above 760px gains a track, and `data-mpane` is read by nothing outside the two phone blocks. ========================================================================== */ /* Unconditional, so a monitor never lays either of them out. */ .mob-only { display: none; } .chat-mlist { display: none; } @media (max-width: 760px) { /* ---- 1 - Photometrics and Mind maps: the list column IS the page ---- */ /* Named per rail rather than as a positional child selector, for the reason round 5 gives: a state belonging to one page must never be able to reach into another. Each of these rails exists in exactly one view. */ .split-body[data-mpane="detail"] > .phot-rail, .split-body[data-mpane="detail"] > .mm-rail { display: none; } /* Rule 7 of the round-2 block caps these to a 180px strip, so the content they navigate to stayed within a screen of them. There is no content under them now - they ARE the screen. (0,3,0) against that rule's (0,2,0), so this wins on specificity and not on position.) */ .split-body[data-mpane="list"] { grid-template-rows: minmax(0, 1fr); } .split-body[data-mpane="list"] > .phot-rail, .split-body[data-mpane="list"] > .mm-rail { max-height: none; border-bottom: 0; } /* WARNING: an EMPTY list is the trap, and it is the one Company's onboarding pair sprang in round 5. Rule 7 also HIDES these rails when they hold nothing but a `.split-empty` (a strip containing only a repeat of the title is worse than no strip) - so with the drill-in engaged, "No saved maps yet" would have been a hidden list beside a hidden content column: a blank screen with a back button on it. With nothing in the list there is nothing to go back to, so the seam goes DORMANT instead. The content column shows in either state and the back control stays down, which is exactly how these two pages read in rounds 1-5; the moment the list has one row in it (press + New, or store a file) the drill-in engages by itself. */ .split-body:has(.split-empty)[data-mpane="list"] > .mob-back ~ * { display: block; } .split-body:has(.split-empty)[data-mpane="detail"] > .mob-back { display: none; } /* The list side's own way in. Mind maps already had one (`#mm-new-rail`); Photometrics did not, and its drop zone lives in the content column - so on the list, with that column away, the only route to a file the list does not hold yet would have been a reload. `.mob-only` is what keeps it off every desktop width. */ .mob-only { display: inline-flex; } /* ---- 2 - the file preview drawer: a full-screen detail with a way back ---- */ /* The drawer already covers the page below 1100px (`--preview-w: 100%` plus the backdrop), so the SHAPE was right and only the control was missing: a corner in a head that also holds Copy reference and Download is not a way back, it is the third of three buttons. The back bar is the one every other surface draws, and `setPreviewBackLabel()` names the page it returns to rather than saying "Back". */ #preview-overlay .modal-head { padding: 11px 12px; gap: 8px; flex-wrap: wrap; } #preview-overlay .modal-head h2 { font-size: 15px; } #preview-overlay .preview-acts { gap: 6px; margin-left: auto; } #preview-overlay .preview-body { padding: 12px 12px 18px; } /* ---- 3 - Chat: the conversations, full screen, then the thread ---- */ /* `#chat-layout` is a GRID (the composer is pinned to the bottom of its own pane), so its two states are two row templates rather than a hidden box - the same shape Messages needed in round 5, for the same reason. */ #chat-layout[data-mpane="list"] { grid-template-rows: minmax(0, 1fr); } #chat-layout[data-mpane="detail"] { grid-template-rows: auto minmax(0, 1fr); } #chat-layout[data-mpane="list"] > .chat-mlist { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; } .chat-mlist-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 14px 10px; } .chat-mlist-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; } /* Prominent, and deliberately not the head's little glyph. Starting a chat is the primary action on this product; on the one screen that is nothing but a list of chats it must not be a 25px icon in a corner. */ .chat-mlist-new { flex: none; padding: 8px 14px; font-size: 13.5px; } .chat-mlist-slot { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } /* The MOVED element. It was `flex: 1` inside a sidebar column and it is `flex: 1` inside this one; what changes is that it scrolls itself now rather than riding the sidebar's scroller. */ .chat-mlist-slot .side-recents { flex: 1; min-width: 0; min-height: 0; margin-top: 0; } .chat-mlist-slot .side-sec-head { padding: 0 14px; } .chat-mlist-slot .side-sec-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 14px; -webkit-overflow-scrolling: touch; } .chat-mlist-slot .recents-search { width: 100%; box-sizing: border-box; margin: 4px 0 8px; } /* A full-width row on a phone, not a 264px sidebar row. */ .chat-mlist-slot .conv-item { padding: 11px 12px; font-size: 14.5px; } /* WARNING: in the rail shell the chat panel was round 4's chip STRIP, and its only content was the very element that now lives in the view. Left showing, it would be an empty bar carrying a title and a plus above a page that already has both - and `shell-panel-off` cannot do it, because as far as `applyShellPanel` is concerned chat still HAS a panel section (it does, on a monitor). */ body.shell-rail #shell-panel[data-section="chat"] { display: none; } } /* ========================================================================== ROUND 7 - the one element that was not allowed to shrink ========================================================================== A chat you cannot scroll, reported from a phone. It is not a chat bug and it is not round 6's drill-in: it is one missing `min-height` on `#main`, and it takes out the scroll container of every view in the rail shell at once. `#app` is `height: 100vh; overflow: hidden`, so NOTHING in this product scrolls the page - every view owns an internal scroller (`#messages`, `.side-sec-body`, a hub's column) and the whole design depends on a bounded height reaching it from `#app` down. `#main` is `flex: 1; display: flex; flex-direction: column; min-width: 0` - note which axis that `min-*` is on. While `#app-body` is a ROW (every width above 760px, and every width in the classic shell) `#main` is a flex item in the CROSS axis, so `align-items: stretch` hands it the container's height and the missing `min-height` never matters. The round-3 rail fix above turns `#app-body` into a COLUMN below 760px. `#main` is now a MAIN-axis item, where `min-height: auto` resolves to the content-based minimum size - so `flex: 1` can no longer shrink it, and it grows to whatever its content is. Measured at 390x844 on a 40-message conversation, rail shell: #app-body 792 (bounded, correct) #main 10 680 <- min-height: auto, the break #view-chat 10 680 .chat-main 10 639 #messages clientHeight 10 528 == scrollHeight 10 528 -> nothing to scroll `#messages` was not a scroller at all: it had been stretched to the full height of its own content, so `overflow-y: auto` had nothing to do and `scrollTop` stayed 0. The composer sat at y=10 621, about 9 800px below the fold, and `#app`'s `overflow: hidden` meant the page could not be scrolled to it either - the transcript was simply cut off at 844px with no way to move. Scoped to the exact condition that breaks it (the rail shell, below 760px, where and only where `#app-body` is a column) rather than written unconditionally: in a row container `min-height: 0` is a no-op, so an unscoped rule would claim to do something at every width while doing something at one, and the next reader would have to re-derive which. Same measurement after: #main 792, #messages client 587 / scroll 10 528, scrollTop reaches 9 941, composer on screen at y=733. */ @media (max-width: 760px) { body.shell-rail #main { min-height: 0; } } /* ---- Plugins: the same group heading the Skills page draws ---- The two pages sit one nav item apart and had two different heading treatments — Skills a named group with a count pill and a rule, Plugins bare uppercase small caps. ⚠️ `grid-column` stays: these headings live INSIDE the auto-fill `.cat-list`, where Skills puts its own outside a

. That is the one structural difference, and it is forced by the layout rather than a second opinion about how a heading looks. */ .cat-sep { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 22px 2px 12px; padding: 0 2px 8px; border-bottom: 1px solid var(--border); font-size: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; color: inherit; } .cat-sep:first-child { margin-top: 2px; } /* ---- Tasks rail --------------------------------------------------------------- Two levels: All tasks, then Personal and Company each holding their own rows — My Task, Team Task, and the categories filed under that side. A scope is an ordinary `.ibx-fold`, not a heavier heading: it is a destination you can click, exactly like the rows under it, and weighting it differently would imply it behaves differently. What separates the levels is the INDENT on the children and a hairline above each group — nothing that needs reading. */ .tsk-rail-grp { display: flex; align-items: center; gap: 2px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); } .tsk-rail-grp > .ibx-fold { flex: 1; min-width: 0; } /* The per-scope +. It sits OUTSIDE the scope button, or clicking "add a category here" would also select the scope — two actions on one press, and the one you did not ask for repaints the list under you. */ .tsk-rail-plus { flex-shrink: 0; border: none; background: none; cursor: pointer; color: var(--text-faint); font-size: 16px; line-height: 1; border-radius: 7px; padding: 5px 7px; } .tsk-rail-plus:hover { background: var(--bg-hover); color: var(--text); } .tsk-rail-plus:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* A child of a scope, indented past its parent's icon. */ /* ⚠️ The edit affordance on a category. `.rail-edit` is declared `opacity: 0` and revealed by `.rail-item:hover` — a class this rail does not use and has not used since its rows became `.ibx-fold`. So the pencil was rendered, occupied space, and was invisible AND unclickable at every width: there was no way to rename a category, and once Delete moved into that modal, no way to delete one either. Revealed on the row that actually exists, and kept visible on the open row so the control does not vanish the moment you stop pointing at what you selected. */ .ibx-fold .rail-edit { opacity: 0; margin-left: 2px; } .ibx-fold:hover .rail-edit, .ibx-fold.on .rail-edit, .ibx-fold .rail-edit:focus-visible { opacity: 1; } .ibx-fold .rail-edit:hover { color: var(--text); } .ibx-fold.tsk-sub { padding-left: 34px; } .ibx-fold.tsk-sub .ibx-fold-ico { opacity: .62; } .ibx-fold.tsk-sub.on .ibx-fold-ico { opacity: 1; } /* ⚠️ Below 920px the rail collapses to a 58px icon strip, and the rule that centres its rows (`.tsk-rail .ibx-fold`) has the SAME specificity as `.ibx-fold.tsk-sub` above — which sits later in the file and would therefore win, re-indenting every child row off the edge of a strip that has no room for it. Undone explicitly here rather than relied on by position: this block is appended, and the next appended block would take the argument back. The + goes too — there is no width for it, and a category can still be added from the + menu at the top or from Ctrl+K. */ @media (max-width: 920px) { .ibx-fold.tsk-sub { padding-left: 4px; } .tsk-rail-plus { display: none; } .tsk-rail-grp { margin-top: 6px; padding-top: 6px; } } /* ---- Tasks: field ownership on a delegated task -------------------------------- Both surfaces that can edit a task say the same sentence in the same voice: the modal above its fields, the drawer under its controls. It is an explanation, not a warning — nothing has gone wrong, the other half of this task belongs to somebody else — so it takes the muted body colour and not the danger one. */ .field-note, .tsk-owned-note { color: var(--text-dim); font-size: 12px; line-height: 1.5; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; } .field-note { margin-bottom: 12px; } .tsk-owned-note { margin-top: 10px; } .field-note.hidden { display: none; } /* A field somebody else owns still has to be READABLE — it is the thing you opened the task to see. Dim the chrome, never the text. */ .modal-body input:disabled, .modal-body textarea:disabled, .modal-body select:disabled, .tsk-ctl select:disabled { opacity: 1; color: var(--text-dim); background: var(--bg-2); border-color: var(--border); cursor: not-allowed; } /* ===== Settings: this computer ============================================== The desktop helper. Three numbered steps, because it genuinely is a sequence — download, run, done — and the number is the only thing telling somebody that step 2 will take a few minutes and has not hung. */ .helper-steps { display: flex; flex-direction: column; gap: 18px; } .helper-step { display: flex; gap: 14px; align-items: flex-start; } .helper-n { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-2); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; } .helper-step-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .helper-step-main .btn-primary { align-self: flex-start; margin-top: 6px; text-decoration: none; display: inline-flex; align-items: center; } .helper-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); } .helper-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* The dot is the whole status at a glance. Three states, never two: "never started" is not the same as "offline", and telling somebody to restart something they have never run sends them looking for a thing that is not there. */ .helper-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--text-faint); } .helper-card.on .helper-dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); } .helper-card.off .helper-dot { background: var(--warn); } .helper-card.never .helper-dot { background: var(--text-faint); } .helper-adv summary { cursor: pointer; font-size: 13px; color: var(--text-dim); } .helper-code-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .helper-code { font-family: var(--mono, ui-monospace, monospace); font-size: 17px; letter-spacing: .12em; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-3); } /* ========================================================================== PHONE, round 5 - the gutter, and a second step of the scale ========================================================================== Asked for directly: on a phone, scale everything down and give the content back the room the margins were taking. The margins were the bigger half, and nothing had addressed them. MEASURED on a 390px screen before this block: `.page-body` inset 16px a side and the card inside it another 16, so the reading column was 326px of 390 - **64px, one sixth of the screen, spent on white space twice over**. Round 2's "one gutter, not two" fixed the case where two VIEWS disagreed; this is the case where one view charges the same gutter twice, once on the page and once on the card. Both paddings come down, and the second one comes down further, because a card already has a border and a background doing the work of separating it. The scale takes one more step. Round 4 wrote "deliberately not smaller than this", and that warning was right on its own terms - it is kept below, moved rather than deleted, because what changed is the REQUEST, not the reasoning. Its two hard rules still hold and are what stop this becoming a squint: nothing goes below 11px, and a control keeps its HEIGHT so a smaller label never makes a thing harder to hit. ⚠️ Scoped to 620px, not 760. Round 4's scale sits at 760 and covers tablets, where none of this was asked for and a 12px gutter would be wrong. Redeclaring the same NAMED steps one band down is the mechanism working as intended; a set of per-element overrides at 620 would be a second scale competing with the first. ========================================================================== */ @media (max-width: 620px) { :root { /* One step down from round 4. Body copy is the one that must not overreach: 13px is still ordinary running text, and it is the floor for this element. */ --fs-body: 13px; --fs-page-title: 18px; --fs-page-sub: 12px; --fs-card-title: 13px; --fs-card-sub: 11.5px; --fs-meta: 11px; /* the floor round 4 set. Unchanged, on purpose. */ --fs-control: 12.5px; /* The step round 4 called "the missing middle" - a section heading INSIDE a page, between the page's own title and its body copy. It was 16px, which was a middle step under a 26px title and is nearly the title itself under an 18px one, so the ladder had collapsed at the top. 18 / 15 / 13. */ --fs-section: 15px; /* The page's inset, and a card's own. Named for the same reason the type steps are: they are applied in several places and must move together, or the page and the card inside it disagree about where the edge is. */ --gutter: 12px; --card-pad: 12px; } /* ---- the page's gutter ---- */ /* Same selector and the same two warnings as round 2 - `padding-inline` only, so `.lib-body`'s own `padding-top` is not reset by a shorthand; `:not(.split-body)` because Photometrics and Mind maps need their list column flush. */ .page-body:not(.split-body) { padding-inline: var(--gutter); } .split-main { padding-left: var(--gutter); padding-right: var(--gutter); } .ibx-read { padding-left: var(--gutter); padding-right: var(--gutter); } /* ⚠️ Two classes, so it beats `.page-body:not(.split-body)` on specificity and re-insets every library page in the rail shell to 32 - round 4 hit exactly this and said so. The two shells must not disagree about the gutter. */ body.shell-rail .lib-body { padding-left: var(--gutter); padding-right: var(--gutter); } /* ---- and the card's, which was being charged on top of it ---- */ .home-card, .market-card, .inbox-card, .skill-result, .cn-settings-card { padding-left: var(--card-pad); padding-right: var(--card-pad); } .home-card { padding-top: var(--card-pad); padding-bottom: 10px; } /* ⚠️ `min-height: 180px` exists to keep cards in a grid ROW the same height. The grid is ONE column here, so there is no row to equalise and the only thing it still does is pad every short card out to 180px of a 844px screen. */ .home-card { min-height: 0; } /* ---- headings that the round-4 list did not reach ---- */ /* Home's card headings, and the phone chat-list screen's own title. The second is the ONE H1 on that screen, so it belongs with every other page title rather than 22px on its own - it stays the most prominent thing there either way, because everything around it came down too. */ .home-card-head h2 { font-size: var(--fs-section); } .chat-mlist-title { font-size: var(--fs-page-title); } .chat-mlist-head { padding-left: var(--gutter); padding-right: var(--gutter); } /* ---- a full-bleed view does not get a band for the mark ---- */ /* ⚠️ Introduced by the commit that removed the top bar, and only wrong here: the brand belongs to whichever NAVIGATION FRAME is on screen, and on a phone that frame is the drawer, not the rail. The rail at this width is a filter strip, so its brand band was ~48px of an 844px screen spent on a logo, stacked directly under the strip already reserved for the menu button - two bands, one of them saying nothing you need while navigating. The drawer still carries it, one tap away, which is where the mark is on every other phone app. */ .rail-chrome-top { display: none; } /* ---- the strip reserved for the floating menu button ---- */ /* It only has to clear the chip, and the chip comes down with everything else. */ .sidebar-toggle { top: 6px; left: var(--gutter); padding: 4px 9px; font-size: 14px; } #app-body { padding-top: 38px; } } /* ------------------------------------------------------------------ BIM preview An IFC previews as its CONTENT, not as its text — see backend/bimview.py. The dimensions and the headline properties are what a specifier checks first, so they are the two things above the fold. */ .bimview { display: grid; gap: 1rem; padding: .25rem; } .bim-head { display: grid; gap: .2rem; } .bim-title { margin: 0; font-size: 1.15rem; letter-spacing: -.01em; } .bim-sub { color: var(--muted); font-size: .85rem; } .bim-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; } .bim-dim { display: grid; gap: .15rem; padding: .6rem .7rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; } .bim-dim-k { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .bim-dim-v { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; } .bim-props { display: grid; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .bim-prop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: .75rem; padding: .45rem .7rem; } .bim-prop:nth-child(odd) { background: var(--panel-2); } .bim-prop-k { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; } .bim-prop-v { font-size: .9rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .bim-headline .bim-prop-v { font-weight: 600; } .bim-note { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.45; } .bim-more summary { cursor: pointer; color: var(--muted); font-size: .87rem; padding: .2rem 0; } .bim-foot { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; } /* A file we cannot open. ⚠️ The advice is the point — see app._OPAQUE_CAD_ADVICE. */ .pv-unreadable { display: grid; gap: .7rem; padding: 1.6rem; max-width: 48ch; margin: 0 auto; text-align: center; } .pv-unreadable-why { margin: 0; color: var(--muted); line-height: 1.5; } .pv-unreadable-do { margin: 0; padding: .8rem 1rem; line-height: 1.5; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; text-align: left; } .pv-convert { margin: .2rem auto 0; } .pv-convert-note { margin: 0; text-align: center; } /* --- Fab-file plot (Quorie PCB Viewer) ------------------------------------------ ⚠️ The board paints its OWN ground and deliberately does not use the theme tokens. Every fab viewer ever made is copper on a dark board, and that convention is what makes the picture readable at a glance — a PCB on the page's white background reads as a diagram OF a PCB. The colours live in `app.js:PCB_INK` because they are written into the SVG itself, so a downloaded or printed plot keeps them. */ .pcb-plot { margin: 0 0 14px; } .pcb-svg { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--border); /* A wide board in a narrow panel must not run off the page. */ max-height: 60vh; object-fit: contain; } .pcb-cap { margin-top: 8px; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; } /* ⚠️ Not an error style. This line carries "one layer of the fab set", which is the most important sentence on the panel and must not read as a failure. */ .pcb-note { margin: 4px 0 0; font-size: 12px; color: var(--text-dim); opacity: .85; } /* ---- Email ------------------------------------------------------------------ The LAYOUT is not here. Email reuses the Inbox shell verbatim — `.ibx-hub` and its rail / list / reading / AI columns — so the rail is the same width as every other rail and the left edge of the app does not move when you navigate here. A bespoke grid at slightly different widths was the first version, and that is exactly the drift this avoids. Only what is genuinely about MAIL lives below: a message row, and the reading pane's own furniture. Anything a page could share is shared. */ .mailv-row { display: block; width: 100%; text-align: left; cursor: pointer; padding: 10px 14px; background: none; border: 0; border-bottom: 1px solid var(--border); color: var(--text); } .mailv-row:hover { background: var(--bg-2); } .mailv-row.on { background: var(--accent-soft); } .mailv-row-top { display: flex; gap: 8px; align-items: baseline; } .mailv-from { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mailv-date { margin-left: auto; font-size: 11px; color: var(--text-dim); white-space: nowrap; } .mailv-subj { font-size: 13px; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Unread is carried by WEIGHT, not a coloured dot: the list is scanned, and a bold line reads as unread at a glance without needing a legend. */ .mailv-row.unread .mailv-from, .mailv-row.unread .mailv-subj { font-weight: 600; color: var(--text); } .mailv-msg { padding: 18px 22px; } .mailv-msg-subj { font-size: 19px; margin: 0 0 10px; } .mailv-msg-meta { font-size: 13px; color: var(--text-dim); display: grid; gap: 2px; } .mailv-msg-meta b { color: var(--text); font-weight: 500; margin-right: 6px; } .mailv-atts { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; } .mailv-att { font-size: 12px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-dim); } .mailv-att-n { opacity: .7; margin-left: 4px; } .mailv-body { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.6; word-break: break-word; } .mailv-replybox { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .mailv-replybox textarea { width: 100%; min-height: 90px; resize: vertical; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--text); font: inherit; } .mailv-reply-acts { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .mailv-reply-note { font-size: 12px; color: var(--text-dim); } .mailv-ai-head { padding: 12px 14px; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--border); } .mailv-ai-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 4px; } .mailv-ai-quick button { font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer; border: 1px solid var(--border); background: var(--bg); color: var(--text); } .mailv-ai-quick button:hover { border-color: var(--accent); color: var(--accent-2); } .mailv-ai-log { flex: 1; overflow-y: auto; padding: 10px 12px; font-size: 13px; } .mailv-ai-q { margin: 10px 0 4px; font-weight: 600; padding-left: 8px; border-left: 2px solid var(--accent); } .mailv-ai-a { margin: 0 0 12px; line-height: 1.55; } .mailv-ai-ask { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); } .mailv-ai-ask textarea { flex: 1; resize: vertical; padding: 8px 10px; font: inherit; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); } .mailv-empty { color: var(--text-dim); font-size: 13px; padding: 16px; margin: 0; } /* The AI column is a flex stack so its log scrolls and the ask box stays put — the same arrangement #inbox-ai uses. */ #mailv-ai { display: flex; flex-direction: column; min-height: 0; } /* A SCHEMATIC reuses the plot's frame and nothing else, because it is the opposite drawing: a fab plot is copper on a dark board, a schematic is ink on paper. Both paint their own ground for the same reason — the convention is what makes the picture readable at a glance, and a schematic on a dark page reads as a diagram OF a schematic. The colours live in `app.js:SCH_INK`, written into the SVG itself. ⚠️ Taller than the fab plot on purpose. A board is looked AT; a schematic is READ, and a net has to be followable from one end to the other without scrolling. */ .sch-plot .pcb-svg, .sch-svg { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--border); max-height: 78vh; object-fit: contain; } /* The render setup panel, beside the 3D preview. ⚠️ It sits UNDER the canvas rather than beside it: the model is the thing being judged and a side rail steals width from it on exactly the narrow screens where the shape is already hardest to read. Two columns of short rows keep the panel shallow instead. */ .st-shell { margin-top: 10px; } .st-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); } .st-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .st-lab { font-size: 12px; color: var(--text-dim); width: 74px; flex: none; } .st-sel, .st-range { flex: 1; min-width: 0; } .st-sel { font: inherit; font-size: 12px; padding: 3px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text); } /* Tabular so a slider does not shuffle the row as the number changes width. */ .st-val { font-size: 12px; color: var(--text-dim); width: 46px; flex: none; text-align: right; font-variant-numeric: tabular-nums; } .st-col { width: 44px; height: 24px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); } .st-toggles { gap: 16px; } .st-check { display: flex; align-items: center; font-size: 12px; color: var(--text); } /* The camera readout spans both columns: it is the one line that must be findable, because it carries the numbers the render will actually be given. */ .st-cam, .st-hint, .st-go { grid-column: 1 / -1; } .st-cam { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; } .st-go { justify-self: start; } /* ⚠️ Not an error style. This says the preview is an approximation, which is the most important sentence on the panel and must not read as a failure. */ .st-hint { margin: 0; font-size: 12px; color: var(--text-dim); opacity: .85; } @media (max-width: 560px) { .st-panel { grid-template-columns: minmax(0, 1fr); } } /* The company-email card lists PEOPLE, not addresses — an admin turning email on is deciding about a person, and matching a roster against a list of strings is the work this page exists to do for them. */ .cn-mail-people { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .cn-mail-who { font-weight: 500; min-width: 120px; } .cn-mail-note { color: var(--text-dim); font-size: 12px; } /* The account this rail is showing, above its folders — the arrangement every mail client uses. A group header rather than a title tweak, so a second account later is a second group and not a rewrite. */ .mailv-acct { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .mailv-acct-addr { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== PHONE - a generated file is a NAME first ========================================================================== Reported from a phone: the file cards in chat showed no filename at all and the Download button was cut off by the card's own edge. `.file-row` was `[icon] [name + size] [Preview] [Download]` on one flex line, and only the middle column could shrink — so it absorbed every pixel of pressure. MEASURED at 320px: the name got 49px ("ESP3…"), and it is the ONE thing that says which file this is. A hair more button width (a wider glyph, a boosted font on a real handset) takes it to zero and the actions overflow into the clip. Two rows instead: the name gets the full width, the actions get their own line and keep their tap targets. Nothing here depends on guessing a font metric — that is the point, because the metric is what differed between the report and the repro. */ @media (max-width: 620px) { .file-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 9px; padding: 10px var(--card-pad); } .file-icon { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-top: 1px; } .file-info { grid-column: 2; } /* ⚠️ Left-aligned under the name, not stretched: a full-width Download reads as the card's primary action when the primary action is opening the thing. */ .file-acts { grid-column: 2; justify-self: start; margin-top: 5px; } /* The name can use the whole row now, so it only ellipses when it genuinely must. */ .file-name { font-size: var(--fs-card-title); } .file-meta { font-size: var(--fs-meta); } } /* ========================================================================== PHONE - the thread's text column, which was two thirds of the screen ========================================================================== Reported: the chat is cramped and hard to read on a phone. MEASURED at 390px, the AI's text had 258px to wrap in — 66% of the screen. The other third went to three things sized for a monitor: 22px `.msg-row` padding, each side 44px avatar (30) + gap (14) on the left 44px `.msg-row.assistant .msg-body` padding-RIGHT, which holds no content at all — it exists so an assistant paragraph ends level with the user bubble above it. That symmetry is worth 11% of the width on a desktop and nothing on a phone, where the column is the scarce thing and the two edges are never seen together anyway. Reclaiming all three gives the text ~330px of 390 (85%). Nothing is scaled down here — the type is untouched; the words simply get the room the decoration had. ⚠️ `.msg-body`'s bottom padding is NOT reclaimed, though it looks like dead space. It reserves the hover/tap toolbar, which is built on FIRST interaction: with nothing reserved, every message grows by the toolbar's height the first time you touch it and the thread jumps under your finger. */ @media (max-width: 620px) { .msg-row { padding-left: var(--gutter); padding-right: var(--gutter); gap: 8px; } .avatar { width: 26px; height: 26px; border-radius: 7px; font-size: 14px; } .avatar.user .cn-ppl-avatar { width: 26px; height: 26px; font-size: 12px; } /* The reserve goes; the column keeps a small inset so a long word does not run into the screen edge, which is what made the wrap look broken. */ .msg-row.assistant .msg-body { padding-right: 6px; } } /* A model the workspace has no key for. Still listed and still clickable — the click explains what is missing — but it must not read as an equal choice beside the ones that will actually run. */ .drop-item.model-item-off b { color: var(--text-dim); } .drop-item.model-item-off span { color: var(--text-faint); } /* The named plugin a capability belongs to (backend/capabilities/families.py). Sits between the row's own name and its summary line, quieter than both: it is the family this thing is part of, not what the row IS. */ .cat-fam { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--accent); opacity: .85; margin: 1px 0 2px; }