/* The cookie notice of the site and the app (SITE-THEME-V2 2026-11-06), built by shared/js/cookie-notice.js. Contract (F1b, integrator
   2026-11-09: it showed through a delete sheet at 390; F1a review 2026-11-09: the one-line bar of F1b, 860 px wide, covered an open
   row menu's Delete at 768-1150 px and the page's text on /features at 1440, so it is the compact card its own contract describes):
   - A compact card at the bottom left, 340 px: the sentence on two lines, "Got it" and the link on one row; on a phone the short
     sentence (itself the link to the cookie page) and "Got it", one line along the bottom. While it shows, the page keeps that much room
     under its last line (html.has-cookie-notice), so it never sits on a row's actions for good.
   - Above the content, below dialogs; while a dialog, a drawer or a menu is open it is hidden (it never shows through a modal sheet and
     never covers a menu's items), and while a band of the app shows (app-v2.css).
   - Theme tokens only (theme-a.css), light and dark; one solid button in the theme's ink and a plain link. Slides in once; nothing moves
     under prefers-reduced-motion (the motion tokens are zero there). Never printed. */
/* --cn-clear (QA D12, 2026-11-10): the height of a screen's own fixed bar at the foot (the app's Create bar), which the notice keeps
   clear of: it took the press of "Create monitor" on a first visit */
.cookie-notice { position: fixed; left: 16px; bottom: calc(16px + var(--cn-clear, 0px)); z-index: 60; width: min(340px, calc(100vw - 32px)); max-width: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 10px 10px 16px;
  border-radius: var(--radius-lg, 16px); border: 1px solid var(--border); background: var(--popover, var(--card)); color: var(--foreground);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 40px -18px rgba(0, 0, 0, 0.35); font-size: 12.5px; line-height: 1.45;
  opacity: 0; transform: translateY(16px); transition: opacity var(--motion-slow) var(--motion-ease-out), transform var(--motion-sheet) var(--motion-ease-out); }
.cookie-notice.is-in { opacity: 1; transform: none; }
html.has-cookie-notice body { padding-bottom: 128px; }   /* room under the last line while it shows (a phone's: below) */
.cn-text { margin: 0; flex: 1 1 100%; min-width: 0; color: var(--muted-foreground); }
.cn-short { display: none; }
.cn-row { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.cn-ok { min-height: 32px; padding: 0 14px; border: 1px solid var(--foreground); border-radius: var(--radius-md, 12px); background: var(--foreground);
  color: var(--background); font: inherit; font-weight: 600; cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease-out), opacity var(--motion-base) var(--motion-ease-out); }
@media (hover: hover) { .cn-ok:hover { opacity: 0.88; } }
.cn-ok:active { transform: scale(0.97); }
.cn-ok:focus-visible, .cn-link:focus-visible, .cn-short:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.cn-link, .cn-short { color: var(--foreground); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px; }
@media (max-width: 640px) {
  .cookie-notice { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--cn-clear, 0px)); width: auto; max-width: none; flex-wrap: nowrap;
    gap: 12px; padding: 6px 6px 6px 14px; }
  .cn-text, .cn-link { display: none; }
  .cn-short { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cn-ok { min-height: 40px; }
  html.has-cookie-notice body { padding-bottom: 64px; }
}
/* a finger's target is 44 px (F1a review, 2026-11-09: "Got it" was 40 px tall and the short link 18) */
@media (pointer: coarse) {
  .cn-ok { min-height: 44px; }
  .cn-short { line-height: 44px; }
  .cn-link { padding-block: 13px; }   /* the hit area grows, the line does not */
}
/* a dialog or a drawer is open (the delete sheet, a modal, the settings drawer), or the site's menu sheet (QA public D10: it covered the
   sheet's "Start free" at 390): the notice steps out of the way */
body:has(dialog[open]) .cookie-notice, body:has(details.a-menu[open]) .cookie-notice { visibility: hidden; }
body.menu-open .cookie-notice { visibility: hidden; }
@media print { .cookie-notice { display: none !important; } }