/* Calmping / Watchtower design system. Two themes with distinct character (not one inverted): - light: pastel-identity, calm, warm neutral background. - dark: deep graphite developer-grade UI; pastels appear only as accents. Toggle sets [data-theme] on ; falls back to prefers-color-scheme until the user picks explicitly (see js/theme.js). */ /* Self-hosted brand fonts — shared with the landing/site design language so the dashboard reads as the same product (strict CSP: all fonts local). */ @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/bricolage-var.woff2') format('woff2');} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plex-sans-400.woff2') format('woff2');} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/plex-sans-600.woff2') format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plex-mono-400.woff2') format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plex-mono-500.woff2') format('woff2');} /* Calmping dashboard — committed to the landing's dark world (deep graphite, teal signal + amber alert, Bricolage display + IBM Plex). One theme, so the product feels continuous from the marketing home page into the app. */ :root { --bg: #0E1420; --surface: #141B29; --surface-2: #0F1826; --surface-3: #1A2436; --border: #232C3E; --border-strong: #2f3a51; --text: #EAF0F8; --text-muted: #8A97AC; --text-faint: #727F94; --brand: #6FE0D2; --brand-2: #8bf0d8; --brand-strong: #8bf0d8; --accent: #6FE0D2; --brand-contrast: #06231d; --focus-ring: #6FE0D2; --success-bg: #10312b; --success-text: #6FE0D2; --success-dot: #6FE0D2; --warning-bg: #33260f; --warning-text: #F2A65A; --warning-dot: #F2A65A; --danger-bg: #351a1e; --danger-text: #f2908f; --danger-dot: #f26060; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 44px rgba(0, 0, 0, 0.34); --shadow-hover: 0 26px 60px rgba(0, 0, 0, 0.5); --ring: 0 0 0 3px rgba(111, 224, 210, 0.18); --brand-gradient: linear-gradient(135deg, #6FE0D2, #8bf0d8); --radius: 16px; --radius-sm: 10px; --font: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --display: 'Bricolage Grotesque', system-ui, sans-serif; } /* The dashboard is committed to a single dark theme that matches the landing page (see :root above). The former light/dark override blocks and the prefers-color-scheme switch were removed so :root always wins; the theme toggle in the nav is hidden (.theme-toggle below). */ * { box-sizing: border-box; } html, body { height: 100%; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; background-image: radial-gradient(circle at 5% -10%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 30rem), radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 28rem); background-attachment: fixed; } ::selection { background: color-mix(in srgb, var(--brand) 28%, transparent); color: var(--text); } h1, h2, h3, h4 { margin: 0 0 0.5em; font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; color: #fff; } h1 { font-weight: 800; } h1 { font-size: clamp(1.8rem, 3vw, 2.35rem); line-height: 1.15; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } p { margin: 0 0 1em; color: var(--text-muted); } a { color: var(--brand); text-underline-offset: 3px; } a:hover { color: var(--brand-strong); } code, pre { font-family: var(--mono); } pre { background: var(--surface-2); padding: 12px; border-radius: var(--radius-sm); overflow: auto; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .page { padding: 38px 0 88px; } /* ---- Top nav ---- */ .topnav { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(18px); box-shadow: 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent), 0 8px 30px rgba(20, 27, 50, 0.03); position: sticky; top: 0; z-index: 10; /* keep the header clear of the device status bar / notch (native app + PWA) */ padding-top: env(safe-area-inset-top, 0px); } .topnav-inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; height: 66px; display: flex; align-items: center; gap: 20px; } .brand { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; } .brand-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 12px var(--brand); animation: beat 2.6s ease-in-out infinite; } @keyframes beat { 0%, 72%, 100% { transform: scale(1); opacity: 1; } 80% { transform: scale(1.5); opacity: .6; } 88% { transform: scale(1); opacity: 1; } } .nav-links { display: flex; gap: 4px; flex: 1; } .nav-links a { color: var(--text-muted); text-decoration: none; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 600; transition: background .16s ease, color .16s ease, transform .16s ease; } .nav-links a:hover { background: var(--surface-2); color: var(--text); transform: translateY(-1px); } .nav-links a.active { background: color-mix(in srgb, var(--brand) 11%, var(--surface)); color: var(--brand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent); } .nav-right { display: flex; align-items: center; gap: 10px; } /* ---- Theme toggle (hidden: the dashboard is single-theme dark) ---- */ .theme-toggle { display: none; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 6px 10px; cursor: pointer; font-size: 0.85rem; align-items: center; gap: 6px; transition: border-color .16s ease, transform .16s ease, background .16s ease; } .theme-toggle:hover { border-color: var(--border-strong); transform: translateY(-1px); } .service-back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--text-muted); font-size: 0.92rem; font-weight: 700; text-decoration: none; } .service-back-link:hover { color: var(--brand); } .notification-destinations { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .channel-overview-section { margin-top: 20px; } .channel-overview-section h3 { margin-bottom: 9px; } .notification-channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; min-width: 0; } .notification-channel-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 15px; background: var(--surface); min-width: 0; overflow-wrap: anywhere; } .notification-channel-card.is-connected { border-color: color-mix(in srgb, var(--success-dot) 45%, var(--border)); } .notification-channel-card h4 { margin: 0; font-size: 1rem; } .notification-channel-card p { margin: 7px 0 12px; min-height: 40px; } .notification-channel-card .row { flex-wrap: wrap; } .notification-channel-actions { width: 100%; min-width: 0; align-items: stretch; } .notification-channel-actions .btn { flex: 1 1 110px; min-width: 0; max-width: 100%; white-space: normal; text-align: center; overflow-wrap: anywhere; } /* ---- Cards ---- */ .card { background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 98%, var(--brand) 2%), var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .card:hover { border-color: color-mix(in srgb, var(--brand) 25%, var(--border)); } .card + .card { margin-top: 14px; } .grid { display: grid; gap: 14px; } .grid-cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); padding: 10px 15px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 650; cursor: pointer; text-decoration: none; justify-content: center; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease; } .btn:hover { filter: brightness(0.98); transform: translateY(-1px); border-color: var(--border-strong); } .btn:active { transform: translateY(0) scale(.985); } :root[data-theme="dark"] .btn:hover, :root:not([data-theme="light"]) .btn:hover { filter: brightness(1.15); } .btn-primary { background: var(--brand-gradient); border-color: transparent; color: var(--brand-contrast); box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 25%, transparent); } .btn-primary:hover { box-shadow: 0 14px 30px color-mix(in srgb, var(--brand) 32%, transparent); filter: saturate(1.1); } .btn-danger { background: var(--danger-bg); border-color: var(--danger-text); color: var(--danger-text); } .btn-sm { padding: 6px 10px; font-size: 0.82rem; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .danger-dialog { width: min(560px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; padding: 24px; color: var(--text); background: var(--surface); border: 1px solid color-mix(in srgb, var(--danger-text) 40%, var(--border)); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .danger-dialog::backdrop { background: rgb(3 8 18 / 76%); backdrop-filter: blur(3px); } .danger-dialog h2 { margin: 4px 0 8px; } .danger-dialog p { margin-top: 0; } .danger-text { color: var(--danger-text); } .delete-impact-list { margin: 14px 0 18px; padding-left: 22px; color: var(--text-muted); } .delete-impact-list li + li { margin-top: 7px; } .delete-dialog-actions { margin-top: 18px; flex-wrap: wrap; } /* ---- Forms ---- */ label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px; } input, select, textarea { width: 100%; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--radius-sm); padding: 11px 12px; font-size: 0.92rem; font-family: inherit; box-shadow: inset 0 1px 2px rgba(19, 26, 43, .035); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--brand) 30%, var(--border-strong)); } input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: var(--ring); outline: none; } .field { margin-bottom: 14px; } .required-marker { color: var(--danger); font-weight: 700; } #add-check-card [aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); } #check-form-status:not(:empty) { margin-top: 14px; } .field-row { display: flex; gap: 12px; flex-wrap: wrap; } #sms-verify-form[hidden] { display: none !important; } .field-row > .field { flex: 1; min-width: 180px; } .help { font-size: 0.8rem; color: var(--text-faint); margin-top: 4px; } .error-text { color: var(--danger-text); font-size: 0.85rem; margin-top: 6px; } /* ---- Password show/hide toggle ---- */ .pw-wrap { position: relative; display: block; } .pw-wrap > input { padding-right: 44px; } .pw-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 42px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; background: transparent; border: none; box-shadow: none; color: var(--text-faint); cursor: pointer; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transition: color .15s ease; } .pw-toggle:hover { color: var(--text); background: transparent; } .pw-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } .pw-toggle svg { width: 18px; height: 18px; display: block; } /* ---- Badges / status ---- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; border: 1px solid color-mix(in srgb, currentColor 13%, transparent); } .badge-success { background: var(--success-bg); color: var(--success-text); } .badge-warning { background: var(--warning-bg); color: var(--warning-text); } .badge-danger { background: var(--danger-bg); color: var(--danger-text); } .badge-neutral { background: var(--surface-2); color: var(--text-muted); } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .dot-success { background: var(--success-dot); } .dot-warning { background: var(--warning-dot); } .dot-danger { background: var(--danger-dot); } /* ---- Plain-language service answers ---- */ .service-answers { margin-bottom: 30px; } .service-answers-head { margin-bottom: 12px; } .service-answers-head p { margin: 5px 0 0; } .overall-service-status { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 14px; padding: 17px 18px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); } .overall-service-status h3 { margin: 2px 0 3px; font-size: 1.2rem; } .overall-service-status p { margin: 0; color: var(--text-muted); font-size: .84rem; } .overall-service-status .eyebrow { font-size: .65rem; } .overall-success { background: color-mix(in srgb, var(--success-bg) 68%, var(--surface)); border-color: color-mix(in srgb, var(--success-dot) 32%, var(--border)); } .overall-warning { background: color-mix(in srgb, var(--warning-bg) 60%, var(--surface)); border-color: color-mix(in srgb, var(--warning-dot) 32%, var(--border)); } .overall-danger { background: color-mix(in srgb, var(--danger-bg) 62%, var(--surface)); border-color: color-mix(in srgb, var(--danger-dot) 35%, var(--border)); } .overall-status-action { display: grid; justify-items: end; gap: 2px; min-width: 135px; } .overall-status-action > strong { color: var(--text); font-family: var(--display); font-size: 1.35rem; line-height: 1; } .overall-status-action > span { margin-bottom: 6px; color: var(--text-faint); font-size: .68rem; text-transform: uppercase; letter-spacing: .045em; }.overall-status-symbol { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--surface); color: var(--text); font-size: 1.1rem; font-weight: 800; box-shadow: var(--shadow-xs); }.service-answer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; } .service-answer-card { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); } .service-answer-card.answer-success { border-left-color: var(--success-dot); } .service-answer-card.answer-warning { border-left-color: var(--warning-dot); } .service-answer-card.answer-danger { border-left-color: var(--danger-dot); } .service-answer-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; } .service-answer-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); color: var(--brand); font-size: .7rem; font-weight: 800; letter-spacing: -.02em; } .service-answer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; } .service-answer-top h3 { margin: 1px 0 0; font-size: 1rem; } .service-answer-card > p { margin: 12px 0 7px; color: var(--text-muted); font-size: .86rem; line-height: 1.55; } .service-answer-freshness { color: var(--text-faint); font-size: .72rem; font-weight: 600; } .service-recommendation { display: grid; gap: 3px; margin-top: 12px; padding: 10px 11px; background: color-mix(in srgb, var(--warning-bg) 55%, transparent); border-radius: var(--radius-sm); font-size: .79rem; } .service-recommendation strong { color: var(--warning-text); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; } .service-answer-card details { margin-top: 12px; color: var(--text-muted); font-size: .79rem; } .service-answer-card summary { cursor: pointer; font-weight: 650; color: var(--text); } .service-answer-card ul { margin: 8px 0 0; padding-left: 19px; } .service-answer-card li + li { margin-top: 4px; } .all-recommended-alerts { margin: 0 0 14px; padding: 16px; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); border-radius: var(--radius); background: color-mix(in srgb, var(--brand-soft) 38%, var(--surface)); box-shadow: var(--shadow-xs); } .all-recommended-alerts-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .all-recommended-alerts-head h3 { margin: 0; } .all-recommended-alerts-head p { margin: 4px 0 0; color: var(--text-muted); font-size: .82rem; } .coverage-progress { margin-bottom: 13px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: .78rem; } .coverage-progress-track { height: 8px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: var(--surface-2); } .coverage-progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--brand-gradient); transition: width .25s ease; } .coverage-next-step { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; padding: 14px; border: 1px solid color-mix(in srgb, var(--warning-dot) 34%, var(--border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warning-bg) 55%, var(--surface)); } .coverage-next-step > div { display: grid; gap: 4px; } .coverage-next-step strong { color: var(--text); } .coverage-next-step p { margin: 0; font-size: .76rem; } .coverage-next-step.coverage-ready { border-color: color-mix(in srgb, var(--success-dot) 32%, var(--border)); background: color-mix(in srgb, var(--success-bg) 58%, var(--surface)); }.all-recommended-alerts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .all-recommended-alerts-grid section { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .all-recommended-alerts-grid h4 { margin: 0 0 8px; font-size: .86rem; } .recommended-coverage { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 11px; } .recommended-coverage summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .recommended-coverage-list { display: grid; gap: 8px; margin-top: 10px; } .recommended-coverage-list > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border-radius: var(--radius-sm); background: var(--surface-2); } .coverage-priority { font-size: .62rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; } .priority-essential { color: var(--danger-text); } .priority-recommended { color: var(--warning-text); } .priority-advanced { color: var(--text-faint); } .coverage-complete { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--success-text); font-size: .76rem; font-weight: 650; } .detailed-monitoring { padding-top: 4px; border-top: 1px solid var(--border); } .detailed-monitoring-head { padding: 15px 0 12px; } .detailed-monitoring-head p { margin: 5px 0 0; } #detailed-monitoring-content { padding-top: 4px; } /* ---- Check operational overview ---- */ .check-overview-list { display: grid; gap: 14px; } .check-overview-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); overflow: hidden; } .check-overview-head, .check-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 17px; } .check-quick-actions { flex-wrap: wrap; justify-content: flex-end; } .check-overview-head { border-bottom: 1px solid var(--border); } .check-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; } .check-title strong { min-width: 0; overflow-wrap: anywhere; } .check-overview-head > div:first-child { min-width: 0; } .check-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .check-summary-grid > div { min-width: 0; padding: 14px 17px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); } .check-summary-grid > div:nth-child(4) { border-right: 0; } .check-summary-grid > div:nth-last-child(-n+2) { border-bottom: 0; } .check-summary-grid > div:last-child { border-right: 0; } .check-summary-grid .check-wide { grid-column: span 3; } .check-summary-grid small { display: block; color: var(--text-faint); font-size: .72rem; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; margin-bottom: 6px; } .check-summary-grid strong { display: block; min-width: 0; font-size: .88rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; } .check-summary-grid strong small { margin: 5px 0 0; text-transform: none; letter-spacing: 0; font-weight: 500; } .check-card-footer { background: color-mix(in srgb, var(--surface-2) 65%, transparent); } /* ---- Incident AI command console ---- */ .incident-cli { margin: 16px 0; padding: 15px; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); border-radius: var(--radius); background: color-mix(in srgb, var(--brand-soft) 34%, var(--surface)); } .incident-command-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 13px 0 10px; } .incident-command-grid .btn { justify-content: flex-start; text-align: left; min-height: 40px; } .incident-evidence-grid > .card, .diagnosis-card, .incident-cli { min-width: 0; } #incident-header, .incident-title-row > div { min-width: 0; } #incident-header h1 { max-width: 100%; overflow-wrap: anywhere; } .incident-title-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 8px; } #evidence, #timeline, #memory-guidance { min-width: 0; overflow-wrap: anywhere; } #evidence pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; } .diagnosis-actions { min-width: 0; } .diagnosis-actions[hidden], #assistant-form[hidden], #playbook-draft-form[hidden] { display: none !important; } @media (max-width: 900px) { .incident-evidence-grid { grid-template-columns: minmax(0, 1fr); } .diagnosis-card > .row.between { align-items: stretch; flex-direction: column; } .diagnosis-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; } } @media (max-width: 520px) { .incident-title-row { align-items: stretch; flex-direction: column; } .incident-title-row > .btn { width: 100%; } .diagnosis-actions { grid-template-columns: 1fr; } .diagnosis-actions .btn { width: 100%; } } .compact-banner { margin: 12px 0 0; padding: 10px 12px; font-size: .8rem; } #assistant-messages article { padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } #assistant-messages pre { white-space: pre-wrap; overflow-wrap: anywhere; } /* ---- Security monitoring ---- */ .security-verification { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .security-verification.verified { border-color: color-mix(in srgb, var(--success-dot) 45%, var(--border)); } .security-tier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; } .security-tier-grid .card { margin: 0; } .security-score-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; } .security-score { display: flex; align-items: baseline; color: var(--brand); } .security-score strong { font-size: 2.35rem; line-height: 1; } .security-score span { color: var(--text-faint); } .security-counts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 16px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .security-counts span { padding: 10px; text-align: center; border-right: 1px solid var(--border); font-size: .78rem; color: var(--text-muted); } .security-counts span:last-child { border-right: 0; } .security-counts strong { display: block; color: var(--text); font-size: 1rem; } .security-findings { display: grid; gap: 9px; } .security-finding { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface-2) 60%, transparent); } .security-finding p { margin: 8px 0 0; font-size: .85rem; } .security-category { margin-top: 3px; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; } .security-history { display: grid; gap: 8px; margin-top: 12px; } /* ---- Tables ---- */ table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.88rem; } th, td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--border); } th { color: var(--text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; } tbody tr { transition: background .14s ease; } tbody tr:hover { background: color-mix(in srgb, var(--brand) 4%, transparent); } /* ---- Tabs ---- */ .tabs { display: flex; gap: 4px; margin-bottom: 20px; padding: 5px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--surface-2) 72%, transparent); box-shadow: var(--shadow-xs); } .tab { padding: 9px 14px; cursor: pointer; color: var(--text-muted); font-size: 0.9rem; font-weight: 600; background: transparent; border: 0; border-radius: 9px; font-family: inherit; transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; } .tab:hover { color: var(--text); transform: translateY(-1px); } .tab.active { color: var(--brand); background: var(--surface); box-shadow: var(--shadow-xs), inset 0 0 0 1px color-mix(in srgb, var(--brand) 9%, transparent); font-weight: 700; } .settings-tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;overflow:visible;padding:6px} .settings-tabs .tab{width:100%;min-width:0;padding:10px 8px;white-space:normal;line-height:1.2} @media(max-width:900px){.settings-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:900px){.service-title-row{align-items:flex-start;flex-direction:column;gap:14px;margin-bottom:10px}.service-header-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px}.service-header-actions .btn{width:100%;min-width:0;white-space:normal}.service-maintenance-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.service-maintenance-row select{width:100%!important}} @media(max-width:620px){.service-header-actions{grid-template-columns:1fr}.service-maintenance-row{grid-template-columns:1fr}.service-maintenance-row .btn{width:100%}} /* ---- Alerts / banners ---- */ .banner { border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; font-size: 0.9rem; } .banner { border-left: 3px solid currentColor; box-shadow: var(--shadow-xs); } .banner-info { background: var(--surface-2); color: var(--text); } .banner-success { background: var(--success-bg); color: var(--success-text); } .banner-warning { background: var(--warning-bg); color: var(--warning-text); } .banner-danger { background: var(--danger-bg); color: var(--danger-text); } .context-action-banner, .incident-resolved-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .context-action-banner > div:first-child, .incident-resolved-banner > div:first-child { display: grid; gap: 3px; min-width: 0; } .context-target-highlight { outline: 2px solid var(--brand); outline-offset: 4px; animation: context-target-pulse 2.4s ease; } @keyframes context-target-pulse { 0%, 100% { box-shadow: none; } 35% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 18%, transparent); } } /* ---- Toggle switch ---- */ .switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; } .switch input { opacity: 0; width: 0; height: 0; } .switch-track { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: 0.15s; cursor: pointer; } .switch-track::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--surface); border-radius: 50%; transition: 0.15s; } .switch input:checked + .switch-track { background: var(--brand); } .switch input:checked + .switch-track::before { transform: translateX(18px); } /* ---- Misc layout ---- */ .row { display: flex; align-items: center; gap: 10px; } .between { justify-content: space-between; } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .stack > * + * { margin-top: 10px; } .empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); } .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--brand); animation: spin 0.7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ---- Auth pages (centered card) ---- */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; overflow: hidden; } .auth-shell::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 22%, transparent), transparent 67%); left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; } .auth-card { width: 100%; max-width: 400px; } .auth-card { position: relative; z-index: 1; } .auth-card .card { padding: 32px; box-shadow: var(--shadow-hover); } footer.site-footer { text-align: center; padding: 30px 20px; color: var(--text-faint); font-size: 0.82rem; } /* ---- 2026 dashboard redesign ---- */ .eyebrow { margin: 0 0 10px; display: inline-flex; align-items: center; gap: 9px; color: var(--brand); font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: lowercase; } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); } .page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; } .page-heading h1, .page-heading h2 { text-wrap: balance; } .page-heading p:not(.eyebrow) { margin: 6px 0 0; max-width: 640px; } /* Shimmering page title: a teal-into-orange sheen sweeps across the heading, finished with a soft lighter underline. Falls back to a static gradient when reduced motion is requested. */ .page-heading h1 { background: linear-gradient(105deg, #ffffff 0%, #ffffff 20%, var(--brand) 38%, var(--warning-text) 50%, var(--brand) 62%, #ffffff 80%, #ffffff 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: titleShimmer 7s linear infinite; } .page-heading h1::after { content: ""; display: block; height: 2px; width: 88px; margin-top: 14px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--warning-text) 60%, transparent); opacity: .8; } @keyframes titleShimmer { to { background-position: -220% center; } } @media (prefers-reduced-motion: reduce) { .page-heading h1 { animation: none; } } .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; } .metric-card { position: relative; overflow: hidden; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .metric-card::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--brand-gradient); opacity: .35; } .metric-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 22%, var(--border)); box-shadow: var(--shadow-hover); } .metric-card:nth-child(2)::after { background: linear-gradient(90deg, var(--accent), var(--success-dot)); } .metric-card:nth-child(3)::after { background: linear-gradient(90deg, var(--warning-dot), var(--danger-dot)); } .metric-card span { display: block; color: var(--text-faint); font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .metric-card strong { display: block; margin-top: 6px; font-family: var(--display); font-weight: 800; font-size: 1.8rem; letter-spacing: -0.04em; color: #fff; } .metric-card.metric-good strong { color: var(--success-text); } .metric-card.metric-alert strong { color: var(--danger-text); } .section-heading { margin: 28px 0 14px; } .onboarding-progress{border-color:color-mix(in srgb,var(--brand) 42%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 10%,var(--surface)),var(--surface))} .setup-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0} .setup-step{position:relative;padding:14px 14px 14px 38px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)} .setup-step::before{content:"";position:absolute;left:14px;top:17px;width:12px;height:12px;border:2px solid var(--text-faint);border-radius:50%} .setup-step.done::before{border-color:var(--success-dot);background:var(--success-dot);box-shadow:0 0 0 4px color-mix(in srgb,var(--success-dot) 15%,transparent)} .setup-step strong,.setup-step span{display:block}.setup-step span{margin-top:4px;color:var(--text-faint);font-size:.78rem} .app-card { min-height: 190px; } .app-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .app-card .app-card-title { font-size: 1.1rem; } .app-card .app-url { min-height: 38px; word-break: break-word; } .app-card-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; } .app-card-metrics > div { padding: 10px; border-radius: 10px; background: var(--surface-2); } .app-card-metrics span { display: block; color: var(--text-faint); font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; } .app-card-metrics strong { display: block; margin-top: 3px; } .switch-row { display: flex; align-items: center; gap: 10px; min-height: 38px; } .table-shell { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .table-shell { box-shadow: var(--shadow-xs); } .table-shell table tr:last-child td { border-bottom: 0; } /* ---- Marketing landing ---- */ .landing-shell { overflow: hidden; } .landing-hero { position: relative; padding: 88px 0 190px; text-align: center; isolation: isolate; } .landing-hero::before { content: ""; position: absolute; width: 520px; height: 520px; left: 50%; top: -280px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 22%, transparent), transparent 68%); pointer-events: none; animation: heroPulse 7s ease-in-out infinite alternate; } .landing-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--brand) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--brand) 5%, transparent) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 78%); pointer-events: none; } .landing-hero-inner { position: relative; max-width: 1000px; margin: auto; } .landing-hero h1 { font-size: clamp(2.6rem, 7vw, 4.9rem); line-height: .98; letter-spacing: -.065em; } .landing-hero h1 span { color: transparent; background: linear-gradient(110deg, var(--brand), var(--brand-2), var(--accent)); background-clip: text; -webkit-background-clip: text; background-size: 200% auto; animation: gradientMove 5s linear infinite alternate; } .landing-lead { max-width: 690px; margin: 24px auto; font-size: 1.12rem; line-height: 1.75; } .hero-actions { justify-content: center; margin-top: 28px; } .trust-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin-top: 34px; color: var(--text-faint); font-size: .82rem; } .trust-strip span::before { content: "✓"; color: var(--accent); margin-right: 6px; font-weight: 800; } .product-preview { width: min(940px, 100%); margin: 54px auto -340px; text-align: left; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border)); border-radius: 24px; box-shadow: 0 50px 120px rgba(25, 32, 68, .22), 0 0 0 8px color-mix(in srgb, var(--surface) 38%, transparent); overflow: hidden; backdrop-filter: blur(20px); transform: perspective(1400px) rotateX(1.5deg); transform-origin: center top; animation: previewFloat 6s ease-in-out infinite; } .preview-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 65%, transparent); } .preview-logo { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.03em; } .preview-logo .brand-dot { width: 20px; height: 20px; border-radius: 6px; } .preview-pill { display: inline-flex; align-items: center; gap: 6px; color: var(--success-text); background: var(--success-bg); padding: 5px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; } .preview-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); } .preview-metrics > div { background: var(--surface); padding: 20px; } .preview-metrics span { display: block; color: var(--text-faint); font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; } .preview-metrics strong { display: block; font-size: 1.55rem; letter-spacing: -.04em; margin-top: 5px; } .preview-success { color: var(--success-text); } .preview-services { padding: 8px 20px 16px; background: var(--surface); } .preview-services > div { display: grid; grid-template-columns: 1fr 100px 130px; align-items: center; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--border); font-size: .84rem; } .preview-services > div:last-child { border-bottom: 0; } .preview-service-name { display: flex; align-items: center; gap: 9px; font-weight: 650; } .landing-features { padding-top: 190px; } .feature-grid { margin-top: 20px; } .feature-card { position: relative; overflow: hidden; min-height: 210px; } .feature-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -75px; bottom: -90px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 10%, transparent); transition: transform .25s ease, opacity .25s ease; } .feature-card:hover::after { transform: scale(1.35); opacity: .8; } .feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .feature-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 20px; border-radius: 13px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 18%, var(--surface)), color-mix(in srgb, var(--accent) 14%, var(--surface))); color: var(--brand); font-weight: 800; } .pricing-section { margin-top: 92px; } .pricing-card { position: relative; } .pricing-card.featured { border-color: var(--brand); box-shadow: 0 18px 50px color-mix(in srgb, var(--brand) 14%, transparent); } .pricing-card.featured::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--brand-gradient); opacity: .32; filter: blur(18px); } .pricing-tag { position: absolute; right: 18px; top: 18px; padding: 4px 9px; border-radius: 999px; background: var(--brand); color: var(--brand-contrast); font-size: .7rem; font-weight: 750; } .price { color: var(--text); font-size: 2.25rem; font-weight: 760; letter-spacing: -.05em; } .price small { color: var(--text-muted); font-size: .85rem; font-weight: 500; letter-spacing: 0; } /* ---- Public status page ---- */ .status-shell { max-width: 900px; padding-top: 70px; padding-bottom: 70px; } .status-hero { text-align: center; margin-bottom: 44px; } .status-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); } .status-hero .badge { padding: 9px 16px; font-size: .9rem; margin-top: 8px; } .status-service { padding: 20px 22px; } .status-service:hover { transform: none; } .status-metric { display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; color: var(--text-muted); } .status-metric strong { color: var(--text); } .status-footer { text-align: center; color: var(--text-faint); margin-top: 54px; font-size: .8rem; } .integration-provider-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .integration-provider { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; padding: 10px 12px; background: transparent; border: 1px solid var(--border); border-radius: 12px; } .integration-provider:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: var(--surface-2); } .integration-provider-copy { min-width: 0; } .integration-provider h3 { margin: 0; font-size: .94rem; } .integration-provider-copy span { display: block; color: var(--text-muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .integration-provider .btn { align-self: center; } .integration-category-row { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .integration-category-row h3, .integration-category-row p { margin: 0; } .integration-category-row p { margin-top: 3px; color: var(--text-muted); font-size: .82rem; } .ai-provider-drawer { position: fixed; inset: 0 0 0 auto; width: min(500px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; color: var(--text); background: var(--surface); border: 0; border-left: 1px solid var(--border); box-shadow: -24px 0 64px rgb(0 0 0 / 35%); overflow: hidden; } .ai-provider-drawer::backdrop { background: rgb(3 8 18 / 68%); backdrop-filter: blur(2px); } .ai-provider-drawer-shell { height: 100%; padding: 0 24px 28px; overflow-y: auto; } .ai-provider-drawer-header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; gap: 14px; align-items: center; margin: 0 -24px 20px; padding: 20px 24px 16px; background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); } .ai-provider-drawer-header p { margin: 0 0 2px; } .ai-provider-search { position: sticky; top: 91px; z-index: 1; margin-bottom: 12px; padding: 8px 0 10px; background: var(--surface); } .ai-provider-drawer .integration-provider-list { grid-template-columns: 1fr; } .ai-provider-drawer #integration-form { padding-bottom: 20px; } body.integration-drawer-open { overflow: hidden; } .provider-more { margin-top: 18px; } .provider-more > summary { cursor: pointer; font-weight: 700; color: var(--primary); } .mcp-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end; margin-top: 18px; } .mcp-service-field { grid-column: 1 / -1; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; } .mcp-service-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 8px; } .mcp-service-list input { width: auto; } .mcp-config { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; } .mcp-actions { flex-wrap: nowrap; } .diagnosis-card pre { max-width: 100%; white-space: pre-wrap; overflow-x: hidden; overflow-wrap: anywhere; word-break: break-word; line-height: 1.65; } .diagnosis-runs-heading { margin-top: 22px; } .diagnosis-run { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .diagnosis-run summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; cursor: pointer; } .diagnosis-run summary > span { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; } .diagnosis-run summary time { flex: none; color: var(--text-faint); font-size: .78rem; } .diagnosis-run pre { margin: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .playbook-create-dialog { width: min(620px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); overflow-x: hidden; overflow-y: auto; padding: 24px; color: var(--text); color-scheme: dark; scrollbar-color: var(--border-strong) var(--surface); scrollbar-width: thin; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .playbook-create-dialog::-webkit-scrollbar { width: 10px; } .playbook-create-dialog::-webkit-scrollbar-track { background: var(--surface); } .playbook-create-dialog::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid var(--surface); border-radius: 999px; } .playbook-create-dialog::backdrop { background: rgb(3 8 18 / 68%); backdrop-filter: blur(2px); } .playbook-create-dialog [hidden] { display: none !important; } .playbook-create-dialog select, #assistant-source { appearance: none; padding-right: 42px; background-image: linear-gradient(45deg, transparent 50%, var(--brand) 50%), linear-gradient(135deg, var(--brand) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .playbook-create-dialog select:disabled, #assistant-source:disabled { opacity: .72; } @media (max-width: 520px) { .playbook-create-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 18px; } .playbook-create-dialog .row.end { align-items: stretch; flex-direction: column-reverse; } .playbook-create-dialog .row.end .btn { width: 100%; } } @media (max-width: 520px) { .diagnosis-run summary { align-items: flex-start; flex-direction: column; } } .legal-page { max-width: 880px; } .faq-list { display: grid; gap: 10px; } .faq-list details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .faq-list summary { cursor: pointer; padding: 18px 20px; font-weight: 700; color: var(--text); } .faq-list details p { padding: 0 20px 18px; margin: 0; } .contact-shell { max-width: 980px; } .contact-options { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .whatsapp-btn { background: #20b65a; border-color: #20b65a; color: #fff; } @keyframes heroPulse { from { transform: translateX(-50%) scale(.9); opacity: .75; } to { transform: translateX(-50%) scale(1.12); opacity: 1; } } @keyframes gradientMove { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } @keyframes previewFloat { 0%, 100% { transform: perspective(1400px) rotateX(1.5deg) translateY(0); } 50% { transform: perspective(1400px) rotateX(1deg) translateY(-7px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } @media (max-width: 960px) { .container { padding-left: 16px; padding-right: 16px; } .page { padding-top: 26px; } .topnav-inner { height: auto; min-height: 66px; padding: 10px 14px 8px; gap: 10px; flex-wrap: wrap; } .brand { flex: 1; } .nav-right { margin-left: auto; } .nav-links { order: 3; flex-basis: 100%; overflow-x: auto; padding: 0 18px 3px 0; scrollbar-width: none; -ms-overflow-style: none; mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); } .nav-links::-webkit-scrollbar { display: none; } .nav-links a { min-height: 44px; padding: 10px 9px; white-space: nowrap; } .nav-right #install-app-btn { display: none; } .page-heading { align-items: flex-start; flex-direction: column; } .metric-grid { grid-template-columns: repeat(2, 1fr); } .setup-steps { grid-template-columns: 1fr; } .field-row { display: block; } .integration-provider-list { grid-template-columns: 1fr; } .integration-category-row { align-items: flex-start; } .ai-provider-drawer { width: 100vw; border-left: 0; } .mcp-guide { grid-template-columns: 1fr; } .mcp-service-field { grid-column: auto; } .mcp-table-shell { overflow: visible; border: 0; background: transparent; } .mcp-table, .mcp-table tbody, .mcp-table tr, .mcp-table td { display: block; width: 100%; } .mcp-table thead { display: none; } .mcp-table tbody { display: grid; gap: 12px; } .mcp-table tr { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .mcp-table td { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr); gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; } .mcp-table td::before { content: attr(data-label); color: var(--text-muted); font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; } .mcp-table td:first-child { padding-top: 16px; } .mcp-table td:last-child { border-bottom: 0; padding-bottom: 16px; } .mcp-table .mcp-actions { display: flex; flex-wrap: wrap; gap: 8px; } .mcp-table .mcp-actions::before { flex-basis: 100%; } .mcp-table .mcp-actions .btn { flex: 1 1 86px; } .integration-table-shell { overflow: visible; border: 0; background: transparent; } .integration-table, .integration-table tbody, .integration-table tr, .integration-table td { display: block; width: 100%; } .integration-table thead { display: none; } .integration-table tbody { display: grid; gap: 12px; } .integration-table tr { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-xs); } .integration-table td { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr); gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; } .integration-table td::before { content: attr(data-label); color: var(--text-muted); font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; } .integration-table td:last-child { border-bottom: 0; } .integration-table .integration-actions { display: flex; flex-wrap: wrap; gap: 8px; } .integration-table .integration-actions::before { flex-basis: 100%; } .integration-table .integration-actions .btn { flex: 1 1 110px; } .tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; overflow: visible; padding: 6px; } .tab { width: 100%; min-width: 0; padding: 10px 8px; white-space: normal; line-height: 1.2; text-align: center; } .row.between { flex-wrap: wrap; } .row.between > * { min-width: 0; } #diagnosis-integration, #custom-ai-endpoint, #webhook-url, #library-search { width: 100% !important; min-width: 0 !important; max-width: none !important; } .landing-hero { padding: 54px 0 140px; } .landing-hero h1 { font-size: 2.8rem; } .hero-actions { flex-direction: column; } .hero-actions .btn { width: 100%; justify-content: center; } .app-card-metrics { grid-template-columns: 1fr 1fr; } .product-preview { margin-top: 38px; margin-bottom: -280px; transform: none; animation: none; } .preview-metrics { grid-template-columns: repeat(2, 1fr); } .preview-services > div { grid-template-columns: 1fr auto; } .preview-services > div > span:nth-child(2) { display: none; } .preview-services .badge { display: none; } .landing-features { padding-top: 170px; } .check-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .check-summary-grid .check-wide { grid-column: span 2; } .check-summary-grid > div:nth-child(2n) { border-right: 0; } .check-overview-head, .check-card-footer { align-items: flex-start; } .check-card-footer { flex-direction: column; } .security-verification { align-items: flex-start; flex-direction: column; } .security-tier-grid { grid-template-columns: 1fr; } .security-score-row { grid-template-columns: auto 1fr; } .security-score-row > .badge { grid-column: 1 / -1; justify-self: start; } .security-counts { grid-template-columns: repeat(2, 1fr); } } /* Compact dashboard navigation for narrow phones and split browser panes. Native horizontal scrollbars expose bright platform arrow buttons in some browsers, so keep the top nav swipeable but visually quiet and lay Settings tabs out as real touch targets instead of another scrolling strip. */ @media (max-width: 620px) { .service-answers-head, .detailed-monitoring-head { align-items: flex-start; flex-direction: column; } .service-answers-head > .btn, .detailed-monitoring-head > .btn { width: 100%; } .service-answer-top { flex-direction: column; gap: 7px; } .overall-service-status { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 15px; } .overall-status-action { grid-column: 1 / -1; justify-items: stretch; width: 100%; } .coverage-next-step { align-items: stretch; flex-direction: column; } .recommended-coverage-list > div { grid-template-columns: 1fr auto; } .recommended-coverage-list .coverage-priority { grid-column: 1 / -1; } } @media (max-width: 520px) { .btn-sm, .tab, .drawer-back, .drawer-close { min-height: 44px; } .check-overview-head { align-items: flex-start; flex-direction: column; } .check-overview-head > div, .check-quick-actions { width: 100%; } .check-quick-actions { justify-content: flex-start; } .check-title { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; } .check-title .badge { grid-column: 2; justify-self: start; max-width: 100%; white-space: normal; overflow-wrap: anywhere; } .delete-dialog-actions .btn { flex: 1 1 100%; width: 100%; } .check-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .check-summary-grid .check-wide, .check-summary-grid > div:last-child { grid-column: 1 / -1; } .check-summary-grid > div { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); } .check-summary-grid > div:nth-child(2n) { border-right: 0; } .check-summary-grid .check-wide, .check-summary-grid > div:last-child { border-right: 0; } .check-summary-grid > div:last-child { border-bottom: 0; } .check-card-footer .row { width: 100%; flex-wrap: wrap; } .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tabs .tab:last-child:nth-child(odd) { grid-column: 1 / -1; } #prefs-table { width: 100%; min-width: 0; table-layout: fixed; font-size: 0.78rem; } #prefs-table th, #prefs-table td { padding: 9px 3px; text-align: center; } #prefs-table th:first-child, #prefs-table td:first-child { width: 43%; text-align: left; } #prefs-table .switch { transform: scale(.9); transform-origin: center; } } /* Metrics charts (app page) */ .chart-card { margin-bottom: 14px; } .chart-card h3 { font-size: 0.95rem; } .spark-svg { display: block; width: 100%; height: 120px; margin-top: 10px; } .spark-line { stroke: var(--brand); stroke-width: 1.6; } .spark-fail { fill: var(--danger-dot, #f85149); } .uptime-bars { display: flex; gap: 3px; margin-top: 12px; } .uptime-bar { flex: 1 1 0; height: 26px; border-radius: 3px; min-width: 4px; } .uptime-bar.bar-ok { background: var(--success-dot, #3fb950); } .uptime-bar.bar-warn { background: var(--warning-dot, #d29922); } .uptime-bar.bar-bad { background: var(--danger-dot, #f85149); } /* Alert delivery audit */ .alert-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px} .alert-filters{min-width:min(100%,560px);display:grid;gap:10px} .alert-filter-group{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:9px} .alert-filter-label{color:var(--text-muted);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em} .alert-filter-options{display:flex;gap:6px;flex-wrap:wrap} .alert-filter-chip{appearance:none;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface-2);color:var(--text-muted);padding:7px 11px;font:600 .78rem/1 inherit;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease} .alert-filter-chip:hover{border-color:color-mix(in srgb,var(--brand) 42%,var(--border-strong));color:var(--text)} .alert-filter-chip:focus-visible{outline:none;box-shadow:var(--ring)} .alert-filter-chip.is-active{border-color:color-mix(in srgb,var(--brand) 58%,var(--border));background:var(--brand-soft);color:var(--brand)} .alert-clear-filters{justify-self:end} .alert-delivery-row{padding:18px 0;border-top:1px solid var(--border)}.alert-delivery-row:first-child{border-top:0} .alert-delivery-title{display:flex;align-items:flex-start;justify-content:space-between;gap:14px} .alert-delivery-title>div{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:center} .alert-delivery-title strong{font-size:1rem}.alert-delivery-title small{grid-column:2;color:var(--text-faint)} .alert-channel{grid-row:1/3;padding:8px 10px;border-radius:10px;background:var(--surface-2);color:var(--brand);font-weight:700;font-size:.76rem;text-transform:uppercase} .alert-delivery-meta{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;margin:14px 0} .alert-delivery-meta div,.alert-provider-result{padding:10px 12px;border-radius:10px;background:var(--surface-2)} .alert-delivery-meta span,.alert-provider-result span{display:block;color:var(--text-faint);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em} .alert-delivery-meta strong,.alert-provider-result strong{display:block;margin-top:3px;font-size:.82rem;overflow-wrap:anywhere} .alert-provider-result{margin-bottom:12px}.alert-provider-result.has-error{background:var(--danger-bg);color:var(--danger-text)} .test-alert-card{scroll-margin-top:84px}.test-alert-submit{align-self:flex-end}.test-alert-result{margin-top:4px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);min-height:46px}.test-alert-result:empty{display:none}.test-alert-result.is-working{color:var(--text-muted)}.test-alert-result.is-success{border-color:color-mix(in srgb,var(--success-dot) 45%,var(--border));background:var(--success-bg);color:var(--success-text)}.test-alert-result.is-error{border-color:color-mix(in srgb,var(--danger) 45%,var(--border));background:var(--danger-bg);color:var(--danger-text)}.test-alert-result ul{margin:7px 0 0;padding-left:20px} @media(max-width:700px){.alert-toolbar{display:block}.alert-filters{margin-top:14px}.alert-filter-group{grid-template-columns:1fr}.alert-filter-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.alert-filter-chip{width:100%}.alert-clear-filters{justify-self:stretch}.alert-delivery-meta{grid-template-columns:repeat(2,1fr)}.test-alert-submit .btn{width:100%}} @media(max-width:520px){.alert-delivery-title{display:grid}.alert-delivery-title>div{grid-template-columns:1fr}.alert-channel{grid-row:auto;justify-self:start}.alert-delivery-title small{grid-column:1}.alert-delivery-meta{grid-template-columns:1fr}} /* Unified operational activity timeline */ .activity-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:8px}.activity-filters{min-width:min(100%,600px);display:grid;gap:10px}.activity-filters .field{margin-bottom:0}.activity-clear-filters{justify-self:end} .activity-event{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;padding:17px 0;border-top:1px solid var(--border)}.activity-event:first-child{border-top:0} .activity-marker{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:.7rem;font-weight:800} .activity-body strong{display:block;margin-top:2px}.activity-body time{font-size:.76rem;color:var(--text-faint);white-space:nowrap}.activity-body p{margin:8px 0;color:var(--text-muted);overflow-wrap:anywhere}.activity-body a{font-size:.82rem}.activity-kind{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint)} @media(max-width:700px){.activity-toolbar{display:block}.activity-filters{margin-top:14px}.activity-clear-filters{justify-self:stretch}.activity-body>.between{align-items:flex-start}.activity-body time{white-space:normal;text-align:right}} @media(max-width:420px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric-card{padding:16px 14px}.activity-event{grid-template-columns:34px minmax(0,1fr);gap:10px}.activity-marker{width:32px;height:32px}.activity-body>.between{display:grid}.activity-body time{text-align:left}} .deployment-maintenance-card{border-style:dashed}.deployment-endpoint{display:flex;align-items:center;gap:10px;margin:12px 0;padding:10px;border-radius:10px;background:var(--surface-2)}.deployment-endpoint code{min-width:0;overflow-wrap:anywhere;color:var(--brand);font-size:.78rem}.deployment-endpoint .btn{flex:none} @media(max-width:520px){.deployment-endpoint{align-items:stretch;flex-direction:column}.deployment-endpoint .btn{width:100%}} .service-context{position:relative;flex:0 1 190px;min-width:0}.service-context-button{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 7px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);text-align:left;cursor:pointer}.service-context-button>span{grid-column:1/-1;color:var(--text-faint);font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.service-context-button strong{overflow:hidden;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.service-context-button i{font-style:normal}.service-context-panel{position:absolute;z-index:30;top:calc(100% + 8px);left:0;width:min(310px,calc(100vw - 28px));padding:12px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-lg)}.service-context-panel>label{display:block;margin-bottom:7px;color:var(--text-muted);font-size:.72rem;font-weight:700}.service-context-panel input{width:100%;margin-bottom:8px}.service-context-options{display:grid;gap:3px;max-height:260px;overflow-y:auto}.service-context-options button{display:flex;justify-content:space-between;gap:12px;width:100%;padding:9px 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text);text-align:left;cursor:pointer}.service-context-options button:hover,.service-context-options button.is-current{background:color-mix(in srgb,var(--brand) 11%,var(--surface));color:var(--brand)}.service-context-options small{color:var(--text-faint)}@media(max-width:960px){.service-context{order:2;flex:0 1 170px}.nav-links{order:4}}@media(max-width:520px){.service-context{flex-basis:145px}.service-context-button>span{display:none}.service-context-button{min-height:44px}} .service-context[hidden],.service-context-panel[hidden],.service-context-options button[hidden]{display:none!important} /* Recoverable service deletion */ .archived-services{margin-top:32px;padding-top:10px;border-top:1px solid var(--border)} .archived-app-card{display:flex;min-width:0;flex-direction:column;align-items:flex-start;border-color:color-mix(in srgb,var(--warning-dot) 35%,var(--border))} .archived-app-card h3{margin:12px 0 4px;overflow-wrap:anywhere} .archived-app-card .btn{margin-top:auto} .archived-app-card [data-restore-status]:empty{display:none} @media(max-width:760px){#archived-apps-grid{grid-template-columns:1fr}.archived-services .section-heading{align-items:flex-start;flex-direction:column}} /* Account-wide incident command center */ .incident-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}.incident-summary-grid .card{padding:18px 20px}.incident-summary-grid span{display:block;color:var(--text-muted);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.incident-summary-grid strong{display:block;margin-top:7px;font-size:2rem;color:var(--text)} .incident-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:12px}.incident-filters{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr)) auto;align-items:end;gap:10px;min-width:min(100%,700px)}.incident-filters .field{margin:0}.incident-list-card{display:grid;grid-template-columns:minmax(220px,1.25fr) minmax(360px,1fr) auto;align-items:center;gap:20px;padding:20px 0;border-top:1px solid var(--border)}.incident-list-card:first-child{border-top:0}.incident-list-main{min-width:0}.incident-list-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.incident-list-title h3{margin:3px 0 0;overflow-wrap:anywhere}.incident-list-main>p{margin:8px 0 0;color:var(--text-muted)}.incident-list-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}.incident-list-meta div{min-width:0}.incident-list-meta dt{color:var(--text-faint);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.incident-list-meta dd{margin:5px 0 0;color:var(--text);font-size:.82rem;overflow-wrap:anywhere}.incident-delivery{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.incident-delivery small{color:var(--text-faint)} @media(max-width:900px){.incident-toolbar{display:block}.incident-filters{margin-top:14px}.incident-list-card{grid-template-columns:1fr auto}.incident-list-meta{grid-column:1/-1;grid-row:2}.incident-list-card>.btn{grid-column:2;grid-row:1}} @media(max-width:650px){.incident-summary-grid{grid-template-columns:1fr}.incident-filters{grid-template-columns:1fr}.incident-list-card{grid-template-columns:1fr}.incident-list-title{display:grid}.incident-list-meta{grid-column:1;grid-row:auto;grid-template-columns:1fr}.incident-list-card>.btn{grid-column:1;grid-row:auto;width:100%}} /* Guided incident assistant drawer */ .incident-header-actions { flex-wrap: wrap; justify-content: flex-end; } .incident-assistant-drawer { position: fixed; inset: 0 0 0 auto; width: min(540px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; color: var(--text); background: var(--surface); border: 0; border-left: 1px solid var(--border); box-shadow: -24px 0 64px rgb(0 0 0 / 35%); overflow: hidden; } @media (max-width: 420px) { .integration-category-row { align-items: stretch; flex-direction: column; } .integration-category-row .btn { width: 100%; } .ai-provider-drawer-shell { padding-inline: 16px; } .ai-provider-drawer-header { margin-inline: -16px; padding-inline: 16px; } } .incident-assistant-drawer[open] { animation: assistant-drawer-in 180ms ease-out; } .incident-assistant-drawer::backdrop { background: rgb(3 8 18 / 68%); backdrop-filter: blur(2px); } .assistant-drawer-shell { height: 100%; padding: 0 28px 28px; overflow-y: auto; scroll-padding-bottom: 120px; } .assistant-drawer-header { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin: 0 -28px 22px; padding: 22px 28px 18px; background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); } .drawer-back, .drawer-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 12px; font: inherit; font-size: 24px; cursor: pointer; } .drawer-back[hidden] { visibility: hidden; display: grid !important; } .assistant-step-progress { display: flex; align-items: center; margin: 6px 0 28px; } .assistant-step-progress span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; color: var(--muted); border: 1px solid var(--border); border-radius: 50%; font-weight: 800; } .assistant-step-progress span.is-active { color: #062a28; background: var(--primary); border-color: var(--primary); } .assistant-step-progress i { height: 1px; flex: 1; background: var(--border); } .assistant-provider-options { display: grid; gap: 12px; margin-top: 18px; } .assistant-provider-option { display: grid; gap: 5px; width: 100%; padding: 16px; color: var(--text); text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; } .assistant-provider-option span { color: var(--muted); line-height: 1.45; } .assistant-provider-option:hover, .assistant-provider-option.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); } .assistant-security-note, .assistant-drawer-provider { display: grid; gap: 4px; padding: 14px 16px; background: color-mix(in srgb, var(--primary) 9%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: 14px; } .assistant-security-note span, .assistant-drawer-provider span { color: var(--muted); } .assistant-step-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; margin: 28px -28px -28px; padding: 18px 28px 24px; background: linear-gradient(transparent, var(--surface) 22%); } .assistant-step-actions .btn[hidden] { display: none !important; } .assistant-verify-step { padding-bottom: 104px; } .assistant-ready-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 30px auto 16px; color: #062a28; background: var(--primary); border-radius: 22px; font-size: 26px; font-weight: 900; } .assistant-verify-step { text-align: center; } .assistant-drawer-prompts { margin: 18px 0; } .assistant-drawer-messages { display: grid; gap: 10px; min-width: 0; margin-bottom: 18px; } .assistant-drawer-message { padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; } .assistant-drawer-message.user { margin-left: 36px; border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); } .assistant-drawer-message p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } .assistant-drawer-message h3 { margin: 10px 0 4px; font-size: .98rem; } .assistant-drawer-message ul { margin: 7px 0 0; padding-left: 20px; } .assistant-drawer-message li + li { margin-top: 5px; } .assistant-drawer-message .assistant-paragraph { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } .incident-evidence-details summary { cursor: pointer; color: var(--brand); font-weight: 700; } .incident-evidence-details pre { margin-top: 12px; max-height: 360px; overflow: auto; } .assistant-history-link { display: inline-block; margin-top: 18px; } .form-status.is-error { color: var(--danger-text); } .form-status.is-success { color: var(--success-text); } body.assistant-drawer-open { overflow: hidden; } @keyframes assistant-drawer-in { from { transform: translateX(30px); opacity: .7; } to { transform: translateX(0); opacity: 1; } } @media (max-width: 620px) { .incident-header-actions, .incident-header-actions .btn { width: 100%; } .incident-assistant-drawer { width: 100vw; border-left: 0; } .assistant-drawer-shell { padding: 0 18px 22px; } .assistant-drawer-header { margin-inline: -18px; padding-inline: 18px; } .assistant-step-actions { margin-inline: -18px; padding-inline: 18px; } .assistant-step-actions { flex-wrap: wrap; } .assistant-step-actions .btn { flex: 1 1 150px; min-width: 0; white-space: normal; } .assistant-drawer-message.user { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .incident-assistant-drawer[open] { animation: none; } } /* Keep long incident names readable at split-screen and mobile widths. */ .incident-title-row > :first-child { flex: 1 1 0; width: 100%; min-width: 0; } #incident-header h1 { width: 100%; min-width: 0; white-space: normal; word-break: normal; overflow-wrap: anywhere; } @media (max-width: 900px) { .incident-title-row { align-items: stretch; flex-direction: column; } .incident-header-actions { width: 100%; margin-bottom: 14px; justify-content: flex-start; } } @media (max-width: 520px) { #incident-header h1 { font-size: clamp(1.55rem, 8vw, 1.9rem); } .incident-header-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .incident-header-actions .btn { width: 100%; min-width: 0; white-space: normal; } } .assistant-advanced-options { margin: 16px 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; } .assistant-advanced-options summary { padding: 14px 16px; color: var(--text); font-weight: 750; cursor: pointer; } .assistant-advanced-options[open] summary { border-bottom: 1px solid var(--border); } .assistant-advanced-options > .stack { padding: 16px; } .assistant-connection-review { display: grid; gap: 0; margin: 20px 0; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .assistant-connection-review > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 12px 14px; border-top: 1px solid var(--border); } .assistant-connection-review > div:first-child { border-top: 0; } .assistant-connection-review dt { color: var(--text-faint); font-size: .72rem; font-weight: 750; text-transform: uppercase; } .assistant-connection-review dd { margin: 0; overflow-wrap: anywhere; } .assistant-connection-meta { display: grid; gap: 7px; margin: 8px 0; } .assistant-connection-meta span { display: flex; justify-content: space-between; gap: 16px; } .assistant-connection-meta strong { color: var(--text); } @media (max-width: 420px) { .assistant-connection-review > div { grid-template-columns: 1fr; gap: 4px; } .assistant-connection-meta span { display: grid; gap: 2px; } .assistant-step-actions .btn { flex-basis: 100%; width: 100%; } } .advanced-provider-divider { display: grid; gap: 3px; margin: 12px 0 0; padding-top: 18px; border-top: 1px solid var(--border); } .advanced-provider-divider span { color: var(--text-faint); font-size: .78rem; } .assistant-provider-option strong small { margin-left: 6px; padding: 3px 7px; color: var(--warning-text); background: var(--warning-bg); border-radius: 999px; font-size: .65rem; text-transform: uppercase; } .incident-app-name, .incident-check-name { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 900px) { .incident-app-name, .incident-check-name { display: block; } .incident-check-name { margin-top: 5px; color: var(--text-muted); font-size: .78em; line-height: 1.25; } .incident-title-separator { display: none; } .incident-title-meta > .muted { flex-basis: 100%; } } /* --- Android app-shell price gating (Google Play policy: no prices / no purchase or upgrade UI in-app; billing is web-only via Stripe). The `app-shell` class is set on by /js/app-shell.js when the WebView UA contains "CalmpingApp". These rules hide price/upgrade/checkout surfaces; page controllers also read window.__isAppShell for neutral copy. --- */ .app-shell [data-app-hide] { display: none !important; } .app-shell .pricing { display: none !important; } .app-shell .settings-tabs .tab[data-tab="billing"] { display: none !important; }