/* ============================================================================
   FTE TRACKER - the four legal pages, Odoo idiom, palette A.
   Implements design/odoo-2026/05-website.html section 8 (the ".lg"
   documentation template): sticky contents rail, one measure column,
   hanging numbers, no furniture.

   THE IMPORTANT THING ABOUT THIS FILE. These four pages are contracts. Their
   text is carried across from site/legal/*.html byte for byte, which means
   their MARKUP - and therefore their class names - is carried across too.
   So this stylesheet restyles the ORIGINAL class names (.doc .toc .content
   .c .k ol.sub ol.letters ol.meas .defs .panel .box .tw) in the new idiom,
   rather than rewriting the documents to fit a new set of names. Not one
   word of any clause was touched to produce this page.

   It loads after css/site.css, which carries every token.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. THE PAGE
   ------------------------------------------------------------------------ */
body.lg{
  background:var(--view);
  color:var(--ink);
  font-size:15px;
  line-height:1.62;
}
.lg a{color:var(--action); text-decoration:underline; text-underline-offset:3px}
.lg a:hover{text-decoration-thickness:2px}
.lg .mail{font-weight:600}

/* the same bar the application and the marketing page wear */
.lg-top{
  height:60px; background:var(--brand); color:var(--brand-ink);
  display:flex; align-items:center; position:sticky; top:0; z-index:40;
}
.lg-top .in{
  display:flex; align-items:center; gap:24px;
  width:100%; max-width:1200px; margin:0 auto; padding:0 40px;
}
/* THE BLUE BRAND NAME, FIXED.
   `.lg a` above paints every anchor in this document the action colour and
   underlines it. Two anchors are not body links and must not take it. The
   watermark in the top bar is one of them: it is an <a>, it carries no colour
   of its own, and `.lg a` (0,2,0) beat the inherited --brand-ink, so the words
   "FTE Tracker" came out blue and underlined on the green bar. The product
   name is never the action colour anywhere in this build, so the rule is
   stated here rather than by weakening `.lg a`, which the clause text needs.
   The same applies to the skip link, which was action-on-action and therefore
   invisible to the first reader who pressed Tab. */
.lg-top .s-wm{
  font-size:16px;
  color:var(--brand-ink);
  text-decoration:none;
}
.lg-top .s-wm:hover,.lg-top .s-wm:focus{color:var(--brand-ink); text-decoration:none}
.lg-top .s-wm .mk{background:var(--brand-ink); color:var(--brand)}
.lg a.skip{color:var(--action-ink); text-decoration:none}
.lg-top .docnav{display:flex; gap:18px; font-size:13.5px; font-weight:500; flex-wrap:wrap}
.lg-top .docnav a{color:var(--brand-ink); text-decoration:none; opacity:.9}
.lg-top .docnav a:hover{opacity:1; text-decoration:underline; text-underline-offset:4px}
.lg-top .docnav a[aria-current="page"]{opacity:1; font-weight:700; text-decoration:underline; text-underline-offset:4px}
.lg-top .back{
  margin-left:auto; font-size:13.5px; color:var(--brand-ink);
  text-decoration:underline; text-underline-offset:3px; white-space:nowrap;
}
.lg-rule{height:3px; background:var(--brand-dk)}

/* ---------------------------------------------------------------------------
   2. THE MASTHEAD
   ------------------------------------------------------------------------ */
