/* Poruchai: one small stylesheet, no framework.
   Restrained on purpose: warm surfaces, one accent, thin borders; depth only through the
   --shadow-* tokens and motion only as short colour changes (see the end of the sheet). */

/* Our own fonts, served from /static/fonts (docs/design.md); the system fonts stay as fallbacks. */

@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text.d6ace84be244.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Literata";
  src: url("../fonts/literata.088fbd69605a.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --bg: #faf9f5;
  --surface: #ffffff;
  --surface-muted: #f3f1ea;
  --border: #e6e3d8;
  --border-strong: #8f8b80;
  --text: #141413;
  --text-muted: #5e5d59;
  --text-faint: #6e6c66;

  --accent: #b4532f;
  --accent-hover: #9a4525;
  --accent-text: #ffffff;
  --accent-weak: #f8e9e2;
  --focus: #b4532f;

  --info-bg: #f8e9e2;
  --info-text: #8f3d1d;
  --success-bg: #ecf7ef;
  --success-text: #1d6b37;
  --danger: #b42318;
  --danger-hover: #9a1f15;
  --danger-contrast: #ffffff;
  --danger-bg: #fdf0ef;
  --danger-text: #9a1f15;
  --warning-bg: #fdf6e7;
  --warning-text: #7a4b07;

  /* Category tones: a strong colour, a mid tint for art, a soft background and its text. */
  --clay: #c96442;
  --clay-mid: #e9b8a3;
  --clay-weak: #f8e9e2;
  --clay-text: #8f3d1d;
  --olive: #788c5d;
  --olive-mid: #c9d4b0;
  --olive-weak: #eef1e4;
  --olive-text: #4b5a30;
  --sky: #6a9bcc;
  --sky-mid: #b4cfe6;
  --sky-weak: #e6eff7;
  --sky-text: #2f5d86;

  /* Depth: warm and soft, used for menus, hovered cards and the stuck header. */
  --shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.06), 0 1px 1px rgba(60, 40, 20, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(60, 40, 20, 0.16), 0 2px 6px rgba(60, 40, 20, 0.06);

  /* Spacing scale (4px steps) and type scale; `--space-section` is the gap between page bands. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-section: 72px;

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-display: clamp(2rem, 1.35rem + 2.2vw, 3rem);

  --radius-small: 6px;
  --radius: 10px;
  --radius-large: 16px;
  --container: 1120px;
  --font:
    "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-serif: "Literata", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1f1e1d;
    --surface: #292826;
    --surface-muted: #302f2c;
    --border: #3d3b37;
    --border-strong: #7a776e;
    --text: #f5f4ef;
    --text-muted: #b0aea5;
    --text-faint: #9a978f;

    --accent: #e0906f;
    --accent-hover: #eaa588;
    --accent-text: #1f1e1d;
    --accent-weak: #3a2a24;
    --focus: #eaa588;

    --info-bg: #3a2a24;
    --info-text: #f0b79e;
    --success-bg: #1d3325;
    --success-text: #9dd8ae;
    --danger: #f28b82;
    --danger-hover: #f6a9a2;
    --danger-contrast: #1f1e1d;
    --danger-bg: #3a2220;
    --danger-text: #f6b3ad;
    --warning-bg: #3a2f1a;
    --warning-text: #eac983;

    --clay: #d97757;
    --clay-mid: #8a4a35;
    --clay-weak: #3a2a24;
    --clay-text: #f0b79e;
    --olive: #9bb27a;
    --olive-mid: #5a6b43;
    --olive-weak: #2b3123;
    --olive-text: #c3d4a3;
    --sky: #7fb0e0;
    --sky-mid: #46647f;
    --sky-weak: #22303d;
    --sky-text: #a9cbea;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 28px -8px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
  }
}

/* A tone is picked by data-tone on any element; its children read the --tone tokens. */

[data-tone="clay"] {
  --tone: var(--clay);
  --tone-mid: var(--clay-mid);
  --tone-weak: var(--clay-weak);
  --tone-text: var(--clay-text);
}

[data-tone="olive"] {
  --tone: var(--olive);
  --tone-mid: var(--olive-mid);
  --tone-weak: var(--olive-weak);
  --tone-text: var(--olive-text);
}

[data-tone="sky"] {
  --tone: var(--sky);
  --tone-mid: var(--sky-mid);
  --tone-weak: var(--sky-weak);
  --tone-text: var(--sky-text);
}

/* Base */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 19px;
}

