/* rv-quote.css — RV Quote tool. Single page + section rail, styled to match the
   Boat Quote tool and the v1 Personal Lines quoter (reuses their global .card /
   .grid-2 / .label / .checkbox-row / .hint). Uses the shared design tokens
   (--bg-card, --text, --apple-blue, --text-secondary, --bg-input, --border).
   Dark mode is default. Plugin-scoped and standalone — see CLAUDE.md. */

.rq-container { max-width: 1120px; margin: 0 auto; padding: 16px; }

/* ── Layout: sticky rail + main column ── */
.rq-layout { display: flex; gap: 20px; align-items: flex-start; }
.rq-main { flex: 1 1 auto; min-width: 0; }

.rq-rail {
    position: sticky; top: 12px;
    flex: 0 0 184px;
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px; border: 1px solid var(--border);
    border-radius: 12px; background: var(--bg-card);
}
.rq-rail a {
    display: block; padding: 7px 11px; border-radius: 8px;
    font-size: 13px; color: var(--text-secondary); text-decoration: none;
    border-left: 2px solid transparent;
}
.rq-rail a:hover { background: var(--bg-input); color: var(--text); }
.rq-rail a.is-active { color: var(--text); background: rgba(10,132,255,0.08); border-left-color: var(--apple-blue); font-weight: 600; }

/* ── Sections (lean on global .card for the surface) ── */
.rq-section { scroll-margin-top: 70px; margin-bottom: 16px; }
.rq-section-title { margin: 0 0 12px; font-size: 16px; color: var(--text); }
.rq-subhead { margin: 14px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }

/* ── Fields ── */
.rq-field { display: flex; flex-direction: column; }
.rq-req { color: var(--apple-blue); }
.rq-help { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
.rq-help-inline { font-weight: 400; font-size: 11px; color: var(--text-secondary); }
.rq-span-2 { grid-column: 1/-1; }

/* ── Repeatable entity cards (operators / RVs / losses / violations) ── */
.rq-entity-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: var(--bg-input); }
.rq-entity-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rq-entity-head strong { font-size: 13px; color: var(--text); }
.rq-remove {
    background: transparent; border: none; color: #ff453a; cursor: pointer;
    font-size: 20px; line-height: 1; padding: 0 4px;
}
.rq-remove:hover { filter: brightness(1.2); }

/* ── RV class chip selector (ported from the Intake v2 RV card) ── */
.rq-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rq-chip {
    padding: 6px 12px; font-size: 12.5px; font-weight: 600;
    border-radius: 999px; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-secondary); cursor: pointer;
}
.rq-chip:hover { color: var(--text); border-color: var(--apple-blue); }
.rq-chip.is-selected { background: var(--apple-blue); border-color: var(--apple-blue); color: #fff; }

/* ── Inline coaching tip inside an RV card ── */
.rq-tip {
    margin: 10px 0; padding: 8px 10px; border-radius: 8px; font-size: 12px;
    color: var(--text); background: rgba(10,132,255,0.06);
    border-left: 3px solid var(--apple-blue);
}

/* ── Checkbox grid ── */
.rq-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; }

/* ── Add button ── */
.rq-add-btn {
    margin-top: 6px; padding: 8px 14px; font-size: 13px; font-weight: 600;
    border-radius: 9px; border: 1px dashed var(--border); background: transparent;
    color: var(--apple-blue); cursor: pointer;
}
.rq-add-btn:hover { background: rgba(10,132,255,0.06); border-style: solid; }

/* ── Coaching flags ── */
.rq-flags { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.rq-flag { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.4; color: var(--text); }
.rq-flag-ico { flex: 0 0 auto; }
.rq-flag-warn { background: rgba(255,159,10,0.10); border-left: 3px solid #ff9f0a; }
.rq-flag-tip  { background: rgba(10,132,255,0.08); border-left: 3px solid var(--apple-blue); }
.rq-flag-need { background: var(--bg-input); border-left: 3px solid var(--text-secondary); }

/* ── Buttons / actions ── */
.rq-btn { padding: 10px 16px; font-size: 14px; font-weight: 600; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); cursor: pointer; }
.rq-btn:hover { filter: brightness(1.08); }
.rq-btn:disabled { opacity: 0.6; cursor: default; }
.rq-btn-danger { color: #ff453a; }
.rq-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 4px 28px; }
.rq-actions-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.rq-save-state { font-size: 12px; color: var(--text-secondary); }
.rq-save-state.rq-save-err { color: #ff453a; }

/* ── Responsive: rail collapses to a horizontal strip ── */
@media (max-width: 760px) {
    .rq-layout { flex-direction: column; }
    .rq-rail { position: static; flex: none; flex-direction: row; flex-wrap: wrap; width: 100%; box-sizing: border-box; }
    .rq-rail a { border-left: none; border-bottom: 2px solid transparent; padding: 6px 9px; }
    .rq-rail a.is-active { border-left: none; border-bottom-color: var(--apple-blue); }
}