/* ══ COOKIES AND YOUR BROWSER'S STORAGE ═══════════════════════════ 13 Oct 2026 (rp115), v1 ══
   Loaded after hyyryn-policy.css, on cookies.html only. Sir, 13 Oct: "the cookies page as well
   needs a revamp. It needs a major revamp." The page stands in the reading room with Complaints
   and the Reviews policy; this sheet carries only what is its own:
     the desk      "On this device, now": the reader's own browser, read on the page. Glass, because
                   the reeded ground is behind it (Mason ch. 08; effects library G1, G7)
     the ledger    every cookie anyone sets, ruled as an index with hairlines (A2, A3); the first
                   row is Hyyryn's own, and it says None
     the kinds     the four kinds of storage as accordions that open by height (M26), each with
                   what is on this device now
     the notes     "How we know": numbered marks beside each measured fact that go to the note
                   and back (T25)
   Durations are the site's motion ladder (hyyryn-motion.css), named here because this page does
   not load that sheet. Every colour is a company-sheet token, a policy-sheet value, or an rgba of
   one. */
.ck {
  --ck-enter: 240ms; --ck-exit: 200ms; --ck-large: 400ms;
  --ck-ease: cubic-bezier(0, 0, .38, .9); --ck-ease-std: cubic-bezier(.2, 0, .38, .9);
  --ck-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --ck-hair: rgba(10,22,40,.16);
}
.ck code { font-family: var(--ck-mono); font-size: .86em; padding: 1px 5px; border-radius: 3px; background: rgba(10,22,40,.05); color: var(--navy); overflow-wrap: anywhere; }

/* ── the desk: the reader's own browser ── */
.ck-now-lede { margin: 0; font-family: var(--pc-serif); font-size: 14.5px; line-height: 1.55; color: var(--pc-muted); }
.ck-count { margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ck-count > div { display: flex; flex-direction: column-reverse; gap: 4px; padding-left: 12px; border-left: 1px solid var(--pc-rule); }
.ck-count dt { font-family: var(--pc-sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: var(--pc-muted); }
@media (max-width: 760px) { .ck-count dt { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.ck-count dd { margin: 0; font-family: var(--pc-display); font-size: 40px; line-height: 1; color: var(--navy); font-variant-numeric: lining-nums tabular-nums; }
.ck-kinds { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--ck-hair); }
.ck-kinds li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--ck-hair); font-family: var(--pc-sans); font-size: 13px; color: var(--ink); }
.ck-kinds li b { font-family: var(--pc-display); font-weight: 400; font-size: 15px; color: var(--gold-ink); }
.ck-kinds li span:last-child { font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 600; }
.ck-kinds li.is-none span:last-child { color: var(--pc-muted); font-weight: 400; }
/* a row arrives rather than appears (M24), and only where motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .ck-kinds li { transition: opacity var(--ck-enter) var(--ck-ease), transform var(--ck-enter) var(--ck-ease); }
  @starting-style { .ck-kinds li { opacity: 0; transform: translateY(4px); } }
}
.ck-clear { margin-top: 16px; }
.ck-clear .pc-btn { width: 100%; justify-content: space-between; white-space: normal; text-align: left; line-height: 1.35; padding-block: 10px; }
.ck-confirm { margin-top: 12px; padding: 12px 14px; background: var(--pc-paper); box-shadow: inset 0 0 0 1px var(--line-2), inset 3px 0 0 var(--danger); }
.ck-confirm p { margin: 0; font-family: var(--pc-serif); font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.ck-confirm-acts { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ck-confirm-acts .pc-btn { min-height: 44px; }
.ck-keep { padding: 8px 0; border: 0; background: none; font: 600 12px/1 var(--pc-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); cursor: pointer; box-shadow: inset 0 -1px 0 currentColor; }
.ck-keep:hover { box-shadow: inset 0 -2px 0 currentColor; }
.ck-keep:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.ck-done { margin: 12px 0 0; padding: 10px 12px; font-family: var(--pc-serif); font-size: 14.5px; line-height: 1.5; color: var(--green); background: var(--green-mist); box-shadow: inset 3px 0 0 var(--green-2); }
@media (prefers-reduced-motion: no-preference) {
  .ck-confirm, .ck-done { transition: opacity var(--ck-enter) var(--ck-ease), translate var(--ck-enter) var(--ck-ease), display var(--ck-enter) allow-discrete; }
  @starting-style { .ck-confirm, .ck-done { opacity: 0; translate: 0 -4px; } }
}

/* ── the ledger: every cookie, one ruled row each ── */
.ck-ledger { margin: 22px 0 0; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--navy); background: var(--pc-paper); box-shadow: 0 1px 2px rgba(10,22,40,.05), 0 18px 40px -30px rgba(10,22,40,.35); }
.ck-row { display: grid; grid-template-columns: minmax(118px, 1.05fr) minmax(0, 1.25fr) minmax(0, 1.2fr) minmax(86px, .8fr) minmax(0, 1.9fr); gap: 0 18px; padding: 14px 18px; position: relative; font-family: var(--pc-serif); font-size: 15px; line-height: 1.5; color: var(--ink); }
/* a true hairline between rows: a 1px line drawn at half height (effects library A2) */
.ck-row + .ck-row::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: var(--ck-hair); transform: scaleY(.5); transform-origin: 0 0; }
@media (resolution < 2dppx) { .ck-row + .ck-row::before { transform: none; background: rgba(10,22,40,.11); } }
.ck-row-h { padding-top: 12px; padding-bottom: 10px; font-family: var(--pc-sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pc-muted); }
.ck-row.is-none { background: var(--green-mist); }
.ck-zero { font-family: var(--pc-display); font-weight: 400; font-size: 20px; color: var(--green); }
.ck-row a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ck-g { font-family: var(--pc-sans); font-size: 13px; font-weight: 600; color: var(--navy); }
.ck-live { display: block; margin-top: 4px; font-family: var(--pc-sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.ck-live.is-on { color: var(--green); }
@media (max-width: 900px) {
  .ck-row-h { display: none; }
  .ck-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 16px; }
  .ck-row > span:nth-child(n+2)::before { display: inline-block; min-width: 7.5em; margin-right: 8px; font-family: var(--pc-sans); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pc-muted); }
  .ck-row > span:nth-child(2)::before { content: 'Set by'; }
  .ck-row > span:nth-child(3)::before { content: 'When'; }
  .ck-row > span:nth-child(4)::before { content: 'How long'; }
  .ck-row > span:nth-child(5)::before { content: 'Why'; }
  .ck-row > span:first-child { margin-bottom: 4px; }
}

