/* =========================================================
   Hi-QUBO Doc Skin (override)
   - Keep upstream (minima main.css) as base
   - Override to look distinct: spacing, colors, typography, cards
   ========================================================= */

/* ---- Design tokens ---- */
:root{
  --hiq-bg: #fbfbfd;
  --hiq-surface: #ffffff;
  --hiq-surface-2: #f4f6fb;

  --hiq-text: #121826;
  --hiq-muted: #5b6475;

  --hiq-border: rgba(17,24,39,.12);
  --hiq-shadow: 0 10px 28px rgba(17,24,39,.10);

  --hiq-accent: #6d28d9;      /* purple */
  --hiq-accent-2: #0ea5e9;    /* sky */
  --hiq-link: #1d4ed8;        /* blue */

  --hiq-radius: 5px;
  --hiq-radius-sm: 10px;

  --hiq-max: 1180px;
}

/* ---- Base ---- */
html{ scroll-behavior:smooth; }

body{
  background: radial-gradient(1200px 600px at 20% -10%, rgba(109,40,217,.10), transparent 60%),
              radial-gradient(1200px 600px at 90% 0%, rgba(14,165,233,.10), transparent 55%),
              var(--hiq-bg);
  color: var(--hiq-text);
  margin: 0;
}


/* Make inline layout blocks not look “minima-like” */
p, li{ color: var(--hiq-text); }
small, .post-meta{ color: var(--hiq-muted); }

/* ---- Links ---- */
a{ color: var(--hiq-link); text-decoration: none; }
a:hover{ color: var(--hiq-accent); text-decoration: none; }
a:visited{ color: #1f4aa8; }

/* add external-link subtle marker if target blank is used */
a[target="_blank"]{
  position: relative;
}
a[target="_blank"]::after{
  content: "↗";
  font-size: .85em;
  margin-left: .25em;
  opacity: .6;
}

/* ---- Global wrapper if used ---- */
.wrapper{
  max-width: var(--hiq-max);
}

/* ---- Your injected header ---- */
.hiq-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hiq-border);
}
.hiq-header__inner{
  max-width: var(--hiq-max);
  margin: 0 auto;
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.hiq-header__brand{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--hiq-text);
}
.hiq-header__brand:hover{ color: var(--hiq-accent); }

.hiq-header__nav{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--hiq-border);
  border-radius: 999px;
  background: rgba(244,246,251,.55);
}
.hiq-lang{
  font-weight: 700;
  color: var(--hiq-muted);
  padding: 4px 10px;
  border-radius: 999px;
}
.hiq-lang.is-active{
  color: #fff;
  background: linear-gradient(135deg, var(--hiq-accent), var(--hiq-accent-2));
  box-shadow: 0 6px 16px rgba(109,40,217,.22);
}
.hiq-sep{ color: rgba(91,100,117,.7); }

/* ---- Main layout (your inline flex container) ---- */
/* Your pages use: <div style="display:flex; ...">, so we target it safely:
   - Apply to direct body child div that contains nav + main
*/
body > div[style*="display:flex"]{
  max-width: var(--hiq-max);
  margin: 16px auto 28px auto;
  padding: 10px 14px !important;
  gap: 18px !important;
}

/* ---- Left nav (you currently have inline styles; we override visuals) ---- */
body > div[style*="display:flex"] > nav{
  background: rgba(255,255,255,.90);
  border: 1px solid var(--hiq-border) !important;
  border-right: 1px solid var(--hiq-border) !important;
  border-radius: var(--hiq-radius);
  padding: 16px 14px !important;
  box-shadow: 0 10px 24px rgba(17,24,39,.06);
}

body > div[style*="display:flex"] > nav h2{
  font-weight: 800;
  letter-spacing: .3px;
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 12px 0;
}

.nav-large{
  margin: 0;
  padding: 0;
}
.nav-large li{
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-large a{
  display: block;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--hiq-text);
  border: 1px solid transparent;
}
.nav-large a:hover{
  background: rgba(109,40,217,.08);
  border-color: rgba(109,40,217,.18);
  color: var(--hiq-accent);
}

/* ---- Right main area ---- */
body > div[style*="display:flex"] > main{
  background: rgba(255,255,255,.70);
  border: 1px solid var(--hiq-border);
  border-radius: var(--hiq-radius);
  padding: 18px 18px 26px 18px;
  box-shadow: var(--hiq-shadow);
}

/* ---- Headings: make distinct from Minima ---- */
h1, h2, h3, h4{
  font-weight: 800;
  letter-spacing: -0.01em;
}
h1{
  font-size: 30px;
  margin-top: 4px;
  margin-bottom: 14px;
}
h2{
  font-size: 22px;
  margin-top: 22px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(17,24,39,.10);
}
h3{
  font-size: 18px;
  margin-top: 18px;
  margin-bottom: 8px;
}

/* ---- Lists ---- */
ul, ol{
  margin-left: 22px;
}
li{
  margin: 6px 0;
}
li::marker{
  color: rgba(109,40,217,.55);
}

