/* legal.css — the /rules/ page (terms of use).
   Loaded only for _PLUGIN_=='rules' (header.php), so none of this weighs on any
   other surface.

   ⚠⚠ COLOURS — READ THIS BEFORE EDITING.
   The portal has TWO token sets and they are NOT interchangeable:
     · `--cp-*`  the real design palette (#15211C ink, #5C6A62 muted, #CBD4CC
                 line, #1F3D30 pine) — greenish, warm, what every shipped
                 surface uses;
     · `--mp-*`  an older, bluish-grey set still on mp.css :root
                 (#1b1f24 ink, #6b7280 muted, #e3e6ea line).
   The `--cp-*` set is declared in a `:root` block inside EACH per-plugin file
   (results.css:8, listing.css, store.css, account.css) — so a page that loads
   none of those, like this one, does not get them at all. Building this file on
   `--mp-*` fallbacks is exactly how it first shipped, and it looked cheap:
   Tailwind grey text on a green-grey portal, with muted copy measuring 4.25:1
   instead of the 5.0:1 the same token gives on the LRP.
   Hence the `:root` block below — the same declaration the other plugin files
   carry. app-mobile.css:429 re-points these under html[data-theme="dark"], which
   is why this file needs almost no dark rules of its own; the ones it does have
   cover literal tints (the amber notice) that no token can reach.

   Reading a 20-article contract on a phone is the actual design problem here, so
   the type is set for a measure of ~68 characters, every article is its own card,
   and each one opens with a plain-language line the reader can scan instead of
   the legal wording. */

:root{
  --cp-ink:#15211C; --cp-pine:#1F3D30; --cp-pine2:#2E5A45; --cp-fern:#4E8163;
  --cp-amber:#E08A2C; --cp-amber-soft:#F2C078; --cp-paper:#EFF1ED; --cp-card:#fff;
  --cp-mist:#E2E7E1; --cp-line:#CBD4CC; --cp-muted:#5C6A62; --cp-radius:13px;
  --cp-card-2:#F6F8F4; --fit-bg:#e4efe8; --fit-fg:#1c6b3f; --fit-line:#c7e0d1;
}

/* ---------- page head ----------------------------------------------------
   The terms used to open with a bare browser-default <h1>, which read as an
   afterthought on the one document every user is required to accept. This is
   the portal's own hero pattern (.garage-hero, listing.css:299) — same mist
   gradient, same 18px radius, same Archivo clamp — so the page belongs to the
   app instead of looking like a file someone pasted in. */