@media (min-width: 1001px) and (max-width: 1499px) {
  /* above the sheet the desk is wide: what is here on the left, what it is and the button on the right */
  .ck-desk .ck-now { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 32px; align-items: start; }
  .ck-now-lede { grid-column: 1; grid-row: 1; }
  .ck-count { grid-column: 1; grid-row: 2; }
  .ck-kinds { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .ck-clear { grid-column: 2; grid-row: 3; }
  .ck-desk .pc-desk-p { grid-column: 1 / -1; }
}

/* ── the four kinds of storage, each an accordion that opens by height (M26) ── */
.ck-kind { margin: 18px 0 0; max-width: var(--pc-col); background: var(--pc-paper); box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 30px -26px rgba(10,22,40,.4); }
.ck-kind + .ck-kind { margin-top: 10px; }
.ck-kind > summary { list-style: none; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; padding: 14px 16px 14px 14px; cursor: pointer; }
.ck-kind > summary::-webkit-details-marker { display: none; }
.ck-kind > summary::after { content: ''; width: 9px; height: 9px; border-right: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy); transform: rotate(45deg) translate(-2px, -2px); justify-self: center; }
.ck-kind[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.ck-kind > summary:hover { background: rgba(212,169,67,.07); }
.ck-kind > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.ck-kl { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--pc-rule); font-family: var(--pc-display); font-size: 18px; color: var(--gold-ink); }
.ck-kt { font-family: var(--pc-serif); font-size: 17px; color: var(--navy); }
.ck-kn { font-family: var(--pc-sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pc-muted); text-align: right; }
.ck-kn.is-here { color: var(--green); }
.ck-keys { margin: 0; padding: 0 16px 8px 60px; }
.ck-keys > div { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.5fr); gap: 4px 18px; padding: 10px 0; border-top: 1px solid var(--ck-hair); }
.ck-keys dt { margin: 0; font-size: 14px; line-height: 1.6; }
.ck-keys dd { margin: 0; font-family: var(--pc-serif); font-size: 15px; line-height: 1.55; color: var(--ink); }
.ck-keys > div.is-here dt::after { content: 'On this device'; display: inline-block; margin-left: 8px; padding: 1px 6px; font-family: var(--pc-sans); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green); background: var(--green-mist); vertical-align: 2px; }
@media (max-width: 700px) { .ck-keys { padding-left: 16px; } .ck-keys > div { grid-template-columns: minmax(0, 1fr); } .ck-kind > summary { grid-template-columns: 34px minmax(0, 1fr) 18px; } .ck-kn { display: none; } }
@supports (interpolate-size: allow-keywords) {
  .ck-sheet { interpolate-size: allow-keywords; }
  @media (prefers-reduced-motion: no-preference) {
    .ck-kind::details-content { block-size: 0; overflow-y: clip; transition: content-visibility var(--ck-large) allow-discrete, block-size var(--ck-large) var(--ck-ease-std); }
    .ck-kind[open]::details-content { block-size: auto; }
  }
}

