/* „Пробвай Pro на един документ" - the upload, the report (the same .risk cards as /documents),
   and the price after it. Tokens from _theme.html with dark fallbacks. */
main { max-width: var(--page-w,860px); }
.lede { font-size: 15.5px; line-height: 1.6; margin: 0 0 18px; color: var(--text, #e6edf3); }
.muted { color: var(--muted, #8b98a5); }
.small { font-size: 13px; }

.up { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--border, #2d3744);
  border-radius: 14px; background: var(--panel, #1a212b); }
.up .file { display: flex; flex-direction: column; gap: 6px; }
.up .lbl { font-size: 13px; color: var(--muted, #8b98a5); }
.up input[type=file] { font: inherit; color: var(--text, #e6edf3); }
.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; font-size: 13px; color: var(--muted, #8b98a5); }
.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; font: inherit; font-size: 13px; cursor: pointer; color: var(--accent, #3fb950);
  padding: 9px 4px; margin: -9px -4px; min-height: 32px; }
.err { color: var(--danger, #f85149); margin: 0; }
/* the honeypot: off-screen, not display:none - some bots skip hidden fields, none skip this one */
.hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { min-height: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start;
  background: var(--accent, #3fb950); color: var(--on-accent, #0d1218); border: 0; border-radius: 12px;
  padding: 12px 20px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.06); }
.ghost { display: inline-block; margin-left: 14px; color: var(--muted, #8b98a5); font-size: 14px; }

.report { margin-top: 22px; }
.tally { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; font-size: 13.5px; }
.tally .doc { color: var(--text, #e6edf3); font-weight: 600; margin-right: 6px; }
.pill { border: 1px solid var(--border, #2d3744); border-radius: 999px; padding: 2px 10px; color: var(--muted, #8b98a5); }
.pill.red b { color: #d1242f; } .pill.amber b { color: var(--warn, #d29922); } .pill.green b { color: var(--accent, #3fb950); }
.risks { display: flex; flex-direction: column; gap: 8px; }
.risk { border: 1px solid var(--border, #2d3744); border-left-width: 4px; border-radius: 8px; padding: 10px 12px;
  background: var(--panel, #1a212b); font-size: 13.5px; }
/* The row holds a title, the kind of problem and the severity. `.kindlbl` carries a whole
   phrase — „възможно противоречие със закона" is 233px — and was `nowrap`, so on a 390px
   phone the row could not break and pushed the page to 462px wide: the report scrolled
   sideways. Measured with tools/ux_audit.py's probe at 390px. Wrapping the row is the fix;
   the label keeps its own `nowrap` only where there is room for it. (follow-up §11) */
.risk .rh { display: flex; justify-content: space-between; gap: 6px 10px; align-items: baseline;
  flex-wrap: wrap; }
.risk .lvl { font-size: 12.5px; color: var(--muted, #8b98a5); white-space: nowrap; }
.risk p { margin: 6px 0 0; color: var(--text, #e6edf3); }
.risk blockquote { margin: 8px 0 0; padding: 6px 10px; border-left: 2px solid var(--border, #2d3744); color: var(--muted, #8b98a5); font-style: italic; }
.risk .fix { color: var(--muted, #8b98a5); }
.risk .cite { display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--accent, #3fb950); text-decoration: none; }
.risk .cite:hover { text-decoration: underline; }
.risk.r-red { border-left-color: #d1242f; }
.risk.r-amber { border-left-color: var(--warn, #d29922); }
.risk.r-green { border-left-color: var(--accent-2, #1a7f4b); }

/* The price, after the value. A box, not a banner: it must read as the next step, not as an ad. */
.paywall { margin-top: 26px; padding: 22px; border: 1px solid var(--accent, #3fb950); border-radius: 16px;
  background: var(--accent-bg, #16281a); }
.paywall h2 { margin: 0 0 8px; font-size: 20px; }
.paywall p { margin: 0 0 12px; color: var(--text, #e6edf3); }
.paywall ul { margin: 0 0 16px; padding-left: 20px; color: var(--text, #e6edf3); line-height: 1.6; }
.paywall .btn { align-self: auto; }
.paywall .muted { margin-top: 10px; }
/* The screen after the analysis: the one CTA on the page that is allowed to be big. */
.paywall.big { padding: 28px 26px; text-align: center; }
.paywall.big h2 { font-size: 26px; margin-bottom: 12px; }
.paywall.big p { max-width: 58ch; margin: 0 auto 10px; font-size: 15.5px; line-height: 1.55; }
.paywall.big .pw-price { color: var(--muted, #8b98a5); font-size: 14px; margin: 14px auto 18px; }
.paywall.big .btn.xl { font-size: 19px; padding: 18px 34px; border-radius: 14px; width: min(100%, 420px); }

/* 2026-09-11 - the acquisition rewrite: the file chooser IS the primary button, the report says
   what it found first, the upsell speaks about this document. */
.up .file.btn { position: relative; overflow: hidden; cursor: pointer; align-self: flex-start; }
.up .file.btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.up .file.btn .lbl { font-size: inherit; color: inherit; }
.up .chosen { margin: -4px 0 0; color: var(--text, #e6edf3); font-size: 14px; }
.gets, .privacy { margin-top: 26px; }
.gets h2, .privacy h2 { font-size: 17px; margin: 0 0 8px; }
.gets ul, .privacy ul, .pro-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.privacy { border: 1px solid var(--border, #2d3744); border-radius: 10px; padding: 14px 16px; }
.privacy li, .gets li { color: var(--text, #e6edf3); }
.rep-h1 { font-size: 22px; margin: 0 0 10px; }
.risk .k { color: var(--muted, #8b98a5); font-weight: 600; }
.risk .law { margin: 6px 0 0; }
.pw-usage { color: var(--muted, #8b98a5); }
.paywall .pro-list { margin: 6px 0 12px; }
.paywall form { margin: 0; }
.del { margin: 26px 0 0; }
.del .ghost { background: none; border: 0; color: var(--muted, #8b98a5); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.messages .msg { border: 1px solid var(--border, #2d3744); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; }
.messages .msg.success { border-color: var(--accent, #3fb950); }
.messages .msg.warning { border-color: var(--warn, #d29922); }
@media (max-width: 600px) { .up .file.btn, .btn.xl, #go { width: 100%; justify-content: center; } .rep-h1 { font-size: 19px; } }

/* the citation block: the provision, the register link, the revision, the confidence */
.cite-box { margin: 8px 0 0; padding: 8px 10px; border: 1px dashed var(--border, #2d3744); border-radius: 6px; }
.cite-box.unverified { border-style: dotted; }
.cite-box .law { margin: 0; }
.cite-box .prov { margin: 6px 0 0; font-style: normal; color: var(--text, #e6edf3); }
.cite-box .ver { margin: 6px 0 0; font-size: 12.5px; color: var(--muted, #8b98a5); }
.asof { margin: 0 0 10px; }

/* the use-case pages, the example banner, the email form */
.case { margin-top: 26px; }
.case h2 { font-size: 17px; margin: 18px 0 8px; }
.case .tblwrap { overflow-x: auto; }
.case table.checks { border-collapse: collapse; width: 100%; font-size: 14px; }
.case table.checks th, .case table.checks td { text-align: left; vertical-align: top; padding: 7px 9px; border-bottom: 1px solid var(--border, #2d3744); }
.case table.checks th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #8b98a5); }
.case ul.risky { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--muted, #8b98a5); font-style: italic; }
.case details.faq { border-top: 1px solid var(--border, #2d3744); padding: 8px 0; }
.case details.faq summary { cursor: pointer; font-weight: 600; }
.case details.faq p { margin: 6px 0 0; color: var(--muted, #8b98a5); }
.cases { margin: 10px 0 0; }
.example-note { border: 1px solid var(--accent, #3fb950); border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.example-note p { margin: 0; max-width: 60ch; }
.mail { margin-top: 14px; border: 1px solid var(--border, #2d3744); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.mail .row { display: flex; gap: 8px; flex-wrap: wrap; }
.mail input[type=email] { flex: 1 1 220px; font: inherit; padding: 8px 10px; border: 1px solid var(--border, #2d3744); border-radius: 8px; background: var(--inset, #0d1218); color: var(--text, #e6edf3); }
.mail .consent { font-size: 13px; color: var(--muted, #8b98a5); display: flex; gap: 8px; align-items: flex-start; }

/* mobile: nothing under 12.5px, nothing to tap under 44px */
@media (max-width: 600px) {
  .muted.small, .small, small { font-size: 12.5px; }
  .btn, .up .file.btn, .mail .btn, .del .ghost, .example-note .btn { min-height: 44px; }
  .risk .lvl { font-size: 12.5px; }
}

/* The sample finding shown BEFORE the reader is asked for a file (templates/proba.html).
   Same shape as a real one so the promise and the product match; capped in width and quiet in
   colour so it reads as an illustration, not as a result about the reader's own document. */
.preview { margin: 26px 0 0; }
.preview h2 { font-size: 18px; margin: 0 0 10px; }
.preview .risk { margin: 0; }
.preview .law, .preview .fix { margin: 6px 0 0; }
@media (max-width: 640px){ .preview h2 { font-size: 16px; } }

/* What a finding IS, beside how serious it is (audit A10). Deliberately quieter than the
   severity chip: it qualifies the finding, it is not a second alarm. */
.kindlbl { font-size:11.5px; color:var(--muted); border:1px solid var(--border);
  border-radius:3px; padding:1px 7px; margin-left:8px; white-space:nowrap; }
@media (max-width: 560px) {
  /* Below this the phrase cannot fit beside a title at all, so it stops pretending to. */
  .kindlbl { margin-left:0; white-space:normal; }
  .risk .rh > b { flex: 1 1 100%; }
}
.risk .assumes { color:var(--muted); font-size:13.5px; }

/* The one optional question before an upload: which party the reader is. (follow-up §9)
   Deliberately small — a pre-upload questionnaire is a reason not to upload. */
.side-q { border: 1px solid var(--border, #2d3744); border-radius: 8px; padding: 10px 12px;
  margin: 0 0 12px; }
.side-q legend { padding: 0 6px; font-size: .9rem; color: var(--muted, #8b98a5); }
.side-q .side-opt { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 4px 0;
  cursor: pointer; }
.side-q p { margin: 6px 0 0; }
/* On a phone each option was 16px tall - the height of its own text - for the choice that
   decides whose side the review takes. A mis-tap there does not annoy somebody, it reviews
   the contract for the other party. 44px is what a finger needs (Apple HIG; Material asks
   48dp), and the radio itself grows with it. */
@media (max-width: 560px) {
  .side-q .side-opt { display: flex; margin: 0 0 2px; min-height: 44px; gap: 10px; }
  .side-q .side-opt input[type=radio] { width: 20px; height: 20px; flex: none; }
}
/* next-release §5: two next actions after a finished analysis, side by side, stacking on a phone */
.next-two { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 10px; }
.next-two .btn { min-height: 44px; }
/* next-release §8: the „something is wrong" report under a finished check */
.afb { margin: 18px 0; }
.afb summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.afb fieldset { border: 0; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.afb label { display: flex; gap: 8px; align-items: center; min-height: 32px; }
.afb textarea { width: 100%; font-size: 16px; box-sizing: border-box; }

/* ---- UX consolidation (Sep 2026) ------------------------------------------------------------
   The privacy note as four facts plus the full text behind „Подробности"; the way back to the
   upload after the example and at the end of the page. */
.privacy { margin-top: 18px; }
.privacy h2 { font-size: 15px; margin: 0 0 10px; }
.privacy .priv-sum { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.priv-sum li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px;
  background: var(--inset, #0d1218); font-size: 13.5px; line-height: 1.35; }
.priv-sum li span { color: var(--muted, #8b98a5); font-size: 12.5px; }
.priv-more { margin-top: 10px; }
.priv-more > summary { cursor: pointer; color: var(--accent, #3fb950); font-size: 13.5px; font-weight: 600;
  display: inline-flex; align-items: center; min-height: 36px; }
.privacy .priv-more > ul { margin: 6px 0 0; }
.priv-more li { font-size: 14px; line-height: 1.5; }
.prev-next { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 12px 0 0; }
.prev-next .btn { align-self: auto; }
.again { margin-top: 30px; padding: 22px; border: 1px solid var(--accent, #3fb950); border-radius: 14px;
  background: var(--accent-bg, #16281a); text-align: center; }
.again h2 { margin: 0 0 6px; font-size: 19px; }
.again p { margin: 0 0 14px; color: var(--text, #e6edf3); }
.again .btn { align-self: auto; }
/* Above the cookie bar while it is open (--ck-h), and clear of the phone's home indicator. */
.to-upload { position: fixed; z-index: 150; right: 16px; bottom: calc(16px + var(--ck-h, 0px) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--panel-2, #243140); color: var(--text, #e6edf3); border: 1px solid var(--accent, #3fb950);
  font-weight: 600; font-size: 14px; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.to-upload[hidden] { display: none; }
.to-upload:hover { text-decoration: underline; }
@media (max-width: 600px) { .again .btn, .prev-next .btn { width: 100%; justify-content: center; } }
/* Two buttons in the form were the same green: the file chooser, which is the first step, and
   the submit, which does nothing until a file is chosen. The submit waits in the secondary
   style and turns primary once there is something to send (proba.js adds .ready). */
.up #go:not(.ready) { background: var(--panel-2, #243140); color: var(--text, #e6edf3); border: 1px solid var(--border, #2d3744); }

/* target size (refinement, Sep 2026) */
a.muted.small { display:inline-block; padding-block:5px; }

/* „Приложи избраните редакции в Word" (chat/applyfix.py): the tick under each suggestion, and the
   block after the list. The label is the target, 44px tall on a phone (the phone floor). */
.risk .pick-fix { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 36px;
                  font-size: 14px; color: var(--text, #e6edf3); cursor: pointer; }
.risk .pick-fix input { width: 18px; height: 18px; accent-color: var(--accent, #3fb950); }
.risk .pick-fix input:focus-visible { outline: 2px solid var(--accent, #3fb950); outline-offset: 2px; }
.apply { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--border, #2d3744); border-radius: 14px;
         background: var(--panel, #161b22); }
.apply h2 { margin: 0 0 8px; font-size: 19px; }
.apply p { margin: 6px 0; }
.apply form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.apply-made { margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--accent, #3fb950); border-radius: 10px; }
.apply-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px !important; }
.apply-offer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, #2d3744); }
.apply-offer .pro-offer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (max-width: 600px) { .risk .pick-fix { min-height: 44px; } .apply { padding: 14px; } }

/* the send button waits for a file (proba.js); .btn sets display, which beats [hidden] */
#go[hidden] { display: none; }

/* the one disclosure that must come before the file is chosen */
.pre-up { margin: 0 0 12px; color: var(--text); }

.pw-next { margin: 14px 0 6px; }

/* The upload form's spacing comes from the flex gap alone (7 Oct 2026): margins on top of the
   14px gap, and the invisible Cloudflare box taking a gap of its own, left ~60px holes around
   the upload button. The box still grows when Cloudflare asks for an interaction. */
form.up .pre-up { margin-bottom: 0; }
form.up label.file { margin-top: 0; }
form.up .cf-turnstile { margin-top: -14px; }
form.up > p.muted.small { margin-top: 0; margin-bottom: 0; }

/* the checklist fits a 390px phone instead of scrolling sideways by 20px (7 Oct 2026) */
@media (max-width: 600px) {
  .case table.checks { table-layout: fixed; }
  .case table.checks th, .case table.checks td { overflow-wrap: anywhere; padding: 7px 6px; }
  .case table.checks th { letter-spacing: 0; }
}