/* The screen layout of 2026-10-16 (user decision, docs/implementation/30-article-page-integrated-mock.html, stage 1;
   on with tokila.reading_layout). The top of a phone screen is for seeing where one is, the bottom for what one presses:
   - the header's search button, which took the place of the press entrance;
   - on an article on a phone, the header goes away on the way down and comes back on the way up, a thin bar with the
     chapter and the progress stands in for it while reading, a sheet lists the body's chapters, and a bottom row keeps
     the contents and the calendar (it replaces the calendar widget's floating button) within the thumb's reach.
   The theme's 1rem is 8.8px under 900px, so the phone parts use px. */

/* The header's search (every public page). */
.hdr__search { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; height: 6rem; padding: 0 .8rem; color: var(--tkl-ink); font-size: 1.1rem; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.hdr__search-icon { width: 2.6rem; height: 2.6rem; fill: currentColor; }
.hdr__search:hover { opacity: .7; }
@media (max-width: 600px) {
  .hdr__search { min-width: 44px; padding: 0 4px; }
  .hdr__search-icon { width: 22px; height: 22px; }
  .hdr__search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* The article parts stay out of wider screens. */
.tkl-readbar, .tkl-dock { display: none; }

/* The table of contents sheet (opened only from the phone parts). */
.tkl-sheet { position: fixed; inset: auto 0 0 0; box-sizing: border-box; width: 100%; max-width: none; max-height: 80vh; max-height: 80dvh; margin: 0; padding: 0 0 env(safe-area-inset-bottom); border: 0; border-radius: 18px 18px 0 0; background: var(--tkl-surface); color: var(--tkl-ink); box-shadow: 0 -6px 24px rgba(0, 0, 0, .15); overflow: auto; overscroll-behavior: contain; }
.tkl-sheet::backdrop { background: rgba(0, 0, 0, .4); }
.tkl-sheet .tkl-sheet__head { position: sticky; top: 0; display: flex; align-items: center; gap: 8px; padding: 10px 8px 8px 16px; background: var(--tkl-surface); border-bottom: 1px solid #f0e8eb; }
.tkl-sheet .tkl-sheet__title { flex: 1; margin: 0; padding: 0; border: 0; background: none; color: var(--tkl-ink); font-size: 15px; font-weight: 700; line-height: 1.5; }
.tkl-sheet .tkl-sheet__title::before, .tkl-sheet .tkl-sheet__title::after { content: none; }
.tkl-sheet__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--tkl-surface-muted); color: var(--tkl-ink); cursor: pointer; }
.tkl-sheet__close svg { width: 22px; height: 22px; fill: currentColor; }
.tkl-sheet__close:focus-visible, .tkl-toc a:focus-visible { outline: 2px solid var(--tkl-accent); outline-offset: 2px; }
.tkl-toc { margin: 0; padding: 4px 16px 16px; list-style: none; }
.tkl-toc li { margin: 0; padding: 0; list-style: none; }
.tkl-toc a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid #f4eef0; color: var(--tkl-ink); font-size: 14px; line-height: 1.5; text-decoration: none; }
.tkl-toc__number { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tkl-accent-surface); color: #a3114a; font-size: 12px; font-weight: 700; }
.tkl-toc a[aria-current="true"] { font-weight: 700; }
.tkl-toc a[aria-current="true"] .tkl-toc__number { background: var(--tkl-accent); color: #fff; }

@media (max-width: 600px) {
  /* The header goes away while reading down an article and comes back on the way up or with the menu open. */
  html.tkl-reading .hdr { transition: transform .25s; }
  html.tkl-reading.tkl-header-away .hdr { transform: translateY(-100%); }
  html.tkl-reading:has(#id-menu:checked, #id-menu-mypage:checked) .hdr { transform: none; }

  /* The reading bar: under the menus (101, 102) and their backdrop (100); shown only while the header is away. */
  .tkl-readbar:not([hidden]) { position: fixed; top: 0; left: 0; right: 0; z-index: 99; display: block; height: 40px; background: var(--tkl-surface); box-shadow: 0 1px 0 #f0e8eb; transform: translateY(-110%); transition: transform .25s; }
  html.tkl-header-away .tkl-readbar:not([hidden]) { transform: none; }
  .tkl-readbar__button { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0 12px; border: 0; background: none; color: var(--tkl-muted); font: inherit; font-size: 12px; line-height: 1.3; text-align: left; cursor: pointer; }
  .tkl-readbar__button:disabled { color: var(--tkl-muted); cursor: default; }
  .tkl-readbar__button:focus-visible { outline: 2px solid var(--tkl-accent); outline-offset: -2px; }
  .tkl-readbar__number { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--tkl-accent-surface); color: #a3114a; font-size: 11px; font-weight: 700; }
  .tkl-readbar__number:empty { display: none; }
  .tkl-readbar__title { flex: 1; min-width: 0; overflow: hidden; color: var(--tkl-ink); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
  .tkl-readbar__more { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 11px; }
  .tkl-readbar__more[hidden] { display: none; }
  .tkl-readbar__more svg { width: 16px; height: 16px; fill: currentColor; }
  .tkl-readbar__progress { position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--tkl-accent); }

  /* The bottom row: where the calendar widget's floating button was, and out of the way of the footer and of anything
     drawn over the bottom edge (an anchor ad lifts it by --tkl-dock-lift). */
  .tkl-dock { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom) + var(--tkl-dock-lift, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: #2a2126; box-shadow: 0 12px 28px -12px rgba(42, 33, 38, .7); transition: transform .25s, bottom .25s; }
  .tkl-dock:not(:has(.tkl-dock__item:not([hidden]))) { display: none; }
  .tkl-dock.is-away { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom) + var(--tkl-dock-lift, 0px))); }
  .tkl-dock__item { position: relative; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: 44px; margin: 0; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: #fff !important; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none !important; cursor: pointer; }
  .tkl-dock__item[hidden] { display: none; }
  .tkl-dock__item svg { flex: none; width: 20px; height: 20px; fill: #f6c9da; }
  .tkl-dock__item:focus-visible { outline: 3px solid #f6c9da; outline-offset: 2px; }
  .tkl-dock__count { display: grid; place-items: center; min-width: 28px; height: 28px; box-sizing: border-box; padding: 0 6px; border-radius: 999px; background: var(--tkl-accent-surface); color: #a3114a; font-family: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif; font-size: 15px; font-weight: 600; }
  body:has([data-dock-calendar]) .tcal-fab { display: none !important; }

  /* A chapter opened from the contents lands under the reading bar. */
  html.tkl-reading .art__cont h2 { scroll-margin-top: 56px; }
  /* The markers around the body are hidden for readers and the reading measurement; here they take a place without
     height so the script can tell where the body starts and ends. */
  html.tkl-reading [data-toc-start], html.tkl-reading [data-toc-end] { display: block; height: 0; margin: 0; padding: 0; overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html.tkl-reading .hdr, .tkl-readbar:not([hidden]), .tkl-dock { transition: none; }
}