/* METAPHOR MTP Question V3 — visual UI matched to the approved standalone prototype. */
:root{--v3-accent:#252b31;--v3-line:#dde0df;--v3-wash:#eef2f3}
html,body{background:#f6f6f3}
.shell{grid-template-columns:238px 1fr}
.sidebar{border-radius:0;padding:22px 13px;background:#fff}
.sideBrand{padding:3px 10px 24px;border-bottom:1px solid #e0e0df;margin-bottom:18px}
.sideBrand img{width:176px;max-height:50px;object-fit:contain}
.sideBrand .subbrand{font-size:10px;font-weight:550;letter-spacing:.16em;text-transform:uppercase;color:#949ca2;margin-top:15px}
.sidebar .navLabel{letter-spacing:.14em;font-size:10px;color:#989fa4}
.sidebar .navBtn{border-radius:0;font-size:13px;font-weight:650;padding:13px 14px;margin:4px 0;background:transparent;color:#474b4e}
.sidebar .navBtn.active{background:#f0f0ef;color:#141414;box-shadow:inset 3px 0 0 #232323}
.sidebar .navBtn:hover{background:#f3f3f1;color:#151515}
.topbar{background:#fff;border-bottom:1px solid var(--v3-line)}
.content{max-width:1430px;padding:28px 30px 75px}
.v3Questions{font-size:13px;line-height:1.5;color:#262a2d}
.v3Questions h1{font-size:28px;letter-spacing:-.045em;margin:6px 0 4px;font-weight:790;line-height:1.18}
.v3Questions h2{font-size:20px;letter-spacing:-.025em;margin:3px 0 6px;font-weight:770}
.v3Questions p{color:#8a9092;font-size:12px;margin:0;line-height:1.5}
.v3PageHeading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:12px}
.v3PageHeading h1{margin-top:5px}
.v3Eyebrow,.v3SectionNo{letter-spacing:.17em;text-transform:uppercase;color:#99a0a2;font-size:10px;font-weight:750}
.v3SectionNo{margin-bottom:5px}
.v3White{background:white;border:1px solid #dfe2e1;border-radius:0;box-shadow:none}
.v3ListControls{display:flex;align-items:end;gap:15px;justify-content:space-between;padding:20px 22px}
.v3ListControls label{flex:1;font-size:11px;color:#65696b;font-weight:750}
.v3ListControls select{margin-top:6px}
.v3QuestionList{display:grid;gap:10px;margin-top:14px}
.v3ListCard{border-radius:0;margin:0;padding:16px 20px;background:#fff}
.v3ListCard:hover{border-color:#9aabae;background:#fcfcfc}
.v3DetailPanel,.v3CreatePanel{width:100%}
.v3DetailTop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0 18px}
.v3Back{padding:0;border:0;background:none;color:#555b5e;font-size:12px;font-weight:700;text-align:left}
.v3Back:hover{text-decoration:underline}
.v3TitleRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 21px}
.v3TitleRow h1{margin:0 0 6px}
.v3TitleRow p{font-size:12px}
.v3Steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:20px 0}
.v3Step{padding:13px 16px;background:#ededeb;color:#8d9192;border:1px solid #e4e5e2;font-size:12px;font-weight:750}
.v3Step.active{background:#eaf0f2;color:#323d44;border-color:#d3dfe4}
.v3Block{padding:24px 25px;margin:15px 0}
.v3SectionHead{display:flex;justify-content:space-between;gap:16px;align-items:start;margin-bottom:19px}
.v3SectionHead .btn{border-radius:0;flex-shrink:0}
.v3Drop{border:1.5px dashed #aebdc1;background:#f6f9f9;min-height:82px;display:flex;align-items:center;justify-content:center;gap:20px;padding:16px 21px;cursor:pointer;margin:0 0 14px;color:#506e7c;transition:background .15s}
.v3Drop:hover,.v3Drop.drag-over{background:#eaf3f5;border-color:#447e99}
.v3DropIcon{font-size:34px;color:#527f93;line-height:1}
.v3Drop strong{font-size:13px;display:block;color:#2e4148}
.v3Drop small{font-size:11px;color:#8e9da1;display:block;margin-top:3px}
.v3Fields{display:grid;gap:13px}
.v3Fields label,.v3InlineForm label{font-size:11px;color:#4f5558;font-weight:780;display:block;margin-bottom:7px}
.v3Fields textarea,.v3InlineForm textarea{min-height:95px;border-radius:0;line-height:1.5}
.v3Fields input,.v3Fields select,.v3InlineForm input,.v3InlineForm select{border-radius:0}
.v3LaterLabel{margin-top:13px}
.v3Two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.v3ReadOnly{padding:12px 15px;background:#f8f8f7;border:1px solid #e5e7e6;white-space:pre-wrap}
.v3Hint{font-size:11px;color:#92989a;margin:7px 0 11px}
.v3MediaGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:11px;align-items:stretch}
.v3VisualCard{display:flex;flex-direction:column;gap:0;border:1px solid #dfe1df;background:#fff;padding:0;margin:0;overflow:hidden;border-radius:0;min-width:0}
.v3VisualCard .attachmentThumb{width:100%;height:145px;object-fit:contain;background:#f0f0ee;border:0;border-bottom:1px solid #e1e3e0;border-radius:0;cursor:zoom-in}
.v3VisualCard .attachmentThumbPdf{font-weight:800;font-size:23px;color:#6c8088;display:flex;align-items:center;justify-content:center}
.v3VisualCard .attachmentInfo{min-width:0;padding:12px 11px;flex:1}
.v3VisualCard .attachmentName{font-size:12px;color:#252a2c;font-weight:800;overflow-wrap:anywhere}
.v3VisualCard .fine{font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere}
.v3VisualCard .attachmentMark{font-size:10px;color:#527181;margin:7px 0}
.v3VisualCard .attachmentActions{display:flex;gap:6px;flex-wrap:wrap;padding:0 9px 10px}
.v3VisualCard .attachmentActions .btn{font-size:11px;border-radius:0;padding:6px 8px}
.v3VisualCard .attachmentLink{font-size:11px;display:inline-flex;align-items:center}
.v3SolutionList{display:grid;gap:12px}
.v3SolutionList .solutionOption{border:1px solid #dde0df;background:#fff;border-radius:0;white-space:normal;margin:0;padding:16px 16px 18px}
.v3SolutionList .solutionOption .v3MediaGrid{margin-top:12px}
.v3SolutionHead{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}
.v3SolutionHead b{font-size:13px!important;color:#252a2c!important;text-transform:none!important;letter-spacing:normal}
.v3SolutionHead .btn{border-radius:0}
.v3SolutionList .solutionOption>div:nth-child(2){white-space:pre-wrap;margin-bottom:5px}
.v3InlineForm{display:grid;gap:9px;padding:18px;background:#f8f8f7;border:1px solid #dedfde;margin:12px 0}
.v3InlineForm .btn{justify-self:start;border-radius:0}
.v3Submit{background:#eaf0f2;border:1px solid #dce6e9;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:19px 24px}
.v3Submit strong{font-size:13px}.v3Submit p{margin-top:5px}
.v3Submit .btn{border-radius:0}
.v3DecisionArea{padding:0!important;background:transparent!important;border:0!important;margin:0!important}
.v3DecisionTabs{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}
.v3DecisionTabs button{border:1px solid #dde0df;border-radius:0;background:#fafafa;padding:10px 14px;font-weight:700;font-size:12px;color:#777}
.v3DecisionTabs button.active{border-color:#1d2429;color:#fff;background:#1d2429}
.v3HiddenSelect{display:none!important}
.v3Empty{border:1px dashed #d9dcdb;padding:20px;text-align:center;color:#989b9d;background:#fafafa;font-size:12px}
.v3History{padding:16px 23px;margin-bottom:12px}.v3History summary{font-weight:700;cursor:pointer}.v3History #questionHistory{padding-top:10px}
.v3Save{position:sticky;bottom:12px;background:rgba(247,250,250,.96);border:1px solid #e0e3e3;color:#768288;font-size:11px;display:inline-block;padding:8px 12px;z-index:4}
.v3Save.error{color:#a52d2d;background:#fff2f2}.v3Save.good{color:#276d46}
.v3CreatePanel>.v3Lead{margin-bottom:25px}
.v3StagedCard{min-width:0;background:#fafafa;border:1px solid #dfe0df;padding:10px;display:flex;flex-direction:column;gap:8px}
.v3StagedCard>img{width:100%;height:138px;object-fit:contain;background:#eee}
.v3StagedCard strong{font-size:11px;overflow-wrap:anywhere}
.v3StagedCard textarea{min-height:62px;font-size:11px;border-radius:0}
.v3StagedCard .btn{font-size:11px;border-radius:0}
.v3PdfFlag{height:138px;background:#eef1f2;display:grid;place-items:center;font-size:22px;font-weight:750;color:#697f88}
.v3VisualModal{width:min(850px,calc(100vw - 32px));max-height:90vh;overflow-y:auto;border:1px solid #d4d8d8;border-radius:0;padding:23px;background:#fff;box-shadow:0 25px 100px #14191d3d}
.v3VisualModal::backdrop{background:rgba(14,19,24,.48)}
.v3ModalHead{display:flex;align-items:start;justify-content:space-between;gap:15px;margin-bottom:21px}
.v3ModalHead h2{margin:2px 0 7px;font-size:22px}
.v3ModalHead p{font-size:12px;color:#92989a;margin:0}
.v3PickTiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px}
.v3PickTiles button{background:#fafafa;border:1px solid #e1e2e0;display:flex;flex-direction:column;text-align:left;gap:6px;padding:13px;min-height:117px;cursor:pointer;border-radius:0}
.v3PickTiles button.active{background:#ebf1f3;border-color:#86a2b0}
.v3PickTiles b{font-size:22px;font-weight:500;color:#577688}
.v3PickTiles strong{font-size:12px}.v3PickTiles small{font-size:10px;color:#969ca0}
.v3ModalPane{border-top:1px solid #edf0ef;padding-top:15px}
.v3ModalPane .questionDropZone{min-height:110px;border-radius:0}
.v3ModalPane label{font-size:11px;font-weight:700;color:#555}
.v3ModalPane textarea,.v3ModalPane select{border-radius:0}
.v3ModalPane .btn{border-radius:0}
.v3PdfTools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:13px 0}
#v3PdfCanvas{display:block;max-width:100%;max-height:45vh;width:auto;height:auto;margin:12px auto;background:#f4f4f3;border:1px solid #eee}
#v3PdfMessage{font-size:11px;color:#858b8e}
.v3ModalPane .reusePanel{border-radius:0}
@media(max-width:1000px){.v3MediaGrid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}.v3Block{padding:19px}.sideBrand img{width:150px}}
@media(max-width:760px){.shell{grid-template-columns:1fr}.sidebar{padding:11px 12px}.sideBrand{border:0;margin:0;padding:5px 4px 10px}.sideBrand img{width:137px}.sidebar nav{display:flex}.sidebar .navBtn{padding:8px 10px}.content{padding:17px 14px 65px}.v3DetailTop{padding-top:0}.v3TitleRow h1{font-size:23px}.v3Block{padding:15px}.v3SectionHead{gap:12px}.v3Steps{gap:4px}.v3Step{padding:9px;font-size:10px}.v3Submit{padding:15px}.v3PickTiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:470px){.v3SectionHead{flex-direction:column}.v3SectionHead .btn{align-self:start}.v3Two{grid-template-columns:1fr}.v3ListControls{display:grid}.v3MediaGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.v3VisualCard .attachmentThumb{height:115px}.v3VisualCard .attachmentInfo{padding:8px}.v3Submit{flex-direction:column;align-items:stretch}.v3TitleRow{align-items:flex-start}}