/* ============================================================
   ARYZA ADVIZE, DRAWN (the Aryza page's setup video, 27-28 Oct 2026).
   A copy of Advize's campaign and trigger screens, read from Advize
   itself (the j3 test account): the navy header, the icon sidebar, the
   grey page header with its breadcrumb, Inter 13px, the #646DD8
   buttons, the trigger list's grey glyph buttons, the Add actions
   blocks (navy action, "when all", the orange conditions) and the
   Configure action dialog (Action, URL, Delay in minutes).
   One app of the drawn browser (css/demo-apps.css); markup:
   tools/demos/aryza-setup.html.
   ============================================================ */

.dv-app.adv { font-family: Inter, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 13px; color: #6C757D; background: #E2E5E9; }
.adv svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.adv .is-fill { fill: currentColor; stroke: none; }

/* the header */
.adv-head { position: relative; z-index: 5; display: flex; align-items: center; height: 60px; padding: 0 20px 0 16px; background: #1D2372; }
.adv-logo { display: flex; align-items: center; gap: 8px; color: #fff; }
.adv-logo-az { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: linear-gradient(140deg, #AFC6FF, #8F9CF2); font-size: 12px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.adv-logo-t { font-size: 17px; font-weight: 300; letter-spacing: -.03em; }
.adv-logo-t b { font-weight: 700; }
.adv-search { display: flex; align-items: center; justify-content: space-between; width: 300px; height: 32px; margin-left: auto; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 5px; font-size: 13px; color: #fff; }
.adv-search svg { width: 14px; height: 14px; }
.adv-hbtn { display: grid; place-items: center; width: 32px; height: 32px; margin-left: 9px; border-radius: 9px; background: rgba(216, 221, 254, .2); color: #fff; }
.adv-hbtn:first-of-type { margin-left: 16px; }
.adv-hbtn svg { width: 17px; height: 17px; }

/* the icon sidebar */
.adv-side { position: absolute; left: 0; top: 60px; bottom: 0; z-index: 4; width: 42px; padding: 10px 0; background: #fff; border-radius: 0 10px 10px 0; }
.adv-nav { display: flex; align-items: center; height: 31px; padding-left: 13px; color: #6C757D; }
.adv-nav svg { flex: none; width: 16px; height: 16px; }
.adv-nav.is-cur { color: #646DD8; }
.adv-nav-foot { position: absolute; left: 0; bottom: 12px; }

/* the page */
.adv-main { position: absolute; left: 42px; right: 0; top: 60px; bottom: 0; overflow: hidden; background: #E2E5E9; }
.adv-page { display: none; position: absolute; inset: 0; }
.adv-page.dp-cur { display: block; animation: adv-load .32s ease; }
/* Advize reloads the page on every click: a short white flash, as in the browser */
@keyframes adv-load { 0% { opacity: .35; } 100% { opacity: 1; } }
.adv-ph { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 18px 0 14px; background: #F7F7F7; border-bottom: 1px solid #EEE; }
.adv-ph-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #E0E2F8; color: #1D2372; }
.adv-ph-ico svg { width: 17px; height: 17px; }
.adv-ph h2 { margin: 0; font-size: 25px; font-weight: 500; letter-spacing: -.01em; color: #1D2372; }
.adv-ph-sub { margin-left: -2px; font-size: 13px; font-style: italic; color: #8A9099; }
.adv-crumb { margin-left: auto; font-size: 11.5px; color: #4A535E; }
.adv-crumb small { margin-right: 5px; font-size: 9.5px; text-transform: uppercase; color: #8A9099; }
.adv-crumb i { margin: 0 6px; font-style: normal; color: #B8BCC2; }
.adv-content { padding: 18px 18px 30px; }
.adv-card { padding: 16px; border-radius: 3px; background: #FCFCFC; }

/* the campaign list */
.adv-alert { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-radius: 3px; background: #E8E9F9; font-size: 12px; color: #646DD8; }
.adv-toggle { display: flex; align-items: center; gap: 6px; padding: 2px 2px 2px 6px; border: 1px solid #D5D8F1; border-radius: 3px; background: #fff; font-size: 11px; color: #4A535E; }
.adv-toggle i { width: 40px; height: 17px; border-radius: 2px; background: #2F35B8; }
.adv-hint { margin: 14px 0 12px; font-size: 12px; color: #7B828B; }
.adv-table { width: 100%; border-collapse: collapse; border: 1px solid #E3E5E8; background: #fff; }
.adv-table th { padding: 11px 10px; border-bottom: 1px solid #E3E5E8; text-align: left; font-size: 12px; font-weight: 500; color: #4A535E; }
.adv-table td { padding: 10px; border-bottom: 1px solid #EEF0F2; font-size: 12px; color: #6C757D; }
.adv-table tbody tr:nth-child(even) td { background: #FAFAFB; }
.adv-table tr.is-hover td { background: #F3F4FB; }
.adv-acts { display: flex; flex-wrap: wrap; gap: 4px; width: 214px; }
.adv-act { position: relative; display: grid; place-items: center; width: 31px; height: 28px; box-sizing: border-box; border: 1px solid #D5D9DE; border-radius: 3px; background: #ECEEF1; color: #4D5660; transition: background-color .15s ease; }
.adv-act svg { width: 12px; height: 12px; stroke-width: 2.2; }
.adv-act.is-hover { background: #D9DDE2; }

/* a tooltip, as Advize shows on its icon buttons */
.adv-tip {
    position: absolute; left: 50%; bottom: calc(100% + 7px); z-index: 3; padding: 4px 8px; border-radius: 4px;
    background: #16181D; color: #fff; font-style: normal; font-size: 11px; white-space: nowrap;
    transform: translateX(-50%) translateY(3px); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.adv-tip::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -4px; border: 4px solid transparent; border-top-color: #16181D; }
.is-hover > .adv-tip { opacity: 1; transform: translateX(-50%); }

/* the campaign's triggers */
.adv-trigs th { font-size: 12.5px; color: #2F343B; }
.adv-trigs td { font-size: 12.5px; color: #545B64; }
.adv-trig-new { display: none; }
.adv-trig-new.is-shown { display: table-row; }
.adv-trig-new td { transition: background-color 1s ease; }
.adv-trig-new.is-flash td { background: #FFF4CF !important; }
.adv-gbtns { display: flex; gap: 4px; }
.adv-gbtns i { position: relative; display: grid; place-items: center; width: 30px; height: 27px; border: 1px solid #D6DADF; border-radius: 3px; background: #EEF0F2; color: #505861; transition: background-color .15s ease; }
.adv-gbtns i.is-hover { background: #DDE1E6; }
.adv-gbtns svg { width: 11px; height: 11px; }
/* a trigger that is off shows the pause glyph, "Enable trigger" (read
   from j3, 29 Oct 2026); once on, the play glyph (not seen live) */
.adv-gbtns .adv-ico-play { display: none; }
[data-k="trig-play"].is-on .adv-ico-pause { display: none; }
[data-k="trig-play"].is-on .adv-ico-play { display: block; }
.adv-new-btn { margin: 18px 0 0; }

/* buttons */
.adv-btn { display: inline-flex; align-items: center; height: 33px; padding: 0 15px; border-radius: 3px; background: #646DD8; font-size: 13px; color: #fff; transition: background-color .15s ease; }
.adv-btn.is-hover { background: #5159C9; }
.adv-btn-g { display: inline-flex; align-items: center; height: 33px; padding: 0 15px; border-radius: 3px; border: 1px solid #D5D8DD; background: #EDEEF0; font-size: 13px; color: #2F343B; }

/* the forms */
.adv-form { border-radius: 3px; background: #FCFCFC; }
.adv-row { display: grid; grid-template-columns: 330px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid #E9EAEC; }
.adv-row:last-child { border-bottom: 0; }
.adv-row > label { padding-top: 9px; text-align: right; font-size: 12.5px; color: #4A535E; }
.adv-row-submit { padding: 18px 0 20px; }
.adv-input { position: relative; display: flex; align-items: center; width: 640px; height: 33px; padding: 0 11px; border: 1px solid #CCC; border-radius: 4px; background: #fff; font-size: 13px; color: #333; transition: border-color .15s ease, box-shadow .15s ease; }
.adv-input.is-area { align-items: flex-start; height: 106px; padding-top: 8px; }
.adv-input .adv-ph-t { color: #9A9FA6; }
.adv-input.is-filled .adv-ph-t { display: none; }
.adv-input.is-focus { border-color: #9EA3E8; box-shadow: 0 0 0 3px rgba(100, 109, 216, .16); }
.adv-input .dp-val { white-space: nowrap; overflow: hidden; }
.adv-caret { display: none; flex: none; width: 1.5px; height: 15px; margin-left: 1px; background: #333; animation: adv-blink 1s steps(1) infinite; }
.adv-input.is-focus .adv-caret { display: inline-block; }
.adv-input.is-typing .adv-caret { animation: none; }
@keyframes adv-blink { 50% { opacity: 0; } }

/* a select, and its list open below it */
.adv-select { justify-content: space-between; }
.adv-sel-ph { color: #333; }
.adv-sel-v { display: none; color: #333; }
.adv-select.is-set .adv-sel-ph { display: none; }
.adv-select.is-set .adv-sel-v { display: inline; }
.adv-sel-car { flex: none; width: 7px; height: 7px; margin: -3px 2px 0 auto; border-right: 1.5px solid #555; border-bottom: 1.5px solid #555; transform: rotate(45deg); }
.adv-dd {
    position: absolute; left: -1px; top: calc(100% + 2px); z-index: 6; display: none; width: calc(100% + 2px); padding: 4px 0;
    border: 1px solid #C9CDD3; border-radius: 6px; background: #fff; box-shadow: 0 10px 28px -8px rgba(20, 24, 40, .35);
}
.adv-select.is-open .adv-dd { display: block; }
.adv-dd span { display: block; padding: 5px 12px; font-size: 13px; color: #222; }
.adv-dd span.is-hl.is-on { background: #2F6FEB; color: #fff; }
/* the browser's own list for a select (macOS), over the dialog */
.adv-dd-mac { top: -6px; left: -6px; width: 290px; padding: 5px; border: 0; border-radius: 8px; background: rgba(246, 246, 248, .97); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .18), 0 14px 34px -8px rgba(0, 0, 0, .35); }
.adv-dd-mac span { padding: 2.5px 10px 2.5px 22px; border-radius: 5px; font-size: 13px; white-space: nowrap; }
.adv-dd-mac span.is-first { position: relative; }
.adv-dd-trig { top: -82px; left: -4px; width: 330px; }
.adv-dd-mac .adv-dd-arr { padding: 0; text-align: center; font-size: 8px; line-height: 14px; color: #555; }
.adv-dd-mac span.is-first::before { content: ''; position: absolute; left: 8px; top: 7px; width: 3px; height: 6px; border: solid #222; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

/* Add actions: the action, "when all", and its conditions */
.adv-acts-wrap { display: none; padding: 20px 20px 30px; border-radius: 3px; background: #F7F7F7; }
.adv-acts-wrap.is-on { display: block; }
.adv-ablock { display: flex; align-items: stretch; gap: 18px; height: 54px; }
.adv-aname {
    position: relative; flex: none; display: flex; align-items: center; width: 430px; padding: 0 22px 0 18px;
    background: #2B32B2; color: #fff; font-size: 14px;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
}
.adv-aname-new { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-style: italic; }
.adv-aname-new svg { width: 12px; height: 12px; }
.adv-aname-set { display: none; }
[data-k="act-block"].is-set .adv-aname-new { display: none; }
[data-k="act-block"].is-set .adv-aname-set { display: inline; }
.adv-aicons { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.adv-aicons i { display: grid; place-items: center; color: #fff; }
.adv-aicons svg { width: 12px; height: 12px; }
.adv-aicons i.is-hover { color: #C8CCFF; }
.adv-when { display: flex; align-items: center; width: 300px; margin: 9px 0; padding: 0 12px; border: 1px solid #CCC; border-radius: 4px; background: #fff; font-size: 13px; color: #333; }
.adv-cond {
    flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 22px;
    background: #F6B67C; color: #fff; font-size: 13.5px;
    clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%);
}
.adv-cond svg { width: 13px; height: 13px; color: #16181D; }
.adv-add-act { display: flex; justify-content: center; margin: 22px 0 0; }
.adv-add-act span { display: grid; place-items: center; width: 440px; height: 48px; background: #6670D9; color: #fff; font-size: 16px; transition: background-color .15s ease; }
.adv-add-act span.is-hover { background: #555FCC; }

/* Configure action, over the whole app */
.adv-modal-wrap { position: absolute; inset: 0; z-index: 20; display: none; background: rgba(20, 22, 30, .55); }
.adv-modal-wrap.is-on { display: block; }
.adv-modal { position: absolute; left: 50%; top: 30px; width: 580px; transform: translateX(-50%); border-radius: 4px; background: #fff; box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .45); }
.adv-modal-h { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 15px 18px; border-bottom: 1px solid #E5E5E5; }
.adv-modal-h b { font-size: 19px; font-weight: 500; color: #222; }
.adv-modal-h span { font-size: 22px; color: #999; }
.adv-modal-b { padding: 18px 0 20px; }
.adv-mrow { display: grid; grid-template-columns: 150px 1fr; align-items: start; gap: 18px; padding: 0 18px 12px; }
.adv-mrow > label { padding-top: 8px; text-align: right; font-size: 13px; color: #333; }
.adv-mrow .adv-input { width: 262px; }
.adv-mrow small { display: block; margin-top: 4px; font-size: 12px; color: #666; }
.adv-mfields { display: none; margin-top: 4px; padding-top: 16px; border-top: 1px solid #E5E5E5; }
.adv-mfields.is-on { display: block; }
.adv-mempty { height: 40px; margin-top: 4px; border-top: 1px solid #E5E5E5; }
.adv-mempty.is-off { display: none; }
.adv-nsel .adv-sel-car { margin-right: 0; }
.adv-btn-confirm { background: #E7E8EE; color: #fff; }
.adv-btn-confirm.is-ready { background: #646DD8; }
.adv-btn-confirm.is-ready.is-hover { background: #5159C9; }
.adv-modal-f { display: flex; justify-content: flex-end; gap: 8px; margin: 0; padding: 16px 18px; border-top: 1px solid #E5E5E5; }

/* on a phone (.dp-narrow, see css/demo-apps.css): the label and its
   field, and the action dialog, come close enough to fit the picture */
.dp-narrow .adv-row { grid-template-columns: 150px 1fr; }
.dp-narrow .adv-row .adv-input { width: 300px; }
.dp-narrow .adv-modal { width: 440px; }
.dp-narrow .adv-mrow { grid-template-columns: 96px 1fr; }