/* ══════════════════════════════════════════════════════════════════
   THE HAND-OUT KIT — business card + flyer for educational centres
   Loaded only by templates/kit/*. Standalone: it does NOT sit on top of
   style.css, because a marketing piece must not inherit the app chrome's
   dark-mode rules or its 16px rhythm. Everything here is sized in
   millimetres, because everything here ends up on paper.
   Docs: prime/kit.py · views: prime.views.kit_*
   ══════════════════════════════════════════════════════════════════ */

:root {
  --kt-ink:      #0b1220;   /* the navy the pieces are printed on        */
  --kt-ink-2:    #16243d;   /* the lighter end of every navy gradient    */
  --kt-sky:      #38bdf8;   /* the brand accent — same as the site       */
  --kt-sky-deep: #0284c7;
  --kt-cream:    #faf0dc;   /* the logo's own field                      */
  --kt-brown:    #3a2e24;   /* the panda's ink                           */
  --kt-paper:    #ffffff;
  --kt-paper-2:  #f6f8fb;
  --kt-line:     #dce3ec;
  --kt-text:     #1e293b;
  --kt-muted:    #64748b;
  --kt-gold:     #f4b942;
  --kt-green:    #34d399;
}

/* Colour on paper is the whole design. Without `print-color-adjust` Chrome
   drops every background unless the reader thinks to tick a checkbox, and a
   navy business card prints as a white one. */
html, body {
  margin: 0;
  padding: 0;
  background: #e7ebf1;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--kt-text);
}
*, *::before, *::after { box-sizing: border-box; }

