/* ═══════════════════════════════════════════
   CERAMIC — the Cue platform's Flow look, on the website.

   Loaded last on every page so cueaba.com matches the app: Cloud Dancer
   ground, Rubik, and the same tactile controls as the platform's
   globals.css ("FLOW PAGE TOOLBAR" and the shared button relief).

   Relief is subtle skeuomorphism, lit from above: a bright top rim, a faint
   lower edge and a soft cast shadow; pressed, a control sinks 1px. Every
   primary command is the muted orange (--accent-warm) with its warm brown
   ink (--on-accent). No strips down the side of cards.

   Source of truth: FLOW_DESIGN_SYSTEM.md and src/app/globals.css in
   StrideB/cue. Change the platform first, then mirror it here.
═══════════════════════════════════════════ */
@font-face{font-family:Rubik;src:url('/assets/rubik.woff2') format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:'DM Mono';src:url('/assets/dm-mono.woff2') format('woff2');font-display:swap}

:root{
  /* Ground and ink */
  --flow-bg:#EFEDE8;
  --flow-surface-strong:#FFFFFF;
  --flow-border-light:#E5E2DC;
  --flow-border:#DCD8D1;
  --flow-text:#24231E;
  --flow-muted:#5B584F;
  --flow-subtle:#67635A;
  --flow-blue:#2C5578;
  --flow-orange:#914814;
  /* Action */
  --accent-warm:#E8C7BA;
  --accent-press:#DEB5A5;
  --accent-edge:#A67B69;
  --on-accent:#594239;
  /* The site's older names for the same action pair */
  --action:#E8C7BA;
  --action-edge:#A67B69;
  --action-shade:#594239;
  --action-lip:rgba(255,255,255,.75);
  /* Relief, as the platform's --tb-* tokens */
  --tb-rim:rgba(255,255,255,.95);
  --tb-rim-soft:rgba(255,255,255,.55);
  --tb-lower:rgba(36,35,30,.07);
  --tb-cast:0 1px 1px rgba(36,35,30,.06),0 2px 5px -1px rgba(36,35,30,.10);
  --tb-cast-hi:0 1px 1px rgba(36,35,30,.07),0 4px 10px -2px rgba(36,35,30,.16);
  --tb-sunk:inset 0 1px 3px rgba(36,35,30,.14);
  --tb-well:inset 0 1px 2px rgba(36,35,30,.10),inset 0 0 0 1px rgba(36,35,30,.05),0 1px 0 rgba(255,255,255,.8);
  --tb-track:color-mix(in srgb,var(--flow-text) 7%,var(--flow-bg));
  --tb-raised-top:var(--flow-surface-strong);
  --tb-raised-bottom:color-mix(in srgb,var(--flow-surface-strong) 93%,var(--flow-bg));
  --tb-action-top:color-mix(in srgb,var(--accent-warm) 72%,#fff);
  --tb-action-bottom:color-mix(in srgb,var(--accent-warm) 82%,var(--accent-press));
  --tb-action-shadow:0 1px 1px rgba(89,66,57,.14),0 3px 8px -2px rgba(89,66,57,.28);
  --card-relief:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(36,35,30,.05),0 6px 16px -6px rgba(36,35,30,.10);
}

/* The wordmark: ink letters, the platform orange dot. */
a.logo,a.nav-logo{text-decoration:none!important;color:var(--flow-text)}
.logo span,.nav-logo span,.sub-logo span{color:var(--flow-orange)!important}

/* ── Primary: one orange action ── */
:is(.button.primary,.button.dark-button,.btn-primary,.nav-cta,.cta-btn,.signup-link.raised,.switch-banner-go,.nav-demo,a.cta.demo-link,.s-btn-1,.sys-btn:not(.ghost),.ziprow button,.plan-cta,.skip-tour,.download-link){
  background:linear-gradient(180deg,var(--tb-action-top),var(--tb-action-bottom))!important;
  color:var(--on-accent)!important;
  border:1px solid var(--accent-edge)!important;
  box-shadow:inset 0 1px 0 var(--action-lip),inset 0 -1px 0 rgba(89,66,57,.12),var(--tb-action-shadow)!important;
  text-shadow:none;
  transition:background .15s,box-shadow .15s,translate .1s,transform .1s;
}
:is(.button.primary,.button.dark-button,.btn-primary,.nav-cta,.cta-btn,.signup-link.raised,.switch-banner-go,.nav-demo,a.cta.demo-link,.s-btn-1,.sys-btn:not(.ghost),.ziprow button,.plan-cta,.skip-tour,.download-link) :is(svg,span,small){color:inherit}
:is(.button.primary,.button.dark-button,.btn-primary,.nav-cta,.cta-btn,.signup-link.raised,.nav-demo,a.cta.demo-link,.s-btn-1,.sys-btn:not(.ghost),.ziprow button,.plan-cta,.skip-tour,.download-link):hover{
  background:linear-gradient(180deg,var(--accent-warm),var(--accent-press))!important;
  color:var(--on-accent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(89,66,57,.14),0 1px 1px rgba(89,66,57,.16),0 5px 12px -3px rgba(89,66,57,.32)!important;
  transform:none;filter:none;
}
:is(.button.primary,.button.dark-button,.btn-primary,.nav-cta,.cta-btn,.signup-link.raised,.nav-demo,a.cta.demo-link,.s-btn-1,.sys-btn:not(.ghost),.ziprow button,.plan-cta,.skip-tour,.download-link):active{
  background:var(--accent-press)!important;
  box-shadow:inset 0 1px 3px rgba(89,66,57,.28),inset 0 -1px 0 rgba(255,255,255,.35)!important;
  translate:0 1px;transform:none;
}
:is(.button.primary,.button.dark-button,.btn-primary,.nav-cta,.cta-btn):focus-visible{outline:2px solid var(--flow-text);outline-offset:2px}

/* ── Neutral: raised, lit from above ── */
:is(.btn-ghost,.btn-secondary,.button:not(.primary):not(.dark-button),.tour-next,.story-play,.story-expand,.cue-lang-btn,.hero-trust,.sup-links a,.rcta-links a,.hero-play,.market-links a,.pick-row,.region-choices button,#device-region-dialog div button,.region-dialog button,.nav-lang,.s-btn-2,.cgd-btn,.sys-btn.ghost,.region-pick):not(.dark *,.dark,.on-dark *){
  background:linear-gradient(180deg,var(--tb-raised-top),var(--tb-raised-bottom))!important;
  color:var(--flow-text)!important;
  border:1px solid var(--flow-border)!important;
  box-shadow:inset 0 1px 0 var(--tb-rim),inset 0 -1px 0 var(--tb-lower),var(--tb-cast)!important;
  transition:box-shadow .15s,translate .1s;
}
:is(.btn-ghost,.btn-secondary,.button:not(.primary):not(.dark-button),.tour-next,.story-play,.story-expand,.cue-lang-btn,.hero-trust,.sup-links a,.rcta-links a,.hero-play,.market-links a,.pick-row,.region-choices button,#device-region-dialog div button,.region-dialog button,.nav-lang,.s-btn-2,.cgd-btn,.sys-btn.ghost,.region-pick):not(.dark *,.dark,.on-dark *):hover{
  box-shadow:inset 0 1px 0 var(--tb-rim),inset 0 -1px 0 var(--tb-lower),var(--tb-cast-hi)!important;
  transform:none;
}
:is(.btn-ghost,.btn-secondary,.button:not(.primary):not(.dark-button),.tour-next,.story-play,.story-expand,.cue-lang-btn,.hero-trust,.sup-links a,.rcta-links a,.hero-play,.market-links a,.pick-row,.region-choices button,#device-region-dialog div button,.region-dialog button,.nav-lang,.s-btn-2,.cgd-btn,.sys-btn.ghost,.region-pick):not(.dark *,.dark,.on-dark *):active{
  background:linear-gradient(180deg,var(--tb-raised-bottom),var(--tb-raised-top))!important;
  box-shadow:var(--tb-sunk),inset 0 -1px 0 var(--tb-rim-soft)!important;
  translate:0 1px;
}

/* ── Segmented: a recessed track, the chosen option stands up out of it ── */
.appearance,.role-pills,.toggle,.sg-toggle,.screen-switch{
  background:var(--tb-track)!important;
  border:0!important;
  box-shadow:var(--tb-well)!important;
  border-radius:12px;padding:3px;
}
.role-pills{border-radius:14px;padding:4px}
.appearance button,.role-pills button,.toggle button,.sg-toggle button,.screen-switch button{
  background:transparent!important;color:var(--flow-muted)!important;border:0!important;box-shadow:none!important;border-radius:9px;
}
.appearance button[aria-pressed=true],.role-pills button[aria-selected=true],.toggle button.on,.sg-toggle button.on,.screen-switch button[aria-pressed=true]{
  background:linear-gradient(180deg,var(--tb-raised-top),var(--tb-raised-bottom))!important;
  color:var(--flow-text)!important;
  box-shadow:inset 0 1px 0 var(--tb-rim),inset 0 -1px 0 var(--tb-lower),0 0 0 .5px rgba(36,35,30,.10),var(--tb-cast)!important;
}
.role-pills button small{color:var(--flow-subtle)!important}

/* ── Chips: raised; on = pressed in with the quiet informational tint ── */
.chat-feature-tabs button{
  background:linear-gradient(180deg,var(--tb-raised-top),var(--tb-raised-bottom))!important;
  color:var(--flow-text)!important;
  border:1px solid var(--flow-border)!important;
  box-shadow:inset 0 1px 0 var(--tb-rim),inset 0 -1px 0 var(--tb-lower),var(--tb-cast)!important;
}
.chat-feature-tabs button:hover{box-shadow:inset 0 1px 0 var(--tb-rim),inset 0 -1px 0 var(--tb-lower),var(--tb-cast-hi)!important}
.chat-feature-tabs button[aria-selected=true]{
  background:linear-gradient(180deg,color-mix(in srgb,var(--flow-blue) 15%,#fff),color-mix(in srgb,var(--flow-blue) 9%,#fff))!important;
  color:var(--flow-blue)!important;
  border-color:color-mix(in srgb,var(--flow-blue) 35%,var(--flow-border))!important;
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--flow-blue) 22%,transparent),0 1px 0 var(--tb-rim-soft)!important;
}
.chat-feature-tabs button span{color:var(--flow-subtle)!important}
.chat-feature-tabs button[aria-selected=true] span{color:var(--flow-blue)!important}

/* The current region stays pressed in, with the quiet informational tint. */
.market-links [aria-current]{
  background:linear-gradient(180deg,color-mix(in srgb,var(--flow-blue) 15%,#fff),color-mix(in srgb,var(--flow-blue) 9%,#fff))!important;
  color:var(--flow-blue)!important;text-decoration:none!important;
  border-color:color-mix(in srgb,var(--flow-blue) 35%,var(--flow-border))!important;
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--flow-blue) 22%,transparent),0 1px 0 var(--tb-rim-soft)!important;
}

/* ── Raised cards and tiles: lit rim, soft cast shadow ── */
:is(.tile,.wcard,.stepcard,.aba-card,.scard,.note-card,.sys-card,.ccard,.app-download-card,.plan,.finish-card,.roles .role,.state-grid a,.agencybox):not(.dark *){
  box-shadow:var(--card-relief)!important;
}
:is(a.tile,a.wcard,a.stepcard,.roles a.role,.state-grid a):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(36,35,30,.06),0 10px 22px -8px rgba(36,35,30,.16)!important}

/* Numbered steps in the guides: the action pair, not a loud orange. */
.step-num{background:var(--accent-warm)!important;color:var(--on-accent)!important;box-shadow:inset 0 1px 0 var(--action-lip),0 1px 2px rgba(89,66,57,.2)}
/* Guide breadcrumbs and eyebrows read as ink, as in the app. */
.crumb a{color:var(--flow-muted)!important}

/* ── Fields: a quiet well; selects are raised controls ── */
:is(input[type=text],input[type=email],input[type=tel],input[type=search],input[type=number],input:not([type]),textarea):not(.dark *){
  background:var(--flow-surface-strong);
  border:1px solid var(--flow-border);
  box-shadow:inset 0 1px 2px rgba(36,35,30,.08),0 1px 0 rgba(255,255,255,.8);
}
:is(input,textarea):focus-visible{outline:2px solid var(--flow-blue);outline-offset:1px}
select:not(.dark *,header *,nav *,.nav *,.nav-bar *){
  background-color:var(--flow-surface-strong);
  border:1px solid var(--flow-border);
  box-shadow:inset 0 1px 0 var(--tb-rim),inset 0 -1px 0 var(--tb-lower),var(--tb-cast);
}

/* ── Cards: full edge and soft relief, never a strip down the side ── */
:is(.callout,.story-example,.setup-session,.role-outcome,.t-note,.flow-principle,.bf-item){
  border:1px solid var(--flow-border)!important;
  border-radius:12px;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,#fff 93%,var(--flow-bg)));
  box-shadow:var(--card-relief);
}
:is(.flow-principle,.bf-item,.role-outcome,.story-example,.t-note){padding:14px 16px}

@media (prefers-reduced-motion:reduce){
  :is(.button,.btn,.nav-cta,.cta-btn,.tour-next,.story-play,.story-expand,.chat-feature-tabs button):active{translate:none}
}