/* どのページにもある右上の道具と設定の欄（記事のページ・一覧のページで共有）。
   色は各ページの値（--ink・--faint・--card-bg・--card-fg・--card-line、記事では読む光の --fx）を使う */

#tools {
    position: fixed;
    z-index: 8;
    inset-block-start: max(10px, env(safe-area-inset-top));
    inset-inline-end: max(32px, env(safe-area-inset-right) + 24px);
    display: flex;
    gap: 2px;
    opacity: calc(1 - var(--fx, 0) * .6);
    transition: opacity .2s;
}
#tools:is(:hover, :focus-within), #tools:has([aria-expanded="true"]) { opacity: 1; }
#tools > :is(a, button) {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--faint);
    cursor: pointer;
    font: 20px/1 "Material Symbols Sharp";
    font-feature-settings: "liga";
}
#tools > :is(a, button):hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
#tools > :is(a, button):focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* 左上：サイトの名前（トップへ）。右上の道具と対になる位置で、どのページでも同じ場所に（一覧のページは見出しの行にある） */
#home {
    position: fixed;
    z-index: 8;
    inset-block-start: max(10px, env(safe-area-inset-top));
    inset-inline-start: max(16px, env(safe-area-inset-left) + 12px);
    display: flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: 10px;
    border-radius: 8px;
    color: var(--faint);
    font: 600 14px/1 system-ui, sans-serif;
    letter-spacing: .06em;
    text-decoration: none;
    opacity: calc(1 - var(--fx, 0) * .6);
    transition: opacity .2s;
}
#home:is(:hover, :focus-visible) { opacity: 1; color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
#home:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media print { #home { display: none; } }

/* 設定：区分ごとに小さな見出し、中身は 1em 下げる */
#settings {
    position: fixed;
    inset-block: 62px auto; inset-inline: auto max(32px, env(safe-area-inset-right) + 24px);
    margin: 0;
    inline-size: 300px;
    max-block-size: calc(100svh - 80px);
    overflow: auto;
    padding-block: 14px 6px; padding-inline: 14px;
    border: 1px solid var(--card-line);
    border-start-start-radius: 12px; border-start-end-radius: 2px; border-end-end-radius: 12px; border-end-start-radius: 12px;
    background: var(--card-bg);
    color: var(--card-fg);
    font: 13px/20px system-ui, sans-serif;
}
/* 記事のページの見出し・節の飾り（右の棒・帯の外でぼかす動き・余白）を受けないよう、いったん全部外す */
#settings :is(h2, h3, section, p, hr) { all: unset; display: block; }
#settings :is(h2, h3)::before, #settings :is(h2, h3)::after { content: none; display: none; }
#settings h2 { margin-block-end: 12px; font-size: 14px; font-weight: 700; }
#settings section { margin-block-end: 12px; }
#settings h3 { margin-block-end: 6px; font-size: 12px; font-weight: 600; opacity: .8; }
#settings section > .seg { margin-inline-start: 1em; }
/* 「ドキュメントページの設定」：区分の線のあと、少し右に寄せた小さな行（大きな見出しにはしない） */
#settings hr { block-size: 1px; margin-block: 16px 10px; background: var(--card-line); }
#settings p.group { margin-block-end: 12px; margin-inline-start: 2em; font-size: 11px; opacity: .7; }
#settings .seg { display: flex; gap: 2px; }
#settings .seg label {
    position: relative;
    flex: 1;
    display: grid;
    place-items: center;
    min-block-size: 40px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--card-fg) 8%, transparent);
    cursor: pointer;
}
#settings .seg label:hover { background: color-mix(in srgb, var(--card-fg) 14%, transparent); }
/* 選んでいるもの：面の色と、文字の下線（色だけに頼らない） */
#settings .seg label:has(:checked) { background: var(--card-fg); color: var(--card-bg); }
#settings .seg label:has(:checked) span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
#settings .seg label:has(:focus-visible) { outline: 3px solid var(--card-fg); outline-offset: 2px; }
#settings .seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
/* 3 つのうち「自動」は少し離す：間の隙間と角を、ほかの 2 つの間より大きく */
#settings .seg:has(> :nth-child(3)) label:nth-child(1) { border-start-start-radius: 8px; border-start-end-radius: 5px; border-end-end-radius: 5px; border-end-start-radius: 8px; margin-inline-end: 4px; }
#settings .seg:has(> :nth-child(3)) label:nth-child(2) { border-start-start-radius: 5px; border-start-end-radius: 2px; border-end-end-radius: 2px; border-end-start-radius: 5px; }
#settings .seg:has(> :nth-child(3)) label:nth-child(3) { border-start-start-radius: 2px; border-start-end-radius: 8px; border-end-end-radius: 8px; border-end-start-radius: 2px; }
/* する／しない：外側の角を丸める */
#settings .seg:not(:has(> :nth-child(3))) label:first-child { border-start-start-radius: 8px; border-end-start-radius: 8px; }
#settings .seg:not(:has(> :nth-child(3))) label:last-child { border-start-end-radius: 8px; border-end-end-radius: 8px; }
#settings :focus-visible { outline-color: var(--card-fg); }

/* 読む順（検索の「この順で読む」）：左下に小さく。今の位置・前・次の記事・終える */
#queue {
    position: fixed;
    z-index: 8;
    inset-block-end: max(16px, env(safe-area-inset-bottom));
    inset-inline-start: max(16px, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    gap: 2px;
    max-inline-size: min(560px, calc(100vw - 32px));
    padding: 4px;
    border: 1px solid var(--card-line);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--card-fg);
    font: 13px/18px system-ui, sans-serif;
    opacity: calc(1 - var(--fx, 0) * .35);
    transition: opacity .2s;
}
#queue:is(:hover, :focus-within) { opacity: 1; }
#queue :is(a, button) { display: flex; align-items: center; min-block-size: 44px; padding-inline: 10px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: none; }
#queue :is(a, button):hover { background: color-mix(in srgb, var(--card-fg) 8%, transparent); }
#queue :is(a, button):focus-visible { outline: 3px solid var(--card-fg); outline-offset: 1px; }
#queue .q-count { font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .8; }
#queue .q-next { display: grid; min-inline-size: 0; flex: 1; padding-block: 4px; }
#queue .q-next small { font-size: 11px; opacity: .7; }
#queue .q-next span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#queue button { inline-size: 44px; justify-content: center; font-size: 18px; }
@media print { #queue { display: none; } }