/* PRG-DEC-019 media panel styles. Local fonts only; scoped rm- classes. */
/* PRG029 Claude v2 PhotoBooth tokens and responsive comparison. No remote runtime/fonts. */
.rm-panel{--rm-ai:#5B3FB0;--rm-ai-surface:#F7F4FE;--rm-ai-border:#D9CEF7}
.rm-pb{padding:16px;margin:16px 0;border:1px solid #E1E4EA;border-radius:12px;background:#fff}
.rm-pb-note{font-size:13px;line-height:1.5;color:#4A5263;margin:8px 0;overflow-wrap:anywhere}
.rm-pb-warning{font-size:14px;line-height:1.5;color:#5C3800;background:#FFF6E6;border:1px solid #B07200;border-radius:8px;padding:12px}
.rm-pb-card{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--rm-ai-border);border-radius:10px;background:var(--rm-ai-surface)}
.rm-pb-badge{font-size:12px;color:var(--rm-ai);font-weight:600}.rm-pb-job{font-size:14px;font-weight:600;margin:0}
.rm-pb-dialog{font-family:"IBM Plex Sans",system-ui,sans-serif;color:#161B26;background:#fff;border:1px solid #C9CED8;border-radius:14px;padding:24px;width:calc(100% - 32px);max-width:1400px;max-height:calc(100dvh - 32px);overflow:auto}
.rm-pb-dialog::backdrop{background:rgba(22,27,38,.6)}
.rm-pb-dialog button{font:inherit;min-height:44px;padding:12px;border:1px solid #C9CED8;border-radius:8px;background:#fff;cursor:pointer;white-space:normal;overflow-wrap:anywhere}
.rm-pb-dialog button:disabled{background:#E1E4EA;color:#4A5263;cursor:not-allowed}
.rm-pb-dialog :where(button,input,section):focus-visible{outline:2px solid #1F45B8;outline-offset:2px}
.rm-pb-dialog [hidden]{display:none!important}
.rm-pb-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rm-pb-pane{min-width:0}.rm-pb-pane h4{margin:12px 0}
.rm-pb-image-region{overflow:auto;max-height:55dvh;border:1px solid #C9CED8;background:#F6F7F9;border-radius:10px}
.rm-pb-image{display:block;width:100%;max-width:none;height:auto;object-fit:contain}
.rm-pb-check{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;font-size:14px}
.rm-pb-check input{width:24px;min-width:24px;min-height:24px;flex:0 0 24px;margin:0;accent-color:#5B3FB0}
.rm-pb-check span{flex:1;min-width:0;overflow-wrap:anywhere}
.rm-pb-decisions{display:flex;flex-direction:column;gap:8px;margin-top:16px;max-width:380px}
.rm-pb-zoom{display:flex;align-items:center;gap:12px;margin:16px 0}.rm-pb-zoom input{width:100%;min-height:44px}
.rm-pb-switch{display:none}
@media(min-width:1120px){.rm-pb-dialog[open]:has(.rm-pb-panels){display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px}.rm-pb-dialog[open]:has(.rm-pb-panels)>h3,.rm-pb-dialog[open]:has(.rm-pb-panels)>p{grid-column:1/-1}.rm-pb-dialog .rm-pb-panels{grid-column:1;grid-row:3}.rm-pb-dialog .rm-pb-zoom{grid-column:1;grid-row:4}.rm-pb-dialog .rm-pb-decisions{grid-column:2;grid-row:3 / span 2;max-width:none;margin-top:0}}
@media(max-width:1119px){.rm-pb-decisions{max-width:none}}
@media(max-width:759px){.rm-pb-dialog{padding:16px;width:100%;max-width:none;max-height:95dvh;border-radius:14px 14px 0 0;margin-bottom:0}.rm-pb-panels{grid-template-columns:1fr}.rm-pb-pane[data-mobile-hidden=true]{display:none}.rm-pb-switch{display:flex;gap:8px}.rm-pb-switch button{flex:1}.rm-pb{padding:12px}.rm-pb-dialog button{width:100%}}
@media(max-width:359px){.rm-pb-dialog{padding:8px}.rm-pb-zoom{flex-direction:column;align-items:stretch}}
.rm-panel{--rm-bg:#F6F7F9;--rm-surface:#fff;--rm-text:#161B26;--rm-secondary:#4A5263;--rm-muted:#6B7385;--rm-border:#E1E4EA;--rm-strong:#C9CED8;--rm-action:#1F45B8;--rm-hover:#183A9C;--rm-selected:#E8EEFC;font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--rm-text);background:var(--rm-bg);box-sizing:border-box;width:100%;max-width:1240px;margin:0 auto;padding:16px;border:1px solid var(--rm-border);border-radius:14px}
.rm-panel *,.rm-panel *::before,.rm-panel *::after{box-sizing:border-box}
.rm-panel[hidden]{display:none!important}
.rm-panel [hidden]{display:none!important}
.rm-panel :where(button,input,select){font:inherit;color:inherit}
.rm-panel :where(button){min-height:44px;cursor:pointer;border-radius:8px;border:1px solid var(--rm-strong);background:var(--rm-surface);padding:8px 12px;font-weight:600;font-size:14px;line-height:1.3;white-space:normal;overflow-wrap:anywhere;text-align:left}
.rm-panel :where(button):hover:not(:disabled){border-color:var(--rm-action)}
.rm-panel :where(button):disabled{opacity:.55;cursor:not-allowed}
.rm-panel :where(a,button,input,select,[tabindex]):focus-visible{outline:2px solid var(--rm-action);outline-offset:2px}
.rm-panel .rm-primary{background:var(--rm-action);border-color:var(--rm-action);color:#fff}
.rm-panel .rm-primary:hover:not(:disabled){background:var(--rm-hover);border-color:var(--rm-hover)}
.rm-panel .rm-secondary{background:var(--rm-surface);border-color:var(--rm-strong);color:var(--rm-text)}
.rm-panel .rm-mono{font-family:ui-monospace,"IBM Plex Mono",monospace;font-size:12px;color:var(--rm-muted);overflow-wrap:anywhere}
.rm-header{display:flex;flex-direction:column;gap:8px;min-height:56px;justify-content:center;padding:12px 16px;margin:-16px -16px 16px;background:var(--rm-surface);border-bottom:1px solid var(--rm-border);border-radius:14px 14px 0 0}
.rm-brand{font-weight:800;letter-spacing:.14em;font-size:14px;color:var(--rm-text)}
.rm-dealer{font-size:12px;color:var(--rm-secondary);overflow-wrap:anywhere}
.rm-title{font-size:20px;line-height:1.2;margin:0;color:var(--rm-text);overflow-wrap:anywhere}
.rm-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.rm-toolbar .rm-upload{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.rm-toolbar .rm-upload input[type=file]{min-width:0;max-width:100%;font-size:13px;color:var(--rm-secondary)}
.rm-toolbar .rm-upload button{flex:1 1 auto}
.rm-status{min-height:20px;font-size:13px;color:var(--rm-secondary);margin:0 0 8px;overflow-wrap:anywhere}
.rm-status[data-state=error]{color:#B42318}
.rm-status[data-state=warning]{color:#8A5A00}
.rm-status[data-state=offline]{color:var(--rm-muted)}
.rm-counts{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--rm-secondary);margin:0 0 16px}
.rm-counts span{font-variant-numeric:tabular-nums}
.rm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.rm-card{display:flex;flex-direction:column;gap:12px;background:var(--rm-surface);border:1px solid var(--rm-border);border-radius:10px;padding:12px;overflow:visible;min-width:0}
.rm-card[data-selected=true]{border-color:var(--rm-action);background:var(--rm-selected)}
.rm-panel .rm-thumbnail{padding:0;width:100%;overflow:hidden}
.rm-image{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:10px;border:1px solid var(--rm-border);background:var(--rm-bg)}
.rm-meta{display:flex;flex-direction:column;gap:8px;min-width:0}
.rm-state{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--rm-secondary);overflow-wrap:anywhere}
.rm-state[data-state=pending]{color:#8A5A00}
.rm-state[data-state=approved]{color:#0B6B3A}
.rm-state[data-state=rejected]{color:#B42318}
.rm-cover{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--rm-action);background:var(--rm-selected);border:1px solid var(--rm-action);border-radius:6px;padding:2px 8px;align-self:flex-start}
.rm-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.rm-actions :where(button){width:100%}
.rm-savebar{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding:12px;background:var(--rm-surface);border:1px solid var(--rm-border);border-radius:10px;position:sticky;bottom:8px;z-index:2;box-shadow:0 4px 20px #161B2614}
.rm-savebar :where(button){width:100%}
.rm-save-feedback{margin:0;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.rm-workspace{display:block}.rm-next-step{padding:16px;border:1px solid var(--rm-border);border-radius:12px;background:#fff;margin-bottom:16px;min-width:0;overflow-wrap:anywhere}
.rm-card[data-dirty=true]{border-color:var(--rm-action)}
@media(min-width:1120px){.rm-workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}.rm-workspace>.rm-next-step{grid-column:2;grid-row:1;margin:0}.rm-workspace>.rm-grid{grid-column:1;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr))}}
.rm-v3-chips{display:flex;flex-wrap:wrap;gap:8px}.rm-v3-chip{display:inline-flex;padding:4px 8px;border:1px solid #C9CED8;border-radius:6px;font-size:12px;align-self:flex-start}
.rm-pb-generation{font-size:13px;color:#4A5263}.rm-pb-generation summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.rm-pb-dialog button[aria-pressed=true]{border-color:#1F45B8;background:#E8EEFC;color:#142F7A}
.rm-pb-dialog .rm-pb-decisions>button[aria-pressed]{min-height:64px}
.rm-pb-dialog .rm-pb-decisions>label.rm-pb-check{border-top:1px solid #E1E4EA}
.rm-pb-dialog .rm-pb-pane:only-child{grid-column:1/-1}
.rm-dialog{border:1px solid var(--rm-strong);border-radius:14px;padding:20px;max-width:420px;width:calc(100% - 32px);background:var(--rm-surface);color:var(--rm-text);font-family:"IBM Plex Sans",system-ui,sans-serif}
.rm-dialog::backdrop{background:rgba(22,27,38,.45)}
.rm-dialog .rm-actions{margin-top:16px}
.rm-dialog :where(button){width:100%}
.rm-viewer{max-width:900px;width:calc(100% - 32px);padding:16px;border-radius:14px;border:1px solid var(--rm-strong);background:var(--rm-surface);color:var(--rm-text)}
.rm-viewer::backdrop{background:rgba(22,27,38,.6)}
.rm-viewer .rm-image{aspect-ratio:auto;object-fit:contain;max-height:70vh;height:auto;width:100%}
.rm-future{margin-top:16px;padding:12px;border:1px dashed var(--rm-strong);border-radius:10px;font-size:13px;color:var(--rm-muted);background:var(--rm-surface)}
@media (prefers-reduced-motion:reduce){.rm-panel *,.rm-panel *::before,.rm-panel *::after{transition:none!important;animation:none!important}}
@media (max-width:1024px){.rm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rm-panel{padding:12px;border-radius:10px}.rm-header{margin:-12px -12px 12px;padding:12px;min-height:56px;border-radius:10px 10px 0 0}.rm-grid{grid-template-columns:1fr}.rm-toolbar .rm-upload,.rm-toolbar .rm-upload input[type=file],.rm-toolbar .rm-upload button,.rm-toolbar :where(button){width:100%;flex:1 1 100%}.rm-savebar :where(button),.rm-actions :where(button){width:100%}}
@media (max-width:390px){.rm-panel{padding:8px}.rm-header{margin:-8px -8px 12px;padding:8px}.rm-card,.rm-dialog,.rm-viewer{padding:8px}.rm-title{font-size:18px}}
@supports selector(:has(*)){main:has(#media-panel:not([hidden])){display:block;max-width:1240px}main:has(#media-panel:not([hidden]))>section:not(#media-panel){display:none!important}main:has(#media-panel:not([hidden]))>#media-panel{display:block;grid-column:1/-1}}