/* kg-legal.css -- the five legal pages on the Bazaar Ledger (UI rebuild, Phase 0).
 *
 * Role: layout for cookies.html, privacy.html, terms.html, risk-disclosure.html and
 * delete-account.html, on the tokens of kg-tokens.css and the primitives of kg-base.css and
 * kg-components.css (.top, .seal, .rule, .cap, .note.is-warn, .pill.ghost, .btn, .kg-page).
 * Linked last, after theme.css and the three kg sheets; the pages load no other sheet.
 *
 * One template: the app bar (.kg-legal-top: the seal and the name, then .legal-nav, the six
 * legal links with the current page marked) over main.legal.kg-page, one 76ch reading column:
 * the draft note, the title over a .rule, the updated line, then the document.
 *
 * theme.css still styles names these pages use (a, h1, h2, .btn, .btn.danger); every rule here
 * that outranks one says which legacy line it beats. theme.css l.233 supplies
 * [hidden] { display: none !important } for delete-account's two boxes.
 *
 * Rules of the sheet are those of kg-base.css: logical properties only, no box-shadow, radii
 * 0 / 3px / 4px / 999px / 50%, every colour and font read from kg-tokens.css. The kilim is
 * declared once here, for the current link's mark (DESIGN-SYSTEM.md section 2, placement 2) and
 * the band across delete-account's slip (placement 5); the title's .rule draws its own
 * (kg-base). Breakpoint: 900 (24px gutters, more air above the title).
 */

/* ---------- page frame ---------- */

html { background: var(--paper); }

/* ---------- app bar ---------- */

/* The bar spans the page; its content shares home's column (--content-max, 20px gutters on the
   phone, 24px from 900px). The links wrap under the brand when the row is too narrow. */
.kg-legal-top {
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 0;
  padding-inline: max(20px, calc((100% - var(--content-max)) / 2 + 20px));
  background: var(--paper);
  border-block-end: 1px solid var(--hair);
}
@media (min-width: 900px) {
  .kg-legal-top { padding-inline: max(24px, calc((100% - var(--content-max)) / 2 + 24px)); }
}

/* Links in the bar read as text. */
.kg-legal-top a,
.kg-legal-top a:hover { color: var(--ink); text-decoration: none; } /* beats theme.css l.275 a and l.283 a:hover (saffron, underline) */

.kg-legal-top .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.kg-legal-top .brand .seal { font-size: 18px; line-height: 1; }
.kg-legal-top .brand b { font-weight: inherit; }

/* The six legal links: a row of 44px text links. The negative margin is the links' own padding,
   so the first word lines up with the brand when the row wraps. */
.legal-nav { display: flex; flex-wrap: wrap; column-gap: 4px; margin-inline: -8px; }
.kg-legal-top .legal-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 8px;
  color: var(--ink-2);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.kg-legal-top .legal-nav a:hover,
.kg-legal-top .legal-nav a[aria-current="page"] { color: var(--ink); }
.kg-legal-top .legal-nav a[aria-current="page"] { font-weight: 700; }

/* The kilim, declared once for its two places: the mark under the current link's words and the
   band across the top of delete-account's slip. Both are 6px, on the 12px tile. */
.kg-legal-top .legal-nav a[aria-current="page"]::after,
.legal .box::before {
  content: "";
  position: absolute;
  block-size: 6px;
  background: var(--kilim);
  background-size: 12px 6px;
}
.kg-legal-top .legal-nav a[aria-current="page"]::after { inset-inline: 8px; inset-block-end: 4px; }

/* ---------- the reading column ---------- */

/* .kg-page centres it and keeps the gutters; the measure is 76ch. */
.legal { max-inline-size: 76ch; padding-block: 24px 64px; color: var(--ink); }
@media (min-width: 900px) {
  .legal { padding-block: 40px 80px; }
}

/* The draft note (kg-components .note.is-warn): the verdict, then the detail. */
.legal .note { display: flex; flex-direction: column; gap: 4px; margin-block: 0 24px; }
.legal .note strong { color: var(--ink); font-weight: 700; }
.legal .note .detail { color: var(--ink-2); }

/* The title is .t-display; the kilim .rule under it is kg-base's. */
.legal h1 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  font-stretch: 100%;
  color: var(--ink);
} /* beats theme.css l.255 h1 (tight leading, -0.02em) and l.268 (800, width axis) */

/* The kilim .rule under the title keeps 12px on both sides: delete-account has no updated line,
   and its first paragraph follows the rule directly. */
.legal > .rule { margin-block: 12px; } /* beats kg-base .rule (12px 4px) */

/* The updated line is a .cap; .legal p below is more specific than .cap, so its size and colour
   are restated. The label is isolated: in a ckb or ar page it is Arabic script inside an English
   line, and without isolation a date that follows it ("30 September") is drawn into its run. */
.legal .legal-updated { margin-block: 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-3); }
.legal .legal-updated span { unicode-bidi: isolate; }

.legal h2 {
  margin-block: 32px 12px;
  font-family: var(--f-display);
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  font-stretch: 100%;
  color: var(--ink);
} /* .t-section; beats theme.css l.255 h2 (tight leading, -0.02em) and l.269 (title size, width axis) */

.legal p,
.legal li { color: var(--ink-2); line-height: 1.7; }
.legal ul { display: flex; flex-direction: column; gap: 6px; margin-block: 12px; padding-inline-start: 20px; }
.legal strong { color: var(--ink); }

