:root { color-scheme: light; --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, "SFMono-Regular", Consolas, "Courier New", monospace; --ink: #101826; --muted: #5b6b82; --line: #d8dfe9; --surface: #ffffff; --soft: #eef1f7; /* the sidebar is a fixed dark instrument bezel in BOTH themes -- a deliberate "equipment chassis stays dark regardless of ambient light" choice, not a light/dark miss (unlike the badge/flash colors below, which genuinely need to track the theme and now do). */ --nav: #0b1220; --nav-line: rgba(255, 255, 255, .1); --nav-ink: #e8edf6; --nav-muted: #93a1bd; --nav-soft: rgba(255, 255, 255, .08); --nav-soft-hover: rgba(255, 255, 255, .15); /* role colors -- each one means exactly one thing, everywhere it appears, and every value below is tuned to hold real contrast against --surface in its own theme. No gradients, no purple. */ --accent: #2455c9; /* info / neutral action -- links, secondary actions */ --accent2: #173f9e; /* info, hover/emphasis shade */ --live: #12793f; /* live / confirmed / good -- the "* live" signal */ --pending: #9a5b00; /* pending / needs attention */ --danger: #c62a1f; /* error / destructive only, never decorative */ /* "fill" variants -- for the few components that paint a SOLID block of role color with fixed white text/icon on top (primary/danger/confirm buttons, the checked checkbox, the chat avatar, the brand mark, text selection). --accent/--live/--danger above intentionally brighten in dark mode so they stay legible as TEXT on --surface -- reused as a fill with white text, that same brightening drops contrast against white to ~2:1 in dark mode. These stay constant across both themes (already >5:1 against white) so a filled control never goes dark-mode illegible. Same hue/role as their non-fill counterpart, just tuned for the opposite pairing. */ --accent-fill: #2455c9; --accent-fill-hover: #1c46ab; --live-fill: #12793f; --danger-fill: #c62a1f; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; /* one spacing scale, used app-wide for padding/margin/gap on chrome and layout (not for the sub-4px micro-nudges inside compact chips/badges, which have their own documented, internally-consistent values right next to where they're used). 4px base at the default 16px root, so it composes cleanly whether a rule is written in px or rem. */ --space-1: .25rem; /* 4px -- tightest: icon-to-label, dot-to-text */ --space-2: .5rem; /* 8px -- tight grouping within one control/row */ --space-3: .75rem; /* 12px -- default control padding, row gaps */ --space-4: 1rem; /* 16px -- default block spacing */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px -- panel padding, page-header rhythm */ --space-7: 2rem; /* 32px -- section separation */ --space-8: 2.5rem; /* 40px -- page-level padding */ --space-9: 3rem; /* 48px */ --space-10: 4rem; /* 64px -- page bottom padding */ --shadow: 0 1px 2px rgba(16, 24, 38, .06), 0 1px 1px rgba(16, 24, 38, .04); --shadow-raised: 0 4px 14px rgba(16, 24, 38, .1), 0 1px 2px rgba(16, 24, 38, .06); } /* dark mode -- follows the OS preference by default; the sidebar toggle (see base.html) stamps data-theme on to override it either way, persisted in localStorage. Every role/status color below now tracks the theme (badges, flashes, confirm/danger buttons included) -- there is no longer a hardcoded-pastel exception. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ink: #e7ecf5; --muted: #94a3bd; --line: #262f42; --surface: #141b28; --soft: #0b1119; --accent: #7db4ff; --accent2: #a9cbff; --live: #3ddc84; --pending: #f4b64d; --danger: #ff6f64; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .3); --shadow-raised: 0 6px 18px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4); } } :root[data-theme="dark"] { color-scheme: dark; --ink: #e7ecf5; --muted: #94a3bd; --line: #262f42; --surface: #141b28; --soft: #0b1119; --accent: #7db4ff; --accent2: #a9cbff; --live: #3ddc84; --pending: #f4b64d; --danger: #ff6f64; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .3); --shadow-raised: 0 6px 18px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4); } * { box-sizing: border-box; } /* the browser's own UA default for [hidden] (display:none) is an author stylesheet away from being overridden by ANY class rule that sets its own `display` unconditionally (e.g. .bucket-start-popover { display: flex }) -- author CSS always wins over the UA stylesheet regardless of selector specificity, so a bare `hidden` attribute was silently losing to those rules and leaving popovers permanently open. This one rule re-asserts hidden for everything, past and future. */ [hidden] { display: none !important; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--soft); line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; /* app-wide text-overflow hardening: a long unbroken token anywhere in user-supplied content (a session/bucket/list name, a pasted URL, an email address, a transcript line) can otherwise force a panel or flex row wider than its container instead of wrapping. This is inherited by everything unless a more specific rule says otherwise (none do), so it covers every template in one place rather than repeating it per component. It also lets flex/grid children shrink correctly without separate min-width:0 rules, since a breakable string's min-content width collapses to a single character instead of the whole token. */ overflow-wrap: anywhere; } /* browser surfaces carry the design too -- selection, focus rings, and scrollbars all ship with unauthored browser defaults otherwise. */ ::selection { background: var(--accent-fill); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); } * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid var(--soft); } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* the one authored motion idea (recording/live/pending dots breathing) -- respected everywhere it's used, turned off for anyone who asked. */ @media (prefers-reduced-motion: reduce) { .record-toggle-btn.recording, .badge-open::before, .badge-reminder::before, .console-status.live::before, .chat-dots span { animation: none !important; } } /* shell */ /* 264px, not 240 -- at 240 a real bucket name plus its visibility checkbox and count badge had nowhere left to go but mid-word ellipsis ("Zack's b...", "Knox S...", "865Da..."), on every row that wasn't already short. 24px back is enough room for an actual name to read before truncating, without giving up the rail's "narrow instrument column" proportions the way a wide sidebar would. */ .app-shell { min-height: 100vh; display: grid; grid-template-columns: 264px 1fr; } .sidebar { position: sticky; top: 0; height: 100vh; padding-top: var(--space-6); padding-bottom: var(--space-6); padding-left: max(var(--space-5), env(safe-area-inset-left)); padding-right: var(--space-5); display: flex; flex-direction: column; background: var(--nav); color: var(--nav-ink); border-right: 1px solid var(--nav-line); } /* The sidebar is a fixed 100vh column, and nothing was allowed to scroll inside it -- so on a short window everything past the fold was simply clipped. Measured at 700px tall: content ran to 1116px, putting the whole footer (account, theme, Log out) 416px out of reach with no way to get to it but resizing the window. The nav takes the slack and scrolls; the brand above and the footer below stay put, so the account and Log out are always reachable no matter how many buckets are in the tree. min-height:0 is the load-bearing part, not overflow-y. A flex item defaults to min-height:auto -- "never shrink below my content" -- so without it the nav just grows to its full height again and pushes the footer back off the bottom, scrollbar or not. Same trap as the grid item that let the bucket board push the page sideways. Descendant selectors, not child ones: .mobile-nav-content is display:contents, so nav is a flex child of the sidebar for LAYOUT but still a DOM child of that wrapper -- and the child combinator matches the DOM tree, not the layout tree. `.sidebar > nav` silently matches nothing. */ .sidebar nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .sidebar .sidebar-footer { flex-shrink: 0; } /* Thin and dim: this scrollbar sits against the dark nav and shouldn't read as a second border down the middle of the app. */ .sidebar nav { scrollbar-width: thin; scrollbar-color: var(--nav-soft-hover) transparent; } .sidebar nav::-webkit-scrollbar { width: 6px; } .sidebar nav::-webkit-scrollbar-thumb { background: var(--nav-soft-hover); border-radius: 999px; } .sidebar nav::-webkit-scrollbar-track { background: transparent; } .brand { display: flex; align-items: center; gap: var(--space-2); color: var(--nav-ink); text-decoration: none; font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; } .brand-mark { width: 34px; height: 34px; border-radius: var(--radius-sm); display: inline-grid; place-items: center; background: var(--accent-fill); color: #fff; font-weight: 700; border: 1px solid rgba(255, 255, 255, .14); } .brand-subtitle { margin: var(--space-2) 0 var(--space-5); color: var(--nav-muted); font-size: .82rem; } .sidebar-collapse-btn { /* desktop-only -- the existing mobile-menu-button already covers narrow viewports with its own overlay-nav pattern, a rail-collapse doesn't make sense stacked on top of that */ display: none; border: 1px solid var(--nav-line); background: var(--nav-soft); color: var(--nav-ink); width: 26px; height: 26px; border-radius: var(--radius-sm); cursor: pointer; align-items: center; justify-content: center; } @media (min-width: 901px) { .sidebar-collapse-btn { display: inline-flex; } /* .mobile-nav-header is display:contents by default (its children -- just the brand link, normally -- flow straight into the sidebar's own vertical stack). Now that the collapse button lives in this same header and needs to sit next to the brand in one row at desktop width too (not just the existing mobile row layout below), it needs to actually be a flex box here, not pass through. */ .mobile-nav-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); } } .sidebar-collapse-btn:hover { background: var(--nav-soft-hover); color: #fff; } .sidebar-collapse-btn svg { transition: transform .15s ease; } /* context selector -- "Personal + ". A static label at 0-1 org (nothing to actually pick), a real checkbox filter at 2+ (see the context-org-toggle script in base.html) -- matches DESIGN's own call that this only becomes meaningfully interactive with 2+ orgs. */ .context-selector { margin: 0 0 var(--space-4); } .context-selector-label { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--nav-soft); color: var(--nav-ink); font-weight: 600; font-size: .82rem; } .context-selector-picker > summary { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--nav-soft); color: var(--nav-ink); font-weight: 600; font-size: .82rem; cursor: pointer; list-style: none; } .context-selector-picker > summary::-webkit-details-marker { display: none; } .context-selector-options { padding: var(--space-2) var(--space-3) 0; display: grid; gap: var(--space-1); } .context-selector-options .checkbox-label { color: var(--nav-muted); font-weight: 500; font-size: .82rem; } .context-selector-options input[type="checkbox"] { width: auto; } /* align-content: start is load-bearing, not decorative -- a grid container's default (align-content: normal) computes to `stretch`, which spreads every row apart to fill any leftover height in the scrollable nav rather than packing them at the top. Collapsing the System group (and whichever others a person closes) makes leftover height the common case, not a short-window edge case -- without this, a mostly-collapsed sidebar reads as broken, huge gaps between rows that have nothing to do with each other. */ .sidebar nav { display: grid; gap: var(--space-1); align-content: start; } .nav-section-header { margin: var(--space-4) var(--space-3) var(--space-1); color: var(--nav-muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .nav-section-header:first-child { margin-top: 0; } /* Compact on purpose. A nav rail is a dense index you scan, not a page you read -- padded out to a "roomy" 46px row, the same handful of links stopped fitting on one screen and the gaps between them read as arbitrary rather than deliberate. Back to a tight, even rhythm. */ .nav-link { padding: var(--space-2) var(--space-3); color: var(--nav-muted); text-decoration: none; border-radius: var(--radius-sm); font-weight: 600; font-size: .92rem; display: flex; align-items: center; transition: background-color .1s ease, color .1s ease; } .nav-link:hover { background: var(--nav-soft); color: #fff; } /* A solid fill, not a soft tint plus a colored edge -- the previous inset 2px border read as tentative next to a real "this is where you are" signal, and a >1px colored border on a list row is a flat no regardless (see craft-floor). This is the exact same solid-fill/white- text pairing already used for the brand mark and primary buttons (--accent-fill), so "you are here" now reads with the same confidence as every other filled control in the app, not a one-off treatment. */ .nav-link.active { background: var(--accent-fill); color: #fff; } .nav-badge { margin-left: auto; background: var(--nav-soft-hover); color: #fff; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-xs); min-width: 18px; text-align: center; font-family: var(--font-mono); } .nav-link.active .nav-badge { background: rgba(255, 255, 255, .25); } .nav-icon { display: inline-flex; margin-right: var(--space-2); flex-shrink: 0; } /* "More" overflow menu (Desktop app/Archives/Trash/Console/Manage buckets/organizations/Admin) -- a real floating popover, not another inline accordion, so it never pushes Buckets/Workspace around above it. Anchored to .nav-more (position: relative) rather than measured in JS: the trigger is always the popover's only sibling, so "just below it" is a static position, not something that needs recalculating. */ .nav-more { position: relative; } .nav-more-trigger { width: 100%; border: none; background: none; cursor: pointer; } .nav-more-chevron { margin-left: auto; display: inline-flex; transition: transform .12s ease; } .nav-more-trigger[aria-expanded="true"] .nav-more-chevron { transform: rotate(90deg); } .nav-more-popover { position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; z-index: 20; background: var(--nav-soft); backdrop-filter: blur(6px); border: 1px solid var(--nav-line); border-radius: var(--radius-md); padding: var(--space-1); box-shadow: var(--shadow-raised); display: grid; gap: 1px; } /* bucket tree -- Personal/Shared/Organizations are plain static headers, not a disclosure: every bucket is always visible, nothing to expand, nothing to persist. (This used to be a
-per-section tree with its own localStorage-backed open/closed state -- removed in favor of always-flat on the theory that a nav rail you have to click your way into isn't actually faster to scan than one short flat list.) */ .bucket-tree { display: grid; gap: 2px; } .nav-subsection-header { padding: var(--space-2) var(--space-3) var(--space-1); margin-top: var(--space-2); color: var(--nav-muted); font-weight: 600; font-size: .82rem; display: flex; align-items: center; } .nav-subsection-header--org { font-size: .82rem; margin-top: var(--space-1); } .bucket-group-items { padding-left: var(--space-4); display: grid; gap: 1px; } .bucket-tree-empty { padding: var(--space-1) var(--space-3); margin: 0; font-size: .78rem; } /* min-width: 0 on the row AND flex/min-width on the label span inside the link are both load-bearing: flex items default to min-width:auto (never shrink below content), so a long bucket name made the whole row overflow the 264px rail and pushed its own controls out past the sidebar's right edge -- adding the visibility checkbox's ~18px is what finally pushed real names over the line. Still load-bearing with the pin button gone: the count badge overflows the same way. */ .bucket-tree-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .bucket-tree-link .nav-link-label { flex: 1 1 auto; min-width: 0; } .bucket-tree-link .nav-badge { flex-shrink: 0; } /* decides whether this bucket shows up as a column on the dashboard board at all (see base.html's own script, localStorage-persisted, same shape as the org-context checkboxes just above it). Unchecked just means "not on the board right now," not archived/deleted -- nothing destructive lives behind it. Sized down from a bare native checkbox's default ~13px box to something that sits quietly next to the icon/label instead of competing with them for the row's limited width -- same accent-color theming as before, just smaller. */ .bucket-visibility-checkbox { flex-shrink: 0; width: 14px; height: 14px; margin: 0; accent-color: var(--accent); } .bucket-tree-link { flex: 1; min-width: 0; font-size: .88rem; } .bucket-tree-link span:not(.nav-icon) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-footer { margin-top: auto; color: var(--nav-muted); font-size: .78rem; display: grid; gap: var(--space-2); } .sidebar-account { color: #fff; font-weight: 600; font-size: .85rem; } .link-button { border: 0; padding: 0; background: none; color: #fff; text-decoration: underline; cursor: pointer; font: inherit; } .theme-toggle { border: 1px solid var(--nav-line); padding: var(--space-2) var(--space-3); background: var(--nav-soft); color: var(--nav-ink); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 600; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: var(--space-2); justify-content: flex-start; } .theme-toggle:hover { background: var(--nav-soft-hover); color: #fff; } .mobile-nav-header { display: contents; } .mobile-nav-content { display: contents; } .mobile-menu-button { display: none; } /* collapsed sidebar (desktop rail mode) -- toggled via #sidebar-collapse-btn, persisted in localStorage, data-sidebar="collapsed" stamped on before paint (see base.html script) so there's no expanded-then- collapsed flash on load. The bucket tree and section headers hide entirely rather than trying to render a nested tree in an icon rail -- "All sessions" still reaches every bucket's content when collapsed, expanding the rail again is one click for the full tree. */ :root[data-sidebar="collapsed"] .app-shell { grid-template-columns: 60px 1fr; } :root[data-sidebar="collapsed"] .sidebar { padding-left: var(--space-3); padding-right: var(--space-3); align-items: center; } :root[data-sidebar="collapsed"] .mobile-nav-header { flex-direction: column; justify-content: center; gap: var(--space-2); } :root[data-sidebar="collapsed"] .brand { justify-content: center; } :root[data-sidebar="collapsed"] .brand-text, :root[data-sidebar="collapsed"] .brand-subtitle, :root[data-sidebar="collapsed"] .nav-link-label, :root[data-sidebar="collapsed"] .nav-badge, :root[data-sidebar="collapsed"] .nav-section-header, :root[data-sidebar="collapsed"] .context-selector, :root[data-sidebar="collapsed"] .bucket-tree, :root[data-sidebar="collapsed"] .sidebar-footer-text, :root[data-sidebar="collapsed"] .sidebar-account { display: none; } :root[data-sidebar="collapsed"] .nav-link, :root[data-sidebar="collapsed"] .theme-toggle { justify-content: center; padding: var(--space-2); width: 100%; } :root[data-sidebar="collapsed"] .nav-icon { margin-right: 0; } :root[data-sidebar="collapsed"] .sidebar-collapse-btn svg { transform: rotate(180deg); } :root[data-sidebar="collapsed"] .sidebar-footer { align-items: center; } .main-content { /* was width:min(1220px,100%) + margin:0 auto -- on any viewport wider than sidebar+1220px that CENTERS the content column in the leftover space instead of sitting next to the sidebar, which is exactly the "crazy amount of blank space" between them on a normal-to-wide desktop window. Left-aligned against the sidebar now; still capped so text-heavy pages don't stretch to an unreadable line length on an ultra-wide display, just capped much wider so the kanban board actually gets to use the room a wide window has for it. */ width: 100%; max-width: 1760px; margin: 0; /* A grid item defaults to min-width:auto, i.e. "never shrink below my content" -- so with enough bucket columns open this stretched to fit them (measured 2200px inside a 2000px window) and pushed the whole PAGE into horizontal scroll, instead of letting .bucket-board's own overflow-x scroll them. Zero lets the item stay at its track width and the board scroll inside it, which is what it was always meant to do. */ min-width: 0; padding-top: var(--space-8); padding-left: var(--space-8); padding-right: max(var(--space-8), env(safe-area-inset-right)); padding-bottom: max(var(--space-10), env(safe-area-inset-bottom)); } .page-header { display: flex; justify-content: space-between; align-items: end; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; } .page-header h1 { font-size: 2.3rem; margin: var(--space-1) 0; } .page-header p { margin: 0; color: var(--muted); } h1 { font-size: 2.3rem; margin: var(--space-1) 0; font-weight: 700; letter-spacing: -.01em; } h2 { font-size: 1.05rem; margin: var(--space-7) 0 var(--space-3); color: var(--ink); font-weight: 700; letter-spacing: -.005em; } .section-hint { margin: calc(-1 * var(--space-2)) 0 var(--space-5); color: var(--muted); font-size: .86rem; } /* the failure state for the status paragraphs the share/capture scripts write into -- they're .section-hint the rest of the time, so without this "Could not create a share link" rendered in exactly the same muted grey as "Link copied". Red here is a real error, per DESIGN.md. (The JS used to toggle .mic-silent, which only ever matched compounded with .mic-meter-label -- a different component -- so it did nothing.) */ .section-hint.is-error { color: var(--danger); font-weight: 600; } /* panels -- flatter surfaces, hairline borders, restrained shadows. This should read like a panel in an instrument cluster, not a floating card. */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow); margin-bottom: var(--space-5); } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); gap: var(--space-3); } .panel h2 { font-size: 1.05rem; margin: 0; } /* session_live.html's growing transcript view */ .live-transcript { display: flex; flex-direction: column; gap: var(--space-3); max-height: 40vh; overflow-y: auto; } .live-transcript-line { margin: 0; font-size: .92rem; } .live-transcript-line .meta { display: inline; margin-right: var(--space-2); font-family: var(--font-mono); } /* rows / records / cards */ .record-list { display: flex; flex-direction: column; } .record { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) var(--space-1); border-bottom: 1px solid var(--line); border-radius: var(--radius-xs); } .record:last-child { border-bottom: 0; } .record.vertical { display: block; padding: var(--space-5) var(--space-1); } .record-main { display: flex; gap: var(--space-3); align-items: flex-start; min-width: 0; flex: 1; } .record h3 { margin: 0; font-size: 1rem; } .record p { margin: var(--space-1) 0 0; color: var(--muted); font-size: .88rem; } .record.completed h3, .completed h3 { text-decoration: line-through; } .completed { opacity: .58; } .meta { font-size: .78rem; color: var(--muted); margin-top: var(--space-2); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } .meta a { color: var(--muted); } .empty { color: var(--muted); text-align: center; padding: var(--space-6); } /* dashboard kanban board -- one column per bucket, its own horizontal scroll container (never the page body's, see body's overflow-x:hidden) since a wide board is expected once you have more than 2-3 buckets. Each column scrolls its own body vertically too (bucket-column-body) so one very active bucket doesn't stretch the whole page -- same "wide/tall content gets its own scroll container" pattern as everywhere else in this file. */ .bucket-board { display: flex; align-items: flex-start; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-2); margin-bottom: var(--space-1); } /* The board is the one page that isn't text: .main-content's 1760px cap exists so prose doesn't run to an unreadable line length on an ultra-wide display, which is the right call everywhere else and the wrong one here -- it was leaving the board short of the window while columns still had room to grow. Released just for the board. */ .main-content:has(.bucket-board) { max-width: none; } /* The board page dropped its "Sessions" heading and subtitle, and the spacing above was sized to sit under them. Without a title the same gaps just push the board down the screen for nothing. */ .main-content:has(.bucket-board) { padding-top: var(--space-5); } .main-content:has(.bucket-board) .page-header { margin-bottom: var(--space-3); } .main-content:has(.bucket-board) .ask-all-panel { margin-bottom: var(--space-3); } /* Columns share whatever width the board actually has instead of sitting at a fixed 340px with dead space beside them: two buckets on a wide desktop each take a real share, six stay at 340px and the board scrolls horizontally as before. The three parts each do one job -- grow:1 claims the slack, min-width pins the floor (without it, shrink would squeeze columns narrower instead of letting the board scroll, losing the overflow-x behaviour), and max-width is the "up to a point": past roughly this width a card's preview text runs longer than comfortable reading, so the column stops growing and the board just has margin. */ .bucket-column { flex: 1 1 340px; min-width: 340px; max-width: 900px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 220px); } /* channel/feed-style header -- the bucket color is a channel-indicator accent (a top stripe + a dot next to the name), never the whole header surface. */ .bucket-column-header { position: relative; background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); padding: var(--space-3) var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex: 0 0 auto; cursor: grab; } .bucket-column-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--bucket-color, var(--accent)); } .bucket-column-header:active { cursor: grabbing; } .bucket-column-header h2 { margin: 0; font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: .55em; min-width: 0; overflow-wrap: anywhere; } .bucket-color-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bucket-color, var(--accent)); flex-shrink: 0; } /* on mobile (see the max-width:900px block below) a bucket's own sessions are collapsed by default -- this is what actually opens them, so the bucket name itself needs to read as tappable there. Plain inherited color/no-underline at every other width, where the sessions are already sitting right below it. */ .bucket-column-title-link { color: inherit; text-decoration: none; display: flex; align-items: center; gap: .55em; min-width: 0; } /* reminders.html's bucket -> session grouping */ .reminders-bucket-group { margin-bottom: var(--space-6); } .reminders-bucket-heading { display: flex; align-items: center; gap: .55em; font-size: 1.15rem; margin: 0 0 var(--space-3); } .reminders-session-group { margin-bottom: var(--space-3); } .reminders-session-heading { font-weight: 600; margin-bottom: var(--space-2); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .reminders-session-heading a { color: inherit; } .reminders-session-clear-form { flex-shrink: 0; } .bucket-column-header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* hidden everywhere except the mobile collapsed-bucket state (the :has() rule in the max-width:900px block flips it on) */ .bucket-column-preview { display: none; padding: var(--space-2) var(--space-4) var(--space-3); } .bucket-column-count { background: var(--soft); color: var(--muted); border: 1px solid var(--line); font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-xs); min-width: 20px; text-align: center; font-family: var(--font-mono); } .bucket-start-btn, .bucket-ask-btn { width: 30px; height: 30px; border-radius: var(--radius-xs); border: 1px solid var(--line); background: var(--surface); color: var(--muted); line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; } .bucket-start-btn:hover, .bucket-ask-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--soft); } /* Ask carries the accent at rest, not just on hover. Shape alone wasn't separating these two: side by side in identical boxes at 13px, a sparkle and a plus were the same mark to a glance. Colour does the work that size can't at this scale, and it matches the sparkle used for Ask everywhere else in the app. */ .bucket-ask-btn { color: var(--accent); } @media (pointer: coarse) { .bucket-start-btn, .bucket-ask-btn, .checkbox, .chat-copy-btn { min-width: 44px; min-height: 44px; } } .bucket-start-popover { position: relative; z-index: 5; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-raised); border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); margin: -1px var(--space-2) 0; border-top: none; } /* Deliberately narrow: this styles the popover's four LAUNCHER buttons (Record / System audio / Manual entry / PC capture, none of which carry .button) and nothing else. It used to read `button.button, button:not (.button)` -- i.e. every button in here -- and at (0,2,1) that beat both .session-type-btn and .button.primary: the shared session-type picker rendered as filled bordered rows with no accent outline (nothing like its own header version, which is the point of sharing the partial), and the "Create session" submit lost its primary fill to --soft chrome. :not(.session-type-btn) keeps the picker out; dropping the .button half keeps the submit out. All four launchers still match, including .bucket-start-pc, which is nested inside its own form. */ .bucket-start-popover button:not(.button):not(.session-type-btn) { width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--soft); color: var(--ink); font: inherit; font-weight: 600; font-size: .86rem; cursor: pointer; display: inline-flex; align-items: center; gap: .5em; } .bucket-start-popover button:not(.button):not(.session-type-btn):hover { background: var(--surface); border-color: var(--accent); } /* was a single row -- flex:1 + min-width:0 on the input is correct on paper, but the popover itself is only ~250px wide, and "Create session"'s min-content width (the button can't shrink below its own text) ate almost all of that row, squeezing the name input down to a near-zero-width square. Stacking the input on its own full-width row fixes this for real instead of fighting the button for space. */ .bucket-manual-form { display: flex; flex-direction: column; gap: var(--space-2); } .bucket-manual-form input[type="text"] { width: 100%; min-height: 2.6em; } .bucket-manual-form button[type="submit"] { align-self: flex-end; } .bucket-column-body { padding: var(--space-4); overflow-y: auto; background: var(--soft); flex: 1 1 auto; transition: background-color .12s ease, box-shadow .12s ease; } .bucket-column-body .empty { padding: var(--space-5) var(--space-1); } .bucket-column-body.drop-target { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); } .bucket-column.dragging { opacity: .4; } a.session-card.panel.dragging { opacity: .4; } .color-swatch-input { width: 52px; height: 40px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; } /* per-column "Ask" popover -- grounded to just that bucket, same visual language as the start-session popover it sits next to */ .bucket-ask-popover { position: relative; z-index: 5; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-raised); border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: var(--space-3); margin: -1px var(--space-2) 0; border-top: none; } /* same fix as .bucket-manual-form above -- stack instead of squeeze */ .bucket-ask-form { display: flex; flex-direction: column; gap: var(--space-2); } .bucket-ask-form input[type="text"] { width: 100%; min-height: 2.6em; } .bucket-ask-form button[type="submit"] { align-self: flex-end; } .bucket-ask-answer { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); line-height: 1.6; font-size: .88rem; color: var(--ink); } .bucket-ask-answer.chat-thinking { color: var(--muted); font-style: italic; } .bucket-ask-answer p { margin: 0 0 .7rem; } .bucket-ask-answer p:last-child { margin-bottom: 0; } /* "Ask all buckets" row above the board -- deliberately NOT a .panel (no padded/bordered card chrome) so it reads as a lean, single-line search field rather than its own feature block competing with the board underneath it. Stays one line at every width via the icon-only submit button -- overrides .ai-ask-form's own mobile column-stack fallback, which existed for a full-width text button this one never needs to make room for. */ .ask-all-panel { margin: 0 0 var(--space-5); } /* align-items:center because .ai-ask-form leaves it at the default stretch: the input stretches to ~51px but .icon-button has a definite height (2.2rem), so stretch doesn't apply to it and it hung from the top of the row with a visible notch beneath it. Centred keeps the submit's deliberately lower visual weight (see .icon-button) without the notch. */ .ask-all-panel .ai-ask-form { flex-direction: row; align-items: center; } /* In the header slot the bar takes the width the hidden title left behind, matching the session page's ask rather than sitting as a short field with space beside it. */ .page-header:has(.ask-all-panel) { align-items: flex-start; } .page-header:has(.ask-all-panel) > div:first-child { flex: 1 1 380px; min-width: 0; } .page-header .ask-all-panel { margin: 0; } /* phone-only expander for the ask bar -- on desktop the bar shows inline and this button never renders visibly */ #ask-all-toggle-btn { display: none; } /* Recording-type picker (see _partials/session_type_picker.html). One tap between "Start recording" and actually recording, so it has to read instantly: each option is a label plus the one-line consequence of choosing it, stacked, with Auto marked as the expected answer rather than merely listed first. */ /* Out of flow on purpose. As an ordinary third flex child of .page-header it reflowed the whole header: closed it was a zero-size item that still took the space-between main-end slot, so "Start recording" sat mid-header instead of flush right; open it was a ~340x365px item that either broke to a second header line and packed flush LEFT (a lone item under space-between), ~790px from the button that opened it, or stayed in row and bottom-aligned the h1 to a 365px-tall line. It already carries --shadow-raised, i.e. it was always drawn to float. */ .session-type-panel { margin: 0 0 var(--space-5); } .session-type-picker { display: grid; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-raised); max-width: 340px; } .bucket-start-popover .session-type-picker { border: 0; box-shadow: none; padding: 0; background: none; } .session-type-prompt { margin: 0 0 var(--space-1); } .session-type-btn { /* flex column with an explicit cross-axis start, not grid: as grid items the label/help spans were being centred (measured text left edges of 176/186/196/214/182px for the five options -- varying with text length, i.e. centred), which `text-align: left` on the button cannot fix because it aligns text INSIDE each span, not the spans themselves. align-items:flex-start pins them to the left edge. */ display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; width: 100%; border: 1px solid transparent; background: none; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); cursor: pointer; font: inherit; } .session-type-btn:hover { background: var(--soft); border-color: var(--line); } .session-type-label { font-size: .9rem; font-weight: 700; color: var(--ink); } .session-type-help { font-size: .76rem; color: var(--muted); } .session-type-auto { border-color: var(--accent); } /* Separated from the recording types above it: those all answer "what am I about to record?", this one answers "I'm not recording". A rule rather than extra spacing, so it reads as a different kind of choice instead of just a further-away one. */ .session-type-manual { margin-top: var(--space-2); border-top: 1px solid var(--line); border-radius: 0; padding-top: var(--space-3); } .session-type-manual:hover { border-color: var(--line); border-top-color: var(--line); } .session-type-auto .session-type-label { color: var(--accent); } /* mid-session switcher on the live screen -- inline label + select, not the full picker: by this point you've already started, so it's a correction, not a decision */ .session-type-inline { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); font-size: .8rem; font-weight: 600; color: var(--muted); } /* width:auto is the load-bearing part -- the global `input, textarea, select { width: 100% }` was never overridden here, and a flex item with flex-basis:auto takes its base size from `width`, so the select claimed 100% of the row, could never share a line with its own label (making the flex/gap/align-items above dead), and wrapped to line 2 at full panel width for a control whose longest option is ~50 characters. min-width:0 lets it shrink on a phone; the cap keeps it sane on a wide window. */ .session-type-inline select { font-size: .82rem; padding: var(--space-1) var(--space-2); width: auto; min-width: 0; max-width: min(100%, 24rem); } /* PC-capture status banner (dashboard, only while a capture is desired-active) -- one row: state badge, optional error, session link, stop. */ .pc-capture-banner { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-3) var(--space-5); } .pc-capture-banner .pc-capture-stop-form { margin-left: auto; } .pc-capture-error { margin: 0; color: var(--danger); } /* session list (dashboard) -- each session is its own card, not a row sharing one panel, for a clearer break between sessions */ .session-list { display: flex; flex-direction: column; gap: var(--space-4); } .session-card-wrap { position: relative; } a.session-card.panel { display: block; text-decoration: none; color: inherit; margin-bottom: 0; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } a.session-card.panel:hover { box-shadow: var(--shadow-raised); transform: translateY(-1px); border-color: var(--accent); } /* Sibling of the , not nested inside it -- a
/