p,
ul,
ol,
dl {
  margin: 0 0 16px;
}

ul,
ol {
  padding-left: 22px;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 20;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
}

.skip-link:focus {
  top: 12px;
}

small {
  font-size: 14px;
}

code {
  font-family: var(--mono);
  font-size: 0.9em;
}

/* Layout */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

main {
  flex: 1;
}

main.container {
  padding-top: 40px; /* `.container` alone would reset the vertical padding */
  padding-bottom: 64px;
}

main.narrow {
  max-width: 440px;
}

main.prose {
  max-width: 720px;
}

.page-head {
  margin-bottom: 28px;
}

.page-head h1 {
  margin-bottom: 6px;
}

.meta,
.page-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
}

.back {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 14px;
}

.lead {
  max-width: 60ch;
  color: var(--text-muted);
  font-size: 17px;
}

.muted {
  color: var(--text-muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.below {
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 15px;
  text-align: center;
}

/* Header */

html {
  scroll-padding-top: 80px; /* an anchor must not end up under the sticky header */
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px var(--space-5);
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  flex: none;
}

.mark-box {
  fill: var(--accent);
}

.mark-dot {
  fill: var(--bg);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-self: stretch;
  gap: 0 var(--space-5);
  margin-left: auto;
  font-size: 15px;
}

.site-nav > a:not(.button),
.site-nav > .menu {
  display: inline-flex;
  align-items: center;
}

/* The current page is marked by a rule under its link, laid over the header's own border. */
.site-nav > a:not(.button) {
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
}

.site-nav > a:not(.button):hover,
.site-nav > a[aria-current] {
  color: var(--text);
  text-decoration: none;
}

.site-nav > a[aria-current] {
  border-bottom-color: var(--accent);
  font-weight: 500;
}

.site-nav > .button {
  align-self: center;
}

/* Account menu: <details> keeps it working without JavaScript. */

.menu {
  position: relative;
}

.menu > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.menu > summary:hover .avatar,
.menu[open] .avatar {
  border-color: var(--accent);
  background: var(--accent-weak);
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.menu > summary:hover,
.menu[open] > summary {
  color: var(--text);
}

.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 10;
  min-width: 240px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.menu-panel p {
  margin: 0;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.menu-panel a,
.menu-panel button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.menu-panel a:hover,
.menu-panel button:hover {
  background: var(--surface-muted);
  text-decoration: none;
}

.menu-panel form {
  margin: 0;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 14px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-6);
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
}

.footer-grid p,
.footer-grid ul {
  margin: 0;
}

.footer-grid ul {
  padding: 0;
  list-style: none;
}

/* The title and the brand sit on the same baseline of the columns; the links are evenly spaced. */
.footer-grid .footer-brand,
.footer-grid .footer-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin-bottom: var(--space-3);
  color: var(--text);
  font-weight: 600;
}

.footer-grid .footer-title {
  font-size: 13px;
  letter-spacing: 0.02em;
}

.footer-brand {
  font-family: var(--font-serif);
  font-size: 18px;
}

.footer-grid li a {
  display: inline-block;
  padding: 3px 0;
}

.footer-about {
  max-width: 36ch;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-4);
  padding-bottom: var(--space-5);
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 13px;
}

.footer-bottom p {
  margin: 0;
}

.site-footer a {
  color: var(--text-muted);
}

.site-footer a:hover {
  color: var(--text);
}

/* Buttons. The empty-state link is a button too. */

button,
.button,
.empty a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}

button:hover,
.button:hover,
.empty a:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  text-decoration: none;
}

.button-secondary {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text);
}

.button-secondary:hover {
  border-color: var(--text-faint);
  background: var(--surface-muted);
}

.button-danger {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--danger-contrast);
}

.button-danger:hover {
  border-color: var(--danger-hover);
  background: var(--danger-hover);
}

.button-small {
  min-height: 36px;
  padding: 4px 14px;
  font-size: 14px;
}

/* Cards */

