@import url("./design-tokens.css");

:root{
  --panel-2:#f1ece3;--line-soft:#ece6da;--muted:#6f6b63;
  --shadow:none;
  --face-U:#f7d117;--face-R:#e07b26;--face-F:#2e8b3d;
  --face-D:#f2f2f2;--face-L:#d0342c;--face-B:#2f5fd0;
  --face-oriented:#f7d117;--face-dim:#9a9a9a;--face-ignored:#9ca3af;
  /* 図の背景は敷かず、輪郭だけで facelet を区切る（2D 図と同じ見え方にする）。
     アプリ側の #fff だと白ステッカー(--face-D #f2f2f2)が輪郭ごと下地に溶けるため
     --muted を使う。ダークでは --muted 側が明るく反転する */
  --diagram-iso-stroke:var(--muted);
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --panel-2:#302c25;--line-soft:#332e26;--muted:#8f8b84;
  --face-dim:#6b6b6b;--face-ignored:#4b5563;
}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.8}
.wrap{max-width:920px;margin:0 auto;padding:0 28px 104px}
header{position:relative;margin:0;padding:64px 0 34px;border-bottom:1px solid var(--line)}
/* docs-index と licenses は header を持たず .wrap 直下が h1 のため、header と同じ上余白を h1 側で持つ */
.wrap>h1:first-child{margin-top:64px}
header::before{content:"";display:block;width:48px;height:5px;margin-bottom:24px;border-radius:99px;background:var(--accent)}
.eyebrow{margin:0 0 10px;color:var(--accent-text);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:none}
h1{margin:0 0 18px;font-family:var(--display);font-size:clamp(32px,6vw,52px);font-weight:800;line-height:1.15;letter-spacing:-.035em}
.lede,.sub{max-width:760px;color:var(--ink-soft);font-size:17px;line-height:1.85}
.sub-note{
  margin:0 0 24px;
  padding:12px 16px;
  border-left:3px solid var(--accent);
  background:var(--accent-soft);
  color:var(--ink-soft);
  font-size:14.5px;
  line-height:1.7;
}
.panel,.card,.def,.aside,.figure-card,.combo{background:var(--panel);border:1px solid var(--line);border-radius:14px}
nav.toc{padding:20px 0 0;margin-top:30px;border-top:1px solid var(--line)}
nav.toc>p{margin:0 0 12px;color:var(--muted);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em}
nav.toc ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 20px;margin:0;padding:0;list-style:none}
nav.toc li{display:flex;gap:10px;margin:0;font-size:14px}
nav.toc .n{color:var(--muted);font-family:var(--mono)}
nav.toc a{color:var(--ink-soft);text-decoration:none}
nav.toc a:hover{color:var(--accent-text)}
section{padding-top:60px;scroll-margin-top:20px}
.sechead{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.sechead .n,h2 .num{color:var(--accent-text);font-family:var(--mono);font-size:13px;font-weight:700}
h2{margin:0;scroll-margin-top:20px;font-family:var(--display);font-size:27px;line-height:1.35;letter-spacing:-.02em}
h3{font-family:var(--display);font-size:19px}
.lead{color:var(--ink-soft);font-size:15px;line-height:1.8}
.summary{border-left:3px solid var(--accent);color:var(--ink-soft)}
.card,.def,.aside,.panel{border-radius:14px}
.tablewrap{border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.scroll{border-radius:14px}
table{border:0;background:transparent}
thead th{background:var(--panel-2)}
.idx .it,.allcases .box,.figrow{border-radius:12px}
.sticker{stroke:#202923;stroke-width:1.5}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:600px){.wrap{padding:0 18px 72px}header{padding-top:38px}.wrap>h1:first-child{margin-top:38px}section{padding-top:46px}h2{font-size:23px}.grid{grid-template-columns:1fr}}
/* 印刷は design-tokens.css 側で共通トークンを !important 上書きするため、
   ここでは docs.css 固有の3トークンだけを上書きする。:root（詳細度0,1,0）は
   :root[data-theme="dark"]（0,2,0）に負けるため !important を付ける */
@media print{:root{--panel-2:#f4f4f4!important;--line-soft:#ddd!important;--muted:#555!important}body{font-size:11pt}.wrap{max-width:none;padding:0}header{padding-top:0}.wrap>h1:first-child{margin-top:0}section{break-inside:avoid}a{color:inherit;text-decoration:none}}

/* アプリ側から data-theme を転写されたときに効かせる。
   値は上の prefers-color-scheme ブロックと同じものを使う */
:root[data-theme="dark"]{
  --panel-2:#302c25;--line-soft:#332e26;--muted:#8f8b84;
  --face-dim:#6b6b6b;--face-ignored:#4b5563;
}

/* 認識解説の図。src/features/algs/algs.css と同じ data-color の塗り分けを使う */
.cube-face rect[data-color="U"]{fill:var(--face-U)}
.cube-face rect[data-color="R"]{fill:var(--face-R)}
.cube-face rect[data-color="F"]{fill:var(--face-F)}
.cube-face rect[data-color="D"]{fill:var(--face-D)}
.cube-face rect[data-color="L"]{fill:var(--face-L)}
.cube-face rect[data-color="B"]{fill:var(--face-B)}
.cube-face rect[data-color="oriented"]{fill:var(--face-oriented)}
.cube-face rect[data-color="dim"]{fill:var(--face-dim)}
.cube-face rect[data-color="ignored"]{fill:var(--face-ignored)}
.cube-iso polygon{stroke:var(--diagram-iso-stroke);stroke-width:1}
.cube-iso polygon[data-color="U"]{fill:var(--face-U)}
.cube-iso polygon[data-color="R"]{fill:var(--face-R)}
.cube-iso polygon[data-color="F"]{fill:var(--face-F)}
.cube-iso polygon[data-color="D"]{fill:var(--face-D)}
.cube-iso polygon[data-color="L"]{fill:var(--face-L)}
.cube-iso polygon[data-color="B"]{fill:var(--face-B)}
.cube-iso polygon[data-color="oriented"]{fill:var(--face-oriented)}
.cube-iso polygon[data-color="dim"]{fill:var(--face-dim)}
.cube-iso polygon[data-color="ignored"]{fill:var(--face-ignored)}

.figures{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin:20px 0;padding:0;list-style:none}
.figures figure{margin:0}
.figures figcaption{margin-top:6px;color:var(--ink-soft);font-size:13px;line-height:1.5}
.figures figcaption b{display:block;color:var(--ink);font-weight:700}

/* iOS 15.0〜15.3 の WebKit は三角を ::-webkit-details-marker で描くため、
   ::marker / list-style だけでは消えず既定の三角と二重に出る */
details{margin:20px 0;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
details>summary{display:list-item;list-style:none;padding:12px 16px;color:var(--ink);font-weight:700;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"\25B8";margin-right:8px;color:var(--accent-text)}
details[open]>summary::before{content:"\25BE"}
details>.figures{padding:0 16px 16px}

.copyright{max-width:920px;margin:0 auto 40px;padding:18px 28px 0;border-top:1px solid var(--line);color:var(--ink-soft);font-size:13px;text-align:center}

/* --sans の iOS 豆腐対策と等幅要素を保ち、本文・見出し・コントロールだけ上書きする */
:is(body,h1,h2,h3,h4,h5,h6,button,input,select,textarea):lang(zh-Hans),input:lang(zh-Hans)::file-selector-button{font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif}
:is(body,h1,h2,h3,h4,h5,h6,button,input,select,textarea):lang(zh-Hant),input:lang(zh-Hant)::file-selector-button{font-family:"PingFang TC","Noto Sans TC","Noto Sans CJK TC","Microsoft JhengHei",sans-serif}

/* 言語の選択肢の名前。iOS はグリフが無いとき次の候補へ落ちないため、名前の言語のフォントで描く。
   :lang() は継承した言語にも当たるので、lang を書いた span だけに当てる */
span[lang="zh-Hans"]{font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif}
span[lang="zh-Hant"]{font-family:"PingFang TC","Noto Sans TC","Noto Sans CJK TC","Microsoft JhengHei",sans-serif}

.docs-list{list-style:none;margin:0;padding:0}
.docs-list li{margin:0 0 8px}
.docs-list a{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:inherit;text-align:left;text-decoration:none}
.docs-list-title{display:block;font-weight:600}
.docs-list-desc{display:block;margin-top:4px;font-size:0.85em;opacity:0.75}

.license-list{list-style:none;padding:0}
.license-list li{padding:0.75rem 0;border-bottom:1px solid var(--line)}
.license-list p{margin:0.15rem 0}
.license-name{font-weight:bold}
.license-id,.license-copyright,.license-source{font-size:0.85rem;color:var(--ink-soft)}
.license-notice,.license-text{white-space:pre-wrap;word-break:break-word;font-size:0.75rem;line-height:1.5;max-height:20rem;overflow-y:auto;background:var(--panel);padding:0.5rem}

/* アプリ版では Web 版にしか関係しない段落を隠す。各ページの <style> が display を足しても負けないよう !important を付ける */
:root[data-native] .web-only { display: none !important; }