/* ============================================================================
   oferta.css — the offer, set as a document.

   Same tokens as everything else: paper, ink, madder as accent only, the three
   fonts already loaded. Nothing here invents a colour, a radius or a face.

   THE ONE THING THIS PAGE NEEDS THAT NO OTHER PAGE DOES is a reading measure.
   Every other surface on this site is scanned — a price, an invoice, a strip
   of clips. This one is read, for twenty minutes, by somebody deciding whether
   to sign it. So the column is ~68 characters, the body is a size larger than
   the rest of the site, the line is looser, and the twenty-five sections are
   separated by a hairline and a screenful of air rather than by a fill.

   NO PANELS AND NO WASHES. A tinted box behind a clause reads as dirt on
   paper at this scale — hairlines do the same work and stay quiet.
   ========================================================================== */

/* The header bar and the column are the same width, so the lockup and the
   language switch sit over the edges of the text rather than 110px outside
   them. Same trick, same reason as body.inv-body in panel.css. */
body.of-body .p-top-in{max-width:680px}
.p-wrap.of{max-width:680px;padding-bottom:96px}

/* --- The title block ------------------------------------------------------ */
.of-title{padding-bottom:20px;border-bottom:1px solid var(--line)}
.of-h1{text-wrap:balance}
.of-sub{margin-top:10px;font:400 15.5px/1.45 var(--ff-body);color:var(--ink-72)}

/* Since when this edition has been in force. The document says «Редакция 3.1.1
   от 08 сентября 2026 года» in its own words a few lines below; this is the
   same date as a fact about the page, in the service face the rest of the site
   uses for that kind of line. */
.of-when{margin-top:12px;font:400 11px/1.5 var(--ff-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-72)}

/* Shown to an English reader only — see ofertaPage(). A hairline of madder
   rather than a tinted block: it is a note about the page, not a warning. */
.of-note{margin-top:18px;padding-left:13px;border-left:2px solid var(--accent);
  font-size:14px;line-height:1.6;color:var(--ink-72)}
/* THE ONE PLACE ON THIS PAGE THAT HAS TO INTERRUPT. An archived edition looks
   exactly like the one in force — same title, same clauses, same everything —
   so the difference has to be stated before the first clause and not
   whispered. Still a hairline and no fill: the rule is thicker and the words
   are ink rather than muted, which is enough. */
.of-old{border-left-width:3px;color:var(--ink)}
.of-old b{font-weight:600}
.of-old-a{display:inline-block;margin-top:6px;color:var(--accent);
  text-decoration:underline;text-underline-offset:3px}

/* --- The editions --------------------------------------------------------
   Same box as the contents, because it is the same kind of thing: a short
   list you open when you need it. It appears only once there is more than one
   edition — see ofertaPage(). */
.of-eds{margin-top:-1px}
.of-eds-list{padding-bottom:14px}
.of-eds-row{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:8px 0;
  font-size:14.5px;line-height:1.4;color:var(--ink)}
a.of-eds-row:hover{color:var(--accent)}
.of-eds-n{flex:0 0 auto;min-width:54px;font:400 11px/1.5 var(--ff-mono);
  letter-spacing:.08em;color:var(--ink-65)}
.of-eds-w{font-size:13.5px;color:var(--ink-72)}
/* The one you are reading. It is not a link, so it needs the mark a link's
   colour would otherwise give it. */
.of-eds-row.is-on .of-eds-n{color:var(--accent)}

.of-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}

/* --- Contents ------------------------------------------------------------
   Twenty-five sections. A visitor who came for §17 should not have to scroll
   through §1–16 to find out where it is — and a visitor who came to read it
   through should not have to scroll past a list of twenty-five links first.
   <details> is both, needs no script, and remembers nothing. */