/* Text links: saffron-text with a 1.5px saffron underline; the buttons keep their own look. */
.legal a:not(.btn),
.legal a:not(.btn):hover {
  color: var(--saffron-text);
  text-decoration: underline;
  text-decoration-color: var(--saffron);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
} /* beats theme.css l.275 a and l.283 a:hover (primary colour, hairline then 2px underline) */
.legal a:not(.btn):hover { color: var(--ink); }
.legal a.btn,
.legal a.btn:hover { color: var(--on-saffron); text-decoration: none; } /* the a rules of theme.css underline and recolour a link button */

/* ---------- Latin display and the direction of the English documents ---------- */

/* Archivo 800 is the Latin display face, Rudaw the Arabic-script one (DESIGN-SYSTEM.md section 6,
   rule 6). The four documents are English, so their title and headings are Latin in every page
   language; delete-account's title (data-da) is in the visitor's language. Privacy's Sorani
   summary sits in its own section and keeps Rudaw. */
.legal > h1:not([data-da]),
.legal > h1:not([data-da]) ~ h2,
.legal > h1:lang(en),
.legal > h1:lang(ku),
.kg-legal-top .brand:lang(en),
.kg-legal-top .brand:lang(ku) {
  font-family: var(--f-num);
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* In a ckb or ar page (html[dir="rtl"]) the bar and the draft note mirror, and the English
   document keeps the direction of English, so a line never ends with its full stop at the wrong
   edge. The document is everything from the title on, except an element that carries its own
   dir (privacy's Sorani summary). delete-account's title carries data-da: that page is written
   in the visitor's language and keeps the page direction. */
html[dir="rtl"] .legal > h1:not([data-da]),
html[dir="rtl"] .legal > h1:not([data-da]) ~ :not([dir]) { direction: ltr; }
/* Its prose is set in Inter, the Latin body face (DESIGN-SYSTEM.md section 6, rule 6), instead of
   the page's --f-body, whose Latin falls through to Archivo. The headings keep Archivo 800 (the
   rule above); the updated line's label is in the page's language and keeps --f-body. */
html[dir="rtl"] .legal > h1:not([data-da]) ~ :is(p, ul) { font-family: var(--f-latin); }
html[dir="rtl"] .legal .legal-updated span { font-family: var(--f-body); }

/* ---------- delete-account: the language pills and the two slips ---------- */

/* The picker: four .pill.ghost buttons (kg-components.css), each named in its own script. */
.legal .langs { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 0 24px; }
.legal .langs .pill {
  justify-content: center;
  padding-inline: 14px;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
} /* font: inherit beats theme.css l.656 .pill (label size, width axis) and the button's own face */
.legal .langs .pill:lang(ckb),
.legal .langs .pill:lang(ar) { font-family: var(--f-body); }
.legal .langs .pill:lang(en),
.legal .langs .pill:lang(ku) { font-family: var(--f-latin); }
.legal .langs .pill:not([aria-pressed="true"]):hover { border-color: var(--ink); }

/* #daSignedIn and #daSignedOut are slips (kg-base .slip, restated because they keep their
   markup): paper-2, a hair-2 border, the kilim band above. */
.legal .box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-block: 24px 0;
  padding-block: 20px 16px;
  padding-inline: 16px;
  background: var(--paper-2);
  border: 1px solid var(--hair-2);
  border-radius: 0;
}
.legal .box::before { inset-inline: 0; inset-block-start: 0; }
.legal .box strong { font-weight: 700; }

.legal .btn:active:not(:disabled) { transform: none; } /* beats theme.css l.483 press nudge */
/* The request button: a loss fill with paper text and the ink ring. */
.legal .box .btn.danger,
.legal .box .btn.danger:hover:not(:disabled) { background: var(--loss); color: var(--paper); border-color: var(--ink); } /* beats theme.css l.507 .btn.danger and l.513 its hover (critical-fill, white text) */

/* ---------- forced colours ---------- */

@media (forced-colors: active) {
  .kg-legal-top .legal-nav a[aria-current="page"] { text-decoration: underline; }
  .legal .langs .pill[aria-pressed="true"] { border: 2px solid Highlight; }
}

/* ---------- the phone app (html.tc-app, set by app-boot.js) ---------- */

/* The app draws the page under the phone's status and navigation bars. These pages do not load
   app-mode.css, so the safe areas are read here the way app-mode.css l.116-117 reads them:
   Capacitor publishes --safe-area-inset-* on Android, iOS reports env(); the larger wins. */
html.tc-app body {
  padding-block-start: max(var(--safe-area-inset-top, 0px), env(safe-area-inset-top, 0px));
  padding-block-end: max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
}

/* Halo 2 fold-in W1: the legal pages share the three-weight scale in the app and
   on the Halo website. Keep the ledger declarations above for their own scope. */
html:is(.tc-app, .kg-halo) .legal :is(h1, h2, strong, a),
html:is(.tc-app, .kg-halo) .kg-legal-top :is(.brand, .seal),
html:is(.tc-app, .kg-halo) .legal .langs .pill,
html:is(.tc-app, .kg-halo) .kg-legal-top .legal-nav a[aria-current="page"] {
  font-weight: 600;
}
/* Ruling H2-18 (W1): a key (the delete-account page's button and its sign-in link) is 500, as every key of
   HALO-DESIGN 5.8; over the 600 rule above for an a.btn (0,3,1 against 0,2,2). */
html:is(.tc-app, .kg-halo) .legal .btn {
  font-weight: 500;
}