/* === Theme tokens ============================================ Tokens are layered so a single ``[data-theme="..."]`` flip on ```` reskins the whole app. Defaults below are the "forest" palette — desaturated greens, low contrast, easier on the eye than the original matrix-terminal look. Alternate palettes live further down (search for ``[data-theme=``). Naming conventions: --bg page background --surface card/panel background (one step above bg) --surface-2 elevated surface (hover, header, sticky) --surface-3 deepest elevation (modal, dropdown) --text primary readable text --text-muted secondary text (labels, captions) --text-subtle faintest text (helper, placeholder) --on-accent text colour to use ON --accent backgrounds --accent primary brand colour --accent-hover hover/active state of accent --accent-strong saturated emphasis (links, highlights) --accent-dim translucent tint of accent (chips, fills) --accent-ring focus ring colour (translucent) --border default border --border-strong emphasised border (focus, selected) --success / --warning / --danger / --info status colours (each has a ``-dim`` translucent variant for fill chips) --shadow-sm/md/lg layered drop shadows --radius / --radius-sm / --radius-lg corner radii --safe-bottom iOS safe-area inset The historical names ``--panel``, ``--panel-2``, and ``--muted`` are kept as aliases so older selectors continue to resolve. */ :root, :root[data-theme="forest"], [data-theme="forest"] { /* Surfaces — warm desaturated greens, no pure black */ --bg: #1b231d; --surface: #232c25; --surface-2: #2b362e; --surface-3: #344037; /* Text — warm off-white, never neon */ --text: #dee5db; --text-muted: #a0aea2; --text-subtle: #788a7c; --on-accent: #15201a; /* Accent — sage / leaf, friendlier than Tailwind green-400 */ --accent: #88b884; --accent-hover: #9fcd9b; --accent-strong:#b1d8ad; --accent-dim: rgba(136, 184, 132, 0.16); --accent-ring: rgba(136, 184, 132, 0.38); /* Structural */ --border: #3a4a3e; --border-strong:#52685a; /* Status — desaturated so they read as informational, not alarming */ --success: #8ec089; --success-dim: rgba(142, 192, 137, 0.18); --warning: #d4b86a; --warning-dim: rgba(212, 184, 106, 0.18); --danger: #d28080; --danger-dim: rgba(210, 128, 128, 0.18); --info: #8aa9c4; --info-dim: rgba(138, 169, 196, 0.18); /* Hover tints — subtle "press a layer" on interactive surfaces. White-on-dark for dark themes, black-on-light for parchment. */ --hover: rgba(255, 255, 255, 0.05); --hover-strong: rgba(255, 255, 255, 0.09); /* Depth */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.28); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.42); /* Geometry */ --radius: 12px; --radius-sm: 8px; --radius-lg: 18px; --safe-bottom: env(safe-area-inset-bottom, 0px); /* Legacy aliases — keep existing rules working */ --panel: var(--surface); --panel-2: var(--surface-2); --muted: var(--text-muted); --text-muted-legacy: var(--text-muted); color-scheme: dark; } /* ── Matrix terminal — the original look, kept for those who like neon-green-on-near-black. Same token names, different values. The non-:root selector lets the theme picker's preview swatches render in their target palette regardless of the page theme. */ :root[data-theme="matrix"], [data-theme="matrix"] { --bg: #0f1f14; --surface: #16331f; --surface-2: #1d4029; --surface-3: #245034; --text: #e6f4ea; --text-muted: #9bbfa6; --text-subtle: #6a8a76; --on-accent: #0a1810; --accent: #4ade80; --accent-hover: #22c55e; --accent-strong:#86efac; --accent-dim: rgba(74, 222, 128, 0.15); --accent-ring: rgba(74, 222, 128, 0.40); --border: #2a5a3a; --border-strong:#3d7c54; --success: #4ade80; --success-dim: rgba(74, 222, 128, 0.18); --warning: #facc15; --warning-dim: rgba(250, 204, 21, 0.18); --danger: #ef4444; --danger-dim: rgba(239, 68, 68, 0.18); --info: #93c5fd; --info-dim: rgba(147, 197, 253, 0.18); --hover: rgba(255, 255, 255, 0.06); --hover-strong: rgba(255, 255, 255, 0.10); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.70); --panel: var(--surface); --panel-2: var(--surface-2); --muted: var(--text-muted); color-scheme: dark; } /* ── Slate — neutral dark theme, no green. For users who want "just a dark UI" without a colour personality. */ :root[data-theme="slate"], [data-theme="slate"] { --bg: #15181c; --surface: #1d2128; --surface-2: #262b34; --surface-3: #303744; --text: #e2e6ec; --text-muted: #98a1ad; --text-subtle: #6b7280; --on-accent: #0f1115; --accent: #7aa2d6; --accent-hover: #93b6e3; --accent-strong:#b0caec; --accent-dim: rgba(122, 162, 214, 0.16); --accent-ring: rgba(122, 162, 214, 0.40); --border: #343b47; --border-strong:#4a5566; --success: #7fbf9c; --success-dim: rgba(127, 191, 156, 0.18); --warning: #d4b86a; --warning-dim: rgba(212, 184, 106, 0.18); --danger: #d28080; --danger-dim: rgba(210, 128, 128, 0.18); --info: #8aa9c4; --info-dim: rgba(138, 169, 196, 0.18); --hover: rgba(255, 255, 255, 0.05); --hover-strong: rgba(255, 255, 255, 0.09); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.60); --panel: var(--surface); --panel-2: var(--surface-2); --muted: var(--text-muted); color-scheme: dark; } /* ── Parchment — light theme on a cream page. Same forest accent family, inverted for daytime reading. */ :root[data-theme="parchment"], [data-theme="parchment"] { --bg: #f4efe2; --surface: #ece5d2; --surface-2: #e0d8c0; --surface-3: #d4caaa; --text: #2a3327; --text-muted: #5c6a58; --text-subtle: #8a9683; --on-accent: #f7f3e8; --accent: #3d6c3a; --accent-hover: #2c5429; --accent-strong:#1f3f1c; --accent-dim: rgba(61, 108, 58, 0.14); --accent-ring: rgba(61, 108, 58, 0.32); --border: #c4baa0; --border-strong:#a5997c; --success: #3d8a4a; --success-dim: rgba(61, 138, 74, 0.16); --warning: #a07c1e; --warning-dim: rgba(160, 124, 30, 0.16); --danger: #a84444; --danger-dim: rgba(168, 68, 68, 0.16); --info: #2c5b86; --info-dim: rgba(44, 91, 134, 0.14); --hover: rgba(40, 30, 10, 0.05); --hover-strong: rgba(40, 30, 10, 0.09); --shadow-sm: 0 1px 2px rgba(40, 30, 10, 0.10); --shadow-md: 0 4px 12px rgba(40, 30, 10, 0.16); --shadow-lg: 0 12px 32px rgba(40, 30, 10, 0.22); --panel: var(--surface); --panel-2: var(--surface-2); --muted: var(--text-muted); color-scheme: light; } /* === Reset ================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; } /* Default link color — explicit so browsers don't fall back to blue/purple on visited state, which is unreadable on the dark green theme. Wrapped in ``:where()`` so the rule has zero specificity: any class on an anchor (``.landing-cta-primary``, ``.about-signin``, ``.btn-primary`` used as ````, etc.) wins without needing its own ``:visited`` override. Without this, a bare ``a:visited`` selector outranks single-class colour rules (1 type + 1 pseudo- class = 11, vs 1 class = 10) and after first visit a green-on- green CTA button has its text disappear. Specific surfaces (.box-card, .header-back, room-chip, etc.) still override their color independently. */ :where(a) { color: var(--accent); } :where(a:visited) { color: var(--accent); } :where(a:hover) { color: var(--accent-hover); } /* All elements opened via showModal() — explicitly center. Browser defaults vary (Safari and some Chromium configs render them anchored to the top-left when there are fixed-position ancestors or custom max-height rules), so set position + inset + margin:auto for reliable centering across the app. */ dialog { position: fixed; inset: 0; margin: auto; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-text-size-adjust: 100%; padding-bottom: calc(64px + var(--safe-bottom)); } /* Make text feel slightly lighter than the old hard-contrast dark theme. ``font-weight: 400`` is the default but some browsers bump it via user-agent on dark backgrounds; lock it. */ body, input, textarea, select, button { font-weight: 400; } /* === Top Header === */ header { background: var(--panel); padding: 0.75rem 1rem; /* Was ``2px solid var(--accent)`` — the heavy neon strip under the header was the loudest single element in the matrix look. Drop to 1px of border + a subtle shadow so the header still reads as a sticky surface without yelling. */ border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 0.75rem; position: sticky; top: 0; z-index: 100; } header h1 { font-size: 1.2rem; line-height: 1; } header h1 a { color: var(--accent); text-decoration: none; } /* ── Tenant switcher (header dropdown) ────────────────────────── CSS-only ``
`` dropdown so it works without JS. Active tenant's avatar + name sit in the trigger; clicking opens a menu listing all memberships with role badges. Scoped tight to the header so it never bleeds into in-page
. */ .tenant-switcher { margin-left: auto; position: relative; } .tenant-switcher > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.6rem; border-radius: 0.4rem; background: var(--hover); border: 1px solid var(--border); font-size: 0.85rem; user-select: none; } .tenant-switcher > summary::-webkit-details-marker { display: none; } .tenant-switcher > summary:hover { background: var(--hover-strong); } .tenant-switcher-avatar { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--panel); font-weight: 700; font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; } .tenant-switcher-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tenant-switcher-chevron { opacity: 0.6; font-size: 0.7rem; } .tenant-switcher-menu { position: absolute; right: 0; top: calc(100% + 0.3rem); min-width: 14rem; background: var(--panel); border: 1px solid var(--border); border-radius: 0.4rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); padding: 0.25rem; z-index: 200; display: flex; flex-direction: column; gap: 0.15rem; } .tenant-switcher-item { margin: 0; } .tenant-switcher-item button { width: 100%; display: flex; align-items: center; gap: 0.5rem; background: transparent; border: none; color: var(--text); padding: 0.45rem 0.55rem; border-radius: 0.3rem; cursor: pointer; text-align: left; font: inherit; } .tenant-switcher-item button:hover:not(:disabled) { background: var(--hover); } .tenant-switcher-item button:disabled { cursor: default; opacity: 0.95; } .tenant-switcher-item[data-active="1"] button { background: var(--hover); } .tenant-switcher-item-avatar { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--border); color: var(--text-muted, #aaa); font-size: 0.7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .tenant-switcher-item[data-active="1"] .tenant-switcher-item-avatar { background: var(--accent); color: var(--panel); } .tenant-switcher-item-text { flex: 1; display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; } .tenant-switcher-item-text strong { font-size: 0.9rem; font-weight: 600; } .tenant-switcher-active-mark { color: var(--accent); font-size: 0.9rem; } .tenant-switcher-shared { display: block; padding: 0.45rem 0.55rem; border-top: 1px solid var(--border); margin-top: 0.15rem; color: var(--text); text-decoration: none; font-size: 0.85rem; } .tenant-switcher-shared:hover { background: var(--hover); } .brand { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--accent); text-decoration: none; } .brand-mark { width: 28px; height: 22px; display: block; flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Cute reaction when you mouse over the brand — the turtle pokes its head out a little. Pure CSS, no JS. */ .brand:hover .brand-mark { transform: translateX(2px); } .header-nav { display: none; } .header-back { color: var(--muted); text-decoration: none; font-size: 0.9rem; } .header-back:hover { color: var(--accent); } .header-actions { margin-left: auto; display: flex; gap: 0.5rem; } /* === Bottom Tab Bar === */ .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--panel); border-top: 1px solid var(--border); display: flex; justify-content: space-around; padding: 0.4rem 0 calc(0.4rem + var(--safe-bottom)); z-index: 100; } .tab-bar a, .tab-bar button.tab-bar-more { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-decoration: none; color: var(--muted); font-size: 0.65rem; padding: 0.35rem 0.5rem 0.25rem; min-width: 48px; min-height: 44px; justify-content: center; /* Reset button-specific browser defaults so the More tab visually matches the tabs around it. */ background: none; border: 0; cursor: pointer; font-family: inherit; /* For the ``::before`` accent-stripe positioning when active. */ position: relative; } /* Active-page indication. The server stamps ``active`` on whichever tab matches the current URL prefix (and on the More button when the current page lives inside the sheet) — see base.html. We give the active item the accent text colour AND a small accent stripe pinned to the top edge so it reads as a tab in the iOS sense rather than just "this label looks slightly different". */ .tab-bar a.active, .tab-bar button.tab-bar-more.active { color: var(--accent); } .tab-bar a.active::before, .tab-bar button.tab-bar-more.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; background: var(--accent); border-radius: 0 0 3px 3px; } .tab-bar a:hover, .tab-bar button.tab-bar-more:hover { color: var(--accent); } .tab-bar button.tab-bar-more[aria-expanded="true"] { color: var(--accent); } .tab-icon { font-size: 1.3rem; line-height: 1; } /* === "More" bottom-sheet drawer (mobile secondary nav) === Hidden by default. Slides up from the bottom when the More tab is tapped; backdrop dims the rest of the screen and is itself a close affordance. Auto-hidden on >=640px since the header-nav exposes the full set there. */ .more-sheet { position: fixed; inset: 0; z-index: 200; pointer-events: none; visibility: hidden; } .more-sheet.is-open { pointer-events: auto; visibility: visible; } .more-sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.2s; } .more-sheet.is-open .more-sheet-backdrop { opacity: 1; } .more-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--panel); border-top: 1px solid var(--border); border-top-left-radius: 14px; border-top-right-radius: 14px; display: flex; flex-direction: column; /* Push content above the tab-bar + safe-area inset so a tapped link is never under the fingerprint of the iPhone home-indicator strip. */ padding: 0.5rem 0.75rem calc(0.75rem + var(--safe-bottom)); transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1); max-height: 80vh; overflow-y: auto; } .more-sheet.is-open .more-sheet-panel { transform: translateY(0); } .more-sheet-handle { width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 0.25rem auto 0.5rem; } .more-sheet-panel a, .more-sheet-panel button.more-sheet-close { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 0.5rem; text-decoration: none; color: var(--text); font-size: 1rem; border: 0; background: none; text-align: left; font-family: inherit; cursor: pointer; border-bottom: 1px solid var(--border); } .more-sheet-panel a:last-of-type { border-bottom: 1px solid var(--border); } .more-sheet-panel a:hover { color: var(--accent); } .more-sheet-panel a.active { color: var(--accent); background: var(--accent-dim); } .more-sheet-panel a .tab-icon { font-size: 1.25rem; } .more-sheet-panel button.more-sheet-close { justify-content: center; color: var(--muted); margin-top: 0.5rem; border-bottom: 0; } @media (min-width: 640px) { .more-sheet, .tab-bar button.tab-bar-more { display: none !important; } } /* === Main Content === */ main { max-width: 600px; margin: 0 auto; padding: 0.75rem; } /* Wider canvas on bigger screens — the old 720px cap left a lot of empty gutters on desktop while box lists stayed in a narrow stripe. */ @media (min-width: 720px) { main { max-width: 760px; } } @media (min-width: 1100px) { main { max-width: 1080px; } } /* Pages that want to spread across the full screen (the floorplan, in particular — the bigger the canvas, the easier it is to read tiles and zoom into items) opt out of the global cap with .main-wide. */ main.main-wide { max-width: 100%; /* Side padding so cards aren't kissing the screen edge on huge monitors. */ padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right)); } @media (min-width: 1100px) { main.main-wide { padding-left: 1.5rem; padding-right: 1.5rem; } } /* === Cards === */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 0.75rem; /* Soft entrance — every card eases up when its details open or content swaps. Cheap and gives the surface "movement" without heavy animation. */ transition: border-color 0.2s, background 0.2s; } /* The whole document gets a tasteful fade-in on first paint. */ @keyframes app-fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { main { animation: app-fade-in 0.25s ease both; } } .card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; } .card-title { font-size: 1rem; font-weight: 600; color: var(--accent); margin-bottom: 0.5rem; } /* When used inside .card-header (which already arranges title + actions on one line), don't add an extra margin below. */ .card-header .card-title { margin-bottom: 0; } /* "Tag all" disclosure on box detail: closed = just a button; open = inline input + apply button. Keeps the contents card header tidy while leaving the bulk action one tap away. */ .bulk-tag-disclosure summary { list-style: none; cursor: pointer; } .bulk-tag-disclosure summary::-webkit-details-marker { display: none; } .bulk-tag-disclosure[open] summary { color: var(--muted); border-color: var(--border); } .bulk-tag-form { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; } .bulk-tag-form input[type="text"] { flex: 1 1 12rem; min-width: 0; } /* AI tag-suggest: a single trigger button followed by a row of click-to-apply pills. Lives on the item-detail dialog and inside the bulk-tag disclosure on the contents card. */ .tag-suggest { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; } .tag-suggest-trigger { align-self: flex-start; } .tag-suggest-icon { display: inline-block; margin-right: 0.25rem; } .tag-suggest-results { display: flex; flex-wrap: wrap; gap: 0.35rem; } .tag-suggest-pill { background: var(--accent-dim); color: var(--accent); border: 1px solid transparent; border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.85rem; cursor: pointer; font-family: inherit; } .tag-suggest-pill:hover { background: var(--accent); color: var(--bg); } .tag-suggest-empty { font-size: 0.85rem; color: var(--muted); } /* === Feedback widget === Floating launcher (bottom-right on desktop, above the bottom nav on mobile) + modal dialog. The launcher is always visible to authenticated tenant members; the dialog opens with the textarea focused so a user can start typing without a second tap. */ .feedback-launcher { position: fixed; right: 1rem; bottom: calc(1rem + var(--safe-bottom)); z-index: 200; background: var(--accent); color: var(--bg); border: none; border-radius: 999px; padding: 0.6rem 1rem; font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); display: inline-flex; align-items: center; gap: 0.4rem; transition: transform 0.15s ease, box-shadow 0.15s ease; } .feedback-launcher:hover { transform: translateY(-1px); } .feedback-launcher-icon { font-size: 1.05rem; } /* On phones where the bottom nav already lives, scoot the launcher above it so it doesn't sit on top of the nav buttons. Also collapse to a circular icon-only button — the text label is redundant for the second-most-common phone user-flow, and the icon-only shape (with a ring of contrast shadow) reads more clearly as a "this is a button" than the pill-with-tiny-emoji we shipped first. */ @media (max-width: 639px) { .feedback-launcher { bottom: calc(72px + var(--safe-bottom)); right: 0.85rem; padding: 0; width: 48px; height: 48px; border-radius: 50%; justify-content: center; /* Stronger shadow so it reads as floating above content, even when scrolled over a busy card. */ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--accent-ring); } .feedback-launcher-icon { font-size: 1.4rem; } .feedback-launcher-label { display: none; } } .feedback-dialog { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--text); padding: 0; width: min(420px, 100vw - 1.5rem); max-height: 85vh; overflow: hidden; } .feedback-dialog::backdrop { background: rgba(0, 0, 0, 0.55); } .feedback-form { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 1rem 0.85rem; max-height: 85vh; overflow: auto; } .feedback-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; } .feedback-dialog-head h2 { font-size: 1rem; margin: 0; color: var(--accent); } .feedback-close { background: none; border: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0.3rem; } .feedback-close:hover { color: var(--accent); } .feedback-field { display: flex; flex-direction: column; gap: 0.3rem; } .feedback-label { font-size: 0.85rem; color: var(--muted); } .feedback-form textarea { width: 100%; min-height: 100px; resize: vertical; font-family: inherit; padding: 0.5rem; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); } .feedback-screenshot-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .feedback-screenshot-status { font-size: 0.8rem; color: var(--muted); } .feedback-screenshot-hint { margin: -0.25rem 0 0; font-style: italic; } .feedback-dialog-foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); } .feedback-result { font-size: 0.85rem; margin: 0; padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); } .feedback-result-ok { color: var(--accent); background: var(--accent-dim); } .feedback-result-err { color: var(--danger); background: var(--danger-dim); } /* === /usage facelift === Spec § phase 13: per-tenant home reorganised into named sections. The TOC is a horizontal anchor strip at the top; each section gets an h2 heading + id so the anchor links scroll cleanly. */ .usage-toc { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; padding: 0.5rem 0.6rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; } .usage-toc a { color: var(--accent); text-decoration: none; padding: 0.15rem 0.5rem; border-radius: var(--radius-sm); } .usage-toc a:hover { background: var(--accent-dim); } .usage-section { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 1.2rem 0 0.4rem; padding-top: 0.2rem; /* Scroll-margin keeps anchored sections from sitting under the top nav when the user jumps via TOC. */ scroll-margin-top: 1rem; } .usage-cost-block .cost-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem 1rem; margin: 0; } .usage-cost-block .cost-block dt { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .usage-cost-block .cost-block dd { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--accent); } /* "Download my data" vs "Encrypted backup" — two adjacent cards that need clear differentiation so users pick the right one. The portability card is the primary CTA (most users want this); the encrypted backup is recessed visually as the self-host / DR path. */ .data-choice-card { position: relative; } .data-choice-card .data-choice-list { list-style: none; margin: 0.5rem 0 0.85rem; padding: 0; font-size: 0.85rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.25rem; } .data-choice-card .data-choice-list li { padding-left: 1rem; position: relative; } .data-choice-card .data-choice-list li::before { content: "•"; position: absolute; left: 0; color: var(--accent); opacity: 0.6; } .data-choice-card-advanced { background: var(--panel-2); opacity: 0.92; } .data-choice-card-advanced .card-title { color: var(--muted); } .data-choice-badge { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.1rem 0.45rem; margin-left: 0.4rem; border-radius: 999px; background: var(--accent-dim); color: var(--accent); vertical-align: middle; } /* Billing cards on /usage: upgrade CTA (gradient highlight when the tenant is free) and the manage-subscription card (recessed when they're already paying). */ .billing-card-upgrade { background: linear-gradient( 140deg, var(--panel-2), var(--accent-dim) 200% ); border-color: var(--accent); } .billing-card-upgrade .card-title { color: var(--accent); } .billing-card-pro { background: var(--panel-2); } /* Admin feedback queue */ .feedback-queue-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; padding: 0.55rem 0; border-top: 1px solid var(--border); align-items: start; } .feedback-queue-row:first-of-type { border-top: 0; } .feedback-queue-status { font-family: ui-monospace, Menlo, monospace; font-size: 0.72rem; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--panel-2); color: var(--muted); } .feedback-queue-status-open { background: var(--accent-dim); color: var(--accent); } .feedback-queue-status-accepted { background: var(--info-dim); color: var(--info); } .feedback-queue-status-rejected { background: var(--danger-dim); color: var(--danger); } .feedback-queue-status-done { background: var(--success-dim); color: var(--success); } .feedback-queue-body { white-space: pre-wrap; font-size: 0.88rem; } .feedback-queue-meta { font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; } .feedback-queue-actions { display: flex; gap: 0.25rem; flex-wrap: wrap; } .feedback-export-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; } /* === Floorplan editor (Fabric.js) === Reached from /floors/{id}/edit-image. Toolbar sits at the top, canvas fills the rest. Touch-friendly action sizes; tool group stays on a single row on phones via horizontal scroll. */ .floor-edit-main { /* The editor wants the full window width — opt out of the content max-width the rest of the app uses so the floorplan canvas can stretch on a desktop. */ max-width: none !important; padding: 0 !important; } .floor-edit-toolbar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; background: var(--panel); border-bottom: 1px solid var(--border); overflow-x: auto; position: sticky; top: 0; z-index: 40; } .floor-edit-tool-group { display: inline-flex; gap: 0.25rem; padding-right: 0.4rem; border-right: 1px solid var(--border); flex-shrink: 0; } .floor-edit-tool-group:last-child { border-right: 0; padding-right: 0; } .floor-edit-tool-group-trailing { margin-left: auto; } .floor-edit-tool { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.7rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.82rem; color: var(--text); cursor: pointer; font-family: inherit; text-decoration: none; white-space: nowrap; } .floor-edit-tool:hover { border-color: var(--accent); } .floor-edit-tool.is-active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); } .floor-edit-tool-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 700; } .floor-edit-tool-primary:hover { filter: brightness(1.05); } .floor-edit-tool-primary:disabled { opacity: 0.6; cursor: not-allowed; } .floor-edit-tool-danger { color: var(--danger); } .floor-edit-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); background: var(--swatch, #888); cursor: pointer; padding: 0; flex-shrink: 0; } .floor-edit-swatch.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); } .floor-edit-status { padding: 0.3rem 0.8rem; font-size: 0.82rem; color: var(--muted); min-height: 1.4em; } .floor-edit-canvas-wrap { display: flex; justify-content: center; padding: 0.6rem; background: var(--bg); min-height: 50vh; } #floor-edit-canvas { border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3); max-width: 100%; height: auto; } @media (max-width: 720px) { .floor-edit-tool span:not([aria-hidden]) { /* Drop the label on phones, keep the icon — saves horizontal space and the title attr still describes each button. */ display: none; } .floor-edit-tool { padding: 0.5rem 0.6rem; } } /* === Onboarding tour overlay === First-run walkthrough rendered by a single overlay div in base.html. Spotlight is an absolutely-positioned hole that lets the highlighted element shine through; the tooltip floats next to it. When no target element is present (welcome step on the home page, or a target that doesn't exist on this tenant's data), the tooltip centres on the viewport with the spotlight hidden. */ .tour-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: auto; } /* No separate ::before backdrop anymore — the spotlight's outer ``box-shadow`` is the dimmer. When a step has no target the spotlight gets positioned off-screen so the shadow covers the whole viewport with no visible cutout. Two layers was causing the spotlight to flash on/off as one was hidden during step transitions; one layer is always visible. Feedback #22: the previous treatment used a 3 px accent border + 18 px glow — too subtle to read as "look here" on the new forest palette, where the sage-green accent sits much closer to the page surface than the original neon green. Boosted the ring (4 px) and the glow (40 px), and gave it a slow pulse so the eye actually catches the highlight even when the user is reading the tooltip text first. */ .tour-spotlight { position: absolute; border-radius: 8px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72), 0 0 0 4px var(--accent), 0 0 40px var(--accent), 0 0 0 2px var(--bg) inset; /* Smooth slide between targets so consecutive steps feel continuous rather than blinking from one rect to the next. */ transition: left 0.22s ease, top 0.22s ease, width 0.22s ease, height 0.22s ease; animation: tour-spotlight-pulse 1.6s ease-in-out infinite; } @keyframes tour-spotlight-pulse { 0%, 100% { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72), 0 0 0 4px var(--accent), 0 0 32px var(--accent), 0 0 0 2px var(--bg) inset; } 50% { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72), 0 0 0 5px var(--accent-strong), 0 0 60px var(--accent), 0 0 0 2px var(--bg) inset; } } @media (prefers-reduced-motion: reduce) { .tour-spotlight { animation: none; } } .tour-tooltip { position: absolute; width: min(320px, calc(100vw - 16px)); background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 0.95rem 0.7rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); pointer-events: auto; transition: opacity 0.18s ease; } .tour-tooltip-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; } .tour-tooltip-step { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); font-family: ui-monospace, Menlo, monospace; } .tour-tooltip-close { background: none; border: none; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 0.3rem; } .tour-tooltip-close:hover { color: var(--accent); } .tour-tooltip-title { margin: 0 0 0.35rem; font-size: 1rem; color: var(--accent); } .tour-tooltip-body { margin: 0 0 0.7rem; font-size: 0.9rem; line-height: 1.4; color: var(--text); } .tour-tooltip-foot { display: flex; justify-content: space-between; gap: 0.4rem; } /* Earlier passes locked body overflow while a tour was active; that caused the page to snap-scroll to top when the tour finished (browser restoring layout after overflow:hidden ↔ auto toggle). Letting the page scroll keeps user-initiated position stable and lets the user scroll past the spotlight if they want to. */ /* Tour management list on /usage */ .tour-catalogue { margin: 0.6rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.35rem; } .tour-catalogue-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .tour-catalogue-meta { min-width: 0; } .tour-catalogue-meta code { font-size: 0.78rem; background: var(--panel); padding: 0.05rem 0.3rem; border-radius: var(--radius-sm); } /* === /audit Tinder-style swipe === One card at a time, photo-first, three always-visible action buttons so accept/reject is never below the fold. Cards stack visually (next card peeks behind the active one) for the "deck" feel. Drag offsets are set inline by the swipe JS; the CSS transitions return cards to centre on release. */ .audit-hero { margin-bottom: 0.85rem; padding: 0.9rem 1rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); } .audit-hero-title { margin: 0 0 0.3rem; font-size: 1.2rem; color: var(--accent); } .audit-hero-sub { margin: 0 0 0.6rem; font-size: 0.88rem; color: var(--muted); max-width: 60ch; } .audit-progress { margin-top: 0.4rem; } .audit-progress-bar { height: 6px; background: var(--panel-2); border-radius: 999px; overflow: hidden; margin-bottom: 0.25rem; } .audit-progress-fill { height: 100%; background: var(--accent); transition: width 0.25s ease-out; } .audit-progress-label { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; } .audit-start-card, .audit-complete-card { text-align: center; padding: 1.6rem 1.2rem; } .audit-start-card h2, .audit-complete-card h2 { margin: 0 0 0.6rem; font-size: 1.3rem; color: var(--accent); } /* The card deck: position relative so each card sits on top of the next. Min-height ensures the swipe area is generous on phones even when the photo is small. */ .audit-deck { position: relative; margin: 0 auto 1rem; width: 100%; max-width: 460px; min-height: 460px; touch-action: pan-y; /* allow vertical page scroll but let JS handle horizontal drag */ } .audit-card { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; user-select: none; cursor: grab; transform: translateY(8px) scale(0.97); opacity: 0; pointer-events: none; transition: transform 0.2s ease-out, opacity 0.2s ease-out; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); } .audit-card.is-active { transform: none; opacity: 1; pointer-events: auto; z-index: 2; } .audit-card.is-stacked { transform: translateY(8px) scale(0.97); opacity: 0.6; z-index: 1; } .audit-card.is-buried { opacity: 0; z-index: 0; } .audit-card.is-gone { display: none; } .audit-card-photo { flex: 1 1 auto; min-height: 0; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; } .audit-card-photo img { width: 100%; height: 100%; object-fit: contain; display: block; } .audit-card-photo-empty { font-size: 4rem; color: var(--muted); background: var(--panel-2); } .audit-card-body { padding: 0.85rem 1rem 0.9rem; background: var(--panel); } .audit-card-name { margin: 0; font-size: 1.15rem; color: var(--text); } .audit-card-notes { margin: 0.3rem 0 0; font-size: 0.9rem; color: var(--muted); } .audit-card-meta { margin: 0.4rem 0 0; } /* Direction-intent feedback during a swipe. Feedback #34 — "swiping was not intuitive to me … I accidentally deleted my box while thinking I was accepting everything." Mid-swipe the user needs to know WHICH side they're committing to before they let go. Two changes: 1. Persistent edge guides on the active card — small labels that ALWAYS show "← MISSING" on the left and "FOUND →" on the right. Faint by default; brighten + color-shift as the swipe crosses each side's threshold. 2. The big stamps stay (FOUND / MISSING rotated text), but now they fade in earlier (intent > 0.25 instead of 0.4) and lock in colour earlier so the user feels the commit before release. */ .audit-card-stamps { position: absolute; inset: 0; pointer-events: none; } .audit-stamp { position: absolute; top: 1.2rem; padding: 0.45rem 0.85rem; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.08em; border-radius: var(--radius-sm); border: 4px solid currentColor; opacity: 0; transform: rotate(-12deg); transition: opacity 0.12s; text-transform: uppercase; } .audit-stamp-found { right: 1rem; color: var(--success); transform: rotate(-15deg); } .audit-stamp-missing { left: 1rem; color: var(--danger); transform: rotate(15deg); } .audit-card.intent-right .audit-stamp-found { opacity: 1; } .audit-card.intent-left .audit-stamp-missing { opacity: 1; } /* Persistent edge guides — visible at all times on the active card so the user knows which direction means what BEFORE they start swiping. Faded by default so they don't fight the card content; brighten on intent crossing. */ .audit-edge-guide { position: absolute; top: 50%; transform: translateY(-50%); padding: 0.5rem 0.7rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; border-radius: var(--radius-sm); background: var(--bg); opacity: 0.55; pointer-events: none; transition: opacity 0.15s, background 0.15s, color 0.15s; user-select: none; text-transform: uppercase; } .audit-edge-guide-missing { left: 0.75rem; color: var(--danger); border: 2px solid var(--danger); } .audit-edge-guide-found { right: 0.75rem; color: var(--success); border: 2px solid var(--success); } .audit-card.intent-left .audit-edge-guide-missing { opacity: 1; background: var(--danger); color: var(--bg); } .audit-card.intent-right .audit-edge-guide-found { opacity: 1; background: var(--success); color: var(--bg); } .audit-card-finished { position: static; text-align: center; padding: 2rem 1.2rem; transform: none; opacity: 1; } /* Always-visible action bar — never below the fold. ``bottom`` clears the mobile tab-bar (fixed bottom: 0, ~64 px tall) AND the iOS safe-area inset. Without this, the action row sat directly underneath the tab-bar's fixed strip, hiding Missing / Skip / Found from anyone trying to audit on a phone (feedback #33). The 72 px figure matches the value used by the feedback-launcher's mobile media query — both clear the tab-bar by ~8 px breathing room. */ .audit-actions { position: sticky; bottom: calc(72px + var(--safe-bottom, 0px) + 0.5rem); display: grid; grid-template-columns: 1fr 0.6fr 1fr; gap: 0.5rem; padding: 0.6rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); z-index: 30; box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.25); } @media (min-width: 640px) { /* Desktop has no bottom tab-bar — restore the smaller offset so the action bar sits closer to the bottom of the viewport. Body's padding-bottom is reset to 0 above 640 px (see the ``@media (min-width: 640px)`` block near the ``main`` section), so we don't need the 72 px clearance. */ .audit-actions { bottom: calc(var(--safe-bottom, 0px) + 0.5rem); } } .audit-actions.is-busy { opacity: 0.6; pointer-events: none; } .audit-action { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.7rem 0.5rem; } .audit-action-icon { font-size: 1.4rem; line-height: 1; } .audit-action-label { font-size: 0.85rem; font-weight: 600; } .audit-action-hint { font-size: 0.7rem; opacity: 0.5; font-family: ui-monospace, Menlo, monospace; } @media (max-width: 640px) { .audit-deck { min-height: 60vh; } .audit-action-hint { display: none; } } /* === Public /about pages === Stripe + similar KYC partners need a public-facing surface describing the business, pricing, contact, refund policy, etc. These pages render WITHOUT the actor-aware base.html so they work for unauthenticated visitors. Layout is intentionally plain — readable typography, clear nav, no in-app chrome. */ body.about-public { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg, #0f1f14); color: var(--text, #e6f4ea); line-height: 1.5; } .about-header { /* Desktop: one row — brand on the left, nav in the middle, sign-in on the right. Mobile (≤ 720 px): brand + ☰ + sign-in in one tight row, with the nav promoted to a full-width drawer beneath when the ☰ checkbox is toggled. Padding clamp keeps the inner content aligned with ``.about-main`` on wide viewports (the 1080 px inner column + 1.5 rem floor side padding align the bar with the body's left and right edges on wide desktops) and tightens to 0.85 rem on phones so the bar doesn't waste horizontal space. */ display: flex; align-items: center; gap: 1rem; padding: 0.7rem max(0.85rem, calc(50% - 540px)); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); background: var(--panel); position: sticky; top: 0; z-index: 10; } .about-brand { font-size: 1.2rem; font-weight: 700; color: var(--accent, #4ade80); text-decoration: none; white-space: nowrap; flex-shrink: 0; order: 1; } .about-nav { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; flex: 1; order: 2; min-width: 0; } .about-nav a { color: var(--text, #e6f4ea); text-decoration: none; font-size: 0.9rem; padding: 0.4rem 0.65rem; border-radius: 6px; transition: background 0.15s, color 0.15s; } .about-nav a:hover, .about-nav a:focus-visible { color: var(--accent); background: var(--hover); } .about-signin { padding: 0.55rem 1rem; background: var(--accent, #4ade80); color: var(--on-accent, var(--bg, #0a1810)); border-radius: 8px; text-decoration: none; font-weight: 600; white-space: nowrap; flex-shrink: 0; order: 3; transition: background 0.15s, transform 0.1s; } .about-signin:hover { background: var(--accent-hover, var(--accent)); transform: translateY(-1px); } .about-signin:active { transform: translateY(0); } /* Mobile menu toggle — checkbox + label hack so the drawer works pure-CSS. Hidden on desktop. */ .about-nav-toggle-input { /* Visually hidden but keyboard-focusable. */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .about-nav-toggle { display: none; /* shown only at mobile breakpoint */ align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 8px; cursor: pointer; background: transparent; border: 1px solid var(--border); font-size: 1.25rem; line-height: 1; color: var(--text); user-select: none; -webkit-tap-highlight-color: transparent; transition: background 0.15s, border-color 0.15s; order: 2; flex-shrink: 0; } .about-nav-toggle:hover, .about-nav-toggle-input:focus-visible + .about-nav-toggle { background: var(--hover); border-color: var(--border-strong, var(--accent)); } .about-nav-toggle-icon-close { display: none; } .about-nav-toggle-input:checked + .about-nav-toggle { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); } .about-nav-toggle-input:checked + .about-nav-toggle .about-nav-toggle-icon-open { display: none; } .about-nav-toggle-input:checked + .about-nav-toggle .about-nav-toggle-icon-close { display: inline; } @media (max-width: 720px) { .about-header { flex-wrap: wrap; padding: 0.6rem 0.85rem; gap: 0.55rem; } .about-brand { font-size: 1.05rem; flex: 1; min-width: 0; } .about-nav-toggle { display: inline-flex; order: 2; } .about-signin { padding: 0.5rem 0.85rem; font-size: 0.92rem; order: 3; } /* Nav lives in source order at the END so it can wrap below the top row as a full-width drawer. ``order: 4`` puts it last in flex flow regardless of source. */ .about-header > .about-nav { order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0.1rem; padding-top: 0.55rem; margin-top: 0.55rem; border-top: 1px solid var(--border); /* Closed by default; the checkbox toggle reveals it. */ display: none; } .about-nav-toggle-input:checked ~ .about-nav { display: flex; } .about-header > .about-nav a { padding: 0.75rem 0.5rem; /* 44 px tap target */ font-size: 1rem; border-radius: 8px; } } .about-main { /* Reading column. 820 → 1080 at wide-desktop breakpoint matches the authenticated ``main`` element's 760 → 1080 progression so the public surface doesn't read as dramatically narrower than the rest of the app on the same viewport. Sticky header above uses the same 1080 center column for its content alignment so the page reads as a single centred axis. */ max-width: 820px; margin: 0 auto; padding: 2rem 1.5rem 3rem; } @media (min-width: 1100px) { .about-main { max-width: 1080px; } } .about-hero h1 { font-size: 2rem; color: var(--accent, #4ade80); margin: 0 0 0.6rem; line-height: 1.2; } .about-lede { font-size: 1.05rem; color: var(--muted, #9bbfa6); margin: 0 0 1.5rem; max-width: 65ch; } .about-section { margin: 2rem 0; } .about-section h2 { font-size: 1.25rem; color: var(--accent, #4ade80); margin: 0 0 0.5rem; border-bottom: 1px solid var(--border, #2a5a3a); padding-bottom: 0.3rem; } .about-section p { margin: 0.7rem 0; } .about-section ul { padding-left: 1.4rem; margin: 0.6rem 0; } .about-section ul li { margin: 0.35rem 0; } .about-section a { color: var(--accent, #4ade80); } .about-features ul { padding-left: 1.4rem; } .about-features li { margin: 0.55rem 0; } .about-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .about-plan { background: var(--panel, #16331f); border: 1px solid var(--border, #2a5a3a); border-radius: 12px; padding: 1.25rem 1.35rem 1.4rem; } .about-plan h2 { margin: 0 0 0.4rem; font-size: 1.4rem; color: var(--accent, #4ade80); border: 0; padding: 0; } .about-plan-price { font-size: 1.8rem; font-weight: 700; margin: 0 0 1rem; color: var(--text, #e6f4ea); } .about-plan ul { padding-left: 1.2rem; margin: 0.5rem 0 0.8rem; } .about-plan-pro { border-color: var(--accent); background: linear-gradient(140deg, var(--panel), var(--accent-dim)); } .about-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.9rem; } .about-table th, .about-table td { border-bottom: 1px solid var(--border, #2a5a3a); padding: 0.55rem 0.6rem; text-align: left; vertical-align: top; } .about-table th { color: var(--accent, #4ade80); font-weight: 600; } /* Cost-ledger table on /about/transparency: tinted rows make the labor + tax + remainder lines easy to spot among the vendor bills. Subtle enough that the table reads as one ledger, not a heatmap. */ .about-cost-table td:nth-child(2) { font-family: ui-monospace, Menlo, monospace; white-space: nowrap; } .about-cost-row-tax td { background: var(--warning-dim); } .about-cost-row-labor td { background: var(--info-dim); } .about-cost-row-remainder td { background: var(--accent-dim); } .about-contact-card { background: var(--panel, #16331f); border: 1px solid var(--border, #2a5a3a); border-radius: 12px; padding: 1.2rem 1.4rem; } .about-contact-email { font-size: 1.3rem; font-weight: 600; margin: 0.5rem 0; } .about-contact-email a { color: var(--accent, #4ade80); text-decoration: none; } .about-footer { padding: 1.75rem 1rem 2.5rem; color: var(--muted, #9bbfa6); font-size: 0.85rem; border-top: 1px solid var(--border, #2a5a3a); margin-top: 2rem; } .about-footer-row { text-align: center; margin: 0 0 0.5rem; } .about-footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; justify-content: center; } .about-footer-links a { color: var(--accent); text-decoration: none; padding: 0.35rem 0; /* Phone-friendly tap targets without making desktop links feel gappy — the gap above spaces siblings; the padding gives each link its own non-overlapping click box. */ } .about-footer-links a:hover, .about-footer-links a:focus-visible { text-decoration: underline; } /* === Public landing (/) ===================================== The marketing-side home page that unauthenticated visitors land on. Extends about/_layout.html so it inherits the public header + footer; these classes style the inner content (hero, feature grid, transparency callout, final CTA). */ .landing-hero { text-align: center; /* Clamp shrinks the vertical padding on phones so the hero doesn't eat half the viewport before the headline lands; stretches comfortably on desktop. */ padding: clamp(1.5rem, 5vw, 2.75rem) 0 clamp(1.25rem, 4vw, 2.25rem); max-width: 720px; margin: 0 auto; } .landing-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: clamp(0.72rem, 1.6vw, 0.82rem); color: var(--accent); margin: 0 0 0.55rem; font-weight: 600; } .landing-headline { font-size: clamp(2rem, 6vw, 2.85rem); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.85rem; color: var(--text); border: 0; /* Long headlines on the public landing can break awkwardly on phones if a single word lands alone on the last line. ``balance`` evens the line lengths so the headline reads as a deliberate unit on every viewport. */ text-wrap: balance; } .landing-sub { font-size: clamp(0.98rem, 2.2vw, 1.1rem); line-height: 1.55; color: var(--text-muted); max-width: 56ch; margin: 0 auto 1.4rem; text-wrap: pretty; } .landing-cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-bottom: 0.75rem; } .landing-cta-primary, .landing-cta-secondary { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.8rem 1.5rem; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: background 0.15s, transform 0.1s, border-color 0.15s; } .landing-cta-primary { background: var(--accent); color: var(--on-accent); } .landing-cta-primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .landing-cta-secondary { background: transparent; color: var(--accent); border-color: var(--border-strong); } .landing-cta-secondary:hover { background: var(--hover); border-color: var(--accent); } .landing-cta-note { margin: 0; } .landing-features { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.75rem 0 2.25rem; } @media (min-width: 720px) { .landing-features { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .landing-features { grid-template-columns: repeat(3, 1fr); } } .landing-feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.15rem 1.25rem; transition: border-color 0.15s, transform 0.12s; } .landing-feature:hover { border-color: var(--accent); transform: translateY(-2px); } .landing-feature h2 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--accent); border: 0; padding: 0; display: flex; align-items: center; gap: 0.5rem; } .landing-feature p { margin: 0; color: var(--text-muted); font-size: 0.95rem; } .landing-transparency { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.4rem 1.4rem; margin: 2rem 0 2.25rem; } .landing-transparency h2 { margin: 0 0 0.7rem; font-size: 1.2rem; color: var(--accent); border: 0; padding: 0; } .landing-transparency ul { margin: 0; padding-left: 1.2rem; } .landing-transparency li { margin: 0.5rem 0; color: var(--text); } .landing-transparency li strong { color: var(--accent); } .landing-final-cta { text-align: center; padding: 2rem 1rem; margin-top: 1.5rem; background: linear-gradient(140deg, var(--surface), var(--accent-dim)); border: 1px solid var(--border); border-radius: var(--radius); } .landing-final-cta h2 { margin: 0 0 0.6rem; font-size: 1.5rem; color: var(--text); border: 0; padding: 0; } .landing-final-cta p { margin: 0 auto 1.1rem; color: var(--text-muted); max-width: 50ch; } /* === /ingest facelift === Lead with the primary action (Take photo / From gallery as big icon-and-label cards), keep detection scope as visible secondary control, hide packing-into behind a disclosure since it's optional and used in <10% of sessions. No more wide-but- left-justified column. */ .ingest-hero { background: linear-gradient(140deg, var(--panel) 0%, var(--panel-2) 100%); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.25rem 0.9rem; margin-bottom: 1rem; } .ingest-hero-head { margin-bottom: 1rem; } .ingest-hero-title { font-size: 1.4rem; margin: 0 0 0.3rem; color: var(--accent); } .ingest-hero-sub { margin: 0; font-size: 0.92rem; color: var(--muted); max-width: 60ch; } .ingest-cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; } .ingest-upload { display: contents; } .ingest-cta-button { display: flex !important; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; text-align: left; cursor: pointer; min-height: 70px; } .ingest-cta-icon { font-size: 1.6rem; flex: 0 0 auto; } .ingest-cta-label { display: flex; flex-direction: column; gap: 0.05rem; line-height: 1.15; } .ingest-cta-label strong { font-size: 1rem; } .ingest-cta-label small { font-size: 0.78rem; opacity: 0.75; } .ingest-scope { border: 0; padding: 0; margin: 0 0 0.85rem; } .ingest-scope-legend { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem; padding: 0; } .ingest-scope-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.4rem; } .ingest-scope-option { position: relative; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); cursor: pointer; user-select: none; transition: border-color 0.12s, background 0.12s; } .ingest-scope-option input { position: absolute; opacity: 0; pointer-events: none; } .ingest-scope-option:hover { border-color: var(--accent); } .ingest-scope-option:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); } .ingest-scope-option-title { font-weight: 600; color: var(--text); font-size: 0.9rem; } .ingest-scope-option-hint { font-size: 0.78rem; color: var(--muted); } .ingest-scope-option:has(input:checked) .ingest-scope-option-title { color: var(--accent); } .ingest-packing { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); } .ingest-packing-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.75rem; cursor: pointer; font-size: 0.9rem; list-style: none; } .ingest-packing-summary::-webkit-details-marker { display: none; } .ingest-packing-summary::after { content: "▾"; color: var(--muted); font-size: 0.75rem; margin-left: 0.5rem; } .ingest-packing[open] .ingest-packing-summary::after { content: "▴"; } .ingest-packing-summary-label small { color: var(--muted); font-weight: normal; } .ingest-packing-current { font-size: 0.82rem; color: var(--accent); } .ingest-packing-body { padding: 0 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .ingest-packing-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--muted); } .ingest-packing-field select { width: 100%; font-size: 0.9rem; } .ingest-packing-banner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.75rem; background: var(--accent-dim); border: 1px solid var(--accent); border-radius: var(--radius-sm); font-size: 0.85rem; } .ingest-packing-banner[hidden] { display: none; } .ingest-jobs-section { margin-top: 0.5rem; } /* === /admin dashboard facelift === Modern dashboard pattern: hero KPI strip, sticky anchor TOC, section cards in priority order (feedback first because it's the most actionable), per-tenant cards instead of a wide table. Operators are heavy users of this page — density on the things they act on (feedback, tokens) and decompression on the things they read (tenant roster) is the trade we're making. */ /* Hero is sticky below the page header (top: ~3.25rem accounts for the global
's height + safe spacing). When the user scrolls past the sentinel placed before the hero, body gets ``.admin-hero-compact`` and the hero collapses to a thin floating bar with KPI tiles only — title + description + tile footers fade so the dashboard becomes a peripheral indicator rather than a wall. Z-index 30 stays below the page-level
(z 100) so the header always sits on top. The hero's background is opaque so content scrolling underneath doesn't bleed through. */ /* Disable Chrome's scroll-anchoring on the admin page. Reason: the sticky hero collapses while in flow, so its flow-box height drops ~7rem when compact mode kicks in. With the default ``overflow-anchor: auto`` Chrome reads that as "content above the viewport just changed height" and tugs ``scrollY`` back toward zero to "preserve" the visible anchor. That pulls the user past the sentinel boundary in the OPPOSITE direction — IntersectionObserver fires the inverse edge, hero re-expands, anchoring tugs the other way, hero re-collapses. Visible jitter loop, scroll feels "stuck at the top." Feedback #12. With anchoring off, the layout shift is visible (content rises as the hero shrinks) but the toggle happens exactly once per scroll past the sentinel and the user can scroll freely. */ html:has(.admin-hero), body:has(.admin-hero) { overflow-anchor: none; } .admin-hero-sentinel { height: 1px; margin: 0 0 -1px; pointer-events: none; } .admin-hero { position: sticky; top: 3.25rem; /* z-index history: 30 → 50 (quick-action disclosure at z-30 was painting over the hero) → 95 (feedback #16: in-flow section cards that opened their own stacking context via ``transform``/``filter`` on hover were still rendering on top of the compact KPI bar during scroll). 95 sits one below the page-level ``
`` (z 100) and well below any modal-class overlay (z 200+), giving the hero exactly the "on top of every page surface, but under modals" layer the operator asked for. ``isolation: isolate`` opens a stacking context on the hero itself so children's z-indexes stay scoped here and can't escape upward into something that out-paints us. */ z-index: 95; isolation: isolate; margin-bottom: 1rem; padding: 1rem 1.15rem 0.9rem; background: var(--panel); background-image: linear-gradient(140deg, var(--panel) 0%, var(--panel-2) 100%); border: 1px solid var(--border); border-radius: var(--radius); transition: padding 0.18s ease, max-width 0.2s ease, margin 0.2s ease; } .admin-hero-head { margin-bottom: 0.75rem; transition: max-height 0.2s ease, opacity 0.18s ease, margin 0.2s ease; /* Was ``6rem`` — too tight for the description text, which wraps to 4-6 visual lines on a narrow phone viewport. The dashboard preamble ("Signed in as ... Spec § Operator surface — names, counts, costs only. Reading tenant data takes a maintainer invite.") was getting clipped mid-line on most phones. 14rem fits the full text on every viewport we ship to and still transitions cleanly to 0 in compact mode (the animation duration is independent of the source value). */ max-height: 14rem; opacity: 1; overflow: hidden; } .admin-hero-title { font-size: 1.2rem; margin: 0 0 0.25rem; color: var(--accent); } .admin-hero-sub { margin: 0; font-size: 0.85rem; color: var(--muted); /* Long emails in inline ```` (eg ``some.long.address+ tag@trustyninjas.com``) blew past the hero on narrow phone viewports — added wrap so the cell breaks at any character instead of forcing a horizontal scroll. */ overflow-wrap: anywhere; } .admin-hero-sub code { word-break: break-all; overflow-wrap: anywhere; } .admin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem; } .admin-kpi { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem 0.6rem; text-decoration: none; color: inherit; display: block; transition: transform 0.12s, border-color 0.12s, padding 0.18s ease; } .admin-kpi:hover { transform: translateY(-1px); border-color: var(--accent); } .admin-kpi-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); transition: font-size 0.18s ease; } .admin-kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--accent); line-height: 1.1; margin: 0.1rem 0; font-variant-numeric: tabular-nums; transition: font-size 0.18s ease; } .admin-kpi-foot { font-size: 0.75rem; color: var(--muted); transition: max-height 0.2s ease, opacity 0.18s ease; max-height: 2rem; opacity: 1; overflow: hidden; } .admin-kpi-attention { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim) inset; } /* Compact mode — body.admin-hero-compact is toggled by the IntersectionObserver in admin.html when the sentinel scrolls off the top of the viewport. Hero collapses copy + shrinks the KPI tiles AND moves to a narrow right-side rail so the page content has full width to itself. On phones the hero disappears entirely (a dashboard pinned at top eats half the tiny viewport — the operator can scroll back up to see it). */ body.admin-hero-compact .admin-hero { padding: 0.4rem 0.65rem 0.45rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); /* Slide to the right rail: max-width caps the tile cluster, margin-left auto pushes it to the right. The page content below flows full-width as if the hero weren't there. */ max-width: 32rem; margin-left: auto; } body.admin-hero-compact .admin-hero-head { max-height: 0; opacity: 0; margin-bottom: 0; } body.admin-hero-compact .admin-kpis { /* Single row when compact — auto-fit pulls every tile inline. */ grid-auto-flow: column; grid-auto-columns: minmax(110px, 1fr); grid-template-columns: none; } body.admin-hero-compact .admin-kpi { padding: 0.25rem 0.5rem 0.3rem; } body.admin-hero-compact .admin-kpi-label { font-size: 0.62rem; } body.admin-hero-compact .admin-kpi-value { font-size: 1rem; margin: 0; } body.admin-hero-compact .admin-kpi-foot { max-height: 0; opacity: 0; } @media (max-width: 720px) { /* Compact-on-mobile = vanish. The hero is too big to be useful as a pinned bar on a phone viewport, and we don't have the horizontal room to push it to the side either. Scroll back up to see it again. */ body.admin-hero-compact .admin-hero { display: none; } } /* In-page anchor strip — NOT sticky. Earlier passes had ``position: sticky; top: 0`` here, which collided with the page-level ``
`` (also sticky, top 0, z-index 100) — the TOC slid under the header on scroll, the section cards rode over it via their own z-index, and the result was the "cut off at the top, elements on top of it" failure mode the operator saw at /admin. The TOC is a launch pad to jump to a section once, not a navbar that needs to follow the user down the page. Keep it in the document flow. */ .admin-toc { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.4rem 0.6rem; margin: 0 0 1rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; } .admin-toc a { color: var(--accent); text-decoration: none; padding: 0.15rem 0.55rem; border-radius: var(--radius-sm); } .admin-toc a:hover { background: var(--accent-dim); } .admin-section { margin: 0 0 1.4rem; padding: 1rem 1.1rem 0.85rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); scroll-margin-top: 4rem; } .admin-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .admin-section-head h2 { font-size: 1rem; margin: 0; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; } .admin-section-actions { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } .admin-empty { padding: 1rem 0; text-align: center; color: var(--muted); font-size: 0.9rem; } .admin-disclosure { margin-top: 0.7rem; } .admin-disclosure > summary { cursor: pointer; } /* Tenant cards — replaces the 11-column table. Each card is a self-contained roster entry with key counts, member roll, and lifecycle actions. */ .admin-tenant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.7rem; } .admin-tenant-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem 0.85rem; background: var(--panel-2); display: flex; flex-direction: column; gap: 0.55rem; } .admin-tenant-card-soft { opacity: 0.7; background: var(--panel); } .admin-tenant-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; } .admin-tenant-card-head h3 { margin: 0; font-size: 1rem; color: var(--text); } .admin-tenant-card-badges { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; } .admin-tenant-card-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem 0.8rem; margin: 0; } .admin-tenant-card-stats div { min-width: 0; } .admin-tenant-card-stats dt { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .admin-tenant-card-stats dd { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; } .admin-tenant-card-invites { background: var(--accent-dim); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 0.45rem 0.6rem; } .admin-tenant-card-invites summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--accent); list-style: none; } .admin-tenant-card-invites summary::-webkit-details-marker { display: none; } .admin-tenant-invite-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .admin-tenant-invite-row { display: flex; flex-direction: column; gap: 0.25rem; } .admin-tenant-invite-url { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.78rem; padding: 0.35rem 0.55rem; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); } .admin-tenant-card-members ul { margin: 0.4rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; } .admin-tenant-card-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; padding-top: 0.4rem; border-top: 1px solid var(--border); } .admin-hard-delete-form { width: 100%; display: flex; gap: 0.3rem; margin-top: 0.4rem; } .admin-hard-delete-form input { flex: 1; min-width: 0; } /* Operator plan-override disclosure (comp-Pro flow). Inline collapsible form inside the tenant card so the operator can flip plan + leave an audit-log reason in one place without navigating away. */ .admin-tenant-plan-action { display: inline-block; position: relative; isolation: isolate; } .admin-tenant-plan-action summary { list-style: none; cursor: pointer; } .admin-tenant-plan-action summary::-webkit-details-marker { display: none; } .admin-tenant-plan-form { width: 100%; margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem 0.7rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); } .admin-tenant-plan-form p { margin: 0; } .admin-tenant-plan-form label { display: flex; flex-direction: column; gap: 0.2rem; color: var(--muted); } .admin-tenant-plan-form input[type="text"] { font-size: 0.9rem; } /* Plan pills + status pills */ .pill-plan-free { background: var(--panel); color: var(--muted); border: 1px solid var(--border); } .pill-plan-pro { background: var(--accent-dim); color: var(--accent); } /* Feedback source pills. ``user_widget`` rows don't render a pill at all (template skips when source == 'user_widget') so we only style the alternates here. */ .pill-source-mcp { background: rgba(96, 165, 250, 0.15); color: #93c5fd; border-color: rgba(96, 165, 250, 0.4); } /* Feedback queue rows — replaces the old simple-grid layout with a "card per row" look so each entry has visible structure (status + meta + body + actions). */ .admin-feedback-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; } .admin-feedback-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; background: var(--panel-2); } .admin-feedback-open { border-left: 3px solid var(--accent); } .admin-feedback-accepted { border-left: 3px solid var(--info); } .admin-feedback-rejected { border-left: 3px solid var(--danger); } .admin-feedback-done { border-left: 3px solid var(--success); } .admin-feedback-row-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; } .admin-feedback-row-meta { font-size: 0.78rem; color: var(--muted); } .admin-feedback-row-body { white-space: pre-wrap; font-size: 0.92rem; margin-bottom: 0.45rem; } .admin-feedback-row-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .admin-feedback-row-context { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .admin-feedback-row-actions { display: flex; gap: 0.25rem; flex-wrap: wrap; } /* Kanban feedback queue — four columns (Open / Accepted / Rejected / Done) with scrollable bodies + a shared filter bar above. Caps the section's vertical footprint so it doesn't dominate the dashboard. Filter narrows visible cards across all columns simultaneously. */ .kanban-filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; margin: 0.6rem 0 0.55rem; padding: 0.5rem 0.6rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.82rem; } .kanban-filter-bar label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; color: var(--muted); } .kanban-filter-bar select, .kanban-filter-bar input { font-size: 0.85rem; padding: 0.3rem 0.45rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); } .kanban-filter-search { flex: 1; min-width: 14rem; } .kanban-filter-count { margin-left: auto; } .kanban-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem; align-items: stretch; } @media (max-width: 980px) { .kanban-board { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .kanban-board { grid-template-columns: 1fr; } } .kanban-column { display: flex; flex-direction: column; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); min-height: 12rem; max-height: 32rem; } .kanban-column-open { border-top: 3px solid var(--accent); } .kanban-column-accepted{ border-top: 3px solid var(--info); } .kanban-column-rejected{ border-top: 3px solid var(--danger); } .kanban-column-done { border-top: 3px solid var(--success); } .kanban-column-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); background: var(--panel); } .kanban-column-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); font-weight: 700; } .kanban-column-count { font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem; color: var(--muted); background: var(--panel-2); padding: 0.1rem 0.5rem; border-radius: 999px; } .kanban-column-body { flex: 1; overflow-y: auto; padding: 0.45rem; display: flex; flex-direction: column; gap: 0.45rem; } .kanban-column-empty { font-size: 0.85rem; color: var(--muted); text-align: center; padding: 1rem 0; } .kanban-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem 0.65rem; font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.3rem; } .kanban-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-size: 0.75rem; } .kanban-card-id { font-family: ui-monospace, Menlo, monospace; color: var(--accent); font-weight: 600; } .kanban-card-when { color: var(--muted); font-family: ui-monospace, Menlo, monospace; } .kanban-card-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.88rem; line-height: 1.35; } .kanban-card-meta { font-size: 0.78rem; color: var(--muted); display: flex; gap: 0.25rem; flex-wrap: wrap; align-items: center; } .kanban-card-meta a { color: var(--accent); text-decoration: none; } .kanban-card-resolved { margin-top: 0.15rem; } .kanban-card-actions { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.2rem; } .kanban-card-action { padding: 0.2rem 0.55rem; font-size: 0.75rem; } .kanban-card-action-done { color: var(--success); } .kanban-card-action-rejected { color: var(--danger); } .kanban-card-action-accepted { color: var(--info); } /* Urgent flag — feedback #45. Cards flagged urgent sort to the top of each kanban column (server-side ORDER BY) and get a red left border + corner pill so they're impossible to miss on a crowded queue. */ .kanban-card-urgent { border-left: 4px solid var(--danger); background: linear-gradient(90deg, rgba(248, 113, 113, 0.08), var(--panel) 18%); } .pill-urgent { background: rgba(248, 113, 113, 0.18); color: #fca5a5; border-color: rgba(248, 113, 113, 0.5); font-weight: 700; } .kanban-card-action-urgent-off { color: var(--danger); } .kanban-card-action-urgent-on { background: var(--danger); color: var(--bg); border-color: var(--danger); } /* Activity feed — compact rows aligned to a grid. */ .admin-activity { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; } .admin-activity-row { display: grid; grid-template-columns: 9.5rem 1fr 1fr auto; gap: 0.5rem; padding: 0.25rem 0.4rem; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; } .admin-activity-row:hover { background: var(--panel-2); } .admin-activity-when { color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem; } .admin-activity-action { color: var(--accent); font-size: 0.82rem; } .admin-activity-actor { color: var(--text); } @media (max-width: 720px) { .admin-activity-row { grid-template-columns: 1fr; gap: 0.1rem; border-bottom: 1px solid var(--border); padding: 0.4rem 0; } } /* Quick action: inline disclosure that opens a compact create-tenant form right inside the section header so it's never more than one tap away. */ .admin-quick-action summary { list-style: none; cursor: pointer; } .admin-quick-action summary::-webkit-details-marker { display: none; } /* Previously ``[open] summary { color: var(--muted) }`` — meant to dim the "+ Create tenant" header when the form is showing, but on the ``.btn-primary`` accent-green background that muted colour rendered grey-on-green which read as "this button just stopped working" after first click. The button stays at its normal primary styling regardless of disclosure state; the form being expanded below is the open-indicator. */ .admin-quick-action { position: relative; /* Establish a stacking context with ``isolation: isolate`` so the absolute-positioned form below isn't out-ranked by sibling stacking contexts created elsewhere on the page (tenant cards with ``opacity < 1`` for soft-delete state, hover transforms with their own contexts, etc.). Without this, the form's ``z-index: 30`` was painting beneath in-flow tenant cards on the user's screen. */ isolation: isolate; z-index: 60; } .admin-quick-action-form { position: absolute; top: 100%; right: 0; margin-top: 0.4rem; width: min(360px, 95vw); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.85rem; box-shadow: var(--shadow-lg); /* z-index is now scoped to the .admin-quick-action stacking context above; 1 is enough — and the parent's z-60 puts the entire disclosure above sibling cards / sections. */ z-index: 1; } /* Quotas: per-tenant card grid (one disclosure per tenant). */ .admin-quotas-grid { display: grid; grid-template-columns: 1fr; gap: 0.4rem; } .admin-quota-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.55rem 0.75rem; background: var(--panel-2); } .admin-quota-summary { cursor: pointer; } /* Vendor cost: prominent total + breakdown row. */ .admin-cost-summary { display: grid; grid-template-columns: minmax(180px, 220px) 1fr; gap: 0.8rem; margin: 0.55rem 0; align-items: stretch; } @media (max-width: 720px) { .admin-cost-summary { grid-template-columns: 1fr; } } .admin-cost-total { background: linear-gradient(140deg, var(--accent-dim), var(--panel-2)); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; display: flex; flex-direction: column; justify-content: center; } .admin-cost-by-kind { display: flex; flex-direction: column; gap: 0.25rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; } .admin-cost-kind { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; } .admin-cost-kind-value { color: var(--muted); } /* OAuth client groups on /admin's API tokens card. Each group is one card showing the (client + tenant) pair, status pill counts, and a "Revoke all active" action so the operator can collapse a flood of claude.ai-issued access tokens in one click. */ .oauth-client-groups { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0 0.85rem; } .oauth-client-groups-title { font-size: 0.82rem; color: var(--accent); font-weight: 600; margin-bottom: 0.1rem; } .oauth-client-group { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; background: var(--panel-2); } .oauth-client-group-quiet { opacity: 0.65; } .oauth-client-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; } .oauth-client-group-counts { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; } .oauth-client-group-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.35rem; flex-wrap: wrap; } .pill { display: inline-block; font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: 0.05em; } .pill-active { background: var(--accent-dim); color: var(--accent); } .pill-suspended { background: var(--warning-dim); color: var(--warning); } .pill-revoked { background: var(--danger-dim); color: var(--danger); } .oauth-client-groups-details { margin-top: 0.5rem; } .oauth-client-groups-details summary { cursor: pointer; } /* Same when the title is followed by a short sub-headline / description — keep them visually paired with a tight gap. */ .card-title-tight { margin-bottom: 0.25rem; } /* Bigger title for "this is the page subject" headers like a box detail. */ .card-title-lg { font-size: 1.1rem; } /* Danger variant for "scary" sections (delete confirmations). */ .card-title-danger { color: var(--danger); } /* Make behave like a normal heading by hiding the default disclosure marker and giving it the right cursor — saves an inline style="cursor:pointer;list-style:none;" on every collapsible card. */ summary.card-title { cursor: pointer; list-style: none; } summary.card-title::-webkit-details-marker { display: none; } /* Forms inside a
need a small top margin so they don't crowd the summary line that sits above them. */ details.card > form, details.card > .card-form { margin-top: 0.75rem; } .card-form { margin-top: 0.75rem; } .flex-1 { flex: 1; min-width: 0; } /* Soft variant of summary.card-title — used when the summary itself is a structured block (e.g. box detail header) rather than a single text line. */ summary.card-summary-soft { cursor: pointer; list-style: none; } summary.card-summary-soft::-webkit-details-marker { display: none; } .card-meta-row { margin-top: 0.2rem; } /* Box-detail header: meta on the left, visible "Edit box" CTA on the right. Without a CTA the disclosure looks like a static header — users were filing bugs about not being able to edit the box at all (feedback #4). The chevron rotates on open so the affordance also doubles as the state indicator. */ .box-edit-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; } .box-edit-summary-meta { min-width: 0; flex: 1; } .box-edit-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.3rem; /* The CTA is purely visual — the parent handles the click — so pointer-events on this child are off to avoid swallowing the toggle target. */ pointer-events: none; } .box-edit-chevron { display: inline-block; transition: transform 0.15s ease; } .box-edit-card[open] .box-edit-chevron { transform: rotate(180deg); } @media (max-width: 480px) { /* Hide the label on phones so the CTA shrinks to ``✎ ▾`` and doesn't push the box name into a tiny column. */ .box-edit-cta-label { display: none; } } /* Floor actions disclosure on /locations/{id} — the rename / replace floorplan / delete-floor block. Was rendered as muted small text that looked like a paragraph, not an action. Promoted to a button-styled disclosure so it reads as "click me to manage this floor" without the user needing to find it via the tour. */ .floor-actions-summary { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.85rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--accent); list-style: none; user-select: none; } .floor-actions-summary::-webkit-details-marker { display: none; } .floor-actions-summary:hover { border-color: var(--accent); } .floor-actions-chevron { font-size: 0.75rem; transition: transform 0.15s ease; } .floor-actions-disclosure[open] .floor-actions-chevron { transform: rotate(180deg); } .danger-zone-blurb { margin: 0.75rem 0 0.5rem; } .location-card-preview { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); flex-shrink: 0; } .room-chip-link { text-decoration: none; } /* === Forms === */ form { display: flex; flex-direction: column; gap: 0.6rem; } label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--muted); } label.inline { flex-direction: row; align-items: center; gap: 0.6rem; cursor: pointer; } input[type="text"], input[type="file"], textarea, select { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 0.65rem 0.75rem; border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; width: 100%; min-height: 44px; } input[type="text"]:focus, input[type="file"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } input[type="text"]:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); } /* Native