/* ── 1. The on-screen toolbar (never printed) ──────────────────────── */
.kt-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  background: var(--kt-ink);
  color: #cbd5e1;
  font-size: .82rem;
  box-shadow: 0 2px 18px rgba(11,18,32,.25);
}
.kt-bar a, .kt-bar button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .8rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: #e2e8f0;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.kt-bar a:hover, .kt-bar button:hover { background: rgba(255,255,255,.12); }
.kt-bar .kt-bar__go {
  background: var(--kt-sky);
  border-color: var(--kt-sky);
  color: #06121f;
  font-weight: 700;
}
.kt-bar .kt-bar__go:hover { background: #7dd3fc; }
.kt-bar__on { background: rgba(56,189,248,.18); border-color: rgba(56,189,248,.5); color: #bae6fd; }
.kt-bar__hint { color: #64748b; margin-left: auto; font-size: .76rem; }
/* On a phone the hint is longer than the bar and pushes the page sideways;
   the same words are repeated in the note above the sheet. */
@media (max-width: 760px) { .kt-bar__hint { display: none; } }
.kt-bar__title { font-family: 'Syne', sans-serif; font-weight: 700; color: #f8fafc; margin-right: .4rem; }

/* ── 2. The stage — how paper looks on a screen ────────────────────── */
.kt-stage { padding: 1.6rem 1rem 3rem; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
/* Millimetre widths cannot reflow, so the stage clips rather than letting a
   sheet drag the whole page sideways on a phone. */
body { overflow-x: hidden; }
.kt-stage__note {
  max-width: min(190mm, 100%);
  font-size: .82rem;
  color: #475569;
  background: #fff;
  border: 1px solid var(--kt-line);
  border-left: 3px solid var(--kt-sky);
  border-radius: 8px;
  padding: .7rem .9rem;
  line-height: 1.55;
}

/* One sheet of paper. On screen it floats; on paper it is the paper. */
.kt-page {
  width: 210mm;
  min-height: 297mm;
  background: var(--kt-paper);
  box-shadow: 0 10px 40px rgba(11,18,32,.18);
  position: relative;
  overflow: hidden;
}
/* Fixed millimetre widths do not fit a phone. `zoom` shrinks the whole sheet
   and, unlike `transform: scale`, leaves the layout box the right size, so the
   page below it does not float in a hole. Print resets it. */
@media (max-width: 900px) { .kt-page { zoom: .78; } }
@media (max-width: 720px) { .kt-page { zoom: .62; } }
@media (max-width: 560px) { .kt-page { zoom: .46; } }
@media (max-width: 420px) { .kt-page { zoom: .38; } }
/* The card pair is the exception: a 90mm card is only 340px, so on a phone it
   should wrap under its own back at full size rather than shrink to a stamp. */
@media (max-width: 400px) { .kt-cardpair { zoom: .9; } }

/* Bare mode (`?bare=1`): no toolbar, no grey stage, no note — the piece alone,
   for embedding as a live preview on the About page. It is a preview of the
   real page, so it can never go stale the way a screenshot would. */
body.kt-bare { background: transparent; }
body.kt-bare .kt-stage { padding: 0; gap: 0; }
body.kt-bare .kt-page, body.kt-bare .kt-sheet, body.kt-bare .kt-card { box-shadow: none; }
body.kt-bare .kt-cardwrap__label { display: none; }
body.kt-bare .kt-cardwrap { gap: 0; }

/* ── 3. Shared brand furniture ─────────────────────────────────────── */
.kt-navy {
  background:
    radial-gradient(ellipse 70% 90% at 88% 0%, rgba(56,189,248,.28), transparent 62%),
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(56,189,248,.10), transparent 60%),
    linear-gradient(140deg, var(--kt-ink) 0%, var(--kt-ink-2) 100%);
  color: #f8fafc;
}
/* The mark: the panda always sits on its own cream disc, never on navy. */
.kt-mark {
  border-radius: 50%;
  background: var(--kt-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}
.kt-mark img { width: 118%; height: 118%; object-fit: cover; }

.kt-wordmark {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}
.kt-wordmark em { font-style: normal; color: var(--kt-sky); }

.kt-url { font-weight: 700; letter-spacing: .02em; }

/* A QR is only a QR if the quiet zone survives. The white tile IS the quiet
   zone: never tint it, never round it past 2mm, never put a logo on it. */
.kt-qr { background: #fff; border-radius: 2mm; padding: 1.4mm; flex: none; }
.kt-qr img { display: block; width: 100%; height: 100%; }

.kt-eyebrow {
  font-size: 2.5mm;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--kt-sky-deep);
}
.kt-rule { height: 1mm; width: 14mm; border-radius: 99px; background: var(--kt-sky); margin: 2mm 0 2.5mm; }

/* ══════════════════════════════════════════════════════════════════
   4. THE BUSINESS CARD — 90 × 50 mm
   ══════════════════════════════════════════════════════════════════ */
.kt-cardpair { display: flex; flex-wrap: wrap; gap: 8mm; justify-content: center; }
.kt-cardwrap { display: flex; flex-direction: column; align-items: center; gap: 2mm; }
.kt-cardwrap__label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #64748b; }

.kt-card {
  width: 90mm;
  height: 50mm;
  position: relative;
  overflow: hidden;
  display: flex;
  box-shadow: 0 6px 22px rgba(11,18,32,.22);
}
/* On the cut sheet the shadow becomes a hairline the scissors follow. */
.kt-sheet .kt-card { box-shadow: none; outline: .2mm dashed #c7d2de; outline-offset: 0; }

/* — front — */
.kt-card--front { padding: 5mm 5.5mm; gap: 4mm; align-items: center; }
.kt-card__left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1.6mm; }
.kt-card__brandrow { display: flex; align-items: center; gap: 3mm; }
.kt-card--front .kt-mark { width: 13mm; height: 13mm; }
/* Sized against the space that is left: 90mm of card, minus the 11mm of
   padding, the 23mm QR, the 13mm mark and the gaps, is 36mm — and
   "Prime Point" in Syne at 5.4mm is 33mm. Any bigger and it slides under
   the QR, which `nowrap` would let it do silently. */
.kt-card__name { font-size: 5.4mm; white-space: nowrap; }
/* Sized to the longest slogan we print — «Kuchli fikrlar chegaralarni
   kengaytiradi» is 41 characters and the left column is only 48.9mm wide.
   `nowrap` keeps it one line, so a bigger size does not wrap, it overflows
   silently across the QR. Measure before changing this. */
.kt-card__slogan {
  font-size: 2.5mm;
  white-space: nowrap;
  font-style: italic;
  color: #7dd3fc;
  letter-spacing: .01em;
}
.kt-card__role {
  font-size: 2.6mm;
  color: #94a3b8;
  line-height: 1.35;
  max-width: 46mm;
  margin-top: .6mm;
}
.kt-card__urlrow { display: flex; align-items: center; gap: 2mm; margin-top: auto; }
.kt-card__urlrow .kt-url { font-size: 4mm; color: #f8fafc; }
.kt-card__right { display: flex; flex-direction: column; align-items: center; gap: 1.4mm; flex: none; }
.kt-card--front .kt-qr { width: 23mm; height: 23mm; }
.kt-card__scan { font-size: 2.4mm; font-weight: 700; color: #f8fafc; letter-spacing: .04em; text-align: center; }
.kt-card__scan span { display: block; font-weight: 400; color: #94a3b8; font-size: 2.1mm; max-width: 26mm; line-height: 1.3; }

/* The arrows from the logo, redrawn as a watermark that bleeds off the edge.
   Decoration only — it must never sit under the QR or under text. */
.kt-card__arc {
  position: absolute;
  right: -14mm;
  bottom: -20mm;
  width: 52mm;
  height: 52mm;
  border: .8mm solid rgba(56,189,248,.14);
  border-radius: 50%;
  pointer-events: none;
}
.kt-card__arc--2 { right: -22mm; bottom: -28mm; width: 66mm; height: 66mm; border-color: rgba(56,189,248,.08); }

/* — back — */
.kt-card--back {
  flex-direction: column;
  background: var(--kt-paper);
  padding: 4mm 5.5mm 0;
  color: var(--kt-text);
}
.kt-card__title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 4.1mm;
  line-height: 1.15;
  margin: 0 0 1.2mm;
  color: var(--kt-ink);
}
.kt-card__lead { font-size: 2.45mm; line-height: 1.45; color: var(--kt-muted); margin: 0 0 1.6mm; }
.kt-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9mm; }
.kt-card__list li {
  font-size: 2.45mm;
  line-height: 1.35;
  padding-left: 4.2mm;
  position: relative;
  color: #334155;
}
.kt-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1mm;
  width: 2.4mm;
  height: 1.3mm;
  border-left: .55mm solid var(--kt-sky-deep);
  border-bottom: .55mm solid var(--kt-sky-deep);
  transform: rotate(-45deg);
}
.kt-card__foot {
  margin: auto -5.5mm 0;
  padding: 2.1mm 5.5mm;
  background: var(--kt-ink);
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 3mm;
  font-size: 2.35mm;
}
.kt-card__foot b { color: #f8fafc; font-weight: 700; }
.kt-card__foot span { display: inline-flex; align-items: center; gap: 1.1mm; white-space: nowrap; }
.kt-card__foot .kt-dot { width: .9mm; height: .9mm; border-radius: 50%; background: var(--kt-sky); flex: none; }
.kt-card__stats { display: flex; gap: 3.4mm; margin: 1.8mm 0 1.4mm; }
.kt-card__stat { line-height: 1; }
.kt-card__stat b {
  font-family: 'Syne', sans-serif;
  font-size: 4mm;
  color: var(--kt-sky-deep);
  display: block;
  margin-bottom: .6mm;
}
.kt-card__stat span { font-size: 2.1mm; color: var(--kt-muted); }

/* — the 10-up A4 cut sheet — */
.kt-sheet {
  width: 210mm;
  height: 297mm;
  padding: 23.5mm 15mm;
  background: #fff;
  box-shadow: 0 10px 40px rgba(11,18,32,.18);
}
.kt-sheet__grid { display: grid; grid-template-columns: 90mm 90mm; grid-auto-rows: 50mm; }
.kt-sheet__foot {
  position: absolute;
  bottom: 8mm;
  left: 15mm;
  right: 15mm;
  font-size: 2.4mm;
  color: #94a3b8;
  display: flex;
  justify-content: space-between;
}

/* ══════════════════════════════════════════════════════════════════
   5. THE FLYER — A4, two sides
   ══════════════════════════════════════════════════════════════════ */
.kt-flyer { display: flex; flex-direction: column; min-height: 297mm; }
/* The closing navy block is pushed to the foot of page two, so the page
   ends on a colour whatever the length of the sections above it. */
.kt-close { margin-top: auto; }

/* — hero — */
.kt-hero { padding: 11mm 15mm 10mm; position: relative; overflow: hidden; }
.kt-hero__top { display: flex; align-items: center; gap: 4mm; margin-bottom: 7mm; }
.kt-hero .kt-mark { width: 17mm; height: 17mm; }
.kt-hero__brand { flex: 1 1 auto; }
.kt-hero__brand .kt-wordmark { font-size: 8mm; }
.kt-hero__brand p { margin: 1mm 0 0; font-size: 3mm; color: #94a3b8; font-style: italic; }
.kt-hero__site { text-align: right; flex: none; }
.kt-hero__site .kt-url { font-size: 4.4mm; color: #f8fafc; display: block; }
.kt-hero__site span:not(.kt-url) { font-size: 2.6mm; color: #7dd3fc; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.kt-hero__eyebrow {
  font-size: 3mm;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #7dd3fc;
  margin-bottom: 3mm;
}
.kt-hero h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 12.6mm;
  line-height: 1.05;
  letter-spacing: -.025em;
  margin: 0 0 4mm;
  color: #fff;
}
.kt-hero__lead { font-size: 3.35mm; line-height: 1.55; color: #cbd5e1; max-width: 150mm; margin: 0; }
.kt-hero__lead strong { color: #fff; }
.kt-hero__arc {
  position: absolute;
  right: -40mm;
  top: -30mm;
  width: 130mm;
  height: 130mm;
  border: 1mm solid rgba(56,189,248,.13);
  border-radius: 50%;
  pointer-events: none;
}
.kt-hero__arc--2 { right: -60mm; top: -50mm; width: 170mm; height: 170mm; border-color: rgba(56,189,248,.07); }

/* — the numbers band — */
.kt-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--kt-sky);
  color: #06121f;
}
.kt-stats__cell { padding: 4mm 3mm; text-align: center; border-right: .3mm solid rgba(6,18,31,.14); }
.kt-stats__cell:last-child { border-right: 0; }
.kt-stats__num { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 7.4mm; line-height: 1; }
.kt-stats__lbl { font-size: 2.6mm; text-transform: uppercase; letter-spacing: .1em; margin-top: 1.4mm; opacity: .78; }
.kt-stats__note { font-size: 2.5mm; color: var(--kt-muted); text-align: center; padding: 1.6mm 0 0; }

/* — body sections — */
.kt-sec { padding: 7mm 15mm 0; }
.kt-sec__head { margin-bottom: 4mm; }
.kt-sec h2 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 6.4mm;
  line-height: 1.15;
  margin: 1.5mm 0 1.5mm;
  color: var(--kt-ink);
}
.kt-sec__sub { font-size: 3.1mm; color: var(--kt-muted); margin: 0; line-height: 1.5; }

/* the six courses */
.kt-courses { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6mm; }
.kt-course {
  border: .3mm solid var(--kt-line);
  border-left: 1.4mm solid var(--kt-sky);
  border-radius: 2mm;
  padding: 2.8mm 4mm;
  background: var(--kt-paper-2);
}
.kt-course b { font-family: 'Syne', sans-serif; font-size: 3.6mm; color: var(--kt-ink); display: block; }
.kt-course span { font-size: 2.8mm; color: var(--kt-muted); line-height: 1.4; display: block; margin-top: .8mm; }

/* the exam tracks */
.kt-tracks { display: flex; gap: 3mm; }
.kt-track {
  flex: 1;
  border: .3mm solid var(--kt-line);
  border-radius: 2mm;
  padding: 3mm 4mm;
  text-align: center;
  background: #fff;
}
.kt-track b { font-family: 'Syne', sans-serif; font-size: 4.4mm; color: var(--kt-ink); display: block; }
.kt-track span { font-size: 2.6mm; color: var(--kt-muted); }

/* the scan panel that closes page one */
.kt-scan {
  margin: 7mm 15mm 10mm;
  border-radius: 3mm;
  padding: 5.5mm 7mm;
  display: flex;
  align-items: center;
  gap: 6mm;
}
.kt-scan .kt-qr { width: 31mm; height: 31mm; }
.kt-scan__text { flex: 1 1 auto; }
.kt-scan__text b { font-family: 'Syne', sans-serif; font-size: 5.2mm; color: #fff; display: block; margin-bottom: 2mm; }
.kt-scan__text p { margin: 0 0 2.5mm; font-size: 3mm; color: #cbd5e1; line-height: 1.5; max-width: 105mm; }
.kt-scan__url { font-family: 'Syne', sans-serif; font-size: 6mm; color: var(--kt-sky); letter-spacing: .01em; }

/* — page two: what the centre gets — */
.kt-gets { display: grid; grid-template-columns: 1fr 1fr; gap: 3.4mm; }
.kt-get {
  border: .3mm solid var(--kt-line);
  border-radius: 2mm;
  padding: 3.1mm 4mm;
  background: #fff;
}
.kt-get b { font-family: 'Syne', sans-serif; font-size: 3.5mm; color: var(--kt-ink); display: flex; align-items: center; gap: 2mm; }
.kt-get b::before {
  content: '';
  width: 2.6mm;
  height: 2.6mm;
  border-radius: .6mm;
  background: var(--kt-sky);
  flex: none;
}
.kt-get span { font-size: 2.8mm; color: var(--kt-muted); line-height: 1.45; display: block; margin-top: 1.2mm; }

/* the three steps */
.kt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.4mm; counter-reset: kt-step; }
.kt-step { position: relative; padding: 3.6mm 4mm; border-radius: 2mm; background: var(--kt-paper-2); border: .3mm solid var(--kt-line); }
.kt-step__n {
  counter-increment: kt-step;
  font-family: 'Syne', sans-serif;
  font-size: 7mm;
  line-height: 1;
  color: var(--kt-sky);
  margin-bottom: 1.6mm;
}
.kt-step__n::before { content: counter(kt-step); }
.kt-step b { font-size: 3.2mm; color: var(--kt-ink); display: block; margin-bottom: 1mm; }
.kt-step span { font-size: 2.7mm; color: var(--kt-muted); line-height: 1.45; }

/* the "why free" note */
.kt-why {
  margin-top: 6mm;
  border-left: 1.4mm solid var(--kt-gold);
  background: #fffaf0;
  border-radius: 0 2mm 2mm 0;
  padding: 3.5mm 5mm;
}
.kt-why b { font-family: 'Syne', sans-serif; font-size: 3.8mm; color: var(--kt-ink); display: block; margin-bottom: 1.4mm; }
.kt-why p { margin: 0; font-size: 2.9mm; line-height: 1.55; color: #6b5a3a; }

/* the three questions a director asks — where the partner wall used to be */
.kt-faq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.4mm; }
.kt-q {
  border-top: .8mm solid var(--kt-sky);
  background: var(--kt-paper-2);
  border-radius: 0 0 2mm 2mm;
  padding: 3.2mm 4mm 3.6mm;
}
.kt-q b {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 3.1mm;
  line-height: 1.25;
  color: var(--kt-ink);
  margin-bottom: 1.4mm;
}
.kt-q span { font-size: 2.75mm; color: var(--kt-muted); line-height: 1.45; }

/* the contact foot of page two */
.kt-contact { padding: 6mm 15mm 5mm; display: flex; gap: 7mm; align-items: center; }
.kt-contact__text { flex: 1 1 auto; }
.kt-contact__text b { font-family: 'Syne', sans-serif; font-size: 5.4mm; color: #fff; display: block; margin-bottom: 1.8mm; }
.kt-contact__text p { margin: 0 0 3.5mm; font-size: 2.9mm; color: #cbd5e1; line-height: 1.5; max-width: 100mm; }
.kt-lines { display: flex; flex-wrap: wrap; gap: 2mm 5mm; }
.kt-line { display: flex; align-items: center; gap: 1.8mm; font-size: 3mm; color: #e2e8f0; }
.kt-line i { color: var(--kt-sky); font-size: 3.4mm; }
.kt-contact__qrs { display: flex; gap: 3mm; flex: none; }
.kt-contact__qr { text-align: center; }
.kt-contact__qr .kt-qr { width: 26mm; height: 26mm; margin-bottom: 1.4mm; }
.kt-contact__qr span { font-size: 2.3mm; color: #94a3b8; display: block; max-width: 26mm; line-height: 1.3; }

.kt-foot {
  padding: 2.6mm 15mm;
  background: rgba(0,0,0,.25);
  font-size: 2.4mm;
  color: #94a3b8;
  display: flex;
  justify-content: space-between;
  letter-spacing: .04em;
}

/* ── 6. Paper ──────────────────────────────────────────────────────
   Margin 0 everywhere: every piece paints its own edge-to-edge navy, and a
   browser margin would print a white frame around it. The reader must pick
   "Margins: None" in the dialog — the toolbar says so. */
@page { size: A4; margin: 0; }

@media print {
  html, body { background: #fff; }
  .kt-noprint { display: none !important; }
  .kt-stage { padding: 0; gap: 0; display: block; }
  .kt-page, .kt-cardpair { zoom: 1; }
  .kt-page, .kt-sheet {
    box-shadow: none;
    margin: 0;
    width: 210mm;
    height: 297mm;
    break-after: page;
  }
  .kt-page:last-child, .kt-sheet:last-child { break-after: auto; }
  .kt-card { box-shadow: none; }
  .kt-sheet .kt-card { outline-color: #d7dee7; }
  /* The single-card page prints the pair on one sheet, centred, with the
     labels gone — a proof, not the production sheet. */
  .kt-cardpair { gap: 10mm; padding: 30mm 0; }
  .kt-cardwrap__label { display: none; }
  .kt-cardpair .kt-card { outline: .2mm dashed #c7d2de; }
}