/* ---- Blockquotes ---- */
blockquote{
  border-left: 0;
  padding: 12px 14px;
  background: rgba(14,165,233,.08);
  border: 1px solid rgba(14,165,233,.18);
  border-radius: var(--hiq-radius-sm);
  color: var(--hiq-text);
  font-style: normal;
  letter-spacing: 0;
}

/* ---- Code blocks ---- */
code, pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
code{
  background: rgba(109,40,217,.07);
  border: 1px solid rgba(109,40,217,.18);
  border-radius: 5px;
  padding: 2px 6px;
}
pre{
  background: #0b1020;
  color: #e8eaf0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--hiq-radius);
  padding: 14px 14px;
  overflow-x: auto;
}
pre code{
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}

/* Rouge highlight wrapper often uses these */
.highlighter-rouge .highlight{

}

/* ---- Tables ---- */
table{
  border: 1px solid var(--hiq-border);
  border-radius: var(--hiq-radius);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: 0 10px 24px rgba(17,24,39,.06);
}
table th{
  background: rgba(109,40,217,.08);
  border-bottom: 1px solid var(--hiq-border);
  color: var(--hiq-text);
  font-weight: 800;
}
table td{
  border-bottom: 1px solid rgba(17,24,39,.08);
}
table tr:nth-child(even){
  background: rgba(244,246,251,.55);
}

/* ---- Horizontal rule ---- */
hr{
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(17,24,39,.18), transparent);
  margin: 22px 0;
}


/* ---- Optional: reduce inline-styled sticky top in nav on mobile ---- */
@media (max-width: 980px){
  body > div[style*="display:flex"] > nav{
    top: auto !important;
  }
}

/* =========================================================
   Rouge syntax highlighting (token colors)
   - Works with <span class="k">...</span> etc.
   - Put this at the END of doc.css so it wins.
   ========================================================= */

/* コードブロック全体のベース */
pre.highlight, .highlight pre, pre code, pre{
  color: #e8eaf0;
}

