/* ============================================================================
   Liza Zimin — legal pages, desktop skin «Графит» · 2026-09-17
   Big-screen layer for privacy / terms / refund / accessibility / cookies.
   Loaded AFTER /assets/legal.css with media="(min-width: 900px)"; every rule
   also lives inside @media (min-width:900px). Phones/tablets (<900px) are
   untouched — another team owns them.

   Idea: the page becomes a document, not a web page. A graphite masthead band
   (logo + language toggle) and a graphite footer band bookend an ivory desk on
   which the text sits as a single sheet of white paper at a 68–72 character
   measure. A sticky table of contents lives on the outer rail, built at runtime
   by /assets/legal-toc.js (desktop only; it adds nothing to the DOM below
   900px). All horizontal geometry uses logical properties, so the Hebrew view
   (html[dir=rtl]) mirrors: rail on the right, lime section ticks on the right,
   current-item bar on the right.

   Type stays Rubik (legal.css's deliberate one-voice choice: Rubik covers
   Hebrew + Cyrillic, so both language versions of a binding document read the
   same). Body 17px / 1.75.

   Contrast (WCAG AA / IS 5568): graphite text on white ≈ 15:1; --ink-70 on
   white ≈ 8.7:1; --ink-45 on white ≈ 6:1; white .78 on graphite ≈ 11:1;
   white .62 on graphite ≈ 7:1; lime is never used as text on light surfaces —
   only as 2px rules and as a fill under graphite text.
   Focus: 3px white ring on the graphite bands, 3px graphite ring on the sheet.
   Motion: colour/opacity only, ease cubic-bezier(.23,1,.32,1), hovers gated to
   (hover:hover) and (pointer:fine), everything off under reduced motion.
   ========================================================================== */
