/* ========================================================== MAXFIYLIK
 * The privacy page, on the new design system's quyosh tokens.
 *
 * WHY THIS FILE REPEATS THE TOKENS INSTEAD OF IMPORTING ui.css. This page is
 * served at /privacy — outside the shell — and it has to be readable by a
 * stranger
 * with no session, no theme preference in localStorage and, on the connection
 * most of these visitors have, no patience for a 58 kB stylesheet of which it
 * would use a dozen rules. So THE TEN VALUES IT ACTUALLY USES are copied here
 * verbatim from ui.css's :root[data-theme="quyosh"] block. They are copies, not
 * approximations: if a token changes there, change it here too, and nothing
 * else about this file has to move.
 *
 * THREE THEMES NOW, AND THE REASON THE OLD NOTE GAVE FOR ONE HAS GONE. It said
 * this page has no script, so it cannot know which theme a student picked. It
 * has one now — tema.js, the same eight lines every other document loads
 * blocking in the head — because the ground switch had to be on every page and
 * a switch on a page that cannot change is a switch that lies. So the ten values
 * are declared three times over rather than once, still copied verbatim from
 * ui.css, and this page follows the student the way the rest of the product
 * does. It is still the only script here: no module, no import graph, nothing
 * that a stranger on a slow connection waits for.
 *
 * THE DESIGN JOB HERE IS READING, NOT DECORATION. One column at roughly 65
 * characters, a heading hierarchy you can see from across the room, leading a
 * legal paragraph deserves, and a definition list where the content really is a
 * list of definitions. No cards, no tinted panels, no icons in the prose. It is
 * meant to look like a serious document that happens to belong to this product.
 */

/* ================================================================== tokens */
/* quyosh, copied from web/ui.css. It is also the bare :root, so a browser that
   somehow reaches this file before tema.js has written the attribute — or with
   JavaScript off entirely — still gets a finished page rather than an unpainted
   one. That is why the daylight values are stated twice. */
:root,
:root[data-theme="quyosh"] {
  --bg:      #fafaf9;
  --card:    #ffffff;
  --card2:   #f3f4f2;
  --line:    #e9eae7;
  --line2:   #d8dbd6;
  --ink:     #0e1512;
  --ink2:    #39433e;
  --mut:     #626c66;
  --accent:  #0a6847;
  --accent-soft: #e4f3eb;
  /* The eyebrow's own ink — see the note beside .pv-eyebrow. */
  --eyebrow: #075c41;
  --shadow:  0 1px 2px rgba(14,21,18,.04);
  /* THE FACES ARE PART OF THE THEME, not a constant. ui.css gives each ground
     its own pair and landing.css copies them the same way; declaring one pair
     once left a night-ground privacy notice set in the daylight theme's
     typefaces, one tap after a page that was not. */
  --fd: "Plus Jakarta Sans", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --fb: "Plus Jakarta Sans", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  color-scheme: light;
}

:root[data-theme="binafsha"] {
  --bg:      #f6f6fa;
  --card:    #ffffff;
  --card2:   #f1f1f7;
  --line:    #e8e8f0;
  --line2:   #d9d9e5;
  --ink:     #17181d;
  --ink2:    #42444e;
  --mut:     #74767f;
  --accent:  #6553e0;
  --accent-soft: #efecfd;
  /* binafsha's --accent is 5.0:1 here, which passes — but this is eleven pixels
     of letterspaced capitals, so it takes the darker purple the theme already
     keeps for small type (ui.css's --act-ink) at 6.5:1. No new colour. */
  --eyebrow: #5241cc;
  --shadow:  0 1px 3px rgba(23,24,40,.06);
  --fd: "Figtree", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --fb: "Figtree", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  color-scheme: light;
}

:root[data-theme="tungi"] {
  --bg:      #0a0d0c;
  --card:    #121715;
  --card2:   #1a201d;
  --line:    #222a26;
  --line2:   #2f3833;
  --ink:     #ecf1ee;
  --ink2:    #c3ccc7;
  --mut:     #929d96;
  --accent:  #4fd39a;
  --accent-soft: #10291d;
  /* On this ground the accent is bright enough on its own; small type takes
     the theme's lighter ink of it. */
  --eyebrow: #5fdca5;
  --shadow:  none;
  --fd: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --fb: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
}

/* ==================================================================== base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink2);
  font-family: var(--fb);
  /* Larger than the app's 15px on purpose. Everywhere else in this product the
     type is furniture around a student's own writing; here the type IS the
     thing, and it is read once, carefully, by somebody deciding whether to
     trust us with an essay. */
  font-size: 16.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--accent-soft); color: var(--ink); }

