@font-face {
font-family: 'Schibsted Grotesk';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('./fonts/schibsted-grotesk-latin-400-700.woff2') format('woff2');
}
html,
body {
font-family: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 500;
font-display: swap;
src: url('./fonts/jetbrains-mono-latin-400-500.woff2') format('woff2');
}
.we {
font-size: 13px;
letter-spacing: 0;
}
.we,
.we * {
font-family: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.we .mono,
.we [style*="'JetBrains Mono'"] {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
}
.app-panes {
position: relative;
line-height: 1.45;
}
.app-center-pane {
position: relative;
}
.mobile-settings-button,
.mobile-activity-button {
display: none !important;
}
.mobile-nav-button,
.mobile-nav-close,
.mobile-nav-scrim {
display: none !important;
}
.mobile-nav-toggle {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.we :is(button, [role="button"], [role="tab"], [role="switch"], [role="radio"], [role="checkbox"], input, textarea, select) {
box-sizing: border-box;
min-height: 32px !important;
}
.we :is(button, [role="button"], [role="tab"], [role="switch"], [role="radio"], [role="checkbox"]) {
min-width: 32px !important;
}
@media (min-width: 901px) {
.we .app-panes > [data-cmp="nav-handle"],
.we .app-panes > [data-cmp="rail-handle"] {
width: 32px !important;
min-width: 32px !important;
margin-inline: -11.5px !important;
}
}
[data-cmp="btn-toast-undo"] {
flex-shrink: 0;
min-width: max-content !important;
padding-inline: 4px;
}
@media (min-width: 901px) and (max-width: 1440px) {
.app-panes > [data-cmp="nav-handle"],
.app-panes > [data-cmp="rail-handle"] {
display: none !important;
}
.we .app-panes > .app-nav-pane {
box-sizing: border-box;
display: flex !important;
width: 220px !important;
min-width: 220px !important;
padding: 10px !important;
}
.app-center-pane {
min-width: 380px !important;
}
.app-events-pane {
width: 300px !important;
min-width: 300px !important;
}
.app-plan-pane { position:absolute; z-index:24; inset:0 auto 0 220px; width:min(520px,calc(100% - 220px)); max-width:calc(100% - 220px); box-shadow:14px 0 36px rgba(0,0,0,.28); }
.app-plan-pane > [role="region"] {
box-sizing: border-box;
width: 100% !important;
}
[data-cmp="btn-saved-prompts"] {
width: 40px !important;
min-width: 40px !important;
flex-shrink: 0 !important;
justify-content: center !important;
gap: 0 !important;
padding: 0 !important;
font-size: 0 !important;
}
[data-cmp="btn-saved-prompts"] > span:not(:first-child) {
display: none !important;
}
}
@media (max-width: 1440px) {
.mobile-settings-button { position:absolute; top:7px; right:12px; z-index:12; display:inline-flex !important; width:40px; height:40px; }
.app-center-pane > [data-cmp="collab-strip"] { padding-right:64px !important; }
}
@media (min-width:901px) and (max-width:1059px){.app-plan-pane{right:0;width:auto;max-width:none}}
@media (max-width: 900px),
(max-width: 1440px) and (pointer: coarse),
(max-width: 1440px) and (hover: none) {
.mobile-settings-button {
width: 44px;
height: 44px;
}
.mobile-activity-button {
width: 44px;
height: 44px;
}
.app-center-pane > [data-cmp="collab-strip"] {
padding-right: 120px !important;
}
.we :is(button, [role="button"], [role="tab"], [role="switch"], [role="radio"], [role="checkbox"], input, textarea, select) {
box-sizing: border-box;
min-height: 44px !important;
}
.we :is(button, [role="button"], [role="tab"], [role="switch"], [role="radio"], [role="checkbox"]) {
min-width: 44px !important;
}
}
@media (max-width: 900px) {
.app-panes {
position: relative;
}
.app-center-pane {
box-sizing: border-box;
padding-top: 58px;
}
.app-plan-pane {
position: absolute;
z-index: 30;
inset: 0;
width: 100% !important;
max-width: 100%;
box-shadow: none;
}
.we .app-panes > .app-nav-pane {
position: absolute;
z-index: 32;
inset: 0 auto 0 0;
box-sizing: border-box;
display: none !important;
width: min(84vw, 320px) !important;
min-width: min(84vw, 320px) !important;
padding: 10px !important;
box-shadow: 14px 0 36px rgba(0, 0, 0, 0.28);
}
.we .app-panes > .mobile-nav-toggle:checked ~ .app-nav-pane {
display: flex !important;
}
.mobile-nav-button {
position: absolute;
top: 7px;
left: 12px;
z-index: 12;
display: inline-flex !important;
width: 44px;
height: 44px;
}
.mobile-activity-button {
position: absolute;
top: 7px;
right: 64px;
z-index: 12;
display: inline-flex !important;
width: 44px;
height: 44px;
}
.mobile-nav-close {
display: inline-flex !important;
width: 44px;
height: 44px;
margin-bottom: 4px;
}
.mobile-nav-scrim {
position: absolute;
z-index: 31;
inset: 0;
display: none !important;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: rgba(0, 0, 0, 0.38);
cursor: default;
}
.mobile-nav-toggle:checked ~ .mobile-nav-scrim {
display: block !important;
}
}
@media (max-width: 400px) {
.app-center-pane > [data-cmp="collab-strip"] > [data-cmp="btn-collab-toggle"] > span:last-child {
display: none !important;
}
}
@media (min-width: 901px) {
.app-nav-pane {
visibility: visible !important;
transform: none !important;
}
}
.app-nav-pane [data-cmp="btn-disclosure"]:focus-visible {
color: var(--link) !important;
opacity: 1 !important;
outline: 2px solid var(--accent);
outline-offset: 1px;
}
[data-cmp="settings-panel"] > [role="dialog"] {
width: min(820px, 96vw) !important;
}
[aria-label="Connect a source"]{max-height:calc(100vh - 32px);overflow-y:auto!important}
[data-cmp="settings-nav"] {
width: 204px !important;
gap: 4px !important;
padding-right: 14px;
border-right: 1px solid var(--border2);
}
/* DELIBERATELY NOT RETIRED, and the measurement is why. `settings-nav-group` carries NO inline
style in `project/App.dc.html` — the design source declares no typography for it at all, so there
is nothing to restore it TO and removing this block would be inventing a treatment rather than
recovering one. It is also younger than the reference screenshot: `runtime-ui.css` did not exist
at the 2026-07-11 export and `settings-nav-group` is absent from that seed entirely, so the
screenshot cannot adjudicate it (authority order: live code rank 1, screenshots rank 3 — the same
rule that stopped `Promote to intent →` being rebuilt from an image). This block is currently the
ONLY source of truth for this control; it stays, named as a divergence, until the design seat
declares one. */
[data-cmp="settings-nav"] > div {
margin-top: 8px;
padding: 10px 10px 4px !important;
color: var(--t-mid2) !important;
font-size: 14px !important;
letter-spacing: 0 !important;
}
.we [data-cmp="settings-nav-item"],
.we [data-cmp="settings-nav-group"] {
flex: 0 0 44px;
min-height: 44px !important;
height: 44px !important;
max-height: 44px !important;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 8px 11px !important;
border: 1px solid transparent;
border-radius: 6px !important;
/* font-size RETIRED 2026-09-20 — the design declares `font:500 11.5px 'Schibsted Grotesk'` on
settings-nav-item and the screenshot shows the items visibly smaller than the panel title. The
44px touch target above is KEPT: it is an accessibility floor, independent of type size, and
`verify-commercial-presentation` asserts it. */
}
.we [data-cmp="settings-nav-group"] {
color: var(--t-mid2) !important;
cursor: pointer;
font: 600 13px 'Schibsted Grotesk' !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.we [data-cmp="settings-nav-item"][aria-selected="true"] {
color: var(--text) !important;
background: var(--surface3) !important;
border-color: var(--border);
box-shadow: inset 3px 0 0 var(--accent);
font-weight: 600 !important;
}
.we [data-cmp="settings-nav-item"]:focus-visible,
[data-cmp="settings-panel"] [role="button"]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
[data-cmp="settings-sec"] {
padding-left: 4px;
}
/* TYPOGRAPHY RETIRED 2026-09-20 — the design source declares this element's treatment and this
block was overriding it. `project/App.dc.html` gives the section header
`font:600 9.5px 'Schibsted Grotesk'; letter-spacing:.06em; text-transform:uppercase`, which is
exactly what `project/screenshots/01-settings-interaction.png` shows for PROFILE. The 14px / 0 /
none forced here was a workaround for the build-time floors that deleted casing and tracking
product-wide (1,338 declarations per build) — once the floors are gone it is the override, not the
design, that diverges. Colour is kept: `--text` is a deliberate emphasis choice and the design's
`--t-faint` is the unemphasised variant used elsewhere. */
[data-cmp="settings-sec"] > div:first-child > span:first-child {
color: var(--text) !important;
}
@media (max-width: 640px) {
[data-cmp="settings-panel"] {
padding: 0 !important;
}
[data-cmp="settings-panel"] > [role="dialog"] {
box-sizing: border-box;
width: 100vw !important;
height: 100dvh !important;
max-width: none;
max-height: none;
border: 0 !important;
border-radius: 0 !important;
padding: 16px !important;
}
[data-cmp="settings-panel"] > [role="dialog"] > div:nth-child(3) {
flex-direction: column;
gap: 12px !important;
}
[data-cmp="settings-nav"] {
width: 100% !important;
max-height: none;
flex-direction: row !important;
align-items: center;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 0 0 10px;
border-right: 0;
border-bottom: 1px solid var(--border2);
}
[data-cmp="settings-nav"] > div {
display: none;
}
.we [data-cmp="settings-nav-group"] {
display: none !important;
}
.we [data-cmp="settings-nav-item"] {
flex: 0 0 auto;
min-height: 44px;
white-space: nowrap;
}
.we [data-cmp="settings-nav-item"][aria-selected="true"] {
order: -1;
}
[data-cmp="settings-sec"] {
padding-left: 0;
}
[data-cmp="settings-panel"] [data-cmp="btn-close"],
[data-cmp="settings-panel"] [data-cmp="btn-settings-invite"],
[data-cmp="settings-panel"] [data-cmp="btn-settings-connect"],
[data-cmp="settings-panel"] [data-cmp="btn-member-role"] {
min-width: 44px;
min-height: 44px;
box-sizing: border-box;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
[data-cmp="settings-panel"] button,
[data-cmp="settings-panel"] [role="button"],
[data-cmp="settings-panel"] [role="switch"],
[data-cmp="settings-panel"] [role="tab"] {
min-height: 44px !important;
box-sizing: border-box;
}
[data-cmp="settings-panel"] [aria-label^="Close"],
[data-cmp="settings-panel"] [title^="Close"] {
min-width: 44px !important;
}
[data-cmp="btn-saved-prompts"],
[data-cmp="btn-composer-send"],
.mobile-back-chat {
min-width: 44px !important;
min-height: 44px !important;
box-sizing: border-box;
}
[data-cmp="settings-sec"] > div:first-child {
flex-wrap: wrap;
}
}
@media (max-width: 420px) {
[data-composer-card] [data-cmp="btn-saved-prompts"] {
width: 44px !important;
max-width: 44px !important;
min-width: 44px !important;
padding: 0 !important;
gap: 0 !important;
justify-content: center;
overflow: hidden;
font-size: 0 !important;
}
[data-composer-card] [data-cmp="btn-saved-prompts"] > span:not(:first-child) {
display: none !important;
}
}