/* The feedback tab and its form (public/feedback.js). Signed in only.

   The tab is 20px wide on purpose: .wrap keeps 22px of padding at each side,
   so on every screen where the app's panels stop short of the edge, the tab
   sits in that empty strip. Where something does reach the edge, feedback.js
   moves the tab up or down to a clear spot, or hides it until there is one.
   It never sits over words, fields, buttons or a document. */

.fb-tab {
  position: fixed; right: 0; top: 60vh; z-index: 35; /* under the header and its menus */
  width: 20px; padding: 10px 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 500 11.5px/1 Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, Arial, sans-serif;
  letter-spacing: .02em; color: var(--sub);
  background: var(--panel); border: 1px solid var(--hair); border-left: 0;
  /* Rotated, so these are the corners on the left as it stands on screen. */
  border-radius: 0 7px 7px 0;
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: top .2s ease, color .13s, background .13s, opacity .15s;
}
.fb-tab:hover, .fb-tab[aria-expanded="true"] { color: var(--ink); background: var(--accent-soft); }
.fb-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Nowhere clear to stand: out of sight and out of reach until there is. */
.fb-tab.fb-off { opacity: 0; pointer-events: none; visibility: hidden; }

.fb-panel {
  position: fixed; right: 30px; z-index: 58; /* under a sign-in box or a modal */
  width: 330px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 16px 18px 18px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--hair); border-radius: 12px;
  box-shadow: var(--shadow-lg);
  font-size: 14px; line-height: 1.5;
}
.fb-panel h2 { margin: 0; font-size: 15.5px; font-weight: 600; }
.fb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.fb-x {
  width: 28px; height: 28px; display: grid; place-items: center; flex: none;
  border: 0; border-radius: 6px; background: transparent; color: var(--sub); cursor: pointer;
}
.fb-x:hover { background: var(--paper-2); color: var(--ink); }
.fb-panel fieldset { border: 0; margin: 0 0 12px; padding: 0; }
.fb-panel legend, .fb-panel label.fb-lbl { display: block; margin: 0 0 6px; padding: 0; font-size: 13px; font-weight: 550; color: var(--sub); }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-kinds label { position: relative; }
.fb-kinds input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fb-kinds span {
  display: inline-block; padding: 5px 11px; font-size: 13.5px;
  border: 1px solid var(--hair); border-radius: 8px; background: var(--panel); color: var(--ink);
}
.fb-kinds input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fb-kinds input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-panel textarea {
  display: block; width: 100%; min-height: 104px; resize: vertical;
  padding: 8px 10px; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--hair); border-radius: 8px;
}
.fb-panel textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-count { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); text-align: right; }
.fb-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.fb-err { margin: 8px 0 0; font-size: 13px; color: var(--warn); }
.fb-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.fb-hide {
  border: 0; padding: 4px 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--sub); text-decoration: underline; text-underline-offset: 2px;
}
.fb-hide:hover { color: var(--ink); }
.fb-thanks p { margin: 0 0 14px; }

/* A phone has no empty edge to spare, so the tab is never shown there: Send
   feedback is in the account menu instead. The form becomes a sheet. */
@media (max-width: 640px) {
  .fb-tab { display: none; }
  .fb-panel { left: 16px; right: 16px; bottom: 16px; top: auto !important; width: auto; max-width: none; }
}
@media print { .fb-tab, .fb-panel { display: none !important; } }