/* RoadTests admin — a FAITHFUL port of the Claude Design canvas (RoadTests Admin.dc.html). Every colour, radius and size below is lifted from that design's inline styles so the panel matches it 1:1. Framework-free, no JS. Class names the existing pages use (.rt-card/.rt-table/ .rt-pill/.rt-grid) are redefined here; the rest are the design's components. */ :root { --bg: #f6f5f2; --ink: #1c1b18; --ink-2: #2a2823; --ink-3: #4a463f; --ink-soft: #6d6960; --muted: #8a867d; --label: #a09b91; --card: #ffffff; --fill: #faf9f7; --fill-2: #f0eee8; --row-hover: #faf9f6; --line: #e7e4de; --line-2: #efece6; --line-3: #f3f1ec; --input: #e0ddd6; --side: #1b1a17; --side-2: #26241f; --side-text: #b5b0a6; --side-item: #c8c3b8; --side-label: #8d887c; --side-active: #f3f1ec; --side-line: #2b2a25; --side-foot: #7a766c; /* accent + the design's exact status oklch pairs */ --accent: oklch(0.5 0.13 260); --accent-hover: oklch(0.42 0.13 260); --accent-strong: oklch(0.55 0.15 260); --pill-ok-bg: oklch(0.95 0.03 150); --pill-ok-fg: oklch(0.4 0.1 150); --pill-wait-bg: oklch(0.96 0.04 80); --pill-wait-fg: oklch(0.47 0.1 65); --pill-bad-bg: oklch(0.94 0.04 25); --pill-bad-fg: oklch(0.48 0.16 25); --pill-neutral-bg: #f0eee8; --pill-neutral-fg: #6d6960; --health-ok: oklch(0.56 0.13 150); --health-wait: oklch(0.66 0.13 65); --health-bad: oklch(0.55 0.18 25); --health-off: oklch(0.45 0.01 80); --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* Dark mode — driven by the header switcher (a cookie stamps data-theme on ). Redefines the same tokens so every surface, border and pill flips; nothing else needs to know. */ :root[data-theme="dark"] { --bg: #171613; --ink: #f2efe9; --ink-2: #e4e0d8; --ink-3: #cbc6bb; --ink-soft: #a7a094; --muted: #8b8579; --label: #79736a; --card: #201e1a; --fill: #26241f; --fill-2: #2d2a24; --row-hover: #262420; --line: #332f28; --line-2: #2d2a24; --line-3: #282520; --input: #3a352d; --side: #100f0d; --side-2: #1a1915; --side-active: #2f2c25; --side-line: #2a2822; --accent: oklch(0.72 0.12 260); --accent-hover: oklch(0.8 0.11 260); --accent-strong: oklch(0.68 0.13 260); --pill-ok-bg: oklch(0.33 0.05 150); --pill-ok-fg: oklch(0.83 0.11 150); --pill-wait-bg: oklch(0.34 0.05 80); --pill-wait-fg: oklch(0.85 0.1 80); --pill-bad-bg: oklch(0.33 0.07 25); --pill-bad-fg: oklch(0.83 0.13 25); --pill-neutral-bg: #2d2a24; --pill-neutral-fg: #a7a094; --health-ok: oklch(0.62 0.13 150); --health-wait: oklch(0.7 0.13 65); --health-bad: oklch(0.62 0.17 25); --health-off: oklch(0.5 0.02 80); } /* Pills/chips whose background flips LIGHT in dark mode need dark text (they were white-on-dark). */ :root[data-theme="dark"] .rt-biz .mark, :root[data-theme="dark"] .rt-navitem.active, :root[data-theme="dark"] .rt-navitem .badge, :root[data-theme="dark"] .rt-toggle button.on, :root[data-theme="dark"] .rt-chip.active, :root[data-theme="dark"] .rt-range.active { color: #17150f; } /* Keep the primary button blue-on-white in dark, independent of the (lighter) link accent. */ :root[data-theme="dark"] .rt-btn.primary { background: oklch(0.55 0.15 260); border-color: oklch(0.55 0.15 260); color: #fff; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; cursor: pointer; } a:hover { color: var(--accent-hover); text-decoration: underline; } h1 { margin: 0; } input, select, textarea, button { font-family: inherit; } input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .mono { font-family: var(--mono); } .tnum { font-variant-numeric: tabular-nums; } /* ---- Shell -------------------------------------------------------------------- */ .rt-shell { display: flex; height: 100vh; overflow: hidden; } .rt-sidebar { width: 212px; flex: 0 0 auto; background: var(--side); color: var(--side-text); display: flex; flex-direction: column; overflow-y: auto; } /* business switcher pill */ .rt-biz { padding: 12px 10px 10px; position: relative; } .rt-biz-pill { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; cursor: pointer; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); text-decoration: none; } .rt-biz-pill:hover { background: rgba(255,255,255,0.09); text-decoration: none; } .rt-biz-pill .mark { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-strong); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; flex: 0 0 auto; } .rt-biz-pill .name { font-weight: 700; font-size: 13.5px; color: #f3f1ec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-biz-pill .sub { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--side-label); } .rt-biz-pill .chev { color: #7a766c; font-size: 10px; flex: 0 0 auto; } .rt-navgroup { } .rt-navgroup.labelled { margin: 10px 10px 0; padding: 8px 6px 7px; } .rt-navgroup.top { margin: 2px 10px 0; padding: 0 6px; } .rt-navgroup .lbl { display: flex; align-items: center; gap: 7px; padding: 2px 8px 7px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--side-label); } .rt-navgroup .lbl .dot { width: 8px; height: 8px; border-radius: 3px; flex: 0 0 auto; } .rt-navgroup .lbl .count { margin-left: auto; font-size: 10px; color: #6e6a60; letter-spacing: normal; } .rt-navitem { display: flex; align-items: center; gap: 8px; margin: 2px 0; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--side-item); background: rgba(255,255,255,0.035); text-decoration: none; white-space: nowrap; } .rt-navitem:hover { background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; } .rt-navitem.active { background: var(--accent-strong); color: #fff; font-weight: 700; box-shadow: 0 2px 10px oklch(0.55 0.15 260 / 0.45); } .rt-navitem .dot { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto; } .rt-navitem .txt { flex: 1; } .rt-navitem .badge { font-size: 10.5px; font-weight: 700; background: var(--accent-strong); color: #fff; border-radius: 99px; padding: 1px 7px; } .rt-navitem.active .badge { background: rgba(255,255,255,0.25); } .rt-sidefoot { margin-top: auto; padding: 14px 16px 16px; border-top: 1px solid var(--side-line); font-size: 11.5px; line-height: 1.5; color: var(--side-foot); } .rt-sidefoot b { color: #d8d4cb; font-weight: 600; } .rt-sidefoot a, .rt-linkbtn { color: #9a958a; } .rt-sidefoot form { display: inline; } .rt-linkbtn { border: none; background: none; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; } .rt-col { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* ---- Header ------------------------------------------------------------------- */ .rt-header { height: 52px; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 0 20px; background: var(--card); border-bottom: 1px solid var(--line); } .rt-search { flex: 1; max-width: 520px; position: relative; min-width: 0; display: flex; } .rt-search input { width: 100%; height: 32px; border: 1px solid var(--input); border-radius: 8px; padding: 0 12px; font-size: 13px; background: var(--fill); color: inherit; outline: none; } .rt-search input:focus { border-color: oklch(0.6 0.1 260); background: var(--card); } .rt-spacer { flex: 1; } .rt-toggle { display: flex; border: 1px solid var(--input); border-radius: 7px; overflow: hidden; } .rt-toggle button { border: none; cursor: pointer; font-size: 11.5px; font-weight: 700; padding: 5px 9px; background: var(--card); color: var(--muted); } .rt-toggle button.on { background: var(--ink); color: #fff; } .rt-avatar { width: 30px; height: 30px; border-radius: 50%; background: oklch(0.85 0.05 150); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; color: oklch(0.35 0.08 150); flex: 0 0 auto; } /* The scroll region doubles as the default page container: comfortable padding and a capped, left-aligned width, so EVERY page (including ones not yet individually restyled) sits inside a container instead of running edge-to-edge. Full-bleed pages — the ticket detail split-view — opt out with .bleed. */ .rt-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 28px 64px; max-width: 1320px; box-sizing: border-box; } .rt-scroll.bleed { padding: 0; max-width: none; } .rt-screen { } /* container now lives on .rt-scroll; kept as a markup hook */ .rt-screen.narrow { max-width: 1120px; } .rt-page-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .rt-h1 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; } .rt-sub { font-size: 12.5px; color: var(--muted); } /* mobile drawer via checkbox hack (no JS) */ .rt-burger, #rt-drawer { display: none; } @media (max-width: 860px) { .rt-sidebar { position: fixed; z-index: 60; left: -240px; transition: left .18s ease; height: 100vh; } #rt-drawer:checked ~ .rt-shell .rt-sidebar { left: 0; box-shadow: 0 18px 60px rgba(0,0,0,.4); } .rt-burger { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--input); background: var(--card); border-radius: 8px; cursor: pointer; font-size: 16px; flex: 0 0 auto; } .rt-scroll { padding: 16px 14px 40px; } .rt-scroll.bleed { padding: 0; } } /* ---- Chips / ranges ----------------------------------------------------------- */ .rt-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 14px; } .rt-chip { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 99px; cursor: pointer; background: var(--card); color: var(--ink-soft); border: 1px solid var(--input); text-decoration: none; } .rt-chip:hover { text-decoration: none; } .rt-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); } .rt-chip .c { opacity: .55; margin-left: 4px; } .rt-ranges { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 16px; } .rt-range { border: 1px solid var(--input); cursor: pointer; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 99px; background: var(--card); color: var(--ink-soft); text-decoration: none; } .rt-range.active { background: var(--ink); color: #fff; border-color: var(--ink); } .rt-range:hover { text-decoration: none; } .rt-tznote { margin-left: auto; font-size: 12px; color: var(--muted); } /* ---- Health tiles (solid) ----------------------------------------------------- */ .rt-health-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; } .rt-health { border-radius: 11px; padding: 14px 17px; color: #fff; display: block; text-decoration: none; } .rt-health:hover { filter: brightness(1.06); text-decoration: none; color: #fff; } .rt-health.ok { background: var(--health-ok); } .rt-health.wait { background: var(--health-wait); } .rt-health.bad { background: var(--health-bad); } .rt-health.off { background: var(--health-off); } .rt-health .row { display: flex; align-items: center; gap: 8px; } .rt-health .name { font-weight: 800; font-size: 13.5px; letter-spacing: .02em; } .rt-health .state { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,0.18); border-radius: 99px; padding: 2px 9px; } .rt-health .headline { font-size: 12.5px; color: rgba(255,255,255,0.88); margin-top: 7px; } /* ---- Kill-switch / attention banner ------------------------------------------ */ .rt-banner { margin-top: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 16px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .rt-banner .state { font-size: 22px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; } .rt-banner .by { font-size: 12.5px; color: var(--ink-soft); } /* ---- Stat tiles / counters ---------------------------------------------------- */ .rt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 18px; } .rt-tiles.tight { margin-top: 12px; } .rt-tile { background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 13px 16px; } .rt-tile .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--label); } .rt-tile .big { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin-top: 5px; font-variant-numeric: tabular-nums; } .rt-tile.counter .big { font-size: 19px; } .rt-tile .sub { font-size: 12px; color: var(--muted); margin-top: 2px; } /* ---- Bucket cards ------------------------------------------------------------- */ .rt-buckets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; } .rt-bucket { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 8px 13px; display: flex; align-items: baseline; gap: 8px; } .rt-bucket .n { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; } .rt-bucket .l { font-size: 12px; color: var(--ink-soft); } /* ---- P&L up/down bars --------------------------------------------------------- */ .rt-barbox { margin-top: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 16px 20px; } .rt-barbox .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--label); margin-bottom: 12px; } .rt-bars { display: flex; gap: 3px; height: 100px; } .rt-bar { flex: 1; display: flex; flex-direction: column; } .rt-bar .up-area { height: 76%; display: flex; align-items: flex-end; } .rt-bar .up { width: 100%; border-radius: 3px 3px 0 0; background: oklch(0.58 0.12 150 / 0.7); } .rt-bar .mid { height: 1px; background: #d6d2ca; } .rt-bar .down-area { height: 24%; } .rt-bar .down { width: 100%; border-radius: 0 0 3px 3px; background: oklch(0.55 0.17 25 / 0.75); } /* ---- Cards & grid (detail pages) ---------------------------------------------- */ .rt-card { background: var(--card); border: 1px solid var(--line); border-radius: 11px; } .rt-card.pad { padding: 14px 16px; } .rt-card-title { padding: 12px 16px 0; display: flex; align-items: baseline; gap: 10px; } .rt-card-title .t { font-weight: 700; font-size: 13.5px; } .rt-card-title .n { font-size: 11.5px; color: var(--label); } .rt-card-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--label); margin-bottom: 10px; } .rt-grid { display: grid; gap: 14px; margin-top: 18px; align-items: start; } .rt-grid.auto { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } @media (min-width: 640px) { .rt-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 720px) { .rt-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1040px) { .rt-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } } .rt-kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 13px; } .rt-kv .k { color: var(--label); } /* ---- Tables ------------------------------------------------------------------- */ .rt-tablecard { margin-top: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; } .rt-tablewrap { overflow-x: auto; } table.rt-table { width: 100%; border-collapse: collapse; margin-top: 4px; } table.rt-table th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--label); padding: 9px 14px 7px; white-space: nowrap; } table.rt-table td { padding: 9px 14px; border-top: 1px solid var(--line-2); font-size: 12.5px; vertical-align: top; white-space: nowrap; } table.rt-table tbody tr:hover { background: var(--row-hover); } table.rt-table td.num, table.rt-table th.num { text-align: right; font-variant-numeric: tabular-nums; } table.rt-table a { color: var(--accent); font-weight: 600; } table.rt-table a.ref { font-family: var(--mono); font-size: 11.5px; } .rt-cellbtn { font-size: 11.5px; font-weight: 600; border: 1px solid var(--input); background: var(--card); border-radius: 7px; padding: 4px 10px; cursor: pointer; color: var(--accent); text-decoration: none; } .rt-cellbtn:hover { background: oklch(0.97 0.015 260); text-decoration: none; } /* ---- Pills -------------------------------------------------------------------- */ .rt-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; white-space: nowrap; } .rt-pill.ok { background: var(--pill-ok-bg); color: var(--pill-ok-fg); } .rt-pill.wait, .rt-pill.warn { background: var(--pill-wait-bg); color: var(--pill-wait-fg); } .rt-pill.bad { background: var(--pill-bad-bg); color: var(--pill-bad-fg); } .rt-pill.neutral { background: var(--pill-neutral-bg); color: var(--pill-neutral-fg); } /* ---- Buttons ------------------------------------------------------------------ */ .rt-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--input); background: var(--card); color: var(--ink); border-radius: 7px; padding: 7px 12px; cursor: pointer; text-decoration: none; } .rt-btn:hover { background: #f2f0ea; text-decoration: none; } .rt-btn.accent { color: var(--accent); } .rt-btn.accent:hover { background: oklch(0.97 0.015 260); } .rt-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); } .rt-btn.primary:hover { background: var(--accent-hover); } .rt-btn.danger { background: oklch(0.5 0.16 25); color: #fff; border-color: transparent; } .rt-btn.danger:hover { background: oklch(0.45 0.16 25); } .rt-field { height: 32px; border: 1px solid var(--input); border-radius: 7px; padding: 0 10px; font-size: 13px; background: var(--card); color: inherit; } .rt-empty { padding: 34px; text-align: center; color: var(--muted); font-size: 14px; } /* ---- Support tickets (SUPPORT-INBOX-SPEC §8, to the Claude Design) ------------ */ .rt-pill.info { background: oklch(0.95 0.03 260); color: oklch(0.45 0.13 260); } .rt-pill.hi { background: oklch(0.95 0.04 55); color: oklch(0.5 0.12 55); } .rt-tkbar { display: flex; gap: 4px; } .rt-tkbar a { border: none; cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 7px; background: transparent; color: var(--muted); text-decoration: none; } .rt-tkbar a:hover { text-decoration: none; } .rt-tkbar a.active { background: #e9e6df; color: var(--ink); } .rt-tkbar a .c { opacity: .55; margin-left: 4px; } .rt-tkgrid { display: grid; grid-template-columns: minmax(230px,2fr) 150px 150px 96px 96px 110px 60px; gap: 12px; align-items: center; } .rt-tkgrid.head { padding: 10px 16px; border-bottom: 1px solid var(--line-2); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--label); } .rt-tkrow { padding: 12px 16px; border-top: 1px solid var(--line-2); text-decoration: none; color: inherit; } .rt-tkrow:hover { background: var(--row-hover); text-decoration: none; color: inherit; } .rt-tksubj { display: flex; align-items: center; gap: 8px; min-width: 0; } .rt-tksubj .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } .rt-tksubj .s { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-tksubj .n { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .rt-tkcell { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-tkage { font-size: 11.5px; color: var(--label); text-align: right; } .rt-tkage.breach { color: oklch(0.5 0.16 25); font-weight: 700; } @media (max-width: 1100px) { .rt-tkgrid { grid-template-columns: minmax(0,1fr) auto auto; } .rt-tkgrid > .hide-narrow { display: none; } } /* Ticket detail — thread + composer on the left, linked-record/Claude panel on the right */ .rt-ticket { display: flex; min-width: 0; height: calc(100vh - 52px); } .rt-ticket .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .rt-tkhead { flex: 0 0 auto; padding: 13px 22px 11px; background: var(--card); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; } .rt-tkhead h1 { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-tkhead .id { font-family: var(--mono); font-size: 11px; color: var(--label); } .rt-thread { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 13px; } .rt-msg { max-width: 660px; width: fit-content; } .rt-msg.inbound { align-self: flex-start; } .rt-msg.outbound { align-self: flex-end; } .rt-msg.note { align-self: stretch; max-width: none; } .rt-msg .meta { display: flex; align-items: baseline; gap: 8px; margin: 0 4px 4px; } .rt-msg .who { font-weight: 600; font-size: 12.5px; } .rt-msg .when { font-size: 11px; color: var(--label); } .rt-msg .bubble { border-radius: 12px; padding: 12px 16px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; color: var(--ink-2); border: 1px solid var(--line); background: var(--card); } .rt-msg.outbound .who { color: var(--accent-hover); } .rt-msg.outbound .bubble { background: oklch(0.96 0.02 260); border-color: oklch(0.88 0.04 260); } .rt-msg.note .bubble { background: oklch(0.97 0.03 90); border-color: oklch(0.88 0.05 90); font-size: 12.5px; } .rt-msg .orig { margin-top: 6px; font-size: 11.5px; color: var(--muted); } .rt-msg .orig summary { cursor: pointer; } .rt-attach { display: inline-flex; align-items: center; gap: 6px; margin: 6px 6px 0 0; font-size: 11.5px; border: 1px solid var(--input); border-radius: 7px; padding: 4px 9px; background: var(--card); } .rt-composer { flex: 0 0 auto; padding: 12px 22px 16px; background: var(--card); border-top: 1px solid var(--line); } .rt-composer textarea { width: 100%; box-sizing: border-box; min-height: 110px; resize: vertical; border: 1px solid var(--input); border-radius: 9px; padding: 12px 14px; font: inherit; font-size: 13.5px; line-height: 1.55; outline: none; background: var(--card); color: var(--ink); } .rt-composer textarea:focus { border-color: oklch(0.6 0.1 260); } .rt-composer .row { display: flex; align-items: center; gap: 8px 10px; margin-top: 9px; flex-wrap: wrap; } .rt-composer .as { font-size: 12px; color: var(--label); } .rt-tabs { display: flex; gap: 4px; margin-bottom: 8px; } .rt-tabseg { display: flex; gap: 4px; background: var(--fill-2); border-radius: 9px; padding: 3px; } .rt-tabseg a { flex: 1; text-align: center; border: none; cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 6px 0; border-radius: 7px; background: transparent; color: var(--muted); text-decoration: none; } .rt-tabseg a.active { background: var(--card); color: var(--ink); } .rt-tabseg a.active.claude { color: var(--accent-hover); } .rt-sidepanel { width: 304px; flex: 0 1 304px; min-width: 240px; overflow-y: auto; background: #fbfaf8; border-left: 1px solid var(--line); padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 13px; box-sizing: border-box; } .rt-sidecard { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; } .rt-sidecard.claude { border-color: oklch(0.88 0.04 260); } .rt-sidecard .h { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label); margin-bottom: 8px; display: flex; align-items: center; } .rt-sidecard.claude .h { color: var(--accent-hover); } .rt-sidekv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 12.5px; } .rt-sidekv .k { color: var(--label); } .rt-claudebar { display: flex; gap: 10px; align-items: flex-start; border: 1px solid oklch(0.87 0.05 260); background: oklch(0.97 0.015 260); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); } /* Ticket side-panel tabs — Linked record / Claude, switched with a no-JS radio hack */ .rt-sidepanel .rt-tabradio { position: absolute; left: -9999px; } .rt-panel { display: flex; flex-direction: column; gap: 13px; } .rt-panel-claude { display: none; } #tab-claude:checked ~ .rt-panel-claude { display: flex; } #tab-claude:checked ~ .rt-panel-record { display: none; } .rt-sidepanel .rt-tabseg label { flex: 1; text-align: center; cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 6px 0; border-radius: 7px; color: var(--muted); } #tab-record:checked ~ .rt-tabseg label[for="tab-record"] { background: var(--card); color: var(--ink); } #tab-claude:checked ~ .rt-tabseg label[for="tab-claude"] { background: var(--card); color: var(--accent-hover); } .rt-timeline { display: flex; flex-direction: column; gap: 7px; } .rt-timeline .ev { display: flex; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--ink-3); } .rt-timeline .ev .b { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.6 0.1 260); flex: 0 0 auto; margin-top: 5px; } .rt-genbtn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--accent-hover); background: oklch(0.95 0.03 260); border: 1px solid oklch(0.87 0.05 260); border-radius: 8px; padding: 8px 14px; cursor: pointer; } .rt-genbtn:hover { background: oklch(0.92 0.04 260); } /* A bright sidebar text colour that stays bright in both themes. --side-active cannot be used for this: it is near-white text in light mode but is repurposed as a dark background in the dark theme, so anything using it for type turns dark-on-dark. Declared here rather than in the block above so it survives re-merging the upstream stylesheet. */ :root { --side-strong: #f3f1ec; } :root[data-theme="dark"] { --side-strong: #e9e5db; } /* ── Business switcher ───────────────────────────────────────────────────── Added for the multi-business shell. The pill above was already designed as a switcher (it carries a .chev the single-business build never showed); this turns it into a working menu. CSP is script-src 'none' and the panel is JS-free, so it opens with the same checkbox technique as the mobile drawer. */ .rt-bizmenu-toggle { position: absolute; opacity: 0; pointer-events: none; } .rt-biz-pill { user-select: none; } .rt-bizmenu-toggle:focus-visible + .rt-biz-pill { outline: 2px solid var(--accent-strong); outline-offset: 2px; } .rt-biz-pill .chev { transition: transform .12s ease; } .rt-bizmenu-toggle:checked + .rt-biz-pill .chev { transform: rotate(180deg); } .rt-bizmenu-toggle:checked + .rt-biz-pill { background: rgba(255,255,255,0.09); } .rt-bizmenu { display: none; margin: 6px 0 2px; padding: 5px; border-radius: 10px; background: var(--side-2); border: 1px solid var(--side-line); box-shadow: 0 10px 28px rgba(0,0,0,0.35); } .rt-bizmenu-toggle:checked ~ .rt-bizmenu { display: block; } .rt-bizmenu-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: var(--side-item); } .rt-bizmenu-item:hover { background: rgba(255,255,255,0.06); text-decoration: none; } .rt-bizmenu-item.on { background: rgba(255,255,255,0.09); } .rt-bizmenu-item .mark { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 11px; flex: 0 0 auto; } .rt-bizmenu-item .txt { min-width: 0; line-height: 1.25; } .rt-bizmenu-item .name { display: block; font-size: 13px; font-weight: 600; color: var(--side-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-bizmenu-item .sub { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--side-label); } .rt-bizmenu-sep { height: 1px; background: var(--side-line); margin: 5px 4px; } /* ── Sign in ─────────────────────────────────────────────────────────────── The one screen the single-business build had no equivalent of, since it authenticated on a shared password with no user behind it. */ .rt-login-body { margin: 0; min-height: 100vh; background: var(--side); display: flex; align-items: center; justify-content: center; padding: 24px; font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .rt-login { width: 100%; max-width: 344px; background: var(--card); border-radius: 14px; padding: 30px 30px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.4); } .rt-login-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-strong); color: #fff; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .rt-login h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--ink); } .rt-login-sub { margin: 3px 0 20px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--label); } .rt-login label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--label); margin: 13px 0 5px; } .rt-login input { width: 100%; box-sizing: border-box; height: 36px; padding: 0 11px; border: 1px solid var(--input); border-radius: 8px; background: var(--fill); font: inherit; font-size: 14px; color: var(--ink); } .rt-login input:focus { outline: 2px solid var(--accent-strong); outline-offset: 1px; border-color: transparent; } .rt-login button { width: 100%; margin-top: 20px; height: 38px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .rt-login button:hover { background: var(--accent-hover); } .rt-login-error { margin-bottom: 4px; padding: 9px 12px; border-radius: 8px; background: var(--pill-bad-bg); color: var(--pill-bad-fg); font-size: 13px; font-weight: 500; } .rt-login-foot { margin: 18px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; } /* Sub-line under a stat tile's figure — the original panel put the longer windows here, under the headline number, rather than in a separate table. */ .rt-tile .rt-tilesub { margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: var(--ink-soft); } /* Sign-in: the code step. */ .rt-login-notice { margin-bottom: 4px; padding: 9px 12px; border-radius: 8px; background: var(--pill-ok-bg); color: var(--pill-ok-fg); font-size: 13px; font-weight: 500; } .rt-login-check { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-soft); cursor: pointer; } .rt-login-check input { width: auto; height: auto; }