/* TISHK — reading mode (see assets/js/reader.js) */

.t-reader-open{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:4px 0 22px;padding:8px 18px;border:1px solid #c9d3ea;border-radius:999px;background:#f3f6fd;color:#003399;font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.t-reader-open:hover{background:#e6edfb;border-color:#003399}
.t-reader-open:active{transform:scale(.97)}
.t-reader-open:focus-visible,.t-reader button:focus-visible,.t-reader input:focus-visible{outline:3px solid #ffcf00;outline-offset:2px}

html.t-reader-on{overflow:hidden}

.t-reader{
  --bg:#fbfaf7;--ink:#1d1d1f;--soft:#5d5d63;--line:#e3e0d8;--accent:#003399;--bar:rgba(251,250,247,.92);--chip:#efede7;--ghost:.16;
  position:fixed;inset:0;z-index:1000;overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg);color:var(--ink);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s ease-out,transform .25s ease-out,visibility 0s .25s}
.t-reader.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease-out,transform .25s ease-out}
.t-reader[data-theme="sepia"]{--bg:#f4ecd8;--ink:#4a3a2a;--soft:#7a6650;--line:#e0d3b5;--accent:#8a4b12;--bar:rgba(244,236,216,.93);--chip:#ebe0c6;--ghost:.18}
.t-reader[data-theme="dark"]{--bg:#16181d;--ink:#e7e4dc;--soft:#a7a49c;--line:#2c2f37;--accent:#9db8ff;--bar:rgba(22,24,29,.92);--chip:#22252c;--ghost:.14}

/* toolbar */
.t-reader__bar{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px max(16px,calc((100% - 1000px)/2));background:var(--bar);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.t-reader__group{display:flex;align-items:center;gap:6px}
.t-reader__group--play{flex:1 1 auto;justify-content:center}
.t-reader__btn,.t-reader__swatch{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--chip);color:var(--ink);font:inherit;font-size:14px;cursor:pointer;transition:border-color .15s}
.t-reader__btn:hover,.t-reader__swatch:hover{border-color:var(--accent)}
.t-reader__swatch[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent);font-weight:700}
.t-reader__dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.25)}
.t-reader__swatch--paper .t-reader__dot{background:#fbfaf7}
.t-reader__swatch--sepia .t-reader__dot{background:#e9dbb8}
.t-reader__swatch--dark .t-reader__dot{background:#16181d}
.t-reader__a{font-weight:700;font-size:18px;line-height:1}
.t-reader__a--s{font-size:13px}
.t-reader__size{min-width:30px;text-align:center;font-variant-numeric:tabular-nums;color:var(--soft);font-size:14px}
.t-reader__btn--play{min-width:150px;background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:700}
.t-reader__btn--play:hover{filter:brightness(1.08)}
.t-reader__speed{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--soft)}
.t-reader__speed input{width:140px;accent-color:var(--accent);min-height:44px}
.t-reader__speed output{min-width:118px;font-variant-numeric:tabular-nums;color:var(--ink)}
.t-reader__close{margin-inline-start:auto}

.t-reader__progress{position:sticky;top:var(--barh,69px);z-index:2;height:3px;background:transparent}
.t-reader__progress span{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .2s linear}

/* the page */
.t-reader__page{max-width:760px;margin:0 auto;padding:48px 20px 30vh;font-size:var(--rf,20px);line-height:1.95}
.t-reader__page .t-article__title{font-size:1.8em;line-height:1.3;margin:0 0 14px;color:var(--ink)}
.t-reader__page .t-article__byline{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 34px;padding-bottom:18px;border-bottom:1px solid var(--line);font-size:.7em;color:var(--soft)}
.t-reader__page .t-prose{font-size:1em;color:var(--ink)}
.t-reader__page .t-prose p,.t-reader__page .t-prose li{font-size:1em;line-height:1.95;text-align:justify;color:var(--ink)}
.t-reader__page .t-prose h2,.t-reader__page .t-prose h3,.t-reader__page .t-prose h4{color:var(--ink)}
.t-reader__page a{color:var(--accent)}
.t-reader__page img{max-width:100%;height:auto;border-radius:6px}
.t-reader__page .t-prose [style*="color"]{color:inherit!important}
.t-reader[data-theme="dark"] .t-reader__page img{filter:brightness(.88)}

/* moving text: unread words wait faintly in place, so nothing jumps */
.t-reader.is-moving .t-w{opacity:var(--ghost);transition:opacity .35s ease-out}
.t-reader.is-moving .t-w.is-on{opacity:1}
.t-reader.is-moving .t-w.is-now{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em}
.t-reader.is-moving .t-w{cursor:pointer}

.t-reader__btn--play span{white-space:nowrap}

@media (min-width:1100px){.t-reader__page{max-width:1000px;padding-top:56px}}
.t-reader[dir="ltr"] .t-reader__progress span{transform-origin:left}

@media (max-width:760px){
  .t-reader__bar{gap:8px;padding:8px 12px}
  .t-reader__swatch{padding:0;min-width:44px}
  .t-reader__swatch .t-reader__lbl{display:none}
  .t-reader__dot{width:20px;height:20px}
  .t-reader__group{gap:4px}
  .t-reader__group--play{order:3;flex-basis:100%;justify-content:space-between}
  .t-reader__btn--play{min-width:0;flex:0 1 auto;padding:0 14px}
  .t-reader__unit{display:none}
  .t-reader__speed input{width:96px}
  .t-reader__speed output{min-width:0;font-size:12px}
  .t-reader__speed > span{display:none}
  .t-reader__page{padding:28px 16px 30vh}
}

@media (prefers-reduced-motion:reduce){
  .t-reader,.t-reader.is-open,.t-reader.is-moving .t-w,.t-reader__progress span{transition:none}
}