/* grekguiden.se: the legal pages (privacy, terms, cookies, disclaimer, delete
 * account). Loaded only by those five pages, from build.py's legal_body().
 *
 * THE SHAPE IS skcreations.se's privacy page (site/assets, "Legal pages"
 * 2026-09-21): a date under the title, a contents list that stays beside the
 * text on a wide screen, a short summary box on top, numbered sections divided
 * by a hairline, and tables that scroll inside their own box rather than
 * pushing the page sideways on a phone. The colours, type and radius are
 * grekguiden's own, from site.css's :root, so the page reads as part of this
 * site and not a pasted-in document.
 *
 * Its own file rather than a block in site.css: every other page would carry
 * the rules for nothing, and site.css is under heavy work by the guide's
 * layout at the same time.
 */

.legal{padding:30px 0 70px}
.legal .updated{margin:0 0 26px;font-size:14px;color:var(--muted)}
.legal-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}
@media (min-width:980px){
  .legal-grid{grid-template-columns:240px minmax(0,1fr);gap:56px}
}

/* contents */
.legal-toc{font-size:14px;line-height:1.5;border-left:3px solid var(--accent);padding:2px 0 2px 16px}
@media (min-width:980px){
  .legal-toc{position:sticky;top:calc(var(--hdr-h) + 24px);max-height:calc(100vh - var(--hdr-h) - 48px);overflow:auto}
}
.legal-toc h2{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.legal-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.legal-toc a{color:var(--ink-2)}
.legal-toc a:hover{color:var(--accent);text-decoration:underline}

/* the text */
.legal-prose{min-width:0;color:var(--ink-2);font-size:16px;line-height:1.75}
/* nested lists too: a list inside a section ran to ~100 characters a line */
.legal-prose p,.legal-prose ul,.legal-prose ol{max-width:68ch}
.legal-prose p{margin:0 0 1em}
.legal-prose ul{margin:0 0 1.1em;padding-left:1.3em}
.legal-prose li{margin-bottom:.45em}
.legal-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal-prose b{color:var(--ink);font-weight:600}
.legal-prose > h2{font-size:21px;font-weight:600;color:var(--ink);margin:38px 0 14px;padding-top:26px;
  border-top:1px solid var(--line);scroll-margin-top:calc(var(--hdr-h) + 16px)}
.legal-prose > h2:first-child,.legal-sum + h2{margin-top:0;padding-top:0;border-top:0}

/* the summary box */
.legal-sum{background:var(--accent-soft);border-radius:var(--r);padding:20px 24px;margin:0 0 34px}
.legal-sum h2{font-size:17px;font-weight:600;color:var(--ink);margin:0 0 10px}
.legal-sum ul{margin:0;padding-left:1.2em}
.legal-sum li{margin-bottom:.5em}
.legal-sum li:last-child{margin-bottom:0}

/* tables: they scroll in their own box, the page never does */
.legal-tbl{max-width:100%;overflow-x:auto;margin:18px 0 24px;border:1px solid var(--line);border-radius:var(--r)}
.legal-tbl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.legal-tbl table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.55}
/* Only a four-column table needs to scroll on a phone; a three-column one
   folds into the width and reads better unscrolled. */
.legal-tbl table:has(th:nth-child(4)){min-width:560px}
.legal-tbl th,.legal-tbl td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.legal-tbl tr:last-child td{border-bottom:0}
.legal-tbl th{background:var(--grey);color:var(--ink);font-weight:600}
.legal-tbl td:first-child{color:var(--ink);font-weight:500}

@media (max-width:600px){
  .legal{padding:22px 0 50px}
  /* 16px body on a phone too (eye-comfort pass, 2026-09-24; it was 15.5) */
  .legal-prose > h2{font-size:19px}
  .legal-sum{padding:16px 18px}
}

/* ------------------------------------------------------------ articles
 * /arthra/ and each article (grekguiden/articles/). The same page shape as
 * the legal texts - contents beside the text - plus address cards, a source
 * line under each section, and the listings the article names. */
