/* decision.css — shared styles for interactive decision trees */

.d-hero { padding: clamp(120px,14vw,176px) 0 clamp(20px,3vw,32px); }
.d-hero .crumb { display:flex; gap:8px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.12em; color:var(--faint); margin-bottom:20px; }
.d-hero .crumb a { color:var(--muted); }
.d-hero .crumb .here { color:var(--accent); }
.d-hero .eyebrow { font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.22em; color:var(--accent); text-transform:uppercase; }
.d-hero h1 { font-family:"Fraunces",serif; font-weight:500; font-size:clamp(36px,5.4vw,64px); line-height:1.04; letter-spacing:-.02em; margin-top:14px; max-width:24ch; }
.d-hero h1 em { font-style:italic; color:var(--accent); }
.d-hero .dek { margin-top:18px; color:var(--ink); font-size:clamp(16px,1.35vw,19px); line-height:1.6; max-width:62ch; font-weight:300; }
.d-hero .dek b { color:var(--accent); font-weight:500; }
.d-hero .meta { margin-top:18px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--muted); letter-spacing:.04em; }
.d-hero .meta span { margin-right:18px; }
.d-hero .meta b { color:var(--accent); font-weight:500; }

/* Path breadcrumb (where you are in the tree) */
.d-path { padding: 18px 0 8px; border-top:1px solid var(--line); }
.d-path .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:8px 6px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em; color:var(--muted); min-height:20px; }
.d-path .step { padding:4px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); white-space:nowrap; }
.d-path .step.start { color:var(--accent); border-color:var(--accent); }
.d-path .sep { color:var(--faint); }
.d-path .reset { margin-left:auto; padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink); font-family:inherit; font-size:11px; letter-spacing:.08em; cursor:pointer; text-transform:uppercase; }
.d-path .reset:hover { border-color:var(--accent); color:var(--accent); }

/* Question card */
.d-stage { padding: clamp(28px,4vw,48px) 0 clamp(60px,8vw,100px); }
.d-q { border:1px solid var(--line-strong); background:var(--surface); border-radius:14px; padding: clamp(24px,3vw,36px) clamp(24px,3vw,40px); max-width:880px; margin:0 auto; box-shadow:0 1px 0 rgba(255,255,255,.02) inset; }
.d-q .qnum { font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.22em; color:var(--accent); text-transform:uppercase; }
.d-q h2 { font-family:"Fraunces",serif; font-weight:500; font-size:clamp(24px,2.8vw,32px); line-height:1.18; letter-spacing:-.015em; margin: 8px 0 6px; color:var(--ink); }
.d-q h2 em { font-style:italic; color:var(--accent); }
.d-q .qhelp { color:var(--muted); font-size:14.5px; line-height:1.7; margin-bottom:24px; }
.d-q .qhelp b { color:var(--ink); font-weight:500; }

/* Options */
.d-opts { display:grid; grid-template-columns:1fr; gap:12px; }
.d-opt { display:block; width:100%; text-align:left; padding:18px 22px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--ink); cursor:pointer; font-family:inherit; transition:border-color .12s, background .12s, transform .08s; }
.d-opt:hover { border-color:var(--accent); background:rgba(217,151,87,.04); }
.d-opt:active { transform:translateY(1px); }
.d-opt .ohead { display:flex; align-items:baseline; gap:14px; margin-bottom:6px; }
.d-opt .otag { font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); flex:0 0 auto; }
.d-opt .ohead h3 { font-family:"Fraunces",serif; font-weight:500; font-size:18px; line-height:1.3; color:var(--ink); margin:0; }
.d-opt .ohead h3 em { font-style:italic; color:var(--accent); }
.d-opt .obody { color:var(--muted); font-size:13.5px; line-height:1.65; }
.d-opt .obody b { color:var(--ink); font-weight:500; }
.d-opt .oarr { font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--faint); margin-top:10px; display:inline-block; letter-spacing:.06em; }
.d-opt:hover .oarr { color:var(--accent); }

