/* content width scales with viewport so it keeps a similar proportion on large screens */
.draft-wrap{max-width:clamp(960px,68vw,1800px);margin:0 auto;padding:0 clamp(24px,2.5vw,48px) 80px;}
/* full-width hero band: the .draft-header is a direct child of #tab1 (no 100vw hacks),
   so it naturally spans edge-to-edge and sits flush under the fixed nav.
   .draft-header-inner re-centers the text to the same 960px column as the body. */
.draft-header{background:var(--near-black);clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);padding:48px 0 72px;margin-bottom:40px;}
.draft-header-inner{max-width:clamp(960px,68vw,1800px);margin:0 auto;padding:0 clamp(24px,2.5vw,48px);}
.draft-header .eyebrow{color:var(--mint);margin-bottom:12px;}
.draft-header h1{font-size:clamp(22px,3vw,34px);font-weight:800;color:var(--off-white);letter-spacing:-0.02em;margin-bottom:6px;}
.draft-header .sub{font-size:13px;color:#999;}
.draft-header .grad-bar{height:4px;width:60px;background:var(--grad-h);border-radius:3px;margin:16px 0 20px;}
.meta-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--off-white);border-radius:14px;overflow:hidden;border:1px solid var(--border);margin-bottom:36px;}
.meta-table td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:top;}
.meta-table tr:last-child td{border-bottom:none;}
.meta-table td:first-child{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-subtle);width:180px;white-space:nowrap;}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px;align-items:center;}
.legend span{font-size:11px;font-weight:700;color:var(--text-subtle);margin-right:4px;}
.leg-pill{padding:4px 12px;border-radius:999px;font-size:11px;font-weight:700;}
.leg-opt{background:var(--lavender);color:#4a1a7a;border:1px solid var(--peach-warm);}
.leg-new{background:var(--mint);color:#1a5c2a;border:1px solid #8edda0;}
.leg-unch{background:var(--blue-ice);color:#1a4a5c;border:1px solid var(--blue-sky);}
.leg-rev{background:#FFF3CD;color:#7a4f00;border:1px solid #f0d070;}
.section-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-subtle);margin:40px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--border);}
.change-block{background:var(--off-white);border:1px solid var(--border);border-radius:14px;margin-bottom:18px;overflow:hidden;position:relative;}
/* trailing explanatory notes (direct children of the block) render as a footer cell: flush under the Before/After grid with a divider and cream fill, so the columns read as closed instead of cut off */
.change-block>p{margin:0 !important;padding:12px 16px;border-top:1px solid var(--border);background:var(--warm-cream);font-size:12px;line-height:1.55;color:var(--text-subtle);}
.change-block .block-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--warm-cream);}
.block-header .block-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--near-black);}
.block-header .comment-btn{background:none;border:1px solid var(--border);border-radius:6px;width:24px;height:24px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-subtle);transition:all 0.15s;flex-shrink:0;}
.block-header .comment-btn:hover{background:var(--lavender);border-color:var(--peach-warm);color:#4a1a7a;}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;}
.ba-before{padding:16px;border-right:1px solid var(--border);}
.ba-after{padding:16px;background:#fdf8ff;}
.ba-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.09em;margin-bottom:8px;}
.ba-before .ba-label{color:#aaa;}
.ba-after .ba-label{color:#7c3aed;}
.ba-before p{font-size:13px;line-height:1.6;color:#aaa;}
.ba-after p{font-size:13px;line-height:1.6;color:var(--near-black);font-weight:500;}
.ba-after p strong{color:#7c3aed;font-weight:700;}
/* state colors: Unchanged=blue, Optimized=purple (.ba-after), New=green — pill, box fill, label & headings match */
.unch-block{padding:16px;background:#eef7ff;border-left:3px solid var(--blue-sky);}
.unch-block .ba-label{color:#1a4a5c;}
.unch-block h3{font-size:15px;margin:14px 0 6px;color:#1a4a5c;}
.unch-block p{font-size:13px;line-height:1.6;color:#27505f;}
.unch-block ul{font-size:13px;line-height:1.6;color:#27505f;padding-left:20px;margin:6px 0;}
.unch-block p strong{color:#1a4a5c;font-weight:700;}
.unch-block a{color:#1a6a8c;}
.new-block{padding:16px;background:#eefcf2;border-left:3px solid #8edda0;}
.new-block .ba-label{color:#1a5c2a;}
.new-block h3{font-size:15px;margin:14px 0 6px;color:#1a5c2a;}
.new-block p{font-size:13px;line-height:1.6;color:#1f4d33;}
.new-block p strong{color:#1a5c2a;font-weight:700;}
.new-block a{color:#1a7a45;}
.change-note{padding:10px 16px;background:#faf8ff;border-top:1px solid #ede8ff;font-size:11.5px;color:#6a3aad;line-height:1.55;}
.inline-comment{display:none;padding:10px 16px;border-top:1px solid var(--border);background:var(--warm-cream);}
.inline-comment textarea{width:100%;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-family:'Raleway',sans-serif;font-size:12px;resize:vertical;background:var(--off-white);color:var(--near-black);min-height:64px;}
.inline-comment textarea:focus{outline:none;border-color:var(--peach-warm);}
.pill-opt{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;background:var(--lavender);color:#4a1a7a;border:1px solid var(--peach-warm);margin-left:6px;vertical-align:middle;}
.pill-new{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;background:var(--mint);color:#1a5c2a;border:1px solid #8edda0;margin-left:6px;vertical-align:middle;}
.pill-unch{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;background:var(--blue-ice);color:#1a4a5c;border:1px solid var(--blue-sky);margin-left:6px;vertical-align:middle;}
.pill-rev{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;background:#FFF3CD;color:#7a4f00;border:1px solid #f0d070;margin-left:6px;vertical-align:middle;}
.faq-class-table{width:100%;border-collapse:collapse;font-size:12px;border-radius:12px;overflow:hidden;border:1px solid var(--border);margin-bottom:16px;}
.faq-class-table th{background:var(--near-black);color:var(--off-white);padding:9px 14px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;}
.faq-class-table td{padding:9px 14px;border-bottom:1px solid var(--border);line-height:1.5;}
.faq-class-table tr:last-child td{border-bottom:none;}
.faq-class-table tr:nth-child(even) td{background:var(--warm-cream);}
.badge-keep-sm{font-size:9px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--mint);color:#1a5c2a;white-space:nowrap;}
.badge-opt-sm{font-size:9px;font-weight:700;padding:1px 7px;border-radius:999px;background:#FFF3CD;color:#7a4f00;border:1px solid #f0d070;white-space:nowrap;}
.badge-rep-sm{font-size:9px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--pink);color:#7a1a3a;white-space:nowrap;}
.kw-table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--off-white);border-radius:14px;overflow:hidden;border:1px solid var(--border);margin-bottom:18px;}
.kw-table th{background:var(--near-black);color:var(--off-white);padding:10px 15px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;}
.kw-table td{padding:10px 15px;border-bottom:1px solid var(--border);line-height:1.5;}
.kw-table tr:last-child td{border-bottom:none;}
.kw-table tr:nth-child(even) td{background:var(--warm-cream);}
.kw-table .kw-hit{color:#7c3aed;font-weight:700;}
.kw-table .kw-miss{color:#aaa;font-style:italic;}
.schema-wrap{background:#1a1a1a;border-radius:14px;overflow:hidden;margin-bottom:36px;}
.schema-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,0.08);}
.schema-header span{font-size:12px;font-weight:700;color:#ccc;letter-spacing:0.04em;}
.schema-copy-btn{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:6px;padding:5px 12px;font-size:11px;font-weight:700;color:#ccc;cursor:pointer;transition:all 0.15s;font-family:'Raleway',sans-serif;}
.schema-copy-btn:hover{background:var(--mint);color:#1a5c2a;border-color:#8edda0;}
.schema-display{padding:18px;overflow-x:auto;}
.schema-display pre{font-family:monospace;font-size:11.5px;color:#a8d8a8;line-height:1.65;white-space:pre-wrap;word-break:break-word;}
/* comments fab — CRITICAL: z-index below nav */
.comments-fab{position:fixed;bottom:28px;right:28px;z-index:9000;background:var(--near-black);color:var(--off-white);border:none;border-radius:999px;padding:10px 18px;font-family:'Raleway',sans-serif;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:0 4px 20px rgba(0,0,0,0.25);transition:all 0.15s;}
.comments-fab:hover{background:#3a3a3a;transform:translateY(-1px);}
.comments-fab .fab-count{background:var(--mint);color:#1a5c2a;border-radius:999px;padding:1px 7px;font-size:10px;font-weight:800;}
/* comments panel — CRITICAL: top:44px, height:calc(100vh - 44px) */
.comments-panel{position:fixed;top:44px;right:0;bottom:0;width:360px;height:calc(100vh - 44px);background:var(--off-white);border-left:1px solid var(--border);z-index:9000;transform:translateX(100%);transition:transform 0.25s ease;display:flex;flex-direction:column;overflow:hidden;}
.comments-panel.open{transform:translateX(0);}
.panel-header{padding:14px 16px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.panel-header strong{font-size:14px;font-weight:800;}
.panel-close{background:none;border:1px solid var(--border);border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;color:var(--text-subtle);}
.panel-close:hover{background:var(--pink);color:#7a1a3a;border-color:#ffaaca;}
.panel-body{flex:1;overflow-y:auto;padding:14px;}
.panel-empty{font-size:12px;color:var(--text-subtle);text-align:center;padding:32px 16px;line-height:1.6;}
.comment-item{background:var(--warm-cream);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:10px;}
.comment-item .ci-section{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-subtle);margin-bottom:4px;}
.comment-item .ci-copy{font-size:11.5px;color:#555;margin-bottom:7px;line-height:1.5;font-style:italic;border-left:3px solid var(--lavender);padding-left:8px;}
.comment-item .ci-comment{font-size:12px;color:var(--near-black);line-height:1.5;}
.panel-footer{padding:12px 14px;border-top:1px solid var(--border);flex-shrink:0;}
.export-btn{width:100%;background:var(--near-black);color:var(--off-white);border:none;border-radius:8px;padding:9px;font-family:'Raleway',sans-serif;font-size:12px;font-weight:700;cursor:pointer;}
.export-btn:hover{background:#3a3a3a;}
/* walk-through — CRITICAL: top:44px, z-index below nav.
   Opacity kept moderate so the dimmed tab stays visible behind the card on the Mockup/Appendix steps. */
.wt-overlay{position:fixed;top:44px;left:0;right:0;bottom:0;background:rgba(20,20,20,0.62);z-index:8500;display:flex;align-items:center;justify-content:center;padding:24px;}
/* relaunch the tour — bottom-left so it never overlaps the bottom-right comments FAB */
.wt-relaunch{position:fixed;bottom:28px;left:28px;z-index:9000;background:var(--off-white);color:var(--near-black);border:1px solid var(--border);border-radius:999px;padding:9px 16px;font-family:'Raleway',sans-serif;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,0.12);transition:all 0.15s;}
.wt-relaunch:hover{background:var(--warm-cream);transform:translateY(-1px);}
.wt-card{background:var(--near-black);border:1px solid rgba(255,255,255,0.12);border-radius:20px;padding:32px 36px;max-width:480px;width:100%;}
.wt-step{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.12em;color:var(--mint);margin-bottom:10px;}
.wt-card h2{font-size:20px;font-weight:800;color:var(--off-white);margin-bottom:10px;}
.wt-card p{font-size:13px;color:#b8b8b8;line-height:1.65;margin-bottom:20px;}
.wt-nav{display:flex;align-items:center;justify-content:space-between;}
.wt-dots-row{display:flex;gap:7px;}
.wt-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.2);}
.wt-dot.on{background:var(--mint);}
.wt-btns{display:flex;gap:8px;}
.wt-btn{border:none;border-radius:8px;padding:8px 16px;font-family:'Raleway',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;}
.wt-btn-ghost{background:rgba(255,255,255,0.08);color:#ccc;}
.wt-btn-ghost:hover{background:rgba(255,255,255,0.14);}
.wt-btn-primary{background:var(--mint);color:#1a5c2a;}
.wt-btn-primary:hover{background:#a8e8b8;}
/* lists inside state boxes match their paragraph typography (fix 2026-08-14) */
.ba-before ol,.ba-before ul{font-size:13px;line-height:1.6;color:#aaa;padding-left:20px;margin:6px 0;}
.ba-after ol,.ba-after ul{font-size:13px;line-height:1.6;color:var(--near-black);font-weight:500;padding-left:20px;margin:6px 0;}
.unch-block ol{font-size:13px;line-height:1.6;color:#27505f;padding-left:20px;margin:6px 0;}
.new-block ol,.new-block ul{font-size:13px;line-height:1.6;color:#1f4d33;padding-left:20px;margin:6px 0;}

/* ===== CONTRAST GUARD (added 2026-09-15) — keep this block at the END of the file =====
   Dark surfaces own their text color so nothing placed inside them can inherit body
   near-black and vanish. Cause of the black-on-black Structured Data card: .schema-wrap is
   #1a1a1a but only `.schema-display pre` had a light color, so a <pre>, <p> or <code> placed
   directly inside the card was unreadable. Verified by contrast-audit.py (Phase 10). */
.draft-header{color:var(--off-white);}
.draft-header p,.draft-header li,.draft-header span:not([class]),.draft-header strong:not([class]),.draft-header a:not([class]),#tab1 .draft-header p,#tab2 .draft-header p,#tab3 .draft-header p{color:inherit;}
.draft-header .sub,.draft-header p.sub,#tab1 .draft-header .sub,#tab2 .draft-header .sub,#tab3 .draft-header .sub{color:#b8b8b8;}
.draft-header .sub strong{color:var(--off-white);}
.draft-header .legend>span:not([class]){color:#b8b8b8;}
.schema-wrap{color:#d0d0d0;}
.schema-wrap p,.schema-wrap li,.schema-wrap .schema-header,.schema-wrap .schema-header span,.schema-wrap .schema-header strong{color:#d0d0d0;}
.schema-wrap pre,.schema-wrap pre.schema-display,.schema-wrap .schema-display pre{color:#a8d8a8;}
.schema-wrap code{color:#eef3ee;background:rgba(255,255,255,0.10);border-radius:4px;padding:1px 5px;font-size:11px;}
.schema-wrap pre code{background:none;padding:0;color:inherit;font-size:inherit;}
.schema-wrap a{color:#8edda0;}
.schema-wrap .schema-note{margin:0;padding:14px 18px 0;font-size:12.5px;line-height:1.6;}
.schema-wrap>pre,.schema-wrap>pre.schema-display{margin:0;padding:14px 18px 18px;font-family:monospace;font-size:11.5px;line-height:1.65;white-space:pre-wrap;word-break:break-word;overflow-x:auto;}
.schema-wrap>pre+.schema-note{padding-bottom:16px;}
/* muted "Before" copy was #aaa on off-white (2.3:1); #8a8a8a keeps it visibly de-emphasized at 3.5:1 */
.ba-before,.ba-before p,.ba-before li,.ba-before ol,.ba-before ul,.ba-before .ba-label,.ba-before strong,.ba-before em,.kw-table .kw-miss{color:#8a8a8a;}