.what-good-looks-like-tag {
background: var(--tok-e8f5e9);
color: var(--tok-2e7d32);
border: 1px solid var(--tok-a5d6a7);
font-size: 9.5px;
font-weight: 800;
padding: 2px 7px;
border-radius: 6px;
text-transform: uppercase;
margin-bottom: 8px;
}
.step-visual-illustration {
width: 100px;
height: 82px;
background: var(--tok-eae4d8);
border-radius: 10px;
display: grid;
place-items: center;
font-size: 38px;
margin-bottom: 8px;
}
.step-instruction-en {
font-size: 13px;
font-weight: 800;
color: var(--ink);
}
.step-instruction-hi {
font-family: 'Noto Sans Devanagari', sans-serif;
font-size: 12px;
color: var(--ink-muted);
margin-top: 3px;
}
.step-audio-btn {
margin-top: 8px;
background: var(--tok-ffffff);
border: 1px solid var(--border-teal);
color: var(--deep-royal-teal);
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
cursor: pointer;
}
.probe-input-box {
background: var(--tok-f4faf9);
border: 2px solid var(--border-teal);
border-radius: 11px;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.probe-target-pill {
font-size: 10.5px;
font-weight: 800;
color: var(--deep-royal-teal);
background: rgba(13, 92, 99, 0.10);
padding: 3px 8px;
border-radius: 999px;
}
.probe-display-val {
font-family: 'JetBrains Mono', monospace;
font-size: 24px;
font-weight: 800;
color: var(--deep-royal-teal);
}
.probe-keypad-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 5px;
margin-bottom: 8px;
}
.probe-key-btn {
height: 36px;
border-radius: 7px;
border: 1px solid var(--border-subtle);
background: var(--tok-faf8f4);
font-size: 14px;
font-weight: 800;
color: var(--deep-royal-teal);
cursor: pointer;
}
.step-decision-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 8px;
}
.decision-btn {
height: 44px;
border-radius: 9px;
border: none;
font-weight: 800;
font-size: 12.5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.btn-done { background: var(--deep-royal-teal); color: var(--tok-ffffff); }
.btn-later { background: var(--amber-bg); color: var(--amber-ink); border: 1px solid var(--amber-border); }
.btn-cant { background: var(--danger-bg); color: var(--danger-red); border: 1px solid var(--tok-fca5a5); }
.ground-l1-body {
flex: 1;
padding: 16px 20px;
background: var(--ivory-canvas);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 14px;
}
.l1-tab-pane {
display: none;
flex-direction: column;
gap: 14px;
}
.l1-tab-pane.active {
display: flex;
}
.l1-persona-banner {
background: linear-gradient(180deg, var(--tok-fffdf9) 0%, var(--tok-faf3e3) 100%);
border: 2px solid var(--gold);
border-radius: 16px;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
box-shadow: 0 4px 12px rgba(13, 92, 99, 0.08);
}
.l1-persona-left {
display: flex;
align-items: center;
gap: 12px;
}
.l1-persona-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--deep-royal-teal);
color: var(--tok-ffffff);
border: 2.5px solid var(--gold);
display: grid;
place-items: center;
font-weight: 800;
font-size: 16px;
}
.l1-cards-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.l1-card {
background: var(--tok-ffffff);
border: 1.5px solid var(--gold);
border-radius: 16px;
padding: 14px 16px;
box-shadow: 0 4px 12px rgba(13, 92, 99, 0.06);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
}
.l1-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.l1-card-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 19px;
font-weight: 700;
color: var(--deep-royal-teal);
}
.l1-badge {
font-size: 10.5px;
font-weight: 800;
padding: 3px 9px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.l1-badge.teal { background: var(--tok-e2f6f7); color: var(--deep-royal-teal); border: 1px solid var(--harleys-aqua); }
.l1-badge.amber { background: var(--amber-bg); color: var(--amber-ink); border: 1px solid var(--amber-border); }
.l1-badge.red { background: var(--danger-bg); color: var(--danger-red); border: 1px solid var(--tok-fca5a5); }
.l1-badge.green { background: var(--tok-e7f7ee); color: var(--pulse-green); border: 1px solid var(--tok-86efac); }
.l1-action-btn {
min-height: 44px;
padding: 8px 14px;
border-radius: 11px;
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
border: 1.5px solid var(--gold);
background: var(--deep-royal-teal);
color: var(--tok-ffffff);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.l1-action-btn.secondary {
background: var(--cream-pill);
color: var(--deep-royal-teal);
}
.l1-action-btn.danger {
background: var(--danger-bg);
color: var(--danger-red);
border-color: var(--tok-fca5a5);
}
.ground-bottom-footer-wrap {
background: linear-gradient(180deg, var(--tok-ade6e7) 0%, var(--tok-8fdadb) 100%);
border-top: 2px solid var(--gold);
padding: 10px 18px 12px;
margin-top: auto;
}
.ground-bottom-pill-track {
max-width: 820px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.22);
border: 1.5px solid rgba(13, 92, 99, 0.24);
border-radius: 999px;
padding: 5px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
box-shadow: inset 0 1px 3px rgba(13, 92, 99, 0.10);
}
.footer-nav-btn {
border: none;
background: transparent;
color: var(--deep-royal-teal);
border-radius: 999px;
min-height: 54px;
padding: 6px 10px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
font-size: 12.5px;
font-weight: 800;
position: relative;
transition: all 0.16s ease;
}
.footer-nav-btn:hover { background: rgba(255, 255, 255, 0.45); }
.footer-nav-btn.active {
background: var(--tok-ffffff);
color: var(--deep-royal-teal);
box-shadow: 0 3px 10px rgba(13, 92, 99, 0.16);
}
.footer-nav-icon {
font-size: 18px;
line-height: 1;
display: inline-flex;
align-items: center;
gap: 3px;
}
.footer-alert-pill {
background: var(--tok-b84a39);
color: var(--tok-ffffff);
font-size: 10.5px;
font-weight: 800;
padding: 1px 6px;
border-radius: 999px;
line-height: 1.2;
}
.footer-task-pill {
background: var(--deep-royal-teal);
color: var(--tok-ffffff);
font-size: 10.5px;
font-weight: 800;
padding: 1px 6px;
border-radius: 999px;
line-height: 1.2;
}
.outlet-icon-img {
width: 22px;
height: 22px;
object-fit: contain;
vertical-align: middle;
display: inline-block;
}
.kiosk-frame.vp-mobile {
height: 780px;
max-height: 86vh;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
}
.kiosk-frame.vp-mobile .kiosk-app-header {
padding: 7px 10px;
gap: 6px;
flex-wrap: wrap !important;
white-space: normal !important;
position: sticky;
top: 0;
z-index: 40;
}
.kiosk-frame.vp-mobile .kiosk-header-brand,
.kiosk-frame.vp-mobile .kiosk-header-right {
flex-wrap: wrap !important;
width: 100%;
justify-content: space-between;
}
.kiosk-frame.vp-mobile .header-logo-crest { width: 34px; height: 32px; }
.kiosk-frame.vp-mobile .brand-arched-title { font-size: 18px; }
.kiosk-frame.vp-mobile .kiosk-outlet-pill { font-size: 10px; padding: 3px 8px; }
.kiosk-frame.vp-mobile .kiosk-header-stats { display: none; }
.kiosk-frame.vp-mobile .a11y-switch-bar { width: 100%; justify-content: space-between; }
.kiosk-frame.vp-mobile .pill-switch-btn { padding: 4px 8px; font-size: 10px; }
.kiosk-frame.vp-mobile .level2-screen.active {
flex: 1 0 auto;
overflow-y: visible !important;
min-height: min-content;
}
.kiosk-frame.vp-mobile .kiosk-l2-split,
.kiosk-frame.vp-mobile .kiosk-l21-container {
flex-direction: column;
overflow-y: visible !important;
height: auto !important;
}
.kiosk-frame.vp-mobile .l2-left-wall { border-right: none; border-bottom: 2px solid var(--gold); padding: 10px; }
.kiosk-frame.vp-mobile .l2-crew-scroll { max-height: 250px; overflow-y: auto; }
.kiosk-frame.vp-mobile .l2-crew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kiosk-frame.vp-mobile .l2-right-dock { padding: 12px; }
.kiosk-frame.vp-mobile .l21-left-rail { width: calc(100% - 20px); margin: 10px; }
.kiosk-frame.vp-mobile .l21-main-stage { overflow-y: visible !important; height: auto !important; }
.kiosk-frame.vp-mobile .hero-tiles-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kiosk-frame.vp-mobile .step-flashcard-body { grid-template-columns: minmax(0, 1fr); }
.kiosk-frame.vp-mobile .ground-l1-body {
padding: 10px;
gap: 10px;
overflow-y: visible !important;
flex: 1 0 auto;
}
.kiosk-frame.vp-mobile .l1-cards-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.kiosk-frame.vp-mobile .ground-bottom-footer-wrap {
padding: 8px 8px 10px;
position: sticky;
bottom: 0;
z-index: 40;
}
.kiosk-frame.vp-mobile .footer-nav-btn { min-height: 48px; font-size: 11px; padding: 4px 6px; }


.tap-64, .btn-primary, .btn-secondary, .btn-voice {
  min-height: 64px;
  min-width: 64px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid var(--gold);
  background: var(--ivory);
  color: var(--teal);
}
.btn-primary {
  background: var(--teal);
  color: var(--ivory);
  border-color: var(--gold);
}
.btn-secondary {
  background: var(--ivory);
  color: var(--teal-dark);
  border-color: var(--os-brass);
}
.btn-voice {
  width: 64px;
  height: 64px;
  padding: 4px;
  flex-direction: column;
  background: var(--ivory);
  color: var(--teal);
  font-size: 14px;
  line-height: 1.1;
}
.state-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--text-label);
  font-weight: 800;
}
.state-good { background: var(--ok-bg); color: var(--ok); border: 1.5px solid var(--ok); }
.state-check { background: var(--warn-bg); color: var(--warn); border: 1.5px solid var(--warn); }
.state-act-now, .state-refused { background: var(--danger-bg); color: var(--danger); border: 1.5px solid var(--danger); }
.state-no-data { background: var(--stale-bg); color: var(--stale); border: 1.5px solid var(--stale); }
.showcase-topbar {
  background: var(--teal-dark);
  color: var(--ivory);
  border-bottom: 3px solid var(--gold);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.showcase-nav { display: flex; gap: 10px; flex-wrap: wrap; }
.showcase-link {
  min-height: 64px;
  min-width: 64px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 2px solid var(--gold);
  background: var(--teal);
  color: var(--ivory);
  text-decoration: none;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}
.showcase-section { max-width: 1640px; margin: 18px auto; padding: 0 18px; }
.specimen-legend, .section-banner, .wainscot-card {
  background: var(--ivory);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 12px;
}
.section-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.specimen-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* Victorian entablature coffer & fascia surface tokens */


/* Legacy canonical root values from the signed carry; scoped frame rules above remain intact. */


/* Shared language and Read Aloud segmented pill, on every live shell frame. */
.oneops-shell .shell-controls .shell-segmented {
 display:inline-flex;flex-wrap:nowrap;gap:var(--space-1);padding:var(--space-1);
 border:2px solid var(--gold);border-radius:var(--radius-pill);background:var(--cream-pill);
 max-width:100%;min-width:0;
}
.oneops-shell .shell-controls .shell-segmented button {
 border:0;min-height:44px;min-width:44px;background:transparent;
 padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);
}
.oneops-shell .shell-controls .shell-segmented button[aria-pressed=true] {background:var(--teal);color:var(--ivory)}
.oneops-shell .shell-segmented button:focus-visible {outline:2px solid var(--teal);outline-offset:2px}