.card {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
}

.card + .card {
  margin-top: 16px;
}

.card > :last-child:last-child {
  margin-bottom: 0; /* doubled to beat the notice margins below */
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
  gap: 16px;
}

.cards .card {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.catalogue-section + .catalogue-section {
  margin-top: 40px;
}

.section-lead {
  max-width: 60ch;
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 15px;
}

.cards .card p {
  color: var(--text-muted);
  font-size: 15px;
}

/* Catalogue: filter chips, category bands and task cards. A data-tone ancestor colours them. */

.page-head-split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
}

.page-head-split > div > :last-child {
  margin-bottom: 0;
}

.quota {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 14px;
  white-space: nowrap;
}

.page-head .quota {
  color: var(--text-muted);
  font-size: 14px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
}

.chip[data-tone]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tone);
}

.chip:hover {
  border-color: var(--text);
  text-decoration: none;
}

.chip[aria-current="page"] {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}

.chip-count {
  color: var(--text-faint);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.chip[aria-current="page"] .chip-count {
  color: var(--bg);
  opacity: 0.8;
}

.category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  padding: 24px 28px;
  border-radius: var(--radius-large);
  background: var(--tone-weak);
}

.category-head h2 {
  margin-bottom: 6px;
  color: var(--tone-text);
}

.category-head .section-lead {
  margin: 0;
  color: var(--tone-text);
}

.art {
  flex: none;
  width: 180px;
  height: 90px;
}

.art .s {
  fill: var(--tone);
}

.art .m {
  fill: var(--tone-mid);
}

.art .o {
  fill: none;
  stroke: var(--tone);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.task-card {
  position: relative;
}

/* The category's colour is a dot before the title: a coloured edge on top read as a tab. */
.task-card h3::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--tone, var(--border-strong));
  vertical-align: 2px;
}

.task-card:has(a):hover {
  border-color: var(--tone);
  box-shadow: var(--shadow-md);
}

.task-card h3 a {
  color: var(--text);
}

.task-card h3 a:hover {
  text-decoration: none;
}

.task-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.task-card:has(a:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.task-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: auto 0 0;
  padding-top: 8px;
}

.tag {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--tone-weak);
  color: var(--tone-text);
  font-size: 13px;
}

.task-go {
  margin-left: auto;
  color: var(--accent);
  font-size: 15px;
  font-weight: 500;
}

.section-title {
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Forms: Django's as_div renders label, field, .helptext and .errorlist per field. */

form > div,
form > fieldset > div {
  margin-bottom: 20px;
}

fieldset {
  min-width: 0;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
}

/* A floated legend is a plain block: a legend left in place sits on the fieldset's top border
   and the rule between the steps would strike through its title. */
.application-form > fieldset > legend {
  float: left;
  width: 100%;
  margin-bottom: 14px;
  font-family: var(--font-serif);
  font-size: 20px;
}

.application-form > fieldset > legend + * {
  clear: both;
}

/* The three steps of the form are separated, and the final action is the biggest control. */
.application-form > fieldset + fieldset {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.application-form > button[type="submit"] {
  min-height: 52px;
  margin-top: var(--space-3);
  padding: 12px 28px;
  font-size: var(--text-base);
}

.parts-field fieldset > legend {
  position: absolute; /* the step «3. Что подготовить» already names this group */
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
}

input:not([type="checkbox"], [type="radio"], [type="hidden"]),
textarea,
select {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}

textarea {
  resize: vertical;
}

input[type="file"] {
  padding: 6px;
  font-size: 15px;
}

input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  border-color: var(--text-faint);
}

input:not([type="checkbox"], [type="radio"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--focus);
  outline-offset: 0;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  flex: none;
}

form > div:has(> input[type="checkbox"]),
form > fieldset > div:has(> input[type="checkbox"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 10px;
}

form > div:has(> input[type="checkbox"]) > label,
form > fieldset > div:has(> input[type="checkbox"]) > label {
  order: 2;
  flex: 1;
  margin: 0;
  font-weight: 400;
  font-size: 15px;
}

form > div:has(> input[type="checkbox"]) > input,
form > fieldset > div:has(> input[type="checkbox"]) > input {
  order: 1;
}

form > div:has(> input[type="checkbox"]) > :not(label, input),
form > fieldset > div:has(> input[type="checkbox"]) > :not(label, input) {
  order: 3;
  flex-basis: 100%;
}

.helptext {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 13px;
}

.helptext ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.errorlist {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  color: var(--danger-text);
  font-size: 14px;
}

form > .errorlist,
.errorlist.nonfield {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--danger-bg);
}

/* Notices */

[role="alert"],
[role="status"],
[role="note"] {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 15px;
}

[role="alert"] {
  background: var(--danger-bg);
  color: var(--danger-text);
}

[role="status"] {
  background: var(--info-bg);
  color: var(--info-text);
}

[role="note"] {
  background: var(--warning-bg);
  color: var(--warning-text);
}

/* The "confirm your email" strip under the header, outside <main>. */
.site-notice {
  padding-top: 16px;
}

.site-notice [role="note"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0;
}

/* Status badge and progress */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.badge[data-status="pending"] {
  background: var(--info-bg);
  color: var(--info-text);
}

.badge[data-status="succeeded"] {
  background: var(--success-bg);
  color: var(--success-text);
}

.badge[data-status="failed"] {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 0;
}

.retry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 12px 0 0;
}

