/* Loaded AFTER the kit's /brand-ui/brand.css (colours + font come from the kit). Site-owned extras only; kit files untouched.
   Goal (Rajan 2026-10-21): tools look/behave like www.moklav.co.jp + panel (panel ui.py tokens: .btn cyan/navy, .card/.ovc cyan top border). */
html{background:var(--mk-bg)}
body{font-family:var(--mk-font);background:var(--mk-bg);color:var(--mk-ink)}
:focus-visible{outline:3px solid var(--mk-brand);outline-offset:2px;border-radius:4px}
a:hover{text-decoration:underline}
/* header row: nav sits next to the logo like the site header; our controls on the right */
.mk-header .mk-nav{margin-left:8px}.mk-header .mk-nav a{font-weight:600}.mk-header .mk-nav a:hover{text-decoration:none}
[data-section=tools] .mk-header .mk-nav a[href$="/tools/"]{background:var(--mk-brand-soft);color:var(--mk-brand)} /* same as kit aria-current */
.mk-header .mk-actions{margin-right:88px} /* room for our .mk-hdr-x (EN/日本語) so it never covers the kit's ◑ / サインイン / はじめる */
.mk-hdr-x{position:fixed;top:0;height:64px;right:max(20px,calc((100vw - 1120px) / 2 + 20px));display:flex;align-items:center;gap:10px;z-index:51}
.mk-lang{font:600 14px var(--mk-font);color:var(--mk-ink);text-decoration:none;background:var(--mk-card);border:1px solid var(--mk-line);border-radius:8px;padding:5px 12px}
.mk-lang:hover{background:var(--mk-brand-soft);text-decoration:none}
.mk-menu-btn{display:none;align-items:center;justify-content:center;width:40px;height:36px;border:1px solid var(--mk-line);border-radius:8px;background:var(--mk-card);color:var(--mk-ink);font-size:18px;cursor:pointer}
@media(max-width:820px){
 .mk-header .mk-wrap{flex-wrap:wrap;min-height:64px}
 .mk-header .mk-nav{display:none;margin-left:0;width:100%;flex-direction:column;gap:0;padding:4px 0 12px}
 .mk-header.mk-open .mk-nav{display:flex}
 .mk-header .mk-nav a{padding:12px 4px;border-bottom:1px solid var(--mk-line);border-radius:0}
 .mk-menu-btn{display:inline-flex}
 .mk-header .mk-actions{display:none;margin-right:0;width:100%;padding:0 0 12px}
 .mk-header.mk-open .mk-actions{display:flex}.mk-header.mk-open .mk-signin{display:inline}}
.mk-ids-en{margin-top:-6px}
/* calm page-to-page navigation (same-origin, Chrome/Edge/Safari 18+; others: normal load). No motion if reduced. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
.mk-langbar{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:60;background:#181F32;color:#fff;border:1px solid #50BDEB;border-radius:10px;padding:8px 12px;display:flex;gap:10px;align-items:center;box-shadow:0 4px 16px #0004}.mk-langbar a{color:#50BDEB;font-weight:700}.mk-langbar button{background:none;border:0;color:#fff;font-size:1.1rem;cursor:pointer}
/* Dark theme: kit logo.svg has navy/black text; swap to the official dark logo (kit img/moklav-logo-dark-web.png). CSS only, CSP-safe. Footer keeps its white chip. */
:root[data-theme=dark] .mk-header .mk-logo img{content:url(/brand-ui/logo-dark.png)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .mk-header .mk-logo img{content:url(/brand-ui/logo-dark.png)}}