/* Policy pages only, loaded from privacy.html, cookies.html and terms.html.
   A separate sheet rather than a block in site.css: these three pages are the
   only long-form prose on the site, they want a reading measure and a heading
   rhythm nothing else needs, and site.css is shared ground several people are
   editing at once.

   The whole design brief for these pages is one sentence: policy pages are
   where sites hide things, and this one does not. So — long measure, real
   paragraphs, no small print, and the summary at the top rather than the
   bottom. Nothing here is smaller than the site's caption size. */

.policy{max-width:70ch}
.policy p{margin:0 0 calc(var(--u)*2); line-height:1.62}
.policy h2{margin-top:calc(var(--u)*6)}
.policy h3{font-size:var(--t-body); font-weight:600; margin:calc(var(--u)*3.5) 0 var(--u)}
.policy ul{margin:0 0 calc(var(--u)*2); padding-left:calc(var(--u)*2.5)}
.policy li{margin-bottom:calc(var(--u)*.85); line-height:1.6}
.policy strong{font-weight:600}

/* First thing on all three pages. Bordered rather than filled so it reads as a
   standing notice and not as an error the reader caused. */
.caveat{border:1px solid var(--alert); padding:calc(var(--u)*2.25);
  margin:0 0 calc(var(--u)*4); max-width:70ch}
.caveat b{display:block; color:var(--alert); font-weight:600; margin-bottom:4px}
.caveat p{margin:0; font-size:var(--t-small); color:var(--grey); line-height:1.6}

/* The honest summary. Sunk panel, ordinary body size — this is the part most
   people will read and it should not look like a footnote. */
.gist{background:var(--sunk); padding:calc(var(--u)*3); margin:0 0 calc(var(--u)*5);
  max-width:70ch}
.gist h2{margin:0 0 calc(var(--u)*1.5); border:0; padding:0}
.gist ul{margin:0; padding-left:calc(var(--u)*2.5)}
.gist li{margin-bottom:calc(var(--u)*1.15); font-size:var(--t-small)}
.gist li:last-child{margin-bottom:0}

/* Cookie and data tables. td already carries the hairline rule from site.css;
   this adds the header row and the column widths. */
.policy table{margin:0 0 calc(var(--u)*2)}
.policy th{text-align:left; font-size:var(--t-cap); color:var(--grey); font-weight:500;
  padding:0 calc(var(--u)*2) var(--u) 0; border-bottom:1px solid var(--ink)}
.policy td{padding-right:calc(var(--u)*2)}
.policy td:last-child, .policy th:last-child{padding-right:0}
.policy code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em;
  background:var(--sunk); padding:1px 5px}

/* The dated "what this describes" line under each h1. */
.asof{font-size:var(--t-cap); color:var(--mute); margin:0 0 calc(var(--u)*4)}

/* Cross-links between the three policy pages, at the foot of each. */
.alsosee{border-top:1px solid var(--hair); margin-top:calc(var(--u)*7);
  padding-top:calc(var(--u)*2); font-size:var(--t-small)}
.alsosee a{margin-right:calc(var(--u)*3)}

@media (max-width:620px){
  .policy table, .policy thead, .policy tbody, .policy tr, .policy th, .policy td{display:block}
  .policy thead{display:none}
  .policy td{border:0; padding:2px 0}
  .policy tr{border-bottom:1px solid var(--hair); padding:calc(var(--u)*1.5) 0; display:block}
  .policy td:before{content:attr(data-l) " "; color:var(--mute); font-size:var(--t-cap)}
}