/* ============================================================
   lqdm.css — liquidium brand layer v1.1 (DAY)
   Single source of truth: fonts · tokens · base · components
   ============================================================ */

/* --- fonts (all self-hosted) --- */
@font-face{font-family:'Almoni';src:url('fonts/almoni-thin-aaa.otf') format('opentype');font-weight:200;font-display:swap}
@font-face{font-family:'Almoni';src:url('fonts/almoni-regular-aaa.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Almoni';src:url('fonts/almoni-ultrabold-aaa.otf') format('opentype');font-weight:800;font-display:swap}
@font-face{font-family:'Coolvetica';src:url('fonts/coolvetica_rg.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Biko';src:url('assets/fonts/Biko-Light.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:'Biko';src:url('assets/fonts/Biko-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Biko';src:url('assets/fonts/Biko-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'Biko';src:url('assets/fonts/Biko-Black.otf') format('opentype');font-weight:900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/jetbrains-mono-500.woff2') format('woff2');font-weight:500;font-display:swap}

/* --- tokens (v1.1 · DAY) --- */
:root{
  --lab-white:#F1F2F3; --ink:#0E0F11; --graphite:#2B2D30;
  --steel:#8B8E92; --aluminum:#C9CCCF;
  --raised:linear-gradient(180deg,#F7F8F9,#EFF0F1);
  --ok:#6E8B5A; --err:#9B3D3D;
  --radius:0; --hairline:1px;
  --he:'Almoni',system-ui,sans-serif;
  --latin:'Biko','Almoni',system-ui,sans-serif;
  --disp:'Coolvetica','Biko','Almoni',sans-serif;
  --mono:'JetBrains Mono','Almoni',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* --- base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{visibility:visible}
body{background:var(--lab-white);color:var(--ink);font-family:var(--he);direction:rtl;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/* 4% film grain on the whole surface */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* --- layout --- */
.wrap{max-width:1100px;margin:0 auto;padding:36px 32px 60px}

/* --- header --- */
.hdr{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--ink);padding-bottom:20px}
.hdr .brand{display:flex;align-items:center;gap:13px}
.hdr .brand img{height:46px;width:auto;display:block}
.hdr .wm{font-family:var(--latin);font-weight:700;font-size:24px;letter-spacing:.004em;line-height:1}
.hdr .ctrl{font-family:var(--latin);font-weight:300;font-size:11px;line-height:1.8;color:var(--steel);text-align:left;letter-spacing:.01em}
.hdr .ctrl b{color:var(--ink);font-weight:700}

/* --- section header (no ordinals) --- */
.sec{margin-top:38px}
.sec-h{display:flex;align-items:baseline;gap:14px;margin-bottom:15px}
.sec-h h2{font-family:var(--he);font-size:13px;font-weight:800;letter-spacing:.16em;color:var(--ink);white-space:nowrap}
.sec-h .rule{flex:1;height:1px;background:var(--aluminum);transform:translateY(-3px)}
.sec-h .tag{font-family:var(--mono);font-size:9.5px;color:var(--steel);letter-spacing:.12em;white-space:nowrap;text-transform:lowercase}

/* --- card grid + card (one system) --- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;display:flex;flex-direction:column;background:var(--raised);
  border:1px solid var(--aluminum);padding:15px 15px 0;min-height:120px;overflow:hidden;
  transition:border-color .2s var(--ease)}
.card:hover{border-color:var(--ink)}
.card::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  transform:translateX(120%);transition:transform .6s var(--ease)}
.card:hover::after{transform:translateX(-120%)}
.card .ico{position:absolute;top:13px;left:13px;width:22px;height:22px;color:var(--graphite)}
.card .nm{font-family:var(--he);font-weight:800;font-size:16px;letter-spacing:.01em;margin-bottom:3px;padding-left:30px}
.card .nm.en{font-family:var(--disp);text-transform:uppercase;letter-spacing:.05em;font-weight:400;font-size:20px;line-height:1.05}
.card .ds{font-size:12.5px;color:var(--steel);line-height:1.4}
.card .stat{margin-top:auto;display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--aluminum);padding:9px 0;font-family:var(--mono);font-size:10.5px;color:var(--steel);letter-spacing:.02em}
.card .stat .s{display:flex;align-items:center;gap:7px}
.card .val{color:var(--ink);font-weight:500}

/* --- status dot --- */
.dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--aluminum);box-shadow:0 0 0 3px rgba(139,142,146,.10)}
.dot.live{background:var(--ok);box-shadow:0 0 0 3px rgba(110,139,90,.16)}
.dot.idle{background:var(--steel)}
.dot.err{background:var(--err)}

/* --- ledger (quiet archive) --- */
.ledger{border-top:1px solid var(--aluminum)}
.lrow{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--aluminum)}
.lrow .li{width:17px;height:17px;color:var(--steel);flex:none}
.lrow .ln{font-size:14px;white-space:nowrap}
.lrow .lead{flex:1;border-bottom:1px dotted var(--aluminum);transform:translateY(-3px);margin:0 2px}
.lrow .lst{font-family:var(--mono);font-size:9.5px;color:var(--steel);letter-spacing:.08em;text-transform:lowercase;white-space:nowrap}
.lrow:hover .ln{color:var(--ink)}

/* --- footer --- */
.foot{margin-top:52px;border-top:1px solid var(--ink);padding-top:14px;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10px;color:var(--steel);letter-spacing:.12em;text-transform:lowercase}

/* --- buttons / inputs --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;border:0;border-radius:0;
  background:var(--ink);color:var(--lab-white);font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;font-size:14px;padding:13px 18px}
.btn:disabled{opacity:.5;cursor:wait}
input,select,textarea{font-family:var(--he);font-size:15px;color:var(--ink);background:#F7F8F9;border:1px solid var(--aluminum);border-radius:0;padding:11px 12px;outline:none;transition:border-color .15s var(--ease)}
input:focus,select:focus,textarea:focus{border-color:var(--ink)}