/* ========================================================================== Design tokens / theming — Apple-style design language -------------------------------------------------------------------------- The :root palette below is the DARK theme (the no-attribute default the boot script sets); light is the override block after it. Both are drawn from the iOS/macOS system palette: true-black canvas with elevated gray cards in dark, #f5f5f7 canvas with white cards in light, hairline rgba separators, one blue accent, and tinted-capsule status hues. Every colour the app paints flows through a token here — no hardcoded hex/rgba lives in the component rules — which is what lets one palette swap restyle the whole surface. Theme is selected by a `data-theme` attribute on , set before first paint by the inline boot script in index.html/setup.html (stored choice, else prefers-color-scheme). The header toggle flips it and persists to localStorage. ======================================================================== */ :root { /* Native controls (checkboxes, select arrows, scrollbars) follow the app theme instead of the OS — without this, dark mode gets white checkboxes. */ color-scheme: dark; --dashboard-sticky-offset: 4rem; /* SF Pro on Apple devices; metric-compatible fallbacks elsewhere. */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Unified shape scale: controls / inputs+rows / cards+panels. Buttons are pills. */ --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 980px; --bg: #000000; --panel: #1c1c1e; --panel-2: #2c2c2e; --border: rgba(255, 255, 255, 0.10); --text: #f5f5f7; --muted: #a1a1a8; --accent: #0a84ff; --accent-bg: rgba(10, 132, 255, 0.16); --accent-border: rgba(10, 132, 255, 0.55); --ok: #30d158; --ok-bg: rgba(48, 209, 88, 0.16); --ok-border: rgba(48, 209, 88, 0.5); --ok-glow: rgba(48, 209, 88, 0.22); --warning: #ff9f0a; --warning-bg: rgba(255, 159, 10, 0.16); --warning-border: rgba(255, 159, 10, 0.5); --danger: #ff453a; --danger-bg: rgba(255, 69, 58, 0.16); --danger-border: rgba(255, 69, 58, 0.55); --off: #8e8e93; --muted-bg: rgba(120, 120, 128, 0.20); --on-accent: #ffffff; /* Quiet (secondary) control fill — Apple's gray-fill buttons, no outlines. Tuned to iOS secondary/tertiary system fill so pills keep affordance on the near-black canvas (a lower alpha made them vanish in dark mode). */ --control-bg: rgba(120, 120, 128, 0.30); --control-bg-hover: rgba(120, 120, 128, 0.42); /* Frosted chrome (topbar) — falls back to solid --panel without backdrop-filter. */ --chrome-bg: rgba(18, 18, 20, 0.78); /* Device-screen letterbox stays near-black in both themes (like a video player) — the live/tile canvas shows the real screen; only the bars show. */ --screen-bg: #000000; --overlay-stripe: rgba(255, 255, 255, 0.03); --backdrop: rgba(0, 0, 0, 0.55); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-md: 0 10px 36px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35); } /* Light theme — Apple light: white cards on the #f5f5f7 canvas, hairline separators, soft diffuse elevation. Status hues use the HIG "accessible" variants so text-on-white clears WCAG AA rather than reusing the vivid dark-mode hues (too bright on white). */ :root[data-theme="light"] { color-scheme: light; --bg: #f5f5f7; --panel: #ffffff; --panel-2: #f2f2f7; --border: rgba(0, 0, 0, 0.10); --text: #1d1d1f; --muted: #6e6e73; --accent: #0071e3; --accent-bg: rgba(0, 113, 227, 0.10); --accent-border: rgba(0, 113, 227, 0.40); --ok: #248a3d; --ok-bg: rgba(52, 199, 89, 0.14); --ok-border: rgba(36, 138, 61, 0.40); --ok-glow: rgba(52, 199, 89, 0.28); --warning: #b25000; --warning-bg: rgba(255, 149, 0, 0.14); --warning-border: rgba(178, 80, 0, 0.40); --danger: #d70015; --danger-bg: rgba(255, 59, 48, 0.11); --danger-border: rgba(215, 0, 21, 0.40); --off: #6e6e73; --muted-bg: rgba(120, 120, 128, 0.13); --on-accent: #ffffff; --control-bg: rgba(120, 120, 128, 0.12); --control-bg-hover: rgba(120, 120, 128, 0.20); --chrome-bg: rgba(255, 255, 255, 0.75); --overlay-stripe: rgba(255, 255, 255, 0.04); --backdrop: rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 3px 10px rgba(0, 0, 0, 0.04); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05); } * { box-sizing: border-box; } /* Baseline visible focus for keyboard users on the interactive elements that otherwise had none — theme-aware ring, never removed by hover. Components with their own focus treatment (cards, tiles, live canvas) keep theirs. */ button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, textarea:focus-visible, a:focus-visible, .navbtn:focus-visible, .seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .hidden { display: none !important; } .muted { color: var(--muted); } .error { color: var(--danger); min-height: 1.2em; margin: 0.5rem 0 0; } /* Buttons — Apple grammar: filled pills. Primary = accent fill; ghost = quiet gray fill (no outline); danger = red fill. Hover nudges the fill, active presses. The pill radius is the single strongest "Apple" cue on the page. */ button { background: var(--accent); color: var(--on-accent); border: 1px solid transparent; border-radius: var(--radius-pill); padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: filter .18s ease, background-color .18s ease, color .18s ease, transform .1s ease, box-shadow .18s ease; } button.ghost { background: var(--control-bg); border-color: transparent; color: var(--text); font-weight: 500; } button:hover { filter: brightness(1.06); } .link-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-pill); padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: filter .18s ease, background-color .18s ease, color .18s ease, transform .1s ease; } .link-button.ghost { background: var(--control-bg); border-color: transparent; color: var(--text); font-weight: 500; } .link-button:hover { filter: brightness(1.06); } /* Quiet buttons brighten their fill on hover instead of a brightness shift. */ button.ghost:hover { filter: none; background: var(--control-bg-hover); border-color: transparent; } .link-button.ghost:hover { filter: none; background: var(--control-bg-hover); border-color: transparent; } button:active, .link-button:active { transform: scale(0.98); } input, textarea, select { font-family: inherit; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } input:disabled, textarea:disabled, select:disabled { cursor: not-allowed; opacity: 0.65; } input { width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; font-size: 0.95rem; } input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.9; } input:hover, textarea:hover, select:hover { border-color: var(--muted); } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } /* Selects — one styled recipe for every dropdown on the page (the per-context rules only size them): quiet fill, 10px radius, custom chevron instead of the stock OS arrow. The chevron gray reads on both themes. */ select { -webkit-appearance: none; appearance: none; background-color: var(--panel-2); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2386868b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.55rem center; background-size: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 0.45rem 1.9rem 0.45rem 0.7rem; font-size: 0.9rem; } /* Focus: accent border + soft ring (in addition to the baseline :focus-visible outline, which covers keyboard nav) so text fields read as clearly active. */ input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); outline: none; } /* Login */ .login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; } .login-card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 2.25rem 2rem; width: min(380px, 92vw); display: flex; flex-direction: column; gap: 0.75rem; box-shadow: var(--shadow-md); } .login-card h1 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.022em; } .login-card p { margin: 0; } .login-next { font-size: 0.85rem; overflow-wrap: anywhere; } .login-card label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); } /* Content links in the login / first-run-setup cards use the app accent, not the browser's default blue/purple, so they match the design. */ .login a { color: var(--accent); text-decoration: none; } .login a:hover { text-decoration: underline; } /* Inline code in the setup hint gets the same tinted chip as the rest of the app. */ .login code { background: var(--muted-bg); border-radius: 5px; padding: 0.05rem 0.35rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; } /* Top bar — frosted glass over the scrolling content (Apple chrome), with a solid-panel fallback when backdrop-filter is unavailable. */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); background: var(--panel); position: sticky; top: 0; z-index: 5; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .topbar { background: var(--chrome-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } } /* On phones the sticky header wastes scarce vertical space — let it scroll away with the page. (Confirmed outstanding field issue.) */ @media (max-width: 430px) { .topbar { position: static; } } .brand { font-weight: 700; letter-spacing: -0.017em; } .topbar-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; min-width: 0; } #who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Theme toggle: round, icon-sized quiet button. The explicit color + text-style emoji presentation keep the ☀/☾ glyph legible in dark mode (some platforms otherwise pick a dim emoji face for U+263E). */ .icon-btn { width: 2.2rem; height: 2.2rem; padding: 0; line-height: 1; font-size: 1.05rem; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--text); font-family: var(--font-sans); font-variant-emoji: text; } /* View nav (Fleet / Wall) — borderless pills; the active view gets the iOS tab treatment (accent-tinted capsule) instead of an outlined box. */ .viewnav { display: inline-flex; gap: 0.25rem; margin-left: 0.75rem; } .navbtn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill); color: var(--muted); padding: 0.4rem 0.85rem; font-size: 0.9rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, transform .1s ease; } .navbtn:hover { filter: none; background: var(--control-bg); color: var(--text); } .navbtn:active { transform: scale(0.98); } .navbtn.active { color: var(--accent); border-color: transparent; background: var(--accent-bg); font-weight: 600; } /* Nav group separator: retired visually with the Apple restyle (a lone hairline read as a stray rule); the element stays for layout/markup stability. */ .viewnav-sep { flex: 0 0 auto; width: 1px; margin: 0 0.15rem; background: transparent; } @media (max-width: 720px) { :root { --dashboard-sticky-offset: 6.75rem; } .topbar { flex-wrap: wrap; align-items: flex-start; } .viewnav { margin-left: 0; } .topbar-actions { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; margin-left: 0; } #who { flex: 1 1 auto; max-width: 100%; } } @media (max-width: 430px) { :root { --dashboard-sticky-offset: 0rem; } .topbar { gap: 0.45rem; padding: 0.6rem 0.75rem; } /* Six nav items don't fit a phone row; scroll the nav horizontally instead of cramming each button to an unreadable width. */ .viewnav { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .viewnav::-webkit-scrollbar { display: none; } .navbtn { flex: 0 0 auto; padding-inline: 0.7rem; } #who { display: none; } .topbar-actions { gap: 0.4rem; } } .fleet, .detail, .wall, .settings { padding: 1rem; margin: 0 auto; } .fleet, .detail, .settings { max-width: 1200px; } .wall { max-width: 1500px; } /* In-shell tool views (Conversations / Macro recipes / Developer portal) — the former standalone pages, now embedded inline via a same-origin iframe so they share the app chrome + theme and route like the other views (no new tab, no shell reload). The tool page hides its OWN topbar when framed (see html.embed below) so there's no double header. */ .tool-view { padding: 0; max-width: none; margin: 0; } .tool-frame { display: block; width: 100%; border: 0; background: var(--bg); /* Fill the viewport below the sticky topbar (~3.4rem tall). */ height: calc(100dvh - 3.4rem); } @media (max-width: 430px) { /* On phones the topbar is static and can wrap; give the frame near-full height and let it scroll internally rather than clipping the tool. */ .tool-frame { height: calc(100dvh - 3rem); } } /* Applies INSIDE a framed tool page (styles.css is loaded there too): hide its own topbar. The SPA is always the top window, so it never gets .embed — this is inert in the shell. conversations.html overrides this locally to keep a slim search bar. */ html.embed .topbar { display: none; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.35rem 0.75rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .section-head h2 { min-width: 0; margin: 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.022em; } .section-head .muted { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; } .section-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; min-width: 0; } /* Status dot */ .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--off); margin-right: 0.4rem; } .dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-glow); } .dot.off { background: var(--off); } /* Fleet grid — auto-fill keeps cards a comfortable width whether the fleet is 2 devices or 18+ (rows just wrap); the min tightens a touch on narrow viewports. */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.9rem; } @media (max-width: 520px) { .grid { grid-template-columns: 1fr; } } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.05rem; cursor: default; box-shadow: var(--shadow-sm); position: relative; transition: box-shadow .22s ease, transform .22s ease; } /* Elevation, not outline, signals hover (Apple cards never grow blue borders); focus keeps a visible accent ring for keyboard users. */ .card:hover, .card:focus-within { box-shadow: var(--shadow-md); transform: translateY(-2px); } .card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .card:active { transform: translateY(0); } .card-link { display: block; color: inherit; text-decoration: none; border-radius: var(--radius-sm); cursor: pointer; } .card-link:focus-visible { outline-offset: 4px; } .card-selectable .card-head { padding-left: 1.65rem; } .card-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; } .card-title { font-weight: 600; font-size: 0.98rem; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-state { margin-left: auto; font-size: 0.75rem; color: var(--muted); } .card-meta { display: grid; grid-template-columns: auto 1fr; gap: 0.22rem 0.6rem; margin: 0; font-size: 0.85rem; } .card-meta dt { color: var(--muted); } .card-meta dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; } /* The key operational value on a card (Last seen) reads a step heavier. */ .card-meta dd.card-meta-em { font-weight: 600; } .card-open-cue { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; margin-top: 0.65rem; color: var(--accent); font-size: 0.78rem; font-weight: 500; } /* Plain "›" disclosure chevron (iOS list affordance), tinted so the one tappable cue on the card reads as interactive. */ .card-open-cue::after { content: "›"; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.05rem; line-height: 1; font-weight: 600; transition: transform .18s ease; } .card-link:hover .card-open-cue::after, .card-link:focus-visible .card-open-cue::after { transform: translateX(2px); } /* Detail */ .detail-main, .detail-content, .detail-lead, .detail-panels { min-width: 0; } .detail-header { margin: 0.75rem 0 1rem; padding: 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); box-shadow: var(--shadow-sm); } .detail-header h2 { margin: 0 0 0.25rem; } .detail-header > .muted { margin: 0.35rem 0 0; min-width: 0; overflow-wrap: anywhere; font-size: 0.82rem; } .detail-profile { margin-top: 0.7rem; padding-top: 0.65rem; border-top: 1px solid var(--border); } .detail-profile-head { display: flex; align-items: center; gap: 0.55rem; min-width: 0; color: var(--text); cursor: pointer; list-style: none; font-weight: 700; } .detail-profile-head::-webkit-details-marker { display: none; } .detail-profile-head::before { content: "›"; width: 1.15rem; height: 1.15rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--muted); font-size: 1rem; font-weight: 600; line-height: 1; transition: transform .18s ease, color .18s ease; } .detail-profile[open] > .detail-profile-head::before { transform: rotate(90deg); color: var(--accent); } .detail-profile:not([open]) > .detail-meta-strip { display: none; } .detail-profile-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .detail-profile-title { flex: 0 0 auto; min-width: 0; } .detail-profile-note { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.82rem; font-weight: 400; } .detail-meta-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.55rem; margin: 0.65rem 0 0; } .detail-meta-item { min-width: 0; padding: 0.55rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); } .detail-meta-item dt { margin: 0 0 0.12rem; color: var(--muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } .detail-meta-item dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 0.88rem; } .detail-quick-nav { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; } .detail-quick-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.55rem; min-height: 2rem; min-width: 0; padding: 0.42rem 0.55rem 0.42rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); text-decoration: none; font-size: 0.84rem; font-weight: 700; transition: background-color .12s, border-color .12s, transform .1s; } .detail-quick-link::after { content: "›"; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.95rem; font-weight: 600; line-height: 1; transition: transform .18s ease, color .18s ease; } .detail-quick-link:hover, .detail-quick-link.active { border-color: var(--accent-border); background: var(--accent-bg); } .detail-quick-link:hover::after, .detail-quick-link.active::after { color: var(--accent); transform: translateX(2px); } .detail-quick-link:focus-visible { border-color: var(--accent); background: var(--accent-bg); outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 3px var(--accent-bg); } .detail-quick-link:active { transform: translateY(1px); } .detail-section-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.85rem; padding: 0.6rem; position: sticky; top: calc(var(--dashboard-sticky-offset) + 0.35rem); z-index: 4; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); } .detail-section-controls.overview-mode { display: none; } .detail-section-menu { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.85rem; min-width: 0; } .detail-section-menu select { min-width: 12rem; max-width: min(18rem, 100%); font-size: 0.85rem; } .detail-section-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; } .detail-link-status { align-self: center; min-width: 5.5rem; font-size: 0.85rem; } .detail-priority { display: grid; grid-template-columns: minmax(16rem, 1.35fr) repeat(3, minmax(9.5rem, 1fr)); gap: 0.65rem; margin: 0 0 0.9rem; } .detail-priority-card { min-width: 0; display: grid; align-content: start; gap: 0.18rem; padding: 0.7rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; position: relative; } a.detail-priority-card { cursor: pointer; padding-right: 2.55rem; transition: background-color .12s, border-color .12s, transform .1s; } a.detail-priority-card::after { content: "›"; position: absolute; top: 0.6rem; right: 0.75rem; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.1rem; line-height: 1; font-weight: 600; transition: transform .18s ease, color .18s ease; } a.detail-priority-card:hover { border-color: var(--accent-border); background: var(--accent-bg); } a.detail-priority-card:hover::after { color: var(--accent); transform: translateX(2px); } a.detail-priority-card:focus-visible { border-color: var(--accent); background: var(--accent-bg); outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 3px var(--accent-bg); } a.detail-priority-card:focus-visible::after { border-color: var(--accent); color: var(--text); background: var(--accent-bg); } a.detail-priority-card:active { transform: translateY(1px); } .detail-priority-card.main { background: var(--panel-2); border-color: var(--accent-border); } @media (min-width: 900px) { .detail-priority-card.main { grid-row: span 2; } } .detail-priority-label { color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } .detail-priority-value { min-width: 0; overflow-wrap: anywhere; color: var(--text); font-size: 1rem; line-height: 1.2; letter-spacing: 0; } .detail-priority-note { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 0.78rem; line-height: 1.3; } .detail-priority-card.tone-ok { border-color: var(--ok-border); } .detail-priority-card.tone-ok .detail-priority-value { color: var(--ok); } .detail-priority-card.tone-warn { border-color: var(--warning-border); background: var(--warning-bg); } .detail-priority-card.tone-warn .detail-priority-value { color: var(--warning); } .detail-priority-card.tone-critical { border-color: var(--danger-border); background: var(--danger-bg); } .detail-priority-card.tone-critical .detail-priority-value { color: var(--danger); } .detail-priority-card.tone-offline .detail-priority-value { color: var(--off); } @media (max-width: 899px) { .detail.detail-overview-layout .detail-main { display: flex; flex-direction: column; } .detail.detail-overview-layout .detail-content { display: contents; } .detail.detail-overview-layout .detail-lead { display: contents; } .detail.detail-overview-layout #back-btn { order: 1; align-self: flex-start; } .detail.detail-overview-layout .detail-header { order: 2; } .detail.detail-overview-layout #detail-section-map { order: 3; margin: 0 0 1rem; } .detail.detail-overview-layout .detail-panels { order: 4; } } .detail-section-map { margin: 0 0 1rem; } .detail-section-map-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); cursor: pointer; list-style: none; font-weight: 600; font-size: 0.9rem; } .detail-section-map-head::-webkit-details-marker { display: none; } .detail-section-map-head::before { content: "›"; width: 1.15rem; height: 1.15rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--muted); font-size: 1rem; font-weight: 600; line-height: 1; transition: transform .18s ease, color .18s ease; } .detail-section-map-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 3px var(--accent-bg); } .detail-section-map[open] > .detail-section-map-head::before { transform: rotate(90deg); color: var(--accent); } .detail-section-map-head > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-section-map-head > .muted { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; font-size: 0.82rem; } .detail-section-map[open] > .detail-section-overview { margin-top: 0.75rem; } .detail-section-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; margin: 0; } .detail-section-overview-group { min-width: 0; padding: 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); box-shadow: var(--shadow-sm); } .detail-section-group-head { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.45rem; cursor: pointer; list-style: none; } .detail-section-group-head::-webkit-details-marker { display: none; } .detail-section-group-head::before { content: "›"; width: 1.05rem; height: 1.05rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--muted); font-size: 0.92rem; font-weight: 600; line-height: 1; transition: transform .18s ease, color .18s ease; } .detail-section-overview-group[open] > .detail-section-group-head::before { transform: rotate(90deg); color: var(--accent); } .detail-section-group-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 3px var(--accent-bg); } .detail-section-overview-group h3 { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0; color: var(--muted); font-size: 0.74rem; font-weight: 700; text-transform: none; letter-spacing: 0; } .detail-section-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.1rem; padding: 0 0.35rem; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 0.66rem; font-variant-numeric: tabular-nums; line-height: 1; } .detail-section-card-list { display: grid; gap: 0.4rem; } .detail-section-card { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-width: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text); text-decoration: none; transition: background-color .12s, border-color .12s, transform .1s; } .detail-section-card:hover { border-color: var(--accent); background: var(--accent-bg); } .detail-section-card:focus-visible { border-color: var(--accent); background: var(--accent-bg); outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 3px var(--accent-bg); } .detail-section-card:active { transform: translateY(1px); } .detail-section-card.active { border-color: var(--accent); background: var(--accent-bg); } .detail-section-card-text { display: grid; gap: 0.08rem; min-width: 0; } .detail-section-card-label { min-width: 0; overflow-wrap: anywhere; font-weight: 500; font-size: 0.88rem; } .detail-section-card-note { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 0.72rem; } .detail-section-card-state { flex: 0 0 auto; color: var(--muted); font-size: 0.72rem; } @media (max-width: 520px) { .detail-header { padding: 0.7rem; } .detail-profile-head { align-items: flex-start; flex-wrap: wrap; } .detail-profile-title { flex: 1 1 calc(100% - 1.7rem); } .detail-profile-note { flex: 1 1 100%; margin-left: 1.7rem; white-space: normal; line-height: 1.35; } .detail-meta-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .detail-meta-item dd { white-space: normal; overflow-wrap: anywhere; } .detail-actions { justify-content: stretch; } .detail-actions button { flex: 1 1 0; } .detail-section-controls { align-items: stretch; top: 0.35rem; } .detail-section-menu { flex: 1 1 100%; } .detail-section-menu select { flex: 1 1 auto; min-width: 0; } .detail-section-buttons { width: 100%; } .detail-section-buttons button { flex: 1 1 0; } .detail-link-status { flex: 1 1 100%; min-width: 0; text-align: center; } .detail-quick-link { flex: 1 1 calc(50% - 0.45rem); } .detail-priority { grid-template-columns: 1fr; } .detail-section-overview { grid-template-columns: 1fr; } .detail-section-map-head { align-items: flex-start; } .detail-section-card { align-items: flex-start; flex-direction: column; gap: 0.2rem; } .detail-section-card-state { display: none; } } @media (max-width: 360px) { .detail-meta-strip { grid-template-columns: 1fr; } .detail-quick-link { flex-basis: 100%; } } .detail.detail-overview-layout .detail-panels > details.detail-panel { display: none; } .detail.detail-overview-layout .detail-panels > #detail-panel-device { display: block; } /* ---- Focus workspace (option-3 device view) -------------------------------- One section fills the content column; every other panel is hidden and reached from the rail. The filling panel's summary becomes a static title bar (no collapse chevron / state pill) since the rail is the switcher. */ .detail.detail-focus-layout .detail-panels > details.detail-panel { display: none; } .detail.detail-focus-layout .detail-panels > details.detail-panel.detail-panel-focused { display: block; margin-bottom: 0; } .detail.detail-focus-layout .detail-panel-focused > summary.panel-head { cursor: default; } .detail.detail-focus-layout .detail-panel-focused > summary.panel-head:hover { background: transparent; } .detail.detail-focus-layout .detail-panel-focused > summary.panel-head::before, .detail.detail-focus-layout .detail-panel-focused > summary.panel-head::after { content: none; display: none; } /* Expand/collapse-all is meaningless with a single panel; the Record-view select stays. */ .detail.detail-focus-layout .detail-section-buttons #detail-expand-all, .detail.detail-focus-layout .detail-section-buttons #detail-collapse-all { display: none; } /* Give the live screen more room to actually fill the workspace when it's the focus. */ .detail.detail-focus-layout #detail-panel-live .live-screen-wrap { height: min(76vh, 900px); } .detail.detail-overview-layout #detail-panel-device { margin-bottom: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } .detail.detail-overview-layout #detail-panel-device > summary.panel-head { display: none; } .detail.detail-overview-layout #detail-panel-device > summary.panel-head::after { content: none; display: none; } .detail.detail-overview-layout #detail-panel-device > summary.panel-head .panel-head-note { display: none; } .detail.detail-overview-layout .detail-quick-nav { display: none; } .detail.detail-overview-layout .detail-priority { display: none; } .detail.detail-side-rail-layout:not(.detail-overview-layout) .detail-priority { display: none; } .detail.detail-side-rail-layout .detail-section-group-count, .detail.detail-side-rail-layout .detail-section-card-note { display: none; } .detail.detail-overview-layout.detail-side-rail-layout .detail-section-card { padding-block: 0.48rem; } .detail.detail-side-rail-layout .detail-section-card-text { gap: 0; } .detail.detail-overview-layout .info-group-title-count { display: none; } .detail.detail-overview-layout .info-group-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .detail.detail-overview-layout .info-group-actions { display: none; } .detail.detail-overview-layout .info-group-controls { justify-content: flex-start; max-width: 44rem; } @media (min-width: 900px) { .detail.detail-overview-layout.detail-side-rail-layout:has(#detail-section-map[open]) .info-group-controls { display: none; } } .detail.detail-overview-layout .device-info { padding: 0; } /* Overview content sits on a card so it matches the section-rail card beside it — the two columns read as one material instead of "floating white card next to naked text". */ .detail.detail-overview-layout .info-groups { grid-template-columns: minmax(0, 1fr); max-width: 44rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 0.4rem 1rem; } .detail.detail-overview-layout .info-group { padding: 0.7rem 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; } /* First visible group needs no top rule — the card edge already separates it. */ .detail.detail-overview-layout .info-groups .info-group:first-child { border-top: 0; } .detail.detail-overview-layout .info-group-title { margin-bottom: 0.5rem; padding: 0; letter-spacing: 0; } .detail.detail-overview-layout .info-groups:has(.info-group[open]) .info-group:not([open]) { display: none; } @media (min-width: 900px) { .detail.detail-side-rail-layout > .detail-main { display: grid; grid-template-columns: minmax(15.5rem, 18.25rem) minmax(0, 1fr); gap: 0 1rem; align-items: start; } .detail.detail-side-rail-layout:has(#detail-section-map:not([open])) > .detail-main { grid-template-columns: max-content minmax(0, 1fr); } .detail.detail-overview-layout.detail-side-rail-layout:has(#detail-section-map[open]) > .detail-main { grid-template-columns: minmax(13.5rem, 15.5rem) minmax(0, 1fr); } .detail.detail-side-rail-layout .detail-content { grid-column: 2; grid-row: 1; min-width: 0; } .detail.detail-side-rail-layout #detail-section-map { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--dashboard-sticky-offset) + 0.85rem); width: min(18.25rem, 100%); margin-top: 0.75rem; } .detail.detail-side-rail-layout .detail-meta-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .detail.detail-side-rail-layout .detail-priority { grid-template-columns: repeat(3, minmax(0, 1fr)); } .detail.detail-side-rail-layout .detail-priority-card.main { grid-row: auto; } .detail.detail-side-rail-layout .detail-quick-nav { display: none; } .detail.detail-side-rail-layout .detail-section-map-head { padding: 0.72rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); box-shadow: var(--shadow-sm); } .detail.detail-side-rail-layout #detail-section-map[open] { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; max-height: calc(100vh - var(--dashboard-sticky-offset) - 1.5rem); overflow: hidden; } .detail.detail-side-rail-layout #detail-section-map[open] > .detail-section-map-head { flex: 0 0 auto; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; } .detail.detail-side-rail-layout #detail-section-map[open] > .detail-section-map-head > .muted { display: none; } .detail.detail-side-rail-layout #detail-section-map[open] > .detail-section-map-head::after { content: attr(data-action-label); flex: 0 0 auto; padding: 0.18rem 0.45rem; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 0.68rem; font-weight: 600; line-height: 1; } .detail.detail-side-rail-layout #detail-section-map[open] > .detail-section-map-head:hover::after, .detail.detail-side-rail-layout #detail-section-map[open] > .detail-section-map-head:focus-visible::after { border-color: var(--accent-border); color: var(--text); background: var(--accent-bg); } .detail.detail-overview-layout.detail-side-rail-layout #detail-section-map[open] > .detail-section-map-head::after { content: none; display: none; } .detail.detail-side-rail-layout #detail-section-map:not([open]) { justify-self: start; } .detail.detail-side-rail-layout #detail-section-map:not([open]) .detail-section-map-head { justify-content: center; gap: 0; width: 2.6rem; min-height: 2.6rem; height: 2.6rem; padding: 0; } .detail.detail-side-rail-layout #detail-section-map:not([open]) .detail-section-map-head > span { display: none; } .detail.detail-side-rail-layout #detail-section-map:not([open]) .detail-section-map-head::before { content: ""; width: 1.05rem; height: 0.78rem; margin: 0; border: 0; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 0; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; color: var(--muted); } .detail.detail-side-rail-layout #detail-section-map:not([open]) .detail-section-map-head::after { content: none; } .detail.detail-side-rail-layout #detail-section-map:not([open]) .detail-section-map-head:hover, .detail.detail-side-rail-layout #detail-section-map:not([open]) .detail-section-map-head:focus-visible { border-color: var(--accent-border); background: var(--accent-bg); } .detail.detail-side-rail-layout #detail-section-map:not([open]) .detail-section-map-head:hover::before, .detail.detail-side-rail-layout #detail-section-map:not([open]) .detail-section-map-head:focus-visible::before { color: var(--text); } .detail.detail-side-rail-layout #detail-section-map[open] > .detail-section-overview { margin-top: 0; } .detail.detail-side-rail-layout .detail-section-overview { grid-template-columns: 1fr; gap: 0; flex: 1 1 auto; min-height: 0; max-height: calc(100vh - var(--dashboard-sticky-offset) - 5rem); overflow: auto; overscroll-behavior: contain; padding: 0.45rem; scrollbar-gutter: stable; } .detail.detail-side-rail-layout .detail-section-overview-group { padding: 0.55rem 0.1rem; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; } .detail.detail-side-rail-layout .detail-section-overview-group:last-child { border-bottom: 0; } .detail.detail-side-rail-layout .detail-section-group-head { margin: 0 0.2rem 0.35rem; padding: 0.08rem 0.12rem; border-radius: 6px; } .detail.detail-side-rail-layout .detail-section-group-head:hover, .detail.detail-side-rail-layout .detail-section-group-head:focus-visible { background: var(--panel-2); } .detail.detail-side-rail-layout .detail-section-group-head::before { width: 1rem; height: 1rem; font-size: 0.82rem; } .detail.detail-side-rail-layout .detail-section-overview-group h3 { color: var(--text); font-size: 0.72rem; font-weight: 700; text-transform: none; letter-spacing: 0; } .detail.detail-side-rail-layout .detail-section-group-count { min-width: 1.25rem; height: 1rem; padding: 0 0.3rem; border-color: transparent; background: var(--panel-2); font-size: 0.64rem; font-weight: 600; } .detail.detail-side-rail-layout .detail-section-card-list { gap: 0.12rem; } .detail.detail-side-rail-layout .detail-section-card { padding: 0.5rem 0.55rem; border-color: transparent; background: transparent; border-radius: 6px; } .detail.detail-side-rail-layout .detail-section-card:hover, .detail.detail-side-rail-layout .detail-section-card:focus-visible { border-color: var(--accent-border); background: var(--accent-bg); } .detail.detail-side-rail-layout .detail-section-card.active { border-color: transparent; background: var(--accent-bg); } .detail.detail-side-rail-layout .detail-section-card.active .detail-section-card-label { color: var(--accent); } .detail.detail-side-rail-layout .detail-section-card.active .detail-section-card-note { color: var(--accent); } .detail.detail-side-rail-layout .detail-section-card-state { display: none; } } .detail.detail-overview-layout .detail-header { padding: 0.85rem 0.95rem; } .detail.detail-overview-layout #back-btn { padding-inline: 0.1rem; border-color: transparent; background: transparent; color: var(--accent); } .detail.detail-overview-layout #back-btn:hover, .detail.detail-overview-layout #back-btn:focus-visible { border-color: transparent; background: var(--accent-bg); color: var(--accent); } @media (min-width: 900px) { .detail.detail-overview-layout .detail-header { margin: 0.45rem 0 0.85rem; padding: 0 0 0.55rem; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; } } .detail.detail-overview-layout .detail-header-top { gap: 0.55rem 0.75rem; align-items: center; } .detail.detail-overview-layout .detail-actions { align-self: center; gap: 0.45rem; flex-wrap: nowrap; } .detail.detail-overview-layout .detail-actions button { min-height: 2.1rem; padding: 0.42rem 0.75rem; white-space: nowrap; } .detail.detail-overview-layout .rename-input { border-color: transparent; background: transparent; box-shadow: none; font-size: 1.08rem; font-weight: 700; } .detail.detail-overview-layout .rename-input::placeholder { color: var(--text); opacity: 1; } .detail.detail-overview-layout .detail-title-row-editable .rename-input:hover, .detail.detail-overview-layout .detail-title-row-editable .rename-input:focus, .detail.detail-overview-layout .detail-title-row-editable .rename-input:focus-visible, .detail.detail-overview-layout .detail-title-row-editable:has([data-rename-save]:not([hidden])) .rename-input { border-color: var(--border); background: var(--panel-2); } .detail.detail-overview-layout .detail-title-row-editable .rename-input:focus, .detail.detail-overview-layout .detail-title-row-editable .rename-input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .detail.detail-overview-layout .detail-profile { display: none; } @media (max-width: 520px) { .detail.detail-overview-layout .detail-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; } .detail.detail-overview-layout .detail-actions button { width: 100%; min-width: 0; padding-inline: 0.65rem; } } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 1rem; overflow: hidden; box-shadow: var(--shadow-sm); } .detail-panel { scroll-margin-top: calc(var(--dashboard-sticky-offset) + 4.75rem); } @media (max-width: 520px) { .detail-panel { scroll-margin-top: 8rem; } } .panel-head { padding: 0.7rem 0.95rem; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.95rem; letter-spacing: 0; } details.panel > summary.panel-head { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; list-style: none; min-width: 0; } details.panel > summary.panel-head::-webkit-details-marker { display: none; } details.panel > summary.panel-head::before { content: "›"; width: 1.15rem; height: 1.15rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--muted); font-size: 1rem; font-weight: 600; line-height: 1; transition: transform .18s ease, color .18s ease; } details.panel[open] > summary.panel-head::before { transform: rotate(90deg); color: var(--accent); } details.detail-panel > summary.panel-head::after { content: "Collapsed"; order: 4; flex: 0 0 auto; padding: 0.14rem 0.55rem; border: 1px solid transparent; border-radius: 999px; color: var(--muted); background: var(--muted-bg); font-size: 0.68rem; font-weight: 600; line-height: 1.2; } details.detail-panel[open] > summary.panel-head::after { content: "Open"; border-color: transparent; color: var(--accent); background: var(--accent-bg); } .detail.detail-side-rail-layout details.detail-panel > summary.panel-head::after { content: none; display: none; } details.panel:not([open]) > summary.panel-head { border-bottom: 0; } details.panel > summary.panel-head:hover { background: var(--panel-2); } details.panel > summary.live-head { justify-content: flex-start; } details.panel > summary.live-head .live-status { margin-left: auto; } .panel-head-main { order: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .panel-head-note { order: 2; min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.8rem; font-weight: 400; } details.panel > summary.live-head .panel-head-note { margin-left: 0; } details.panel > summary.live-head .live-status { order: 3; } @media (max-width: 560px) { details.panel > summary.panel-head { align-items: flex-start; flex-wrap: wrap; } .panel-head-note { order: 3; flex: 1 1 100%; margin-left: 1.7rem; white-space: normal; line-height: 1.35; } details.detail-panel > summary.panel-head::after { margin-left: 1.7rem; } details.panel > summary.live-head .live-status { order: 2; margin-left: auto; } } .table-wrap { padding: 0.25rem 0.85rem 0.85rem; overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); white-space: nowrap; } th { color: var(--muted); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; position: sticky; top: 0; background: var(--panel); } tbody tr { transition: background-color .1s; } tbody tr:hover td { background: var(--panel-2); } tr:last-child td { border-bottom: none; } .empty { padding: 0.85rem; } /* Inline warning banner (e.g. a stalled command channel above the command history). */ .detail-stall-note { margin: 0 0 0.6rem; padding: 0.5rem 0.7rem; font-size: 0.85rem; line-height: 1.35; color: var(--warning); background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: 6px; } @media (max-width: 640px) { #heartbeats, #commands { overflow-x: visible; } .detail-history-table, .detail-history-table tbody, .detail-history-table tr, .detail-history-table td { display: block; width: 100%; } .detail-history-table thead { display: none; } .detail-history-table tr { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 0.75rem; background: var(--panel); overflow: hidden; } .detail-history-table td { display: grid; grid-template-columns: minmax(5.75rem, 34%) minmax(0, 1fr); gap: 0.75rem; align-items: start; border-bottom: 1px solid var(--border); white-space: normal; padding: 0.65rem 0.75rem; word-break: break-word; } .detail-history-table td:last-child { border-bottom: 0; } .detail-history-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } } /* Fleet empty state: a centred, dashed placeholder rather than a bare line, so "no devices" reads as an intentional state and not a load failure. */ .grid > p.empty { grid-column: 1 / -1; text-align: center; padding: 2.5rem 1rem; border: 1px dashed var(--border); border-radius: 12px; margin: 0; } /* Loading skeleton (first fleet load): pulsing placeholder cards. Respects prefers-reduced-motion (falls back to a static tint). */ .card-skeleton { cursor: default; pointer-events: none; } .card-skeleton:hover { border-color: var(--border); box-shadow: var(--shadow-sm); transform: none; } .sk { height: 0.75rem; border-radius: 6px; background: var(--muted-bg); margin-bottom: 0.55rem; animation: sk-pulse 1.2s ease-in-out infinite; } .sk-title { height: 1rem; width: 55%; margin-bottom: 0.85rem; } .sk-line { width: 100%; } .sk-short { width: 40%; margin-bottom: 0; } @keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .sk { animation: none; opacity: 0.7; } } /* Live screen */ .live-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .live-status { font-size: 0.8rem; font-weight: 400; } .live-status.live-ok { color: var(--ok); } .live-body { padding: 1rem; } .live-controls { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; } .live-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; min-width: 0; } /* Transport segmented control — iOS segmented: recessed gray track, the selected segment floats as an elevated pill. */ .transport { display: inline-flex; gap: 2px; border: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--muted-bg); padding: 2px; } .transport .seg { display: flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.7rem; font-size: 0.85rem; cursor: pointer; user-select: none; border-radius: 8px; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; } .transport .seg span { min-width: 0; overflow-wrap: anywhere; } .transport .seg input { width: auto; margin: 0; accent-color: var(--accent); } .transport .seg:has(input:checked) { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; } .transport .seg-disabled { color: var(--muted); cursor: not-allowed; } .transport .seg-disabled em { font-style: normal; font-size: 0.7rem; opacity: 0.8; } /* View size row */ .live-size { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: -0.25rem 0 0.85rem; font-size: 0.85rem; } .seg-btn { background: var(--control-bg); border: 1px solid transparent; color: var(--text); font-size: 0.82rem; padding: 0.4rem 0.75rem; } .zoom-label { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); } .zoom-label input[type="range"] { width: 140px; accent-color: var(--accent); padding: 0; } .codec-tag { font-size: 0.78rem; padding: 0.12rem 0.5rem; border: 1px solid transparent; background: var(--muted-bg); border-radius: 999px; } .size-hint { font-size: 0.78rem; } @media (max-width: 520px) { .live-controls { align-items: stretch; } .transport { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .transport .seg { justify-content: center; padding-inline: 0.45rem; text-align: center; } .live-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .live-actions button { width: 100%; min-height: 2.6rem; white-space: normal; } .live-size { align-items: stretch; } .zoom-label { flex: 1 1 100%; } .zoom-label input[type="range"] { flex: 1; min-width: 0; width: auto; } } /* Screen surface — resizable panel (drag the lower-right corner) */ .live-screen-wrap { position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--screen-bg); display: flex; align-items: center; justify-content: center; overflow: auto; resize: vertical; min-height: 300px; height: 62vh; max-height: 88vh; } /* When zoomed past fit, anchor top-left so the whole image is scroll-reachable (centred flex items clip their overflow and can't be scrolled into view). */ .live-screen-wrap.zoomed { align-items: flex-start; justify-content: flex-start; } /* CONTRACT (tap calibration): keep object-fit:contain and NO padding/border on the canvas, so its border-box (getBoundingClientRect) equals the video's contain box. deviceCoordsFromClient() in public/coords.js assumes this; changing it (padding, border, or object-fit:cover/fill) would silently miscalibrate every remote tap. */ .live-canvas { display: none; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; } .live-screen-wrap.zoomed .live-canvas { flex: 0 0 auto; } .live-canvas--active { display: block; } .live-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; background: repeating-linear-gradient( 45deg, transparent, transparent 10px, var(--overlay-stripe) 10px, var(--overlay-stripe) 20px); } .live-overlay p { max-width: 46ch; margin: 0; } /* Remote control (Phase 2) */ #control-toggle.control-on { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); } .control-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin: -0.25rem 0 0.85rem; } .nav-buttons { display: flex; gap: 0.4rem; } .nav-buttons button { font-size: 0.8rem; padding: 0.4rem 0.7rem; } .text-send { display: flex; gap: 0.4rem; flex: 1 1 16rem; min-width: 14rem; } .text-send input { flex: 1; min-width: 0; font-size: 0.85rem; } .text-send button { font-size: 0.8rem; padding: 0.4rem 0.7rem; white-space: nowrap; } .control-hint { font-size: 0.8rem; } .control-hint.control-warn { color: var(--danger); } /* Cursor cue: the canvas is interactive only while controlling. */ .live-canvas.controlling { cursor: crosshair; touch-action: none; } .live-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Pop-out focused view: /device/:id/live/popout shows just the device header + live panel — the rest of the dashboard chrome is hidden. The server still enforces auth/scopes; this is presentation only. */ .popout .topbar, .popout #back-btn, .popout #popout-btn, .popout .detail-section-controls, .popout .detail-section-map, .popout .detail-panels > .panel:not(.live-panel) { display: none; } .popout .detail { padding-top: 0.5rem; } .popout .rename-input { background: transparent; border-color: transparent; padding-inline: 0; box-shadow: none; } .popout .rename-input:focus { border-color: transparent; box-shadow: none; } /* The build-identity footer is chrome — hidden in the focused pop-out window. */ .popout .app-footer { display: none; } /* Build-identity footer: unobtrusive, centred, on every view for every role. */ .app-footer { margin-top: 1.5rem; padding: 0.75rem 1rem 1.25rem; text-align: center; font-size: 0.72rem; border-top: 1px solid var(--border); } /* ---- device management ------------------------------------------------ */ button.danger { background: var(--danger); color: var(--on-accent); } /* Quiet destructive: red on a tinted fill, filling solid red only on hover — for destructive actions that sit inline among neutral controls (detail-header Delete, bulk Archive), so they read as dangerous without shouting. The solid `.danger` stays for the final in-dialog confirm. */ button.danger-quiet { background: var(--danger-bg); color: var(--danger); border: 1px solid transparent; border-radius: var(--radius-pill); padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: filter .18s ease, background-color .18s ease, color .18s ease, transform .1s ease; } button.danger-quiet:hover { filter: none; background: var(--danger); color: var(--on-accent); } button.danger-quiet:active { transform: scale(0.98); } button:disabled { opacity: 0.45; cursor: not-allowed; filter: none; } /* A disabled quiet button loses its fill entirely (hairline + muted label), so it can't be mistaken for the identically-shaped enabled pills around it. */ button.ghost:disabled, .link-button.ghost:disabled { opacity: 1; background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); } /* Fleet overview counts — quiet white tiles, elevation instead of outlines. */ .overview { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.25rem 0 1rem; } .stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.6rem 1rem; display: flex; flex-direction: column; align-items: flex-start; min-width: 96px; box-shadow: var(--shadow-sm); color: var(--text); font-family: inherit; text-align: left; } /* Most tiles are buttons that facet the grid (button.stat) — undo the pill button chrome, keep the tile look, add press/selected affordances. */ button.stat { cursor: pointer; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } button.stat:hover { filter: none; box-shadow: var(--shadow-md); transform: translateY(-1px); } button.stat:active { transform: translateY(0); } .stat.stat-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); } .stat-num { font-size: 1.55rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat-label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.12rem; font-weight: 600; } @media (max-width: 520px) { .overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; } .stat { min-width: 0; padding: 0.5rem 0.55rem; border-radius: var(--radius-sm); } .stat-num { font-size: 1.3rem; } .stat-label { font-size: 0.58rem; } } @media (max-width: 360px) { .overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .stat.online .stat-num { color: var(--ok); } .stat.offline .stat-num { color: var(--off); } .stat.archived .stat-num { color: var(--muted); } /* Toolbar */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-bottom: 0.75rem; } .toolbar .search { width: auto; flex: 1 1 220px; min-width: 180px; } .tb-field { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); } .tb-field select { font-size: 0.85rem; } .tb-check { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); } .tb-check input { width: auto; } .toolbar-status { flex: 1 1 12rem; min-width: 10rem; font-size: 0.82rem; } .fleet-link-status { min-width: 5.5rem; font-size: 0.85rem; } .status-error { color: var(--danger); } /* Bulk action bar (feature k) — an iOS-style floating action bar: fixed above the bottom edge on frosted glass, so appearing/disappearing never shifts the grid, and the actions stay in reach however far the fleet scrolls. */ .bulkbar { position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%); width: min(920px, calc(100vw - 2rem)); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.55rem 0.9rem; flex-wrap: wrap; box-shadow: var(--shadow-md); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .bulkbar { background: var(--chrome-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } } .bulk-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; } #bulk-status { color: var(--ok); } /* Archiving is the consequential bulk action → the shared quiet-destructive treatment (see button.danger-quiet), applied here without a class change. */ #bulk-archive { background: var(--danger-bg); color: var(--danger); } #bulk-archive:hover { filter: none; background: var(--danger); color: var(--on-accent); } /* Bulk group/tags dialog (feature k): the clear-group checkbox sits inline, unlike the stacked text-input labels around it. */ .dialog form label.og-inline { flex-direction: row; align-items: center; gap: 0.4rem; } .dialog form label.og-inline input { width: auto; } /* Status badges — iOS-style tinted capsules: colored fill, no outline. */ .badge { margin-left: auto; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.16rem 0.55rem; border-radius: 999px; border: 1px solid transparent; color: var(--muted); background: var(--muted-bg); } .badge.online { color: var(--ok); background: var(--ok-bg); } .badge.offline { color: var(--off); } .badge.archived { color: var(--muted); } /* Cards: checkbox + archived dimming */ .card-check { width: auto; margin: 0; accent-color: var(--accent); flex: 0 0 auto; position: absolute; top: 1rem; left: 0.95rem; z-index: 1; } .card-check.hidden { position: static; } .card-archived { opacity: 0.62; } .card-archived:hover, .card-archived:focus-visible { opacity: 1; } /* Detail header: compact record identity + actions */ .detail-header-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; align-items: start; } .detail-header-top-actions { grid-template-columns: minmax(0, 1fr) auto; } .detail-title-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "state name badge"; align-items: center; gap: 0.35rem 0.5rem; min-width: 0; } .detail-title-row-editable { grid-template-areas: "state name badge" ". save status"; } .detail-title-row .dot { grid-area: state; margin: 0; } .detail-title-row .badge { grid-area: badge; margin-left: 0; align-self: center; } .detail-title-row [data-rename-save] { grid-area: save; justify-self: start; } #rename-status { grid-area: status; min-width: 0; align-self: center; overflow-wrap: anywhere; font-size: 0.82rem; } .rename-input { grid-area: name; width: 100%; min-width: 0; font-size: 1.05rem; font-weight: 600; } .detail-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin: 0; flex-wrap: wrap; } .detail-header-copy-action { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; } .detail-header-link-status { min-width: 4.25rem; font-size: 0.82rem; white-space: nowrap; } @media (max-width: 520px) { .detail-header-top, .detail-header-top-actions { grid-template-columns: 1fr; } .detail-title-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "state name" ". badge"; } .detail-title-row-editable { grid-template-areas: "state name" ". badge" ". save" ". status"; } .detail-title-row .badge { justify-self: start; } .detail-header-copy-action { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } .detail.detail-overview-layout .detail-header-copy-action { grid-column: 1 / -1; } .detail-header-copy-action button { width: 100%; } .detail-header-link-status { min-width: 0; min-height: 1rem; text-align: center; } } @media (max-width: 520px) { .detail.detail-overview-layout .detail-header-copy-action { grid-column: auto; justify-self: start; width: auto; display: inline-flex; } .detail.detail-overview-layout .detail-header-copy-action button { width: auto; } .detail.detail-overview-layout #detail-section-map:not([open]) #detail-section-map-summary { display: none; } } /* Device info grid */ .device-info { padding: 0.85rem; } .info-group-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .info-group-menu { display: flex; flex-direction: column; gap: 0.3rem; color: var(--muted); font-size: 0.8rem; flex: 1 1 14rem; } .info-group-menu select { max-width: 18rem; font-size: 0.9rem; } .info-group-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; } .info-group-actions button { padding: 0.45rem 0.7rem; font-size: 0.82rem; } .info-group-status { flex: 1 1 100%; min-width: 0; font-size: 0.78rem; } .info-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-items: start; } .info-group { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); padding: 0.7rem; } .info-group-title { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.55rem; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; list-style: none; } .info-group-title::-webkit-details-marker { display: none; } .info-group-title::before { content: "›"; width: 1rem; height: 1rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--accent); font-size: 0.9rem; font-weight: 600; line-height: 1; transform: rotate(90deg); transition: transform .18s ease, color .18s ease; } details.info-group:not([open]) .info-group-title { margin-bottom: 0; } details.info-group:not([open]) .info-group-title::before { transform: rotate(0deg); color: var(--muted); } .info-group-title-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .info-group-title-count { flex: 0 0 auto; margin-left: auto; color: var(--muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0; text-transform: none; } .info-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin: 0; font-size: 0.88rem; } .info-grid dt { color: var(--muted); } .info-grid dd { margin: 0; word-break: break-all; } @media (max-width: 720px) { .info-groups { grid-template-columns: 1fr; } } @media (max-width: 520px) { .info-group-controls { align-items: stretch; } .info-group-menu, .info-group-menu select { max-width: none; width: 100%; } .info-group-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .info-group-actions button { width: 100%; white-space: normal; } } /* Notes */ .notes-body { padding: 0.85rem; } .notes { width: 100%; resize: vertical; font-family: inherit; font-size: 0.9rem; } .notes-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; } /* Health status badges (feature e) — tinted capsules, no outline. */ .hbadge { margin-left: auto; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.16rem 0.55rem; border-radius: 999px; border: 1px solid transparent; color: var(--muted); background: var(--muted-bg); white-space: nowrap; } .hbadge.h-ok { color: var(--ok); background: var(--ok-bg); } .hbadge.h-warning { color: var(--warning); background: var(--warning-bg); } .hbadge.h-critical { color: var(--danger); background: var(--danger-bg); } .hbadge.h-offline { color: var(--off); } /* Health stat chips in the overview */ .stat.h-ok .stat-num { color: var(--ok); } .stat.h-warn .stat-num { color: var(--warning); } .stat.h-crit .stat-num { color: var(--danger); } /* Group / tag chips (feature h) */ .card-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.55rem; } /* Readiness / consent indicators (feature l): per-capability pills on fleet cards, a single warn badge on wall tiles (only when something is missing). */ .ready-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.55rem; } .rpill { font-size: 0.68rem; padding: 0.12rem 0.5rem; border-radius: 999px; border: 1px solid transparent; color: var(--muted); background: var(--muted-bg); cursor: default; } .rpill.ok { color: var(--ok); background: var(--ok-bg); } .rpill.no { color: var(--danger); background: var(--danger-bg); } .rpill.warn { color: var(--warning); background: var(--warning-bg); } .rpill.unk { color: var(--muted); background: var(--muted-bg); } /* Missing-consent count: a solid iOS notification badge — legible on the dark tile footer where a tinted fill wasn't. */ .tile-ready { flex: 0 0 auto; font-size: 0.68rem; font-weight: 600; color: var(--on-accent); white-space: nowrap; background: var(--danger); border: 1px solid transparent; border-radius: 999px; padding: 0.08rem 0.45rem; } .chip { font-size: 0.7rem; padding: 0.12rem 0.55rem; border-radius: 999px; background: var(--muted-bg); border: 1px solid transparent; color: var(--muted); } .chip.group { background: var(--accent-bg); color: var(--accent); } /* Fleet wall (feature b) */ .wall-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-bottom: 0.85rem; } .wall-link-status { min-width: 5.5rem; font-size: 0.85rem; } .wall-note { font-size: 0.8rem; flex: 1 1 260px; } .wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 0.7rem; } /* Operator-selectable tile size (medium is the default above). */ .wall-grid[data-size="small"] { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .wall-grid[data-size="large"] { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: box-shadow .22s ease, transform .22s ease; } .tile:hover, .tile:focus-visible { box-shadow: var(--shadow-md); transform: translateY(-2px); } .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tile-screen { position: relative; background: var(--screen-bg); aspect-ratio: 9 / 16; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Fill the tile box (object-fit:contain preserves aspect) so bigger tiles show a bigger stream, not empty space around a fixed-size thumbnail. */ .tile-canvas { width: 100%; height: 100%; object-fit: contain; display: none; } .tile-canvas.active { display: block; } .tile-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.5rem; font-size: 0.72rem; color: var(--muted); } .tile-foot { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.25rem 0.35rem; padding: 0.4rem 0.5rem; } .tile-name { font-size: 0.78rem; font-weight: 600; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; flex: 1 1 5.5rem; } .tile-batt { font-size: 0.72rem; color: var(--muted); flex: 0 0 auto; margin-left: auto; } .tile-dot { margin-right: 0; flex: 0 0 auto; } /* Health state tints the tile footer (plus the dot + badge) rather than outlining the whole card — elevation-over-outlines, like the fleet cards. */ .tile.tile-warning .tile-foot { background: var(--warning-bg); } .tile.tile-critical .tile-foot { background: var(--danger-bg); } /* Offline devices still get a tile (so the wall shows the whole fleet), gently de-emphasised — its "Offline" placeholder can't stream. */ .tile.tile-offline { opacity: 0.72; } .tile.tile-offline:hover, .tile.tile-offline:focus-visible { opacity: 1; } .tile.tile-offline .tile-name { color: var(--muted); } /* Backup & restore (backlog): the restore file-input dressed as a quiet button */ .restore-label { display: inline-block; background: var(--control-bg); border: 1px solid transparent; color: var(--text); border-radius: var(--radius-pill); padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background-color .18s ease; } .restore-label:hover { background: var(--control-bg-hover); border-color: transparent; } /* Macros / workflows (feature d) */ .macros-body { padding: 0.85rem; display: flex; flex-direction: column; gap: 0.85rem; } .macro-actions { display: flex; flex-direction: column; gap: 0.85rem; } .macro-run-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .macro-send { display: flex; flex-direction: column; gap: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.85rem; } .macro-send textarea { width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; font-size: 0.9rem; resize: vertical; } .macro-sub { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.6rem; } .macro-note { margin: 0; font-size: 0.78rem; } /* Remote agent config (feature i) */ .config-body { padding: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; } .config-body .org-field input[type="number"] { max-width: 180px; } .config-note { flex-basis: 100%; margin: 0; font-size: 0.78rem; } /* Organisation editor (feature h) */ .org-body { padding: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; } .org-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); flex: 1 1 220px; } .org-field input, .org-field select { font-size: 0.9rem; } .org-actions { display: flex; align-items: center; gap: 0.6rem; } /* Settings page (feature o): role-aware account / users / activity / about */ .settings-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; padding: 0.55rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); } .settings-jump { display: none; margin: 0 0 0.75rem; font-size: 0.8rem; color: var(--muted); } .settings-jump select { width: 100%; margin-top: 0.3rem; font-size: 0.9rem; } .settings-tab { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.12rem; background: transparent; border: 1px solid transparent; color: var(--muted); padding: 0.45rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.86rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease; } .settings-tab-kicker { display: none; color: var(--muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } .settings-tab-main { color: var(--text); font-weight: 600; } .settings-tab-note { font-size: 0.72rem; color: var(--muted); } .settings-tab-state { display: none; align-items: center; justify-content: center; margin-top: 0.12rem; padding: 0.1rem 0.45rem; border: 1px solid transparent; border-radius: 999px; background: var(--accent-bg); color: var(--accent); font-size: 0.66rem; font-weight: 600; line-height: 1.2; } .settings-link-status { min-width: 5.5rem; font-size: 0.85rem; } .settings-tab-group { display: block; flex-basis: 100%; margin-top: 0.25rem; padding: 0.45rem 0.25rem 0.05rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } .settings-tab-group:first-child { margin-top: 0; padding-top: 0.05rem; border-top: 0; } .settings-tab:hover { filter: none; background: var(--control-bg); color: var(--text); } .settings-tab.active, .settings-tab[aria-selected="true"] { background: var(--accent-bg); border-color: transparent; color: var(--text); } .settings-tab.active .settings-tab-note, .settings-tab[aria-selected="true"] .settings-tab-note { color: var(--accent); } .settings-tab.active .settings-tab-state, .settings-tab[aria-selected="true"] .settings-tab-state { display: inline-flex; } @media (min-width: 900px) { .settings { display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr); align-items: start; column-gap: 1rem; } .settings > .section-head { grid-column: 1 / -1; } .settings-tabs { grid-column: 1; flex-direction: column; flex-wrap: nowrap; gap: 0.12rem; margin: 0; position: sticky; top: calc(var(--dashboard-sticky-offset) + 0.75rem); max-height: calc(100vh - var(--dashboard-sticky-offset) - 1.5rem); overflow-y: auto; padding: 0.45rem; } .settings-tab-group { flex-basis: auto; margin: 0.35rem 0 0.12rem; padding: 0.48rem 0.45rem 0.12rem; } .settings-tab { width: 100%; align-items: flex-start; justify-content: center; text-align: left; gap: 0; min-height: 2rem; border-color: transparent; border-radius: var(--radius-sm); padding: 0.44rem 0.6rem; } .settings-tab-note { display: none; } .settings-tab:hover, .settings-tab:focus-visible { border-color: transparent; background: var(--control-bg); color: var(--text); } /* iOS sidebar selection: tinted rounded row, accent label — no inset bar. */ .settings-tab.active, .settings-tab[aria-selected="true"] { border-color: transparent; background: var(--accent-bg); } .settings-tab.active .settings-tab-main, .settings-tab[aria-selected="true"] .settings-tab-main { color: var(--accent); } .settings-tab.active .settings-tab-note, .settings-tab[aria-selected="true"] .settings-tab-note { color: var(--accent); } .settings-tab.active .settings-tab-state, .settings-tab[aria-selected="true"] .settings-tab-state { display: none; } .settings > .settings-panel, .settings > .settings-section { grid-column: 2; min-width: 0; } } @media (max-width: 899px) { .settings-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.45rem; align-items: stretch; } .settings-tab { width: 100%; min-width: 0; align-items: flex-start; justify-content: center; text-align: left; } .settings-tab-group { display: none; } .settings-tab-kicker { display: block; } .settings-tab-note { display: block; } } .settings-section { margin-top: 0; } .section-head.sub { padding-top: 0; } .section-head.sub h3 { min-width: 0; margin: 0; font-size: 1rem; } .account-body, .about-body { padding: 0.85rem; display: flex; flex-direction: column; gap: 0.75rem; } /* Card the "simple content" settings panels (Backup / Relay / API) so they sit on the same elevated surface as the Account/About/Overview panels and the section rail — the whole Settings area then reads as one material. Users/Activity keep their own inner panels and aren't re-carded here. */ #settings-backup, #settings-relay, #settings-api { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 0.9rem 1.1rem 1.1rem; } #settings-backup .section-head.sub, #settings-relay .section-head.sub, #settings-api .section-head.sub { margin-bottom: 0.6rem; } /* Readable measure for the descriptive copy in these panels. */ #settings-backup > p.muted, #settings-relay > p.muted, #settings-api > p.muted { max-width: 68ch; } /* Inline code chips (relay/API descriptions, About) — tinted rounded, not bare mono. */ :where(.settings, .about-body, .account-body) code { background: var(--muted-bg); border-radius: 5px; padding: 0.05rem 0.35rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; } /* API-token status capsule + destructive Revoke. */ .token-status { display: inline-flex; align-items: center; padding: 0.14rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; border: 1px solid transparent; color: var(--muted); background: var(--muted-bg); } .token-status.active { color: var(--ok); background: var(--ok-bg); } #apitoken-rows .ghost.small { color: var(--danger); background: var(--danger-bg); } #apitoken-rows .ghost.small:hover { background: var(--danger); color: var(--on-accent); } #settings-overview > .panel-head { display: none; } .settings-overview-body { padding: 0.85rem; } .settings-overview-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; } .settings-overview-group { min-width: 0; } .settings-overview-group-title { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.4rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } .settings-overview-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.1rem; padding: 0 0.35rem; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 0.66rem; font-variant-numeric: tabular-nums; line-height: 1; } .settings-overview-group-title .settings-overview-count { display: none; } .settings-overview-links { display: grid; gap: 0; } .settings-overview-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(6rem, 55%) auto; align-items: center; gap: 0.65rem; min-width: 0; padding: 0.65rem 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; } .settings-overview-link:last-child { border-bottom: 0; } .settings-overview-link:hover, .settings-overview-link:focus-visible { color: var(--accent); outline-offset: 3px; } .settings-overview-link::after { content: "›"; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.05rem; line-height: 1; font-weight: 600; transition: transform .18s ease, color .18s ease; } .settings-overview-link:hover::after, .settings-overview-link:focus-visible::after, .settings-overview-link.active::after { color: var(--accent); transform: translateX(2px); } .settings-overview-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.9rem; } .settings-overview-note { min-width: 0; color: var(--muted); font-size: 0.78rem; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.9rem; } .account-grid dt { color: var(--muted); } /* Values read a step heavier than their muted labels, with tabular figures so number columns (relay metrics) line up. */ .account-grid dd { margin: 0; word-break: break-word; font-weight: 500; font-variant-numeric: tabular-nums; } .account-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .about-body p { margin: 0; line-height: 1.5; } @media (max-width: 520px) { .settings-jump { display: block; position: sticky; top: 0.4rem; z-index: 4; margin: 0 0 0.25rem; padding: 0.35rem 0 0.55rem; background: var(--bg); } .settings-tabs { display: none; } .settings-tab { width: 100%; min-width: 0; align-items: flex-start; justify-content: center; text-align: left; } .settings-tab-main { white-space: normal; } .settings-tab-note { display: block; } .settings-overview-groups { grid-template-columns: 1fr; gap: 0.85rem; } .settings-overview-link { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.12rem 0.55rem; } .settings-overview-link::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; } .settings-overview-main { grid-column: 1; white-space: normal; } .settings-overview-note { grid-column: 1; grid-row: 2; max-width: 100%; text-align: left; white-space: normal; overflow: visible; text-overflow: clip; } } @media (max-width: 360px) { .settings-tabs { grid-template-columns: 1fr; } } /* One-time API-token reveal: a highlighted, easy-to-copy plaintext block. */ .apitoken-reveal { border: 1px solid var(--ok-border); background: var(--ok-bg); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; margin: 0.5rem 0; } .apitoken-value { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; word-break: break-all; user-select: all; margin-top: 0.3rem; } /* Users / access management (feature f) */ .users-note { margin: 0 0 0.85rem; font-size: 0.85rem; } .user-create { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; padding: 0.85rem; } .uc-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); } .uc-field input { font-size: 0.9rem; } .role-select, .uc-field select { font-size: 0.85rem; } button.small { font-size: 0.78rem; padding: 0.35rem 0.6rem; margin-right: 0.35rem; } .users-list-table .user-email-cell { min-width: 12rem; white-space: normal; word-break: break-word; } .users-list-table .role-select { max-width: 100%; } .user-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .user-actions .small { margin-right: 0; } #users-table td:last-child { white-space: normal; } @media (max-width: 640px) { #users-table { overflow-x: visible; } .users-list-table, .users-list-table tbody, .users-list-table tr, .users-list-table td { display: block; width: 100%; } .users-list-table thead { display: none; } .users-list-table tr { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 0.75rem; background: var(--panel); overflow: hidden; } .users-list-table td { display: grid; grid-template-columns: minmax(5.75rem, 34%) minmax(0, 1fr); gap: 0.75rem; align-items: center; border-bottom: 1px solid var(--border); white-space: normal; padding: 0.65rem 0.75rem; } .users-list-table td:last-child { border-bottom: 0; } .users-list-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .users-list-table .user-actions-cell { display: block; } .users-list-table .user-actions-cell::before { display: block; margin-bottom: 0.45rem; } .users-list-table .user-actions button { flex: 1 1 8.5rem; } } /* Activity / audit log (feature g) */ .activity-more { margin-top: 0.75rem; text-align: center; } .activity-list-table .activity-actor-cell, .activity-list-table .activity-target-cell { white-space: normal; word-break: break-word; } #activity-table td:last-child { white-space: normal; word-break: break-word; max-width: 28rem; font-size: 0.8rem; } #activity-table .activity-details-cell { min-width: 16rem; } .activity-details { display: flex; flex-wrap: wrap; gap: 0.35rem; } /* One clean tinted capsule per key/value (was a split two-segment pill): muted key, tight colon, value in the text colour. */ .activity-detail { display: inline-flex; align-items: baseline; max-width: 100%; border: 1px solid transparent; border-radius: 999px; padding: 0.14rem 0.6rem; background: var(--muted-bg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .activity-detail-key { color: var(--muted); font-weight: 600; flex: 0 0 auto; } .activity-detail-sep { padding-right: 0.28rem; color: var(--muted); flex: 0 0 auto; } .activity-detail-value { overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--text); } @media (max-width: 700px) { #activity-table { overflow-x: visible; } .activity-list-table, .activity-list-table tbody, .activity-list-table tr, .activity-list-table td { display: block; width: 100%; } .activity-list-table thead { display: none; } .activity-list-table tr { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 0.75rem; background: var(--panel); overflow: hidden; } .activity-list-table td { display: grid; grid-template-columns: minmax(5.75rem, 34%) minmax(0, 1fr); gap: 0.75rem; align-items: start; border-bottom: 1px solid var(--border); white-space: normal; padding: 0.65rem 0.75rem; } .activity-list-table td:last-child { border-bottom: 0; } .activity-list-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } #activity-table .activity-details-cell { display: block; min-width: 0; max-width: none; } #activity-table .activity-details-cell::before { display: block; margin-bottom: 0.45rem; } } /* Dialog forms (self password change) */ .dialog form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.6rem; } .setup-hint { font-size: 0.78rem; margin: -0.4rem 0 0.2rem; } /* Delete confirmation dialog — a light iOS-style backdrop blur: enough to focus the alert, gentle enough that the page behind stays recognizable. */ .dialog-backdrop { position: fixed; inset: 0; background: var(--backdrop); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .dialog { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 1.5rem; width: min(440px, 94vw); display: flex; flex-direction: column; gap: 0.6rem; box-shadow: var(--shadow-md); } .dialog h3 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.017em; } .dialog p { margin: 0; } .dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.4rem; } /* Honour reduced-motion: keep focus/state changes but drop the hover lifts and any transform/animation-driven motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .card:hover, .card:focus-visible, .tile:hover, .tile:focus-visible { transform: none; } }