/* The "Rate this fragrance" form: one set of theme-aware colors, boxes and type, loaded after the older review styles.
 *
 * The note and accord cards were hard-coded cream, so in dark mode their light text vanished and each box sat inside
 * two or three more bordered boxes. Everything here follows the site's tokens, so every palette and both modes work.
 */

/* --- Fewer boxes inside boxes -------------------------------------------------------------------------------------------- */
/* Once the panel is open its own box is dropped (the community section already frames it); the title keeps a divider. */
.fragrance-rating-accordion[open] { background: none; border-color: transparent; }
.fragrance-rating-accordion[open] > summary { border-bottom: 1px solid var(--line); }
.fragrance-rating-body { border: 0; border-radius: 0; padding: 20px 4px 24px; display: grid; gap: 18px; }
.fragrance-rating-body > h4 { margin: 8px 0 -4px; font: 400 1.375rem/1.2 var(--studio-serif, Georgia, serif); letter-spacing: -.01em; color: var(--ink); }
.fragrance-rating-body :is(.form-label, label) { font-size: .8125rem; font-weight: 650; color: var(--ink); }
.fragrance-rating-body :is(select, textarea) { font-size: .9375rem; color: var(--ink); background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; }
.fragrance-rating-body textarea { min-height: 120px; line-height: 1.5; }
.fragrance-rating-body :is(select, textarea, input):focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

/* --- The scent impression builder ---------------------------------------------------------------------------------------- */
.impression-editor { display: grid; gap: 20px; margin: 4px 0 8px; }
.impression-intro {
  margin: 0; padding: 20px 22px; border-radius: 18px;
  background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent-color) 30%, var(--line));
}
.impression-intro .eyebrow { font-size: .6875rem; letter-spacing: .14em; color: var(--accent-color); }
.impression-intro h4 { margin: 6px 0 8px; font: 400 1.5rem/1.25 var(--studio-serif, Georgia, serif); color: var(--ink); }
.impression-intro p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--muted); }

/* Notes and Accords are sections, not more boxes: a title, then the cards. */
.impression-group { margin: 0; padding: 0; border: 0; background: none; min-width: 0; }
.impression-group legend { display: block; width: 100%; margin: 0 0 12px; padding: 0; font: 400 1.375rem/1.2 var(--studio-serif, Georgia, serif); color: var(--ink); }
.impression-group legend > span { margin-inline-start: 8px; font: 650 .6875rem/1 var(--font-ui, Inter, system-ui, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.impression-rows { display: grid; gap: 10px; }

.impression-row {
  padding: 14px 16px 12px; border-radius: 16px; color: var(--ink);
  background: color-mix(in srgb, var(--note-color) 7%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--note-color) 28%, var(--line));
}
.impression-row.included { background: color-mix(in srgb, var(--note-color) 16%, var(--bg-card)); border-color: var(--note-color); box-shadow: inset 4px 0 0 var(--note-color); }
.impression-row-heading { margin-bottom: 12px; }
.impression-row-heading label { font-size: .9375rem !important; font-weight: 650; color: var(--ink); }
.impression-row-heading strong { font-size: 1.0625rem; }
.impression-row-heading small { font-size: .75rem; color: var(--muted); }
.impression-row input[type=checkbox] { width: 18px; height: 18px; }
.impression-row input[type=range] { height: 10px; background: linear-gradient(to right, var(--note-color) 0 var(--strength, 50%), color-mix(in srgb, var(--ink) 16%, transparent) var(--strength, 50%) 100%); }
.impression-row input[type=range]::-webkit-slider-thumb { border-color: var(--bg-card); box-shadow: 0 0 0 1px var(--note-color), 0 2px 6px #0006; }
.impression-row input[type=range]::-moz-range-thumb { border-color: var(--bg-card); box-shadow: 0 0 0 1px var(--note-color), 0 2px 6px #0006; }
.impression-row input[type=range]:focus-visible { outline: 2px solid var(--note-color); outline-offset: 4px; }
.impression-scale { margin-top: 10px; font-size: .75rem; color: var(--muted); }
.impression-scale .impression-share { font-weight: 650; }

.impression-add input { font-size: .9375rem; border-radius: 12px; }
.impression-message { font-size: .8125rem; }
.impression-balance { margin-top: 16px; padding-top: 16px; }
.impression-balance > strong { font-size: .8125rem; font-weight: 650; color: var(--ink); }
.impression-legend { font-size: .8125rem; }
.impression-stack { height: 14px; background: color-mix(in srgb, var(--ink) 12%, transparent); }

@media (max-width: 640px) {
  .fragrance-rating-body { padding: 16px 14px 20px; }
  .impression-intro { padding: 16px; }
  .impression-row { padding: 12px 12px 10px; }
}