/* Chegara — planner sheets on a warm-grey desk: lavender ink, sage fills, A4 rhythm. */
@font-face { font-family: "Mulish"; src: url(fonts/mulish.woff2) format("woff2"); font-weight: 200 1000; font-display: swap;
  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: "Mulish"; src: url(fonts/mulish-cyrillic.woff2) format("woff2"); font-weight: 200 1000; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Mulish"; src: url(fonts/mulish-cyrillic-ext.woff2) format("woff2"); font-weight: 200 1000; font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Gelasio"; src: url(fonts/gelasio.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gelasio"; src: url(fonts/gelasio-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Gelasio"; src: url(fonts/gelasio-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --desk: #e9e5df;
  --paper: #fdfcf9;
  --ink: #2b2734;
  --muted: #5d5868;
  --lav: #5b4e8c;
  --lav-deep: #463c70;
  --lav-soft: #e8e4f4;
  --sage: #6f8f75;
  --sage-soft: #e0e9df;
  --line: #d9d3ca;
  --warn: #8a3b2e;
  --sans: "Mulish", system-ui, sans-serif;
  --serif: "Gelasio", Georgia, serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--desk); color: var(--ink); font: 400 1.125rem/1.6 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; margin: 0; color: var(--lav-deep); }
p, ul, ol, dl, figure { margin: 0; }
a { color: var(--lav); text-underline-offset: 0.18em; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; }
.skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; background: var(--paper); padding: 0.5rem 1rem; z-index: 5; }
.skip:focus { inset-block-start: 1rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- header: planner tabs */
.bar-inner { max-width: 54rem; margin: 0 auto; padding: 1rem 1rem 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--lav-deep); padding-block-end: 0.6rem; }
.brand-mark { inline-size: 2.4rem; block-size: 2.4rem; }
.bm-sheet { fill: var(--sage-soft); stroke: var(--sage); stroke-width: 1.5; }
.bm-top { fill: var(--paper); stroke: var(--lav); stroke-width: 1.5; }
.bm-line { stroke: var(--lav); stroke-width: 2.5; stroke-linecap: round; }
.brand-name { font: 700 1.5rem/1 var(--serif); }
.brand-sub { font-size: 0.95rem; color: var(--muted); }
.top-links { display: none; }
.top-links ul { list-style: none; padding: 0; display: flex; gap: 0.3rem; }
.top-links a { display: block; padding: 0.55rem 0.9rem 0.5rem; border-radius: 0.6rem 0.6rem 0 0; background: var(--lav-soft); color: var(--lav-deep); text-decoration: none; font-weight: 700; font-size: 1rem; }
.top-links a[aria-current="page"] { background: var(--paper); border-block-start: 3px solid var(--lav); }
@media (hover: hover) and (pointer: fine) { .top-links a:hover { background: #ddd6f0; } }
.menu { margin-block-end: 0.6rem; }
.menu summary { list-style: none; cursor: pointer; font-weight: 800; padding: 0.5rem 1rem; border-radius: 0.6rem; background: var(--lav); color: #fff; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: " +" / ""; }
.menu[open] summary::after { content: " −" / ""; }
.menu ul { list-style: none; padding: 0.5rem 0 0; display: grid; }
.menu a { display: block; padding: 0.55rem 0.2rem; border-block-end: 1px solid var(--line); text-decoration: none; font-weight: 700; }
.menu a[aria-current="page"] { color: var(--ink); }
.menu[open] { flex-basis: 100%; order: 3; background: var(--paper); padding: 0.6rem 0.9rem; border-radius: 0.6rem; }
.menu[open] summary { display: inline-block; }
@media (min-width: 60rem) {
  .top-links { display: block; }
  .menu { display: none; }
  .brand { padding-block-end: 0.8rem; }
}

/* ---------------------------------------------------------------- sheets */
main { max-width: 54rem; margin: 0 auto; padding: 0 1rem 2.5rem; }
.sheet { background: var(--paper); border-radius: 0 0.5rem 0.5rem 0.5rem; box-shadow: 0 1px 2px rgb(43 39 52 / 0.08), 0 8px 24px rgb(43 39 52 / 0.08); margin-block-end: 2rem; }
.sheet + .sheet { border-radius: 0.5rem; }
.sheet-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; padding: 0.8rem 1.2rem; border-block-end: 2px dashed var(--line); }
.sheet-no { font-weight: 800; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--sage); padding: 0.15rem 0.6rem; border-radius: 1rem; }
.sheet-label { font-weight: 700; color: var(--muted); }
.print { margin-inline-start: auto; font: 700 1rem/1 var(--sans); padding: 0.55rem 0.9rem; border-radius: 0.5rem; border: 2px solid var(--lav); background: var(--paper); color: var(--lav-deep); cursor: pointer; }
.print[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .print:hover { background: var(--lav-soft); } }
.sheet-body { padding: 1.4rem 1.2rem 1.8rem; display: grid; gap: 2rem; }
@media (min-width: 40rem) { .sheet-body { padding: 2rem 2.6rem 2.6rem; } .sheet-head { padding-inline: 2.6rem; } }

.hero { display: grid; gap: 0.6rem; }
.kicker { font-weight: 800; color: var(--sage); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem; }
.hero h1 { font-size: clamp(2rem, 6vw, 2.8rem); }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 40rem; }
.sec { display: grid; gap: 0.9rem; }
.sec h2 { font-size: 1.55rem; padding-block-end: 0.35rem; border-block-end: 1px solid var(--line); }
.sec p { max-width: 42rem; }