/* One notice surface for every shell status, including messages written by scripts. */
.oneops-shell .shell-notice {
 display:block;padding:var(--space-3) var(--space-4);margin:var(--space-3) 0;
 border:1px solid var(--gold);border-left:var(--space-1) solid var(--teal);
 border-radius:var(--radius-md);background:var(--aqua-soft);color:var(--teal);
 font:600 var(--text-body)/1.5 var(--font-sans);overflow-wrap:anywhere;
}
.oneops-shell .shell-notice[data-shell-notice=error] {background:var(--danger-bg);color:var(--danger);border-left-color:var(--danger)}
.oneops-shell .shell-notice[data-shell-notice=success] {background:var(--ok-bg);color:var(--ok);border-left-color:var(--ok)}
.oneops-shell .shell-notice:empty,.oneops-shell .shell-notice[hidden] {display:none}
.shell-control-speaker {display:inline-block;line-height:1;flex:none}
.shell-unlock {width:100%;max-width:540px;margin:var(--space-5) auto;padding:var(--space-6)}
.shell-unlock h1 {font:700 var(--text-h1) var(--font-serif);color:var(--teal)}
.shell-unlock form {display:grid;gap:var(--space-3);margin:var(--space-5) 0}
.shell-unlock label {font-weight:700;color:var(--teal)}
.shell-unlock input {width:100%;box-sizing:border-box}
.shell-unlock-keypad {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.shell-unlock-keypad button {min-width:0;padding:var(--space-2);font-size:var(--text-body)}
.shell-unlock>.btn-secondary {display:flex}
.kiosk-body {margin:0;background:var(--ivory-canvas);font-family:var(--font-sans);color:var(--ink)}

/* Feature presentation hooks mapped to shared shell components. */
/* button */
.oneops-shell .acn-btn,
.oneops-shell .admin-btn,
.oneops-shell .admin-btn-danger,
.oneops-shell .admin-btn-primary,
.oneops-shell .admin-link48,
.oneops-shell .ai-pill-btn,
.oneops-shell .atelier-btn-ghost,
.oneops-shell .atelier-cta-primary,
.oneops-shell .atelier-cta-sm,
.oneops-shell .aud-btn,
.oneops-shell .btn-atelier-sm,
.oneops-shell .btn-gold-sm,
.oneops-shell .btn-row,
.oneops-shell .close-btn,
.oneops-shell .cmp-btn,
.oneops-shell .dr-btn,
.oneops-shell .fb-btn,
.oneops-shell .link-btn,
.oneops-shell .mis-btn,
.oneops-shell .mode-btn,
.oneops-shell .page2-cta-banner,
.oneops-shell .person-btn,
.oneops-shell .pm-btn,
.oneops-shell .pm-btn-primary,
.oneops-shell .prompt-btn,
.oneops-shell .pub-btn,
.oneops-shell .role-tab-btn,
.oneops-shell .tick-btn,
.oneops-shell .uat-copy-btn,
.oneops-shell .uat-tab-btn,
.oneops-shell .zen-btn {
 display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:var(--space-2) var(--space-4);border:1px solid var(--gold);border-radius:var(--radius-md);background:var(--ivory);color:var(--teal);font:700 var(--text-label)/1.4 var(--font-sans);text-decoration:none;cursor:pointer;
}
/* field */
.oneops-shell .acn-fld,
.oneops-shell .admin-field,
.oneops-shell .admin-input,
.oneops-shell .admin-select,
.oneops-shell .admin-textarea,
.oneops-shell .ask-control,
.oneops-shell .ask-field,
.oneops-shell .aud-input,
.oneops-shell .aud-select,
.oneops-shell .cmp-input,
.oneops-shell .cmp-select,
.oneops-shell .pm-field,
.oneops-shell .prompt-input,
.oneops-shell .zen-input {
 box-sizing:border-box;max-width:100%;min-height:44px;padding:var(--space-2) var(--space-3);border:1px solid var(--gold);border-radius:var(--radius-sm);background:var(--ivory);color:var(--ink);font:inherit;
}
/* grid */
.oneops-shell .acn-grid,
.oneops-shell .acn-tiles,
.oneops-shell .admin-form-grid,
.oneops-shell .admin-grid-4,
.oneops-shell .admin-kpi-grid,
.oneops-shell .admin-split,
.oneops-shell .atelier-ground-hero-grid,
.oneops-shell .aud-grid-4,
.oneops-shell .cluster-metrics-grid,
.oneops-shell .cmp-cert-grid,
.oneops-shell .cmp-grid,
.oneops-shell .cmp-grid-3,
.oneops-shell .dept-two-col,
.oneops-shell .dr-prio-grid,
.oneops-shell .dual-summary-grid,
.oneops-shell .hub-cards,
.oneops-shell .kpi-grid-6,
.oneops-shell .mis-grid,
.oneops-shell .os-grid-2,
.oneops-shell .os-kpi-grid,
.oneops-shell .pm-board-6,
.oneops-shell .pm-form-grid,
.oneops-shell .pm-grid,
.oneops-shell .pm-kiosk-grid,
.oneops-shell .pub-grid,
.oneops-shell .pulse-grid,
.oneops-shell .risk-bento-grid,
.oneops-shell .role-panel-grid,
.oneops-shell .stat-grid,
.oneops-shell .uat-walk-grid,
.oneops-shell .v-ledger-grid,
.oneops-shell .wave-bento-grid,
.oneops-shell .zen-cards-row {
 display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--space-4);min-width:0;
}
/* row */
.oneops-shell .admin-stack,
.oneops-shell .ai-actions,
.oneops-shell .ai-answer-top,
.oneops-shell .ai-footer-bar,
.oneops-shell .ai-kpi-row,
.oneops-shell .ai-prompt-pills,
.oneops-shell .atelier-dept-strip,
.oneops-shell .aud-kpi-strip,
.oneops-shell .audit-row,
.oneops-shell .badge-row,
.oneops-shell .bot-chips,
.oneops-shell .checklist-actions,
.oneops-shell .chip-row,
.oneops-shell .city-kpi-strip,
.oneops-shell .cmp-strip,
.oneops-shell .cmp-tabs,
.oneops-shell .dept-row,
.oneops-shell .dual-summary-strip,
.oneops-shell .filter-pills-bar,
.oneops-shell .fv-chips,
.oneops-shell .guardrail-strip,
.oneops-shell .klanding-eyebrow,
.oneops-shell .kpi-top-row,
.oneops-shell .kpi-value-row,
.oneops-shell .loan-row,
.oneops-shell .mis-tabs,
.oneops-shell .npl-rollup-row,
.oneops-shell .persona-tabs-bar,
.oneops-shell .pm-jump-bar,
.oneops-shell .pm-kpi-strip,
.oneops-shell .pm-row,
.oneops-shell .pm-stages,
.oneops-shell .pm-tabs,