/* Write panel for the Nexa reviews wall — split out of reviews.css to keep both under the
   300-line project cap. The wall (score panel, sort bar, cards) lives in reviews.css, which also
   owns the --rv-star tokens this file's star picker uses. */

/* collapsed to zero rows until opened; 0fr/1fr animates without a magic max-height */
.rv-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.44s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
}
.rv-panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.rv-panel > * { min-height: 0; overflow: hidden; }
.rv-panel-inner {
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid var(--hairline);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--blue) 5%, transparent), transparent 55%),
    var(--field-sheen);
}
.rv-compose-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rv-compose-head h3 { font-size: var(--fs-sub); font-weight: 600; letter-spacing: -0.01em; }
.rv-compose-head p { font-size: var(--fs-body); color: var(--ink-40); flex: 1; min-width: 200px; }

.rv-form { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.rv-field { display: flex; flex-direction: column; gap: 6px; }
.rv-field > label {
  font-size: var(--fs-tiny); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-40);
}
.rv-field-rating { gap: 4px; }
.rv-pick-row { display: flex; align-items: center; }
.rv-grid { display: grid; grid-template-columns: minmax(0, 320px); gap: 12px; }
.rv-input, .rv-area {
  width: 100%;
  padding: 10px 13px;
  border-radius: 11px;
  border: 1px solid var(--hairline);
  background: var(--field-sheen);
  color: var(--ink);
  font: inherit; font-size: var(--fs-copy);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.rv-area { min-height: 88px; resize: vertical; line-height: 1.58; }
.rv-input:focus, .rv-area:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--blue) 40%, var(--hairline));
  background: color-mix(in srgb, var(--blue) 4%, var(--field-sheen));
}
.rv-input::placeholder, .rv-area::placeholder { color: var(--ink-40); }

/* star picker — buttons, so it is keyboard reachable. Gold, matching the wall. */
.rv-pick { display: inline-flex; align-items: center; gap: 4px; }
.rv-pick button {
  border: 0; background: none; padding: 2px; cursor: pointer; line-height: 0; border-radius: var(--r-xs);
  transition: transform 0.18s ease;
}
.rv-pick button:hover { transform: scale(1.14); }
.rv-pick button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rv-pick svg { width: 23px; height: 23px; fill: var(--rv-star-off); transition: fill 0.18s ease; }
.rv-pick svg.on { fill: var(--rv-star); }
.rv-pick-note { margin-left: 10px; font-size: var(--fs-body); color: var(--ink-40); }

.rv-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rv-submit {
  padding: 10px 20px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--blue);
  color: #fff;
  font: inherit; font-size: var(--fs-body); font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.rv-submit:hover { transform: translateY(-1px); }
.rv-submit[disabled] { opacity: 0.5; cursor: default; transform: none; }
.rv-ghost {
  border: 0; background: none; cursor: pointer; color: var(--ink-40);
  font: inherit; font-size: var(--fs-body); letter-spacing: 0.05em;
  transition: color 0.2s ease;
}
.rv-ghost:hover { color: var(--blue); }
.rv-danger:hover { color: #e5484d; }
.rv-msg { font-size: var(--fs-body); color: var(--ink-40); flex: 1; min-width: 160px; }
.rv-msg.bad { color: #e5484d; }
.rv-msg.good { color: var(--blue); }
.rv-counter { font-size: var(--fs-small); color: var(--ink-40); align-self: flex-end; letter-spacing: 0.04em; }

@media (max-width: 620px) {
  .rv-panel-inner { padding-inline: 16px; }
  .rv-pick svg { width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-panel { transition: none; }
}