/* RMOZ | رموز connected public demo — emerald, warm gold and ivory.
   Static first, progressively enhanced, responsive and RTL safe. */
.website .demo-page-hero { max-width:1240px; margin-inline:auto; padding-inline:24px; }
.website .demo-page-hero .actions { display:flex; flex-wrap:wrap; gap:16px 24px; margin-top:30px; align-items:center; }
.website .demo-page-hero .button { display:inline-flex; gap:12px; align-items:center; }
.demo-page-hero .rmoz-icon { width:18px; height:18px; }
.demo-safety { max-width:1192px; margin:0 auto 38px; padding:20px 24px; display:flex; gap:14px; align-items:flex-start; border:1px solid #bdcbbe; border-inline-start:4px solid #9d7a3e; background:#eef2ea; border-radius:10px; }
.demo-safety .rmoz-icon { flex:none; color:#174b3a; margin-top:3px; }
.website .demo-safety p { font-size:.85rem; line-height:1.8; margin:0; color:#334d40; }
.demo-introduction { max-width:1230px; margin:0 auto 46px; padding:30px 24px; display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.2fr); gap:42px; align-items:center; }
.website .demo-introduction h2 { font-size:clamp(1.8rem,2.65vw,2.7rem); line-height:1.4; margin:0 0 19px; }
.website .demo-introduction p:not(.eyebrow) { color:#445b50; font-size:.9rem; }
.website .demo-introduction .demo-flow-summary { margin-top:19px; padding:16px 18px; border-radius:8px; background:#e6eee6; color:#124533; font-weight:650; }
.demo-layers { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.demo-layer { position:relative; min-width:0; background:#fffefa; border:1px solid #d8e0d4; border-radius:12px; padding:20px; }
.demo-layer-icon { width:44px; height:44px; border-radius:10px; display:grid; place-items:center; background:#e6f0e9; color:#164c3b; margin-bottom:14px; }
.demo-layer-number { position:absolute; inset-block-start:20px; inset-inline-end:20px; color:#9c7e48; font-size:1.05rem; font-weight:700; }
.website .demo-layer h3 { font-size:1.04rem; font-weight:700; color:#123e32; margin:0 0 6px; }
.website .demo-layer p { font-size:.83rem; line-height:1.55; margin:0; color:#53635d; }
.demo-workbench { max-width:1230px; margin:0 auto 78px; border:1px solid #ccdbd0; border-radius:16px; padding:32px; background:#f0f3ed; box-shadow:0 12px 38px #123e320b; scroll-margin-top:120px; }
.demo-workbench-header { display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap; align-items:end; margin-bottom:16px; }
.website .demo-workbench h2 { font-size:clamp(1.55rem,2.4vw,2.4rem); color:#123e32; line-height:1.4; margin:0; }
.demo-selectors { display:flex; gap:14px; flex-wrap:wrap; align-items:end; }
.demo-selectors>div { min-width:min(100%,205px); flex:1 1 205px; }
.demo-selectors label, .demo-lookup-input label { display:block; margin-bottom:7px; font-size:.8rem; font-weight:700; color:#294b3b; }
.demo-selectors select,.demo-lookup-input input { display:block; width:100%; height:48px; background:#fff; border:1px solid #adc5b7; border-radius:7px; padding:10px 12px; font-size:.88rem; color:#123e32; font-family:inherit; }
.demo-selectors select:focus-visible, .demo-lookup-input input:focus-visible { outline:3px solid #9d7a3e; outline-offset:2px; }
.website .demo-role-hint { display:flex; align-items:center; gap:9px; padding:12px 0 22px; margin:0; color:#53635d; font-size:.78rem; }
.demo-role-hint .rmoz-icon { color:#836729; width:19px; height:19px; flex:none; }
.demo-workbench-grid { display:grid; grid-template-columns:minmax(200px,.39fr) minmax(0,1fr); gap:16px; align-items:start; }
.demo-scenarios { display:grid; gap:9px; }
.demo-scenario { width:100%; text-align:start; background:#fffefa; display:flex; align-items:center; gap:12px; min-height:88px; padding:16px; border:1px solid #d4dfd5; border-radius:9px; color:#1c4031; font-family:inherit; cursor:pointer; }
.demo-scenario:hover, .demo-scenario:focus-visible { border-color:#98773b; background:#f5f6ef; }
.demo-scenario.is-active { border-color:#18503e; box-shadow:inset 4px 0 #bca16c; background:#e6efe7; }
[dir=rtl] .demo-scenario.is-active { box-shadow:inset -4px 0 #bca16c; }
.demo-scenario .rmoz-icon:last-child { margin-inline-start:auto; flex:none; }
.demo-scenario-icon { width:42px; height:42px; border-radius:9px; display:grid; place-items:center; background:#d9e7dc; flex:none; }
.demo-scenario-icon .rmoz-icon { width:23px; height:23px; }
.demo-scenario strong { display:block; font-size:.83rem; line-height:1.4; font-weight:750; }
.demo-scenario small { display:block; color:#68796f; font-size:.75rem; margin-top:4px; }
.demo-main-panel { min-width:0; border:1px solid #d4e1d5; background:#fffefa; padding:24px; border-radius:11px; }
.demo-record-heading { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.website .demo-record-heading .eyebrow { margin:0 0 9px; font-size:.78rem; }
.website .demo-record-heading h3 { font-size:1.7rem; margin:0 0 8px; line-height:1.4; color:#123e32; }
.website .demo-record-heading p:not(.eyebrow) { margin:0; color:#4f6559; font-size:.88rem; max-width:610px; }
.demo-status { border:1px solid #cfdbce; color:#495f50; background:#edf2e8; border-radius:999px; padding:8px 12px; flex:none; font-size:.77rem; font-weight:650; white-space:nowrap; }
.demo-status[data-state="issued"] { border-color:#9ec0aa; background:#e3f4e8; color:#164f35; }
.demo-status[data-state="revoked"] { border-color:#e5ada7; background:#fbede8; color:#8b2f27; }
.demo-record-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:24px 0; }
.demo-record-details div { border:1px solid #e2e7df; background:#f9faf6; padding:14px 16px; border-radius:8px; min-width:0; }
.demo-record-details dt { font-size:.75rem; color:#647467; margin-bottom:5px; }
.demo-record-details dd { margin:0; font-size:.86rem; font-weight:700; overflow-wrap:anywhere; color:#204b3b; }
.website .demo-main-panel h4 { font-size:1.05rem; font-weight:750; color:#173f32; margin:23px 0 14px; }
.demo-stage-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.demo-stage-list li { border:1px solid #d5dcd2; background:#f7f8f3; padding:13px 11px; border-radius:8px; min-width:0; }
.demo-step-index { display:block; font-size:.8rem; font-weight:750; color:#84682e; margin-bottom:12px; }
.demo-stage-list strong { display:block; font-size:.85rem; line-height:1.4; }
.demo-stage-list small { display:block; font-size:.75rem; line-height:1.6; color:#69786b; margin-top:7px; }
.demo-stage-list li.is-current { background:#e3efe7; border-color:#6b9980; }
.demo-stage-list li.is-complete { background:#f0f5ed; border-color:#91aa93; }
.demo-stage-list li.is-revoked { background:#fff0eb; border-color:#bb7770; }
.demo-action-panel { margin-top:25px; padding:19px; background:#f0f4ee; border-radius:9px; border:1px solid #d6e2d6; }
.website .demo-action-panel h4 { margin:0 0 14px; }
.demo-action-buttons { display:flex; flex-wrap:wrap; gap:10px; }
.demo-action-buttons button,.demo-download,.demo-lookup-input button { min-height:44px; border:1px solid #174c3c; border-radius:7px; padding:10px 13px; background:#174c3c; color:white; display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:.82rem; font-weight:700; cursor:pointer; }
.demo-action-buttons button .rmoz-icon,.demo-download .rmoz-icon,.demo-lookup-input button .rmoz-icon { width:18px; height:18px; flex:none; }
.demo-action-buttons button:hover:not(:disabled),.demo-download:hover:not(:disabled),.demo-lookup-input button:hover:not(:disabled) { background:#236148; }
.demo-action-buttons button:disabled,.demo-download:disabled,.demo-lookup-input button:disabled { background:#e3e9df; border-color:#cbd5c9; color:#718172; opacity:.85; cursor:not-allowed; }
.demo-action-buttons .demo-reset { background:transparent; color:#2d5743; border-color:#a7bdab; }
.demo-action-buttons .demo-reset:hover:not(:disabled) { background:#e5eee5; }
.website .demo-action-hint { color:#576d5f; font-size:.78rem; margin:12px 0 0; }
.demo-section { margin-top:25px; border-top:1px solid #e3e9e1; padding-top:16px; }
.demo-section h4,.demo-info-panel h3 { display:flex; align-items:center; gap:10px; }
.demo-section h4>.rmoz-icon,.demo-info-panel h3>.rmoz-icon { color:#9a783b; width:20px; height:20px; }
.demo-linked-records { display:flex; gap:8px; flex-wrap:wrap; }
.demo-linked-records button { cursor:pointer; font:inherit; border:1px solid #c8d8ca; border-radius:8px; padding:10px 13px; color:#144936; background:#eff3ee; font-size:.8rem; font-weight:650; text-align:start; }
.demo-linked-records button:hover { background:#e3efe3; border-color:#70947b; }
.demo-linked-records button span { font-size:.73rem; color:#65746a; margin-inline-start:6px; white-space:nowrap; }
.demo-section>.text-link { margin-top:16px; }
.demo-information-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.demo-info-panel { min-width:0; background:#fffefa; border:1px solid #d4e1d5; border-radius:11px; padding:23px; }
.website .demo-info-panel h3 { font-size:1.13rem; font-weight:750; margin:0 0 12px; color:#123e32; }
.website .demo-info-panel p { color:#53665b; font-size:.83rem; margin:0 0 15px; }
.demo-info-panel ul { margin:0; padding-inline-start:20px; }
.demo-info-panel li { color:#26483a; font-size:.82rem; line-height:1.75; margin:9px 0; overflow-wrap:anywhere; }
.demo-info-panel li code { color:#8b7138; margin-inline-start:8px; white-space:nowrap; font-size:.75rem; }
.demo-lookup-input { display:flex; gap:9px; flex-wrap:wrap; }
.demo-lookup-input input { flex:1 1 170px; min-width:0; }
.demo-lookup-input button { justify-content:center; flex:0 0 auto; }
.website .demo-lookup-feedback { margin-top:12px; padding:10px 12px; border-radius:6px; background:#e8f0e9; color:#214e36; min-height:40px; }
.demo-info-panel pre { margin:0; padding:18px; overflow:auto; max-height:400px; font-size:.78rem; line-height:1.7; border-radius:8px; background:#112f27; color:#ecf4ea; white-space:pre; }
.website .demo-info-panel .demo-disclosure { margin-top:12px; font-size:.77rem; color:#586a5b; }
.demo-audit { list-style:none; padding:0; margin:0 0 19px; }
.demo-audit li { display:flex; align-items:center; gap:10px; border-bottom:1px solid #e4eae2; padding:8px 0; }
.demo-audit .demo-event-count { font-size:.78rem; font-weight:750; color:#96743b; }
.demo-audit strong { font-size:.8rem; font-weight:700; }
.demo-audit small { margin-inline-start:auto; font-size:.75rem; color:#586a5b; }
.demo-download { background:#f2f5ef; color:#214936; }
.demo-live-status { display:block; margin-top:18px; padding:12px 16px; background:#e2ede3; border-radius:8px; min-height:42px; font-size:.81rem; color:#254b39; }
@media (max-width:1000px) { .demo-introduction { grid-template-columns:1fr; } .demo-workbench-grid { grid-template-columns:1fr; } .demo-scenarios { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:740px) {
  .website .demo-page-hero { padding-inline:18px; }
  .demo-introduction { margin-bottom:25px; padding:20px 18px; gap:20px; }
  .demo-layers { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .demo-layer { padding:15px; }
  .website .demo-layer p { font-size:.76rem; }
  .demo-safety { margin-inline:16px; padding:16px; }
  .demo-workbench { margin-inline:12px; padding:16px; scroll-margin-top:90px; }
  .demo-workbench-header { align-items:stretch; }
  .demo-selectors { width:100%; }
  .demo-selectors>div { flex:1 1 100%; }
  .demo-scenarios { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .demo-scenario { min-height:98px; padding:10px; gap:7px; }
  .demo-scenario-icon { display:none; }
  .demo-scenario strong { font-size:.77rem; }
  .demo-scenario .rmoz-icon:last-child { display:none; }
  .demo-main-panel,.demo-info-panel { padding:16px; }
  .demo-record-heading { flex-wrap:wrap; }
  .website .demo-record-heading h3 { font-size:1.4rem; }
  .demo-record-details { grid-template-columns:1fr; gap:8px; }
  .demo-stage-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .demo-information-grid { grid-template-columns:1fr; }
  .demo-lookup-input button { flex:1 1 100%; }
  .demo-action-buttons button { flex:1 1 135px; justify-content:center; }
}
@media (max-width:370px) { .demo-scenarios,.demo-layers { grid-template-columns:1fr; } .demo-scenario { min-height:54px; } .demo-stage-list strong { font-size:.78rem; } }
@media (prefers-reduced-motion:reduce) { .demo-workbench * { scroll-behavior:auto!important; transition:none!important; } }