.lg-hero{
  background:linear-gradient(135deg,#ffffff,var(--cp-mist,#E2E7E1));
  border:1px solid var(--cp-line,#CBD4CC);border-radius:18px;
  padding:30px 30px 26px;margin:14px 0 22px;
}
.lg-hero .lgh-kick{
  display:inline-flex;align-items:center;gap:7px;
  font:700 11.5px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cp-pine,#1F3D30);
  background:rgba(255,255,255,.7);border:1px solid var(--cp-line,#CBD4CC);
  padding:7px 12px;border-radius:999px;margin-bottom:14px;
}
.lg-hero .lgh-kick svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.lg-hero h1{
  margin:0;font-family:Archivo,system-ui,sans-serif;font-weight:800;
  font-size:clamp(26px,3vw,36px);line-height:1.12;letter-spacing:-.02em;
  color:var(--cp-ink,#15211C);
}
.lg-hero .lgh-sub{
  margin:12px 0 0;max-width:62ch;
  font:400 15.5px/1.55 Inter,system-ui,sans-serif;color:var(--cp-muted,#5C6A62);
}
.lg-hero .lgh-meta{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin:20px 0 0;padding:16px 0 0;
  border-top:1px solid var(--cp-line,#CBD4CC);
}
.lg-hero .lgh-meta > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.lg-hero .lgh-meta dt{
  font:600 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;
  color:var(--cp-muted,#5C6A62);
}
.lg-hero .lgh-meta dd{
  margin:0;font:600 14px/1.3 "JetBrains Mono",ui-monospace,monospace;color:var(--cp-ink,#15211C);
}
.lg-hero .lgh-binds{
  margin:14px 0 0;font:400 13px/1.5 Inter,system-ui,sans-serif;color:var(--cp-muted,#5C6A62);
}

/* the placeholder marker has to work in the head too, not only inside .cp-legal */
.lg-hero [data-fill]{
  background:#FDF4E3;border-bottom:1px dashed #C8912F;
  padding:0 4px;border-radius:3px;color:#6b4a12;font-weight:700;
}

.cp-legal{
  --lg-measure:68ch;
  max-width:var(--lg-measure);
  margin:0 auto;
  font:400 16px/1.68 Inter,system-ui,sans-serif;
  color:var(--cp-ink,#15211C);
}

/* ---------- identification ----------------------------------------------
   (The old `.lg-meta` version/date line was removed from the documents once
   the page head carried the same three facts — it was the landing-links
   problem again: the same information twice on one screen.) */
.cp-legal .lg-id{
  margin:0 0 22px;padding:18px 20px;
  background:var(--cp-card,#fff);border:1px solid var(--cp-line,#CBD4CC);border-radius:13px;
}
.cp-legal .lg-id h2{margin:0 0 8px;font:700 17px/1.3 Archivo,Inter,system-ui,sans-serif;color:var(--cp-ink,#15211C)}
.cp-legal .lg-id p{margin:0 0 14px}
.cp-legal .lg-id dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 18px;margin:0}
.cp-legal .lg-id dt{font-weight:600;font-size:14px;color:var(--cp-muted,#5C6A62)}
.cp-legal .lg-id dd{margin:0;font-size:14.5px}
.cp-legal .lg-note{margin:14px 0 0;font-size:13.5px;color:var(--cp-muted,#5C6A62)}

/* ---------- the "not ready to publish" notice ---------------------------
   Deliberately loud. This block is the difference between a draft and a
   published contract, so it must be impossible to miss or to leave in. */
.cp-legal .lg-fill{
  margin:0 0 22px;padding:16px 18px;
  background:#FDF4E3;border:1px solid #E6C48A;border-left:4px solid var(--cp-amber,#E08A2C);
  border-radius:13px;font-size:14.5px;line-height:1.6;color:#4a3410;
}
.cp-legal .lg-fill strong{display:block;margin-bottom:6px;font-size:15px;color:#3a2408}
.cp-legal .lg-fill p{margin:0 0 8px}
.cp-legal .lg-fill ul{margin:0 0 10px;padding-left:20px}
.cp-legal .lg-fill li{margin:3px 0}
.cp-legal .lg-fill > :last-child{margin-bottom:0}

/* every unfilled placeholder is marked in the text itself, so a missed one
   is visible on the page rather than only in the source */
.cp-legal [data-fill]{
  background:#FDF4E3;border-bottom:1px dashed #C8912F;
  padding:0 3px;border-radius:3px;color:#6b4a12;font-weight:600;
}

/* ---------- the short summary ------------------------------------------- */
.cp-legal .lg-sum{
  margin:0 0 24px;padding:18px 20px;
  background:var(--fit-bg,#e4efe8);border:1px solid var(--cp-line,#CBD4CC);border-radius:13px;
}
.cp-legal .lg-sum h2{margin:0 0 8px;font:700 17px/1.3 Archivo,Inter,system-ui,sans-serif}
.cp-legal .lg-sum > p{margin:0 0 12px;font-size:14px;color:var(--cp-muted,#5C6A62)}
.cp-legal .lg-sum ul{margin:0;padding-left:20px}
.cp-legal .lg-sum li{margin:7px 0;font-size:15px}

/* ---------- tab navigation (built by cp-legal.js) ------------------------
   Desktop gets a horizontal tab bar; mobile gets the same bar as a swipeable
   rail. This is deliberately the portal's existing `.settabs` language —
   nowrap items on a scrollable row, muted label, pine when selected, amber
   underline — so the terms page reads as part of the app rather than as a
   stray document.

   Everything here is scoped to `.lg-tabbed`, the class the script adds once it
   has actually built the tabs. Without JS none of it applies and the document
   stays a single readable flow. */
.cp-legal .lg-tabs{display:none}

/* The 68ch measure exists for READING. Navigation is not reading, so once the
   tabs are built the wrapper stops constraining width and the measure moves
   down onto the panels instead — otherwise the seven tabs are squeezed into
   686px and the bar scrolls on a 1280px desktop for no reason (measured: it
   needed 956px). The panels stay centred at the same measure as before, so the
   prose is unchanged. */
.cp-legal.lg-tabbed{max-width:none}
.cp-legal.lg-tabbed .lg-panel{max-width:var(--lg-measure);margin:0 auto}
.cp-legal.lg-tabbed .lg-foot{max-width:var(--lg-measure);margin-left:auto;margin-right:auto}

.cp-legal.lg-tabbed .lg-tabs{
  display:flex;gap:2px;margin:0 0 20px;padding:0;
  border-bottom:1px solid var(--cp-line,#CBD4CC);
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  /* ⚠ NO SCROLLBAR. A 3px thumb sat directly under the tabs, moved with the
     scroll position and read as the selected-tab underline — I mistook it for
     one myself in a screenshot. App rails do not show a scrollbar, and on
     desktop the bar does not scroll at all, so there is nothing to indicate. */
  scrollbar-width:none;-ms-overflow-style:none;
}
.cp-legal.lg-tabbed .lg-tabs::-webkit-scrollbar{display:none}

.cp-legal.lg-tabbed .lg-tab{
  position:relative;flex:0 0 auto;scroll-snap-align:start;
  display:inline-flex;align-items:center;
  min-height:44px;                  /* WCAG 2.2 target size — the 360px block trims the padding and took it to 43px */
  padding:13px 15px;border:0;background:none;cursor:pointer;
  font:600 14px/1.3 Inter,system-ui,sans-serif;color:var(--cp-muted,#5C6A62);
  white-space:nowrap;transition:color .18s;
}
.cp-legal.lg-tabbed .lg-tab:hover{color:var(--cp-ink,#15211C)}
.cp-legal.lg-tabbed .lg-tab[aria-selected="true"]{color:var(--cp-pine,#1F3D30)}
/* ⚠ `bottom:0`, NOT the -1px that the desktop `.settabs` uses. This bar is a
   horizontal scroller, and a scroller with `overflow-x:auto` clips vertically
   too — at -1px the indicator sat exactly on the clip edge and was cut away,
   so the selected tab had no visible marker at all. Measured: tab bottom 392,
   bar bottom 393. Inside the box it is safe. */
.cp-legal.lg-tabbed .lg-tab[aria-selected="true"]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;
  background:var(--cp-amber,#E08A2C);border-radius:2px 2px 0 0;
}
.cp-legal.lg-tabbed .lg-tab:focus-visible{outline:2px solid var(--cp-pine,#1F3D30);outline-offset:-3px;border-radius:6px}

.cp-legal.lg-tabbed .lg-panel[hidden]{display:none}
.cp-legal.lg-tabbed .lg-panel:focus{outline:none}

/* ---------- table of contents ------------------------------------------- */
.cp-legal .lg-toc{
  margin:0 0 28px;padding:16px 20px;
  border:1px solid var(--cp-line,#CBD4CC);border-radius:13px;background:var(--cp-card,#fff);
}
.cp-legal .lg-toc h2{margin:0 0 10px;font:700 15px/1.3 Archivo,Inter,system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.04em;color:var(--cp-muted,#5C6A62)}
.cp-legal .lg-toc ol{margin:0;padding-left:22px;columns:2;column-gap:26px}
.cp-legal .lg-toc li{margin:4px 0;break-inside:avoid;font-size:14.5px}
.cp-legal .lg-toc a{color:var(--cp-ink,#15211C);text-decoration:none;border-bottom:1px solid transparent}
.cp-legal .lg-toc a:hover{color:var(--cp-pine,#1F3D30);border-bottom-color:currentColor}

/* ---------- the articles ------------------------------------------------- */
.cp-legal section{
  margin:0 0 14px;padding:20px 22px;
  background:var(--cp-card,#fff);border:1px solid var(--cp-line,#CBD4CC);border-radius:13px;
  scroll-margin-top:96px;   /* the sticky chrome must not cover the heading a TOC link jumps to */
}
.cp-legal section h2{
  margin:0 0 10px;font:700 18px/1.35 Archivo,Inter,system-ui,sans-serif;color:var(--cp-ink,#15211C);
}

/* the plain-language line that opens each article */
.cp-legal .lg-plain{
  margin:0 0 14px;padding:10px 14px;
  background:var(--fit-bg,#e4efe8);border-left:3px solid var(--cp-pine,#1F3D30);
  border-radius:0 9px 9px 0;font-size:14.5px;line-height:1.6;color:var(--cp-ink,#15211C);
}

.cp-legal section > ol,
.cp-legal section > ul{margin:0;padding-left:22px}
.cp-legal section > ol > li,
.cp-legal section > ul > li{margin:9px 0}
.cp-legal section ol ol{margin:8px 0 4px;padding-left:20px}
.cp-legal section ol ol > li{margin:6px 0}
.cp-legal section > p{margin:0 0 10px}
.cp-legal section > :last-child{margin-bottom:0}

.cp-legal .lg-defs{list-style:none;padding-left:0}
.cp-legal .lg-defs li{
  margin:0;padding:9px 0;border-bottom:1px solid var(--cp-line,#CBD4CC);
}
.cp-legal .lg-defs li:last-child{border-bottom:0;padding-bottom:0}

.cp-legal .lg-foot{
  margin:22px 0 0;padding-top:16px;border-top:1px solid var(--cp-line,#CBD4CC);
  font-size:14px;line-height:1.6;color:var(--cp-muted,#5C6A62);
}

/* ---------- dark ---------------------------------------------------------
   Only the two literal-tint blocks need remapping; everything else rides the
   tokens. The amber pair is the project's standard dark amber (#3A2D16 /
   #E6C294) — do NOT invent a new one. Dark is mobile-only, matching the rest
   of the app. */
@media(max-width:768px){
  html[data-theme="dark"] .lg-hero{
    background:linear-gradient(135deg,#363D3A,#292E2C);border-color:#586760;
  }
  /* ⚠ #5FA584 on the dark hero measures 3.82:1 — under AA for 11.5px text.
     Stepped up to the lighter token of the same pair (--mp-primary-hover),
     not a new colour. */
  html[data-theme="dark"] .lg-hero .lgh-kick{
    background:rgba(255,255,255,.06);border-color:#586760;
    color:var(--cp-pine2,#7EB99E);
  }
  html[data-theme="dark"] .lg-hero [data-fill]{
    background:#3A2D16;border-bottom-color:#E6C294;color:#E6C294;
  }
  html[data-theme="dark"] .cp-legal .lg-fill{
    background:#3A2D16;border-color:#5c4a24;border-left-color:#E6C294;color:#E6C294;
  }
  html[data-theme="dark"] .cp-legal .lg-fill strong{color:#F2D9AC}
  html[data-theme="dark"] .cp-legal [data-fill]{
    background:#3A2D16;border-bottom-color:#E6C294;color:#E6C294;
  }
}

/* ---------- mobile ------------------------------------------------------- */
@media(max-width:768px){
  .lg-hero{padding:22px 18px 20px;border-radius:16px;margin:10px 0 18px}
  .lg-hero .lgh-kick{font-size:11px;padding:6px 11px;margin-bottom:12px}
  .lg-hero h1{font-size:27px;line-height:1.15}
  .lg-hero .lgh-sub{font-size:14.5px;margin-top:10px}
  /* Two short pairs share a row and the long one takes the full width.
     ⚠ Source order is version / date / reading-time, but the DATE is the wide
     one — "[date de publication]" wrapped to two lines inside a 143px column
     and threw the row out of alignment. `order` puts reading time up beside
     version and drops the date to its own full-width row, without changing the
     markup, and `align-items:start` keeps the labels on one baseline. */
  .lg-hero .lgh-meta{
    display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;
    align-items:start;margin-top:16px;padding-top:14px;
  }
  .lg-hero .lgh-meta > div:nth-child(1){order:1}
  .lg-hero .lgh-meta > div:nth-child(3){order:2}
  .lg-hero .lgh-meta > div:nth-child(2){order:3;grid-column:1/-1}
  .lg-hero .lgh-meta dd{font-size:13.5px}
  .lg-hero .lgh-binds{font-size:12.5px;margin-top:12px}

  .cp-legal{font-size:16px;line-height:1.65}
  .cp-legal .lg-toc ol{columns:1}            /* two columns are unreadable at 375 */

  /* The tab bar becomes the app's swipeable rail. It is pulled out to the full
     window width and re-padded, so the row bleeds to both screen edges the way
     every other rail in the app does, instead of stopping inside the 16px page
     gutter and looking clipped.
     ⚠ The negative margin is exactly the .container.mp-page gutter
     (header.php:358). If that gutter ever changes, this changes with it. */
  .cp-legal.lg-tabbed .lg-tabs{
    margin:0 -16px 18px;padding:0 16px;
    scroll-padding-left:16px;
    scroll-snap-type:x mandatory;
  }
  .cp-legal.lg-tabbed .lg-tab{padding:13px 14px;font-size:14.5px}
  .cp-legal.lg-tabbed .lg-tab[aria-selected="true"]::after{left:10px;right:10px}
  .cp-legal .lg-id,
  .cp-legal .lg-sum,
  .cp-legal .lg-toc{padding:15px 16px}
  .cp-legal section{padding:16px 16px;border-radius:12px}
  .cp-legal section h2{font-size:16.5px}
  .cp-legal .lg-plain{padding:9px 12px;font-size:14px}
  .cp-legal section > ol,
  .cp-legal section > ul{padding-left:19px}
  .cp-legal section ol ol{padding-left:17px}
  .cp-legal .lg-id dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .cp-legal .lg-id dt{margin-top:8px}
  .cp-legal .lg-id dd{margin-bottom:2px}
}

@media(max-width:360px){
  /* ⚠ Only the tab's own padding shrinks here. The rail's negative margin must
     stay at the .container.mp-page gutter, which is 16px at EVERY width —
     measured, after briefly matching it to the section padding instead and
     leaving a 3px sliver of background down both edges. */
  .cp-legal.lg-tabbed .lg-tab{padding:12px 12px}
  .cp-legal section{padding:14px 13px}
  .cp-legal .lg-id,
  .cp-legal .lg-sum,
  .cp-legal .lg-toc,
  .cp-legal .lg-fill{padding:13px}
  .cp-legal section > ol,
  .cp-legal section > ul{padding-left:17px}
}