/* ============================================================
   travelflo — shared skin for the three legal documents.

   The palette tokens are written by app.js at boot, so anything
   the visitor picked on the search pages carries over here. The
   values below are the "fog" defaults, present so the first
   paint is already correct instead of flashing unstyled.
   ============================================================ */
:root{
  --brand:#3E5658;
  --brand-deep:#2C3F41;
  --brand-soft:#E1E8E8;
  --brand-wash:rgba(255,255,255,.14);
  --accent:#E6D8C3;
  --accent-deep:#D0BFA6;
  --ink:#1A2223;
  --ink-2:#5C6869;
  --ink-3:#95A0A1;
  --paper:#EFF2F1;
  --white:#FAFCFB;
  --rule:#DEE4E3;

  --display:"Unbounded",system-ui,sans-serif;
  --sans:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --r-lg:28px; --r-md:20px; --r-sm:12px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:14px; --s4:22px; --s5:34px;
  --s6:52px; --s7:76px; --s8:104px;
  --maxw:1280px;
  --readw:74ch;
  --shadow:0 16px 42px rgba(26,34,35,.15);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button{touch-action:manipulation}
button{-webkit-tap-highlight-color:transparent}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
h1,h2,h3,p,ul,ol{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:6px}
.doc-hero :focus-visible{outline-color:var(--accent)}

/* The rake this project keeps stepping on: a shorthand `padding` on a
   wrapper wipes the side inset and the text ends up against the bezel.
   Vertical space is set with padding-block, never with the shorthand. */
.wrap{
  max-width:var(--maxw);margin:0 auto;
  padding-inline:max(var(--s4), env(safe-area-inset-left), env(safe-area-inset-right));
}

/* ============================================================
   HERO
   ============================================================ */
.doc-hero{background:var(--brand);color:#fff;position:relative}
.doc-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -20%,rgba(255,255,255,.15),transparent 62%);
}
.doc-hero > *{position:relative;z-index:1}

.topbar{display:flex;align-items:center;gap:var(--s5);padding-block:var(--s4)}
.logo{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none}
.logo-mark{width:30px;height:30px;flex:none}
.logo-word{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.02em}
.topnav{display:flex;align-items:center;gap:var(--s4);margin-left:auto;flex-wrap:wrap}
.topnav a{font-size:15px;color:rgba(255,255,255,.86);text-decoration:none;transition:color .16s}
.topnav a:hover{color:#fff}

.doc-head{padding-block:var(--s5) var(--s6);max-width:var(--readw)}
.doc-kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--s3);
}
.doc-h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(28px,4.6vw,52px);line-height:1.06;letter-spacing:-.025em;
}
.doc-lede{margin-top:var(--s3);font-size:clamp(15px,1.5vw,18px);color:rgba(255,255,255,.82)}
.doc-dates{
  margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.62);
}

/* ============================================================
   BODY
   ============================================================ */
.doc-main{padding-block:var(--s6) var(--s7)}
.doc-layout{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:var(--s6);align-items:start}
.doc-body{max-width:var(--readw);min-width:0}

/* which language version governs — small, but it belongs above the text */
.doc-notice{
  display:flex;gap:var(--s3);align-items:flex-start;
  font-size:13px;line-height:1.55;color:var(--ink-2);
  margin-bottom:var(--s4);padding-left:var(--s3);
  border-left:2px solid var(--rule);
}
.doc-notice:empty{display:none}

.doc-sec{
  background:var(--white);border-radius:var(--r-md);
  padding:var(--s5) var(--s5) var(--s4);
  margin-bottom:var(--s3);
  box-shadow:0 1px 0 var(--rule);
}
.doc-sec > * + *{margin-top:var(--s3)}
.doc-num{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--ink-3);display:block;margin-bottom:var(--s2);
}
.doc-h2{font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,24px);line-height:1.22;letter-spacing:-.01em}
.doc-body p{color:var(--ink-2)}
.doc-body strong{color:var(--ink);font-weight:600}
.doc-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-3)}
.doc-body a:hover{text-decoration-color:var(--ink)}

