/* t181u: new tasks layout (flagged drivers only). The old list parts are hidden only once the new layout has started
   (body[data-da-ul2-on] is set by da-upload-layout.js), so if the script fails the old list still shows. */
body[data-da-ul2-on] [data-da-tasks-list] > [data-da-task-items],
body[data-da-ul2-on] [data-da-tasks-list] > .da-task-list,
body[data-da-ul2-on] [data-da-tasks-filter-tabs],
body[data-da-ul2-on] [data-da-tasks-list-head],
body[data-da-ul2-on] [data-da-tasks-filter-panel="processing"] { display: none !important; }

.ul2 { --ul2-ok: #1e8e3e; --ul2-bad: #d93025; --ul2-wait: #b26a00; --ul2-next: #f4b400; color: var(--da-text, #183029); font-size: 0.95rem; padding-bottom: 1rem; }
.ul2[hidden] { display: none !important; }
.ul2 * { box-sizing: border-box; }
.ul2-h { margin: 1.25rem 0 0.5rem; font-size: 1rem; font-weight: 700; }

/* t198u: one short X left. Next line (old to-do list removed) */
.ul2-need { margin: 0.25rem 0 0.75rem; }
.ul2-need:empty { display: none; }
.ul2-next-line { display: flex; align-items: center; gap: 0.5rem; width: 100%; margin: 0; padding: 0.55rem 0.8rem; border: 1px solid var(--da-border, #dce4df); border-radius: 12px; background: var(--da-surface, #fff); font: inherit; font-weight: 700; color: inherit; text-align: left; min-height: 2.6rem; -webkit-tap-highlight-color: transparent; }
button.ul2-next-line { cursor: pointer; }
button.ul2-next-line:focus-visible { outline: 2px solid var(--da-brand, #1f8a4d); outline-offset: 2px; }
.ul2-next-text { flex: 1; min-width: 0; }
.ul2-next-go { color: var(--da-muted, #5c6b64); font-size: 1.2rem; line-height: 1; }
.ul2-next-line--done { border-color: #bfe3cb; color: var(--ul2-ok); }
.ul2-next-badge { flex: 0 0 auto; font-size: 0.72rem; font-weight: 800; color: #6b4e00; background: var(--ul2-next); border-radius: 999px; padding: 0.1rem 0.5rem; }
.ul2-card.is-next { border-color: var(--ul2-next); box-shadow: 0 0 0 1px var(--ul2-next); }
@keyframes ul2-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 180, 0, 0); } 30% { box-shadow: 0 0 0 4px rgba(244, 180, 0, 0.75); } }
.ul2-flash { animation: ul2-flash 0.9s ease-in-out 2; }

/* icons */
.ul2-ic { flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 900; line-height: 1; border: 2px solid var(--da-border, #dce4df); color: transparent; background: #fff; }
.ul2-ic--ok { background: var(--ul2-ok); border-color: var(--ul2-ok); color: #fff; }
.ul2-ic--bad { background: var(--ul2-bad); border-color: var(--ul2-bad); color: #fff; }
.ul2-ic--send, .ul2-ic--read, .ul2-ic--wait { border-color: var(--da-brand, #1f8a4d); color: var(--da-brand, #1f8a4d); }
.ul2-ic--wait { border-color: var(--ul2-wait); color: var(--ul2-wait); }

/* master upload card */
.ul2-master { position: relative; background: linear-gradient(180deg, #eaf6ef, #fff); border: 2px solid var(--da-brand, #1f8a4d); border-radius: 18px; padding: 1rem 1rem 0.9rem; min-height: 15rem; }
.ul2-master-title { font-weight: 800; font-size: 1.15rem; }
.ul2-master-sub { color: var(--da-muted, #5c6b64); font-size: 0.85rem; margin-top: 0.2rem; max-width: 22rem; }
.ul2-master-btns { display: flex; gap: 0.5rem; margin-top: 0.8rem; flex-wrap: wrap; }
.ul2-net { margin-top: 0.6rem; font-weight: 700; color: var(--ul2-wait); font-size: 0.85rem; }
.ul2-net[hidden] { display: none; }
.ul2-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; padding-right: 0; }
.ul2-thumbs[hidden] { display: none; }
.ul2-thumb { width: 6.2rem; background: #fff; border: 1px solid var(--da-border, #dce4df); border-radius: 10px; padding: 0.3rem; font-size: 0.72rem; }
.ul2-thumb--wide { width: 100%; }
.ul2-thumb-pic { position: relative; height: 4.2rem; border-radius: 6px; overflow: hidden; background: #f1f4f2; display: flex; align-items: center; justify-content: center; }
.ul2-thumb--wide .ul2-thumb-pic { width: 6rem; }
.ul2-thumb-pic img { width: 100%; height: 100%; object-fit: cover; }
.ul2-thumb-pic .ul2-ic { position: absolute; right: 3px; top: 3px; }
.ul2-thumb-file { font-weight: 800; color: var(--da-muted, #5c6b64); }
.ul2-thumb-label { font-weight: 700; margin-top: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ul2-thumb-status { color: var(--da-muted, #5c6b64); line-height: 1.25; }
.ul2-thumb--problem .ul2-thumb-status { color: var(--ul2-bad); font-weight: 600; }
.ul2-thumb--waiting .ul2-thumb-status { color: var(--ul2-wait); font-weight: 600; }
.ul2-bar { height: 5px; border-radius: 3px; background: #e3ebe6; overflow: hidden; margin-top: 0.25rem; }
.ul2-bar-fill { height: 100%; width: 0; background: var(--da-brand, #1f8a4d); transition: width 0.2s; }
.ul2-choose { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.ul2-chip { border: 1px solid var(--da-brand, #1f8a4d); background: #fff; color: var(--da-brand-dark, #166b3c); border-radius: 999px; padding: 0.3rem 0.65rem; font: inherit; font-size: 0.8rem; font-weight: 600; }
.ul2-chip--x { border-color: var(--da-border, #dce4df); color: var(--da-muted, #5c6b64); }

/* GSI: avatar bottom-right with a speech bubble */
.ul2-gsi { display: flex; justify-content: flex-end; align-items: flex-end; gap: 0.5rem; margin-top: 0.9rem; }
.ul2-avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); background: #fff; }
.ul2-bubble { position: relative; max-width: 15.5rem; background: #fff; border: 1px solid var(--da-border, #dce4df); border-radius: 14px 14px 4px 14px; padding: 0.55rem 0.7rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); margin-bottom: 1.2rem; }
.ul2-bubble::after { content: ''; position: absolute; right: -7px; bottom: 8px; width: 12px; height: 12px; background: #fff; border-right: 1px solid var(--da-border, #dce4df); border-bottom: 1px solid var(--da-border, #dce4df); transform: rotate(-45deg); }
.ul2-bubble-main { font-weight: 800; }
.ul2-bubble-sub { font-size: 0.82rem; color: var(--da-muted, #5c6b64); margin-top: 0.15rem; }
.ul2-bubble-sub[hidden] { display: none; }
.ul2-bubble.is-bad { border-color: var(--ul2-bad); background: #fff5f4; }
.ul2-bubble.is-bad::after { background: #fff5f4; border-color: var(--ul2-bad); }
.ul2-bubble.is-bad .ul2-bubble-main { color: #8c1d18; }
.ul2-btn--retake { margin-top: 0.45rem; }
.ul2-btn--retake[hidden] { display: none; }

/* buttons */
.ul2-btn { appearance: none; border: 1px solid var(--da-brand, #1f8a4d); background: #fff; color: var(--da-brand-dark, #166b3c); border-radius: 10px; padding: 0.55rem 0.9rem; font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; min-height: 2.6rem; }
.ul2-btn--main { background: var(--da-brand, #1f8a4d); color: #fff; }
.ul2-btn:active { transform: translateY(1px); }

/* document cards */
.ul2-cards { display: grid; gap: 0.6rem; }
.ul2-card { background: var(--da-surface, #fff); border: 1px solid var(--da-border, #dce4df); border-radius: 14px; padding: 0.75rem 0.85rem; }
.ul2-card--ok { border-color: #bfe3cb; }
.ul2-card--bad { border-color: var(--ul2-bad); }
.ul2-card--check { border-color: var(--da-brand, #1f8a4d); }
.ul2-card-head { display: flex; align-items: center; gap: 0.55rem; }
/* t189u: the head is the expand / collapse button; Done cards collapse to this one row */
.ul2-card-head[role=button] { width: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 2.25rem; }
.ul2-card-head[role=button]:focus-visible { outline: 2px solid var(--da-brand, #1f8a4d); outline-offset: 3px; border-radius: 8px; }
.ul2-card--closed { padding-top: 0.5rem; padding-bottom: 0.5rem; }
/* t188u: card thumbnails (one per part) and the medium view */
.ul2-tns { display: inline-flex; gap: 0.3rem; flex: 0 0 auto; }
.ul2-tn { width: 2.25rem; height: 2.25rem; padding: 0; margin: 0; border: 1px solid var(--da-border, #dce4df); border-radius: 6px; background: #f2f5f3; overflow: hidden; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.ul2-tn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ul2-tn--doc { cursor: default; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.03em; color: var(--da-muted, #5c6b64); }
.ul2-tn:focus-visible { outline: 2px solid var(--da-brand, #1f8a4d); outline-offset: 2px; }
.ul2-zoom { position: fixed; inset: 0; z-index: 2147483000; background: rgba(10, 20, 16, 0.82); display: flex; align-items: center; justify-content: center; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); overscroll-behavior: contain; touch-action: pinch-zoom; }
.ul2-zoom-box { width: 100%; max-width: 32rem; max-height: 100%; display: flex; flex-direction: column; gap: 0.6rem; }
.ul2-zoom-top { display: flex; align-items: center; gap: 0.6rem; color: #fff; }
.ul2-zoom-title { flex: 1; font-weight: 700; }
.ul2-zoom-close { border: 0; border-radius: 999px; padding: 0.5rem 1rem; font: inherit; font-weight: 700; background: #fff; color: #183029; min-height: 2.5rem; }
.ul2-zoom-img { width: 100%; max-height: 75vh; object-fit: contain; border-radius: 10px; background: #fff; }
.ul2-zoom-wait { color: #fff; text-align: center; padding: 3rem 0; }
.ul2-card-chev { flex: 0 0 auto; width: 1rem; text-align: center; color: var(--da-muted, #5c6b64); font-size: 0.8rem; }
.ul2-card-title { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; } /* t239u: uses the width freed by Done/Replace */
.ul2-status { font-size: 0.75rem; font-weight: 700; border-radius: 999px; padding: 0.15rem 0.55rem; background: #eef2ef; color: var(--da-muted, #5c6b64); white-space: nowrap; }
.ul2-status--ok { background: #e3f4e8; color: var(--ul2-ok); }
.ul2-status--bad { background: #fde8e6; color: var(--ul2-bad); }
.ul2-status--wait { background: #fff1d6; color: var(--ul2-wait); }
.ul2-status--send, .ul2-status--read, .ul2-status--check { background: #e6f3ec; color: var(--da-brand-dark, #166b3c); }
.ul2-card-body { margin-top: 0.55rem; }
.ul2-card--ok .ul2-card-body .ul2-card-btns, .ul2-card--ok .ul2-part .ul2-btn { display: none; }
.ul2-card-msg { color: #8c1d18; background: #fff5f4; border-radius: 8px; padding: 0.4rem 0.55rem; font-size: 0.85rem; margin-bottom: 0.45rem; }
.ul2-card-btns { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.ul2-card-btns:empty { display: none; }
.ul2-part { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.ul2-part-label { flex: 1 1 100%; font-size: 0.82rem; color: var(--da-muted, #5c6b64); }
.ul2-part--bad .ul2-part-label { color: var(--ul2-bad); font-weight: 700; }
.ul2-part--ok .ul2-part-label, .ul2-part--check .ul2-part-label { color: var(--ul2-ok); }
.ul2-card-more { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px dashed var(--da-border, #dce4df); }
.ul2-card-note { font-size: 0.82rem; color: var(--da-muted, #5c6b64); margin-bottom: 0.4rem; }

/* other details / forms rows */
.ul2-other { display: grid; gap: 0.35rem; }
.ul2-row { appearance: none; display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left; background: var(--da-surface, #fff); border: 1px solid var(--da-border, #dce4df); border-radius: 12px; padding: 0.7rem 0.8rem; font: inherit; color: inherit; cursor: pointer; }
.ul2-row-name { flex: 1; font-weight: 600; }
.ul2-row--ok .ul2-row-name { color: var(--da-muted, #5c6b64); font-weight: 500; }
.ul2-row-note { font-size: 0.75rem; color: var(--da-muted, #5c6b64); }
.ul2-row-go { color: var(--da-muted, #5c6b64); font-size: 1.2rem; }
/* t215u: GSI asks (one button per likely document / Replace / Different document / Cancel) and Replace on done cards */
.ul2-ask { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.ul2-ask[hidden] { display: none; }
.ul2-chip--main { background: var(--da-brand, #1f8a4d); color: #fff; }
.ul2-replace { flex: 0 0 auto; border: 1px solid var(--da-border, #dce4df); background: #fff; color: var(--da-brand-dark, #166b3c); border-radius: 999px; padding: 0.15rem 0.55rem; font: inherit; font-size: 0.75rem; font-weight: 700; cursor: pointer; }
.ul2-replace-row { margin-top: 0.5rem; display: grid; gap: 0.4rem; }
/* t239u: Replace photo inside the open card */
.ul2-card-replace { margin-top: 0.75rem; display: flex; }
.ul2-replace--in { padding: 0.45rem 1rem; font-size: 0.85rem; }
.ul2-card--ok .ul2-card-body .ul2-replace-row .ul2-card-btns { display: flex; }
.ul2-replace-row .ul2-card-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

/* t218u: saved details inline on an open Done card */
.ul2-details { display: flex; align-items: flex-start; gap: 0.6rem; }
.ul2-det { margin: 0; flex: 1 1 auto; display: grid; gap: 0.25rem; }
.ul2-det-row { display: flex; gap: 0.5rem; font-size: 0.9rem; line-height: 1.3; }
.ul2-det-k { margin: 0; flex: 0 0 7.5rem; color: var(--da-muted, #5c6b63); }
.ul2-det-v { margin: 0; flex: 1 1 auto; font-weight: 600; word-break: break-word; }
.ul2-det-edit { flex: 0 0 auto; background: none; border: 0; padding: 0.2rem 0.3rem; color: var(--da-accent, #1f7a4d); font: inherit; font-size: 0.9rem; text-decoration: underline; cursor: pointer; }

/* t225u/t226u: GSI questions + answer/Change in Other details */
.ul2-btn--skip{background:transparent;border-color:transparent;text-decoration:underline;opacity:.8}
.ul2-row-change{margin-left:8px;font-weight:600;text-decoration:underline}
.ul2-card-help{margin-bottom:8px}

/* t234u: question rows expand inline */
.ul2-row--exp.is-open{border-bottom-left-radius:4px;border-bottom-right-radius:4px}
.ul2-row-opts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px 14px;margin:-6px 0 8px;background:#fff;border:1px solid var(--da-line,#d7e6dc);border-top:0;border-radius:0 0 14px 14px}
.ul2-row-opts .ul2-btn{border-radius:999px}
.ul2-row-opts .ul2-btn[aria-pressed="true"]{cursor:default}

/* ticket-parity-preview-viewer: staff Preview full-size viewer = one rounded card, Preview-style dark green header,
   CRM driver-card round close (wf-induction-frame-close / pipeline2-card-close look), image fits width and scrolls. */
.ul2-zoom--pv { background: rgba(10, 20, 16, 0.55); padding: 0.75rem; align-items: center; touch-action: none; }
.ul2-zoom--pv .ul2-zoom-box { gap: 0; max-width: 30rem; max-height: calc(100% - 0.5rem); background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 48px rgba(10, 20, 16, 0.38), 0 2px 8px rgba(10, 20, 16, 0.18); }
.ul2-zoom--pv .ul2-zoom-top { flex: 0 0 auto; box-sizing: border-box; min-height: 46px; padding: 0 0.6rem 0 0.95rem; gap: 0.6rem; background: #17362c; color: #fff; }
.ul2-zoom--pv .ul2-zoom-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; font-weight: 700; color: #fff; }
.ul2-zoom--pv .ul2-zoom-x { position: static; top: auto; right: auto; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 26px; min-width: 26px; min-height: 26px; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 999px; background: #17362c; color: #fff; font-size: 22px; font-weight: 400; line-height: 0; cursor: pointer; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6); }
.ul2-zoom--pv .ul2-zoom-x > span[aria-hidden="true"] { display: block; width: 26px; height: 26px; line-height: 26px; text-align: center; transform: translateY(1px); }
.ul2-zoom--pv .ul2-zoom-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ul2-zoom--pv .ul2-zoom-body { position: relative; flex: 0 0 auto; min-height: 0; overflow: hidden; overscroll-behavior: contain; touch-action: none; padding: 0; background: #f3f6f4; cursor: zoom-in; -webkit-user-select: none; user-select: none; }
.ul2-zoom--pv .ul2-zoom-body.is-zoomed { cursor: grab; }
.ul2-zoom--pv .ul2-zoom-body.is-zoomed:active { cursor: grabbing; }
.ul2-zoom--pv .ul2-zoom-img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto; max-width: none; max-height: none; object-fit: initial; border-radius: 0; background: #fff; transform-origin: 0 0; will-change: transform; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.ul2-zoom--pv .ul2-zoom-ctl { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; gap: 6px; }
.ul2-zoom--pv .ul2-zoom-btn { box-sizing: border-box; min-width: 32px; height: 32px; padding: 0 0.6rem; border: 0; border-radius: 999px; background: rgba(23, 54, 44, 0.88); color: #fff; font: inherit; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(10, 20, 16, 0.28); }
.ul2-zoom--pv .ul2-zoom-btn--txt { font-size: 0.8rem; }
.ul2-zoom--pv .ul2-zoom-btn:focus-visible { outline: 2px solid #17362c; outline-offset: 2px; }
.ul2-zoom--pv .ul2-zoom-wait { position: static; color: #17362c; padding: 3rem 0; }
/* ticket-parity-doc-rotate: rotate button (same round look as the close), immediately left of it */
.ul2-zoom--pv .ul2-zoom-rot { margin-left: auto; }
.ul2-zoom--pv .ul2-zoom-rot + .ul2-zoom-x { margin-left: 8px; }
.ul2-zoom--pv .ul2-zoom-rot > span[aria-hidden="true"] { display: flex; align-items: center; justify-content: center; transform: none; }
.ul2-zoom--pv .ul2-zoom-rot svg { display: block; width: 17px; height: 17px; }
.ul2-zoom--pv .ul2-zoom-rot:disabled { opacity: 0.6; cursor: progress; }
.ul2-zoom--pv .ul2-zoom-msg { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 3; padding: 0.5rem 0.7rem; border-radius: 10px; background: rgba(23, 54, 44, 0.92); color: #fff; font-size: 0.85rem; text-align: center; }
/* ticket-parity-modal-close-style: viewer × and rotate in the same plain style as the CRM staff Preview header
   (× = maple-close-circle card-corner; rotate = pipeline2-driver-app-frame-refresh). No ring. */
html body .ul2-zoom--pv .ul2-zoom-top { padding-right: 10px; }
html body .ul2-zoom--pv .ul2-zoom-x { box-shadow: none !important; outline: none !important; background: #17362c !important; }
html body .ul2-zoom--pv .ul2-zoom-x:not(.ul2-zoom-rot):hover { background: #1f4a3c !important; }
html body .ul2-zoom--pv .ul2-zoom-x:not(.ul2-zoom-rot):focus-visible { background: #1f4a3d !important; outline: none !important; }
html body .ul2-zoom--pv .ul2-zoom-rot + .ul2-zoom-x { margin-left: 6px; }
html body .ul2-zoom--pv .ul2-zoom-rot::before { content: none !important; display: none !important; }
html body .ul2-zoom--pv .ul2-zoom-rot > span[aria-hidden="true"] { display: flex !important; align-items: center; justify-content: center; width: 26px; height: 26px; line-height: 1; transform: none; }
html body .ul2-zoom--pv .ul2-zoom-rot svg { display: block; width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
html body .ul2-zoom--pv .ul2-zoom-rot:hover:not(:disabled), html body .ul2-zoom--pv .ul2-zoom-rot:focus-visible:not(:disabled) { background: #1f4a3d !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35) !important; outline: none !important; }

/* ticket-parity-howwork: GSI in her own rounded card directly under the upload card (avatar left, speech bubble right) */
.ul2-master { min-height: 0; }
.ul2-gsi-card { margin-top: 0.75rem; background: var(--da-surface, #fff); border: 1px solid var(--da-border, #dce4df); border-radius: 18px; padding: 0.75rem; }
.ul2-gsi-card[hidden] { display: none; }
.ul2-gsi-card .ul2-gsi { margin-top: 0; flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; gap: 0.55rem; }
.ul2-gsi-card .ul2-avatar { width: 46px; height: 46px; border-width: 2px; }
.ul2-gsi-card .ul2-bubble { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0.1rem 0 0; padding: 0.55rem 0.6rem; background: #f4f8f5; border-radius: 4px 14px 14px 14px; box-shadow: none; }
.ul2-gsi-card .ul2-bubble::after { right: auto; bottom: auto; left: -7px; top: 12px; background: #f4f8f5; border-right: 0; border-bottom: 1px solid var(--da-border, #dce4df); border-left: 1px solid var(--da-border, #dce4df); transform: rotate(45deg); }
.ul2-gsi-card .ul2-bubble.is-bad, .ul2-gsi-card .ul2-bubble.is-bad::after { background: #fff5f4; border-color: var(--ul2-bad); }
.ul2-gsi-card .ul2-bubble.is-bad::after { border-top-color: transparent; border-right-color: transparent; }
/* GSI choice questions: options side by side at equal width; one per row on very narrow screens */
.ul2-qopts { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.25rem), 1fr)); gap: 0.4rem; }
.ul2-qopts .ul2-btn { width: 100%; border-radius: 12px; padding: 0.55rem 0.25rem; font-size: 0.84rem; letter-spacing: -0.005em; white-space: normal; line-height: 1.2; }
.ul2-gsi-card .ul2-ask > .ul2-btn--skip { padding-left: 0.2rem; padding-right: 0.2rem; }
.ul2-ask > .ul2-btn--skip { align-self: flex-start; }
/* t48u: no Next badge or yellow highlight on task cards */
.ul2-next-badge { display: none !important; }
.ul2-card.is-next, .ul2-row.is-next { border-color: var(--da-border, #dce4df); box-shadow: none; }

/* ticket-parity-gsi-top: GSI's card sits at the very top of Tasks, above the upload card */
.ul2-gsi-card.ul2-gsi-card--top { margin-top: 0; margin-bottom: 0.75rem; }

/* ticket-parity-mot-cards (t61u): expiry date (and when GOV.UK checked) under the MOT / Road Tax card title */
.ul2-card-tw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.ul2-card-tw .ul2-card-title { flex: 0 0 auto; }
.ul2-card-sub { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.45rem; row-gap: 0; font-size: 0.8rem; line-height: 1.3; color: var(--da-muted, #5c6b64); }
.ul2-card-exp { font-weight: 600; color: var(--da-text, #183029); }
.ul2-card-sub--bad .ul2-card-exp { color: var(--ul2-bad); }
.ul2-card-sub--warn .ul2-card-exp { color: var(--ul2-wait); }
.ul2-card-checked { font-size: 0.7rem; color: var(--da-muted, #5c6b64); white-space: nowrap; }

/* ticket-parity-viewer-buttons (t63u): only the white close in the viewer */
.ul2-zoom-ctl, .ul2-zoom-rot { display: none !important; }

/* ticket-parity-loading (t64u): Tasks loading state (skeleton cards, dark-green spinner, GSI typing dots); still with reduced motion */
.ul2-skel { display: grid; gap: 0.5rem; }
.ul2-skel-card { display: flex; align-items: center; gap: 0.65rem; min-height: 2.6rem; box-sizing: border-box; background: var(--da-surface, #fff); border: 1px solid var(--da-border, #dce4df); border-radius: 14px; padding: 0.7rem 0.85rem; }
.ul2-skel-bar { display: block; flex: 1 1 auto; max-width: 60%; height: 0.75rem; border-radius: 999px; background: linear-gradient(90deg, #e6eee9 0%, #f3f7f4 50%, #e6eee9 100%); background-size: 200% 100%; animation: ul2SkelShine 1.4s ease-in-out infinite; }
.ul2-skel-bar--short { max-width: 40%; }
.ul2-spin { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; box-sizing: border-box; border-radius: 50%; border: 3px solid #d3e5da; border-top-color: #17362c; animation: ul2Spin 0.8s linear infinite; }
.ul2-dots { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.ul2-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #17362c; opacity: 0.25; animation: ul2Dot 1.2s ease-in-out infinite; }
.ul2-dots i:nth-child(2) { animation-delay: 0.2s; }
.ul2-dots i:nth-child(3) { animation-delay: 0.4s; }
.ul2-bubble.is-loading .ul2-bubble-main { font-weight: 600; }
@keyframes ul2Spin { to { transform: rotate(360deg); } }
@keyframes ul2Dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes ul2SkelShine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .ul2-spin, .ul2-dots i, .ul2-skel-bar { animation: none; }
  .ul2-dots i { opacity: 0.6; }
}

/* ticket-parity-staff-actions (t69u): staff view notes (shown only in the CRM Driver App staff view) */
.ul2-staff-banner { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #eef4ff; color: #1d3a6e; font-size: 13px; line-height: 1.4; }
.ul2-staff-note { display: block; margin: 4px 0 0; font-size: 12px; line-height: 1.3; color: #5b6472; font-style: italic; }
.ul2-row .ul2-staff-note { flex-basis: 100%; order: 99; padding-left: 34px; }
.ul2-row:has(.ul2-staff-note) { flex-wrap: wrap; }

/* ticket-parity-tasks-hero-b (t73u/t74u): Option B. One dark-green hero at the top of Tasks (GSI + her buttons + upload),
   then 'Your Documents' as one grouped card with fine dividers. No count / ring / progress bar (t74u). */
.ul2-hero { position: relative; overflow: hidden; margin: 0 0 0.25rem; padding: 1rem 1rem 0.9rem; border-radius: 22px; background: linear-gradient(160deg, #1f4a3d 0%, #183029 100%); color: #fff; box-shadow: 0 6px 18px rgba(10, 20, 16, 0.22); }
.ul2-hero[hidden] { display: none !important; }
.ul2-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(31, 138, 77, 0.45), transparent 70%); pointer-events: none; }
.ul2-hero > * { position: relative; z-index: 1; }
.ul2-hero .ul2-gsi { margin: 0; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0.75rem; }
.ul2-hero .ul2-avatar { width: 56px; height: 56px; border: 3px solid rgba(255, 255, 255, 0.92); }
.ul2-hero .ul2-bubble { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; padding: 0.65rem 0.8rem; border-radius: 16px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: none; color: #fff; }
.ul2-hero .ul2-bubble::after { content: none; display: none; }
.ul2-hero .ul2-bubble-main { color: #fff; font-size: 1.05rem; font-weight: 800; line-height: 1.25; }
.ul2-hero .ul2-bubble-sub { color: #cfe3d8; font-size: 0.85rem; }
.ul2-hero .ul2-bubble.is-loading .ul2-bubble-main { font-weight: 600; }
.ul2-hero .ul2-dots i { background: #fff; }
.ul2-hero .ul2-bubble.is-bad { background: #fff5f4; border-color: #f3b7b2; }
.ul2-hero .ul2-bubble.is-bad .ul2-bubble-main { color: #8c1d18; }
.ul2-hero .ul2-bubble.is-bad .ul2-bubble-sub { color: #8c1d18; }
/* GSI's buttons: main = white, others = see-through; choice questions stay side by side */
.ul2-hero .ul2-ask { margin-top: 0.85rem; gap: 0.4rem 0.5rem; justify-content: center; }
.ul2-hero .ul2-btn { min-height: 3rem; border-radius: 14px; font-size: 0.98rem; background: rgba(255, 255, 255, 0.08); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.35); }
.ul2-hero .ul2-btn--main { background: #fff; color: #166b3c; border-color: #fff; }
.ul2-hero .ul2-ask > .ul2-btn:not(.ul2-btn--skip) { flex: 1 1 100%; }
.ul2-hero .ul2-ask > .ul2-btn--skip, .ul2-hero .ul2-btn--skip { flex: 0 0 auto; min-height: 2.2rem; background: transparent; border-color: transparent; color: #cfe3d8; text-decoration: underline; opacity: 1; padding-left: 0.2rem; padding-right: 0.2rem; font-size: 0.88rem; font-weight: 600; }
.ul2-hero .ul2-qopts .ul2-btn { min-height: 2.75rem; font-size: 0.9rem; }
.ul2-hero .ul2-chip { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.35); padding: 0.45rem 0.8rem; font-size: 0.85rem; }
.ul2-hero .ul2-chip--main { background: #fff; color: #166b3c; border-color: #fff; }
.ul2-hero .ul2-chip--x { color: #cfe3d8; }
.ul2-hero .ul2-btn--retake { margin-top: 0.6rem; width: 100%; }
/* upload */
.ul2-hero .ul2-master-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.75rem; }
.ul2-hero .ul2-master-btns .ul2-btn { width: 100%; padding-left: 0.4rem; padding-right: 0.4rem; background: rgba(255, 255, 255, 0.08); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.35); }
.ul2-hero .ul2-master-sub { max-width: none; margin-top: 0.65rem; text-align: center; color: #cfe3d8; font-size: 0.8rem; line-height: 1.35; }
.ul2-hero .ul2-net { color: #ffd88a; text-align: center; }
.ul2-hero .ul2-thumbs { margin-top: 0.75rem; }
.ul2-hero .ul2-thumb { color: #183029; }
/* Your Documents: one grouped card, fine dividers, same-size thumbnails, aligned chevrons */
.ul2-cards { gap: 0; background: var(--da-surface, #fff); border: 1px solid var(--da-border, #dce4df); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 8px rgba(10, 20, 16, 0.06); }
.ul2-cards:empty { display: none; }
.ul2-cards > .ul2-card { border: 0; border-radius: 0; padding: 0.7rem 0.9rem; box-shadow: none; }
.ul2-cards > .ul2-card + .ul2-card { border-top: 1px solid #eef2ef; }
.ul2-cards > .ul2-card--closed { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.ul2-cards > .ul2-card--bad { background: #fff8f7; }
.ul2-cards > .ul2-card--check { background: #f6fbf8; }
.ul2-cards .ul2-card-head { min-height: 2.75rem; gap: 0.7rem; }
.ul2-cards .ul2-ic { width: 1.6rem; height: 1.6rem; font-size: 0.85rem; }
.ul2-cards .ul2-card-title { font-size: 1rem; }
.ul2-cards .ul2-tns { gap: 0.35rem; }
.ul2-cards .ul2-tn { width: 2.75rem; height: 2.1rem; border-radius: 8px; }
.ul2-cards .ul2-card-chev { width: 1.1rem; color: #8aa096; }
.ul2-cards .ul2-skel { gap: 0; }
.ul2-cards .ul2-skel-card { border: 0; border-radius: 0; }
.ul2-cards .ul2-skel-card + .ul2-skel-card { border-top: 1px solid #eef2ef; }
.ul2-cards .ul2-flash { animation: none; background: #eaf6ef; transition: background 0.4s; }

/* ticket-parity-gsi-bubble (t76u): bigger GSI and a proper solid white speech bubble (t77u) with a tail pointing at her.
   Side by side from 380px wide; on narrower phones GSI sits above the bubble and the tail points up. */
.ul2-hero .ul2-gsi { align-items: center; gap: 0.95rem; }
.ul2-hero .ul2-avatar { width: 96px; height: 96px; flex: 0 0 96px; border: 4px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); background: #fff; }
.ul2-hero .ul2-bubble { position: relative; background: #fff; border: 0; border-radius: 18px; padding: 0.75rem 0.9rem; box-shadow: 0 4px 14px rgba(10, 20, 16, 0.22); color: #17362c; }
.ul2-hero .ul2-bubble::after { content: ''; display: block; position: absolute; left: -8px; top: 50%; right: auto; bottom: auto; width: 18px; height: 18px; margin-top: -9px; background: #fff; border: 0; border-radius: 0 0 0 4px; transform: rotate(45deg); }
.ul2-hero .ul2-bubble-main { color: #17362c; font-size: 1.05rem; font-weight: 800; line-height: 1.28; }
.ul2-hero .ul2-bubble-sub { color: #4d5f57; font-size: 0.86rem; margin-top: 0.2rem; }
.ul2-hero .ul2-dots i { background: #17362c; }
.ul2-hero .ul2-bubble.is-bad { background: #fff; border: 0; box-shadow: 0 0 0 2px #d93025, 0 4px 14px rgba(10, 20, 16, 0.22); } /* t77u: still white, red ring + red text */
.ul2-hero .ul2-bubble.is-bad::after { background: #fff; box-shadow: -2px 2px 0 0 #d93025; }
.ul2-hero .ul2-bubble.is-bad .ul2-bubble-main, .ul2-hero .ul2-bubble.is-bad .ul2-bubble-sub { color: #8c1d18; }
@media (max-width: 379px) {
  .ul2-hero .ul2-gsi { flex-direction: column; align-items: center; gap: 0.85rem; }
  .ul2-hero .ul2-bubble { width: 100%; text-align: center; }
  .ul2-hero .ul2-bubble::after { left: 50%; top: -8px; margin-top: 0; margin-left: -9px; border-radius: 4px 0 0 0; }
  .ul2-hero .ul2-bubble.is-bad::after { box-shadow: -2px -2px 0 0 #d93025; }
}

/* ticket-parity-gsi-bubble-right (t78u): GSI on the right, her bubble on the left like an incoming chat message.
   The tail is part of the same white shape (curved wedge pointing at her face); one drop-shadow covers bubble + tail so there is no seam.
   Her buttons (task, question + Skip, Retake, Refresh) sit inside the bubble as solid dark-green buttons. */
.ul2-hero .ul2-gsi { flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 1.2rem; }
.ul2-hero .ul2-avatar { order: 2; }
.ul2-hero .ul2-bubble { order: 1; flex: 1 1 auto; min-width: 0; align-self: flex-start; text-align: left; margin: 0; padding: 0.85rem 0.95rem 0.9rem; border-radius: 20px 20px 20px 20px; background: #fff; border: 0; box-shadow: none; filter: drop-shadow(0 4px 10px rgba(6, 18, 13, 0.28)); }
.ul2-hero .ul2-bubble::after { content: ''; display: block; position: absolute; left: auto; bottom: auto; right: -19px; top: 28px; width: 21px; height: 30px; margin: 0; background: #fff; border: 0; border-radius: 0; box-shadow: none; transform: none; clip-path: path('M0 0 C 6 11, 12 15, 21 15 C 12 16, 6 19, 0 30 Z'); }
.ul2-hero .ul2-bubble.is-bad { box-shadow: none; filter: drop-shadow(2px 0 0 #d93025) drop-shadow(-2px 0 0 #d93025) drop-shadow(0 2px 0 #d93025) drop-shadow(0 -2px 0 #d93025) drop-shadow(0 4px 10px rgba(6, 18, 13, 0.28)); }
.ul2-hero .ul2-bubble.is-bad::after { box-shadow: none; }
.ul2-hero .ul2-bubble .ul2-ask { margin-top: 0.75rem; gap: 0.45rem; justify-content: stretch; }
.ul2-hero .ul2-bubble .ul2-ask[hidden], .ul2-hero .ul2-bubble .ul2-btn--retake[hidden] { display: none; }
.ul2-hero .ul2-bubble .ul2-btn, .ul2-hero .ul2-bubble .ul2-chip { width: 100%; min-height: 2.9rem; border-radius: 14px; background: #1f5a45; border: 0; color: #fff; font-weight: 700; font-size: 0.95rem; }
.ul2-hero .ul2-bubble .ul2-btn--main, .ul2-hero .ul2-bubble .ul2-chip--main { background: #17362c; color: #fff; }
.ul2-hero .ul2-bubble .ul2-ask > .ul2-btn:not(.ul2-btn--skip), .ul2-hero .ul2-bubble .ul2-ask > .ul2-chip:not(.ul2-chip--x) { flex: 1 1 100%; }
.ul2-hero .ul2-bubble .ul2-qopts { gap: 0.45rem; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } /* side by side, equal width */
.ul2-hero .ul2-bubble .ul2-qopts .ul2-btn { min-height: 2.75rem; font-size: 0.9rem; }
.ul2-hero .ul2-bubble .ul2-ask > .ul2-btn--skip, .ul2-hero .ul2-bubble .ul2-btn--skip, .ul2-hero .ul2-bubble .ul2-chip--x { flex: 1 1 100%; width: 100%; min-height: 2.2rem; background: transparent; color: #1f5a45; text-decoration: underline; font-size: 0.88rem; font-weight: 600; }
.ul2-hero .ul2-bubble .ul2-btn--retake { margin-top: 0.5rem; }
.ul2-hero .ul2-bubble .ul2-ask + .ul2-btn--retake { margin-top: 0.45rem; }
@media (max-width: 379px) {
  .ul2-hero .ul2-gsi { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .ul2-hero .ul2-avatar { order: 0; align-self: flex-end; }
  .ul2-hero .ul2-bubble { order: 1; width: auto; text-align: left; }
  .ul2-hero .ul2-bubble::after { right: 33px; left: auto; top: -19px; width: 30px; height: 21px; margin: 0; border-radius: 0; clip-path: path('M0 21 C 9 17, 14 11, 15 0 C 16 11, 21 17, 30 21 Z'); }
  .ul2-hero .ul2-bubble.is-bad::after { box-shadow: none; }
}

/* ticket-parity-gsi-why (t82u): softer tail - small rounded-tip triangle like the 00:44 left version, mirrored to point at GSI.
   Same white, sits under the bubble's shared drop-shadow (no seam); the red problem outline follows it. */
.ul2-hero .ul2-bubble::after { clip-path: none; right: -8px; left: auto; top: 34px; bottom: auto; width: 20px; height: 20px; margin: 0; background: #fff; border: 0; border-radius: 0 5px 0 0; box-shadow: none; transform: rotate(45deg); }
@media (max-width: 379px) {
  .ul2-hero .ul2-bubble::after { clip-path: none; right: 38px; left: auto; top: -8px; width: 20px; height: 20px; margin: 0; border-radius: 5px 0 0 0; transform: rotate(45deg); }
}

/* ticket-parity-gsi-camera (t83u): GSI's how-to steps when the camera is blocked */
.ul2-bubble-steps { margin: 0.45rem 0 0; padding: 0 0 0 1.25rem; color: #17362c; font-size: 0.88rem; line-height: 1.35; }
.ul2-bubble-steps[hidden] { display: none; }
.ul2-bubble-steps li { margin: 0.2rem 0; padding-left: 0.1rem; }
.ul2-hero .ul2-bubble.is-bad .ul2-bubble-steps { color: #17362c; }

/* ticket-parity-hero-camera (t85u): one round camera button under GSI replaces the two upload buttons; small sheet for Take Photo / Choose From Library */
.ul2-hero .ul2-gsi-side { order: 2; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.ul2-hero .ul2-gsi-side .ul2-avatar { order: 0; }
.ul2-cambtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #17362c; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.ul2-cambtn:active { transform: scale(0.95); }
.ul2-cambtn:focus-visible { outline: 3px solid #9fd3b5; outline-offset: 3px; }
.ul2-cambtn svg { display: block; }
.ul2-cambtn-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #2f8f57; color: #fff; border: 2px solid #fff; font-size: 0.75rem; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; }
.ul2-cambtn-badge[hidden] { display: none; }
.ul2-cambtn.is-busy::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: ul2-cam-spin 0.9s linear infinite; }
.ul2-cambtn.is-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); animation: ul2-cam-pulse 1.8s ease-out 3; pointer-events: none; }
@keyframes ul2-cam-spin { to { transform: rotate(360deg); } }
@keyframes ul2-cam-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); } 80%, 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .ul2-cambtn.is-pulse::after, .ul2-cambtn.is-busy::before { animation: none; } }
@media (max-width: 379px) {
  .ul2-hero .ul2-gsi-side { order: 0; align-self: flex-end; flex-direction: row-reverse; align-items: center; gap: 0.75rem; }
  .ul2-hero .ul2-gsi-side .ul2-avatar { align-self: auto; }
}
.ul2-sheet-wrap { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.ul2-sheet-wrap[hidden] { display: none; }
.ul2-sheet-bg { position: absolute; inset: 0; background: rgba(10, 25, 20, 0.45); }
.ul2-sheet { position: relative; width: 100%; max-width: 30rem; box-sizing: border-box; display: grid; gap: 0.6rem; padding: 1.1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2); animation: ul2-sheet-up 0.18s ease-out; }
.ul2-sheet-h { margin: 0 0 0.2rem; text-align: center; font-weight: 700; font-size: 1.02rem; color: #17362c; }
.ul2-sheet .ul2-sheet-btn { width: 100%; min-height: 3.1rem; border-radius: 14px; font-size: 1rem; background: #fff; color: #17362c; border: 1.5px solid #cfdcd5; }
.ul2-sheet .ul2-sheet-btn.ul2-btn--main { background: #1f4a3d; color: #fff; border-color: #1f4a3d; }
.ul2-sheet .ul2-sheet-cancel { min-height: 2.6rem; background: transparent; border: 0; color: #4c5d55; text-decoration: none; }
@keyframes ul2-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ul2-sheet { animation: none; } }

/* ticket-parity-doc-frame (t88u): Take Photo camera with a yellow document frame */
html.ul2-dc-open, html.ul2-dc-open body { overflow: hidden; }
.ul2-dc { position: fixed; inset: 0; z-index: 2147483000; background: #000; color: #fff; overflow: hidden; touch-action: none; }
.ul2-dc[hidden] { display: none !important; }
.ul2-dc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.ul2-dc-frame { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(80vw, calc(58vh / 1.414), 420px); aspect-ratio: 1 / 1.414;
  border: 3px solid #ffd21f; border-radius: 18px; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.25) inset; pointer-events: none; }
.ul2-dc.is-card .ul2-dc-frame { width: min(88vw, 460px); aspect-ratio: 1.586 / 1; }
.ul2-dc-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 10px 20px; }
.ul2-dc-h { font: 700 18px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
html body .ul2-dc .da-x.ul2-dc-x { flex: 0 0 40px; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
html body .ul2-dc .da-x.ul2-dc-x::before { font-size: 30px !important; }
.ul2-dc-hint { position: absolute; left: 16px; right: 16px; top: calc(46% + min(56.56vw, 29vh, 297px) + 14px); text-align: center;
  font: 600 16px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.ul2-dc.is-card .ul2-dc-hint { top: calc(46% + min(28vw, 145px) + 14px); }
.ul2-dc-msg { position: absolute; left: 24px; right: 24px; top: 50%; transform: translateY(-50%); background: #fff; color: #17362c; border-radius: 18px; padding: 18px; text-align: center; }
.ul2-dc-msg[hidden], .ul2-dc-hint[hidden] { display: none !important; }
.ul2-dc-msg-h { font-weight: 700; font-size: 18px; margin-bottom: 6px; }
.ul2-dc-msg-p { font-size: 15px; line-height: 1.4; margin-bottom: 14px; }
.ul2-dc-native { width: 100%; }
.ul2-dc-bar { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 14px 20px calc(env(safe-area-inset-bottom, 0px) + 22px); }
.ul2-dc-count { justify-self: start; font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.ul2-dc-shutter { width: 76px; height: 76px; border-radius: 999px; border: 5px solid #fff; background: #fff; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35), inset 0 0 0 3px #17362c;
  padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ul2-dc-shutter:active:not(:disabled) { transform: scale(0.94); }
.ul2-dc-shutter:disabled { opacity: 0.5; cursor: default; }
.ul2-dc-shutter:focus-visible { outline: 3px solid #ffd21f; outline-offset: 3px; }
.ul2-dc-done { justify-self: end; min-width: 84px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #ffd21f; color: #17362c;
  font: 700 16px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer; }
.ul2-dc-done[hidden] { display: none !important; }
.ul2-dc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.ul2-dc-flash.is-on { animation: ul2DcFlash 0.35s ease-out; }
@keyframes ul2DcFlash { 0% { opacity: 0.75; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ul2-dc-flash.is-on { animation: none; } }

/* ticket-parity-phone-viewer-modal (t91u): the phone app uses the same viewer card as the staff Preview; small safe-area-aware margins on phones */
.ul2-zoom.ul2-zoom--pv { padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.6rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.6rem, env(safe-area-inset-left, 0px)); }
.ul2-zoom--pv .ul2-zoom-box { max-height: 100%; }

/* ticket-parity-gsi-floating (t93u-t95u): no dark hero. GSI's round photo floats bottom-right just above the tab bar
   (same in the phone app and the staff Preview, every width); her white bubble sits above her, right-aligned, tail pointing
   down at her. Tap her to open / close it; it opens by itself when she has something new. No camera button (t94u). */
.ul2.ul2--float { padding-bottom: calc(76px + 2.25rem); }
.ul2-hero.ul2-hero--float { position: fixed; z-index: 950; left: auto; top: auto;
  right: max(0.75rem, calc(env(safe-area-inset-right, 0px) + 0.5rem), calc((100vw - var(--da-app-max-width, 32rem)) / 2 + 0.75rem));
  bottom: var(--ul2-fb, calc(var(--da-bar-h, 4.35rem) + env(safe-area-inset-bottom, 0px) + 12px));
  margin: 0; padding: 0; width: auto; border-radius: 0; background: none; box-shadow: none; overflow: visible; color: #17362c;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px; pointer-events: none; }
.ul2-hero.ul2-hero--float::after { content: none; display: none; }
.ul2-hero.ul2-hero--float > * { pointer-events: auto; }
.ul2-hero--float .ul2-fbub { position: relative; z-index: 1; box-sizing: border-box;
  width: min(22rem, calc(100vw - 1.5rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  filter: drop-shadow(0 4px 12px rgba(6, 18, 13, 0.26));
  transform-origin: calc(100% - 38px) calc(100% + 14px);
  transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.25), visibility 0s linear 0s; }
.ul2-hero--float .ul2-fbub:not(.is-open) { opacity: 0; transform: translateY(6px) scale(0.86); visibility: hidden; pointer-events: none;
  transition: opacity 0.14s ease, transform 0.16s ease, visibility 0s linear 0.16s; }
.ul2-hero--float .ul2-fbub::after { content: ''; position: absolute; right: 28px; bottom: -8px; width: 20px; height: 20px; background: #fff;
  border-radius: 0 0 5px 0; transform: rotate(45deg); pointer-events: none; }
.ul2-hero--float .ul2-fbub.is-bad { filter: drop-shadow(2px 0 0 #d93025) drop-shadow(-2px 0 0 #d93025) drop-shadow(0 2px 0 #d93025) drop-shadow(0 -2px 0 #d93025) drop-shadow(0 4px 12px rgba(6, 18, 13, 0.26)); }
.ul2-hero.ul2-hero--float .ul2-bubble { display: block; order: 0; width: auto; max-width: none; margin: 0; text-align: left;
  padding: 0.85rem 2.2rem 0.9rem 0.95rem; border: 0; border-radius: 20px; background: #fff; box-shadow: none; filter: none;
  max-height: calc(100vh - var(--ul2-fb, 5.5rem) - 76px - 14px - env(safe-area-inset-top, 0px) - 1rem);
  max-height: calc(100dvh - var(--ul2-fb, 5.5rem) - 76px - 14px - env(safe-area-inset-top, 0px) - 1rem);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ul2-hero.ul2-hero--float .ul2-bubble.is-bad { box-shadow: none; filter: none; }
.ul2-hero.ul2-hero--float .ul2-bubble::after, .ul2-hero.ul2-hero--float .ul2-bubble.is-bad::after { content: none; display: none; }
.ul2-hero--float .ul2-fbub-x { position: absolute; top: 8px; right: 8px; z-index: 2; }
.ul2-hero--float .ul2-fgsi { position: relative; z-index: 1; flex: none; width: 76px; height: 76px; padding: 0; margin: 0; border: 3px solid #fff;
  border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(6, 18, 13, 0.3); overflow: hidden; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.ul2-hero--float .ul2-fgsi:active { transform: scale(0.96); }
.ul2-hero--float .ul2-fgsi:focus-visible { outline: 3px solid #1f8a4d; outline-offset: 2px; }
.ul2-hero--float .ul2-fgsi-img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.ul2-hero--float .ul2-fgsi-txt { font: 800 18px/70px system-ui, -apple-system, "Segoe UI", sans-serif; color: #17362c; }
/* the upload queue (photos sending, 'Which document is this?') now sits inside her bubble */
.ul2-hero--float .ul2-net { text-align: left; color: #8a5a00; }
.ul2-hero--float .ul2-thumbs { margin-top: 0.65rem; }
.ul2-hero--float .ul2-thumb .ul2-chip, .ul2-hero.ul2-hero--float .ul2-bubble .ul2-thumb .ul2-chip { min-height: 2rem; padding: 0.3rem 0.45rem; font-size: 0.78rem; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .ul2-hero--float .ul2-fbub, .ul2-hero--float .ul2-fbub:not(.is-open) { transition: none; transform: none; } }

/* t95u: small library button bottom-left of GSI's camera (opposite Done) */
.ul2-dc-left { justify-self: start; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ul2-dc-lib { width: 48px; height: 48px; flex: none; padding: 0; border: 0; border-radius: 12px; background: rgba(0, 0, 0, 0.45); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ul2-dc-lib:active { transform: scale(0.94); }
.ul2-dc-lib:focus-visible { outline: 3px solid #ffd21f; outline-offset: 3px; }
.ul2-hero.ul2-hero--float { --ul2-ok: #1e8e3e; --ul2-bad: #d93025; --ul2-wait: #b26a00; --ul2-next: #f4b400; font-size: 0.95rem; }

/* ticket-parity-gsi-toolbar (t96u/t97u): GSI out of the circle (her background-removed copy), sitting on the tab bar at the
   bottom-right with her lower body tucked behind the bar's top edge (the bar stays above her, so every tab stays fully tappable).
   Her bubble sits to her LEFT, tail pointing right at her, its bottom just above the bar. Buttons fill the bubble width. */
.ul2-hero.ul2-hero--float { z-index: 24; /* just under the tab bar (.da-chrome-footer z 25) */
  bottom: var(--ul2-fb, calc(var(--da-bar-h, 4.35rem) + env(safe-area-inset-bottom, 0px)));
  right: max(0.25rem, env(safe-area-inset-right, 0px), calc((100vw - var(--da-app-max-width, 32rem)) / 2 + 0.25rem));
  flex-direction: row; align-items: flex-end; gap: 10px; }
.ul2-hero--float .ul2-fbub { order: 0; margin-bottom: 8px;
  width: min(21rem, calc(100vw - 82px - 0.25rem - 10px - 0.75rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  transform-origin: calc(100% + 10px) calc(100% - 40px); }
.ul2-hero--float .ul2-fbub:not(.is-open) { transform: translateX(8px) scale(0.86); }
.ul2-hero--float .ul2-fbub::after { right: -8px; bottom: 30px; border-radius: 0 5px 0 0; }
.ul2-hero.ul2-hero--float .ul2-bubble { max-height: calc(100vh - var(--ul2-fb, 5rem) - 8px - env(safe-area-inset-top, 0px) - 1rem);
  max-height: calc(100dvh - var(--ul2-fb, 5rem) - 8px - env(safe-area-inset-top, 0px) - 1rem); }
.ul2-hero--float .ul2-fgsi { order: 1; width: 82px; height: 106px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
  margin-bottom: 0; filter: drop-shadow(0 2px 3px rgba(6, 18, 13, 0.18)); }
.ul2-hero--float.on-bar .ul2-fgsi { margin-bottom: -24px; } /* lower body behind the bar's top edge */
.ul2-hero--float .ul2-fgsi-img { width: 100%; height: 100%; border-radius: 0; object-fit: contain; object-position: 50% 100%; }
.ul2-hero--float .ul2-fgsi:focus-visible { outline-offset: 0; border-radius: 12px; }
/* the original round photo, only if the cut-out file can't load */
.ul2-hero--float.is-round .ul2-fgsi { width: 76px; height: 76px; border: 3px solid #fff; border-radius: 50%; background: #fff; overflow: hidden; box-shadow: 0 4px 14px rgba(6, 18, 13, 0.3); filter: none; }
.ul2-hero--float.is-round.on-bar .ul2-fgsi { margin-bottom: 10px; }
.ul2-hero--float.is-round .ul2-fgsi-img { border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
/* t97u: every button in her bubble spans the bubble; question choices share the width side by side; Skip below */
.ul2-hero--float .ul2-bubble .ul2-ask { display: flex; flex-wrap: wrap; }
.ul2-hero--float .ul2-bubble .ul2-ask > .ul2-btn, .ul2-hero--float .ul2-bubble .ul2-ask > .ul2-chip, .ul2-hero--float .ul2-bubble > .ul2-btn { flex: 1 1 100%; width: 100%; }
.ul2-hero--float .ul2-bubble .ul2-qopts { flex: 1 1 100%; width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.ul2.ul2--float { padding-bottom: calc(84px + 1.75rem); }

/* ticket-parity-plus-placeholder (t100u): no photo yet = a dashed + placeholder in the thumbnail slot (same size and place as the
   thumbnails); a tap opens Take Photo. Replaces the Take Photo button in To Do rows. */
.ul2-cards .ul2-tn.ul2-tn--add { border: 1.5px dashed rgba(31, 138, 77, 0.55); background: #f3f9f5; color: var(--da-brand, #1f8a4d); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; }
.ul2-cards .ul2-tn.ul2-tn--add svg { display: block; }
.ul2-cards .ul2-tn.ul2-tn--add:active { transform: scale(0.95); background: #e4f2e9; border-color: var(--da-brand, #1f8a4d); }
@media (hover: hover) { .ul2-cards .ul2-tn.ul2-tn--add:hover { background: #e9f5ee; border-color: var(--da-brand, #1f8a4d); } }

/* ticket-parity-inline-details (t103u): the details form inside the expanded Tasks card (no separate page, no Save button,
   no second photo - the row's thumbnail is the photo). */
.ul2-cards .ul2-inline { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px dashed var(--da-border, #dce4df); }
.ul2-cards .ul2-inline > .da-inline-card { margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; border-radius: 0; }
.ul2-cards .ul2-inline .da-licence-captures,
.ul2-cards .ul2-inline .da-doc-capture-hint,
.ul2-cards .ul2-inline .da-settlement-or,
.ul2-cards .ul2-inline .da-ir35-optional,
.ul2-cards .ul2-inline .da-licence-hint,
.ul2-cards .ul2-inline [data-da-licence-photos-block],
.ul2-cards .ul2-inline [data-da-licence-photos-summary] { display: none !important; }
.ul2-cards .ul2-inline [data-da-licence-details-block] { display: block !important; }
.ul2-cards .ul2-inline input:not([type="checkbox"]):not([type="radio"]), .ul2-cards .ul2-inline select, .ul2-cards .ul2-inline textarea { border-radius: 10px; }
.ul2-cards .ul2-inline-msg { font-size: 0.82rem; margin-top: 0.4rem; color: var(--da-muted, #5c6b64); }
.ul2-cards .ul2-inline-msg[hidden] { display: none; }
.ul2-cards .ul2-inline-msg--ok { color: var(--ul2-ok, #1f8a4d); font-weight: 700; }
.ul2-cards .ul2-inline-msg--err { color: var(--ul2-bad, #c0392b); font-weight: 600; }
.ul2-cards .ul2-inline-edit { margin-top: 0.55rem; border: 1px solid var(--da-border, #dce4df); background: #fff; color: var(--da-brand-dark, #166b3c); font-weight: 700; font-size: 0.85rem; border-radius: 999px; padding: 0.4rem 0.9rem; cursor: pointer; }
.ul2-cards .ul2-inline.ul2-inline--empty { border-top: 0; padding-top: 0; margin-top: 0; }