/* CCCKL feedback tab + panel. Loads on every front-end page, including theme
   pages that never load directory.css, so it repeats the tokens and the two
   font faces it needs rather than depending on that file. Everything is scoped
   under .ccckl-fb so no theme styles bleed in and this never leaks out.
   Fonts are self-hosted (no external requests). */

@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/public-sans-400.woff2") format("woff2");}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/public-sans-600.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");}

.ccckl-fb{
  --c-fg:#1c2340; --c-civic:#293f95; --c-civic-dark:#1c2c6b; --c-accent:#e16e38;
  --c-wash:#eef1fa; --c-line:#d6dcef; --c-muted:#565e79;
  --c-green:#15633b; --c-green-wash:#ebf5ef; --c-err:#8f1d1d; --c-err-wash:#fdf0ef;
  --f-sans:"Public Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  position:fixed; top:0; right:0; bottom:0; z-index:99990;
  font-family:var(--f-sans); font-size:16px; line-height:1.5; color:var(--c-fg);
  /* Closed, the element is just the tab: no full-height strip swallowing clicks. */
  width:0; display:flex; align-items:center;
}
.ccckl-fb *,.ccckl-fb *::before,.ccckl-fb *::after{box-sizing:border-box;}
.ccckl-fb :where(a,button,input,textarea,select):focus-visible{outline:3px solid var(--c-civic);outline-offset:2px;}

/* ===== the tab ===== */
.ccckl-fb__tab{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  background:var(--c-civic); color:#fff; border:0; border-radius:6px 0 0 6px;
  padding:20px 11px; font-family:var(--f-mono); font-size:14px; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; white-space:nowrap;
  box-shadow:0 2px 10px rgba(28,35,64,.25);
}
.ccckl-fb__tab::-webkit-details-marker{display:none;}
.ccckl-fb__tab::marker{content:"";}
.ccckl-fb__tab:hover{background:var(--c-civic-dark);}
.ccckl-fb__tabtext{writing-mode:vertical-rl;}
/* Open: the tab sits against the panel's edge and turns into the close affordance. */
.ccckl-fb[open] .ccckl-fb__tab{right:min(420px,100vw);background:var(--c-accent);}

/* ===== the panel ===== */
.ccckl-fb__panel{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,100vw);
  background:#fff; border-left:1px solid var(--c-line);
  box-shadow:-8px 0 28px rgba(28,35,64,.18);
  display:flex; flex-direction:column; overflow:hidden;
}
.ccckl-fb[open] .ccckl-fb__panel{animation:ccckl-fb-in .18s ease-out;}
@keyframes ccckl-fb-in{from{transform:translateX(16px);opacity:.4;}to{transform:none;opacity:1;}}
@media (prefers-reduced-motion:reduce){.ccckl-fb[open] .ccckl-fb__panel{animation:none;}}

.ccckl-fb__head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; background:var(--c-wash); border-bottom:1px solid var(--c-line);
}
.ccckl-fb__title{margin:0;font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;color:var(--c-fg);}
.ccckl-fb__close{
  flex-shrink:0; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--c-line); background:#fff; color:var(--c-muted);
  font-size:20px; line-height:1; cursor:pointer; border-radius:0;
}
.ccckl-fb__close:hover{border-color:var(--c-fg);color:var(--c-fg);}
.ccckl-fb__body{flex:1 1 auto;overflow-y:auto;padding:20px;-webkit-overflow-scrolling:touch;}
.ccckl-fb__form{display:flex;flex-direction:column;gap:20px;margin:0;}

/* ===== sections ===== */
.ccckl-fb-section{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
.ccckl-fb-section[hidden]{display:none;}
.ccckl-fb-section__title{
  margin:0; font-family:var(--f-mono); font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; color:var(--c-civic);
  padding-top:16px; border-top:2px solid var(--c-civic);
}
.ccckl-fb-section__hint{margin:-8px 0 0;font-size:13px;color:var(--c-muted);}
/* This one reads as a sentence, so it drops the uppercase mono treatment. */
.ccckl-fb-section--you .ccckl-fb-section__title{
  font-family:var(--f-sans);font-size:14px;font-weight:600;
  text-transform:none;letter-spacing:0;line-height:1.35;
}

/* ===== fields ===== */
.ccckl-fb-field{display:flex;flex-direction:column;gap:4px;}
.ccckl-fb-label{font-family:var(--f-mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--c-muted);}
.ccckl-fb-req{color:var(--c-accent);}
.ccckl-fb-opt{text-transform:none;letter-spacing:0;font-family:var(--f-sans);font-size:12px;}
.ccckl-fb-input,.ccckl-fb-textarea,.ccckl-fb-select{
  width:100%; border:1px solid rgba(28,35,64,.4); padding:8px 12px; font-size:15px;
  color:var(--c-fg); background:#fff; border-radius:0; font-family:inherit; min-width:0;
}
.ccckl-fb-input::placeholder,.ccckl-fb-textarea::placeholder{color:var(--c-muted);}
.ccckl-fb-textarea{resize:vertical;line-height:1.5;}
.ccckl-fb-help{margin:0;font-size:13px;color:var(--c-muted);}

/* The honeypot: off-screen for everyone, never display:none (bots skip those). */
.ccckl-fb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ===== notice + footer ===== */
.ccckl-fb-notice{margin:0 0 16px;padding:10px 14px;border:1px solid;font-size:14px;font-weight:500;}
.ccckl-fb-notice--ok{color:var(--c-green);border-color:var(--c-green);background:var(--c-green-wash);}
.ccckl-fb-notice--err{color:var(--c-err);border-color:var(--c-err);background:var(--c-err-wash);}
.ccckl-fb__footer{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--c-line);}
.ccckl-fb__submit{
  align-self:flex-start; background:var(--c-civic); color:#fff; border:0; border-radius:0;
  padding:10px 24px; font-size:15px; font-weight:600; font-family:inherit; cursor:pointer;
}
.ccckl-fb__submit:hover{background:var(--c-civic-dark);}

/* Logged-in admins get the WordPress toolbar at the top of the page; it is
   fixed there, so the panel starts below it instead of underneath it. */
body.admin-bar .ccckl-fb__panel{top:32px;}
@media (max-width:782px){body.admin-bar .ccckl-fb__panel{top:46px;}}

/* ===== phones: a full-width sheet, tab pinned to the bottom corner ===== */
@media (max-width:600px){
  .ccckl-fb__tab{top:auto;bottom:16px;transform:none;padding:12px 16px;}
  .ccckl-fb__tabtext{writing-mode:horizontal-tb;}
  .ccckl-fb[open] .ccckl-fb__tab{display:none;}
  .ccckl-fb__panel{width:100vw;}
}

/* A theme that hides overflow on <details> must not clip the fixed panel. */
.ccckl-fb[open]{overflow:visible;}