/* kobooks.app: what Ko Books' pages add to the root's sheet (/site.css, copied from public/ by the
   build). Same paper, light, inks and controls; nothing here sets a colour of its own. */

/* ---------------------------------------------------------------- the type: Ko Books' own UI face
   Onest, as in the app (ko-books src/ui/fonts.css; OFL 1.1, onest/LICENSE-Onest.txt), for text and
   controls in English and Russian alike: the root's Inter has no Cyrillic, so Russian fell back to
   the system face. Literata stays the display face. Files in onest/, since fonts/ is the root's. */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/onest/onest-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/onest/onest-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/onest/onest-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
:root {
  --text: "Onest", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ui: var(--text);
}

/* ---------------------------------------------------------------- the header: the app's mark and name */
.book-mark { align-items: center; gap: 10px; text-decoration: none; font: 600 17px/1 var(--text); letter-spacing: -.01em; }
.book-mark img { width: 32px; height: 32px; border-radius: 8px; box-shadow: 1px 2px 3px -1px var(--cast); }
/* the language menu: the same <details> as the Koona menu, its button the language's short code */
.langs .lang-code { font: 500 12px/1 var(--mono); letter-spacing: .08em; }
.langs .apps-menu { width: 170px; }
.apps-menu hr { border: 0; border-top: 1px solid var(--rule); margin: 4px 8px; }

/* ---------------------------------------------------------------- the home page: the plate, then the passport */
.plate .plate-title { font: 380 clamp(40px, 4vw, 58px)/1 var(--display); letter-spacing: -.025em; mix-blend-mode: var(--blend); }
/* the window's light falls on the plate, as on koona.app, and fades out before the passport: one
   page here is not a sheet of several plates, so the light is not stretched down the whole page */
main.sheet::after {
  bottom: auto; height: clamp(560px, 40vw, 860px);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.doc.wide { max-width: 1040px; }
.doc.after-plate { padding-top: 24px; gap: 28px; }
.after-plate .spec { max-width: 720px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 12px; }
.facts h2 { margin-top: 0; font-size: 22px; }
.facts p { margin-top: 10px; }

/* the app's own window, laid on the sheet at the page's width (.window in site.css) */
.window.app { margin: 18px 0 10px; }
.window.app img { max-width: 1040px; }
.window.app.settings img { max-width: 780px; }
.window.app figcaption { max-width: 66ch; }
.window.app figcaption a { color: var(--ink); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- features, help */
.arriving { color: var(--pencil); font-family: var(--display); font-style: italic; }
.toc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.toc .eyebrow { margin: 0 6px 0 0; }
.toc a { color: var(--ink); text-underline-offset: 3px; }
.qa { display: grid; gap: 10px; scroll-margin-top: 96px; }
.qa h3 { font: 600 17px/1.35 var(--text); color: var(--ink); margin-top: 12px; scroll-margin-top: 96px; }
.qa p a, .lede a { color: var(--ink); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- prices: two stamped panels (.slab) */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 12px 0 6px; }
.plan { display: grid; align-content: start; gap: 12px; padding: 24px 26px; }
.plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.plan-name { font: 420 25px/1.2 var(--display); color: var(--ink); letter-spacing: -.012em; }
.plan-kind { font: 400 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.plan-price { color: var(--ink-2); }
.plan-price .amount { font: 380 44px/1 var(--display); color: var(--ink); letter-spacing: -.02em; }
.plan-year { white-space: nowrap; }
.ticks { display: grid; gap: 9px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--ink-2); }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: baseline; }
.ticks svg { width: 16px; height: 16px; color: var(--ink); transform: translateY(3px); }
.ticks .ring { width: 9px; height: 9px; margin: 0 4px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); transform: translateY(-1px); }
.plan-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.soon { font-family: var(--display); font-style: italic; color: var(--pencil); }

/* ---------------------------------------------------------------- /buy: one panel at a time (buy.js) */
.checkout { display: grid; gap: 16px; }
.checkout section { display: grid; gap: 16px; }
.checkout [hidden] { display: none; }
.checkout .actions { display: flex; flex-wrap: wrap; gap: 14px; }
.checkout-busy { display: flex; align-items: center; gap: 10px; color: var(--ink-3); }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--rule); border-top-color: var(--ink); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

@media (max-width: 960px) {
  .facts { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .book-mark span { display: none; }
  .langs .apps-menu { left: 8px; right: 8px; width: auto; }
  .plan { padding: 20px 18px; }
}

/* the foot's longest Russian word ("Конфиденциальность") is wider than a phone's column */
.foot-cols a { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }