/* ===== Shared design tokens for all mocks. Source of truth: samples/*.pdf ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,500;0,700;0,900;1,300&family=Source+Code+Pro:wght@400;600&family=Rubik:wght@400;500&family=STIX+Two+Text:ital,wght@0,400;0,700;1,400&family=Caveat:wght@400;600&display=swap');

/* New York (Apple), optical sizes: Small ≤19pt, Medium 20–35pt (title 30pt), Large 36–53pt. Files provided by the customer. */
@font-face{font-family:"New York";src:url("fonts/NewYorkMedium-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"New York Small";src:url("fonts/NewYorkSmall-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"New York Large";src:url("fonts/NewYorkLarge-Regular.otf") format("opentype");font-weight:400;font-display:swap}

:root{
  /* fonts (exactly as in the PDFs) */
  --font-serif:"New York", ui-serif, "Playfair Display", "Times New Roman", serif; /* test title, 30pt */
  --font-sans:"Montserrat", -apple-system, "Helvetica Neue", sans-serif;           /* body, Light 300, 12pt */
  --font-mono:"Source Code Pro", ui-monospace, Menlo, monospace;                    /* code, 10pt */
  --font-math:"STIX Two Text", "STIX Two Math", "Times New Roman", serif;           /* formulas, italic vars */
  --font-num:"Rubik", var(--font-sans);                                             /* task numbers "1." */
  --font-pen:"Caveat", "Segoe Print", cursive;                                       /* red pen marks of the teacher */

  /* ink & paper */
  --ink:#1a1a1a; --ink-2:#4a4a4a; --ink-3:#8a8a8a; --ink-4:#b5b5b5;
  --line:#d4d4d4; --line-2:#e9e9e9;
  --paper:#ffffff; --paper-2:#f5f5f5; --paper-3:#fafafa;

  /* brand (T-Bank) */
  --yellow:#ffdd2d; --yellow-2:#fcc521; --yellow-ink:#333;

  /* semantic */
  --red:#e5312b;    /* red pen: teacher marks, missing pages */
  --green:#2e9e5b;  /* done / uploaded */
  --blue:#428bf9;   /* links, active selection in graphs */
  --focus:#428bf9;

  /* code syntax (as rendered in the PDFs) */
  --code-bg:#f7f7f7; --code-border:#1a1a1a; --code-ln:#a0a0a0;
  --code-kw:#a626a4; --code-type:#a626a4; --code-num:#986801; --code-str:#50a14f; --code-fn:#4078f2; --code-id:#e06c75; --code-op:#0184bc; --code-comment:#a0a1a7;

  /* sheet metrics: 1pt in PDF = 1.333px here; A4 = 595pt x 842pt */
  --sheet-w:794px;        /* 595pt */
  --sheet-pad:83px;       /* ~62pt left margin in the PDF */
  --sheet-body:16px;      /* 12pt */
  --sheet-code:13.3px;    /* 10pt */
  --sheet-title:40px;     /* 30pt */

  --radius:10px; --radius-s:6px;
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-weight:300;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* ---------- app chrome (student, phone-first) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 20px;border-radius:12px;border:0;background:var(--yellow);color:var(--yellow-ink);font-weight:500;font-size:16px;cursor:pointer;width:100%}
.btn:active{background:var(--yellow-2)}
.btn--ghost{background:var(--paper-2);color:var(--ink)}
.btn--danger{background:var(--red);color:#fff}
.btn--sm{height:40px;font-size:14px;width:auto;padding:0 14px}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:var(--paper-2);font-size:13px;font-weight:500}
.chip--green{background:#e6f5ec;color:var(--green)}
.chip--red{background:#fdeceb;color:var(--red)}
.chip--yellow{background:#fff6c2;color:#7a6200}
.card{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius);padding:16px}

/* ---------- the sheet: typography identical to the PDF ---------- */
.sheet{font-family:var(--font-sans);font-weight:300;font-size:var(--sheet-body);line-height:1.5;color:var(--ink)}
.sheet .title{font-family:var(--font-serif);font-weight:400;font-size:var(--sheet-title);line-height:1.15;margin:0}
.sheet .label{font-style:italic;font-size:21px;color:var(--ink-2);margin:0 0 8px} /* "Имя Фамилия" 16pt LightItalic */
.sheet .field{border:1px solid var(--line);height:74px}
.sheet .task{display:grid;grid-template-columns:28px 1fr;gap:0 4px;margin:0 0 20px}
.sheet .task > .n{font-family:var(--font-num);font-weight:400}
.sheet .pts{text-decoration:underline;color:var(--ink-2)}
.sheet .m{font-family:var(--font-math)} .sheet .m i{font-style:italic}
.sheet code{font-family:var(--font-mono);font-size:.92em}
.sheet .code{font-family:var(--font-mono);font-size:var(--sheet-code);line-height:1.45;background:var(--code-bg);border:1px solid var(--code-border);padding:10px 12px;white-space:pre;overflow-x:auto;margin:8px 0 12px}
.sheet .code .ln{display:inline-block;width:2.2em;color:var(--code-ln);text-align:right;margin-right:1em;user-select:none}
.sheet .code .kw{color:var(--code-kw)} .sheet .code .ty{color:var(--code-type)} .sheet .code .nu{color:var(--code-num)} .sheet .code .st{color:var(--code-str)} .sheet .code .fn{color:var(--code-fn)} .sheet .code .id{color:var(--code-id)} .sheet .code .op{color:var(--code-op)} .sheet .code .cm{color:var(--code-comment);font-style:italic}
.sheet .cb{display:flex;gap:14px;align-items:flex-start;margin:8px 0}
.sheet .cb .box{flex:none;width:13px;height:13px;border:1px solid var(--ink-2);margin-top:5px}
.sheet .ans{border:1px solid var(--line);min-height:56px}
.sheet .grid{display:grid;border:1px solid var(--line)} .sheet .grid > *{border:1px solid var(--line);min-height:44px}
/* score tables on page 1.
   Tasks: rows of 6 (headers row, then values row, repeat). Last row padded with .blank cells.
   Totals: a separate mini table below with Σ / Жюри № / Оценка.
   <div class="scores">  <div class="h">1</div>…<div class="h">6</div> <div class="val"></div>×6 … </div>
   <div class="scores scores--total"> <div class="h">Σ</div><div class="h">Жюри №</div><div class="h">Оценка</div> <div class="val"></div>×3 </div> */
.sheet .scores{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);font-size:26px;margin:0 0 16px}
.sheet .scores > *{border:0 solid var(--line);border-width:0 1px 1px 0;height:60px;display:flex;align-items:center;justify-content:center;min-width:0;white-space:nowrap}
.sheet .scores .val{background:var(--paper-2)}
.sheet .scores .blank{border-color:transparent;background:none}
.sheet .scores .sig{font-family:var(--font-math);font-size:1.15em}
.sheet .scores--total{grid-template-columns:1fr 1.6fr 1.6fr;width:70%;margin:0}
.sheet .scores--total .h{font-size:22px}

/* phone: the 30pt title does not fit 350px, scale the cover typography down */
@media (max-width:859px){
  .sheet .title{font-size:30px}
  .sheet .label{font-size:17px}
}