/* Extracted from DDCP-v5.html inline <style> for CSP hardening */

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  --gold:#f0c832; --gold2:#f7d94e; --gdim:rgba(212,175,55,.12); --gglow:rgba(212,175,55,.3);
  --green:#4cd657; --red:#ff4848; --text:#f2f7ee;
  --t2:rgba(242,247,238,.88); --t3:rgba(242,247,238,.62);
  --panel:rgba(255,255,255,.08); --panel2:rgba(255,255,255,.14); --border:rgba(255,255,255,.14);
  --void:#0c1109; --deep:#111a0e; --base:#172213; --lift:#1e2e1b;
  --disp:'Cinzel',serif; --mono:'IBM Plex Mono',monospace; --body:'DM Sans',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--body);background:var(--void);color:var(--text);min-height:100vh;overflow-x:hidden;}

/* ── Progress bar ──────────────────────────────────────── */
#pgbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--green));z-index:9999;box-shadow:0 0 14px var(--gglow);pointer-events:none;will-change:width;}

/* ── Background ────────────────────────────────────────── */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.13;animation:orbf 24s ease-in-out infinite;will-change:transform;transform:translateZ(0);}
.orb-1{width:560px;height:560px;background:var(--gold);top:-120px;right:-80px;animation-duration:28s;}
.orb-2{width:420px;height:420px;background:var(--green);bottom:5%;left:-100px;animation-duration:20s;animation-delay:-9s;}
.orb-3{width:320px;height:320px;background:#4070d0;top:45%;left:40%;animation-duration:23s;animation-delay:-14s;}
@keyframes orbf{0%,100%{transform:translate3d(0,0,0) scale(1);}33%{transform:translate3d(28px,-36px,0) scale(1.06);}66%{transform:translate3d(-18px,22px,0) scale(.94);}}

/* ── Header ─────────────────────────────────────────────── */
.hdr{position:relative;z-index:10;padding:80px 32px 56px;text-align:center;animation:hdrIn .9s cubic-bezier(.16,1,.3,1) both;}
@keyframes hdrIn{from{opacity:0;transform:translateY(-28px);}to{opacity:1;transform:translateY(0);}}
.hdr-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;margin-bottom:32px;}
.hdr-brand-img{height:110px;width:auto;object-fit:contain;display:block;filter:drop-shadow(0 0 20px var(--gglow));animation:pulse 3s ease-in-out infinite;}
@keyframes pulse{0%,100%{filter:drop-shadow(0 0 16px var(--gglow));}50%{filter:drop-shadow(0 0 36px var(--gglow)) drop-shadow(0 0 56px rgba(212,175,55,.2));}}
.hdr-org{font-family:var(--disp);font-size:clamp(13px,2.5vw,18px);font-weight:700;color:var(--t3);letter-spacing:3px;text-transform:uppercase;line-height:1.4;}
.hdr-title{font-family:var(--disp);font-size:clamp(32px,5.5vw,60px);font-weight:900;color:var(--gold);letter-spacing:4px;text-transform:uppercase;line-height:1.1;margin-bottom:10px;text-shadow:0 0 50px var(--gglow);}
.hdr-sub{font-family:var(--mono);font-size:clamp(12px,1.8vw,14px);color:var(--t3);letter-spacing:3.5px;margin-bottom:40px;}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.chip{display:flex;align-items:center;gap:8px;background:var(--gdim);border:1px solid rgba(240,200,50,.22);border-radius:100px;padding:8px 18px;font-family:var(--mono);font-size:12px;color:var(--t2);letter-spacing:.8px;animation:chipIn .6s cubic-bezier(.16,1,.3,1) both;}
.chip i{color:var(--gold);font-size:11px;}
.chip:nth-child(1){animation-delay:.12s;}.chip:nth-child(2){animation-delay:.2s;}.chip:nth-child(3){animation-delay:.28s;}.chip:nth-child(4){animation-delay:.36s;}.chip:nth-child(5){animation-delay:.44s;}
@keyframes chipIn{from{opacity:0;transform:translateY(14px) scale(.95);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ── Layout ─────────────────────────────────────────────── */
.layout{position:relative;z-index:10;max-width:1340px;margin:0 auto;padding:0 24px 80px;display:grid;grid-template-columns:272px 1fr;gap:36px;}
.layout>aside{align-self:stretch;}
.layout>.doc-content{align-self:start;min-width:0;}

/* ── TOC sidebar (desktop sticky) ──────────────────────── */
.toc{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow-y:auto;background:#17231400;border:1px solid var(--border);border-radius:16px;padding:22px 0;animation:tocIn .8s cubic-bezier(.16,1,.3,1) .1s both;scrollbar-width:thin;scrollbar-color:var(--gdim) transparent;background:#1a2716;}
.toc::-webkit-scrollbar{width:4px;}.toc::-webkit-scrollbar-thumb{background:var(--gdim);border-radius:4px;}
@keyframes tocIn{from{opacity:0;transform:translateX(-18px);}to{opacity:1;transform:translateX(0);}}
.toc-hd{font-family:var(--disp);font-size:10px;font-weight:700;color:var(--gold);letter-spacing:3.5px;padding:0 20px 14px;border-bottom:1px solid var(--border);margin-bottom:6px;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.toc-hd i{font-size:11px;}
.toc a{display:flex;align-items:flex-start;gap:9px;padding:9px 20px;font-size:13px;color:var(--t3);cursor:pointer;transition:color .18s,background .18s,padding-left .18s;line-height:1.4;text-decoration:none;border-left:2px solid transparent;}
.toc a:hover{color:var(--t2);background:rgba(255,255,255,.04);border-left-color:rgba(240,200,50,.3);}
.toc a.on{color:var(--gold);background:var(--gdim);border-left-color:var(--gold);padding-left:24px;}
.toc-n{font-family:var(--mono);font-size:10px;color:var(--gold);opacity:.55;min-width:22px;margin-top:2px;flex-shrink:0;}

/* ── Mobile FAB + drawer ────────────────────────────────── */
.toc-fab{display:none;position:fixed;bottom:26px;right:22px;z-index:900;width:54px;height:54px;border-radius:50%;background:#1e2e1b;border:1.5px solid rgba(240,200,50,.45);color:var(--gold);font-size:19px;cursor:pointer;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(0,0,0,.5),0 0 18px var(--gglow);transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;animation:pulse 3s ease-in-out infinite;}
.toc-fab:hover{transform:scale(1.08);box-shadow:0 8px 30px rgba(0,0,0,.6),0 0 28px var(--gglow);}
.toc-fab.open{animation:none;transform:rotate(45deg);}
.toc-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:901;opacity:0;transition:opacity .3s;pointer-events:none;}
.toc-backdrop.show{opacity:1;pointer-events:all;}
.toc-drawer{display:none;position:fixed;bottom:0;left:0;right:0;z-index:902;background:#1a2716;border-top:1px solid rgba(240,200,50,.2);border-radius:22px 22px 0 0;max-height:72vh;overflow-y:auto;transform:translateY(100%);transition:transform .42s cubic-bezier(.16,1,.3,1);padding-bottom:28px;scrollbar-width:thin;scrollbar-color:var(--gdim) transparent;}
.toc-drawer.open{transform:translateY(0);}
.toc-drawer::-webkit-scrollbar{width:4px;}.toc-drawer::-webkit-scrollbar-thumb{background:var(--gdim);border-radius:4px;}
.drawer-handle{width:40px;height:4px;background:rgba(255,255,255,.18);border-radius:2px;margin:14px auto 16px;}
.drawer-hd{font-family:var(--disp);font-size:10px;font-weight:700;color:var(--gold);letter-spacing:3.5px;padding:0 22px 14px;border-bottom:1px solid var(--border);margin-bottom:6px;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.toc-drawer a{display:flex;align-items:flex-start;gap:10px;padding:11px 22px;font-size:14px;color:var(--t2);text-decoration:none;transition:color .18s,background .18s;line-height:1.4;border-left:2px solid transparent;}
.toc-drawer a:hover,.toc-drawer a.on{color:var(--gold);background:var(--gdim);border-left-color:var(--gold);}
.toc-drawer .toc-n{font-family:var(--mono);font-size:11px;color:var(--gold);opacity:.55;min-width:22px;margin-top:2px;flex-shrink:0;}

/* ── Section cards ──────────────────────────────────────── */
.sc{background:#192416;border:1px solid var(--border);border-radius:18px;padding:38px 42px;margin-bottom:22px;opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;will-change:transform,opacity;}
.sc.vis{opacity:1;transform:translateY(0);}
.sc:hover{border-color:rgba(240,200,50,.32);box-shadow:0 8px 40px rgba(0,0,0,.3),0 0 0 1px rgba(240,200,50,.06);}
.sc.ga{border-left:3px solid var(--gold);}
.sc.gr{border-left:3px solid var(--green);}
.sc.re{border-left:3px solid var(--red);}
.sc.bl{border-left:3px solid #5588ff;}

/* ── Header divider ─────────────────────────────────────── */
.hdr-divider{position:relative;z-index:10;max-width:1340px;margin:0 auto 36px;padding:0 24px;}
.hdr-divider-line{height:1px;background:linear-gradient(90deg,transparent,rgba(240,200,50,.35),rgba(76,214,87,.2),transparent);}

/* ── Headings ───────────────────────────────────────────── */
.sec-n{font-family:var(--mono);font-size:11px;color:var(--gold);opacity:.65;letter-spacing:2px;margin-bottom:6px;text-transform:uppercase;}
h2.st{font-family:var(--disp);font-size:clamp(19px,2.4vw,25px);font-weight:700;color:var(--text);letter-spacing:.8px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border);position:relative;}
h2.st::after{content:'';position:absolute;bottom:-1px;left:0;width:56px;height:2px;background:var(--gold);border-radius:2px;}
h3.ss{font-family:var(--disp);font-size:17px;font-weight:600;color:var(--gold);margin:26px 0 13px;letter-spacing:.4px;}
h4.sss{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--green);margin:18px 0 8px;letter-spacing:1.5px;text-transform:uppercase;}

/* ── Body text ──────────────────────────────────────────── */
p{font-size:15px;color:var(--t2);line-height:1.85;margin-bottom:14px;}
p:last-child{margin-bottom:0;}
ul,ol{list-style:none;padding:0;margin-bottom:16px;}
li{font-size:15px;color:var(--t2);line-height:1.78;margin-bottom:9px;padding-left:22px;position:relative;}
ul li::before{content:'';position:absolute;left:5px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.75;}
ol{counter-reset:oi;}
ol li{counter-increment:oi;}
ol li::before{content:counter(oi)'.';position:absolute;left:0;font-family:var(--mono);font-size:13px;color:var(--gold);font-weight:700;background:none;width:auto;height:auto;border-radius:0;opacity:1;top:2px;}
strong{color:var(--text);font-weight:700;}
a{color:var(--gold);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ── Callout boxes ──────────────────────────────────────── */
.box{border-radius:12px;padding:18px 20px;margin:18px 0;display:flex;gap:14px;align-items:flex-start;}
.box-ico{font-size:17px;margin-top:2px;flex-shrink:0;}
.box-body{flex:1;}
.box-ttl{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;}
.box p{font-size:14px;margin-bottom:0;line-height:1.75;}
.box.gold{background:var(--gdim);border:1px solid rgba(240,200,50,.22);}
.box.gold .box-ico,.box.gold .box-ttl{color:var(--gold);}
.box.green{background:rgba(76,214,87,.07);border:1px solid rgba(76,214,87,.18);}
.box.green .box-ico,.box.green .box-ttl{color:var(--green);}
.box.red{background:rgba(255,72,72,.06);border:1px solid rgba(255,72,72,.18);}
.box.red .box-ico,.box.red .box-ttl{color:var(--red);}
.box.red p{color:rgba(255,120,120,.9);}
.box.blue{background:rgba(80,140,255,.07);border:1px solid rgba(80,140,255,.18);}
.box.blue .box-ico,.box.blue .box-ttl{color:#7aaeff;}

/* ── Stage cards ────────────────────────────────────────── */
.stage-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0;}
.stg{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:12px;padding:18px;transition:border-color .25s,transform .3s cubic-bezier(.16,1,.3,1);}
.stg:hover{transform:translateY(-3px);}
.stg-badge{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:4px 14px;border-radius:100px;display:inline-block;margin-bottom:11px;}
.s1 .stg-badge{background:rgba(240,200,50,.13);color:var(--gold);border:1px solid rgba(240,200,50,.28);}.s1:hover{border-color:var(--gold);}
.s2 .stg-badge{background:rgba(255,160,0,.11);color:#ffb347;border:1px solid rgba(255,160,0,.24);}.s2:hover{border-color:#ffb347;}
.s3 .stg-badge{background:rgba(255,72,72,.1);color:var(--red);border:1px solid rgba(255,72,72,.24);}.s3:hover{border-color:var(--red);}
.stg h4{font-family:var(--disp);font-size:14px;font-weight:700;color:var(--text);margin-bottom:7px;}
.stg p{font-size:13px;color:var(--t3);margin:0;line-height:1.65;}

/* ── Definitions ────────────────────────────────────────── */
.defs{display:grid;gap:0;}
.def{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06);display:grid;grid-template-columns:190px 1fr;gap:14px;align-items:start;}
.def:last-child{border-bottom:none;}
.def-t{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--gold);letter-spacing:.4px;padding-top:2px;line-height:1.4;}
.def-d{font-size:14px;color:var(--t2);line-height:1.78;}

/* ── Access level table ─────────────────────────────────── */
.lvl-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.lvl-row:last-child{border-bottom:none;}
.lbg{font-family:var(--mono);font-size:10px;font-weight:700;padding:3px 12px;border-radius:100px;min-width:68px;text-align:center;flex-shrink:0;}
.l5{background:rgba(240,200,50,.13);color:var(--gold);border:1px solid rgba(240,200,50,.28);}
.l4{background:rgba(76,214,87,.1);color:var(--green);border:1px solid rgba(76,214,87,.2);}
.l3{background:rgba(100,160,255,.1);color:#7ab3ff;border:1px solid rgba(100,160,255,.2);}
.l2{background:rgba(255,160,0,.1);color:#ffb347;border:1px solid rgba(255,160,0,.2);}
.l1{background:rgba(255,255,255,.07);color:var(--t3);border:1px solid var(--border);}
.lvl-txt .ltt{font-weight:700;color:var(--text);font-size:14px;margin-bottom:3px;}
.lvl-txt .ltd{font-size:13px;color:var(--t3);line-height:1.55;}

/* ── Shift tags ─────────────────────────────────────────── */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;}
.tag{font-family:var(--mono);font-size:11px;font-weight:600;padding:5px 14px;border-radius:100px;letter-spacing:.8px;}
.t-mo{background:rgba(255,215,0,.11);color:#FFD700;border:1px solid rgba(255,215,0,.24);}
.t-af{background:rgba(135,206,235,.09);color:#87CEEB;border:1px solid rgba(135,206,235,.2);}
.t-ev{background:rgba(96,128,232,.11);color:#7090e8;border:1px solid rgba(96,128,232,.24);}
.t-fd{background:rgba(76,214,87,.1);color:var(--green);border:1px solid rgba(76,214,87,.2);}
.t-ot{background:rgba(255,140,0,.11);color:#FF8C00;border:1px solid rgba(255,140,0,.24);}
.t-tr{background:rgba(147,112,219,.11);color:#9370DB;border:1px solid rgba(147,112,219,.24);}
.t-sh{background:rgba(32,178,170,.11);color:#20B2AA;border:1px solid rgba(32,178,170,.24);}
.t-al{background:rgba(147,112,219,.11);color:#9370DB;border:1px solid rgba(147,112,219,.24);}
.t-sl{background:rgba(100,149,237,.1);color:#6495ED;border:1px solid rgba(100,149,237,.2);}
.t-el{background:rgba(255,140,0,.11);color:#FF8C00;border:1px solid rgba(255,140,0,.24);}
.t-ml{background:rgba(255,105,180,.1);color:#FF69B4;border:1px solid rgba(255,105,180,.2);}
.t-pl{background:rgba(180,130,255,.1);color:#B482FF;border:1px solid rgba(180,130,255,.2);}
.t-cl{background:rgba(255,72,72,.09);color:var(--red);border:1px solid rgba(255,72,72,.2);}

/* ── Feature grid ───────────────────────────────────────── */
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px;margin:16px 0;}
.fc{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:12px;padding:18px 14px;text-align:center;transition:border-color .25s,transform .3s cubic-bezier(.16,1,.3,1);}
.fc:hover{border-color:var(--gold);transform:translateY(-3px);}
.fc i{font-size:22px;color:var(--gold);margin-bottom:10px;display:block;}
.fc .fct{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--text);letter-spacing:1px;margin-bottom:6px;text-transform:uppercase;line-height:1.4;}
.fc .fcd{font-size:12px;color:var(--t3);line-height:1.55;}

/* ── Notice column ──────────────────────────────────────── */
.nc{display:inline-flex;align-items:center;gap:8px;background:var(--gdim);border:1px solid rgba(240,200,50,.2);border-radius:100px;padding:6px 14px;font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.8px;margin-bottom:16px;}

/* ── Table ──────────────────────────────────────────────── */
.tw{overflow-x:auto;margin:16px 0;border-radius:12px;border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;min-width:480px;}
thead tr{background:var(--gdim);}
th{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);padding:14px 16px;text-align:left;border-bottom:1px solid rgba(240,200,50,.2);}
td{font-size:14px;color:var(--t2);padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top;line-height:1.68;}
tr:last-child td{border-bottom:none;}
tbody tr{transition:background .18s;}
tbody tr:hover{background:rgba(255,255,255,.04);}

/* ── Flow table ─────────────────────────────────────────── */
.flow-hd{background:var(--gdim);border-bottom:1px solid rgba(240,200,50,.18);padding:16px 22px;display:flex;align-items:center;gap:12px;border-radius:14px 14px 0 0;}
.flow-hd i{color:var(--gold);font-size:15px;}
.flow-hd span{font-family:var(--disp);font-size:14px;font-weight:700;color:var(--gold);letter-spacing:1px;text-transform:uppercase;}
.flow-wrap{border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.flow-wrap .tw{margin:0;border:none;border-radius:0;}
.flow-wrap td:first-child{font-weight:600;color:var(--gold);font-family:var(--mono);font-size:13px;}

/* ── Footer ─────────────────────────────────────────────── */
.footer{position:relative;z-index:10;text-align:center;padding:40px 24px 60px;border-top:1px solid var(--border);margin-top:10px;}
.footer-brand{font-family:var(--disp);font-size:18px;font-weight:700;color:var(--gold);margin-bottom:8px;letter-spacing:2px;}
.footer-sub{font-size:12px;color:var(--t3);line-height:1.8;}

/* ── Divider ────────────────────────────────────────────── */
.div{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:6px 0 18px;}


/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:1100px){.layout{grid-template-columns:240px 1fr;gap:24px;}}
@media(max-width:820px){
  .layout{grid-template-columns:1fr;}
  .layout>aside{display:none;}
  .toc-fab{display:flex;}
  .toc-backdrop{display:block;}
  .toc-drawer{display:block;}
  .sc{padding:26px 22px;}
  .def{grid-template-columns:1fr;gap:3px;}
  .stage-row{grid-template-columns:1fr;}
  .hdr{padding:56px 20px 36px;}
  .lvl-row{flex-wrap:wrap;gap:8px;}
}
@media(max-width:540px){
  .fg{grid-template-columns:1fr 1fr;}
  .stage-row{grid-template-columns:1fr;}
  .hdr-title{letter-spacing:2px;}
  .chips{gap:8px;}
  .chip{font-size:11px;padding:6px 14px;}
}
@media print{
  body{background:#fff;color:#000;}
  .bg,#pgbar,.toc,aside,.toc-fab,.toc-drawer,.toc-backdrop{display:none!important;}
  .layout{grid-template-columns:1fr;}
  .sc{opacity:1;transform:none;border:1px solid #ddd;background:#fff;}
  h2.st,h3.ss,.def-t,.lbg,.tag,.stg-badge{color:#222!important;}
  p,li,.def-d,.lvl-txt .ltd{color:#333!important;}
}

/* ── DDCP Amendment swap (ddcp-amend-reveal.js) ─────────────────────────
   The amended block is staged in the page but stays hidden until the
   Head of HR publishes the amendment (ddcpPublish/state lists its id).
   Visibility is toggled by CSS class only — never inline display, so the
   build-step !important toggle trap cannot strip the swap. */
.ddcp-amend-new{display:none;}
.ddcp-amend-new.ddcp-amend-show{display:block;animation:ddcpAmendIn .5s cubic-bezier(.16,1,.3,1) both;}
.ddcp-amend-current.ddcp-amend-hide{display:none;}
@keyframes ddcpAmendIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
/* The ribbon is PREVIEW-ONLY chrome (marks the section under review). Once an
   amendment is published live, the section reads clean with no marker (VP
   choice 2026-06-10) — so the ribbon is hidden by default and shown only inside
   a .ddcp-amend-preview block (rule below). */
.ddcp-amend-ribbon{display:none;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--green);background:rgba(76,214,87,.12);border:1px solid rgba(76,214,87,.32);border-radius:999px;padding:5px 12px;margin-bottom:16px;}
.ddcp-amend-ribbon i{font-size:11px;}

/* ── DDCP amendment PREVIEW chrome (ddcp-amend-reveal.js ?preview=) ──────
   When the page is opened in preview mode, a fixed banner makes it
   unmistakable that the content is NOT live, and the previewed block is
   highlighted so the reviewer sees exactly where the change applies. */
#ddcp-preview-banner{position:fixed;top:0;left:0;right:0;z-index:10000;display:flex;align-items:flex-start;gap:12px;padding:12px 20px;background:linear-gradient(90deg,#3a2d05,#5a4708);color:#fff;border-bottom:2px solid var(--gold);font-size:13px;line-height:1.5;box-shadow:0 6px 24px rgba(0,0,0,.45);}
#ddcp-preview-banner i{color:var(--gold);font-size:16px;margin-top:2px;flex-shrink:0;}
#ddcp-preview-banner strong{color:var(--gold);}
html.ddcp-has-preview body{padding-top:64px;}
.ddcp-amend-new.ddcp-amend-preview{position:relative;outline:2px dashed var(--gold);outline-offset:10px;border-radius:8px;}
.ddcp-amend-new.ddcp-amend-preview .ddcp-amend-ribbon{display:inline-flex;background:rgba(240,200,50,.16);border-color:rgba(240,200,50,.4);color:var(--gold);}
.ddcp-amend-new.ddcp-amend-preview .ddcp-amend-ribbon::after{content:' · PREVIEW';opacity:.8;}

/* Preview banner Back button (VP 2026-06-11) — the way back on mobile/app shell
   where there is no browser chrome. ≥44px touch target. */
#ddcp-preview-back{flex-shrink:0;align-self:center;display:inline-flex;align-items:center;gap:7px;background:var(--gold);color:#1a1a1a;border:none;border-radius:9px;font-family:inherit;font-size:12.5px;font-weight:800;padding:10px 16px;min-height:44px;cursor:pointer;margin-left:auto;}
#ddcp-preview-back:active{transform:scale(.97);}
@media(max-width:560px){
  #ddcp-preview-banner{flex-wrap:wrap;padding:10px 14px;font-size:12px;}
  #ddcp-preview-back{width:100%;justify-content:center;margin-left:0;margin-top:4px;}
  html.ddcp-has-preview body{padding-top:118px;}
}