/* /static/css/feedback.css — Minimal TwF styles */

:root{
  --twf-accent: hsl(210 70% 46%);
  --twf-bg: hsl(210 50% 96%);
  --twf-text: hsl(210 15% 20%);
  --twf-muted: hsl(210 12% 40%);
  --twf-radius: 10px;
  --twf-gap: 0.5rem;
}

/* TwF container */
.twf-block{
  position: relative;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  margin: 1rem 0;
  background: var(--twf-bg);
  border-left: 3px solid var(--twf-accent);
  border-radius: var(--twf-radius);
  color: var(--twf-text);
}
.twf-block.is-open{ border-left-width: 4px; }

/* Header: pill + label + task + button */
.twf-header{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--twf-gap);
}
.twf-title{ font-weight: 600; color: var(--twf-muted); }
.twf-task{ display: inline; }

/* Feedback panel visibility — rely on [hidden] */
.twf-feedback-panel[hidden]{ display: none; }
.twf-feedback-panel{
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid color-mix(in oklab, var(--twf-accent), #000 25%);
  background: #fff;
  border-radius: 6px;
}
.twf-feedback{ display: block; }

/* Toggle button */
.twf-toggle{
  justify-self: end;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  border: 1px solid color-mix(in oklab, var(--twf-accent), #000 25%);
  background: white;
  font-size: 0.9rem;
  cursor: pointer;
}
.twf-toggle:hover{ background: color-mix(in oklab, var(--twf-bg), white 70%); }
.twf-toggle:focus-visible{ outline: 2px solid var(--twf-accent); outline-offset: 2px; }
.twf-toggle[aria-expanded="true"]{ font-weight: 600; }

/* Minimalist state indicator for the Feedback button */
.twf-toggle::after{
  content: " ▼";              /* closed state */
  display: inline-block;
  line-height: 1;
}
.twf-toggle[aria-expanded="true"]::after{
  content: " ▲";              /* open state */
}