/* How AI Search Works, From Prompt to Response Local preview styles. The page files carry no styling of their own. Tokens are lifted from the OppAlerts report app (/AI-Search-Visibility/static/style.css) so this reads as the same product. Light is the default; the system preference flips it to dark. There is no toggle, by design. */ :root, html[data-theme="light"] { color-scheme: light; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --color-bg: #FAFAF8; --color-card: #FFFFFF; --color-bg-alt: #F2F3F2; --color-border: #E1E4E2; --color-border-strong: #CBD1CE; --color-text: #14181A; --color-text-muted: #565F5E; --color-text-faint: #8B9391; --color-accent: #2F6F68; --color-accent-dark: #1D4842; --color-accent-pale: #E6EFEC; --color-notify: #E5484D; /* Sidebar follows the theme, matching the guide shell. */ --color-sidebar-bg: #F2F3F2; --color-sidebar-hover: #E9EBE9; --color-sidebar-active: #E6EFEC; --shadow-card: 0 4px 16px rgba(20, 24, 26, 0.07); /* Chat turn surfaces. The prompt sits a shade darker than the response. */ --prompt-bg: #E7EAE8; --prompt-edge: #D3D8D5; --response-bg: #F2F3F2; --response-edge: #E1E4E2; /* Code-block classes. Green, amber and purple reuse the report app's tier palette, which is already validated per theme. */ --green-bg: #DCF3E6; --green-edge: #2E7D46; --green-ink: #155A32; --blue-bg: #E1EAF6; --blue-edge: #2E639C; --blue-ink: #1B3F73; --amber-bg: #FBF0DC; --amber-edge: #AC6F26; --amber-ink: #8A5417; --purple-bg: #EEE3FA; --purple-edge: #7C4FA0; --purple-ink: #4B1A7E; --plain-bg: #F2F3F2; --plain-edge: #CBD1CE; /* Deliberately loud. Unmarked blocks are unfinished work and should be impossible to scroll past during a review. */ --red-bg: #FDE7E4; --red-edge: #E5484D; --red-ink: #A61508; --nav-w: 310px; --bar-h: 56px; } /* No explicit choice saved -> follow the system. An explicit choice writes data-theme on , and :not([data-theme]) steps aside for it. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --color-bg: #0E1416; --color-card: #1B2224; --color-bg-alt: #171D1F; --color-border: #2B3436; --color-border-strong: #414D4F; --color-text: #ECEFED; --color-text-muted: #A6AEAC; --color-text-faint: #74807D; --color-accent: #5CC2B3; --color-accent-dark: #7FDCC8; --color-accent-pale: rgba(92, 194, 179, 0.16); --color-notify: #FF6369; --color-sidebar-bg: #171D1F; --color-sidebar-hover: #202829; --color-sidebar-active: rgba(92, 194, 179, 0.16); --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.35); --prompt-bg: #232B2D; --prompt-edge: #333D3F; --response-bg: #171D1F; --response-edge: #2B3436; --green-bg: rgba(30, 132, 73, 0.22); --green-edge: #6FD695; --green-ink: #8FE3AE; --blue-bg: rgba(45, 99, 156, 0.24); --blue-edge: #5D9EE8; --blue-ink: #8FBEF0; --amber-bg: rgba(202, 111, 30, 0.18); --amber-edge: #DE9C42; --amber-ink: #E0A35C; --purple-bg: rgba(108, 52, 131, 0.28); --purple-edge: #B98BE8; --purple-ink: #CFA3E8; --plain-bg: #171D1F; --plain-edge: #414D4F; --red-bg: rgba(229, 72, 77, 0.20); --red-edge: #FF6369; --red-ink: #FF9B9E; } } html[data-theme="dark"] { color-scheme: dark; --color-bg: #0E1416; --color-card: #1B2224; --color-bg-alt: #171D1F; --color-border: #2B3436; --color-border-strong: #414D4F; --color-text: #ECEFED; --color-text-muted: #A6AEAC; --color-text-faint: #74807D; --color-accent: #5CC2B3; --color-accent-dark: #7FDCC8; --color-accent-pale: rgba(92, 194, 179, 0.16); --color-notify: #FF6369; --color-sidebar-bg: #090D0E; --color-sidebar-hover: #151B1C; --color-sidebar-active: #1D4842; --color-sidebar-text: #74807D; --color-sidebar-text-bright: #ECEFED; --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.35); --prompt-bg: #232B2D; --prompt-edge: #333D3F; --response-bg: #171D1F; --response-edge: #2B3436; --green-bg: rgba(30, 132, 73, 0.22); --green-edge: #6FD695; --green-ink: #8FE3AE; --blue-bg: rgba(45, 99, 156, 0.24); --blue-edge: #5D9EE8; --blue-ink: #8FBEF0; --amber-bg: rgba(202, 111, 30, 0.18); --amber-edge: #DE9C42; --amber-ink: #E0A35C; --purple-bg: rgba(108, 52, 131, 0.28); --purple-edge: #B98BE8; --purple-ink: #CFA3E8; --plain-bg: #171D1F; --plain-edge: #414D4F; --red-bg: rgba(229, 72, 77, 0.20); --red-edge: #FF6369; --red-ink: #FF9B9E; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; } /* ---------------------------------------------------------------- top bar */ /* Surface background and a hairline, matching the guide shell rather than the dark report chrome. Everything here is theme aware. */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--bar-h); background: var(--color-card); border-bottom: 1px solid var(--color-border); color: var(--color-text); display: flex; align-items: center; padding: 0 1.25rem; z-index: 50; } .topbar-left, .topbar-right { flex: 1 1 0; display: flex; align-items: center; gap: .75rem; min-width: 0; } .topbar-right { justify-content: flex-end; } /* Logo, ported from the report app's top bar. */ .brand { display: flex; align-items: center; gap: .625rem; text-decoration: none; color: var(--color-text); font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; white-space: nowrap; } .brand-mark { position: relative; width: 1.75rem; height: 1.75rem; flex-shrink: 0; background: linear-gradient(135deg, #0E3E3A 0%, #2F9E8F 100%); color: #FFF; border-radius: .25rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: .6875rem; font-weight: 600; } .brand-notify { position: absolute; top: -.3125rem; right: -.3125rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--color-notify); color: #FFF; font-family: var(--font-sans); font-size: .5625rem; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-card); } .brand-tag { font-family: var(--font-mono); font-size: .6875rem; font-weight: 400; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: .06em; border-left: 1px solid var(--color-border-strong); padding-left: .625rem; margin-left: .125rem; white-space: nowrap; text-decoration: none; } .topbar-title { flex: 0 1 auto; text-align: center; color: var(--color-text); text-decoration: none; font-weight: 650; font-size: .95rem; letter-spacing: -0.008em; line-height: 1.2; padding: 0 1rem; min-width: 0; } .topbar-title-sub { display: block; font-family: var(--font-mono); font-weight: 400; font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-faint); margin-top: .12rem; } /* Two-state theme toggle: sun means the page is light, moon means dark. The choice is written to and remembered. */ .theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0; cursor: pointer; background: none; border: 0; padding: 0; color: var(--color-text-muted); } .theme-toggle:hover { color: var(--color-text); } .theme-toggle svg { position: absolute; width: 100%; height: 100%; } html[data-theme="dark"] .icon-sun, html:not([data-theme="dark"]) .icon-moon { opacity: 0; } html[data-theme="dark"] .icon-moon, html:not([data-theme="dark"]) .icon-sun { opacity: 1; } /* Services call to action. Same treatment as the report buttons. */ .cta-btn { display: inline-block; padding: .48rem 1.05rem; background: var(--color-accent); color: var(--color-card); border-radius: 6px; font-size: .875rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .cta-btn:hover { filter: brightness(1.1); } .cta-btn-arrow { margin-left: .35rem; } .navtoggle { display: none; } /* ------------------------------------------------------------------- nav */ .sidebar { position: fixed; top: var(--bar-h); bottom: 0; left: 0; width: var(--nav-w); overflow-y: auto; background: var(--color-sidebar-bg); border-right: 1px solid var(--color-border); padding: 1.5rem 0 4rem; } /* Each part is walled off from the one above it: a rule across the nav, then a wide gap before the label. Without this the parts read as one long list. */ .nav-group + .nav-group { margin-top: 2.6rem; padding-top: 1.35rem; border-top: 1px solid var(--color-border-strong); } .nav-group-label { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--color-text-faint); font-weight: 600; padding: 0 1.25rem .65rem; } /* Items sit naturally: title, then description right under it, no reserved space between them. app.js measures the tallest item and gives every item that height, so the column stays a grid and the slack falls at the bottom of each item rather than as a hole in the middle. */ .nav-item { display: block; padding: .6rem 1.25rem .75rem; text-decoration: none; border-left: 3px solid transparent; } .nav-item:hover { background: var(--color-sidebar-hover); } .nav-item.is-active { background: var(--color-sidebar-active); border-left-color: var(--color-accent); border-radius: 0; } .nav-item-title, .nav-item-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .nav-item-title { font-size: .92rem; font-weight: 600; color: var(--color-text); line-height: 1.32; } .nav-item.is-active .nav-item-title { color: var(--color-accent-dark); } .nav-item-desc { font-size: .77rem; color: var(--color-text-muted); line-height: 1.38; margin-top: .18rem; } .nav-item-tag { display: inline-block; font-family: var(--font-mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; background: var(--color-bg-alt); border: 1px solid var(--color-border-strong); color: var(--color-text-faint); border-radius: 3px; padding: .05rem .32rem; margin-left: .3rem; vertical-align: 1px; white-space: nowrap; } /* ------------------------------------------------------------------ main */ .main { margin-left: var(--nav-w); padding: calc(var(--bar-h) + 1.5rem) 3rem 8rem; max-width: 1180px; } /* -------------------------------------------------- work-in-progress bar */ .wip { border: 1px solid var(--red-edge); border-radius: 6px; overflow: hidden; margin: 0 0 2.75rem; max-width: 78ch; } .wip-head { background: var(--color-notify); color: #FFF; padding: .7rem 1.25rem .75rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .85rem; } .wip-tag { font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; background: rgba(0, 0, 0, .25); border-radius: 3px; padding: .2rem .5rem; white-space: nowrap; } .wip-headline { font-size: 1.02rem; font-weight: 650; letter-spacing: -0.008em; } .wip-body { background: var(--red-bg); padding: 1.15rem 1.25rem 1.2rem; } .wip-body p { margin: 0 0 .8rem; font-size: .95rem; line-height: 1.6; color: var(--color-text); max-width: none; } .wip-body p:last-child { margin-bottom: 0; } .wip-body a { color: var(--color-notify); font-weight: 650; text-underline-offset: 2px; } /* ------------------------------------------------------------ page head */ .page-eyebrow { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--color-accent); font-weight: 600; margin: 0 0 .5rem; } h1 { font-size: 2.3rem; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .6rem; font-weight: 700; } .page-dek { font-size: 1.12rem; color: var(--color-text-muted); margin: 0 0 2.5rem; max-width: 62ch; } h2 { font-size: 1.5rem; margin: 2.6rem 0 .8rem; letter-spacing: -0.012em; } h3 { font-size: 1.22rem; margin: 2.1rem 0 .6rem; } h4 { font-size: 1.05rem; margin: 1.7rem 0 .5rem; } h5, h6 { font-size: .95rem; margin: 1.4rem 0 .4rem; } p { margin: 0 0 1rem; max-width: 74ch; } ul, ol { margin: 0 0 1rem; padding-left: 1.35rem; max-width: 74ch; } li { margin: .22rem 0; } a { color: var(--color-accent); } blockquote { margin: 1.2rem 0; padding: .1rem 0 .1rem 1.1rem; border-left: 3px solid var(--color-border-strong); color: var(--color-text-muted); } blockquote p { margin-bottom: .5rem; } hr { border: 0; border-top: 1px solid var(--color-border); margin: 2.4rem 0; } code { font-family: var(--font-mono); font-size: .86em; background: var(--color-bg-alt); border: 1px solid var(--color-border); padding: .06em .3em; border-radius: 3px; } .dead-link { color: var(--color-text-faint); text-decoration: line-through; text-decoration-color: var(--color-border-strong); } /* ---------------------------------------------------------------- tables */ .tablewrap { overflow-x: auto; margin: 1.2rem 0 1.6rem; } table { border-collapse: collapse; font-size: .88rem; min-width: 100%; } th { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-faint); font-weight: 600; border-bottom: 2px solid var(--color-border-strong); padding: .5rem .7rem; white-space: nowrap; vertical-align: bottom; } td { border-bottom: 1px solid var(--color-border); padding: .5rem .7rem; vertical-align: top; } tbody tr:nth-child(even) { background: var(--color-bg-alt); } /* ---------------------------------------------- context, summary, turn */ .context { background: var(--color-card); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: 4px; padding: 1.15rem 1.4rem .3rem; margin: 0 0 2.2rem; max-width: 78ch; box-shadow: var(--shadow-card); } .context-label, .box-label, .summary-label { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--color-text-faint); margin-bottom: .55rem; } .context-label { color: var(--color-accent); } .context p:last-child { margin-bottom: 1rem; } /* Sits between the context box and the prompt box. Deliberately unboxed, so it reads as article prose rather than a third card. */ .summary { margin: 0 0 2.6rem; padding-bottom: 2.2rem; border-bottom: 1px solid var(--color-border); max-width: 76ch; } .summary-label { margin-bottom: .9rem; } .summary p { font-size: 1.06rem; line-height: 1.68; color: var(--color-text-muted); margin-bottom: 1.05rem; } .summary p:last-child { margin-bottom: 0; } .summary strong { color: var(--color-text); } .summary h3 { font-size: 1.02rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.004em; margin: 2rem 0 .6rem; padding-left: .7rem; border-left: 3px solid var(--color-accent); } .summary h3:first-child { margin-top: 0; } .summary ul { font-size: 1.02rem; line-height: 1.6; color: var(--color-text-muted); margin-bottom: 1.05rem; padding-left: 1.15rem; } .summary li { margin: .35rem 0; } .summary li strong { color: var(--color-text); } .turn { margin-top: 1rem; } .box { border-radius: 6px; padding: 1.35rem 1.6rem; margin-bottom: 1.5rem; } .box-prompt { background: var(--prompt-bg); border: 1px solid var(--prompt-edge); } .box-response { background: var(--response-bg); border: 1px solid var(--response-edge); } .box > :last-child { margin-bottom: 0; } .box code { background: var(--color-card); } /* ----------------------------------------------------------- code blocks */ .cb { position: relative; margin: 1.15rem 0 1.5rem; border-radius: 5px; border: 1px solid; border-left-width: 5px; overflow: hidden; } .cb pre { margin: 0; padding: .95rem 1.1rem 1.05rem; overflow-x: auto; font-family: var(--font-mono); font-size: .8rem; line-height: 1.55; tab-size: 2; color: var(--color-text); } .cb pre code { background: none; border: 0; padding: 0; font-size: inherit; } .cb-tag { display: block; font-family: var(--font-mono); font-size: .63rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 650; padding: .38rem 1.1rem .3rem; border-bottom: 1px solid rgba(128, 128, 128, .22); } .cb-green { background: var(--green-bg); border-color: var(--green-edge); } .cb-green .cb-tag { color: var(--green-ink); } .cb-blue { background: var(--blue-bg); border-color: var(--blue-edge); } .cb-blue .cb-tag { color: var(--blue-ink); } .cb-amber { background: var(--amber-bg); border-color: var(--amber-edge); } .cb-amber .cb-tag { color: var(--amber-ink); } .cb-purple { background: var(--purple-bg); border-color: var(--purple-edge); } .cb-purple .cb-tag { color: var(--purple-ink); } /* Not a representation at all, such as the reflection prompt. Stays quiet. */ .cb-plain { background: var(--plain-bg); border-color: var(--plain-edge); border-left-style: dashed; } .cb-plain .cb-tag { color: var(--color-text-faint); } /* Unfinished. Quiet grey while the piece is public. */ .cb-unmarked { background: var(--plain-bg); border-color: var(--plain-edge); border-left-style: dashed; } .cb-unmarked .cb-tag { color: var(--color-text-faint); } /* The loud red version. Keep it: the red against this teal is worth reusing, and it is the right treatment during an internal review pass. Swap the two rule sets to turn it back on. .cb-unmarked { background: var(--red-bg); border-color: var(--red-edge); border-left-width: 6px; border-left-style: solid; } .cb-unmarked .cb-tag { background: var(--red-edge); color: #FFF; border-bottom-color: var(--red-edge); letter-spacing: .1em; } */ /* ------------------------------------------------------------ color key */ .key { margin: 1.5rem 0 2.5rem; } .key-row { display: flex; gap: 1rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px solid var(--color-border); } .key-chip { flex: 0 0 132px; font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 650; padding: .3rem .5rem; border-radius: 4px; border: 1px solid; border-left-width: 5px; text-align: center; } .key-green { background: var(--green-bg); border-color: var(--green-edge); color: var(--green-ink); } .key-blue { background: var(--blue-bg); border-color: var(--blue-edge); color: var(--blue-ink); } .key-amber { background: var(--amber-bg); border-color: var(--amber-edge); color: var(--amber-ink); } .key-purple { background: var(--purple-bg); border-color: var(--purple-edge); color: var(--purple-ink); } .key-plain { background: var(--plain-bg); border-color: var(--plain-edge); color: var(--color-text-faint); border-left-style: dashed; } .key-red { background: var(--plain-bg); border-color: var(--plain-edge); color: var(--color-text-faint); border-left-style: dashed; } .key-text { flex: 1; font-size: .93rem; } .key-text strong { display: block; } .key-text span { color: var(--color-text-muted); } /* -------------------------------------------------------------- notices */ .notice { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-left: 4px solid var(--amber-edge); border-radius: 4px; padding: 1rem 1.3rem; margin: 1.6rem 0; max-width: 78ch; } .notice p:last-child { margin-bottom: 0; } .notice-label { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 650; color: var(--amber-ink); margin-bottom: .4rem; } .pagenav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.4rem; border-top: 1px solid var(--color-border); font-size: .9rem; } .pagenav a { text-decoration: none; } .pagenav .pn-dir { display: block; font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-faint); } /* ------------------------------------------------------------ responsive */ .nav-scrim { display: none; } @media (max-width: 1000px) { .navtoggle { display: inline-block; background: none; border: 1px solid var(--color-border-strong); color: var(--color-text); border-radius: 4px; padding: .32rem .62rem; font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; } .sidebar { transform: translateX(-100%); transition: transform .2s ease; z-index: 40; box-shadow: var(--shadow-card); width: min(var(--nav-w), 86vw); } body.nav-open .sidebar { transform: translateX(0); } body.nav-open .nav-scrim { display: block; position: fixed; inset: var(--bar-h) 0 0 0; background: rgba(0, 0, 0, .45); z-index: 35; } .main { margin-left: 0; padding: calc(var(--bar-h) + 1.25rem) 1.5rem 6rem; } } @media (max-width: 760px) { :root { --bar-h: 52px; } /* The page H1 repeats the title two lines down, so the centre zone goes rather than wrapping across the bar. Menu, logo, toggle and the call to action are what have to survive. */ .topbar { padding: 0 .8rem; gap: .5rem; } .topbar-left { flex: 1 1 auto; gap: .55rem; } .topbar-right { flex: 0 0 auto; gap: .6rem; } .topbar-title { display: none; } .brand-tag { display: none; } .brand { font-size: .95rem; } .cta-btn { font-size: .8rem; padding: .42rem .75rem; } .main { padding: calc(var(--bar-h) + 1rem) 1.1rem 5rem; } h1 { font-size: 1.68rem; } .page-dek { font-size: 1rem; margin-bottom: 1.75rem; } h2 { font-size: 1.28rem; margin-top: 2.1rem; } h3 { font-size: 1.1rem; } body { font-size: 16px; } .context { padding: 1rem 1.1rem .3rem; } .box { padding: 1.05rem 1.1rem; } .summary p, .summary ul { font-size: 1rem; } .wip-head { padding: .65rem .95rem .7rem; } .wip-headline { font-size: .95rem; } .wip-body { padding: .95rem; } .wip-body p { font-size: .9rem; } .key-row { flex-direction: column; gap: .4rem; } .key-chip { flex: 0 0 auto; align-self: flex-start; } /* Long unbroken strings in the transcript, mostly URLs, would otherwise force the page itself to scroll sideways. */ p, li, td, th, blockquote, h1, h2, h3, h4, h5, h6, code { overflow-wrap: anywhere; } .cb pre { font-size: .72rem; padding: .8rem .85rem .9rem; } .cb-tag { font-size: .58rem; padding: .34rem .85rem .28rem; } table { font-size: .82rem; } td, th { padding: .42rem .5rem; } .pagenav { flex-direction: column; gap: 1.25rem; margin-top: 3rem; } .pagenav div { text-align: left !important; } } @media (max-width: 400px) { .main { padding-left: .85rem; padding-right: .85rem; } .box { padding: .9rem .85rem; } .brand span:not(.brand-mark):not(.brand-notify) { display: none; } .cta-btn { font-size: .76rem; padding: .4rem .6rem; } .cta-btn-arrow { display: none; } }