/* ============================================================
   YohApps Cookie Kit — standalone legal-page stylesheet
   v1.0

   yohapps.com already defines these classes in its own styles.css.
   Every other site does not, so a Cookie Policy dropped onto
   chessmelody.com or chessmousespeed.com would render as raw text.

   This file is self-contained: it declares its own palette, so it
   works on a site with no design system. Where the host site does
   define --color-* variables, those win and the page inherits the
   site's look for free.

   Load it BEFORE yohapps-cookies.css on legal pages only. It is not
   needed on ordinary pages.
   ============================================================ */

:root {
  --yl-bg: var(--color-bg, #0f0f13);
  --yl-text: var(--color-text, #f0f0f5);
  --yl-text-2: var(--color-text-secondary, #a0a0b8);
  --yl-muted: var(--color-text-muted, #606075);
  --yl-border: var(--color-border, rgba(255, 255, 255, 0.10));
  --yl-accent: var(--color-accent, #5b8fee);
  --yl-accent-soft: var(--color-accent-soft, rgba(91, 143, 238, 0.12));
  --yl-mono: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  --yl-sans: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI",
             "IBM Plex Sans", Roboto, Helvetica, Arial, sans-serif);
}

@media (prefers-color-scheme: light) {
  :root {
    --yl-bg: var(--color-bg, #ffffff);
    --yl-text: var(--color-text, #16161d);
    --yl-text-2: var(--color-text-secondary, #4a4a5a);
    --yl-muted: var(--color-text-muted, #74748a);
    --yl-border: var(--color-border, rgba(0, 0, 0, 0.12));
  }
}

/* Only applied on pages that actually carry .legal-wrapper, so this
   file can be linked anywhere without touching a site's own layout. */
body:has(.legal-wrapper) {
  margin: 0;
  background: var(--yl-bg);
  color: var(--yl-text);
  font-family: var(--yl-sans);
  line-height: 1.6;
}

.legal-wrapper {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  font-family: var(--yl-sans);
  color: var(--yl-text);
}

.legal-back-link,
.legal-back {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: var(--yl-muted);
  text-decoration: none;
}
.legal-back-link:hover,
.legal-back:hover {
  color: var(--yl-accent);
}

.legal-title {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.25;
}

.legal-subtitle {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  color: var(--yl-text-2);
}

.legal-lang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--yl-muted);
}
.legal-lang a,
.legal-lang strong {
  padding: 3px 9px;
  border: 1px solid var(--yl-border);
  border-radius: 6px;
  text-decoration: none;
  line-height: 1.6;
}
.legal-lang a {
  color: var(--yl-text-2);
}
.legal-lang a:hover {
  color: var(--yl-text);
  border-color: var(--yl-accent);
}
.legal-lang strong {
  color: var(--yl-text);
  font-weight: 600;
  border-color: var(--yl-accent);
  background: var(--yl-accent-soft);
}

.legal-updated {
  margin: 0 0 2rem;
  font-family: var(--yl-mono);
  font-size: 0.8125rem;
  color: var(--yl-muted);
}

.legal-wrapper h2 {
  margin-top: 2rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--yl-text);
}

.legal-wrapper p {
  margin-top: 0.5rem;
  color: var(--yl-text-2);
  line-height: 1.7;
}

.legal-wrapper strong {
  color: var(--yl-text);
}

.legal-wrapper a {
  color: var(--yl-accent);
}

.legal-wrapper ul,
.legal-wrapper ol {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
  color: var(--yl-text-2);
  line-height: 1.7;
}
.legal-wrapper li {
  margin-top: 4px;
}

.legal-wrapper code {
  padding: 1px 5px;
  font-family: var(--yl-mono);
  font-size: 0.875em;
  background: var(--yl-accent-soft);
  border-radius: 4px;
}

.legal-table {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.legal-table th,
.legal-table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--yl-border);
  color: var(--yl-text-2);
}
.legal-table th {
  color: var(--yl-text);
  font-weight: 600;
  white-space: nowrap;
}

.legal-contact {
  margin-top: 2.5rem;
  font-size: 0.875rem;
  color: var(--yl-muted);
}

.legal-footer {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--yl-border);
  font-size: 0.8125rem;
  color: var(--yl-muted);
}
.legal-footer a {
  color: var(--yl-text-2);
}
.legal-footer a:hover {
  color: var(--yl-accent);
}


/* ==========================================================================
   MOBILE — 2026-08-25
   ==========================================================================
   [!] SHARED KIT FILE. This same file is installed on chessmelody and
       chessandarrows. Fixing it here fixes it there too, once each site takes
       the updated copy.

   The legal tables did not fit a phone. Measured on
   chessmousespeed.com/legal/cookies/ before this block:

       language   320px      390px      430px
       en         +27px      ok         ok
       fr        +144px     +75px      +34px
       es        +124px     +54px      +14px

   French overflows a 430px iPhone. Two causes:

   (a) .legal-table th is white-space: nowrap, so the header row cannot wrap
       and demands its full natural width before a single body cell is
       measured. Longer French headers make this dramatically worse, which is
       why en looked almost fine and fr did not.

   (b) A table sizes its columns from its content, and content beats the
       viewport. A table is the one element that will cheerfully be wider than
       the screen and not care.

   The fix is to let the words break. A table's automatic layout will not
   shrink a column below its minimum content width, and by default that
   minimum is the longest unbreakable word — so allowing breaks collapses the
   minimum and automatic layout can fit any width, WHILE still sizing each
   column by what is actually in it.

   [!] Deliberately NOT "wrap every table in a scrolling div": that needs an
       HTML edit in every legal page on four sites, and a table you scroll
       sideways to read is a poor thing on a phone.
   [!] table-layout: fixed with stated column widths was tried first on
       yohapps.com and was WRONG — a fixed 30% starved the column holding whole
       sentences down to 12 characters a line. A width rule cannot know which
       column carries the prose. Automatic layout does, because it measures.
   ========================================================================== */
@media (max-width: 700px) {
  .legal-table th {
    white-space: normal;
  }
  .legal-table th,
  .legal-table td {
    padding: 8px 6px;
    overflow-wrap: anywhere;
  }
}

/* Room back on the narrowest screens: the wrapper's generous desktop padding
   is a meaningful share of a 320px display. */
@media (max-width: 560px) {
  .legal-wrap,
  .legal-wrapper,
  .yl-wrap {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Tap targets. These sit in normal flow, so they can simply be made taller —
   unlike a nowrap flex header bar, where growing a control widens the bar.
   Links inside prose are left alone: padding those out would have them
   overlapping the lines above and below. */
@media (pointer: coarse) {
  .legal-back-link,
  .legal-back {
    display: inline-block;
    padding: 11px 0;
  }
  .legal-lang a,
  .legal-lang strong {
    display: inline-block;
    padding: 8px 6px;
  }
}