svg { flex-shrink: 0; }

/* ================================================================== column */
/* 600px minus the 20px gutters leaves 560px of text — about 65 characters of
   Plus Jakarta Sans at this size, which is the measure a paragraph stops being
   work to read at. The page is not centred vertically and does not float on a
   card: the ground IS the paper, exactly as the writing surface in the app is. */
.pv { padding: 22px 20px 72px; }
.pv-inner { max-width: 600px; margin: 0 auto; }

/* ================================================================ masthead */
/* The mark is the way out of this page, and on a phone it is the ONLY way out
   until the reader reaches the bottom — so it is a 44px target, not a 13px
   line of letterspaced capitals like the page it replaces. */
/* THE TYPE SELECTOR IS LOAD-BEARING, here and on the five paragraph rules
   below. `.pv b` further down sets the weight of every bold word in the prose,
   and at equal specificity the later rule wins — which quietly took 700 off
   the wordmark and left it indistinguishable from an emphasised word. */
a.pv-mark {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-bottom: 34px;
  color: var(--ink); text-decoration: none;
}
a.pv-mark b { display: block; font-family: var(--fd); font-size: 17px; font-weight: 700; line-height: 1.15; }
a.pv-mark small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--mut); }
a.pv-mark:hover b { color: var(--accent); }

/* =================================================================== title */
/* ITS OWN TOKEN, not --accent: eleven pixels of letterspaced capitals on the one
   page in this product somebody reads a line at a time get the darker of the
   theme's two emeralds (#075c41, 7.7:1 on the daylight ground). It is a TOKEN
   rather than a literal, because a literal is a colour that stays where it is
   while the page around it goes dark. Each theme states its own. */
.pv p.pv-eyebrow {
  margin: 0 0 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--eyebrow);
}
.pv h1 {
  margin: 0;
  font-family: var(--fd); font-weight: 700; color: var(--ink);
  font-size: clamp(27px, 6.4vw, 34px); line-height: 1.18; letter-spacing: -.01em;
  text-wrap: balance;
}
.pv p.pv-lede { margin: 16px 0 0; font-size: 17.5px; line-height: 1.7; color: var(--ink2); }

/* ================================================================ sections */
/* A rule above every heading rather than a card around every section. The rule
   is what tells a reader "a new question starts here" in a document; a card
   would tell them "here is a component", which is not what this page is. */
.pv h2 {
  margin: 46px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
  font-family: var(--fd); font-size: 20.5px; font-weight: 700; line-height: 1.3;
  color: var(--ink); letter-spacing: -.005em;
}
.pv p { margin: 14px 0 0; }
.pv b { color: var(--ink); font-weight: 600; }

/* ========================================================== the definitions */
/* THREE OF THE SIX SECTIONS ARE GENUINELY A LIST OF DEFINITIONS — a thing, and
   what is true of it — and they were bulleted paragraphs that opened with a
   bold word and a colon. A <dl> says the same thing in markup a screen reader
   can also hear, and it lets the term sit on its own line: at 375px the old
   shape put «Oʻqituvchingizning Telegramʼi:» and the sentence after it into one
   grey block, and the reader had to find the boundary themselves.

   The term is NOT put in a left column. A two-column definition list at this
   measure leaves the definition about thirty characters wide, which is a
   newspaper column, not a paragraph. */
.pv-dl { margin: 8px 0 0; }
.pv-row { padding: 16px 0; border-top: 1px solid var(--line); }
.pv-row:first-child { border-top: 0; }
.pv-row dt {
  font-family: var(--fd); font-size: 15.5px; font-weight: 700; line-height: 1.4;
  color: var(--ink);
}
.pv-row dd { margin: 6px 0 0; }

/* ===================================================================== list */
/* Xavfsizlik is four flat statements — no term, no definition — so it stays a
   list. The marker is a drawn rule rather than a disc: a bullet at this size
   is a blob of ink that the eye reads before the sentence, and these four
   sentences are the point. */
.pv ul { margin: 12px 0 0; padding: 0; list-style: none; }
.pv li { position: relative; padding-left: 22px; margin-top: 10px; }
.pv li::before {
  content: ""; position: absolute; left: 1px; top: .85em;
  width: 9px; height: 1.5px; background: var(--line2);
}

/* ===================================================================== note */
/* The one sentence on this page that is a promise rather than a description.
   It is set in the display face at a size the eye stops on — no box, no left
   border, no tint. A sentence that has to be put in a coloured tray to be
   noticed is a sentence nobody believes anyway. */