.article .updated a,.articles .updated a{color:var(--accent)}
/* "written with AI" on an article's date line: the line's own grey, a quiet
   underline, down to the note at the end (#ai-note, under the header) */
.article .updated a.ai-mark{white-space:nowrap;color:inherit;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px;text-decoration-thickness:1px}
.article .finenotes{scroll-margin-top:110px}
/* a tick list inside an article (assets/checklist.js): big boxes to tap, a done step goes grey */
.legal-prose ul.gcheck{list-style:none;padding:0;margin:0 0 .6em;display:grid;gap:8px}
.gcheck li{margin:0}
.gcheck label{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);cursor:pointer}
.gcheck input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.gcheck label:hover{border-color:var(--accent)}
.gcheck li.is-done label{background:var(--accent-soft);border-color:transparent}
.gcheck li.is-done span{color:var(--muted);text-decoration:line-through}
.gcheck-foot{display:flex;align-items:center;gap:14px;margin:0 0 1.4em;font-size:14.5px;color:var(--muted)}
.gcheck-clear{padding:5px 12px;border:1px solid var(--line);border-radius:99px;background:var(--bg);font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer}
.gcheck-clear:hover{border-color:var(--accent);color:var(--accent)}
.article .finenotes{margin:40px 0 0;max-width:none}   /* the small print, at the article's end */
.legal-grid.notoc{grid-template-columns:minmax(0,1fr)}
.glead{font-size:18px;line-height:1.6;color:var(--ink);margin:0 0 26px;max-width:70ch}
.gcard{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:0 0 14px;max-width:70ch;background:var(--bg)}
.gcard h3{font-size:16px;font-weight:600;color:var(--ink);margin:0 0 8px}
.gcard p{margin:0 0 4px;font-size:15px;line-height:1.55}
.gcard .gaddr{display:flex;gap:6px;align-items:flex-start}
.gcard .gaddr .i{margin-top:.25em;color:var(--muted)}
.gcard .glink{margin-top:8px}
.gcard .glink a{text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:4px}
.gsrc{font-size:13px;color:var(--muted);margin:6px 0 0}
.legal-prose .gsrc + .gsrc{margin-top:0}
.legal-prose .gsrc a{color:var(--muted)}
.arel-h{border-top:1px solid var(--line)}
@media (max-width:600px){
  .glead{font-size:16.5px}
}

/* article images: the cover under the title, figures in the text, and the
   credit line every licence asks for, small and grey but always there */
.acover,.afig{margin:0 0 26px;max-width:880px}
.acover img,.afig img{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--grey)}
.acover img{aspect-ratio:16/9;object-fit:cover}
.afig{margin:22px 0;max-width:70ch}
.acover figcaption,.afig figcaption{margin-top:6px;line-height:1.45}
.afig .figcap{display:block;font-size:14px;color:var(--ink-2);margin-bottom:2px}
.imgcredit{font-size:12px;color:var(--muted)}
.imgcredit a{color:var(--muted);text-decoration:underline}
.acard.hasimg{flex-direction:column;padding:0;overflow:hidden;gap:0}
.acard.hasimg .acard-b{padding:16px 20px 20px}
.acard-img{display:block;aspect-ratio:16/9;background:var(--grey)}
.acard-img img{display:block;width:100%;height:100%;object-fit:cover}
/* Grekguiden Radio (/radio/, 2026-09-30): the player, the list of earlier programmes, the sources */
.radio .updated a{color:var(--accent)}
.radio-player{margin:0 0 30px;padding:16px 18px;background:var(--accent-soft);border-radius:var(--r)}
.radio-player audio{display:block;width:100%}
.radio-dl{margin:10px 0 0;font-size:14px}
.radio-dl a{color:var(--accent)}
.radio-lang{margin:0 0 18px;font-size:14px;color:var(--muted)}
.radio-list{padding-left:1.3em}
.radio-list li{margin-bottom:.6em}
.radio-list small{display:block;color:var(--muted);font-size:13px}
.radio-src li{overflow-wrap:anywhere}
.radio code{overflow-wrap:anywhere;font-size:14px}