/* Document pages (docs, terms, privacy, Sheets setup) and the shared chrome of the price pages, on the Price Ruler page.
   Loads after site.css, which owns the tokens, the mat, buttons and the drawings. */
:root{
  /* old token names, mapped onto the Price Ruler palette so page-level styles keep working */
  --paper:var(--sheet); --thermal:var(--ink); --thermal-2:var(--ink-2); --rule-soft:var(--rule); --red:var(--pass);
  --counter:var(--mat); --counter-deep:var(--mat-deep); --counter-ink:var(--mat-ink); --counter-rule:var(--mat-line-2);
  --on-counter:var(--chalk); --on-counter-2:var(--chalk-2);
}

/* nav on server-rendered and document pages */
.nav-right{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav-right ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;line-height:1}

/* page head on the dark page */
.head{position:relative;padding:clamp(28px,5vw,64px) 0 clamp(32px,4vw,52px);overflow-x:clip}
.head h1{font:500 clamp(2.6rem,6vw,4.6rem)/.95 var(--display);letter-spacing:-.035em;margin:0;max-width:16ch;text-wrap:balance;text-transform:none}
.head p{color:var(--chalk-2);font-size:clamp(1.05rem,1.4vw,1.18rem);max-width:38rem;margin:18px 0 0}
.head-flat{position:absolute;right:0;top:12px;width:min(30vw,340px);color:var(--chalk);opacity:.28;pointer-events:none;transform:rotate(6deg)}
.head>*:not(.head-flat){position:relative;z-index:1}