@media (min-width: 900px) {

  /* ---- 0. Tokens ---------------------------------------------------------- */
  :root{
    --lg-head:76px;               /* masthead height (scroll-margin anchor)   */
    --lg-rail:16rem;              /* table-of-contents rail                   */
    --lg-sheet:44rem;             /* paper width -> ~70 character measure     */
    --lg-gap:clamp(3rem,5vw,5.5rem);
    --lg-gutter:clamp(2rem,4vw,3.5rem);
    /* one shared measure for masthead, desk and footer, so the logo, the rail
       and the footer all start on the same vertical line */
    --lg-wrap:calc(var(--lg-rail) + var(--lg-gap) + var(--lg-sheet) + 2 * var(--lg-gutter));
    --lg-ease:cubic-bezier(.23,1,.32,1);
    --lg-hair:rgba(23,25,27,.10); /* hairline on light                        */
    --lg-hair-dark:rgba(255,255,255,.10);
    --lg-on-dark:rgba(255,255,255,.78);
    --lg-on-dark-2:rgba(255,255,255,.62);
  }

  body{font-size:17px;line-height:1.75}

  /* ---- 1. Masthead — graphite band ---------------------------------------- */
  header.site{
    background:var(--graphite);
    border-bottom:1px solid var(--lg-hair-dark);
  }
  header.site .bar{
    max-width:var(--lg-wrap);
    padding-inline:var(--lg-gutter);
    min-height:var(--lg-head);
    gap:2rem;
  }
  header.site .brand svg{height:36px}
  header.site .brand svg g{fill:var(--white)}
  header.site .brand svg g:first-child{fill:var(--lime)}   /* the "Л" mark */

  header.site .langtoggle{border-color:rgba(255,255,255,.32)}
  header.site .langtoggle button{
    min-height:44px;padding:0 1.2rem;font-size:.9375rem;
    color:var(--lg-on-dark);
    transition:background 220ms var(--lg-ease),color 220ms var(--lg-ease);
  }
  header.site .langtoggle button[aria-pressed="true"]{
    background:var(--lime);color:var(--graphite);font-weight:600;
  }
  @media (hover:hover) and (pointer:fine){
    header.site .langtoggle button:not([aria-pressed="true"]):hover{
      background:rgba(255,255,255,.09);color:var(--white);
    }
  }
  header.site :focus-visible{outline-color:var(--white)}
  .skip-link{background:var(--lime);color:var(--graphite);border-radius:0 0 6px 6px}

  /* ---- 2. The desk: rail + sheet ------------------------------------------ */
  /* Base (no table of contents — short pages, or a browser that never ran the
     script): one centred sheet. */
  main{
    max-width:calc(var(--lg-sheet) + 2 * var(--lg-gutter));
    margin-inline:auto;
    padding-block:clamp(3.25rem,4.5vw,4.75rem) clamp(5rem,7vw,7rem);
    padding-inline:var(--lg-gutter);
  }
  /* Enhanced: html.has-ltoc is set by legal-toc.js once the rail exists. */
  html.has-ltoc main{
    max-width:var(--lg-wrap);
    display:grid;
    grid-template-columns:var(--lg-rail) minmax(0,1fr);
    column-gap:var(--lg-gap);
    align-items:start;
  }
  html.has-ltoc main > .ltoc{grid-column:1}
  html.has-ltoc main > section[data-langsection]{grid-column:2}

  /* ---- 3. Table of contents (rail) ---------------------------------------- */
  .ltoc{
    position:sticky;
    top:calc(var(--lg-head) + 2.25rem);
    align-self:start;
    max-height:calc(100vh - var(--lg-head) - 4.5rem);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    padding-block:.25rem 1rem;
  }
  .ltoc::before{                       /* lime tick instead of a label */
    content:"";display:block;width:32px;height:2px;
    background:var(--lime);margin-bottom:1.5rem;
  }
  .ltoc .ltoc__list{list-style:none;margin:0;padding:0}
  .ltoc .ltoc__list li{margin:0}
  .ltoc a.ltoc__link{
    display:flex;align-items:center;min-height:44px;
    padding:.5rem .875rem;
    border-inline-start:2px solid transparent;
    border-radius:0 6px 6px 0;
    font-size:.9375rem;line-height:1.35;font-weight:400;
    color:var(--ink-45);
    text-decoration:none;
    transition:color 220ms var(--lg-ease),background-color 220ms var(--lg-ease),
               border-color 220ms var(--lg-ease);
  }
  html[dir="rtl"] .ltoc a.ltoc__link{border-radius:6px 0 0 6px}
  .ltoc a.ltoc__link.is-current{
    color:var(--graphite);font-weight:600;
    border-inline-start-color:var(--graphite);
  }
  @media (hover:hover) and (pointer:fine){
    .ltoc a.ltoc__link:hover{color:var(--graphite);background:var(--ivory-dim)}
  }

  /* ---- 4. The sheet -------------------------------------------------------- */
  main > section[data-langsection]{
    background:var(--white);
    border:1px solid var(--ivory-dim);
    border-radius:14px;
    padding:clamp(2.75rem,3.6vw,3.75rem) clamp(2.5rem,3.4vw,3.5rem) clamp(3rem,4vw,4rem);
    box-shadow:0 30px 60px -48px rgba(23,25,27,.45);   /* the one soft shadow */
  }

  /* ---- 5. Reading type ----------------------------------------------------- */
  main h1{
    font-size:clamp(2.1rem,2.9vw,2.875rem);
    font-weight:700;line-height:1.08;letter-spacing:-.028em;
    margin-bottom:.625rem;
    scroll-margin-top:calc(var(--lg-head) + 1.5rem);
  }
  /* the language toggle moves focus to the heading; keep the ring tight */
  main h1:focus-visible{outline-offset:4px;border-radius:4px}
  main .updated{font-size:.9375rem;color:var(--ink-45);margin-bottom:2rem}
  main .lead{
    font-size:1.1875rem;line-height:1.68;color:var(--ink-70);
    margin-bottom:3rem;padding-bottom:2.25rem;
    border-bottom:1px solid var(--lg-hair);
  }
  main h2{
    position:relative;
    font-size:1.5rem;font-weight:700;line-height:1.28;letter-spacing:-.02em;
    margin:3.25rem 0 1rem;padding-top:2.25rem;
    border-top:1px solid var(--lg-hair);
    scroll-margin-top:calc(var(--lg-head) + 1.5rem);
  }
  main h2::before{                      /* lime tick riding the hairline */
    content:"";position:absolute;top:-1px;inset-inline-start:0;
    width:32px;height:2px;background:var(--lime);
  }
  main h2:first-of-type{border-top:0;padding-top:0}
  main h2:first-of-type::before{content:none}
  main h3{
    font-size:1.25rem;font-weight:600;letter-spacing:-.012em;line-height:1.35;
    color:var(--graphite);margin:2.25rem 0 .75rem;
    scroll-margin-top:calc(var(--lg-head) + 1.5rem);
  }
  main p,main ul,main ol{margin-bottom:1.125rem}
  main ul,main ol{padding-inline-start:1.5rem}
  main li{margin-bottom:.5rem}
  main li::marker{color:var(--ink-45)}
  main strong{font-weight:600;color:var(--graphite)}
  main code{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:.875em;background:var(--ivory);color:var(--graphite);
    padding:.05em .28em;border-radius:3px;
  }
  main a:not(.brand):not(.skip-link):not(.ltoc__link){
    text-underline-offset:4px;text-decoration-color:rgba(23,25,27,.35);
  }
  @media (hover:hover) and (pointer:fine){
    main a:not(.brand):not(.skip-link):not(.ltoc__link):hover{
      text-decoration-color:var(--lime);text-decoration-thickness:2px;
    }
  }

  /* ---- 6. Tables ----------------------------------------------------------- */
  /* tables breathe a little wider than the reading measure, into the sheet's
     own padding — they are scanned, not read line by line */
  main .tablewrap{
    margin-block:1.5rem 2rem;margin-inline:-1.5rem;
    border:1px solid var(--lg-hair);border-radius:6px;overflow:hidden;
  }
  main table{font-size:.9375rem;line-height:1.6;margin-bottom:0}
  main th,main td{border:0;border-bottom:1px solid var(--lg-hair);padding:.85rem 1.05rem}
  main thead th{background:var(--ivory);font-weight:600;color:var(--ink-70)}
  main tbody tr:last-child td{border-bottom:0}

  /* ---- 7. Back link -------------------------------------------------------- */
  main .backlink{
    margin-top:3rem;padding-top:2rem;border-top:1px solid var(--lg-hair);
    display:inline-flex;
  }

  /* ---- 8. Footer — graphite band ------------------------------------------- */
  footer.site{background:var(--graphite);border-top:0}
  footer.site > div{
    max-width:var(--lg-wrap);
    padding:clamp(2.75rem,4vw,3.5rem) var(--lg-gutter);
    font-size:.9375rem;color:var(--lg-on-dark-2);
    gap:1.25rem 3rem;align-items:center;
  }
  footer.site strong{color:var(--white);font-weight:600}
  /* the document links always take their own row under a hairline */
  footer.site nav{
    width:100%;gap:.75rem 1.75rem;
    padding-top:1.5rem;border-top:1px solid var(--lg-hair-dark);
  }
  footer.site a:not(.brand),
  footer.site .consent-reopen{
    color:var(--lg-on-dark-2);
    text-decoration-color:rgba(255,255,255,.28);text-underline-offset:4px;
    transition:color 220ms var(--lg-ease),text-decoration-color 220ms var(--lg-ease);
  }
  @media (hover:hover) and (pointer:fine){
    footer.site a:not(.brand):hover,
    footer.site .consent-reopen:hover{color:var(--lime);text-decoration-color:var(--lime)}
  }
  footer.site :focus-visible{outline-color:var(--white)}

  /* ---- 9. Reduced motion --------------------------------------------------- */
  @media (prefers-reduced-motion:reduce){
    header.site .langtoggle button,
    .ltoc a.ltoc__link,
    footer.site a:not(.brand),
    footer.site .consent-reopen,
    main a:not(.brand):not(.skip-link):not(.ltoc__link){transition:none}
  }
}