.lg .mast{
  max-width:1200px; margin:0 auto; padding:44px 40px 0;
}
.lg .mast .wrap{padding:0}
.lg .record{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 14px;
}
.lg .record span{display:inline-flex; align-items:center; gap:14px}
.lg .record span + span::before{content:""; width:14px; height:1px; background:var(--line); flex:none}
.lg h1{
  font-size:34px; font-weight:700; letter-spacing:-.022em; line-height:1.12; margin:0;
}
.lg .mast .sub{
  font-size:16px; color:var(--ink-2); max-width:74ch; margin:18px 0 0; line-height:1.6;
}
.lg .stamps{
  display:flex; gap:26px; flex-wrap:wrap; margin:20px 0 0;
  padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.lg .stamp{font-size:12.5px; color:var(--ink-2)}
.lg .stamp b{font-weight:650; color:var(--ink)}

/* ---------------------------------------------------------------------------
   3. THE BODY - contents rail beside one measure column
   ------------------------------------------------------------------------ */
.lg .doc{
  max-width:1200px; margin:0 auto; padding:34px 40px 72px;
  display:grid; grid-template-columns:232px minmax(0,1fr); gap:56px; align-items:start;
}
.lg .doc > *{min-width:0}

.lg .toc{
  position:sticky; top:76px; font-size:13px;
  border-left:2px solid var(--line); padding-left:16px;
  max-height:calc(100vh - 110px); overflow-y:auto;
}
.lg .toc > summary{
  list-style:none; cursor:default;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:11px;
}
.lg .toc > summary::-webkit-details-marker{display:none}
.lg .toc-in{padding:0}
.lg .toc ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.lg .toc li{margin:0}
.lg .toc a{
  color:var(--ink-2); text-decoration:none;
  display:grid; grid-template-columns:2.4ch 1fr; gap:9px; align-items:baseline;
}
.lg .toc a:hover{color:var(--ink); text-decoration:none}
.lg .toc a i{
  font-style:normal; font-family:var(--font-mono); font-size:11.5px;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.lg .toc a.on,.lg .toc a[aria-current="true"]{color:var(--action); font-weight:650}
.lg .toc a.on i,.lg .toc a[aria-current="true"] i{color:var(--action)}
.lg .toc .grp{
  margin-top:14px; padding-top:11px; border-top:1px solid var(--line);
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------------------------------------------------------------------------
   4. THE CLAUSES
   ------------------------------------------------------------------------ */
.lg .content,.lg .prose{max-width:74ch; overflow-wrap:anywhere}
.lg .content > section,.lg .prose > section{padding-top:38px; scroll-margin-top:84px}
.lg .content > section:first-child,.lg .prose > section:first-child{padding-top:8px}

.lg h2{
  font-size:19px; font-weight:700; letter-spacing:-.015em; margin:0 0 12px;
  display:grid; grid-template-columns:2.6ch 1fr; gap:14px; align-items:baseline;
}
.lg h2 .n,.lg h2 > i{
  font-style:normal; font-family:var(--font-mono); font-size:15px; font-weight:700;
  color:var(--action); letter-spacing:0; font-variant-numeric:tabular-nums;
}
.lg h2.annex{grid-template-columns:auto 1fr; gap:14px}
.lg h2.annex .k{
  font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--action);
  letter-spacing:.04em; white-space:nowrap; background:none; border:0; padding:0;
}
.lg h3{font-size:15.5px; font-weight:650; margin:26px 0 0; letter-spacing:-.01em}
.lg h3.part{
  margin-top:30px; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.lg .lead-p{margin-top:14px; color:var(--ink-2)}

/* numbered clauses, hanging numbers - ol.sub in the Terms and the DPA,
   ol.meas in Annex 2, ol.letters for (a)(b)(c) lists */
.lg ol.sub,.lg ol.meas{list-style:none; display:grid; gap:14px; margin:16px 0 0; padding:0}
.lg ol.sub > li,.lg ol.meas > li{
  display:grid; grid-template-columns:3.4em 1fr; gap:12px;
  align-items:baseline; color:var(--ink-2); margin:0;
}
.lg ol.sub > li > .n,.lg ol.meas > li > .n{
  font-family:var(--font-mono); font-size:12.5px; font-weight:700;
  color:var(--ink-3); letter-spacing:0; font-variant-numeric:tabular-nums;
}
.lg ol.sub > li > div > p + p,.lg ol.meas > li > div > p + p{margin-top:10px}
.lg ol.sub b.t,.lg ol.meas b.t{color:var(--ink); font-weight:650}
.lg ol.sub b,.lg ol.meas b{color:var(--ink); font-weight:650}

.lg ol.letters{list-style:none; display:grid; gap:9px; margin:11px 0 0; padding:0}
.lg ol.letters > li{display:grid; grid-template-columns:2.2em 1fr; gap:10px; align-items:baseline; margin:0}
.lg ol.letters > li > .n{font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--ink-3)}

/* the Privacy Policy and the Subprocessor list use .c blocks instead */
.lg .c{
  display:grid; grid-template-columns:3.4em 1fr; gap:0 12px;
  align-items:baseline; margin-top:14px; color:var(--ink-2);
}
.lg .c > i{
  grid-column:1; grid-row:1; font-style:normal;
  font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.lg .c > :not(i){grid-column:2}
.lg .c p + p{margin-top:10px}
.lg .c b,.lg .c strong{color:var(--ink); font-weight:650}
.lg .c .sub{margin-top:10px; padding-left:18px; list-style:disc; display:block; gap:0}
.lg .c .sub li{margin:0 0 7px; display:list-item; grid-template-columns:none}
.lg .c .sub li::marker{color:var(--line)}
.lg .plain{color:var(--ink-2)}

/* defined terms */
.lg .defs{list-style:none; display:grid; gap:0; margin:16px 0 0; padding:0;
  font-size:14.5px; color:var(--ink-2)}
.lg .defs > li{padding:8px 0; border-bottom:1px solid var(--line-soft); margin:0}
.lg .defs > li:last-child{border-bottom:0}
.lg .defs > li > b,.lg .defs b{color:var(--ink); font-weight:650}

.lg dl{display:grid; gap:13px; margin-top:16px}
.lg dt{font-weight:650; color:var(--ink)}
.lg dd{margin:3px 0 0; color:var(--ink-2)}

/* the monospace key - a field name, an identifier, a header */
.lg .k{
  font-family:var(--font-mono); font-size:12.5px;
  background:var(--g200); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:1px 5px; color:var(--ink);
}

/* ---------------------------------------------------------------------------
   5. THE CALLED-OUT PANELS. The ordinary one is the action colour; the one
   the reader must not skim is the bad colour, and it says so in words as
   well as in colour.
   ------------------------------------------------------------------------ */
.lg .panel,.lg .box{
  margin:18px 0; padding:14px 18px;
  border:1px solid var(--line); border-left:3px solid var(--action);
  border-radius:0 var(--r) var(--r) 0;
  background:var(--action-soft);
  max-width:74ch;
}
.lg .panel .h,.lg .box h3{
  display:flex; align-items:center; gap:9px; margin:0;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--action);
}
.lg .panel .b,.lg .box p{margin-top:9px; font-size:14.5px; line-height:1.55; color:var(--ink-2)}
.lg .panel .b p + p,.lg .box p + p{margin-top:10px}
.lg .panel .b b,.lg .box b{color:var(--ink); font-weight:650}

.lg .panel.warn,.lg .box.hard{
  border-color:var(--bad); border-left-color:var(--bad); background:var(--bad-bg);
}
.lg .panel.warn .h,.lg .box.hard h3{color:var(--bad)}
.lg .panel.warn .b,.lg .box.hard p{color:var(--ink)}
.lg .panel.warn .b b,.lg .box.hard b,.lg .box.hard strong{color:var(--ink); font-weight:700}
.lg .panel.warn a{color:var(--bad); font-weight:650}

.lg .caps{font-size:14px; letter-spacing:.005em}

/* ---------------------------------------------------------------------------
   6. TABLES
   ------------------------------------------------------------------------ */
.lg .tw{
  margin-top:18px; overflow-x:auto;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--view);
}
.lg table{border-collapse:collapse; width:100%; min-width:520px; font-size:13.5px}
/* .prose / .content carry overflow-wrap:anywhere so a long address or an
   identifier cannot widen the measure. Inside a table that rule shreds the
   first column into one syllable per line ("Sub pro ces sor"), so a cell
   breaks only a word that genuinely does not fit. */
.lg th,.lg td{overflow-wrap:break-word; word-break:normal}
.lg .tw table th:first-child,.lg .tw table td:first-child{min-width:13ch}
.lg .tw.wide table{min-width:860px}
.lg th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
  border-bottom:2px solid var(--ink); padding:10px 14px; background:var(--g100);
}
.lg td{
  border-bottom:1px solid var(--line-soft); padding:10px 14px;
  vertical-align:top; color:var(--ink-2);
}
.lg tr:last-child td{border-bottom:0}
.lg td b{color:var(--ink); font-weight:650}
.lg .scroll-note{
  margin-top:10px; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ---------------------------------------------------------------------------
   7. THE FOOT
   ------------------------------------------------------------------------ */
.lg-ft{border-top:1px solid var(--line); background:var(--g100); padding:28px 0 34px}
.lg-ft .in{
  max-width:1200px; margin:0 auto; padding:0 40px;
  font-size:12.5px; color:var(--ink-3);
}
.lg-ft .links{display:flex; gap:22px; flex-wrap:wrap; font-size:13.5px; font-weight:600; margin-bottom:14px}
.lg-ft .links a{color:var(--ink-2); text-decoration:none}
.lg-ft .links a:hover{color:var(--action); text-decoration:underline; text-underline-offset:3px}
.lg-ft .base{display:flex; gap:20px; flex-wrap:wrap; align-items:center}

/* ---------------------------------------------------------------------------
   8. NARROW. The rail stops being a rail and becomes an ordinary disclosure
   above the document, which is what it is on a phone.
   ------------------------------------------------------------------------ */
@media (max-width:1080px){
  .lg .doc{grid-template-columns:1fr; gap:26px; padding:28px 24px 60px}
  .lg .mast{padding:32px 24px 0}
  .lg-top .in,.lg-ft .in{padding:0 24px}
  .lg .toc{
    position:static; max-height:none; overflow:visible;
    border-left:0; padding:14px 16px;
    border:1px solid var(--line); border-radius:var(--r-lg); background:var(--g100);
  }
  .lg .toc > summary{cursor:pointer; margin-bottom:0}
  .lg .toc[open] > summary{margin-bottom:11px}
  .lg .toc > summary::after{
    content:""; float:right; width:8px; height:8px; margin-top:4px;
    border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
    transform:rotate(45deg);
  }
  .lg .toc[open] > summary::after{transform:rotate(225deg); margin-top:7px}
  .lg-top .docnav{display:none}
}
@media (max-width:760px){
  .lg h1{font-size:26px}
  .lg h2{font-size:17px; grid-template-columns:2.4ch 1fr; gap:10px}
  .lg .doc{padding:22px 20px 52px}
  .lg .mast{padding:26px 20px 0}
  .lg-top .in,.lg-ft .in{padding:0 20px}
  .lg .stamps{gap:12px 22px}
  .lg ol.sub > li,.lg ol.meas > li,.lg .c{grid-template-columns:3em 1fr; gap:0 10px}
  .lg ol.sub > li,.lg ol.meas > li{gap:10px}
}

/* ---------------------------------------------------------------------------
   9. PRINT. A clause is usually read on paper. The rail goes, the numbering
   stays, the ground goes.
   ------------------------------------------------------------------------ */
@media print{
  .lg-top,.lg-rule,.lg .toc,.lg-ft .links{display:none !important}
  body.lg{background:#ffffff; color:#000000; font-size:10.5pt}
  .lg .doc{display:block; padding:0; max-width:none}
  .lg .content,.lg .prose{max-width:none}
  .lg .mast{padding:0}
  .lg .panel,.lg .box{background:none; border:1px solid #000000; border-left-width:1px}
  .lg .panel .h,.lg .box h3{color:#000000}
  .lg .content > section,.lg .prose > section{break-inside:auto; padding-top:16px}
  .lg h2{break-after:avoid}
  .lg .tw{overflow:visible; border-color:#000000}
  .lg table{min-width:0 !important}
}