/* tools-common.css — NovaSolver Tool Pages Common Styles */
/* All tool pages should link this file instead of duplicating CSS */

/* === Reset & Variables === */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#001F3F;--accent:#007BFF;--accent2:#00B4D8;
  --bg:#F8F9FA;--card:#ffffff;--text:#1a1a2e;--muted:#6c757d;
  --border:#dee2e6;--green:#00b894;--orange:#f39c12;--red:#e74c3c;
}
html,body{overflow-x:hidden}
body{font-family:'Noto Sans JP',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}

/* === Header === */
header{background:var(--navy);color:#fff;padding:0 24px}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px;height:56px}
.header-logo{font-size:0.85rem;font-weight:600;color:#fff;text-decoration:none;opacity:.8}
.header-logo:hover{opacity:1}
.header-sep{color:rgba(255,255,255,.3)}
.header-title{font-size:1rem;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.header-back{margin-left:auto;font-size:.8rem;color:rgba(255,255,255,.7);text-decoration:none;display:flex;align-items:center;gap:6px;flex-shrink:0}
.header-back:hover{color:#fff}
.lang-nav{display:flex;gap:6px;flex-shrink:0}
.lang-nav a{font-size:.75rem;color:rgba(255,255,255,.6);text-decoration:none;padding:3px 8px;border-radius:4px;border:1px solid rgba(255,255,255,.2)}
.lang-nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.lang-nav a.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* === Hero === */
.hero{background:linear-gradient(135deg,var(--navy) 0%,#003875 60%,#0056a8 100%);color:#fff;padding:20px 0 16px}
.hero-inner{max-width:1200px;margin:0 auto;padding:0 24px}
.hero-badge{display:inline-block;background:rgba(0,180,216,.25);color:var(--accent2);font-size:0.72rem;font-weight:700;letter-spacing:.08em;padding:4px 10px;border-radius:20px;border:1px solid rgba(0,180,216,.4);margin-bottom:10px;text-transform:uppercase}
.hero h1{font-size:clamp(1.2rem,2.5vw,1.6rem);font-weight:800;margin-bottom:4px}
.hero-sub{color:rgba(255,255,255,.75);font-size:0.82rem;line-height:1.5;max-width:640px}
.eq-display{margin-top:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 16px;display:block;overflow-x:auto;max-width:100%;font-size:0.9rem;color:rgba(255,255,255,.92)}

/* === Main Grid === */
.main{max-width:1200px;margin:0 auto;padding:16px 24px;display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
@media(max-width:820px){.main{grid-template-columns:1fr}}
.main>*{min-width:0;max-width:100%}

/* === Panel (Left) === */
.panel{background:var(--card);border-radius:14px;padding:22px;box-shadow:0 2px 16px rgba(0,0,0,.06);border:1px solid var(--border);overflow-x:hidden}
.panel-title{font-size:0.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.panel-title::after{content:'';flex:1;height:1px;background:var(--border)}

/* === Parameter Controls === */
.param-group{margin-bottom:14px}
.param-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.param-name{font-size:0.83rem;font-weight:600;color:var(--text)}
.param-value{font-family:'Roboto Mono',monospace;font-size:0.82rem;color:var(--accent);font-weight:600;background:rgba(0,123,255,.08);padding:2px 8px;border-radius:6px;min-width:80px;text-align:right}
.field-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.num-wrap{display:flex;align-items:center;gap:4px}
.num-input{width:70px;padding:3px 6px;border:1px solid var(--border);border-radius:6px;font-family:'Roboto Mono',monospace;font-size:0.82rem;text-align:right;background:var(--bg);color:var(--text)}
.num-unit{font-size:0.78rem;color:var(--muted);min-width:24px}
.param-desc{font-size:0.73rem;color:var(--muted);margin-bottom:6px}
.divider{height:1px;background:var(--border);margin:14px 0}

/* === Sliders === */
input[type=range]{width:100%;-webkit-appearance:none;height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--pct,50%),var(--border) var(--pct,50%),var(--border) 100%);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 2px 6px rgba(0,123,255,.4);transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}
select{padding:7px 10px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:0.85rem;background:var(--bg);color:var(--text);outline:none;width:100%}

/* === Buttons === */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;border:none;padding:9px 18px;border-radius:8px;cursor:pointer;font-size:0.85rem;font-family:inherit;font-weight:600;transition:background .2s}
.btn:hover{background:#0056b3}
.preset-btn{padding:5px 10px;font-size:0.76rem;border-radius:6px;border:1px solid var(--border);background:var(--bg);cursor:pointer;font-family:inherit;transition:all .2s}
.preset-btn:hover,.preset-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(0,123,255,.07)}
.btn-group{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}

/* === Stat Cards === */
.stat-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.stat-card{background:var(--card);border-radius:10px;padding:12px;text-align:center;border:1px solid var(--border)}
.stat-card .sv,.stat-val,.stat-value{font-size:1rem;font-weight:700;color:var(--accent);font-family:'Roboto Mono',monospace}
.stat-card .sl,.stat-lbl,.stat-label{font-size:0.68rem;color:var(--muted);margin-top:2px}
.stat-unit{font-size:0.7rem;color:var(--muted)}

/* === Viz Panel (Right) === */
.viz-panel{background:var(--card);border-radius:14px;padding:22px;box-shadow:0 2px 16px rgba(0,0,0,.06);border:1px solid var(--border)}
.viz-panel,.right-col{min-width:0;max-width:100%}

/* === Chart Card (collapsible via collapsible-cards.js) === */
.chart-card{background:var(--card,#fff);border-radius:14px;padding:20px;box-shadow:0 2px 16px rgba(0,0,0,.06);border:1px solid var(--border,#dee2e6)}
.chart-card .chart-title{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6c757d);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.viz-panel>canvas,.chart-card>canvas,.chart-wrap>canvas,.canvas-wrap>canvas{display:block;width:100%}
canvas{max-width:100%}

/* === Theory Box === */
.theory-box{background:rgba(0,123,255,.04);border-left:3px solid var(--accent);padding:14px 16px;border-radius:0 8px 8px 0;font-size:0.85rem;line-height:1.7;margin-top:16px;overflow-x:auto;max-width:100%}
.theory-box h3{font-size:0.88rem;color:var(--accent);margin-bottom:8px;font-weight:700}
.theory-box mjx-container{max-width:100%;overflow-x:auto;display:block}

/* === Collapsible theory-box / cae-note === */
details.theory-box>summary,details.cae-note>summary{list-style:none;cursor:pointer;user-select:none;-webkit-user-select:none}
details.theory-box>summary::-webkit-details-marker,details.cae-note>summary::-webkit-details-marker{display:none}
details.theory-box>summary h3,details.theory-box>summary h4{margin-bottom:0}
details.theory-box[open]>summary h3,details.theory-box[open]>summary h4{margin-bottom:6px}
details.cae-note>summary{font-size:0.85rem;font-weight:600}
details.theory-box>summary .expand-icon,details.cae-note>summary .expand-icon{font-size:0.6rem;color:var(--muted,#6c757d);transition:transform .2s;margin-left:6px;vertical-align:middle}
details.theory-box[open]>summary .expand-icon,details.cae-note[open]>summary .expand-icon{transform:rotate(180deg)}

/* === Explanation Section === */
.explanation{max-width:1200px;margin:0 auto;padding:40px 24px 60px}
.explanation h2{font-size:19px;font-weight:700;color:var(--accent);margin:24px 0 10px;border-left:3px solid var(--accent);padding-left:12px}
.explanation p{font-size:15px;line-height:1.8;color:var(--text);margin-bottom:12px}

/* === Chat / Conversation === */
.chat{background:rgba(0,123,255,.04);border:1px solid rgba(0,123,255,.1);border-radius:12px;padding:16px;margin:20px 0}
.cmsg{display:flex;gap:10px;margin-bottom:12px;align-items:flex-start}
.cmsg .ico{font-size:22px;flex-shrink:0}
.cmsg .bub{background:var(--card);border-radius:8px;padding:10px 14px;font-size:14px;line-height:1.7;color:var(--text);border:1px solid var(--border)}
.cmsg.st .bub{border-left:3px solid var(--accent2)}
.cmsg.pr .bub{border-left:3px solid #f59e0b}

/* === FAQ === */
.faq-section{margin:20px 0}
.faq-item{border:1px solid var(--border,#dee2e6);border-radius:8px;margin-bottom:8px;overflow:hidden}
.faq-q{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 18px;font-size:14px;font-weight:600;cursor:pointer;background:var(--card,#fff);border:none;text-align:left;font-family:inherit;color:var(--text,#1a1a2e)}
.faq-q:hover{background:var(--bg,#F8F9FA)}
.faq-q .arrow{transition:transform .25s;color:var(--muted,#6c757d);flex-shrink:0;margin-left:12px}
.faq-item.open .faq-q .arrow{transform:rotate(180deg)}
.faq-a{display:none;padding:12px 18px 16px;font-size:14px;line-height:1.75;color:#444;background:var(--bg,#F8F9FA);border-top:1px solid var(--border,#dee2e6)}
.faq-item.open .faq-a{display:block}

/* === Overflow control === */
.panel,.chart-card,.right-col,.controls,.charts-area{max-width:100%;overflow-x:clip}

/* === Mobile: 820px === */
@media(max-width:820px){
  .hero{padding:18px 0 14px}
  .hero h1{font-size:1.15rem;margin-bottom:4px}
  .hero-sub{font-size:0.78rem;line-height:1.4}
  .hero-badge{margin-bottom:6px;font-size:0.65rem;padding:3px 8px}
  .panel{max-height:50vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 10px}
  .panel-title{margin-bottom:4px;font-size:0.6rem}
  .param-group{margin-bottom:3px}
  .param-label{margin-bottom:0}
  .param-name{font-size:0.74rem;line-height:1.2}
  .param-value{font-size:0.72rem;padding:1px 4px}
  .field-header{margin-bottom:0}
  .num-input{width:60px;padding:2px 4px;font-size:.74rem}
  .num-unit{font-size:.68rem}
  input[type=range]{height:3px;margin:0}
  select{padding:4px 6px;font-size:.76rem}
  .divider{margin:3px 0;opacity:.5}
  .theory-box{font-size:0.78rem;padding:10px 12px;margin-top:10px}
  .theory-box h3{font-size:0.8rem;margin-bottom:4px}
  .stat-cards{gap:6px}
  .stat-card{padding:8px;border-radius:6px;text-align:center}
  .stat-card .sv{font-size:0.95rem}
  .stat-card .sl{font-size:0.62rem}
  .btn{padding:7px 14px;font-size:0.8rem}
  .preset-btn{padding:4px 8px;font-size:0.7rem}
  .chart-card,.viz-panel{padding:12px;border-radius:10px}
  .chart-title{font-size:.68rem;margin-bottom:8px}
}

/* === Mobile: 640px (ultra-compact) === */
@media(max-width:640px){
  .header-sep{display:none}
  .hero{padding:10px 0 8px}
  .hero h1{font-size:1.05rem}
  .hero-sub{display:none}
  .hero-badge{margin-bottom:4px;font-size:0.6rem;padding:2px 6px}
  .main{padding:6px 6px;gap:6px}
  .panel{max-height:45vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:7px;border-radius:10px}
  .panel-title{margin-bottom:4px;font-size:.58rem}
  .param-group{margin-bottom:2px}
  .field-header{margin-bottom:0}
  .param-label{margin-bottom:0}
  .param-name{font-size:.71rem}
  .param-value{font-size:.71rem;padding:1px 5px;min-width:auto}
  .num-wrap{gap:2px}
  .num-input{width:56px;padding:1px 3px;font-size:.74rem;border-radius:4px}
  .num-unit{font-size:.68rem;min-width:16px}
  input[type=range]{height:3px;margin:0}
  select{padding:3px 5px;font-size:.74rem;margin-bottom:2px}
  .param-desc{display:none}
  .divider{margin:3px 0;opacity:.4}
  .viz-panel{padding:12px;border-radius:10px}
  .stat-card{padding:6px}
  .stat-card .sv{font-size:0.85rem}
  .btn{padding:6px 12px;font-size:0.78rem}
  .preset-btn{padding:3px 6px;font-size:0.68rem}
  /* Mobile compact stat cards: 3-column (balances readability and compactness) */
  .stat-cards,.stats-row,.stat-grid,.stats-grid{grid-template-columns:repeat(3,1fr)!important;gap:4px}
  .stat-card{padding:5px 4px;border-radius:5px;text-align:center}
  .stat-card .sv,.stat-card .val,.stat-card .value,.stat-val,.stat-value{font-size:.82rem;line-height:1.2}
  .stat-card .sl,.stat-card .lbl,.stat-card .label,.stat-lbl,.stat-label{font-size:.58rem;margin-top:1px;line-height:1.15}
  .stat-unit{font-size:.52rem}
}