@charset "utf-8";
/* Naireen · board.css — #board */

/* ---------- live board ---------- */
.board-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:clamp(28px,5vw,64px); align-items:center}
.board{background:#0E0E13; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 40px 90px -45px rgba(0,0,0,.95), 0 0 0 1px rgba(245,240,230,.04) inset}
.bd-top{display:flex; align-items:center; gap:7px; padding:12px 15px; border-bottom:1px solid var(--line-soft); background:rgba(245,240,230,.02)}
.bd-dot{width:8px; height:8px; border-radius:50%; background:var(--line); flex:0 0 auto}
.bd-title{font-family:var(--f-ar); font-size:13px; color:var(--mist); margin-inline-start:8px}
.bd-badge{margin-inline-start:auto; font-family:var(--f-ui); font-size:10px; letter-spacing:.1em; color:var(--gold);
  border:1px solid rgba(214,174,91,.4); border-radius:999px; padding:3px 9px}
.bd-body{padding:16px}
.bd-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.bd-tile{background:rgba(245,240,230,.03); border:1px solid var(--line); border-radius:13px; padding:13px 14px}
.bd-tile.warn{border-color:rgba(214,174,91,.4); background:rgba(214,174,91,.07)}
.bd-k{display:block; font-family:var(--f-ui); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone)}
.bd-v{display:block; margin-top:7px; font-family:var(--f-ui); font-weight:600; font-size:clamp(18px,2vw,23px);
  color:var(--ivory); line-height:1.1; font-variant-numeric:tabular-nums}
.bd-tile.warn .bd-v{color:var(--flash)}
.bd-s{font-size:.6em; font-weight:400; color:var(--mist); margin-inline-start:3px}
.bd-tile i{display:block; margin-top:6px; font-style:normal; font-size:11.5px; color:#49B88C}
.bd-tile.warn i{color:var(--gold)}
.bd-chart{margin-top:12px; background:rgba(245,240,230,.03); border:1px solid var(--line); border-radius:13px; padding:13px 14px}
.bd-chart svg{display:block; width:100%; height:68px; margin-top:8px; overflow:visible}
.bd-line{fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.js .bd-line{stroke-dasharray:1; stroke-dashoffset:1}
.bd-area{fill:url(#bdFill); opacity:0; transition:opacity .9s ease .5s}
.bd-head{fill:var(--flash); opacity:0; transition:opacity .4s ease}
.board.run .bd-line{animation:bdraw 1.5s cubic-bezier(.3,.8,.4,1) forwards}
.board.run .bd-area,.board.run .bd-head{opacity:1}
@keyframes bdraw{to{stroke-dashoffset:0}}
.bd-alerts{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:7px}
.al{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.6; color:#CFCABE;
  background:rgba(245,240,230,.03); border:1px solid var(--line); border-radius:11px; padding:10px 12px}
.js .al{opacity:0; transform:translateY(6px)}
.al.in{opacity:1; transform:none; transition:opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1)}
.al-i{flex:0 0 auto; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:10px;
  border:1px solid var(--line); color:var(--mist); margin-top:1px}
.al.warn{border-color:rgba(214,174,91,.35)} .al.warn .al-i{border-color:var(--gold); color:var(--gold)}
.al.ok .al-i{border-color:rgba(30,138,99,.5); color:#49B88C}
@media (max-width:980px){ .board-grid{grid-template-columns:minmax(0,1fr)} .board{order:-1} }
@media (max-width:620px){ .bd-tiles{grid-template-columns:1fr} }