/* ── who else the browser talks to: the page named on the right ── */
.ck-hosts .pc-li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: baseline; }
.ck-hosts .ck-hw { font-family: var(--pc-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); white-space: nowrap; }
@media (max-width: 600px) { .ck-hosts .pc-li { grid-template-columns: minmax(0, 1fr); } }

/* ── the marks and the notes: a fact, its source, and the way back (T25) ── */
.ck-fn { display: inline-block; margin-left: 2px; min-width: 1.35em; padding: 0 3px; font-family: var(--pc-sans); font-size: 10.5px; font-weight: 600; line-height: 1.5; text-align: center; vertical-align: .45em; color: var(--gold-ink); text-decoration: none; border: 1px solid var(--pc-rule); border-radius: 2px; }
.ck-fn:hover { background: rgba(212,169,67,.16); }
.ck-fn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ck-how { margin-top: 64px; padding-top: 14px; border-top: 1px solid var(--navy); scroll-margin-top: 96px; }
.ck-how h2 { margin: 0; font-family: var(--pc-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
.ck-notes { margin: 12px 0 0; padding: 0 0 0 1.4em; max-width: var(--pc-col); font-family: var(--pc-serif); font-size: 14.5px; line-height: 1.6; color: var(--pc-muted); }
.ck-notes li { padding: 6px 0; scroll-margin-top: 110px; }
.ck-notes li::marker { font-family: var(--pc-sans); font-size: 11px; font-weight: 600; color: var(--gold-ink); }
.ck-notes a { color: var(--navy); }
.ck-back { margin-left: 4px; text-decoration: none; }
/* the note just arrived at, and the line it came from, are marked for a moment */
.ck-notes li:target, .pc-li:has(> .ck-fn:target) { background: rgba(212,169,67,.14); box-shadow: -10px 0 0 rgba(212,169,67,.14); }
@media (prefers-reduced-motion: no-preference) {
  .ck-notes li, .pc-li { transition: background-color var(--ck-large) var(--ck-ease-std), box-shadow var(--ck-large) var(--ck-ease-std); }
}

/* ── forced colours: the panels keep their edges, the marks stay marks ── */
@media (forced-colors: active) {
  .ck-ledger, .ck-kind, .ck-confirm, .ck-done { border: 1px solid CanvasText; box-shadow: none; }
  .ck-fn, .ck-kl { border-color: LinkText; }
  .ck-row + .ck-row::before { background: CanvasText; transform: none; }
  .ck-keys > div.is-here dt::after { border: 1px solid CanvasText; }
}
@media print {
  .ck-desk, .ck-clear { display: none !important; }
  .ck-kind::details-content { block-size: auto !important; content-visibility: visible !important; }
  .ck-ledger, .ck-kind { box-shadow: none; border: 1px solid #000; }
}

/* ══ rp187 (21 Oct 2026), the footer pass: Cookies' own parts on the card grammar ══════════════════════════════
   The reading room it shares took the grammar in rp185 (hyyryn-policy-card.css); these are the page's own: the four
   kinds as cards, their letters in a rounded box, the confirmation and the "cleared" line as a ring and a tint
   instead of a bar down the side (a state is a ring, a tint or a dot, Mason 62). The cookie ledger keeps its ruled
   lines: it is the evidence. */
.ck .ck-kind { border-radius: 16px; overflow: hidden; }
.ck .ck-kl { border-radius: 10px; }
.ck .ck-confirm { border-radius: 12px; box-shadow: inset 0 0 0 1.5px rgba(169,68,66,.45); }
.ck .ck-done { border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(15,90,79,.35); }
@media (max-width: 1000px) { .ck .ck-how { scroll-margin-top: 64px; } }