/* Rouge token colors (Minima系の定番配色を暗背景向けに調整) */
.highlight .c     { color: #9aa4b2; font-style: italic; } /* Comment */
.highlight .cm    { color: #9aa4b2; font-style: italic; }
.highlight .c1    { color: #9aa4b2; font-style: italic; }
.highlight .cs    { color: #9aa4b2; font-weight: 700; font-style: italic; }
.highlight .cp    { color: #a1a1aa; font-weight: 700; }

.highlight .err   { color: #fecaca; background-color: rgba(239,68,68,.18); border-radius: 6px; padding: 0 4px; }
.highlight .k     { color: #c4b5fd; font-weight: 700; } /* Keyword */
.highlight .kc    { color: #c4b5fd; font-weight: 700; }
.highlight .kd    { color: #c4b5fd; font-weight: 700; }
.highlight .kp    { color: #c4b5fd; font-weight: 700; }
.highlight .kr    { color: #c4b5fd; font-weight: 700; }
.highlight .kt    { color: #93c5fd; font-weight: 700; } /* Keyword.Type */

.highlight .o     { color: #e5e7eb; font-weight: 700; } /* Operator */
.highlight .ow    { color: #e5e7eb; font-weight: 700; }

.highlight .m     { color: #67e8f9; } /* Number */
.highlight .mf    { color: #67e8f9; }
.highlight .mh    { color: #67e8f9; }
.highlight .mi    { color: #67e8f9; }
.highlight .mo    { color: #67e8f9; }
.highlight .il    { color: #67e8f9; }

.highlight .s     { color: #fda4af; } /* String */
.highlight .s1    { color: #fda4af; }
.highlight .s2    { color: #fda4af; }
.highlight .sb    { color: #fda4af; }
.highlight .sc    { color: #fda4af; }
.highlight .sd    { color: #fda4af; }
.highlight .se    { color: #fda4af; }
.highlight .sh    { color: #fda4af; }
.highlight .si    { color: #fda4af; }
.highlight .sx    { color: #fda4af; }
.highlight .sr    { color: #86efac; } /* Regex */
.highlight .ss    { color: #f9a8d4; } /* Symbol */

.highlight .na    { color: #5eead4; } /* Name.Attribute */
.highlight .nb    { color: #93c5fd; } /* Builtin */
.highlight .bp    { color: #93c5fd; }
.highlight .nc    { color: #fbbf24; font-weight: 800; } /* Class */
.highlight .no    { color: #5eead4; } /* Constant */
.highlight .ni    { color: #d8b4fe; } /* Entity */
.highlight .ne    { color: #fca5a5; font-weight: 800; } /* Exception */
.highlight .nf    { color: #fbbf24; font-weight: 800; } /* Function */
.highlight .nn    { color: #cbd5e1; } /* Namespace */
.highlight .nt    { color: #93c5fd; } /* Tag */
.highlight .nv    { color: #5eead4; } /* Variable */
.highlight .vc    { color: #5eead4; }
.highlight .vg    { color: #5eead4; }
.highlight .vi    { color: #5eead4; }

.highlight .w     { color: rgba(226,232,240,.35); } /* Whitespace */

/* diff/patch系 */
.highlight .gd    { color: #fecaca; background-color: rgba(239,68,68,.18); }
.highlight .gi    { color: #bbf7d0; background-color: rgba(34,197,94,.14); }
.highlight .gd .x { color: #fecaca; background-color: rgba(239,68,68,.26); }
.highlight .gi .x { color: #bbf7d0; background-color: rgba(34,197,94,.22); }

.highlight .ge    { font-style: italic; }
.highlight .gs    { font-weight: 800; }
.highlight .gp    { color: rgba(148,163,184,.9); }
.highlight .go    { color: rgba(148,163,184,.75); }
.highlight .gh    { color: rgba(148,163,184,.85); font-weight: 800; }
.highlight .gu    { color: rgba(148,163,184,.85); }
.highlight .gt    { color: #fca5a5; }
.highlight .gr    { color: #fca5a5; }



/* =========================================================
   Mobile Drawer Nav (Hi-QUBO)
   ========================================================= */

/* 右下のハンバーガーボタン（スマホだけ表示） */
.hiq-fab{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 2000;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(17,24,39,.18);
  display: none; /* PCでは隠す */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hiq-fab:active{
  transform: translateY(1px);
}

.hiq-fab__bars{
  width: 22px;
  height: 14px;
  position: relative;
}

.hiq-fab__bars span{
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: rgba(17,24,39,.85);
}

.hiq-fab__bars span:nth-child(1){ top: 0; }
.hiq-fab__bars span:nth-child(2){ top: 6px; }
.hiq-fab__bars span:nth-child(3){ top: 12px; }

/* 背景の暗幕 */
.hiq-overlay{
  position: fixed;
  inset: 0;
  z-index: 1900;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

/* ===== ドロワー化：スマホだけ ===== */
@media (max-width: 980px){

  /* スマホは右下ボタンを表示 */
  .hiq-fab{ display: flex; }

  /* スマホ時：サイドバー nav を画面外へ（右から出す） */
  body > div[style*="display:flex"] > nav{
    position: fixed !important;
    top: 64px;               /* ヘッダー高さの分だけ下げる（必要なら調整） */
    right: 0;
    width: min(86vw, 340px);
    height: calc(100dvh - 64px);
    overflow: auto;
    z-index: 1950;

    transform: translateX(105%);
    transition: transform .2s ease;
    box-shadow: 0 16px 40px rgba(17,24,39,.20);
  }

  /* 既存の「縦積み」で上に出てくるのを防ぐため、レイアウト上は nav を無視して main を先に見せたい
     → すでにあなたのCSSで flex-direction:column になってるので、
       nav がfixedになれば自然に本文が上に来見えるようになります。
  */
}

/* 開いた状態（htmlにクラス付け） */
html.hiq-nav-open .hiq-overlay{
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 980px){
  html.hiq-nav-open body > div[style*="display:flex"] > nav{
    transform: translateX(0);
  }
}

/* === mobile overflow fix === */
*, *::before, *::after { box-sizing: border-box; }

/* sticky を壊しやすいので html/body では overflow を触らない */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: visible;
}

/* 横はみ出し対策は「本文ラッパー」に寄せる */
body > div[style*="display:flex"]{
  overflow-x: clip;     /* hidden より安全（対応ブラウザはだいたいOK） */
}


/* 例の flex コンテナ自体を100%に固定 */
body > div[style*="display:flex"]{
  width: 100%;
}

/* main が確実に縮むように（flex/min-width対策） */
body > div[style*="display:flex"] > main{
  min-width: 0 !important;
  width: 100%;
  max-width: 100%;
}

/* 長い文字列（URLなど）で横に伸びないように */
body > div[style*="display:flex"] > main,
body > div[style*="display:flex"] > nav{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* コード・テーブルは横スクロールで逃がす */
pre, code, table { max-width: 100%; }
pre { overflow-x: auto; }
table { display: block; overflow-x: auto; }

/* MathJax が横に押し広げるのを防ぐ */
mjx-container { max-width: 100%; overflow-x: auto; overflow-y: hidden; }

html, body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Yu Gothic",
    Meiryo,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

/* code block: horizontal scroll on mobile + hint */
pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
  position: relative;
}

/* 右端のフェード（「右に続きがある」サイン） */
@media (max-width: 980px) {
  pre::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, rgba(11,16,32,1), rgba(11,16,32,0));
  }
}

/* 横スクロールバーが出ても見やすく */
pre code {
  white-space: pre; /* 折り返さない */
}

/* PC: sidebar follows scroll */
@media (min-width: 981px){
  body > div[style*="display:flex"] > nav{
    position: sticky !important;
    top: 1rem !important;
    align-self: flex-start; /* これがないと効かないケースがある */
  }
}

:root { --hiq-header-h: 56px; }  /* ここを実測値に合わせる（例 56〜72） */

.hiq-header{
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* PC: nav sticky */
@media (min-width: 981px){
  body > div[style*="display:flex"] > nav{
    position: sticky !important;
    top: calc(var(--hiq-header-h) + 12px) !important; /* 12pxは余白 */
    align-self: flex-start;
  }
}