/* Leaf (recommendation) */
.d-leaf { max-width:880px; margin:0 auto; }
.d-leaf .ltag { font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.22em; color:var(--accent); text-transform:uppercase; }
.d-leaf h2 { font-family:"Fraunces",serif; font-weight:500; font-size:clamp(28px,3.4vw,40px); line-height:1.1; letter-spacing:-.015em; margin: 10px 0 12px; }
.d-leaf h2 em { font-style:italic; color:var(--accent); }
.d-leaf .verdict { color:var(--ink); font-size:clamp(16px,1.4vw,19px); line-height:1.6; max-width:64ch; margin-bottom:32px; font-weight:300; }
.d-leaf .verdict b { color:var(--accent); font-weight:500; }
.d-leaf h3 { font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.22em; color:var(--accent); text-transform:uppercase; margin: 36px 0 14px; }
.d-leaf ul { margin:0 0 14px; padding-left:18px; color:var(--muted); font-size:14.5px; line-height:1.85; }
.d-leaf ul li b { color:var(--ink); font-weight:500; }
.d-leaf .pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:8px; }
.d-leaf .pc { padding:18px 22px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.d-leaf .pc h4 { font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.18em; color:var(--accent); text-transform:uppercase; margin-bottom:10px; }
.d-leaf .pc ul { padding-left:18px; margin:0; color:var(--muted); font-size:13.5px; line-height:1.75; }
@media (max-width:640px) { .d-leaf .pros-cons { grid-template-columns:1fr; } }

.d-leaf .when-not { padding:16px 22px; border-left:2px solid var(--accent); background:rgba(217,151,87,.05); border-radius:0 8px 8px 0; margin-top:16px; }
.d-leaf .when-not b { color:var(--accent); }
.d-leaf .when-not p { color:var(--ink); font-size:14.5px; line-height:1.7; margin:0; font-weight:300; }

.d-leaf .next-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:14px; }
.d-leaf .nc { display:block; padding:18px 20px; border:1px solid var(--line); border-radius:10px; background:var(--surface); text-decoration:none; transition:border-color .15s,transform .15s; }
.d-leaf .nc:hover { border-color:var(--accent); transform:translateY(-2px); }
.d-leaf .nc .nctag { font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:8px; display:block; }
.d-leaf .nc h4 { font-family:"Fraunces",serif; font-weight:500; font-size:15.5px; line-height:1.3; color:var(--ink); margin-bottom:6px; }
.d-leaf .nc p { color:var(--muted); font-size:12.5px; line-height:1.6; margin:0; }
.d-leaf .nc .ncarr { font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--accent); margin-top:8px; display:inline-block; letter-spacing:.05em; }

.d-leaf .actions { margin-top:36px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.d-leaf .actions a, .d-leaf .actions button { padding:11px 18px; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink); font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; background:transparent; cursor:pointer; text-decoration:none; }
.d-leaf .actions a:hover, .d-leaf .actions button:hover { border-color:var(--accent); color:var(--accent); }
.d-leaf .actions a.primary { border-color:var(--accent); color:var(--accent); }
.d-leaf .shared { margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--faint); letter-spacing:.06em; }
.d-leaf .shared.show { color:var(--accent); }

/* Hidden tree metadata block (printed below for SEO + readability without JS) */
.d-noscript { margin-top:80px; padding-top:36px; border-top:1px dashed var(--line); }
.d-noscript h3 { font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.22em; color:var(--accent); text-transform:uppercase; margin-bottom:12px; }
.d-noscript ol { padding-left:22px; color:var(--muted); font-size:14px; line-height:1.85; }
.d-noscript ol li { margin-bottom:6px; }

/* Decisions index grid */
.dx-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; }
.dx-card { display:block; padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--surface); text-decoration:none; transition:border-color .15s, transform .15s; }
.dx-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.dx-card .tag { font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; display:block; }
.dx-card h3 { font-family:"Fraunces",serif; font-weight:500; font-size:20px; line-height:1.25; color:var(--ink); margin-bottom:8px; }
.dx-card h3 em { font-style:italic; color:var(--accent); }
.dx-card p { color:var(--muted); font-size:13.5px; line-height:1.65; margin:0; }
.dx-card .arr { font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--accent); margin-top:12px; display:inline-block; letter-spacing:.06em; }
.dx-card .endspots { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--faint); letter-spacing:.05em; }