/* Shared mobile reading, interaction and form foundations. */
:root{--owner-body:14px;--owner-meta:12px;--owner-title:24px;--owner-radius:16px;--owner-line:#dce3dc;--owner-muted:#63716b}
#app-main{font-size:var(--owner-body);line-height:1.65}
#app-main .title{font-size:var(--owner-title);line-height:1.4;letter-spacing:-.4px}
#app-main h1[tabindex="-1"]:focus{outline:none}
#app-main .lede{line-height:1.8}
#app-main .small,#app-main .form-help{font-size:12px;line-height:1.7}
.header-back{width:44px;height:44px;min-width:44px;min-height:44px}
#app button:focus-visible,#app a:focus-visible,#app input:focus-visible,#app select:focus-visible,#app textarea:focus-visible,dialog button:focus-visible,dialog textarea:focus-visible,dialog input:focus-visible,dialog select:focus-visible{outline:3px solid #3e8058;outline-offset:3px}
#app-main .inline-link,#app-main .text-button,#app-main .filter-chip,#app-main .case-filter button,#app-main .case-filters button,.image-preview-toolbar button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.image-preview-dialog>.row>button{min-width:44px;min-height:44px}
.of-page{padding-bottom:12px}.of-page>.lede{margin-bottom:24px}
.of-context{padding:16px;background:#eaf0e8;border:1px solid #dce6d9;border-radius:16px;margin-bottom:24px;display:grid;gap:4px}
.of-context>span{font-size:12px;color:var(--owner-muted)}.of-context>strong{font-size:14px;line-height:1.7}.of-context .form-field{margin:0}.of-context select{background:#fff}
.of-page .form-field,#note-form .form-field{margin:20px 0 6px;display:grid;gap:8px}.of-context .form-field{margin:0}
.of-page textarea,#note-form textarea{min-height:148px;resize:vertical;line-height:1.8;font-size:16px;padding:13px 14px;border-radius:12px}
.of-page select,.of-page input,#note-form input{min-height:48px;font-size:16px;max-width:100%}
.of-upload{display:flex;align-items:center;gap:12px;position:relative;padding:16px;background:#fff;border:1px dashed #b8cbbd;border-radius:12px;min-height:78px;cursor:pointer;overflow:hidden}.of-upload:focus-within{outline:3px solid #3e8058;outline-offset:3px}.of-upload>svg{width:24px;height:24px;color:var(--green);flex-shrink:0}.of-upload>span:nth-of-type(1){display:grid;gap:4px;min-width:0;flex:1}.of-upload strong{font-size:14px;font-weight:500;overflow-wrap:anywhere}.of-upload small{font-size:12px;color:var(--owner-muted)}.of-upload-plus{font-size:22px;color:var(--green)}.of-upload .of-file{position:absolute;width:1px;height:1px;min-height:0!important;padding:0;border:0;clip-path:inset(50%);overflow:hidden}.of-file-clear{min-height:44px;min-width:44px;font-size:12px;color:var(--green);padding:4px 0;justify-self:end}.of-file-clear[hidden]{display:none}.of-upload:has(input:disabled){opacity:.6;cursor:wait}
.of-required,.of-optional{font-size:12px;font-style:normal;font-weight:400;color:var(--owner-muted);margin-left:5px}.of-required{color:#8a4c26}
.of-field-meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--owner-muted);line-height:1.7}.of-field-meta output{white-space:nowrap}
.of-draft{font-size:12px;line-height:1.7;color:var(--owner-muted);margin:18px 0 8px;min-height:20px}.of-after{font-size:12px;line-height:1.8;color:var(--owner-muted);text-align:center;margin-top:12px}.of-note-context{font-size:14px;line-height:1.7;color:var(--owner-muted);margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--owner-line)}
.field-error:not(:empty){padding:12px 14px;border-radius:10px;background:#fbefea;color:#963b25;font-size:13px;line-height:1.7;margin:12px 0}
form[aria-busy=true] button[type=submit]{opacity:.65;cursor:wait}form textarea[aria-invalid=true]{border-color:#b34d34}
.dialog-card{max-height:calc(100dvh - 32px);overflow-y:auto}.dialog-card h2{font-size:20px;line-height:1.5}.dialog-card input[type=file]{width:100%;font-size:13px}
.ud-record-history>summary::after,.ud-inline-details>summary::after{display:none}
/* One compact floating comparison control across site and design versions.
   Visible surface is 32px high; the transparent hit area stays 44px high. */
.ux-compare-viewer .v2-site-compare-button{right:calc(var(--image-meta-left,0px) + 10px);bottom:calc(var(--image-meta-top,0px) + 6px);min-height:44px;min-width:64px;padding:6px 8px;gap:4px;border:0;border-radius:8px;background:transparent;box-shadow:none;backdrop-filter:none;isolation:isolate;font-size:12px;line-height:1.5;transition:none}
.ux-compare-viewer .v2-site-compare-button::before{content:"";position:absolute;inset:6px 0;z-index:-1;border:1px solid #ffffffc9;border-radius:8px;background:#fffffff0;box-shadow:0 1px 4px #173c2520;backdrop-filter:blur(10px)}
.ux-compare-viewer .v2-site-compare-button>svg{width:14px;height:14px}
.ux-compare-viewer .v2-site-compare-button:hover{background:transparent}
.ux-compare-viewer .v2-site-compare-button:hover::before{background:white}
.ux-compare-viewer .v2-site-compare-button[data-showing="reference"]{background:transparent;color:white}
.ux-compare-viewer .v2-site-compare-button[data-showing="reference"]::before{background:var(--green);border-color:#ffffffc9}
/* Semantics determine appearance: captions and status are never action surfaces. */
.zj-image-caption{position:static;display:block;max-width:100%;margin:8px 2px 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--muted);font-size:12px;line-height:1.75;overflow-wrap:anywhere;text-align:left;cursor:inherit}
.zj-caption-prefix{color:var(--muted)}
.zj-image-caption [hidden]{display:none!important}
.zj-image-caption.zj-sr-only{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.zj-image-overlay{position:absolute;left:calc(var(--image-meta-left,0px) + 10px);bottom:calc(var(--image-meta-top,0px) + 12px);width:max-content;max-width:calc(var(--image-meta-width,100%) - 116px);z-index:1;margin:0;padding:4px 8px;border:0;border-radius:4px;background:rgba(0,0,0,.62);box-shadow:none;color:#fff;font-size:12px;line-height:1.65;overflow-wrap:anywhere;text-align:left;pointer-events:none}
.zj-image-overlay [hidden]{display:none!important}
.zj-gallery-frame{position:relative;overflow:hidden;border-radius:16px}
.zj-gallery-frame .zj-image-overlay{max-width:calc(100% - 20px)}
.ux-compare-viewer .ux-viewer-hint{margin:3px 2px 0;font-size:12px}
#app-main span.pill:not([data-action]),#app-main .ph-status,#app-main .ph-delivery-status,#app-main .ux-site-result>span[data-status-tone]{display:inline-flex;align-items:center;gap:5px;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:12px;line-height:1.75;transition:none}
#app-main span.pill-green::before,#app-main span.pill-amber::before,#app-main span.pill-red::before,#app-main .ph-status.is-done::before,#app-main .ph-status.is-live::before,#app-main .ph-status.is-attention::before,#app-main .ph-delivery-status::before,#app-main .ux-site-result>span[data-status-tone]::before{content:"";width:5px;height:5px;flex-shrink:0;border-radius:50%;background:currentColor}
.ph-stat-grid .ph-stat-label{display:inline-flex;align-items:center;gap:2px}
.ph-stat-label>svg{width:12px;height:12px;color:var(--green)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}