@import url('../../fonts/dmmono-barlow.css');
:root{
  --bg:#F5F2EC; --surface:#FFF; --ink:#23234A; --muted:#888899;
  --accent:#3355DD; --green:#2A8A2A; --red:#CC2222; --orange:#CC6600;
  --warn:#DD8800;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);font-family:'Barlow',sans-serif;color:var(--ink);min-height:100vh;padding-bottom:3rem;}

/* ── Top bar (back + author) ── */
.top-bar{display:flex;align-items:center;justify-content:space-between;padding:.45rem 1.8rem;background:#EDEAE3;border-bottom:1px solid #D0CCC4;flex-wrap:wrap;gap:.5rem;}
.back-btn{font-family:'DM Mono',monospace;font-size:.62rem;font-weight:600;letter-spacing:.08em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:.4rem;padding:.25rem .6rem;border:1.5px solid var(--ink);border-radius:3px;transition:all .15s;background:transparent;cursor:pointer;}
.back-btn:hover{background:var(--ink);color:#fff;}
.back-btn::before{content:'←';font-size:.75rem;}
.author-credit{font-family:'DM Mono',monospace;font-size:.6rem;color:var(--muted);letter-spacing:.06em;}
.author-credit a{color:var(--accent);text-decoration:none;font-weight:600;}
.author-credit a:hover{text-decoration:underline;}
/* ── Header ── */
header{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.8rem 1rem;border-bottom:2.5px solid var(--ink);flex-wrap:wrap;}
header h1{font-size:clamp(1.2rem,2.5vw,1.8rem);font-weight:800;letter-spacing:-0.02em;text-transform:uppercase;}
header .sub{font-family:'DM Mono',monospace;font-size:0.68rem;color:var(--muted);letter-spacing:0.08em;}
header .badge{background:var(--ink);color:#fff;font-family:'DM Mono',monospace;font-size:0.62rem;padding:0.28rem 0.7rem;border-radius:2px;}
.lang-toggle{margin-left:auto;display:flex;gap:0;border:1.5px solid var(--ink);border-radius:4px;overflow:hidden;}
.lang-btn{font-family:'DM Mono',monospace;font-size:0.65rem;font-weight:600;padding:0.28rem 0.65rem;cursor:pointer;border:none;background:transparent;color:var(--ink);letter-spacing:.06em;transition:all .15s;}
.lang-btn.active{background:var(--ink);color:#fff;}
.lang-btn:hover:not(.active){background:#E8E4DC;}

/* ── Tab bar ── */
.tabs{display:flex;gap:0;border-bottom:2px solid #D0CCC4;padding:0 1.8rem;background:var(--surface);}
.tab{font-family:'DM Mono',monospace;font-size:0.7rem;letter-spacing:0.1em;padding:0.65rem 1.1rem;cursor:pointer;border:none;background:transparent;color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-2px;transition:all .15s;text-transform:uppercase;}
.tab:hover{color:var(--ink);}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:500;}

/* ── Panels ── */
.panel{display:none;padding:1.2rem 1.8rem;max-width:1200px;margin:0 auto;}
.panel.active{display:block;}

/* ── Canvas card ── */
.canvas-card{background:var(--surface);border:1.5px solid #D0CCC4;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.07);}
canvas{display:block;width:100%;background:#FAFAF7;}
.step-bar{display:flex;align-items:center;gap:.8rem;padding:.55rem 1rem;border-top:1px solid #E8E4DC;background:#FAFAF7;}
.step-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes pulseR{0%,100%{opacity:1}50%{opacity:.25}}
.step-text{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--ink);}

/* ── Controls bar ── */
.controls{display:flex;gap:.45rem;padding:.65rem 1rem;border-top:1px solid #E8E4DC;flex-wrap:wrap;background:var(--surface);}
.btn{background:var(--surface);border:1.5px solid #BBBBC8;color:var(--ink);font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.08em;padding:.35rem .85rem;cursor:pointer;border-radius:4px;transition:all .15s;}
.btn:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn.red{border-color:#CC4422;color:#CC4422;}
.btn.red:hover,.btn.red.active{background:#CC2222;color:#fff;border-color:#CC2222;}
.btn.green{border-color:#2A8A2A;color:#2A8A2A;}
.btn.green:hover,.btn.green.active{background:#2A8A2A;color:#fff;border-color:#2A8A2A;}

/* ── Two-col layout ── */
.two-col{display:grid;grid-template-columns:1fr 220px;gap:1.2rem;}
@media(max-width:740px){.two-col{grid-template-columns:1fr;}}
.sidebar{display:flex;flex-direction:column;gap:.85rem;}

/* ── Info cards ── */
.card{background:var(--surface);border:1.5px solid #D0CCC4;border-radius:6px;padding:.85rem 1rem;box-shadow:0 1px 5px rgba(0,0,0,.05);}
.card h3{font-family:'DM Mono',monospace;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem;border-bottom:1px solid #EEE;padding-bottom:.32rem;}
.card p,.card li{font-size:.78rem;line-height:1.65;color:#444;}
.card ul{padding-left:1rem;}
.card.error{background:#FFF5F5;border-color:#FFBBBB;}
.card.error h3{color:var(--red);}
.card.error p{color:#882222;}
.card.error .cause{font-family:'DM Mono',monospace;font-size:.62rem;color:#AA3333;margin-top:.45rem;padding:.32rem .5rem;background:#FFE8E8;border-radius:3px;line-height:1.7;}
.card.warn{background:#FFFAF0;border-color:#FFDDAA;}
.card.warn h3{color:var(--orange);}

/* ── Phase tracker ── */
.phase-track{display:flex;flex-direction:column;gap:.25rem;}
.ph{display:flex;align-items:center;gap:.45rem;font-family:'DM Mono',monospace;font-size:.6rem;color:var(--muted);padding:.2rem .38rem;border-radius:3px;transition:all .18s;}
.ph.active{background:#EEF2FF;color:var(--accent);}
.ph.done{color:var(--green);}
.ph.err{color:var(--red);background:#FFF0F0;}
.ph-num{width:14px;height:14px;border-radius:50%;background:#E8E6EE;display:flex;align-items:center;justify-content:center;font-size:.52rem;flex-shrink:0;}
.ph.active .ph-num{background:var(--accent);color:#fff;}
.ph.done .ph-num{background:var(--green);color:#fff;}
.ph.err .ph-num{background:var(--red);color:#fff;}

/* ── Sliders panel ── */
.sliders-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.5rem;margin-bottom:1.2rem;}
@media(max-width:600px){.sliders-grid{grid-template-columns:1fr;}}
.slider-row{display:flex;flex-direction:column;gap:.3rem;}
.slider-label{display:flex;justify-content:space-between;align-items:baseline;}
.slider-label span:first-child{font-family:'DM Mono',monospace;font-size:.65rem;color:var(--ink);letter-spacing:.06em;}
.slider-val{font-family:'DM Mono',monospace;font-size:.7rem;font-weight:500;}
.slider-val.ok{color:var(--green);}
.slider-val.warn{color:var(--warn);}
.slider-val.bad{color:var(--red);}
input[type=range]{width:100%;accent-color:var(--accent);height:4px;cursor:pointer;}
.risk-bar-wrap{margin-top:.5rem;}
.risk-label{font-family:'DM Mono',monospace;font-size:.6rem;color:var(--muted);margin-bottom:.3rem;}
.risk-bar{height:10px;border-radius:5px;background:#E8E6E0;overflow:hidden;position:relative;}
.risk-fill{height:100%;border-radius:5px;transition:width .4s,background .4s;}
.risk-text{font-family:'DM Mono',monospace;font-size:.7rem;margin-top:.3rem;}
.slider-desc{font-size:.72rem;color:#666;line-height:1.45;margin-top:.18rem;padding:.3rem .45rem;background:#F5F2EC;border-left:2.5px solid #BBBBC8;border-radius:0 3px 3px 0;transition:border-color .2s;}
.slider-desc.ok{border-left-color:var(--green);}
.slider-desc.warn{border-left-color:var(--warn);}
.slider-desc.bad{border-left-color:var(--red);}
.slider-desc strong{font-weight:700;color:var(--ink);}

/* ── Compare panel ── */
.compare-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:640px){.compare-wrap{grid-template-columns:1fr;}}
.compare-title{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.4rem .8rem;border-radius:4px 4px 0 0;text-align:center;}
.compare-title.ok{background:#EFF8EF;color:var(--green);border:1.5px solid #AADDAA;}
.compare-title.fail{background:#FFF0F0;color:var(--red);border:1.5px solid #FFBBBB;}

/* ── Failures panel ── */
.fail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin-bottom:1.2rem;}
.fail-card{background:var(--surface);border:1.5px solid #D0CCC4;border-radius:7px;padding:.85rem 1rem;cursor:pointer;transition:all .15s;position:relative;}
.fail-card:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(51,85,221,.12);}
.fail-card.selected{border-color:var(--accent);background:#F0F3FF;}
.fail-card h4{font-size:.85rem;font-weight:700;margin-bottom:.3rem;color:var(--ink);}
.fail-card p{font-size:.75rem;color:#555;line-height:1.5;}
.fail-badge{position:absolute;top:.7rem;right:.8rem;font-family:'DM Mono',monospace;font-size:.55rem;padding:.18rem .45rem;border-radius:3px;}
.fail-badge.critical{background:#FFE8E8;color:#CC2222;border:1px solid #FFBBBB;}
.fail-badge.warn{background:#FFF3E0;color:#AA6600;border:1px solid #FFDDAA;}

/* ── Visual Param Cards ── */
.pvc{padding:.8rem!important;transition:border-color .2s,box-shadow .2s;}
.pvc.ok{border-color:#AADDAA;}
.pvc.warn{border-color:#FFCC88;}
.pvc.bad{border-color:#FFAAAA;background:#FFFAFA!important;}
.pvc-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem;}
.pvc-name{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.pvc-val{font-size:1.2rem;font-weight:800;color:var(--ink);line-height:1.1;margin-top:.15rem;}
.pvc-status{font-size:1.1rem;line-height:1;}
.pvc-canvas{display:block;width:100%;border-radius:4px;background:#F5F2EC;margin-bottom:.5rem;}
.pvc-slider{width:100%;accent-color:var(--accent);cursor:pointer;margin-bottom:.35rem;}
.pvc-msg{font-size:.75rem;line-height:1.45;color:#555;min-height:1.5em;padding:.2rem .3rem;border-radius:3px;}
.pvc-msg.ok{color:var(--green);}
.pvc-msg.warn{color:var(--warn);}
.pvc-msg.bad{color:var(--red);font-weight:600;}

/* ── Stats panel ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem;margin-bottom:1.2rem;}
.stat-card{background:var(--surface);border:1.5px solid #D0CCC4;border-radius:6px;padding:.9rem;text-align:center;}
.stat-val{font-size:1.8rem;font-weight:800;color:var(--ink);line-height:1;}
.stat-val.green{color:var(--green);}
.stat-val.red{color:var(--red);}
.stat-val.orange{color:var(--orange);}
.stat-lbl{font-family:'DM Mono',monospace;font-size:.58rem;color:var(--muted);letter-spacing:.1em;margin-top:.3rem;}
.yield-bar{height:16px;border-radius:8px;background:#E8E6E0;overflow:hidden;margin-bottom:.5rem;}
.yield-fill{height:100%;border-radius:8px;transition:width .6s;}
.bond-log{max-height:180px;overflow-y:auto;font-family:'DM Mono',monospace;font-size:.6rem;line-height:1.9;border:1px solid #E0E0E0;border-radius:4px;padding:.5rem .7rem;background:#FAFAF7;}
.bond-log .ok{color:var(--green);}
.bond-log .fail-entry{color:var(--red);}

/* ══════════════════════════════════════════
   MOBILE OPTIMISATIONS
   ══════════════════════════════════════════ */

/* ── Top bar: stack on very small screens ── */
@media(max-width:480px){
  .top-bar{padding:.35rem 1rem;}
  .back-btn{font-size:.58rem;}
  .author-credit{font-size:.55rem;}
}

/* ── Header: hide subtitle + badge on mobile ── */
@media(max-width:600px){
  header{padding:.8rem 1rem .7rem;gap:.6rem;}
  header h1{font-size:1.1rem;}
  header .sub{display:none;}
  header .badge{display:none;}
  .lang-toggle{margin-left:0;}
}

/* ── Tabs: scrollable single row ── */
@media(max-width:700px){
  .tabs{padding:0 .5rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{font-size:.6rem;padding:.55rem .65rem;letter-spacing:.06em;white-space:nowrap;}
}

/* ── Panels: reduce horizontal padding ── */
@media(max-width:600px){
  .panel{padding:.9rem 1rem;}
}

/* ── Why tab: 3-col grid → 1 col on phones ── */
@media(max-width:560px){
  #tab-why [style*="grid-template-columns:repeat(3,1fr)"]{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  #tab-why [style*="grid-template-columns:1fr 1fr"]{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  /* daily life icons grid: 2 cols instead of auto */
  #tab-why [style*="minmax(140px"]{
    grid-template-columns:1fr 1fr !important;
  }
}

/* ── Risk bar row: stack vertically ── */
@media(max-width:540px){
  #tab-params .card > div[style*="display:flex;align-items:center"]{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  #tab-params .card > div > div[style*="display:flex;gap:1.5rem"]{
    margin-top:.5rem;
  }
}

/* ── PVC grid: single column on phones ── */
@media(max-width:400px){
  #pvcGrid{grid-template-columns:1fr !important;}
}

/* ── Capillar tab: stack canvas + cards ── */
@media(max-width:700px){
  #cap-grid{
    grid-template-columns:1fr !important;
  }
  /* Step buttons: 3 per row */
  .cap-step-btns{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:.4rem !important;
  }
  #tab-capillar .btn{
    font-size:.6rem;
    padding:.32rem .4rem;
    text-align:center;
  }
}

/* ── Stats tab two-col → single ── */
@media(max-width:600px){
  .two-col{grid-template-columns:1fr;}
  .sidebar{margin-top:.5rem;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
}

/* ── US effect mini-grid → stacked ── */
@media(max-width:480px){
  #pvc-us [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
}

/* ── General touch targets ── */
@media(max-width:700px){
  .btn{min-height:36px;}
  input[type=range]{height:20px;}
}