/* Chorana's legal documents (terms, privacy, acceptable use, refunds) and their index, /legal. Laid out as the
   app is: a side column of plain rows (the four documents, then the sections of the one open, the current row in
   ink and the rest gray) beside one column of text on the page's left edge. No boxes, borders or rules; things are
   grouped by space and shared edges. The site's own font, bone and ink (styles.css). Section numbers hang in the
   gap left of the text, so every heading and paragraph starts on one edge. */
.lg-wrap{display:grid;grid-template-columns:200px minmax(0,680px);gap:0 96px;padding-top:56px;align-items:start}

/* the side column */
.lg-side{position:sticky;top:32px;max-height:calc(100vh - 64px);overflow-y:auto;font-size:14px;line-height:1.4}
.lg-side a{display:flex;gap:10px;padding:5px 0;color:var(--mute);text-decoration:none}
.lg-side a:hover,.lg-side a[aria-current]{color:var(--ink)}
.lg-side .docs{margin-bottom:28px}
.lg-side .docs a[aria-current]{font-weight:600}
.lg-side .secs .n{width:18px;flex:none;font-variant-numeric:tabular-nums}

/* the document */
.lg-doc{font-size:15px;line-height:1.7;color:var(--body)}
.lg-doc h1{margin:0;font-size:32px;line-height:1.15;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.lg-doc .when{margin:10px 0 40px;font-size:13px;color:var(--mute)}
.lg-doc p{margin:0 0 16px}
.lg-doc a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.lg-doc b{font-weight:600;color:var(--ink)}
.lg-doc .strong{font-weight:600;color:var(--ink)}
.lg-doc h2{position:relative;margin:56px 0 16px;font-size:18px;line-height:1.35;font-weight:600;color:var(--ink);scroll-margin-top:32px}
.lg-doc h2 .n{position:absolute;right:calc(100% + 16px);top:0;color:var(--gray);font-weight:500;font-variant-numeric:tabular-nums}
.lg-doc h3{margin:32px 0 12px;font-size:15px;line-height:1.4;font-weight:600;color:var(--ink);scroll-margin-top:32px}
.lg-doc ul{list-style:none;margin:0 0 16px;padding:0}
.lg-doc ul>li{margin:0 0 12px}
.lg-doc ol.sub{list-style:none;margin:-4px 0 16px;padding:0;counter-reset:s}
.lg-doc ol.sub>li{counter-increment:s;display:grid;grid-template-columns:32px minmax(0,1fr);margin-bottom:8px}
.lg-doc ol.sub>li::before{content:"(" counter(s,lower-alpha) ")";color:var(--mute)}

/* tables: columns on a fixed grid, rows parted by space alone */
.lg-table{margin:8px 0 24px;overflow-x:auto}
.lg-table table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.5}
.lg-table th{padding:0 20px 8px 0;font-size:12px;font-weight:600;color:var(--mute);text-align:left}
.lg-table td{padding:10px 20px 10px 0;vertical-align:top;color:var(--body)}
.lg-table td:first-child{color:var(--ink)}
.lg-doc .lg-table ul{margin:0}
.lg-doc .lg-table li{margin:0 0 2px}

/* the index, /legal */
.lg-list a{display:block;padding:0 0 28px;text-decoration:none}
.lg-list .t{display:block;font-size:18px;font-weight:600;color:var(--ink)}
.lg-list a:hover .t{text-decoration:underline;text-underline-offset:3px}
.lg-list .d{display:block;margin-top:4px;font-size:14px;color:var(--body)}

@media (max-width:900px){
  .lg-wrap{grid-template-columns:minmax(0,1fr);padding-top:32px}
  .lg-side{position:static;max-height:none;overflow:visible;margin-bottom:32px}
  .lg-side .docs{display:flex;flex-wrap:wrap;gap:0 20px;margin:0}
  .lg-side .secs{display:none}
  .lg-doc h2 .n{position:static;margin-right:10px}
}
@media print{
  .site-header,.site-footer,.lg-side,.skip{display:none}
  .lg-wrap{display:block;padding:0}
  .lg-doc{font-size:11pt;color:#000}
  .lg-doc h2 .n{position:static;margin-right:8px}
  .lg-doc a{text-decoration:none}
}