/* „Какво да направя?" - a described situation, and the plan it turns into.

   Tokens from _theme.html with dark fallbacks. The deadline box is the one loud thing:
   it is the fact that can still be lost. */

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

.ask { display: flex; flex-direction: column; gap: 10px; }
.ask label { font-size: 13px; color: var(--muted, #8b98a5); }
.ask textarea { font: inherit; font-size: 15px; line-height: 1.5; padding: 12px 14px; border-radius: 10px;
  background: var(--inset, #0d1218); border: 1px solid var(--border, #2d3744); color: var(--text, #e6edf3);
  resize: vertical; width: 100%; box-sizing: border-box; }
.ask textarea:focus-visible { outline: 2px solid var(--accent, #3fb950); outline-offset: 1px; }
.ask button[type=submit] { align-self: flex-start; }
.ex { font: inherit; font-size: 12.5px; background: none; border: 1px solid var(--border, #2d3744);
  border-radius: 999px; padding: 4px 10px; margin: 4px 6px 0 0; cursor: pointer; color: var(--text, #e6edf3);
  min-height: 0; text-align: left; }
.ex:hover { border-color: var(--accent, #3fb950); }
.cap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cap img { border-radius: 8px; border: 1px solid var(--border, #2d3744); background: #fff; }
.cap label { display: flex; flex-direction: column; gap: 4px; }
.cap input { font: inherit; padding: 8px 10px; border-radius: 8px; width: 120px;
  background: var(--inset, #0d1218); border: 1px solid var(--border, #2d3744); color: var(--text, #e6edf3); }
.lnk { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--accent, #3fb950); min-height: 0; }
.err { margin: 0; color: var(--danger, #f85149); font-size: 13.5px; }

.plan { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.area { margin: 0; }
.area span { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--on-accent, #0d1218); background: var(--accent, #3fb950); border-radius: 999px; padding: 3px 11px; }
.sit { margin: 0; font-size: 16px; line-height: 1.6; }
.caution { margin: 0; padding: 10px 14px; border-left: 3px solid var(--warn, #d29922);
  background: var(--panel, #1a212b); border-radius: 0 8px 8px 0; color: var(--text, #e6edf3); }
.box { padding: 14px 16px; border: 1px solid var(--border, #2d3744); border-radius: 12px; background: var(--panel, #1a212b); }
.box h2 { font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: var(--muted, #8b98a5); margin: 0 0 8px; }
.dl { border-color: var(--accent-2, #1a7f4b); background: var(--accent-bg, #16281a); }
.big { margin: 0 0 4px; font-size: 19px; }
.big b { font-variant-numeric: tabular-nums; }
.box blockquote { margin: 10px 0 0; padding: 8px 12px; border-left: 2px solid var(--border-2, #30363d);
  font-size: 13px; line-height: 1.55; color: var(--muted, #8b98a5); }
.box blockquote a, .arts a { color: var(--accent, #3fb950); }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; line-height: 1.5; }
.steps .where { color: var(--muted, #8b98a5); }
.steps .why { margin: 2px 0 0; font-size: 13.5px; color: var(--muted, #8b98a5); }
.fee { margin: 12px 0 0; }
.arts { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; }
.lawyer { margin: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--warn, #d29922);
  color: var(--text, #e6edf3); line-height: 1.55; }
.next { padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--border, #2d3744); }
.next p { margin: 0 0 6px; font-size: 13px; color: var(--muted, #8b98a5); }
.next .q { font-size: 15px; color: var(--text, #e6edf3); margin-bottom: 12px; }
/* „нов код" / „Пробвайте с пример" are 14px text; the target is a thumb's. */
button.lnk { padding: 9px 4px; margin: -9px -4px; min-height: 32px; }

/* 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) {
  .ask textarea, .ask input, .ask select { font-size:16px; }
}