/* book.css - the web edition of the rubrapack manual. The design is the Proven C Book's web edition
 * (same author), so the two books read alike: a sticky bar with a menu panel, reading settings,
 * contents by part, tables with a strong outer line and a shaded header.
 *
 * Rules of the design: regions are marked by a left rail, headings by a rule underneath; only code
 * gets a box. Colours are tokens, written for three states (default light; the system dark unless
 * the reader chose light; the reader's dark).
 */

/* Fonts: subsets of Noto Serif/Sans (+ CJK KR), D2Coding and Noto Sans Mono holding only the
   characters the book uses (build.py makes them; licences in fonts/README.md). */
@font-face { font-family:"RP Serif"; src:url("fonts/serif.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-024F,U+2000-206F,U+20A0-20BF,U+2100-21FF,U+2190-2BFF; }
@font-face { font-family:"RP Serif"; src:url("fonts/serif-bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-024F,U+2000-206F,U+20A0-20BF,U+2100-21FF,U+2190-2BFF; }
@font-face { font-family:"RP Serif"; src:url("fonts/serif-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
  unicode-range:U+0000-024F,U+2000-206F,U+20A0-20BF,U+2100-21FF,U+2190-2BFF; }
@font-face { font-family:"RP Serif"; src:url("fonts/serif-kr.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"RP Serif"; src:url("fonts/serif-kr-bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"RP Sans"; src:url("fonts/sans.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-024F,U+2000-206F,U+20A0-20BF,U+2100-21FF,U+2190-2BFF; }
@font-face { font-family:"RP Sans"; src:url("fonts/sans-bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-024F,U+2000-206F,U+20A0-20BF,U+2100-21FF,U+2190-2BFF; }
@font-face { font-family:"RP Sans"; src:url("fonts/sans-kr.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"RP Sans"; src:url("fonts/sans-kr-bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"RP Mono"; src:url("fonts/mono.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"RP Mono"; src:url("fonts/mono-bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"RP Mono Latin"; src:url("fonts/mono-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"RP Mono Latin"; src:url("fonts/mono-latin-bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap; }

:root { color-scheme: light dark; --fg:#141414; --bg:#ffffff; --muted:#5c5c5c;
  --rule:#c9c9c9; --box-bg:#f6f6f6; --box-rule:#c4c4c4; --code-bg:#f2f2f2; --link:#1a4f8a;
  --serif:"RP Serif","Noto Serif","Noto Serif CJK KR",Georgia,serif;
  --sans:"RP Sans","Noto Sans","Noto Sans CJK KR",system-ui,sans-serif;
  --mono:"RP Mono Latin","Noto Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace; }
html[lang="ko"] { --serif:"RP Serif","Noto Serif CJK KR","Noto Serif KR",Georgia,serif;
  --sans:"RP Sans","Noto Sans CJK KR","Noto Sans KR",system-ui,sans-serif;
  --mono:"RP Mono","D2Coding",ui-monospace,SFMono-Regular,Menlo,monospace; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --fg:#e8e8e8; --bg:#121314; --muted:#a6a6a6;
    --rule:#3a3d40; --box-bg:#1c1e20; --box-rule:#4a4d50; --code-bg:#1b1d1f; --link:#8ab4e8; } }
:root[data-theme="dark"] { color-scheme: dark; --fg:#e8e8e8; --bg:#121314; --muted:#a6a6a6;
  --rule:#3a3d40; --box-bg:#1c1e20; --box-rule:#4a4d50; --code-bg:#1b1d1f; --link:#8ab4e8; }
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); line-height:1.75; font-family:var(--serif); }

/* The sticky bar: book name, the "where am I" button, previous / contents / next. */
.bar { position:sticky; top:0; z-index:20; display:flex; flex-wrap:wrap; gap:.35rem .8rem;
  align-items:center; padding:.55rem clamp(.8rem,3vw,2.5rem); background:var(--bg);
  border-bottom:1px solid var(--rule); font-size:.86rem; font-family:var(--sans); }
.bar a { color:var(--link); text-decoration:none; }
.bar > strong { flex:0 0 auto; }
.bar .bar-nav { display:flex; gap:.55rem; align-items:center; margin-right:.35rem; }
.bar .bar-nav a, .bar .bar-nav .off { display:inline-block; min-width:1.35rem; text-align:center;
  font-size:1.15rem; line-height:1.1; text-decoration:none; }
.bar .bar-nav a:hover { text-decoration:none; color:var(--fg); }
.bar .bar-nav .off { color:var(--muted); opacity:.35; }
.here-btn { margin-left:.7rem; font:inherit; font-size:.92rem; color:inherit; background:none;
  border:1px solid transparent; border-radius:4px; padding:.1rem .45rem; cursor:pointer; }
.here-btn .caret { color:var(--muted); }

/* The panel under the bar: tools, settings, and this chapter's sections. */
.here-panel { position:sticky; top:2.9rem; z-index:19; max-height:78vh; overflow:auto;
  background:var(--bg); border-bottom:1px solid var(--rule);
  padding:.6rem clamp(.8rem,3vw,2.5rem) .9rem; }
.here-panel .tools { display:flex; flex-wrap:wrap; gap:.3rem .5rem; align-items:center; margin-bottom:.5rem; }
.here-panel .ver { font-size:.82rem; color:var(--muted); padding:.2rem .45rem .2rem 0;
  font-family:var(--sans); white-space:nowrap; }
.tool { font:inherit; font-size:.86rem; color:inherit; background:none; border:1px solid var(--rule);
  border-radius:4px; padding:.2rem .55rem; text-decoration:none; cursor:pointer; white-space:nowrap;
  font-family:var(--sans); }
.here-head { display:flex; align-items:center; gap:.8rem; padding:.2rem 0 .5rem;
  border-bottom:1px solid var(--rule); margin-bottom:.5rem; font-family:var(--sans); }
.here-body a, .tf-secs a { display:block; text-decoration:none; padding:.12rem 0; line-height:1.45; }
.here-body a:hover, .tf-secs a:hover { text-decoration:underline; }
.here-body a.lv4, .tf-secs a.lv4 { padding-left:1.6rem; font-size:.94rem; color:var(--muted); }
.tf-no { display:inline-block; min-width:3.2rem; color:var(--muted); font-variant-numeric:tabular-nums; }

/* Pressable things answer with a background. */
.tool:hover, .here-btn:hover, .bar a:hover, .nav a:hover, .here-panel .here-body a:hover { background:var(--box-bg); }
.tool:hover { border-color:var(--box-rule); }
.here-btn:hover { border-color:var(--rule); }
.bar a, .nav a { border-radius:4px; padding:.1rem .35rem; }
.tool:active, .here-btn:active, .bar a:active { transform:translateY(1px); }

/* Reading settings; kept in this browser only. */
.setbox { border:1px solid var(--rule); border-radius:5px; padding:.6rem .7rem; margin:0 0 .6rem;
  font-size:.88rem; font-family:var(--sans); }
.setrow { display:flex; flex-wrap:wrap; gap:.4rem .7rem; align-items:center; margin:.35rem 0; }
.setlbl { color:var(--muted); min-width:3.2rem; }
.seg { display:inline-flex; gap:.25rem; }
.segb { font:inherit; color:inherit; background:none; border:1px solid var(--rule); border-radius:4px;
  padding:.15rem .5rem; cursor:pointer; }
.segb[aria-pressed="true"] { background:var(--box-bg); border-color:var(--fg); font-weight:700; }
.col { display:inline-flex; align-items:center; gap:.3rem; }
.col input[type=color] { width:2rem; height:1.4rem; padding:0; border:1px solid var(--rule);
  border-radius:3px; background:none; cursor:pointer; }
.setnote { margin:.5rem 0 0; color:var(--muted); font-size:.82rem; }
:root[data-measure="on"] main .wrap { max-width:46rem; margin-inline:auto; }

/* The page: the full width, like an ordinary web document; the reader may limit it. */
main { width:100%; padding:1.6rem clamp(.9rem,3vw,2.5rem) 5rem; line-height:1.85; }
.wrap { width:100%; max-width:none; margin:0; }
h1,h2,h3,h4 { font-family:var(--sans); line-height:1.35; padding-bottom:.34rem;
  border-bottom:1px solid var(--box-rule); }
h1 { font-size:clamp(1.5rem,3.4vw,2.1rem); margin:.2rem 0 1.3rem; }
h2 { font-size:clamp(1.35rem,3vw,1.8rem); margin:0 0 1.15rem; padding-bottom:.42rem;
  border-bottom:2px solid var(--box-rule); }
h3 { font-size:clamp(1.05rem,2.2vw,1.25rem); margin:2rem 0 .95rem; padding-bottom:.36rem;
  border-bottom:1.5px solid var(--box-rule); }
h4 { font-size:1rem; margin:1.6rem 0 .7rem; }
p { margin:1.15rem 0; }
a { color:var(--link); }
main p { text-indent:1em; }
.cover p, .note p, .toc p, li p, td p, th p, pre, .chapter-toc p { text-indent:0; }
ul,ol { padding-left:1.4rem; }
li { margin:.3rem 0; }

main a { text-decoration:underline; text-decoration-color:var(--box-rule); text-underline-offset:2px;
  border-radius:3px; }
main a:hover { background:var(--box-bg); text-decoration-color:var(--link); }
main .toc a, main .toc-full a, main .here-body a { text-decoration:none; }
main .toc a:hover, main .toc-full a:hover { background:var(--box-bg); text-decoration:underline; }

pre,code,kbd { font-family:var(--mono); }
code { background:none; padding:0; font-size:.95em; }
pre { background:none; border:1px solid var(--box-rule); border-radius:0; padding:.95rem 1.05rem;
  line-height:1.6; font-size:.95rem; margin:1.2rem 0; tab-size:4;
  white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
pre code { background:none; padding:0; }

/* Tables: a strong outer line, light inner lines, the header row in bold sans on a light shade.
   A table takes the width it needs and stands centred; only when it cannot fit does its wrapper
   scroll. Long code in a cell may break anywhere rather than push the table wide. */
.tblwrap { overflow-x:auto; text-align:center; }
figure { margin:1.2rem 0; text-align:center; }
figure img { max-width:100%; height:auto; border:1px solid var(--rule); }
figcaption { margin-top:.4rem; color:var(--muted); font-size:.92em; }
.tblwrap > table { display:inline-table; width:auto; max-width:none; margin:1.1rem 0; text-align:left; }
table { border-collapse:collapse; margin:1.1rem auto; font-size:.95rem; width:auto; max-width:100%;
  border:2px solid var(--fg); table-layout:auto; line-height:1.6; }
th,td { border:1px solid var(--rule); padding:.42rem .6rem; text-align:left; vertical-align:top; white-space:normal; }
th { background:rgba(128,128,128,.16); font-weight:700; border-bottom:2px solid var(--fg); font-family:var(--sans); }
table tr:first-child th { border-bottom:1px solid var(--fg); }
table.key td:first-child { background:rgba(128,128,128,.07); font-family:var(--sans); font-weight:700; }
td code, th code { overflow-wrap:anywhere; word-break:break-word; }
/* Korean breaks between words (eojeol) in tables, never inside one. */
html[lang="ko"] td, html[lang="ko"] th { word-break:keep-all; }

/* "In this chapter" at the head of a page: the same rail form as the book's other boxes. */
.chapter-toc { margin:.75rem 0 1.6rem; }
.chapter-toc > .rail-label { border-left:4px solid var(--box-rule); padding:.42rem .8rem;
  margin:0 0 .34rem; font-family:var(--sans); font-weight:700; font-size:.98rem; line-height:1.4; }
.chapter-toc > .rail-body { border-left:2px solid var(--box-rule); padding:.4rem .8rem; }
.chapter-toc a { display:block; text-decoration:none; padding:.08rem 0; line-height:1.55; }
.chapter-toc a.lv4 { padding-left:1.6rem; color:var(--muted); }

/* The cover and the contents. */
.cover { text-align:center; margin:1.4rem 0 2rem; padding-bottom:1.2rem; }
.cover h1 { font-size:clamp(1.9rem,5vw,2.9rem); margin:0; letter-spacing:.01em; padding-bottom:0; border-bottom:none; }
.cover p { margin:.45rem 0; }
.cover-sub { font-size:clamp(1rem,2.2vw,1.2rem); }
.cover-meta { color:var(--muted); font-size:.9rem; font-family:var(--sans); }
.cover-links { font-size:.87rem; }
.cover-links a { margin:0 .6rem; }
.cover-blurb { max-width:44rem; margin:1.7rem auto 0; font-size:.95rem; color:var(--muted); }
.note { border:1px solid var(--rule); padding:.65rem .9rem; margin:0 0 1.6rem; font-size:.9rem; }
.toc { line-height:1.45; }   /* one column: thirteen chapters do not need two */
.toc-part { break-inside:avoid; margin:.85rem 0 .2rem; font-size:.95rem; letter-spacing:.02em;
  font-family:var(--sans); border-bottom:none; }
.toc-part:first-child { margin-top:0; }
.toc-group { break-inside:avoid; padding-left:.85rem; }
.toc a { display:block; padding:.16rem 0; text-decoration:none; }
.toc a.toc-detail { font-weight:700; }
.toc-full { line-height:inherit; }
.toc-full .tf-ch { margin:.9rem 0 .15rem; font-weight:700; }
.toc-full .tf-secs { margin:0 0 .5rem .2rem; border-left:2px solid var(--rule); padding-left:.7rem; }
.toc-full h4.toc-part { margin-top:1.8rem; }

.nav { display:flex; gap:1rem; align-items:center; margin-top:3rem; padding-top:1rem;
  border-top:1px solid var(--rule); font-size:.9rem; font-family:var(--sans); }
.nav .sp { flex:1 1 auto; }

/* Search: headings only. */
.searchbox { margin:.6em 0 0; }
.searchbox input[type=search] { width:100%; padding:.45em .6em; font:inherit; border:1px solid var(--rule);
  border-radius:4px; background:var(--bg); color:var(--fg); }
.search-hint { color:var(--muted); font-size:.85em; margin:.3em 0 0; text-indent:0; }
.search-results { list-style:none; padding:0; margin:.5em 0 0; }
.search-results li { margin:.15em 0; }
.search-results .where { color:var(--muted); font-size:.85em; margin-left:.4em; }

/* Section addresses: hidden until the heading is touched. */
.plink { margin-left:.4em; font-weight:400; text-decoration:none; color:var(--muted); opacity:0; transition:opacity .12s; }
h3:hover > .plink, h4:hover > .plink, h3 > .plink:focus, h4 > .plink:focus { opacity:1; }
@media (hover: none) { .plink { opacity:.45; } }

a:focus-visible, button:focus-visible { outline:2px solid var(--link); outline-offset:2px; border-radius:2px; }
:target, h1, h2, h3, h4, [id] { scroll-margin-top:4.2rem; }
.skip { position:absolute; left:-9999px; top:0; z-index:30; background:var(--bg); color:var(--fg);
  border:1px solid var(--fg); padding:.5rem .8rem; font-size:.9rem; text-decoration:none; }
.skip:focus { left:.5rem; top:.5rem; }
@media print { .bar, .here-panel, .nav { display:none; } }