/* ============================================================
   Feedback widget (web/templates/partials/feedback_widget.html).
   A fixed button at the bottom-right of registered pages opens a
   panel that slides up from the bottom. Structure in @layer layout,
   paint in @layer design. Tokens only, no hardcoded color (D10).

   The root renders hidden; feedback.js removes [hidden] and toggles
   [data-open]. The root is display: contents so it adds no row to
   the body grid; its children are all fixed.
   ============================================================ */

@layer layout {
  .feedback:not([hidden]) { display: contents; }

  .feedback__open {
    position: fixed;
    inset-block-end: var(--mea-space-4);
    inset-inline-end: var(--mea-space-4);
    z-index: var(--mea-z-top);
    min-block-size: var(--t-target-min);
    padding: var(--mea-space-2) var(--mea-space-4);
    /* Only the panel slides. The button never animates, so it is always
       still enough to click. */
    transition: none;
    animation: none;
  }

  .feedback__backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--mea-z-top);
    visibility: hidden;
    opacity: 0;
  }

  .feedback__panel {
    position: fixed;
    inset-block-end: 0;
    inset-inline-end: 0;
    z-index: var(--mea-z-top);
    display: grid;
    gap: var(--mea-space-3);
    inline-size: min(100%, 28rem);
    max-block-size: 90vh;
    overflow-y: auto;
    padding: var(--mea-space-5);
    padding-block-end: max(var(--mea-space-5), env(safe-area-inset-bottom));
    visibility: hidden;
    transform: translateY(100%);
  }

  .feedback[data-open] .feedback__panel {
    visibility: visible;
    transform: translateY(0);
  }

  .feedback[data-open] .feedback__backdrop {
    visibility: visible;
    opacity: 1;
  }

  /* The form and the thank-you view take turns in the panel's grid. */
  .feedback__form:not([hidden]), .feedback__thanks:not([hidden]) { display: contents; }

  .feedback__heading, .feedback__warning, .feedback__status, .feedback__thanks-body { margin: 0; }
  .feedback__text { inline-size: 100%; min-block-size: 8rem; padding: var(--mea-space-3); resize: vertical; }
  .feedback__status:empty { display: none; }
  .feedback__attest { display: flex; align-items: flex-start; gap: var(--mea-space-2); }
  .feedback__attest input { flex-shrink: 0; inline-size: var(--mea-space-5); block-size: var(--mea-space-5); margin-block-start: var(--mea-space-1); }
  .feedback__actions { display: flex; flex-wrap: wrap; gap: var(--mea-space-3); }

  /* The page's last content scrolls clear of the button. */
  body:has(.feedback:not([hidden])) .appfooter {
    padding-block-end: calc(var(--t-target-min) + var(--mea-space-8));
  }

  /* The officer dashboard pins #primary-actions to the bottom of a narrow
     screen (web.css); the button rides above that bar. */
  @media (max-width: 48rem) {
    body:has(#primary-actions) .feedback__open {
      inset-block-end: calc(var(--t-target-min) + var(--mea-space-4) * 3);
    }
  }

  /* Opening flips visibility at once, so focus can land in the panel on the
     same tick; closing holds it visible until the slide down finishes. */
  @media (prefers-reduced-motion: no-preference) {
    .feedback__panel {
      transition: transform var(--mea-dur-smooth) var(--mea-ease-default),
                  visibility 0s linear var(--mea-dur-smooth);
    }
    .feedback__backdrop {
      transition: opacity var(--mea-dur-smooth) var(--mea-ease-default),
                  visibility 0s linear var(--mea-dur-smooth);
    }
    .feedback[data-open] .feedback__panel,
    .feedback[data-open] .feedback__backdrop {
      transition-delay: 0s;
    }
  }
}

@layer design {
  .feedback__open {
    border: 0;
    border-radius: var(--mea-radius-pill);
    background: var(--t-accent);
    color: var(--t-accent-text);
    box-shadow: var(--mea-shadow-md);
    font-weight: var(--mea-w-semibold);
    cursor: pointer;
  }

  .feedback__open:focus-visible,
  .feedback__text:focus-visible {
    outline: 2px solid var(--t-border-focus);
    outline-offset: 2px;
  }

  .feedback__backdrop { background: var(--mea-scrim); }

  .feedback__panel {
    border-start-start-radius: var(--mea-radius-xl);
    border-start-end-radius: var(--mea-radius-xl);
    background: var(--t-card-bg);
    color: var(--t-text);
    box-shadow: var(--mea-shadow-lg);
  }

  .feedback__heading { font-size: var(--mea-text-lg); }

  .feedback__warning {
    padding: var(--mea-space-3);
    border-radius: var(--mea-radius-md);
    background: var(--t-warning-bg);
    color: var(--t-warning-text);
  }

  .feedback__label { font-weight: var(--mea-w-semibold); }

  .feedback__text {
    border: 1px solid var(--t-border);
    border-radius: var(--mea-radius-md);
    background: var(--t-bg-elevated);
    color: var(--t-text);
    font: inherit;
  }

  .feedback__status[data-state="error"] { color: var(--t-error-text); }
}