.pv p.pv-note {
  margin: 26px 0 0;
  font-family: var(--fd); font-size: 18px; line-height: 1.55; font-weight: 500;
  color: var(--ink); text-wrap: balance;
}

/* =================================================================== bottom */
.pv p.pv-fine {
  margin: 52px 0 0; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.7; color: var(--mut);
}
.pv p.pv-back { margin: 22px 0 0; }
.pv-back a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: 14.5px; font-weight: 600; color: var(--ink2); text-decoration: none;
}
.pv-back a:hover { color: var(--accent); }

/* ==================================================================== phone */
@media (max-width: 480px) {
  .pv { padding: 18px 18px 56px; }
  .pv h2 { margin-top: 38px; padding-top: 18px; }
  .pv p.pv-lede { font-size: 16.5px; }
  .pv p.pv-note { font-size: 17px; }
}

/* ==================================================================== print */
/* A privacy page is the one page in this product somebody prints and staples to
   a consent form. Paper is white and has no ground colour to spend, and the
   two navigation links are dead ink on it. */
@media print {
  /* THE TOKENS ARE RESTATED, and they have to be: the three blocks at the top of
     this file are `:root[data-theme=…]`, which outranks a bare `:root` here, so
     a student printing on the night theme would otherwise hand a teacher a page
     of pale grey rules on white. Everything below then paints over the parts
     that matter on paper. */
  :root, :root[data-theme="quyosh"], :root[data-theme="binafsha"], :root[data-theme="tungi"] {
    --bg: #fff; --card: #fff; --card2: #f2f2f0;
    --line: #dcdcd8; --line2: #c6c6c2;
    --ink: #1a1a18; --ink2: #3a3a36; --mut: #6a6a64;
    --accent: #b8431f; --accent-soft: #f4e2dc; --eyebrow: #666;
    --shadow: none;
    color-scheme: light;
  }
  body { background: #fff; color: #222; font-size: 11pt; }
  a.pv-mark, .pv p.pv-back { display: none; }
  .pv h1, .pv h2, .pv-row dt, .pv b, .pv p.pv-note { color: #000; }
  .pv p.pv-eyebrow { color: #666; }
  .pv h2, .pv-row, .pv p.pv-fine { border-color: #ccc; }
  .pv-row, .pv h2 { break-inside: avoid; }
  .pv h2 { break-after: avoid; }
}

/* ==================================================== the ground, in the corner
 * The product's switch, on the page that had no way to change anything until
 * now. The rules are copied from ui.css rather than imported, for the reason the
 * header of this file gives about the tokens: nothing here loads ui.css, and a
 * stranger reading a privacy notice should not wait for 58 kB to do it. Copied
 * verbatim, so the control cannot drift into a second design.
 *
 * z-index 5 is enough: this document has no sticky bar, no drawer and no scrim.
 * The skip link is the only other fixed thing and it is in the other corner. */
/* Sticky, not fixed — see the note in maxfiylik.html. The band is opaque because
   the notice passes underneath it, and it keeps its row so nothing is covered at
   any width. */
.groundbar {
  position: sticky; top: 0; z-index: 5; background: var(--bg);
  display: flex; justify-content: flex-end;
  padding: 12px 20px 0;
  padding-top: calc(12px + env(safe-area-inset-top));
}
#btnGround {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 5px;
  background: none; border: 0; border-radius: 999px;
}
.groundtrack {
  position: relative; display: flex; align-items: center;
  width: 62px; height: 34px; padding: 3px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 999px;
}
#btnGround:hover .groundtrack { border-color: var(--line2); }
.groundknob {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--card); box-shadow: var(--shadow);
  transition: transform .18s;
}
/* 28px is arithmetic: 62 less two 1px rules and two 3px pads is a 54px content
   box, less the 26px knob. The hairline is tungi's alone — that theme has no
   --shadow and its --card is darker than its --card2. */
:root[data-theme="tungi"] .groundknob {
  transform: translateX(28px);
  border: 1px solid var(--line2);
}
/* position:relative is load-bearing: the knob is positioned and the icons are
   not, so without it the knob paints over both of them. */
.groundhalf {
  position: relative; flex: 1 1 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--mut);
}
.gsun { color: var(--ink); }
:root[data-theme="tungi"] .gsun { color: var(--mut); }
:root[data-theme="tungi"] .gmoon { color: var(--ink); }

/* The masthead needs no reservation any more: the switch is in its own row above
   it, not floating over it. */

/* It is a control, not content — see the print block above, which strips the two
   navigation links for the same reason. */
@media print { .groundbar { display: none !important; } }