/* AiB Platform — the cookie notice (partials/cookie_notice.html): the
   bottom-left pill and the small ink panel it opens, on every public-shell
   surface (public_base + auth_base). The panel wears the header/footer
   band's ink so it reads the same over the light free-tools canvas and the
   night legal pages. Monochrome by the sodium discipline — the notice is
   furniture, not a feature. Loaded after css/public/public.css. */

.cookie-note {
  position: fixed;
  left: var(--pad);
  bottom: clamp(16px, 3vh, 28px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  color: var(--white);
}

/* The pill parks in the band's bottom-left corner for good — the footer
   digs it a lane so the imprint and the legal links never sit under it.
   Scoped here on purpose: only the widget-bearing shells load this sheet,
   so the error pages' footer keeps its slim band. */
.public-footer { padding-bottom: 76px; }

/* ----- the pill: the reference posture — a quiet word, always in reach ----- */
.cn-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 10px;
  border: 1px solid var(--hairline-dark);
  border-radius: 999px;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(13, 14, 19, 0.18);
  transition: color 0.3s, border-color 0.3s;
}
.cn-pill:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.4); }
.cn-dot {
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.6;
}

/* ----- the panel: a small ink page above the pill ----- */
.cn-panel {
  width: min(354px, calc(100vw - 2 * var(--pad)));
  padding: 20px 22px 22px;
  background: var(--ink);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(13, 14, 19, 0.35);
  animation: cn-rise 0.5s var(--ease-out);
}
@keyframes cn-rise {
  from { opacity: 0; transform: translateY(12px); }
}
.cn-eyebrow { margin: 0 0 12px; color: var(--grey-dark); }
.cn-eyebrow .plus { display: inline-block; margin-right: 10px; opacity: 0.45; }
.cn-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 760;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--white);
}
.cn-body {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

/* the census rows — categories stated, never toggled: there is nothing to gate */
.cn-rows { list-style: none; margin: 0 0 18px; padding: 0; }
.cn-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--hairline-dark);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.cn-rows li:last-child { border-bottom: 1px solid var(--hairline-dark); }
.cn-kind { color: rgba(255, 255, 255, 0.78); }
.cn-state { color: var(--grey-dark); }
.cn-state.is-on { color: var(--white); }

.cn-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.cn-accept {
  padding: 9px 18px 10px;
  border: 1px solid var(--white);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s;
}
.cn-accept:hover { background: rgba(255, 255, 255, 0.86); }
.cn-more {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s;
}
.cn-more:hover { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .cn-panel { animation: none; }
}