.doc-list{padding-left:0;list-style:none}
.doc-list li{position:relative;padding-left:var(--s4);color:var(--ink-2)}
.doc-list li + li{margin-top:var(--s2)}
.doc-list li::before{
  content:"";position:absolute;left:0;top:.66em;
  width:7px;height:2px;background:var(--accent-deep);border-radius:2px;
}

/* a fact worth pulling out of the paragraph flow */
.doc-callout{
  border-left:3px solid var(--accent-deep);
  background:var(--brand-soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--s3) var(--s4);
  color:var(--ink);
}
.doc-callout p{color:var(--ink)}

/* code-ish inline bits: storage keys, header names, hostnames */
.doc-body code{
  font-family:var(--mono);font-size:.88em;
  background:var(--brand-soft);border-radius:6px;padding:1px 6px;
  color:var(--ink);
}

/* ---------- the unfilled-operator warning ---------- */
.doc-warn{
  background:#FFF4DA;border:1px solid #E4C574;border-radius:var(--r-md);
  padding:var(--s4);margin-bottom:var(--s4);color:#4A3A12;
}
.doc-warn h2{font-family:var(--sans);font-size:15px;font-weight:600;margin-bottom:var(--s2)}
.doc-warn p{color:#5C4917;font-size:14px}
.doc-warn ul{margin-top:var(--s2);padding-left:18px;font-size:14px}
.doc-warn code{background:rgba(0,0,0,.06);border-radius:5px;padding:1px 5px;font-family:var(--mono);font-size:12px}
.todo{
  background:#FFE9AE;color:#4A3A12;border-radius:5px;padding:0 6px;
  font-family:var(--mono);font-size:.86em;white-space:nowrap;
}

/* ---------- side rail ---------- */
.doc-rail{position:sticky;top:var(--s4);display:grid;gap:var(--s2)}
.doc-rail-h{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s1);
}
.doc-rail a{
  display:block;background:var(--white);border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);text-decoration:none;color:var(--ink-2);
  font-size:14px;line-height:1.35;box-shadow:0 1px 0 var(--rule);
  transition:color .16s,transform .16s;
}
.doc-rail a:hover{color:var(--ink);transform:translateY(-1px)}
.doc-rail a[aria-current="page"]{background:var(--brand);color:#fff;box-shadow:none}
.doc-rail small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;opacity:.66;margin-top:3px}

/* ---------- the one interactive control: wipe stored preferences ---------- */
.doc-action{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.doc-btn{
  background:var(--brand);color:#fff;border:0;border-radius:var(--r-pill);
  padding:12px 24px;font-size:15px;font-weight:600;cursor:pointer;
  transition:transform .16s,background .16s;
}
.doc-btn:hover{transform:translateY(-1px);background:var(--brand-deep)}
.doc-btn[disabled]{opacity:.5;cursor:default;transform:none}
.doc-action-said{font-size:14px;color:var(--ink-2)}

/* ============================================================
   FOOTER
   ============================================================ */
.doc-foot{background:var(--brand-deep);color:rgba(255,255,255,.7);padding-block:var(--s5)}
.doc-foot-row{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center}
.doc-foot a{color:rgba(255,255,255,.78);text-decoration:none;font-size:14px;transition:color .16s}
.doc-foot a:hover{color:#fff}
.doc-foot-note{margin-top:var(--s4);font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.5);max-width:var(--readw)}

/* ============================================================
   NARROW
   ============================================================ */
@media (max-width:960px){
  /* The rail is three links. Stacking it above the text would push the
     document itself below the fold on a phone, so it lands after instead
     and reads as "the other two documents". */
  .doc-layout{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .doc-rail{position:static;gap:var(--s1)}
}
@media (max-width:640px){
  .topbar{gap:var(--s3);flex-wrap:wrap}
  .topnav{gap:var(--s3);width:100%;margin-left:0}
  .doc-sec{padding:var(--s4) var(--s4) var(--s3);border-radius:var(--r-sm)}
  .doc-main{padding-block:var(--s5) var(--s6)}
  .doc-head{padding-block:var(--s4) var(--s5)}
  .doc-btn{width:100%}
}
@media (pointer:coarse){
  .topnav a{padding-block:8px}
  .doc-rail a{padding:var(--s4)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}