/* Mitevo site — Daylight. Tokens mirror .ui-craft/tokens.md. Signature: the split-flap board. */
:root{
  --cobalt:#2440ff; --cobalt-400:#5268ff; --cobalt-300:#93a3ff; --cobalt-200:#cdd5ff; --cobalt-on-dark:#8fa0ff; --cobalt-tint:#eef0ff;
  --ink:#141414; --tile:#1e1e1e; --tile-ink:#f4f2ec; --tile-dim:#77746c;
  --canvas:#e9e7e1; --paper:#fbfaf7; --white:#fff;
  --ink-2:#4a4842; --ink-3:#6d6a62; --rule:#d3d0c7; --land:#e2dfd6;
  --pays:#0b8a55; --pays-on-dark:#4fe39e; --lost:#e2603a;
  --sans:"Inter Tight","Noto Sans JP",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --raise:0 1px 0 rgba(0,0,0,.05),0 18px 40px -24px rgba(0,0,0,.3);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{background:var(--canvas);color:var(--ink);font:400 16px/1.5 var(--sans);min-height:100dvh}
a{color:inherit}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1360px;margin:0 auto;padding:0 32px}
.eyebrow{font:600 11px var(--mono);letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in oklab,var(--canvas) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.nav .logo img{height:26px;display:block}
.nav .links{display:flex;gap:22px;font:500 14px var(--sans);color:var(--ink-2)}
.nav .links a{text-decoration:none}
.nav .links a:hover,.nav .links a[aria-current]{color:var(--ink)}
.nav .links a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;text-decoration-color:var(--cobalt)}
.nav .end{margin-left:auto;display:flex;align-items:center;gap:12px}
.devnet{font:500 11px var(--mono);letter-spacing:.08em;color:var(--ink-3);border:1px solid var(--rule);padding:4px 8px;border-radius:4px}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--sans);padding:10px 16px;border-radius:var(--r-sm);border:1.5px solid var(--ink);background:var(--ink);color:var(--white);text-decoration:none;cursor:pointer;transition:transform .08s,background-color .15s}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--cobalt);border-color:var(--cobalt)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.lg{padding:14px 20px;font-size:15px}

/* split-flap */
.flaps{display:inline-flex;gap:2px}
.flap{position:relative;display:inline-grid;place-items:center;width:20px;height:31px;background:var(--tile);border-radius:3px;font:700 17px var(--mono);color:var(--tile-ink);box-shadow:inset 0 -1px 0 rgba(0,0,0,.6)}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#060606}
.flap.sp{background:transparent;box-shadow:none;width:7px}.flap.sp::after{display:none}
.flap.ok{color:var(--pays-on-dark)}.flap.acc{color:var(--cobalt-on-dark)}.flap.dim{color:var(--tile-dim)}.flap.hm{color:#fff}
.flap.sm{width:16px;height:26px;font-size:14px}

/* board panel */
.board{background:var(--ink);color:var(--tile-ink);border-radius:var(--r-lg);padding:22px 24px 16px}
.board .bh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.board .bh b{font:700 26px var(--mono);letter-spacing:.14em}
.board .bh span{font:600 11px var(--mono);letter-spacing:.2em;color:#8a877f}
.board table{width:100%;border-collapse:separate;border-spacing:0 5px}
.board th{font:600 10px var(--mono);letter-spacing:.2em;color:#8a877f;text-align:left;padding:0 8px 2px}
.board td{padding:0 8px;vertical-align:middle}
.board tbody tr{cursor:pointer;transition:opacity .2s}
.board tbody:hover tr:not(:hover){opacity:.4}
.board td.app{font:600 14px var(--sans);color:#f4f2ec;white-space:nowrap}
.board td.app small{display:block;font:400 12px var(--sans);color:#8a877f}

/* app icon: a PNG from icons/, or a coloured letter tile until it exists */
.ai{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .24);background:var(--c);vertical-align:middle;margin-right:.4em;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.ai .ai-l{font:800 calc(var(--s) * .5)/1 var(--sans);letter-spacing:-.02em;color:#fff}
.ai img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* faint light rim so dark tiles (e.g. Cheerline) keep their edge on the ink board and cards */
.ai::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none}

/* footer */
.foot{border-top:1px solid var(--rule);margin-top:64px}
.foot .wrap{display:flex;justify-content:space-between;gap:24px;padding-top:24px;padding-bottom:40px;font:500 13px var(--sans);color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:900px){.wrap{padding:0 16px}.nav .links{display:none}}