/* ============================================================
   consent.css — the cookie banner (public/consent.js).

   A full-width bar along the bottom of the screen, in the 3SC site's
   style: the soft green ground, a black rule, square buttons with a hard
   shadow. Text on the left and buttons on the right on wider screens,
   stacked on phones. Unlike 3SC's own bar, the three buttons look the
   same: saying no is as easy as yes.

   The site stays usable before a choice is made: while the bar is up the
   footer grows by its height (--kc-height, set by consent.js), so nothing
   is left stuck behind it. It scrolls inside itself rather than clipping
   when text is enlarged. No entrance animation: see DECISIONS.md
   section 1.

   On the green, the site's pink focus ring and grey secondary text fall
   below WCAG contrast, so focus is shown in black and all text is black.
   ============================================================ */
.kc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;                 /* over the notch (40) and footer (30) */
  box-sizing: border-box;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  /* the same column and side padding as the footer's bottom bar (footer.css),
     so the two line up at every width */
  padding: 20px max(clamp(24px, 5vw, 64px), calc((100% - 1180px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 40px;
  align-items: center;
  background: var(--cube-green-soft, #6ce97f);
  color: var(--cube-black, #000);
  border-top: 3px solid var(--cube-black, #000);
  font-family: var(--cube-font-primary, "Poppins", system-ui, sans-serif);
  font-size: .9375rem;
  line-height: 1.5;
  text-align: left;
}
.kc[hidden] { display: none; }

/* The "See how it works" overlay makes the rest of the page inert; the bar
   would sit on top of it, unclickable. */
body.kos-howto-lock .kc { display: none; }

/* Room to scroll the bottom of the page clear of the bar, and to keep a
   focused control there from being hidden behind it. The footer's black bar
   grows rather than leaving a band of page background below it. */
html.kc-open { scroll-padding-bottom: calc(var(--kc-height, 0px) + 16px); }
html.kc-open .ft-bottom-inner { margin-bottom: var(--kc-height, 0px); }

.kc-title {
  grid-column: 1;
  margin: 0 0 4px;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.kc-title:focus { outline: none; }
.kc-body {
  grid-column: 1;
  margin: 0;
  font-family: var(--cube-font-secondary, "Anonymous Pro", ui-monospace, monospace);
}
.kc-body a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* The buttons sit to the right of the title and text. */
.kc-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 4px 4px 0;          /* room for the buttons' shadow */
}

/* Choosing: the categories open below the text, and the buttons move below
   them, so what you see is in the order Tab takes you through it. */
.kc-panel { grid-column: 1 / -1; grid-row: 3; margin: 16px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; }
.kc-panel[hidden] { display: none; }
.kc.kc-choosing { grid-template-columns: minmax(0, 1fr); }
.kc.kc-choosing .kc-actions { grid-column: 1; grid-row: 4; justify-self: end; margin-top: 18px; }

.kc-opt { display: flex; gap: 10px; align-items: flex-start; }
.kc-opt label { cursor: pointer; }
.kc-opt input:disabled + label { cursor: default; }
.kc-opt-title { display: block; font-weight: 700; }
.kc-opt-desc { display: block; font-family: var(--cube-font-secondary, "Anonymous Pro", ui-monospace, monospace); font-size: .875rem; }

/* Checkboxes drawn in black: the browser's grey edge is too faint on the green. */
.kc-opt input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  background: var(--cube-white, #fff) center / 14px no-repeat;
  border: 2px solid var(--cube-black, #000);
  border-radius: 0;
  cursor: pointer;
}
.kc-opt input:checked {
  background-color: var(--cube-black, #000);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E");
}
.kc-opt input:disabled { cursor: default; opacity: .55; }
/* High contrast modes repaint those colours, which would hide the tick:
   there, the browser's own checkbox shows the state instead. */
@media (forced-colors: active) {
  .kc-opt input { appearance: auto; -webkit-appearance: auto; background: none; border: 0; }
}

.kc-btn {
  min-height: 44px;
  padding: 10px 22px;
  font: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--cube-black, #000);
  background: var(--cube-white, #fff);
  border: 2px solid var(--cube-black, #000);
  border-radius: 0;
  box-shadow: var(--cube-shadow-m, 4px 4px 0 0 #000);
  cursor: pointer;
}
/* Lifts on hover and presses in on click, the 3SC buttons' shadow move. */
@media (hover: hover) {
  .kc-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--cube-shadow-l, 6px 6px 0 0 #000); }
}
.kc-btn:active { transform: translate(2px, 2px); box-shadow: var(--cube-shadow-ss, 2px 2px 0 0 #000); }

.kc-body a:focus-visible,
.kc-opt input:focus-visible,
.kc-title:focus-visible { outline: 3px solid var(--cube-black, #000); outline-offset: 3px; }
/* far enough out to clear the button's shadow on every side */
.kc-btn:focus-visible { outline: 3px solid var(--cube-black, #000); outline-offset: 7px; }

/* "Cookie settings" in the footer's policy links: a button that looks and
   behaves like its neighbours (footer.css, .ft-bottom a). */
.kc-link {
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .15s ease;
}
.kc-link:hover { color: var(--ft-white, #fff); }
.kc-link:focus-visible { outline: 3px solid var(--cube-pink, #f70087); outline-offset: 2px; }

/* Below 64em (1024px at the default text size, wider when text is set
   larger): one column, buttons below the text and sharing the width. Two
   columns any narrower squeeze the text into more lines than stacking costs. */
@media (max-width: 64em) {
  .kc { grid-template-columns: minmax(0, 1fr); padding: 16px clamp(16px, 5vw, 64px); }
  .kc-title { font-size: 1.25rem; }
  .kc-actions,
  .kc.kc-choosing .kc-actions { grid-column: 1; grid-row: auto; justify-self: stretch; margin-top: 12px; gap: 10px; }
  .kc-btn { flex: 1 1 auto; padding: 8px 12px; white-space: nowrap; }
}
/* Phones held sideways: as little height as possible. */
@media (max-height: 30em) {
  .kc { padding-block: 10px; font-size: .875rem; }
  .kc-title { font-size: 1.0625rem; margin-bottom: 2px; }
  .kc-actions, .kc.kc-choosing .kc-actions { margin-top: 8px; }
  .kc-panel { margin-top: 10px; gap: 8px 24px; }
}
/* Narrow screens: the categories stack. */
@media (max-width: 40em) {
  .kc-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30em) {
  .kc { font-size: .875rem; padding: 14px; }
  .kc-title { font-size: 1.125rem; }
  /* Choosing on a phone: the three buttons one above another at full width,
     rather than two in a row and one stretched alone below them. */
  .kc.kc-choosing .kc-actions { flex-direction: column; }
}
/* 360px Android phones: just enough off the buttons to keep one row. */
@media (max-width: 25em) {
  .kc-btn { padding: 8px; letter-spacing: 0; }
}
/* The smallest phones (320px), where three don't fit: stacked, not uneven. */
@media (max-width: 22.4375em) {
  .kc-actions { flex-direction: column; }
}