.of-toc{margin-top:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.of-toc summary{display:flex;align-items:center;gap:8px;min-height:52px;cursor:pointer;
  font:400 11px/1 var(--ff-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-72);list-style:none}
.of-toc summary::-webkit-details-marker{display:none}
/* The marker is the state: a plus that becomes a minus. Drawn from two rules
   so it needs no glyph and no icon file. */
.of-toc summary::after{content:"";width:11px;height:11px;flex:0 0 auto;
  background:
    linear-gradient(var(--ink-72),var(--ink-72)) center/11px 1px no-repeat,
    linear-gradient(var(--ink-72),var(--ink-72)) center/1px 11px no-repeat;
  transition:rotate .18s}
.of-toc[open] summary::after{background:linear-gradient(var(--ink-72),var(--ink-72)) center/11px 1px no-repeat;
  rotate:180deg}
.of-toc summary:hover{color:var(--ink)}
.of-toc-list{padding-bottom:14px}
.of-toc-list li+li{margin-top:2px}
.of-toc-list a{display:flex;gap:12px;align-items:baseline;padding:7px 0;
  font-size:14.5px;line-height:1.4;color:var(--ink)}
.of-toc-list a:hover{color:var(--accent)}
.of-toc-n{flex:0 0 34px;font:400 11px/1.5 var(--ff-mono);letter-spacing:.06em;
  color:var(--ink-65)}

/* --- The document --------------------------------------------------------- */
.of-doc{margin-top:12px;font-size:16px;line-height:1.72;
  /* A legal document is full of long defined terms and one 44-character
     address; nothing in it may push the column sideways. */
  overflow-wrap:break-word}
.of-p{margin-top:14px}
/* The clause number and, in §1, the term it defines. Golos 600 — the weight
   the document itself asks for. Madder is saved for the section numbers:
   two hundred accented clause markers would be a rash, not an accent. */
.of-doc strong{font-weight:600}

/* A section: a hairline, its number in mono madder, then the title in Oswald.
   The same eyebrow-over-title figure the storefront uses for its blocks, at
   document scale. */
.of-h{margin-top:56px;padding-top:26px;border-top:1px solid var(--line);
  font:600 clamp(19px,3.4vw,23px)/1.15 var(--ff-display);letter-spacing:.015em;
  text-transform:uppercase;color:var(--ink);text-wrap:balance;
  /* The bar above is sticky and 64px tall; without this every jump from the
     contents landed with the heading underneath it. */
  scroll-margin-top:76px}
.of-num{display:block;margin-bottom:9px;font:400 10px/1 var(--ff-mono);
  letter-spacing:.24em;color:var(--accent)}
.of-h3{margin-top:30px;font:600 16px/1.25 var(--ff-display);letter-spacing:.03em;
  text-transform:uppercase;scroll-margin-top:76px}
.of-num3{margin-right:8px;font:400 11px/1 var(--ff-mono);letter-spacing:.1em;
  color:var(--ink-65)}

/* Lists.

   THE NUMBERED ONES ARE REAL <ol> MARKERS, NOT DRAWN ONES. base.css turns
   list markers off site-wide, which is right for a nav and wrong here: a
   numbered condition in a contract is cited by its figure — «оплачен в
   порядке пункта 2» — and a number painted by a ::before pseudo-element is
   not in the text at all. Copy a clause out of this page to quote it in a
   message and the figures have to come with it. So decimal markers come back
   on, and ::marker only recolours them. Bullets are markdown's own dashes and
   carry no meaning, so those stay drawn. */
.of-ul,.of-ol{margin-top:12px}
.of-ul{padding-left:2px}
.of-ul li{position:relative;padding-left:28px;margin-top:8px}
.of-ul li::before{content:"";position:absolute;left:2px;top:.72em;width:11px;height:1px;
  background:var(--line-hard)}
.of-ol{list-style:decimal outside;padding-left:30px}
.of-ol li{margin-top:8px;padding-left:4px}
.of-ol li::marker{font:400 13px var(--ff-mono);color:var(--ink-65)}

.of-doc a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

@media(max-width:520px){
  .of-doc{font-size:15.5px}
  .of-toc-n{flex-basis:30px}
}

/* --- On paper -------------------------------------------------------------
   The other half of the answer to "can I have a copy". The chrome, the
   buttons and the contents belong to the screen; what prints is the document,
   in black, at a size that survives being filed. -------------------------- */
@media print{
  /* The archived banner is the exception: printed out of context, a
     superseded edition with nothing on it to say so is a dangerous piece of
     paper. */
  .p-top,.of-acts,.of-toc,.of-eds,.p-foot{display:none!important}
  .of-note:not(.of-old){display:none!important}
  .of-old{border-left-color:#000;color:#000}
  .of-old-a{display:none}
  body.panel,body.panel .page{background:#fff;color:#000}
  .p-wrap.of{max-width:none;padding:0}
  .of-title{border-bottom:1px solid #000}
  .of-doc{font-size:10.5pt;line-height:1.5}
  .of-p{margin-top:9pt}
  .of-h{margin-top:22pt;padding-top:9pt;border-top:1px solid #000;
    /* A section title at the foot of a page with its first clause overleaf is
       the classic printed-contract fault. */
    break-after:avoid;page-break-after:avoid}
  .of-h3{break-after:avoid;page-break-after:avoid}
  .of-num{color:#000}
  .of-doc a{color:#000;text-decoration:none}
  .of-ol li::marker,.of-num3,.of-toc-n{color:#000}
}