/* „Срокове и такси" - the calculators.

   Tokens from _theme.html with dark fallbacks. The result block is the one place on the page
   that is allowed to be loud: it is what somebody came for. */

main { max-width: var(--page-w,860px); }
h1 { margin-bottom: 6px; }
.lede { font-size: 15.5px; line-height: 1.6; margin: 0 0 4px; color: var(--text, #e6edf3); }
.small { font-size: 13px; line-height: 1.55; }
.muted { color: var(--muted, #8b98a5); }
.foot { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--border, #2d3744); }

.tool { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--border, #2d3744); }
.tool h2 { font-size: 18px; margin: 0 0 12px; }

.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.row label { display: flex; flex-direction: column; gap: 5px; font-size: 13px;
  color: var(--muted, #8b98a5); flex: 1 1 210px; }
.row select, .row input { font: inherit; padding: 9px 11px; border-radius: 9px;
  background: var(--inset, #0d1218); border: 1px solid var(--border, #2d3744);
  color: var(--text, #e6edf3); }
.row select:focus-visible, .row input:focus-visible { outline: 2px solid var(--accent, #3fb950);
  outline-offset: 1px; }
.row button { font: inherit; font-weight: 600; padding: 10px 20px; border-radius: 9px;
  border: 0; cursor: pointer; background: var(--accent, #3fb950);
  color: var(--on-accent, #0d1218); }
.row button:hover { filter: brightness(1.08); }

/* The answer, and - just as important - the working that produced it. */
.out { margin-top: 16px; padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--accent-2, #1a7f4b); background: var(--accent-bg, #16281a); }
.big { margin: 0 0 10px; font-size: 19px; color: var(--text, #e6edf3); }
.big b { font-variant-numeric: tabular-nums; }
.work { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px;
  font-size: 14px; line-height: 1.5; color: var(--text, #e6edf3); }
.work .moved { color: var(--warn, #d29922); }
.out blockquote { margin: 12px 0 0; padding: 8px 12px; border-left: 2px solid var(--border-2, #30363d);
  font-size: 13px; line-height: 1.55; color: var(--muted, #8b98a5); }
.err { margin: 10px 0 0; color: var(--danger, #f85149); font-size: 13.5px; }
.fine { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted, #8b98a5); }

.years { display: flex; gap: 6px; margin: 10px 0 12px; flex-wrap: wrap; }
.yr { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--border, #2d3744); color: var(--muted, #8b98a5); }
/* The chosen year is white, not accent: beside a green Сметни button a green pill reads as
   a second button. (`--text` is white on dark and flips to ink on the light theme.) */
.yr.on { border-color: var(--text, #e6edf3); color: var(--text, #e6edf3); font-weight: 600;
  background: var(--panel-2, #243140); }
.yr:hover { border-color: var(--accent, #3fb950); }

.cal { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px;
  grid-template-columns: 1fr; }
@media (min-width: 640px) { .cal { grid-template-columns: 1fr 1fr; } }
.cal li { font-size: 13.5px; padding: 5px 0; }
.cal b { font-variant-numeric: tabular-nums; }
.cal .wd { color: var(--muted, #8b98a5); font-size: 12px; margin: 0 6px 0 2px;
  text-transform: uppercase; }

/* Phone: 16px is the floor for a field you type into - under it, iOS Safari zooms the page in
   on focus and does not zoom back out. Appended last so no later rule of equal specificity can
   quietly cancel it (which is exactly how the captcha field's own 16px rule was dead). */
@media (max-width:600px) {
  /* `.row select, .row input { font: inherit }` takes the label's 13px, and it outranks a bare
     `input` selector - so the floor has to be written at the same specificity or higher. */
  .row select, .row input, .row textarea { font-size:16px; }
}