/* home cards */
.cards { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); counter-reset: none; }
.card { border: 1px solid var(--line); border-radius: 0.6rem; padding: 1rem; display: grid; gap: 0.4rem; align-content: start; background: #fff; position: relative; }
.card-art { background: var(--lav-soft); border-radius: 0.5rem; padding: 0.6rem; }
.card-art svg { display: block; inline-size: 100%; block-size: 6.5rem; }
.card-no { font-weight: 800; color: var(--sage); font-size: 0.95rem; }
.card h3 { font-size: 1.3rem; }
.card h3 a { text-decoration: none; color: var(--lav-deep); }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 0.6rem; }
@media (hover: hover) and (pointer: fine) { .card:hover { border-color: var(--lav); } }
.card:focus-within { outline: 3px solid var(--sage); outline-offset: 2px; }
.card h3 a:focus-visible { outline: none; }
.next { padding-inline-start: 1.2rem; display: grid; gap: 0.5rem; }
.privacy { background: var(--sage-soft); border-radius: 0.5rem; padding: 0.8rem 1rem; }

/* worksheets */
.ws { display: grid; gap: 1.2rem; }
.ws-about { color: var(--muted); }
.ws-grid { display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .ws-grid { grid-template-columns: 1.15fr 1fr; align-items: start; } }
fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: 0.2rem; align-content: start; }
legend { font: 700 1.2rem/1.3 var(--serif); color: var(--lav-deep); padding: 0; margin-block-end: 0.4rem; }
.group-h { font-weight: 800; color: var(--sage); margin-block-start: 0.8rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; }
.row { display: grid; gap: 0.15rem; padding-block: 0.35rem; }
.row label { font-weight: 700; }
.hint { font-size: 1rem; color: var(--muted); }
.fill { display: flex; align-items: baseline; gap: 0.5rem; border-block-end: 2px solid var(--lav); }
.fill input { flex: 1; inline-size: 0; min-inline-size: 0; font: 700 1.2rem/1.4 var(--sans); color: var(--ink); border: 0; background: transparent; padding: 0.25rem 0.1rem; text-align: end; font-variant-numeric: tabular-nums; }
.fill input[aria-invalid="true"] { background: #f6e3df; }
.fill:has(input[aria-invalid="true"]) { border-block-end-color: var(--warn); }
.unit { color: var(--muted); font-size: 1rem; white-space: nowrap; }
.row-text textarea { inline-size: 100%; font: 400 1.125rem/2.2rem var(--sans); color: var(--ink); border: 0; resize: vertical; padding: 0 0.2rem;
  background: repeating-linear-gradient(transparent 0 calc(2.2rem - 2px), var(--line) calc(2.2rem - 2px) 2.2rem); background-attachment: local; }
.ws-lines { gap: 0.6rem; }
.ws-out { background: var(--lav-soft); border-radius: 0.6rem; padding: 1rem 1.1rem 1.2rem; display: grid; gap: 0.8rem; }
.ws-out h3 { font-size: 1.25rem; }
.gauge, .cal { display: block; inline-size: 100%; max-inline-size: 18rem; margin-inline: auto; }
.g-bg { fill: none; stroke: #d6d0e6; stroke-width: 18; stroke-linecap: round; }
.g-fg { fill: none; stroke: var(--sage); stroke-width: 18; stroke-linecap: round; transition: stroke-dasharray 0.25s; }
.g-hub { fill: var(--lav); }
.rings circle { stroke: #fff; stroke-width: 3; }
.r1 { fill: #b9afd9; }
.r2 { fill: #a9c1ac; fill-opacity: 0.9; }
.r3 { fill: var(--lav); fill-opacity: 0.75; }
.cal-top { fill: var(--lav); }
.day { stroke: #fff; stroke-width: 2; }
.day[data-level="0"] { fill: #e3dfd8; }
.day[data-level="1"] { fill: #c9d9c9; }
.day[data-level="2"] { fill: #93b198; }
.day[data-level="3"] { fill: #5f8166; }
.gauge-cap { font-size: 1rem; color: var(--muted); text-align: center; }
.results { display: grid; gap: 0.1rem; }
.results div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.8rem; padding-block: 0.35rem; border-block-end: 1px dotted #b9b1cf; }
.results dt { color: var(--ink); }
.results dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; margin-inline-start: auto; }
.results .key dd { color: var(--lav-deep); font-size: 1.2rem; }
.note { background: var(--paper); border-inline-start: 4px solid var(--sage); padding: 0.6rem 0.8rem; border-radius: 0 0.4rem 0.4rem 0; }
.err { color: var(--warn); font-weight: 700; background: #f6e3df; padding: 0.6rem 0.8rem; border-radius: 0.4rem; }
.err[hidden] { display: none; }

/* self-check */
.chk-grid { display: grid; gap: 1.2rem; }
@media (min-width: 46rem) { .chk-grid { grid-template-columns: repeat(3, 1fr); } }
.chk { background: #fff; border: 1px solid var(--line); border-block-start: 6px solid var(--lav); border-radius: 0.5rem; padding: 0.9rem; }
.chk-h { font: 700 1.2rem/1.3 var(--serif); color: var(--lav-deep); margin-block-end: 0.6rem; }
.chk ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.chk li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; }
.chk input { inline-size: 1.4rem; block-size: 1.4rem; margin: 0.15rem 0 0; accent-color: var(--lav); }
.chk-out { background: var(--lav-soft); border-radius: 0.6rem; padding: 1rem; display: grid; gap: 0.6rem; }
.chk-count strong { font-size: 1.3rem; color: var(--lav-deep); }

/* quotations */
.quote { background: #fff; border: 1px solid var(--line); border-inline-start: 6px solid var(--lav); border-radius: 0 0.5rem 0.5rem 0; padding: 1rem 1.1rem; display: grid; gap: 0.6rem; }
.quote blockquote { margin: 0; }
.quote blockquote[lang="en"] p { font: italic 400 1.1rem/1.6 var(--serif); }
.quote blockquote[lang="uz-Cyrl"] p { font: 600 1.05rem/1.6 var(--sans); color: #3a3446; }
.alt { font-size: 1.05rem; }
.alt-l { font-weight: 800; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sage); }
.quote figcaption { font-size: 1rem; }
.means { background: var(--sage-soft); border-radius: 0.5rem; padding: 0.9rem 1.1rem; display: grid; gap: 0.5rem; }
.means-h { font-weight: 800; color: #3f5c45; }
.src { padding-inline-start: 1.2rem; display: grid; gap: 0.6rem; }

/* footer */
.foot { background: var(--lav-deep); color: #f1eef9; }
.foot-inner { max-width: 54rem; margin: 0 auto; padding: 1.6rem 1rem 2rem; display: grid; gap: 0.6rem; font-size: 1rem; }
.foot a { color: #fff; }

@media (prefers-reduced-motion: reduce) { .g-fg { transition: none; } }

/* ---------------------------------------------------------------- print: one sheet per page */
@page { size: A4; margin: 14mm; }
@media print {
  body { background: #fff; font-size: 11pt; }
  .bar, .foot, .skip, .print, .menu, noscript { display: none !important; }
  main { max-width: none; padding: 0; }
  .sheet { box-shadow: none; border: 0; margin: 0; break-after: page; }
  .sheet-body { padding: 0.5rem 0 0; gap: 1.2rem; }
  .sheet-head { padding-inline: 0; }
  .ws-out, .chk-out, .means, .privacy { background: #fff; border: 1px solid #999; }
  a { color: inherit; text-decoration: none; }
  .err { display: none; }
}