/* ============================================================
   THE ARYZA VIDEO LIBRARY (Aryza page, "Watch it work", Dom 29 Oct
   2026). Generated by tools/build-aryza-videos.py; played by
   js/demo-player.js (scripts: js/demos/aryza-library.js), swapped by
   js/demo-library.js.
     .azl        the section: the video boxes and the popup that plays them
     .lib-*      parts only these videos draw: a value that swaps, the
                 browser's right-click menu, Chrome DevTools
     .apx-idm    Askpilot: a source's ID map tab (app-dev, 29 Oct 2026)
     .adv-st*    Advize: a campaign's statuses (j3, 29 Oct 2026)
     .adv-cl*    Advize: a client's record, its tabs and Notes panel
     .adv-fold*  Advize: Settings > Documents Structure
   The apps themselves are the header video's: css/demo-apps.css,
   css/demo-advize.css.
   ============================================================ */

/* ============================================================
   THE SECTION (since 30 Oct 2026, Dom: the videos as boxes, each
   opening in a popup): the boxes, four to a row; under them the text
   link for AI agents, a rule, then the buttons; and the popup
   ============================================================ */
.azl { padding: 104px 0 112px; border-top: 1px solid var(--line); }
.azl .sec-head { margin-bottom: 52px; }

/* the boxes */
.azl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1136px; margin: 0 auto; padding: 0; list-style: none; }
.azl-grid > li { display: flex; min-width: 0; }
.azl-card {
    display: flex; flex-direction: column; width: 100%; min-width: 0; margin: 0; padding: 10px 10px 16px;
    border: 1px solid var(--line); border-radius: 20px; background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.04);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.azl-card:hover { border-color: #D9CFCC; box-shadow: 0 24px 40px -28px rgba(22, 18, 26, 0.5); transform: translateY(-3px); }
.azl-card:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; }
.azl-thumb { position: relative; display: block; aspect-ratio: 1038 / 648; overflow: hidden; border-radius: 12px; background: #F4F1EF; }
.azl-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(22, 18, 26, 0.06); pointer-events: none; }
.azl-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.45s ease; }
.azl-card:hover .azl-thumb img { transform: scale(1.04); }
.azl-play {
    position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px;
    border-radius: 50%; background: rgba(22, 18, 26, 0.84); color: #fff; box-shadow: 0 10px 24px -10px rgba(22, 18, 26, 0.7);
    transition: transform 0.2s ease, background 0.2s ease;
}
.azl-play svg { display: block; width: 22px; height: 22px; margin-left: 2px; }   /* the triangle's weight sits left of its box: 2px right puts it in the middle */
.azl-card:hover .azl-play { transform: scale(1.08); background: var(--brand-magenta); }
.azl-len { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(22, 18, 26, 0.84); color: #fff; font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.azl-len:empty { display: none; }
.azl-seen { position: absolute; top: 8px; left: 8px; display: none; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 3px rgba(22, 18, 26, 0.2); color: var(--ink); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.azl-seen svg { width: 11px; height: 11px; }
.azl-card.is-seen .azl-seen { display: inline-flex; }
.azl-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 6px 0; }
.azl-g { align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.azl-g--day { background: #FBEAFB; color: #B42DB4; }
.azl-g--setup { background: #EEF1FE; color: #3D57D8; }
.azl-body b { font-size: 1.0313rem; font-weight: 750; line-height: 1.3; }
.azl-body small { font-size: 0.875rem; line-height: 1.45; color: var(--muted); }
.azl-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.azl-apps { display: flex; align-items: center; gap: 5px; }
.azl-uses { margin-right: 3px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.azl-apps img { width: 22px; height: 22px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: #fff; object-fit: contain; }
.azl-watch { display: inline-flex; align-items: center; gap: 5px; font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.azl-watch svg { width: 13px; height: 13px; transition: transform 0.2s ease; }
.azl-card:hover .azl-watch { color: var(--brand-magenta); }
.azl-card:hover .azl-watch svg { transform: translateX(2px); }

/* under the boxes: the videos as text for AI agents; then a rule and the buttons */
.azl-agent { margin: 28px 0 0; text-align: center; }
.azl-foot { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 1136px; margin: 48px auto 0; padding-top: 44px; border-top: 1px solid var(--line); text-align: center; }
.azl-foot-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* the popup (Dom, 30 Oct 2026: the videos were made for the 1040 px player,
   so the popup gives them that size whenever the screen allows): one slim
   row, the title on the left and Previous, Next, Autoplay and the close
   button on the right, then the player. Its width follows the screen's
   height: the row and the player's own controls take about 235 px, the
   rest is 16:10 picture, up to 1038 px of it (the player's own cap). On a
   phone it fills the screen, with the buttons under the player. */
.azl-modal {
    width: min(1066px, calc(100vw - 32px), calc((100dvh - 236px) * 1.6 + 28px)); max-width: none; max-height: calc(100dvh - 24px);
    margin: auto; padding: 0; overflow: auto; border: 0; border-radius: 22px; background: #fff; color: var(--ink);
    box-shadow: 0 40px 100px -30px rgba(22, 18, 26, 0.6);
}
.azl-modal::backdrop { background: rgba(22, 18, 26, 0.7); backdrop-filter: blur(4px); }
.azl-modal[open] { animation: azl-in 0.22s ease both; }
@keyframes azl-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
html.azl-lock { overflow: hidden; }
.azl-m-box {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "t c x" "p p p";
    align-items: center; gap: 10px 14px; padding: 12px 14px 14px;
}
.azl-m-titles { grid-area: t; display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 4px; }
.azl-m-k { display: flex; flex: none; align-items: center; gap: 8px; margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.azl-m-titles h3 { min-width: 0; margin: 0; overflow: hidden; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.azl-m-ctrls { grid-area: c; display: flex; align-items: center; gap: 6px; }
.azl-m-x { grid-area: x; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; transition: background 0.2s ease; }
.azl-m-x:hover { background: #F6F2F1; }
.azl-m-x svg { width: 17px; height: 17px; }
.azl-m-player { grid-area: p; }
.azl-m-nav { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #FBF9F8; font: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--ink); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease; }
.azl-m-nav:hover:not(:disabled) { border-color: #D9CFCC; background: #fff; }
.azl-m-nav:disabled { opacity: 0.4; cursor: default; }
.azl-m-nav svg { flex: none; width: 13px; height: 13px; }
.azl-m-ctrls .azl-auto { margin-left: 6px; }
.azl-auto { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; border: 0; background: none; font: inherit; font-size: 0.8125rem; font-weight: 650; color: var(--ink); cursor: pointer; }
.azl-auto-sw { position: relative; flex: none; width: 32px; height: 18px; border-radius: 999px; background: #D9D3D6; transition: background 0.2s ease; }
.azl-auto-sw i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease; }
.azl-auto[aria-checked="true"] .azl-auto-sw { background: var(--ink); }
.azl-auto[aria-checked="true"] .azl-auto-sw i { transform: translateX(14px); }
.azl-m-nav:focus-visible, .azl-auto:focus-visible, .azl-m-x:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

@media (max-width: 1023.98px) {
    .azl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
}
@media (max-width: 767px) {
    .azl { padding: 72px 0 80px; }
    .azl .sec-head { margin-bottom: 28px; }
    .azl-foot { margin-top: 36px; padding-top: 32px; }
    .azl-modal { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
    .azl-m-box { min-height: 100%; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t x" "p p" "c c"; grid-template-rows: auto auto 1fr; align-content: start; padding: 12px 16px 16px; }
    .azl-m-titles { flex-direction: column; align-items: flex-start; gap: 4px; padding-left: 0; }
    .azl-m-titles h3 { white-space: normal; }
    .azl-m-ctrls { align-self: end; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); }
    .azl-m-ctrls .azl-auto { order: 2; margin: 0; }
    .azl-m-nav--next { order: 3; }
}
/* phones: one box a row, the still on the left */
@media (max-width: 559.98px) {
    .azl-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .azl-card { flex-direction: row; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; }
    .azl-thumb { flex: none; width: 120px; border-radius: 10px; }
    .azl-play { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
    .azl-play svg { width: 15px; height: 15px; margin-left: 1px; }
    .azl-len { right: 4px; bottom: 4px; padding: 1px 6px; font-size: 0.6875rem; }
    .azl-seen { top: 4px; left: 4px; padding: 1px 5px; font-size: 0.5625rem; }
    .azl-body { gap: 4px; padding: 0; }
    .azl-body b { font-size: 0.9375rem; }
    .azl-body small, .azl-watch { display: none; }
    .azl-foot-row { padding-top: 2px; }
    .azl-apps img { width: 20px; height: 20px; }
}

/* ============================================================
   SHARED PARTS
   ============================================================ */
/* a value that changes: a then b */
.lib-sw .lib-sw-b { display: none; }
.lib-sw.is-b .lib-sw-a { display: none; }
.lib-sw.is-b .lib-sw-b { display: inline; }
.lib-sw i { font-style: normal; }

/* the browser's own right-click menu (Chrome on macOS) */
.lib-ctx {
    position: absolute; z-index: 20; display: none; width: 228px; padding: 5px; box-sizing: border-box;
    border-radius: 8px; background: rgba(240, 240, 242, .97); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .2), 0 16px 36px -10px rgba(0, 0, 0, .4);
    font: 13px/1 -apple-system, 'SF Pro Text', Inter, sans-serif; color: #1D1D1F;
}
.lib-ctx.is-on { display: block; animation: lib-ctx-in .12s ease; }
@keyframes lib-ctx-in { from { opacity: 0; } }
.lib-ctx span { display: block; padding: 4px 10px; border-radius: 4px; white-space: nowrap; }
.lib-ctx span.is-hover { background: #2F6FEB; color: #fff; }
.lib-ctx i { display: block; height: 1px; margin: 5px 10px; background: rgba(0, 0, 0, .12); }

/* Chrome DevTools, docked at the foot of the tab */
.lib-dt {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 18; height: 0; overflow: hidden;
    border-top: 1px solid #CACDD1; background: #fff; font-family: -apple-system, 'SF Pro Text', Inter, sans-serif;
    transition: height .35s cubic-bezier(.2, .8, .2, 1);
}
.lib-dt.is-on { height: 330px; }
.lib-dt-tabs { display: flex; align-items: center; height: 27px; padding: 0 6px; border-bottom: 1px solid #CACDD1; background: #F1F3F4; font-size: 12px; color: #5F6368; }
.lib-dt-tabs span { position: relative; display: flex; align-items: center; height: 100%; padding: 0 10px; }
.lib-dt-tabs span.is-cur { color: #1F1F1F; }
.lib-dt-tabs span.is-cur::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #1A73E8; }
.lib-dt-pick { padding: 0 8px 0 4px !important; border-right: 1px solid #CACDD1; color: #1A73E8; }
.lib-dt-pick svg { width: 15px; height: 15px; }
.lib-dt-tree { padding: 4px 0; font: 11.5px/18px Menlo, Monaco, 'SF Mono', Consolas, monospace; color: #222; }
.lib-dt-page { display: none; }
.lib-dt-page.dp-cur { display: block; }
.lib-dt-l { position: relative; margin: 0; padding-left: calc(var(--d, 0) * 14px + 8px); white-space: nowrap; color: #727272; }
.lib-dt-l .t { color: #881280; }
.lib-dt-l .a { color: #994500; }
.lib-dt-l .v { color: #1A1AA6; }
.lib-dt-l { color: #222; }
.lib-dt-sel { background: #CFE8FC; }
.lib-dt-eq { color: #8A8A8A; }
.lib-dt-l.is-hl { background: #FFF1B8; }
.lib-dt-mark { border-radius: 2px; transition: background-color .3s ease; }
.lib-dt-l.is-hl .lib-dt-mark { background: #FFD966; }
/* the twisty: closed, then open (the options show) */
.lib-dt-tw { position: absolute; left: calc(var(--d, 0) * 14px - 4px); top: 0; width: 10px; font-style: normal; color: #727272; }
.lib-dt-tw::before { content: '\25B8'; }
.lib-dt-tw.is-on::before { content: '\25BE'; }
.lib-dt-tw.is-on ~ .lib-dt-dots, .lib-dt-tw.is-on ~ .lib-dt-close { display: none; }

/* ============================================================
   ASKPILOT: THE ID MAP TAB (app-dev.askpilot.com, 29 Oct 2026)
   ============================================================ */
.apx-idm { display: grid; grid-template-columns: 500px minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 22px; transition: none; }
.apx-idm-s + .apx-idm-s { margin-top: 26px; }
.apx-idm-s h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 21px; color: #141C20; }
.apx-idm-s h3 .lib-sw { font-weight: 400; color: #7C8B91; }
.apx-idm-empty { margin: 6px 0 0 !important; font-size: 14px; color: #7C8B91; transition: opacity .2s ease; }
.apx-idm-empty.is-off { display: none; }
.apx-idm-hd, .apx-idm-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.apx-idm-hd { margin-top: 12px; font-size: 14px; font-weight: 600; }
.apx-idm-row { margin-top: 6px; }
.apx-idm-row3, .apx-idm-s:nth-child(2) .apx-idm-hd { grid-template-columns: 92px minmax(0, 1fr) 150px 36px; }
.apx-idm-opt { justify-self: end; font-weight: 400; color: #9EAEB5; }
.apx-idm-hd .apx-idm-opt { grid-column: 3; grid-row: 1; }
.apx-idm-hd span:nth-child(3) { grid-column: 3; grid-row: 1; }
.apx-idm-sel { justify-content: space-between; color: #9AA6AC; }
.apx-idm-sel svg { width: 14px; height: 14px; color: #7C8B91; }
.apx-idm-del { display: grid; place-items: center; width: 36px; height: 36px; box-sizing: border-box; border: 1px solid #F2F3F4; border-radius: 10px; background: #F2F3F4; color: #141C20; }
.apx-idm-del svg { width: 15px; height: 15px; }
.apx-idm-add { margin-top: 12px; padding: 6px 12px; font-size: 12px; transition: background-color .15s ease; }
.apx-idm-add svg { width: 13px; height: 13px; stroke-width: 2; }
.apx-idm-add.is-hover { background: #F4F6F7; }
.apx-idm-f { margin-top: 26px !important; padding-bottom: 30px; }
.apx-idm-f .apx-btn { padding: 7px 14px; }
.apx-idm-f .apx-btn-off { border-color: #BFC6C9; background: #BFC6C9; }
.apx-idm-info { font-size: 13px; line-height: 1.34; }
.apx-idm-info .apx-steps { padding-left: 34px !important; margin-top: 6px; }
.apx-idm-info .apx-steps li + li { margin-top: 3px; }
.apx-field.is-flash { background: #FFF8DB; transition: background-color .6s ease; }

/* ============================================================
   ARYZA ADVIZE (j3, 29 Oct 2026)
   ============================================================ */
/* a campaign's statuses: Manage statuses */
.adv-stbox { width: 670px; border-radius: 3px; background: #fff; }
.adv-stbox-h { padding: 18px 20px 16px; border-bottom: 1px solid #EEF0F2; }
.adv-stbox-h h4 { margin: 0; font-size: 18px; font-weight: 500; color: #111; }
.adv-stbox-h p { margin-top: 4px !important; font-size: 10.5px; color: #333; }
.adv-stlist { margin: 20px 20px 0; border: 1px solid #E3E5E8; border-radius: 3px; }
.adv-st { display: flex; align-items: center; gap: 12px; height: 39px; padding: 0 14px; border-top: 1px solid #E8EAED; transition: background-color .3s ease; }
.adv-st:first-child { border-top: 0; }
.adv-st.is-hl { background: #FFF6D6; }
.adv-st-n { min-width: 26px; font-size: 13px; color: #555; }
.adv-lbl { padding: 4px 8px; border-radius: 2px; font-size: 11px; color: #fff; }
.adv-lbl-g { background: #008000; }
.adv-lbl-b { background: #4371CF; }
.adv-lbl-r { background: #FF0000; }
.adv-lbl-m { background: #CF53CF; }
.adv-st-i { display: flex; gap: 6px; margin-left: auto; color: #646DD8; }
.adv-st-i svg { width: 12px; height: 12px; stroke-width: 2.2; }
.adv-st-i svg + svg { color: #1D2372; }
.adv-stbox-f { display: flex; justify-content: space-between; padding: 18px 20px 20px; }
.adv-btn-l { background: #6B72DA; font-size: 14px; }
/* a status label in the campaign list's status column, and a highlighted cell */
.adv-table td.is-hl { background: #FFF6D6 !important; box-shadow: inset 0 0 0 1.5px #F2C94C; }

/* a client's record: the header, the tabs, the form, and the right column */
.adv-cl-ph { gap: 14px; height: 66px; }
.adv-cl-ph h2 { font-size: 26px; }
.adv-cl-tel { font: 13px/1 Menlo, Monaco, monospace; color: #646DD8; }
.adv-cl-div { padding: 4px 7px; border-radius: 2px; background: #E4E6EA; font-size: 10.5px; color: #fff; }
.adv-cl-st { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11px; color: #4A535E; }
.adv-cl-st small { font-size: 10px; text-transform: uppercase; color: #8A9099; }
.adv-cl-st b { padding: 3px 7px; border-radius: 2px; background: #8E959D; font-size: 10.5px; font-weight: 500; text-transform: uppercase; color: #fff; transition: background-color .4s ease; }
.adv-cl-body { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 18px; padding: 18px 18px 0; }
.adv-cl-tabs { display: flex; height: 50px; padding-left: 4px; overflow: hidden; background: #1D2372; font-size: 12.5px; white-space: nowrap; color: rgba(255, 255, 255, .78); }
.adv-cl-tabs span { display: flex; align-items: center; padding: 0 9px; flex: none; }
.adv-cl-tabs span.is-cur { background: #12164E; color: #fff; }
.adv-cl-form { padding: 16px 18px 20px; background: #FCFCFC; }
.adv-cl-r { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px !important; }
.adv-cl-r label { display: block; font-size: 12.5px; color: #333; }
.adv-cl-in { position: relative; display: flex; align-items: center; height: 31px; margin-top: 6px; padding: 0 10px; box-sizing: border-box; border: 1px solid #CCC; border-radius: 4px; background: #fff; font-size: 13px; color: #555; white-space: nowrap; overflow: hidden; transition: box-shadow .3s ease, background-color .6s ease; }
.adv-cl-sel::after { content: ''; position: absolute; right: 10px; top: 11px; width: 5px; height: 5px; border-right: 1.3px solid #666; border-bottom: 1.3px solid #666; transform: rotate(45deg); }
.adv-cl-in.is-focus { box-shadow: 0 0 0 3px rgba(100, 109, 216, .25); border-color: #9EA3E8; }
.adv-mono { font-family: Menlo, Monaco, monospace; font-size: 12px; }
.adv-pan { margin-bottom: 16px; border-radius: 3px; background: #fff; overflow: hidden; }
.adv-pan-h { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 16px; background: #1D2372; font-size: 12.5px; font-weight: 500; text-transform: uppercase; color: #fff; }
.adv-pan-va { padding: 5px 9px; border-radius: 2px; background: #fff; font-size: 11px; text-transform: none; color: #333; }
.adv-pan-min { font-size: 16px; }
.adv-notes-b { padding: 6px 6px 8px; border-bottom: 1px solid #EEE; }
.adv-notes-b > .adv-cl-in { margin-top: 0; }
.adv-notes-ta { display: block; height: 30px; padding: 8px 4px 0; font-size: 12px; color: #777; }
.adv-notes-row { display: grid; grid-template-columns: 186px 1fr; gap: 18px; margin-top: 4px !important; }
.adv-notes-row .adv-cl-in { margin-top: 0; }
.adv-notes-btn { display: grid; place-items: center; height: 31px; border-radius: 2px; background: #E9E9EB; font-size: 13px; color: #fff; }
.adv-notes-list { padding: 10px 14px 6px; }
.adv-notes-tools { display: flex; justify-content: flex-end; gap: 6px; }
.adv-notes-tools span { padding: 3px 7px; border-radius: 2px; background: #E6E7EA; font-size: 10.5px; color: #555; }
.adv-note { padding: 12px 0 10px; border-bottom: 1px solid #EEE; }
.adv-note:last-child { border-bottom: 0; }
.adv-note p { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #555; }
.adv-note-av { flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #D2D4D8 0 27%, transparent 28%), radial-gradient(circle at 50% 110%, #D2D4D8 0 48%, transparent 49%), #ECEDF0; }
.adv-note small { display: block; margin: 6px 0 0 30px; font-size: 10.5px; color: #646DD8; }
.adv-note .adv-note-c { margin-top: 2px; }

/* Settings > Documents Structure */
.adv-fold-root { margin: 0; padding: 11px 14px; border-radius: 3px; background: #F2F3F5; font-size: 12.5px; color: #4A535E; }
.adv-folds { margin-top: 14px; border-radius: 3px; background: #fff; }
.adv-fold { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px; border-bottom: 1px solid #EEF0F2; font-size: 12.5px; color: #4F5FD0; transition: background-color .3s ease; }
.adv-fold-ico { width: 13px; height: 13px; color: #4A535E; }
.adv-fold-i { display: flex; gap: 9px; margin-left: auto; color: #4F5FD0; }
.adv-fold-i svg { width: 11px; height: 11px; stroke-width: 2.2; }
.adv-fold.is-hl { background: #E7EEFF; }

/* the menus and DevTools on the Advize pages: where each one opens */
[data-k="ctx-n"] { left: 900px; top: 330px; }
[data-k="ctx-f"] { left: 250px; top: 420px; }

/* ============================================================
   ASKPILOT: A WORKFLOW'S PAGE (app-dev.askpilot.com, 29 Oct 2026)
   ============================================================ */
.apx-wfd.dp-cur { position: relative; }
.apx-wfd .apx-stabs { margin-top: 26px !important; }
.apx-wfd-body { position: absolute; left: 32px; right: 32px; top: 150px; bottom: 0; overflow: hidden; }
.apx-wfd-doc.is-off, .apx-wfd-set.is-off { display: none; }
.apx-wfd-meta { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 18px 0 12px !important; font-size: 13.5px; color: #7C8B91; white-space: nowrap; }
.apx-wfd-meta svg { width: 14px; height: 14px; color: #141C20; }
.apx-wfd-meta img { width: 13px; height: 13px; }
.apx-wfd-meta b { font-weight: 600; color: #141C20; }
.apx-wfd-tl { margin-left: 16px; }
.apx-doc { width: 820px; margin: 0 auto; padding: 22px 26px 40px; box-sizing: border-box; min-height: 520px; border: 1px solid #E6EBED; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(20, 28, 32, .04); font-size: 14px; line-height: 1.6; color: #141C20; transition: box-shadow .4s ease; }
.apx-doc b { font-weight: 600; color: #A12A2A; }
.apx-doc ol, .apx-doc ul { margin: 8px 0 0 !important; padding-left: 22px !important; }
.apx-doc li + li { margin-top: 4px; }
.apx-doc p + p { margin-top: 10px !important; }
.apx-doc .lib-new { border-radius: 4px; transition: background-color .6s ease; }
/* the change shows as it lands: the new words appear in green, the old ones are struck out */
.apx-doc .lib-new:not(.is-on) { display: none; }
.apx-doc .lib-new.is-on { background: #E5F6EC; }
.apx-doc .lib-old.is-on { background: #FBE7E7; text-decoration: line-through; text-decoration-color: rgba(161, 42, 42, .55); }
.apx-wfd-set { height: 100%; }
.apx-wfd-form { width: 572px; margin: 0 auto; padding: 22px 0 60px; }
.apx-wfd-form label, .apx-wfd-lab b { display: block; margin: 0 0 7px; font-size: 14px; font-weight: 600; color: #141C20; }
.apx-wfd-lab { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2px !important; }
.apx-wfd-lab span { font-size: 13px; color: #9EAEB5; }
.apx-wfd-form .apx-field { margin-bottom: 0; background: #fff; }
.apx-wfd-form .apx-field + .apx-field { margin-top: 8px; }
.apx-wfd-form .apx-hint { margin: 6px 0 18px !important; line-height: 1.35; align-items: flex-start; }
.apx-wfd-form .apx-hint svg { flex: none; margin-top: 2px; }
.apx-wfd-form hr { height: 1px; margin: 4px 0 18px; border: 0; background: #E6EBED; }
.apx-wfd-drop { display: flex; align-items: center; gap: 6px; margin: 0 0 22px !important; padding: 9px 12px; border: 1px dashed #B5C3F7; border-radius: 8px; background: #F2F5FE; font-size: 12.5px; color: #3D5AD6; }
.apx-wfd-drop svg { width: 13px; height: 13px; }
.apx-sel { justify-content: flex-start; gap: 8px; }
.apx-sel > svg:last-child { width: 15px; height: 15px; margin-left: auto; color: #7C8B91; }
.apx-sel .apx-sel-i { width: 14px; height: 14px; flex: none; }
.apx-sel.is-flash, .apx-field.is-flash { background: #FFF8DB; }
.apx-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border: 1px solid #E1E6E8; border-radius: 6px; font-size: 12.5px; }
.apx-chip img { width: 12px; height: 12px; }
.apx-wfd-url { margin: 0 0 14px; }
.apx-wfd-url .apx-url code { font-size: 12.5px; }
.apx-wfd-add { display: flex; align-items: center; gap: 6px; margin: 0 0 18px !important; font-size: 14px; font-weight: 600; color: #4C6BEE; }
.apx-wfd-add svg { width: 15px; height: 15px; stroke-width: 2; }
.apx-chips .is-r { background: #FEF1F1; }
.apx-chips .is-r::before { background: #E5484D; }

/* ============================================================
   ARYZA ADVIZE: A TRIGGER'S STATE AND AN ACTION'S CONDITIONS
   (j3, 29 Oct 2026)
   ============================================================ */
.adv-paused { float: right; margin-left: 10px; padding: 4px 8px; border-radius: 2px; background: #F0AD4E; font-size: 11px; line-height: 1; color: #fff; }
.adv-paused.is-off { display: none; }
.lib-tsw .lib-ic-run { display: none; }
.lib-tsw.is-on .lib-ic-run { display: block; }
.lib-tsw.is-on .lib-ic-off { display: none; }
.adv-ablock-c { height: auto; align-items: flex-start; }
.adv-ablock-c .adv-aname { height: 54px; }
.adv-ablock-c .adv-when { height: 34px; margin: 9px 0; }
.adv-condw { flex: 1; min-width: 0; }
.adv-condw .adv-cond { height: 54px; }
.adv-clist { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.adv-cline { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 13px 54px 13px 16px; border-top: 1px solid #EEF0F2; font-size: 12.5px; color: #4A535E; }
.adv-cline:first-child { border-top: 0; }
.adv-cline-l { display: block; margin-top: 5px; }
.adv-cline-m { font-size: 12.5px; }
.adv-cline-i { position: absolute; right: 14px; top: 13px; display: flex; gap: 9px; color: #4A535E; }
.adv-cline-i svg { width: 11px; height: 11px; }
[data-k="act-conds"].is-flash .adv-clist { box-shadow: 0 0 0 2px #F2C94C; }

/* ============================================================
   ARYZA ADVIZE: A CLIENT'S TABS (j3, client 967497, 29 Oct 2026)
   ============================================================ */
.adv-cpane { display: none; }
.adv-cpane.is-on { display: block; }
.adv-cl-tabs span { transition: background-color .2s ease; }
.adv-cl-tabs span.is-hover { background: #2A318A; }
.adv-cl-sub { display: flex; height: 48px; margin: 0 !important; background: #1D2372; }
.adv-cl-sub span { flex: 1; display: grid; place-items: center; font-size: 13px; color: #fff; }
.adv-cl-sub span.is-cur { background: #fff; color: #646DD8; }
.adv-cl-sub2 span { flex: none; width: 50%; }
.adv-sfs { padding: 6px 16px 10px; background: #fff; }
.adv-sfs-g { display: flex; justify-content: space-between; align-items: center; height: 40px; margin: 0 !important; border-bottom: 1px solid #ECEEF1; font-size: 12px; color: #333; }
.adv-sfs-g b { font-weight: 500; text-transform: uppercase; }
.adv-sfs-l { display: grid; grid-template-columns: 170px 160px 104px 150px; gap: 12px; align-items: center; margin: 9px 0 0 !important; transition: background-color .5s ease; }
.adv-sfs-l label { display: flex; justify-content: flex-end; gap: 5px; font-size: 12px; color: #646DD8; text-align: right; }
.adv-sfs-l label svg { width: 11px; height: 11px; margin-top: 2px; }
.adv-sfs-l .adv-cl-in { margin: 0; }
.adv-sfs-l.is-flash .adv-cl-in { background: #FFF6D6; }
.adv-sfs-amt { gap: 8px; padding-left: 0; }
.adv-sfs-amt i { display: grid; place-items: center; align-self: stretch; width: 28px; border-right: 1px solid #DDD; background: #F3F4F6; font-style: normal; color: #666; }
.adv-sfs-l + .adv-sfs-g { margin-top: 12px !important; }
.adv-sfs-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.adv-sfs-bar p { margin: 0; padding: 10px 14px 9px; background: #DCDEE1; color: #555; transition: box-shadow .4s ease; }
.adv-sfs-bar p.is-g { background: #CFE9D4; color: #2E7D32; }
.adv-sfs-bar p.is-r { background: #F8C4C4; color: #E53935; }
.adv-sfs-bar small { display: block; font-size: 13px; }
.adv-sfs-bar b { display: block; margin-top: 2px; font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
.adv-sfs-bar.is-flash p { box-shadow: inset 0 0 0 2px rgba(242, 201, 76, .9); }
.adv-debts { padding: 12px 14px; background: #fff; }
.adv-debt-s { margin: 0 0 10px !important; color: #999; }
.adv-debt { display: grid; grid-template-columns: 128px 104px 124px 112px 112px 26px; gap: 8px; align-items: center; margin: 0 0 8px !important; }
.adv-debt .adv-cl-in { margin: 0; font-size: 12.5px; }
.adv-debt-h { margin-bottom: 4px !important; font-size: 11.5px; color: #333; }
.adv-debt-x { display: grid; place-items: center; height: 31px; border-radius: 3px; background: #F04438; color: #fff; font-size: 16px; }
.dv-in.is-on > .adv-debt .adv-cl-in { animation: lib-flash 1.4s ease; }
@keyframes lib-flash { 0%, 40% { background: #FFF6D6; } 100% { background: #fff; } }
.adv-cl-ro { background: #E9ECEF !important; }
.adv-cl-ro.is-flash { background: #FFF1B8 !important; }
.adv-cl-addr { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 6px; }
.adv-cl-addr label { font-size: 12.5px; color: #333; }
.adv-pc { justify-content: space-between; padding-right: 0; color: #999; }
.adv-pc i { display: grid; place-items: center; width: 40px; align-self: stretch; border-left: 1px solid #DDD; background: #F3F4F6; }
.adv-pc svg { width: 13px; height: 13px; }
.adv-cl-lab { display: block; font-size: 12.5px; color: #333; }
.adv-cl-addr > div .adv-cl-in { margin-top: 6px; }
.adv-cl-in.is-flash { background: #FFF1B8; }
.adv-table tr.is-flash td { background: #FFF4CF !important; transition: background-color .6s ease; }
.adv-cl-st b.is-flash { background: #2E7D32; }
.adv-note { transition: background-color .6s ease; }
.dv-in.is-on > .adv-note { animation: lib-flash 1.8s ease; }

/* Client files, in the right column */
.adv-files-b { padding: 10px 14px 14px; }
.adv-drop { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0 0 10px !important; padding: 12px; border: 1.5px dashed #BDC1C7; border-radius: 3px; font-size: 12px; color: #555; }
.adv-drop svg { width: 14px; height: 14px; color: #555; }
.adv-files .adv-fold-root { margin-bottom: 6px !important; }
.adv-fold-root i { margin: 0 4px; font-style: normal; color: #B8BCC2; }
.adv-file { display: flex; align-items: center; gap: 8px; margin: 0 !important; padding: 8px 4px; border-bottom: 1px solid #EEF0F2; font-size: 12px; color: #4F5FD0; }
.adv-file svg { flex: none; width: 13px; height: 13px; color: #4A535E; }
.adv-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-file small { font-size: 11px; color: #777; }
.dv-in.is-on > .adv-file { animation: lib-flash 1.6s ease; }

/* ============================================================
   ASKPILOT: A TABLE IN WHAT ASK SAYS; WHATSAPP: A DOCUMENT
   ============================================================ */
.apx-tbl { width: 100%; margin: 8px 0 4px; border-collapse: collapse; border: 1px solid #E6EBED; border-radius: 8px; font-size: 13px; }
.apx-tbl th, .apx-tbl td { padding: 6px 10px; border-bottom: 1px solid #E6EBED; text-align: left; }
.apx-tbl th { background: #F8FAFB; font-weight: 600; color: #54626C; }
.apx-tbl td:first-child { font-weight: 600; }
.apx-tbl tr.is-diff td:last-child { color: #B42318; font-weight: 600; }
.wa-doc { display: flex; align-items: center; gap: 10px; width: 210px; margin: -2px -4px 0 -5px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .05); }
.wa-doc svg { flex: none; width: 30px; height: 34px; }
.wa-doc b { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.25; }
.wa-doc small { display: block; font-size: 12px; color: #667781; }
.wa-msg p:has(.wa-doc) time { margin-top: 6px; }

/* Claude: a paragraph after a list in the answer */
.cl-a ol + p { margin-top: 8px; }

/* ============================================================
   PHONES (.dp-narrow, under 560px): the wide columns come in
   ============================================================ */
.dp-narrow .apx-idm { grid-template-columns: 430px 380px; }
.dp-narrow .lib-dt.is-on { height: 300px; }
.dp-narrow .apx-doc { width: 460px; }
.dp-narrow .apx-wfd-form { width: 440px; }
.dp-narrow .apx-wfd-meta { justify-content: flex-start; }
.dp-narrow .adv-cl-body { grid-template-columns: 560px 392px; }
.dp-narrow .apx-feed-in { max-width: 460px; }

/* the player in the popup: no outline when it takes focus from a click */
.azl-modal .dp:focus:not(:focus-visible) { outline: none; }