/* index + the paper sheet */
.layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;padding-bottom:clamp(56px,8vw,96px)}
.layout.solo{grid-template-columns:minmax(0,1fr)}
.layout.solo>.sheet{max-width:none}
.toc{position:sticky;top:88px;font:400 .76rem/1 var(--mono);letter-spacing:.04em}
.toc p{color:var(--chalk-2);margin:0 0 14px;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--mat-line-2)}
.toc a{display:block;padding:9px 0 9px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--chalk-2);text-decoration:none;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--chalk)}
.toc a[aria-current="true"]{color:var(--chalk);border-left-color:var(--accent)}
.sheet{border-radius:0;box-shadow:none;padding:clamp(28px,5vw,60px) clamp(20px,5vw,60px) clamp(40px,6vw,72px);max-width:880px}
.sheet section{scroll-margin-top:90px}
.sheet section+section{margin-top:52px;padding-top:44px;border-top:1px solid var(--rule)}
.sheet h2{font:500 clamp(1.7rem,3vw,2.25rem)/1.05 var(--display);letter-spacing:-.03em;margin:0 0 18px;text-transform:none}
.sheet h3{font:600 1.08rem/1.3 var(--body);margin:30px 0 10px}
.sheet p,.sheet li{color:#2E2C27;max-width:44rem}
.sheet p{margin:0 0 14px}
.sheet ul,.sheet ol{padding-left:1.2em;margin:0 0 14px}
.sheet li{margin:4px 0}
.sheet strong{color:var(--ink)}
.sheet a{color:var(--ink);font-weight:600}
.sheet code{font:400 .86em/1 var(--mono);background:var(--wash);color:var(--ink);padding:.2em .42em;border-radius:0;white-space:normal;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.eyebrow{display:none}

/* code: paper-toned, ruled, dark-on-light */
.code{margin:14px 0 22px;background:var(--wash);border-top:1px solid var(--ink)}
.code-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px dashed #BDB8AA;
  font:500 .76rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.copy{white-space:nowrap;font:500 .76rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:none;color:var(--ink);border:1px solid #BDB8AA;border-radius:0;padding:6px 9px;transition:background-color .2s,color .2s}
.copy:hover{background:var(--ink);color:var(--accent);border-color:var(--ink)}
.code pre{margin:0;padding:16px 14px 18px;overflow-x:auto;font:400 .84rem/1.75 var(--mono);color:var(--ink)}
.code pre code{font:inherit;background:none;padding:0;border-radius:0;white-space:pre;overflow-wrap:normal}
.code .c{color:#625D54} .code .k{color:#4A5A00;font-weight:500} .code .s{color:#8A4B12} .code .n{color:#2142A8}

/* definition tables, ruled like a spec */
.fields{margin:10px 0 22px;border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(0,2.1fr);gap:6px 20px;padding:14px 0;border-bottom:1px solid var(--rule)}
.row dt{font:500 .86rem/1.5 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.row dt span{display:block;font-size:.82rem;color:var(--ink-2)}
.row dd{margin:0;color:#2E2C27;font-size:.98rem}
.row dd p{margin:0}
.callout{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:12px 0;margin:18px 0}
.callout p{margin:0}

/* footer on document and price pages */
body>footer{background:var(--mat-ink);border-top:1px solid var(--mat-line-2);padding:40px 0 48px;color:var(--chalk-2);font-size:.92rem}
body>footer .wrap{display:flex;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
body>footer a{color:var(--chalk-2);text-decoration:none}
body>footer a:hover{color:var(--accent);text-decoration:underline}

/* touch screens: 44px targets for the contents list and footer links (desktop is unchanged) */
@media (pointer:coarse){
  .toc a{display:flex;align-items:center;min-height:44px;padding-top:0;padding-bottom:0}
  body>footer a{display:inline-flex;align-items:center;min-height:44px}
}
@media (min-width:961px) and (max-width:1180px){.layout:not(.solo){grid-template-columns:176px minmax(0,1fr);gap:28px}}
@media (max-width:960px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .toc{position:static}
  .toc ol{display:flex;gap:6px;overflow-x:auto;border-left:0;padding-bottom:4px;scrollbar-width:none}
  .toc ol::-webkit-scrollbar{display:none}
  .toc a{border:1px solid var(--mat-line-2);border-radius:0;padding:9px 12px;margin:0;white-space:nowrap}
  .toc a[aria-current="true"]{border-color:var(--accent)}
  .sheet{max-width:none}
}
@media (max-width:880px){.nav-right ul{display:none}}
@media (max-width:560px){
  .row{grid-template-columns:minmax(0,1fr)}
  .head-flat{width:44vw;right:-12%;opacity:.2}
}

/* resale report: the category bar chart (inline SVG on the paper sheet) */
.rchart{margin:20px 0 10px}
.rchart svg{display:block;width:100%;max-width:460px;height:auto;overflow:visible}
.rchart text{font:500 13px/1 var(--body);fill:var(--ink)}
.rchart .n{font-weight:400;fill:var(--ink-2)}
.rchart .v{font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums}
.rchart .ax{font:400 12px/1 var(--mono);fill:var(--ink-2)}
.rchart .track{fill:var(--wash)}
.rchart .bar{fill:var(--mat)}
.rchart figcaption{margin-top:6px;font-size:.85rem;color:var(--ink-2);max-width:44rem}
.sheet.landing .compare.kept td:nth-child(2){font-weight:400}
.sheet.landing .compare.kept td:last-child{font-weight:600}

/* /alerts: the early-access signup on the dark page. Ruled, not boxed: a chalk top rule, dark inputs, labels above. */
.head.al-head h1{max-width:20ch;font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:.98;letter-spacing:-.03em}
.head.al-head{padding-bottom:clamp(28px,4vw,44px)}
.al-signup{margin-top:26px;max-width:58rem;border-top:1px solid var(--chalk);padding-top:20px;scroll-margin-top:84px}
.alform[hidden],.al-done[hidden]{display:none}
.alform{display:grid;gap:16px;justify-items:start}
.al-fields{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.6fr) minmax(0,1.4fr);gap:14px 16px;width:100%}
.al-field label{display:block;font:500 .78rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-2);margin-bottom:7px}
.al-hint{text-transform:none;letter-spacing:0;font-style:italic;color:var(--chalk-3)}
.al-field input{width:100%;min-width:0;background:var(--mat-deep);color:var(--chalk);border:1px solid rgba(242,240,235,.4);border-radius:0;padding:13px 14px;font:500 1rem/1.35 var(--body);caret-color:var(--chalk)}
.al-field input::placeholder{color:var(--chalk-3);font-weight:400}
.al-field input:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.al-field input[aria-invalid="true"]{border-color:#F2A596}
.head .al-err{color:#F2A596;font-size:.93rem;line-height:1.4;margin:7px 0 0;max-width:none}
.al-err:empty,.al-status:empty{display:none}
.head .al-status{color:#F2A596;font-size:.95rem;margin:0}
.al-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.head .al-note{color:var(--chalk-2);font-size:.95rem;margin:-4px 0 0;max-width:none}
.head .al-done .al-msg{font:500 clamp(1.5rem,2.6vw,2rem)/1.15 var(--display);letter-spacing:-.02em;color:var(--chalk);max-width:34rem;margin:0}
.head .al-done p+p{margin-top:14px}
.al-done:focus{outline:none}
.al-done a{color:var(--chalk);font-weight:600}
@media (max-width:720px){
  .head.al-head{padding-top:8px}
  .al-signup{margin-top:18px;padding-top:14px}
  .al-fields{grid-template-columns:minmax(0,1fr);gap:10px}
  .al-field label{margin-bottom:4px}
  .al-field input{padding:11px 14px}
  .alform{gap:12px}
  .alform{justify-items:stretch}
  .alform .btn{width:100%}
}

/* price pages: the quiet link to the deal-alerts list */
.answer .alerts-link{margin:14px 0 0;font-size:.95rem;max-width:none}
.answer .alerts-link a{color:var(--chalk-2)}
.answer .alerts-link a:hover{color:var(--chalk)}