/* V8: deliberate motion, accessible controls, and shared website / event views. */
:root { --ease-out: cubic-bezier(.22,.8,.25,1); }
html { -webkit-text-size-adjust:100%; }
body { padding-bottom:env(safe-area-inset-bottom); }
button, select, summary { -webkit-tap-highlight-color:transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid #08789c; outline-offset:3px; }
.experience { isolation:isolate; }
.experience::after { content:''; position:absolute; z-index:10; top:0; left:0; right:0; height:3px; transform:scaleX(var(--tour-progress,0)); transform-origin:left; background:var(--dawn); transition:transform .5s var(--ease-out); pointer-events:none; }
.browser-workspace,.ticket-main { transition-duration:.42s; transition-timing-function:var(--ease-out); }
.reveal { animation:premium-reveal .36s var(--ease-out) both; }
.context-change .guidance-card,.context-change .answer-card { animation:premium-reveal .4s var(--ease-out) both; }
.panel-opened .guidance-card { animation:premium-reveal .4s .08s var(--ease-out) both; }
.answer-card { animation-delay:.1s; }
.action-list li,.summary-row { animation:premium-line .32s calc(.05s + var(--order)*.07s) var(--ease-out) both; }
.context-change .ticket-thread::after { animation-duration:.65s; opacity:.5; }
.guide-nexie,.impact-nexie { animation:none; }
.panel-opened .guide-nexie { animation:nexie-pop .55s var(--ease-out) both; }
.browser[data-open="false"] .opening-cue { animation:cue-bob 2.2s .5s 3; }
.assist-brand::after { animation-iteration-count:2; animation-duration:3s; }
.primary { transition:box-shadow .2s,background .2s,transform .2s; box-shadow:0 3px 12px #a7781718; }
@media(hover:hover) { .primary:hover { box-shadow:0 6px 18px #a7781729; transform:translateY(-1px); } }
.primary:active { transform:translateY(1px); }
.guide-copy { padding-right:20px; }
.guide-controls .back { position:static; align-self:flex-start; }
.guide-controls { display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:4px; min-width:185px; }
.guide-controls .step-dots { grid-column:1/-1; justify-self:end; }
.guide-controls .primary { grid-column:2; }
.guide-controls .back { grid-column:1; align-self:center; }
.experience[data-stage="0"] .guide-controls { display:block; }
.tour-steps button,.experience-actions .quiet,.choices button,.try-another,.summary-heading .quiet,.source-button,.assist-tabs button,.impact-links .quiet { min-height:44px; }
.tour-steps button { font-size:13px; padding:7px 10px; }
.tour-steps button>span { width:19px; height:19px; font-size:11px; }
.experience-actions .quiet { font-size:12px; padding-inline:5px; }
.choices button,.source-button,.assist-tabs button>span,.summary-heading .quiet,.wrapup-card .quiet,.try-another { font-size:14px; }
.extension-button { width:44px; height:44px; }
.toolbar { height:56px; }
.sidepanel-title { height:44px; font-size:12px; }
.sidepanel-title button,.knowledge-topbar button { min-width:44px; min-height:44px; }
.panel-kicker,.card-eyebrow,.wrapup-card .summary-heading .card-eyebrow,.guide-label { font-size:12px; letter-spacing:.04em; }
.panel-kicker,.panel-footnote { color:#5a7382; }
.action-list li,.summary-row p,.wrapup-card .summary-row p,.followup-field>p,.wrapup-card .edited-draft { font-size:14px; line-height:1.5; }
.wrapup-field-label label,.followup-field>label,.followup-label { font-size:14px; }
.summary-row>span,.disposition-field>p,.wrapup-field-label>span,.human-review,.wrapup-card .human-review { font-size:12px; }
.disposition-field select,.followup-field input,#draft-text { font-size:16px; min-height:44px; }
.followup-field p { overflow-wrap:anywhere; }
.summary-heading { flex-wrap:wrap; }
.summary-heading .quiet { margin-left:auto; }
.wrapup-card textarea,#draft-text { min-height:120px; max-height:240px; }
.guide-copy>p:last-child { font-size:14px; }
.guide-controls .back { min-height:44px; font-size:14px; padding:8px 4px; }
.dialog-open { overflow:hidden; }
.source-dialog { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; max-height:calc(100svh - 32px); }
.source-dialog::backdrop,.idle-dialog::backdrop { background:#00182dcc; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.knowledge-document p,.knowledge-procedure h4,.knowledge-document h3,.source-takeaway p { font-size:14px; }
.knowledge-meta,.knowledge-sample,.passage-label,.knowledge-related,.knowledge-related strong,.knowledge-meta small { font-size:12px!important; }
.knowledge-document h2 { font-size:28px; }
.knowledge-topbar>span { font-size:12px; }
.impact-input label,.impact-scenarios legend,.impact-heading>div>p:last-child { font-size:14px; }
.impact-result-label,.estimate-note,.impact-comparison>div:not(.impact-track),.impact-comparison b,.impact-footer details,.impact-footer details p,.impact-product,.impact-scenarios button>span,.impact-total>p { font-size:12px; }
.impact-input input[type=range] { height:44px; margin-block:4px 0; }
.impact-input input[type=range]::-webkit-slider-thumb { min-width:26px; min-height:26px; }
.impact-input input[type=range]::-moz-range-thumb { width:26px; height:26px; }
.impact-footer summary,.below-experience summary { min-height:44px; padding-block:10px; }
.impact-total>div>strong { letter-spacing:-.035em; }
.impact-updated .impact-total>div>strong { animation:premium-number .28s var(--ease-out); }
.draft-transferred .note-transfer { animation-duration:.8s; }
.browser[data-stage="4"] .ticket-app #record-copy { animation-duration:.36s; animation-delay:.15s; }
.browser[data-stage="4"][data-open="true"] .ticket-app .crm-record { animation:record-confirm .8s var(--ease-out) both; }
.complete-benefits>span { animation:premium-line .3s var(--ease-out) both; }
.complete-benefits>span:nth-child(2) { animation-delay:.09s; }
.complete-benefits>span:nth-child(3) { animation-delay:.18s; }
@keyframes premium-reveal { from { opacity:.35; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes premium-line { from { opacity:0; transform:translateX(5px); } to { opacity:1; transform:none; } }
@keyframes premium-number { from { opacity:.65; transform:translateY(3px); } to { opacity:1; transform:none; } }
@keyframes record-confirm { 0% { box-shadow:inset 3px 0 #78aa8c; background:#e2f3e8; } 100% { box-shadow:inset 0 0 transparent; background:#f3faf6; } }

/* Keep the product readable on tablets; metadata yields space to the live interaction. */
@media(min-width:621px) and (max-width:1180px) {
  .browser[data-open="true"] .ticket-main { grid-template-columns:minmax(0,1fr) 0px; }
  .browser[data-open="true"] .ticket-properties { display:none; }
  .browser[data-open="true"] .browser-workspace { grid-template-columns:minmax(0,1fr) minmax(365px,47%); }
  .browser[data-open="true"] .assist-panel>* { min-width:0; }
  .browser[data-open="true"] .crm.ticket-app { min-height:0; }
  .browser[data-open="true"] .ticket-app .crm-record>div.record-outcome { display:flex; padding:0 16px 9px; }
  .ticket-app .conversation>p { font-size:14px; }
  .guide-bar { padding:15px 20px; min-height:102px; }
  .guide-nexie { width:48px; height:56px; }
  .guide-copy h2 { font-size:23px; }
  .guide-copy { padding:0; }
  .guide-controls { min-width:190px; }
  .choice-heading>span:last-child { display:none; }
}
@media(min-width:621px) and (max-width:900px) {
  .experience-bar { flex-wrap:wrap; gap:2px; padding:4px 12px; }
  .experience-actions { margin-left:auto; }
  .tour-steps button { font-size:12px; padding-inline:7px; }
  .browser[data-open="true"] .browser-workspace { grid-template-columns:minmax(0,1fr) minmax(345px,49%); }
  .assist-scroll { padding:14px; }
  .guide-copy h2 { font-size:21px; }
  .choices button { padding-inline:12px; }
  .try-options { gap:10px; }
  .choice-heading { font-size:10px; }
}
@media(max-width:620px) {
  .page-intro h1>span { white-space:normal; }
  .experience-bar { padding:4px 9px; gap:0; }
  .tour-steps { flex:1; }
  .tour-steps button { font-size:12px; padding:5px 6px; gap:4px; }
  .tour-steps button>span { width:17px; height:17px; font-size:10px; }
  .experience-actions { gap:6px; }
  .experience-actions .quiet { font-size:12px; }
  .tour-steps:not([hidden])~.experience-actions #motion-toggle { font-size:17px; width:44px; }
  .tour-steps:not([hidden])~.experience-actions #restart { font-size:0; width:44px; }
  .tour-steps:not([hidden])~.experience-actions #restart::after { content:'↺'; font-size:23px; }
  .try-options { padding:0 11px 9px; }
  .choice-heading { font-size:11px; }
  .choices button { font-size:13px; min-height:44px; padding-inline:7px; }
  .toolbar { height:54px; }
  .sidepanel-title,.browser[data-open="true"] .sidepanel-title { height:44px; }
  .sidepanel-title { font-size:12px; }
  .assist-brand { min-height:52px; }
  .guide-bar { padding:13px 16px; }
  .guide-label { font-size:11px; }
  .guide-copy h2,.experience[data-stage="4"] .guide-copy h2 { font-size:23px; }
  .guide-copy>p:last-child,.experience[data-stage="4"] .guide-copy>p:last-child { font-size:14px; }
  .guide-controls { display:flex; min-width:0; margin-top:7px; gap:9px; }
  .primary { font-size:14px; min-height:48px; padding:10px 13px; }
  .guide-controls .back { font-size:13px; }
  .step-dots { display:none!important; }
  .guide-controls>.primary { margin-left:auto; }
  .disposition-field select { font-size:16px; min-height:44px; }
  .wrapup-card .summary-row p,.followup-field p { font-size:14px; }
  .wrapup-card .summary-heading .card-eyebrow { font-size:11px; }
  .wrapup-card .quiet { font-size:13px; }
  .source-button { font-size:14px; }
  .assist-tabs button>span { font-size:14px; }
  .knowledge-topbar { padding:7px 12px; }
  .knowledge-topbar>span { font-size:11px; }
  .knowledge-document { padding-inline:18px; }
  .knowledge-document h2 { font-size:25px; }
  .impact-heading h2 { font-size:27px; }
  .impact-links { flex-wrap:wrap; }
  .impact-links .primary,.impact-links .quiet { font-size:14px; min-height:48px; }
  .impact-scenarios button>span { font-size:12px; }
  .impact-result-label { font-size:11px; }
  .below-experience { font-size:12px; }
  .ticket-app .record-followup>p,.browser[data-stage="4"] .ticket-app #record-copy { font-size:12px!important; }
}
@media(max-width:360px) {
  .tour-steps button { font-size:11px; padding-inline:4px; gap:3px; }
  .tour-steps button>span { display:none; }
  .guide-copy h2,.experience[data-stage="4"] .guide-copy h2 { font-size:21px; }
  .guide-controls .primary { white-space:normal; text-align:center; }
}

/* The host page supplies the marketing introduction in embed mode. */
html[data-mode="embed"] body { background:transparent; padding:0; }
html[data-mode="embed"] .site-header,html[data-mode="embed"] .page-intro,html[data-mode="embed"] footer { display:none; }
html[data-mode="embed"] main { max-width:none; padding:4px; }
html[data-mode="embed"] .experience { box-shadow:none; }
html[data-mode="embed"] .guide-bar { position:relative; }
html[data-mode="embed"] .below-experience { margin:12px 10px 0; }

/* Event mode: shared iPad session, same product story, no outbound navigation. */
.event-reset { color:#fff; border:1px solid #ffffff70; border-radius:8px; background:transparent; min-height:44px; padding:8px 16px; font-size:14px; }
.event-reset:hover { background:#ffffff12; }
html[data-mode="event"] .site-header { position:sticky; top:0; z-index:30; height:60px; padding:0 max(18px,env(safe-area-inset-left)); }
html[data-mode="event"] .header-note,html[data-mode="event"] .page-intro,html[data-mode="event"] footer { display:none; }
html[data-mode="event"] main { padding:12px max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left)); }
html[data-mode="event"] .experience { box-shadow:0 8px 32px #0025460b; }
html[data-mode="event"] .browser-workspace,html[data-mode="event"] .crm.ticket-app { min-height:0; }
html[data-mode="event"] .ticket-main,html[data-mode="event"] .browser[data-open="true"] .ticket-main { grid-template-columns:minmax(0,1fr) 0px; }
html[data-mode="event"] .ticket-properties,html[data-mode="event"] .customer-context { display:none; }
html[data-mode="event"] .thread-date,html[data-mode="event"] .thread-event { display:none; }
html[data-mode="event"] .ticket-thread { min-height:100px; padding-top:6px; }
html[data-mode="event"] .experience,html[data-mode="event"] .impact-explorer { scroll-margin-top:72px; }
html[data-mode="event"] .sidepanel-title,html[data-mode="event"] .panel-kicker,html[data-mode="event"] .panel-footnote { display:none; }
html[data-mode="event"] .wrapup-complete .panel-kicker { display:block; }
html[data-mode="event"] .assist-scroll { min-height:0; padding:14px; }
html[data-mode="event"] .assist-brand { padding:8px 16px; min-height:52px; }
html[data-mode="event"] .browser[data-open="true"] .assist-panel>* { min-width:0; }
html[data-mode="event"] .browser[data-open="false"] .browser-workspace { min-height:380px; }
html[data-mode="event"] .browser[data-open="true"] .crm-record>div.record-outcome { display:flex; padding:0 16px 9px; }
html[data-mode="event"] .guide-bar { min-height:96px; padding:13px 20px; }
html[data-mode="event"] .guide-nexie { width:48px; height:56px; }
html[data-mode="event"] .guide-copy h2 { font-size:25px; }
html[data-mode="event"] .below-experience { margin:10px 7px 0; font-size:12px; }
html[data-mode="event"] .wrapup-card { padding:12px 14px; }
html[data-mode="event"] .wrapup-card .summary-row { padding:6px 0; }
html[data-mode="event"] .wrapup-card .disposition-field { margin-top:8px; padding-top:9px; }
html[data-mode="event"] .wrapup-card .followup-field { margin-top:9px; }
html[data-mode="event"] .wrapup-card .human-review { margin-top:10px; padding:8px; }
.idle-dialog { max-width:440px; width:calc(100% - 36px); color:var(--navy); border:1px solid #d8e2e6; border-radius:18px; padding:30px; box-shadow:0 20px 80px #00142740; }
.idle-dialog h2 { font-size:32px; margin:4px 0 12px; }
.idle-dialog>p:not(.eyebrow) { font-size:16px; color:#506a7c; }
.idle-dialog>div { display:flex; flex-direction:column; gap:8px; margin-top:24px; }
.idle-dialog .quiet { font-size:14px; min-height:44px; }
@media(min-width:621px) and (max-height:850px) {
  html[data-mode="event"] .experience-bar { min-height:44px; padding-block:0; }
  html[data-mode="event"] .try-options { min-height:52px; padding:0 14px 8px; }
  html[data-mode="event"] .choice-heading>span:last-child { display:none; }
  html[data-mode="event"] .tabstrip { height:28px; }
  html[data-mode="event"] .browser-tab { min-height:24px; padding-block:3px; }
  html[data-mode="event"] .toolbar { height:50px; }
  html[data-mode="event"] .guide-bar { min-height:90px; }
  html[data-mode="event"] .guide-copy h2 { font-size:23px; }
  html[data-mode="event"] .guide-label { margin-bottom:4px; }
  html[data-mode="event"] .assist-scroll { padding:12px; }
}
@media(max-width:620px) {
  html[data-mode="event"] .brand { gap:10px; }
  html[data-mode="event"] .brand img { width:115px; }
  html[data-mode="event"] .brand>span,html[data-mode="event"] .brand strong { display:none; }
  html[data-mode="event"] .browser[data-open="false"] .browser-workspace { min-height:0; }
  html[data-mode="event"] .guide-bar { padding:13px 16px; }
  html[data-mode="event"] .guide-nexie { display:none; }
  html[data-mode="event"] .guide-copy h2 { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* V9: one optional Nexie cue per moment; the reviewed wrap-up lands in three beats. */
.nexie-tip { display:flex; gap:10px; align-items:center; position:relative; flex-shrink:0; margin:12px 14px 0; padding:9px 2px 9px 12px; min-width:0; border:1px solid #e7cf85; border-radius:12px; background:linear-gradient(120deg,#fff4c7,#fff9e8); box-shadow:0 4px 14px #98731f0a; animation:tip-arrive .4s var(--ease-out) both; }
.nexie-tip::before { content:''; position:absolute; top:-5px; left:25px; width:8px; height:8px; background:#fff4c7; border-left:1px solid #e7cf85; border-top:1px solid #e7cf85; transform:rotate(45deg); }
.nexie-tip>img { width:33px; height:39px; object-fit:contain; flex-shrink:0; animation:tip-nod 1.7s .5s 2; }
.nexie-tip>div { min-width:0; flex:1; }
.nexie-tip strong { display:block; font:650 14px/1.25 Rethink,Arial,sans-serif; letter-spacing:-.02em; }
.nexie-tip p { font-size:12px; line-height:1.45; margin-top:3px; color:#596044; }
.nexie-tip button { flex-shrink:0; align-self:flex-start; display:grid; place-items:center; border:0; background:transparent; width:44px; height:44px; border-radius:8px; font-size:23px; color:#6a684d; }
.nexie-tip button:hover { background:#eacb6940; }
.experience[data-tip="guidance"] .choices button[aria-pressed="false"],.experience[data-tip="answers"] .source-button,.experience[data-tip="wrapup"] #next { animation:tip-target 1.6s .5s 2; }
.nexie-tip:not([hidden])~.assist-scroll>.panel-kicker,.nexie-tip:not([hidden])~.assist-scroll>.panel-footnote { display:none; }
.nexie-tip:not([hidden])~.assist-scroll .human-review { display:none; }
.transfer-panel { padding:18px 10px 14px; max-width:420px; margin:auto; }
.transfer-label { display:block; color:#677d89; font-size:10px; letter-spacing:.1em; font-weight:650; }
.transfer-panel h3 { font-size:32px; margin:10px 0; }
.transfer-panel>p { font-size:14px; color:#617585; max-width:300px; }
.transfer-steps { list-style:none; padding:0; margin:22px 0 18px; display:grid; gap:9px; }
.transfer-steps li { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #e0e8ec; border-radius:10px; font-size:14px; background:#f8fafb; transition:background .25s,border-color .25s; }
.transfer-steps li.active { background:#fff8e3; border-color:#ebcd7e; }
.transfer-steps li.done { background:#f0f8f2; border-color:#c9e2d0; }
.transfer-step-icon { display:grid; place-items:center; width:25px; height:25px; flex-shrink:0; border-radius:50%; background:#eaf0f3; color:#617987; font-size:12px; }
.active .transfer-step-icon { background:#f8d56b; color:#002546; animation:transfer-breathe .7s alternate infinite; }
.done .transfer-step-icon { background:#dcefe2; color:#37714b; }
.transfer-step-icon svg { width:17px; height:17px; }
.transfer-steps small { margin-left:auto; color:#70848d; font-size:11px; white-space:nowrap; }
.transfer-steps .done small { color:#427252; }
.transfer-meter { height:4px; border-radius:4px; background:#eaf0f3; overflow:hidden; }
.transfer-meter span { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#f3c944,#f0afb0); transition:width .4s var(--ease-out); }
.browser[data-stage="4"] .ticket-app #record-copy,.browser[data-stage="4"][data-open="true"] .ticket-app .crm-record { animation:none; }
.browser[data-transfer="1"] .ticket-app #record-copy,.browser[data-transfer="2"] .ticket-app #record-outcome,.browser[data-transfer="2"] #case-disposition,.browser[data-transfer="3"] .ticket-app #record-followup { animation:field-land .65s var(--ease-out) both; }
.browser[data-transfer="0"] .ticket-app .crm-record { background:#fffdf5; }
.browser[data-stage="4"] .ticket-app #record-copy,.browser[data-stage="4"] #record-followup-value { overflow-wrap:anywhere; }
#next:disabled { opacity:.72; box-shadow:none; }
@keyframes tip-arrive { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
@keyframes tip-nod { 0%,100% { transform:translateY(0) rotate(0); } 35% { transform:translateY(-3px) rotate(-5deg); } 65% { transform:translateY(-1px) rotate(3deg); } }
@keyframes tip-target { 0%,100% { box-shadow:0 0 0 0 #e9bc4400; } 50% { box-shadow:0 0 0 4px #e9bc443d; } }
@keyframes transfer-breathe { from { box-shadow:0 0 0 0 #efc95c00; } to { box-shadow:0 0 0 5px #efc95c35; } }
@keyframes field-land { from { background:#ffedaa; box-shadow:inset 3px 0 #d5a837; } to { background:transparent; box-shadow:inset 0 0 transparent; } }
@media(min-width:621px) and (max-height:850px) {
  html[data-mode="event"] .nexie-tip { margin:9px 12px 0; padding-block:6px; }
  html[data-mode="event"] .nexie-tip strong { font-size:13px; }
  html[data-mode="event"] .nexie-tip p { font-size:12px; }
  html[data-mode="event"] .guidance-card { padding:15px 17px; }
  html[data-mode="event"] .action-list { margin-block:13px; }
  html[data-mode="event"] .wrapup-card .summary-row p { font-size:13px; }
  html[data-mode="event"] .transfer-panel { padding-top:10px; }
}
@media(max-width:900px) {
  .nexie-tip { gap:8px; padding-left:9px; margin-inline:12px; }
  .nexie-tip>img { width:27px; height:33px; }
  .nexie-tip strong { font-size:13px; }
}
@media(max-width:620px) {
  .nexie-tip { margin:10px 12px 0; }
  .nexie-tip p { font-size:13px; }
  .transfer-panel { padding:12px 3px; }
  .transfer-panel h3 { font-size:29px; }
  .transfer-steps { margin-block:16px; }
  .transfer-steps li { padding:9px; }
}
/* Explicit rows keep Back beside the primary action on tablet-sized screens. */
.guide-controls .step-dots { grid-row:1; }
.guide-controls .back,.guide-controls .primary { grid-row:2; }
@media(max-width:620px) {
  html[data-mode="event"] .browser[data-open="true"] .sidepanel-title { display:none; }
}

/* V11: strong affordances for real controls; muted chrome for the example CRM. */
:root { --control-border:#54758b; --control-ink:#123b55; --control-shadow:0 2px 0 #23485c17; }
.tour-steps button,.experience-actions .quiet,.guide-controls .back,.summary-heading .quiet,.source-button,.try-another,.assist-tabs button,.impact-links .quiet,.below-experience summary,.impact-footer summary,.sidepanel-title button,.knowledge-topbar button,#tip-dismiss {
  border:1.5px solid var(--control-border); background:#fff; color:var(--control-ink); border-radius:8px; box-shadow:var(--control-shadow); text-decoration:none; cursor:pointer; transition:background .18s,border-color .18s,box-shadow .18s,transform .18s;
}
.tour-steps button { border-radius:20px; }
.tour-steps button.current { background:#fff1bd; border-color:#896b24; color:#002546; box-shadow:var(--control-shadow); }
.experience-actions .quiet { padding-inline:10px; }
.guide-controls .back { padding-inline:12px; }
.summary-heading .quiet,.try-another,.impact-links .quiet { padding-inline:12px; }
.source-button { padding:10px 12px; font-weight:600; }
.source-button .citation { flex-shrink:0; }
.choices button { border:1.5px solid var(--control-border); box-shadow:var(--control-shadow); font-weight:600; }
.choices button[aria-pressed="true"] { background:#002546; border-color:#002546; color:white; }
.primary { border:1.5px solid #8a681c; box-shadow:0 3px 0 #8a681c22; }
.extension-button { border:1.5px solid #8a681c; box-shadow:var(--control-shadow); }
.opening-cue { border:1.5px solid #8a681c; }
.assist-tabs { gap:5px; padding:4px 6px; }
.assist-tabs button { padding:8px 6px; }
.assist-tabs button[aria-selected="true"] { color:#fff; background:#002546; border-color:#002546; }
.assist-tabs button[aria-selected="true"]::after { display:none; }
.sidepanel-title button,.knowledge-topbar button,#tip-dismiss { display:grid; place-items:center; min-width:44px; min-height:44px; padding:0; }
.sidepanel-title { padding-block:4px; height:52px; }
#tip-dismiss { background:#fffdf4; border-color:#9b853f; }
.below-experience summary,.impact-footer summary { padding:9px 12px; width:max-content; max-width:100%; }
.impact-scenarios button { border:1.5px solid var(--control-border); box-shadow:var(--control-shadow); color:var(--control-ink); }
.impact-scenarios button[aria-pressed="true"] { color:#fff; border-color:#002546; }
.disposition-field select,.followup-field input,#draft-text { border:1.5px solid var(--control-border); box-shadow:var(--control-shadow); background:#fff; }
button:disabled { cursor:default; }
#next:disabled { color:#647482; background:#e9eef1; border-color:#b9c7d0; box-shadow:none; opacity:1; }
@media(hover:hover) {
  .tour-steps button:hover,.experience-actions .quiet:hover,.guide-controls .back:hover,.summary-heading .quiet:hover,.source-button:hover,.try-another:hover,.assist-tabs button:not([aria-selected="true"]):hover,.impact-links .quiet:hover,.below-experience summary:hover,.impact-footer summary:hover,.sidepanel-title button:hover,.knowledge-topbar button:hover,#tip-dismiss:hover { background:#eaf5f8; border-color:#002546; box-shadow:0 3px 8px #00254619; text-decoration:none; }
  .primary:not(:disabled):hover { background:#ffda76; border-color:#002546; }
}
/* These spans are visual context, not disabled versions of working demo controls. */
.ticket-app .field-value:not(.field-complete) { color:#78838b; background:#f0f3f5; border-color:#e2e7ea; box-shadow:none; cursor:default; }
.ticket-app .field-arrow,.ticket-tab-x,.crumb-menu { color:#acb5bb; }
.ticket-app .ticket-app-tools,.ticket-app .composer-tools { color:#a0acb3; }
.ticket-app .ticket-footer { background:#f4f6f7; color:#89959c; }
.ticket-app .macro-field,.ticket-app .submit-example { color:#8a959d; background:#e9edef; border:1px solid #dce3e7; box-shadow:none; cursor:default; }
.ticket-app .stay-ticket { color:#9aa5ad; }
.ticket-app .customer-context { background:#fafbfc; color:#74848f; }
.ticket-app .workspace-mode { align-self:center; padding:3px 8px; margin-left:10px; font-size:10px; line-height:1.5; color:#697b86; background:#eef2f4; border-radius:4px; white-space:nowrap; }
.ticket-app .note-composer-header>span:first-child>span { display:none; }
.ticket-app #record-copy:not(.has-draft) { color:#77858d; font-style:italic; }
.browser-nav,.extension-puzzle,.browser-menu,.address-star { color:#a4b0b9; }
.action-list li>span { border-color:transparent; background:#edf0e9; color:#69745e; }
.browser[data-transfer="1"] .ticket-app #record-copy,.browser[data-transfer="2"] .ticket-app #record-outcome,.browser[data-transfer="2"] #case-disposition,.browser[data-transfer="3"] .ticket-app #record-followup { animation:field-land-readable 1.65s var(--ease-out) both; }
@keyframes field-land-readable { 0%,45% { background:#ffedaa; box-shadow:inset 3px 0 #bd8d17; } 100% { background:transparent; box-shadow:inset 0 0 transparent; } }
@media(max-width:620px) {
  .experience-actions .quiet { padding-inline:5px; }
  .tour-steps:not([hidden])~.experience-actions { gap:5px; }
  .guide-controls .back { padding-inline:9px; }
  .ticket-app .workspace-mode { font-size:9px; margin-left:6px; padding-inline:5px; }
  .source-button { padding-inline:9px; }
}
.browser:not([data-stage="4"]) .ticket-app .crm-record { background:#f5f7f8; }
.ticket-app .field-tags { border-color:#e2e7ea; background:#f5f7f8; }
@media(max-width:620px) {
  .ticket-app .ticket-number { display:none; }
  .ticket-app .ticket-crumb .workspace-mode { display:inline-flex; margin-left:auto; }
}