/* Website roles reference the installed ClearFrame 1.15.0 desktop palette. */
:root {
  --bg:var(--md-sys-color-background);--paper:var(--bg);
  --surface:var(--md-sys-color-surface-container-low);--white:var(--surface);
  --panel:var(--md-sys-color-surface-container);--panel2:var(--md-sys-color-surface-container-high);
  --text:var(--md-sys-color-on-surface);--ink:var(--text);
  --muted:var(--md-sys-color-on-surface-variant);
  --line:color-mix(in srgb,var(--md-sys-color-outline-variant) 50%,var(--bg));--border:var(--line);
  --blue:var(--cf-brand-blue-bright);--bright:var(--blue);--blue-dark:var(--cf-brand-blue-hover);
  /* The bright brand blue is a mark and accent colour: on the light surface it
     measures 3.8:1, which is legible as a rule, an icon or a 2px underline but
     not as text. Anything that renders blue *words* uses --cf-text-blue. */
  --cf-text-blue:var(--blue);
  --cf-on-accent:#071324;--cf-accent-soft:color-mix(in srgb,var(--blue) 9%,var(--surface));
  --cf-warm-soft:color-mix(in srgb,#d7ad62 8%,var(--surface));
  --cf-success-soft:color-mix(in srgb,var(--md-sys-color-success) 8%,var(--surface));
  --cf-violet-soft:color-mix(in srgb,#a58bdd 9%,var(--surface));--lavender:var(--cf-violet-soft);
  --cf-success:var(--md-sys-color-success);--cf-error:var(--md-sys-color-error);
  --cf-shadow-color:#00000018;--shadow:0 4px 24px var(--cf-shadow-color);
  color-scheme:dark;
}
:root[data-theme="light"] {
  --surface:var(--md-sys-color-surface-container-lowest);
  --blue:var(--cf-brand-blue-dim);--bright:var(--cf-brand-blue);--cf-on-accent:#fff;
  /* Blue text, measured against every surface it is drawn on. The first value
     tried, #0b6ed6, cleared the page background but measured 4.37:1 on the
     tinted --cf-accent-soft fill, which is where the iPhone beta tag and the
     workflow step numbers sit. #0a63b8 measures 4.9:1 on that fill, 5.7:1 on the
     page background, 6.0:1 on white and 5.6:1 on --cf-violet-soft, so one value
     covers every blue-text context. The bright blue stays for marks, borders and
     focus rings, where 3:1 is the bar. */
  --cf-text-blue:#0a63b8;
  --cf-shadow-color:#18233608;color-scheme:light;
}
html {background:var(--bg);color:var(--text);scroll-padding-top:110px}
body {background:var(--bg);color:var(--text);margin:0;-webkit-font-smoothing:antialiased}
*,*::before,*::after{box-sizing:border-box}
a{color:inherit}button,input,select,textarea{color:var(--text)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
::selection{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}
.cf-header{position:sticky;top:0;z-index:30;display:block;width:100%;padding:0;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(18px)}
.cf-nav{max-width:1360px;min-height:76px;margin:auto;padding:0 40px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px}
.cf-brand{display:inline-flex;align-items:center;gap:0;color:var(--text);font-size:var(--cf-type-xl);font-weight:var(--cf-weight-semibold);letter-spacing:-.8px;text-decoration:none;white-space:nowrap}
.cf-brand img{margin-right:10px}.cf-brand span{color:var(--cf-text-blue)}
.cf-primary-nav{display:flex;align-items:center;justify-content:center;gap:24px;min-width:0;align-self:stretch}
.cf-primary-nav a{position:relative;display:flex;align-items:center;min-height:44px;color:var(--muted);font-size:var(--cf-type-s);font-weight:var(--cf-weight-medium);text-decoration:none;white-space:nowrap}
.cf-primary-nav a:hover,.cf-primary-nav a[aria-current]{color:var(--cf-text-blue)}
.cf-primary-nav a[aria-current]::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--blue);border-radius:2px}
.cf-nav-actions{display:flex;align-items:center;gap:10px}
.cf-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cf-store-nav{display:flex;gap:24px;align-items:center;min-height:54px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.cf-store-nav strong{color:var(--text);margin-right:auto;font-weight:var(--cf-weight-semibold)}
.cf-store-nav a{text-decoration:none;padding:12px 0}.cf-store-nav a:hover{color:var(--cf-text-blue)}
/* Shared component language while retaining each page's useful layout. */
/* The one button system, modelled on shadcn/ui's Button (base-nova): borderless
   filled variants, a quiet tinted secondary, a ghost that only appears on hover,
   no focus ring and a 1px press. Every page loads this file through
   clearframe.css, so a .button looks the same wherever it appears; pages may change
   width and layout but not size, colour or state styling.
   Hierarchy (one primary per view): .primary (shadcn default), .secondary (the
   default here), .subtle (shadcn ghost); .outline is the bordered alternative.
   Sizes: .large (L), default (M), .small (S), .xsmall (XS). .obs-button is the
   Observatory's spelling of the same thing. */
.button,.obs-button,.cf-account{--btn-bg:var(--panel);--btn-fg:var(--text);--btn-border:transparent;--btn-hover-bg:color-mix(in srgb,var(--panel),var(--text) 5%);--btn-h:40px;--btn-px:20px;--btn-fs:16px;--btn-gap:8px;--btn-radius:2px;--btn-icon:16px;display:inline-flex;flex:none;align-items:center;justify-content:center;gap:var(--btn-gap);box-sizing:border-box;height:var(--btn-h);min-height:var(--btn-h);padding:0 var(--btn-px);border:1px solid var(--btn-border);border-radius:var(--btn-radius);background:var(--btn-bg);background-clip:padding-box;color:var(--btn-fg)!important;font-size:var(--btn-fs);font-weight:500;line-height:1.25;white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;outline:none;transition:background-color .15s,border-color .15s,box-shadow .15s,transform .15s}
.button:hover,.obs-button:hover,.cf-account:hover{--btn-bg:var(--btn-hover-bg)}
.button:active,.obs-button:active,.cf-account:active{transform:translateY(1px)}
.button:focus-visible,.obs-button:focus-visible,.cf-account:focus-visible{outline:none}
/* Primary */
.button.primary,.obs-button:not(.obs-secondary,.subtle,.outline){--btn-bg:var(--blue);--btn-fg:var(--cf-on-accent);--btn-hover-bg:color-mix(in srgb,var(--blue) 82%,var(--text))}
/* Primary, bevelled like the logo mark: the face is transparent, so it
   shows the page; pale top and right edges, blue left and bottom. */
.button.primary{--btn-bg:transparent;--btn-fg:var(--text);--btn-hover-bg:color-mix(in srgb,var(--text) 6%,transparent);border-color:#b3cdee #b3cdee #28b5f4 #28b5f4}
.button.primary:hover{border-color:#dceaf9 #dceaf9 #5cc8f7 #5cc8f7}
:root:not([data-theme=dark]) .button.primary{border-color:#7fb0ee #7fb0ee #087cff #087cff}
:root:not([data-theme=dark]) .button.primary:hover{border-color:#5a9bea #5a9bea #0752e7 #0752e7}
.button.primary:focus-visible{outline:2px solid #5cc8f7;outline-offset:3px}
/* Outline: same weight as secondary, with a border. */
.button.outline,.obs-button.outline{--btn-bg:var(--surface);--btn-border:var(--line);--btn-hover-bg:var(--panel)}
/* Subtle: no container until hovered. */
.button.subtle,.obs-button.subtle{--btn-bg:transparent;--btn-fg:var(--muted);--btn-hover-bg:var(--panel)}
.button.subtle:hover,.obs-button.subtle:hover{--btn-fg:var(--text)}
/* Sizes */
.button.large,.obs-button.large{--btn-h:48px;--btn-px:24px;--btn-fs:18px;--btn-icon:18px}
.button.small,.obs-button.small{--btn-h:32px;--btn-px:16px;--btn-fs:14px;--btn-icon:14px;--btn-radius:2px}
.button.xsmall,.obs-button.xsmall{--btn-h:28px;--btn-px:12px;--btn-fs:12px;--btn-icon:12px;--btn-radius:2px}
.button.icon,.obs-button.icon{width:var(--btn-h);padding:0}
.cf-account,.cf-theme-toggle{--btn-h:32px;--btn-px:16px;--btn-fs:14px;--btn-icon:14px;--btn-radius:2px}
.cf-theme-toggle{--btn-icon:18px}
:root[data-theme=dark] .cf-icon-sun,:root:not([data-theme=dark]) .cf-icon-moon{display:none}
.button svg,.obs-button svg,.cf-account svg{flex:none;display:block;width:var(--btn-icon);height:var(--btn-icon);pointer-events:none}
/* Optional icons, shadcn's data-icon slots: <span data-icon="inline-start"> before the
   label, <span data-icon="inline-end"> after it. The slot takes the size's icon size
   (an svg or a glyph such as an arrow) and the padding on its side shrinks by 2px so
   the icon sits optically level with the label. */
.button [data-icon],.obs-button [data-icon],.cf-account [data-icon]{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--btn-icon);height:var(--btn-icon);font-size:var(--btn-icon);line-height:1;pointer-events:none}
.button:has(>[data-icon=inline-start]),.obs-button:has(>[data-icon=inline-start]),.cf-account:has(>[data-icon=inline-start]){padding-left:calc(var(--btn-px) - 2px)}
.button:has(>[data-icon=inline-end]),.obs-button:has(>[data-icon=inline-end]),.cf-account:has(>[data-icon=inline-end]){padding-right:calc(var(--btn-px) - 2px)}
.button:disabled,.button[aria-disabled=true],.obs-button:disabled,.cf-account:disabled{opacity:.5;pointer-events:none}
.button[aria-busy=true]{cursor:progress}
@media(pointer:coarse){.button,.obs-button{height:auto;min-height:44px}}
@media(prefers-reduced-motion:reduce){.button,.obs-button{transition:none}.button:active,.obs-button:active{transform:none}}
.brand{color:var(--text)}.brand span{color:var(--cf-text-blue)}
.store-hero{background:var(--panel);border-color:var(--line);border-radius:20px}
.hero-copy h1{font-weight:600!important;letter-spacing:-.045em!important;line-height:1.06!important}
.store-eyebrow,.eyebrow,.result-kicker{color:var(--muted)}
.orbit,.app-icon,.detail-icon,.outcome-rail>img{background:#fff!important;border-color:#e7e8f1!important}
:root[data-theme="dark"] .store-search>img{filter:invert(1)}
dialog{background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:0 24px 80px #0004}
dialog::backdrop{background:#0008}
#account-dialog input{background:var(--bg);color:var(--text);border-color:var(--line)}
#agent-prompt,#file-editor{color:var(--text)}
/* Compact account and private data views share the same outer shell. */
.cf-account-page main{max-width:460px;margin:64px auto;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.cf-account-page main>header{font-size:var(--cf-type-xl);margin-bottom:32px}
.cf-account-page input{background:var(--bg);color:var(--text);border-color:var(--line)}
.cf-account-page main button{background:var(--blue);color:var(--cf-on-accent)}
.cf-account-page main button.quiet{background:transparent;color:var(--muted)}
.cf-account-page .balance{color:var(--text)}
body.cf-dashboard{max-width:none;margin:0;padding:0}
.cf-dashboard-content{max-width:1200px;margin:48px auto;padding:0 40px}
.cf-dashboard-content>header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.cf-dashboard .card{background:var(--surface);border-color:var(--line);box-shadow:none}
.cf-dashboard .value{color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.cf-dashboard .muted,.cf-dashboard small{color:var(--muted)}
.cf-dashboard a:not(.cf-brand):not(.cf-account):not(.cf-primary-nav a){color:var(--cf-text-blue)}
.cf-dashboard #refresh{background:var(--blue);color:var(--cf-on-accent);border-color:var(--blue)}
.cf-dashboard #refresh:hover:not(:disabled){background:var(--blue-dark)}
.cf-dashboard #refresh[aria-busy=true]{background:var(--cf-accent-soft);color:var(--cf-text-blue)}
.cf-dashboard select{background:var(--surface);border-color:var(--line)}
.cf-dashboard #error{color:var(--cf-error)}
.cf-dashboard table{display:block;overflow-x:auto;white-space:nowrap;font-size:13px}
.cf-dashboard td,.cf-dashboard th,.cf-dashboard footer{border-color:var(--line)}
body.cf-privacy{max-width:none;margin:0;padding:0}.cf-privacy main{max-width:760px;margin:60px auto;padding:0 28px 48px}.cf-privacy p{line-height:1.75;color:var(--muted)}.cf-privacy h2{margin-top:36px}
@media(max-width:1080px){.cf-nav{gap:20px;padding-inline:24px}.cf-primary-nav{gap:16px}}
@media(max-width:850px){.cf-nav{grid-template-columns:1fr auto;gap:0 12px;padding:12px 20px 0}.cf-primary-nav{grid-row:2;grid-column:1/-1;justify-content:flex-start;gap:24px;overflow-x:auto;min-height:48px}.cf-nav-actions{grid-column:2;grid-row:1}.cf-primary-nav a{flex:none}.cf-brand{font-size:20px}.cf-dashboard-content{padding:0 20px;margin-top:28px}html{scroll-padding-top:132px}.cf-account-page main{margin:28px auto;max-width:calc(100% - 32px)}.cf-dashboard section.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.cf-dashboard .card{padding:16px}.cf-dashboard .value{font-size:30px}}
@media(max-width:380px){.cf-nav{padding-inline:14px}.cf-brand{font-size:18px}.cf-brand img{width:25px;height:25px;margin-right:6px}.cf-nav-actions{gap:6px}.cf-dashboard section.cards{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
.launch-hero h1{font-size:clamp(42px,4.6vw,68px)!important;line-height:1.06!important;letter-spacing:-.045em!important;font-weight:600!important}
.cf-header .cf-nav{display:grid;align-items:center;flex-wrap:nowrap}
@media(max-width:600px){.cf-primary-nav{flex-wrap:wrap;gap:0 20px;overflow:visible;padding:4px 0}.cf-primary-nav a{min-height:34px}.cf-primary-nav a[aria-current]::after{bottom:2px}html{scroll-padding-top:158px}}