/* Reader feedback sheet, shared by passage and chapter entry points. */
#author-feedback-sheet {
  bottom: var(--feedback-keyboard-offset, 0px);
  max-height: min(100dvh, var(--feedback-visible-height, 100dvh));
  overflow-y: auto;
  color: var(--text-primary);
}

#author-feedback-sheet .author-feedback-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-5); /* .bottom-sheet already pads the home-indicator area */
  font-family: var(--font-ui);
}

#author-feedback-title {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--text-primary);
}

.author-feedback-preview {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.author-feedback-preview.chapter-scope {
  font-weight: var(--font-semibold);
}

.author-feedback-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.author-feedback-categories button {
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

/* Picked tags: tint, thick border and a check mark. The solid fill is kept for Send only.
   On touch screens there is no focus ring (below), so FocusTrap focusing the first tag
   when the sheet opens can't look like a pick. */
.author-feedback-categories button[aria-pressed="true"] {
  border: 2px solid var(--button-bg, var(--color-primary));
  background: var(--color-primary-subtle);
  color: var(--button-bg, var(--color-primary));
  font-weight: var(--font-semibold);
}

.author-feedback-categories button[aria-pressed="true"]::before {
  content: "\2713\00a0";
}

#author-feedback-sheet label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

#author-feedback-note,
#author-feedback-name {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-primary);
  color: var(--text-primary);
  font: 16px/1.4 var(--font-ui);
}

#author-feedback-note {
  min-height: 104px;
  resize: vertical;
}

#author-feedback-note:focus,
#author-feedback-name:focus,
.author-feedback-categories button:focus-visible,
.author-feedback-actions button:focus-visible {
  outline: 2px solid var(--button-bg, var(--color-primary));
  outline-offset: 2px;
}

.author-feedback-actions {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.author-feedback-actions button {
  flex: 1;
  min-height: var(--touch-min);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  font: inherit;
  font-weight: var(--font-semibold);
  cursor: pointer;
}

#author-feedback-cancel {
  background: var(--surface-primary);
  color: var(--text-primary);
  border-color: var(--edge-strong);
}

/* Filled buttons take --button-bg / --button-text where the theme sets them (>= 4.5:1, see
   tests/test_theme_link_contrast.py); this id selector outranks the theme files' button rules. */
#author-feedback-send {
  border-color: var(--button-bg, var(--color-primary));
  background: var(--button-bg, var(--color-primary));
  color: var(--button-text, var(--text-inverse, #fff));
}

#author-feedback-send:disabled {
  opacity: .55;
  cursor: wait;
}

.original-text-feedback-btn {
  display: block;
  min-height: var(--touch-min);
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font: 600 var(--text-sm) var(--font-ui);
  cursor: pointer;
}

@media (min-width: 700px) {
  #author-feedback-sheet {
    width: min(440px, calc(100% - 32px));
    left: 50%;
    right: auto;
    transform: translate(-50%, 100%);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  }
  #author-feedback-sheet.full { transform: translate(-50%, 0); }
}

/* Author question inside the composer (answers carry its id). */
.author-feedback-question {
  margin: 0;
  font-family: var(--font-reading, Georgia, serif);
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--text-primary);
}

/* Bottom-bar Feedback button: same pill as Ask/Menu, filled, because feedback is the beta's main ask
   (UX-AUDIT B1, B2). Fill and label are the theme's button pair (_tokens.css --btn-filled-*). */
.btn-feedback {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
  background: var(--btn-filled-bg);
  color: var(--btn-filled-text);
  border: 1px solid var(--btn-filled-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform var(--transition-fast);
}
.btn-feedback:active { transform: scale(0.95); }

/* Paragraph-triggered author question: inline card after its paragraph. */
.feedback-question-inline {
  margin: var(--space-3) 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--surface-inset, var(--surface-primary));
  color: var(--text-primary);
  font-family: var(--font-ui);
}
.feedback-question-text {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.feedback-question-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.feedback-question-actions button {
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--surface-primary);
  color: var(--text-primary);
  font: inherit;
  font-weight: var(--font-semibold);
  cursor: pointer;
}
.feedback-question-answer {
  background: var(--btn-filled-bg);
  color: var(--btn-filled-text);
  border-color: var(--btn-filled-border);
}

/* The question is the card's main text; its caption (.chapter-completion-where, chat.css) is the small
   print. Both are <div> (highlight.js): as <p> the reader's text-size rule `.book-content p
   { font-size: Npx !important }` (you-sheet/internals.js) set both to the reading size. */
.chapter-completion-question {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--text-primary);
}

/* Narrow phones: three pills (Ask, Feedback, Menu) must not touch. */
@media (max-width: 380px) {
  .persistent-controls { padding-inline: var(--space-3); }
  .btn-feedback { padding: 0 var(--space-3); }
}
@media (max-width: 340px) {
  .btn-feedback { font-size: 0; gap: 0; }
  .btn-feedback svg { width: 20px; height: 20px; }
}

.author-feedback-name-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.author-feedback-name-field[hidden],
.author-feedback-as[hidden] {
  display: none;
}

.author-feedback-as {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

#author-feedback-note::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.author-feedback-as {
  color: var(--text-primary);
  font-size: var(--text-base, 1rem);
}

/* Touch screens: no focus ring on tap targets; keyboards (hover devices) keep it. */
@media (hover: none) {
  .author-feedback-categories button:focus-visible,
  .author-feedback-actions button:focus-visible {
    outline: none;
  }
}