.status-line + * {
  margin-top: 16px;
}

progress {
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-muted);
  appearance: none;
  overflow: hidden;
}

progress::-webkit-progress-bar {
  background: var(--surface-muted);
}

progress::-webkit-progress-value {
  background: var(--accent);
}

progress::-moz-progress-bar {
  background: var(--accent);
}

/* Result screens (spec 0010): the score, criteria bars, pairs, keywords and the letter. */

.screen > :first-child {
  margin-top: 0;
}

.screen-title {
  margin: 28px 0 8px;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

.score-value {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.score-of {
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 16px;
}

meter {
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-muted);
  appearance: none;
  overflow: hidden;
}

meter::-webkit-meter-bar {
  height: 6px;
  border: 0;
  background: var(--surface-muted);
}

meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
  background: var(--accent);
}

meter::-moz-meter-bar {
  background: var(--accent);
}

.match-meter {
  margin-bottom: 16px;
}

.criteria,
.pairs,
.keywords {
  margin: 0;
  padding: 0;
  list-style: none;
}

.criteria li {
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.criteria li:first-child {
  border-top: 0;
}

.criterion-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.criteria p {
  margin: 6px 0 0;
  font-size: 14px;
}

.pairs li {
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.pairs li:first-child {
  border-top: 0;
}

.keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.keyword {
  padding: 3px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 14px;
}

.copy-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.copy-button {
  display: none; /* shown by copy.js, which marks the page with .js */
}

.js-clipboard .copy-button {
  display: inline-flex;
}

.print-button {
  display: none; /* shown by copy.js */
}

.js .print-button {
  display: inline-flex;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.resume-doc {
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
  overflow-wrap: anywhere;
}

.resume-doc > :last-child {
  margin-bottom: 0;
}

.resume-name {
  margin: 0 0 4px;
  font-size: 24px;
}

.resume-contacts {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 14px;
}

.resume-headline {
  margin: 0 0 8px;
  font-weight: 500;
}

.resume-section {
  margin: 20px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
}

.resume-position,
.resume-place {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 12px;
}

.resume-position {
  margin: 12px 0 4px;
  font-weight: 500;
}

/* A place by fields (spec 0018): the company in italics under the title, with the city. */
.resume-position:has(+ .resume-place) {
  margin-bottom: 0;
}

.resume-place {
  margin: 0 0 4px;
  font-style: italic;
}

.resume-when,
.resume-where {
  margin-left: auto;
  text-align: right;
}

.resume-doc ul {
  margin: 0 0 8px;
}

.letter-subject {
  margin: 0 0 8px;
  font-weight: 500;
}

.letter-text {
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
  overflow-wrap: anywhere;
}

.letter-text > :last-child {
  margin-bottom: 0;
}

.note {
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* Result and inputs: label above value, nested objects indented. */

.result {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.result-head h2 {
  margin: 0;
}

.values dl,
.result dl {
  margin: 0;
}

.values dt,
.result dt {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}

.values dd,
.result dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.result dd p {
  margin-bottom: 8px;
}

.result dd > :last-child {
  margin-bottom: 0;
}

.result dd dl {
  padding-left: 14px;
  border-left: 2px solid var(--border);
}

.result ul {
  margin: 0;
}

.result li + li {
  margin-top: 4px;
}

.files {
  margin: 0;
  padding: 0;
  list-style: none;
}

.files li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 15px;
}

.files li:first-child {
  border-top: 0;
  padding-top: 0;
}

.files .file-name {
  flex: 1 1 200px;
  overflow-wrap: anywhere;
}

.files .muted {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

details.inputs > summary {
  cursor: pointer;
  font-weight: 500;
}

details.inputs[open] > summary {
  margin-bottom: 4px;
}

/* Quotes from the resume under a bullet or a claim (spec 0013) */

.source {
  margin: 2px 0 4px;
  font-size: 0.9em;
}

.source > summary {
  cursor: pointer;
  color: var(--text-muted);
}

.source-quote {
  margin: 4px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--border);
  color: var(--text-muted);
}

.source-missing {
  display: block;
  font-size: 0.9em;
  color: var(--text-muted);
}

/* Library table in the cabinet, its search and its pager */

.files-table th,
.files-table td {
  padding: 10px 12px;
}

.files-table th:last-child,
.files-table td:last-child {
  text-align: right;
}

.files-table td.file-name {
  overflow-wrap: anywhere;
}

.files-table td.muted {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.files-table td.file-actions {
  white-space: nowrap;
}

.file-actions a + a {
  margin-left: 12px;
}

.search {
  margin: 24px 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.search .search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}

.search input {
  flex: 1 1 200px;
  width: auto;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 16px;
  font-size: 15px;
}

/* An Application (spec 0019): the form, the stage buttons and the parts on one page */

.parts-field label:has(> input) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0 0;
  font-weight: 400;
}

.application-form:has(input[value="cover-letter"]:not(:checked)) .emphasis-field {
  display: none;
}

.stages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}

/* Home: the main action of a signed-in user */

.apply-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  padding: 28px var(--space-6);
  border: 1px solid var(--border);
  border-left: 4px solid var(--tone);
  border-radius: var(--radius-large);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.apply-hero h2 {
  margin-bottom: var(--space-2);
}

.apply-hero p {
  max-width: 52ch;
  color: var(--text-muted);
}

.apply-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  counter-reset: apply;
  color: var(--text);
  font-size: 15px;
}

.apply-steps li {
  counter-increment: apply;
}

.apply-steps li::before {
  content: counter(apply) ". ";
  font-weight: 600;
}

.apply-hero .actions {
  margin: 0;
}

.apply-hero .art {
  width: 220px;
  height: 110px;
}

/* The page of an Application: what matters before the long text of the parts */

.application-summary {
  margin-bottom: 16px;
}

.summary-match {
  margin: 0 0 16px;
}

.summary-figure {
  margin: 0 0 10px;
}

.summary-score {
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.summary-meter {
  max-width: 360px;
}

.summary-nav {
  margin: 0 0 12px;
}

.summary-nav:last-child {
  margin-bottom: 0;
}

.stages-label {
  margin-right: 4px;
  color: var(--text-muted);
  font-size: 14px;
}

.application-parts {
  counter-reset: part;
}

.application-part {
  margin-top: var(--space-7);
}

.part-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.part-title::before {
  content: counter(part);
  counter-increment: part;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--info-bg);
  color: var(--info-text);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The card's own title is right above; the h3 «Результат» stays in the outline for screen readers
   and the head keeps only the download buttons, at the right. */
.application-parts .result-head {
  justify-content: flex-end;
}

.application-parts .result-head h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


.badge[data-status="in_progress"] {
  background: var(--info-bg);
  color: var(--info-text);
}

.badge[data-status="done"] {
  background: var(--success-bg);
  color: var(--success-text);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Table: orders history */

.table-card {
  padding: 0;
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

th,
td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

th {
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

tbody tr:last-child td {
  border-bottom: 0;
}

@media (hover: hover) {
  tbody tr:hover td {
    background: var(--surface-muted);
  }
}

td.date {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Empty state */

.empty {
  padding: 40px 24px;
  text-align: center;
}

.empty p {
  max-width: 46ch;
  margin-right: auto;
  margin-left: auto;
  color: var(--text-muted);
}

.empty .art {
  display: block;
  margin: 0 auto 16px;
}

.empty .button {
  margin-top: 8px;
}

/* Cabinet: a card is titled in the text colour; limits are a number with its bar. */

.card-title {
  margin-bottom: var(--space-4);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
}

.limits {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.limits li + li {
  margin-top: var(--space-4);
}

.limits li > span {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}

.limits-more {
  margin-top: 8px;
  font-size: 15px;
}

.limits-more > summary {
  cursor: pointer;
  color: var(--text-muted);
}

/* Landing page for guests: full-width bands, borders instead of shadows. */

main.landing {
  max-width: none;
  padding: 0;
}

main.landing > [role="status"] {
  width: min(1040px, 100% - 40px);
  margin: 16px auto 0;
}

.band {
  padding: var(--space-section) 0;
  border-bottom: 1px solid var(--border);
}

.band-surface {
  background: var(--surface);
}

.band h2 {
  margin-bottom: var(--space-2);
  font-size: clamp(1.625rem, 1.35rem + 1vw, 2rem);
}

.band .section-lead {
  margin-bottom: var(--space-6);
  font-size: var(--text-base);
}

.eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.button-large {
  min-height: 52px;
  padding: 12px 26px;
  font-size: var(--text-base);
}

.hero {
  padding: 88px 0 var(--space-6);
}

.hero h1 {
  max-width: 15em;
  margin-bottom: var(--space-4);
  font-size: var(--text-display);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 56px;
}

.hero .lead {
  font-size: var(--text-lg);
}

.hero .actions {
  margin-top: var(--space-5);
}

.hero .note {
  margin-top: 14px;
}

.panel {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-md);
}

.panel-title {
  margin-bottom: var(--space-3);
  font-size: 15px;
  font-weight: 600;
}

.panel-title .badge {
  margin-left: var(--space-2);
  vertical-align: 1px;
}

/* A static sample of a result in the hero: the same pieces the real result screen shows. */

.preview-score {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.preview-list {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.preview-list li {
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 15px;
}

.preview-quote {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) 28px;
  margin: var(--space-7) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  color: var(--text-muted);
  font-size: 15px;
}

.trust li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.trust-icon {
  flex: none;
}

.trust-icon-bg {
  fill: var(--info-bg);
}

.trust-icon-mark {
  fill: none;
  stroke: var(--info-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ticks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 15px;
}

.ticks li:first-child {
  border-top: 0;
  padding-top: 0;
}

.ticks li:last-child {
  padding-bottom: 0;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  padding: var(--space-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  color: var(--text-muted);
  font-size: 15px;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--info-bg);
  color: var(--info-text);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.steps strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
}

.more {
  margin: 20px 0 0;
  color: var(--text-muted);
  font-size: 15px;
}

.sample {
  padding: 0;
  overflow: hidden;
}

.sample-head {
  padding: 24px;
  border-bottom: 1px solid var(--border);
}

.sample-head p {
  margin: 0;
}

.sample-score {
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 15px;
}

.sample-score span {
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.sample-criteria {
  padding: var(--space-2) var(--space-5);
}

.criterion-head .num {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sample-fixes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  padding: var(--space-5);
  border-top: 1px solid var(--border);
}

.sample-fixes ul {
  margin: 0;
}

.sample-fixes .section-title {
  margin-top: 0;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.facts li {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  color: var(--text-muted);
  font-size: 15px;
}

.facts strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-weight: 600;
}

.closing {
  border-bottom: 0;
  background: var(--tone-weak);
}

.closing-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.closing h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
}

.closing .art {
  width: 240px;
  height: 120px;
}

.closing .lead {
  color: var(--tone-text);
}

.panel-art {
  margin-bottom: 20px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--tone-weak);
}

.panel-art .art {
  display: block;
  width: 100%;
  height: 84px;
}

/* Long-form text */

.prose h2 {
  margin-top: 32px;
  font-size: 18px;
}

.prose .card > :first-child {
  margin-top: 0; /* the first line of a card sits at the card's padding, not 32px lower */
}

.prose p,
.prose li {
  max-width: 70ch;
}

/* Motion: colour and shadow changes of 120 ms on links, controls and cards, for people who have
   not asked for less motion. Nothing moves, fades in or slides; tests/test_static.py keeps it so. */

@media (prefers-reduced-motion: no-preference) {
  a,
  button,
  .button,
  .chip,
  .card,
  .task-card,
  .menu-panel a,
  input,
  textarea,
  select {
    transition:
      color 120ms,
      background-color 120ms,
      border-color 120ms,
      box-shadow 120ms;
  }
}

/* Small screens */

@media (max-width: 860px) {
  html {
    scroll-padding-top: 0;
  }

  .site-header {
    position: static; /* the header may wrap to two rows here, which would eat the screen */
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sample-fixes {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  main.container {
    padding-top: 28px;
  }

  main.landing {
    padding-top: 0;
  }

  .hero {
    padding: 36px 0 var(--space-5);
  }

  .trust {
    margin-top: var(--space-6);
  }

  :root {
    --space-section: 44px;
  }

  .site-nav > a[href^="#"] {
    display: none; /* the sections follow one another; the header keeps only the actions */
  }

  .site-header .container {
    position: relative; /* the account panel is laid out against the header, not its button */
    gap: 0 10px;
    min-height: 56px;
  }

  /* Row one: the brand, then the account (or the sign-in actions) at the right.
     Row two: the sections. The nav's children join the header's own flex line to do that. */
  .site-nav {
    display: contents;
    font-size: 13px; /* four sections must fit one row on a 360 px screen */
  }

  .site-header .container::after {
    content: "";
    order: 2;
    flex-basis: 100%; /* the line break between the two rows */
  }

  .brand {
    order: 1;
  }

  .menu,
  .nav-action {
    order: 1;
  }

  .menu,
  .nav-action {
    margin-left: auto;
  }

  .nav-action ~ .nav-action {
    margin-left: 0; /* only the first of the sign-in actions takes the free space */
  }

  .site-nav > a:not(.button, .nav-action) {
    order: 3;
    padding: 10px 0 8px;
  }

  .site-nav > a.nav-action:not(.button) {
    padding: 10px 0;
  }

  .menu {
    position: static;
  }

  .menu-label {
    position: absolute; /* the circle stands for «Аккаунт»; the word stays for screen readers */
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .menu-panel {
    right: 20px;
    left: 20px;
    min-width: 0;
  }

  .apply-hero {
    padding: 20px;
  }

  .summary-score {
    font-size: 40px;
  }

  .summary-nav {
    gap: 6px;
  }

  .summary-meter {
    max-width: none;
  }

  .hero h1 {
    font-size: 30px;
  }

  .art,
  .closing .art,
  .panel-art {
    display: none;
  }

  .category-head {
    padding: 20px;
  }

  .band h2 {
    font-size: 22px;
  }

  .sample-head,
  .sample-fixes {
    padding: 20px;
  }

  .sample thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .sample tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
  }

  .sample tbody tr:last-child {
    border-bottom: 0;
  }

  .sample td {
    padding: 0;
    border: 0;
  }

  .sample td:nth-child(1) {
    font-weight: 500;
  }

  .sample td:nth-child(3) {
    grid-column: 1 / -1;
    color: var(--text-muted);
  }

  h1 {
    font-size: 24px;
  }

  .card {
    padding: 20px;
  }

  .table-card thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .table-card tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }

  .table-card tbody tr:last-child {
    border-bottom: 0;
  }

  .table-card td {
    padding: 0;
    border: 0;
  }

  .table-card td:first-child {
    grid-column: 1 / -1;
  }

  .files-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .files-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }

  .files-table td,
  .files-table td:first-child,
  .files-table td:last-child {
    padding: 0;
    border: 0;
    text-align: left;
  }

  .files-table td:first-child {
    flex: 1 1 100%;
  }
}

/* Printing: always light, only the result, no controls. */

@media print {
  :root {
    color-scheme: light;

    --bg: #faf9f5;
    --surface: #ffffff;
    --surface-muted: #f3f1ea;
    --border: #e6e3d8;
    --border-strong: #8f8b80;
    --text: #141413;
    --text-muted: #5e5d59;
    --text-faint: #6e6c66;

    --accent: #b4532f;
    --accent-hover: #9a4525;
    --accent-text: #ffffff;
    --accent-weak: #f8e9e2;
    --focus: #b4532f;

    --info-bg: #f8e9e2;
    --info-text: #8f3d1d;
    --success-bg: #ecf7ef;
    --success-text: #1d6b37;
    --danger: #b42318;
    --danger-hover: #9a1f15;
    --danger-contrast: #ffffff;
    --danger-bg: #fdf0ef;
    --danger-text: #9a1f15;
    --warning-bg: #fdf6e7;
    --warning-text: #7a4b07;

    /* Category tones: a strong colour, a mid tint for art, a soft background and its text. */
    --clay: #c96442;
    --clay-mid: #e9b8a3;
    --clay-weak: #f8e9e2;
    --clay-text: #8f3d1d;
    --olive: #788c5d;
    --olive-mid: #c9d4b0;
    --olive-weak: #eef1e4;
    --olive-text: #4b5a30;
    --sky: #6a9bcc;
    --sky-mid: #b4cfe6;
    --sky-weak: #e6eff7;
    --sky-text: #2f5d86;
  }

  .site-header,
  .site-footer,
  .no-print,
  .copy-button,
  .js-clipboard .copy-button,
  .print-button,
  .js .print-button,
  .resume-doc [data-nocopy] {
    display: none;
  }

  meter {
    print-color-adjust: exact;
  }

  /* «Скачать PDF» prints the order page: the Result alone, without its card. A resume and a
     letter print as the DOCX holds them, without sources and notes. */
  .card,
  .result {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }

  .resume-doc,
  .letter-text {
    padding: 0;
    border: 0;
    background: none;
  }

  .resume-position,
  li {
    break-inside: avoid;
  }

  /* A resume prints in the standard template of its DOCX (spec 0017). The page title goes when
     the page holds a resume or a letter: decided by what is in the page, since the result
     arrives by polling after the title was rendered. */
  @page {
    size: A4;
    margin: 1.5cm 1.8cm;
  }

  .page-head:has(~ #order-status .resume-doc, ~ #order-status .letter-text) {
    display: none;
  }

  /* «Скачать PDF» of a part prints that part alone (copy.js marks it while printing). */
  .printing-part main > :not(.application-parts),
  .printing-part .application-part:not(.print-part),
  .printing-part .part-title {
    display: none;
  }

  .printing-part .application-part {
    margin: 0;
  }

  .part-title::before {
    display: none; /* the numbered circle is for the screen */
  }

  .resume-doc,
  .letter-subject,
  .letter-text {
    font-family: "Times New Roman", Times, serif;
    font-size: 11pt;
    line-height: 1.25;
  }

  .resume-name {
    margin: 0 0 2pt;
    font-size: 22pt;
    font-weight: 700;
    text-align: center;
  }

  .resume-contacts,
  .resume-headline {
    margin: 0;
    color: var(--text);
    font-size: 11pt;
    text-align: center;
  }

  .resume-headline {
    font-style: italic;
    font-weight: 400;
  }

  .resume-section {
    margin: 10pt 0 3pt;
    padding-bottom: 1pt;
    border-bottom: 1px solid var(--text);
    font-family: inherit;
    font-size: 12pt;
    font-variant: small-caps;
    font-weight: 400;
    break-after: avoid;
  }

  /* More specific than `.resume-doc p` below: the line keeps its space before, as in the DOCX. */
  .resume-doc .resume-position {
    margin: 4pt 0 0;
    font-weight: 700;
    break-after: avoid;
  }

  .resume-place {
    break-after: avoid;
  }

  .resume-doc p {
    margin: 0;
  }

  .resume-doc ul {
    margin: 0;
    padding-left: 1.2em;
  }

  /* The letter as its DOCX: «Тема: …» in bold, then paragraphs 6 pt apart. */
  .letter-subject-title {
    display: none;
  }

  .letter-subject {
    margin: 0 0 12pt;
    font-weight: 700;
  }

  .letter-subject::before {
    content: "Тема: ";
  }

  .letter-text p {
    margin: 0 0 6pt;
  }
}