/* css/wc-notes-pricing.css  [notes1] 7 Oct 2026: "From your notes" under the notes box on book.php (js/wc-notes-pricing.js).
   Colours, radii and type come from the booking page tokens (css/booking-design.css: --sage-*, --gold-*, --cream-*,
   --radius-*); no new values. The signature detail is the gold rule on the left of each line: the customer's own words
   set apart like a quotation, with what they changed on the right. */

.wc-np {
    margin-top: 0.75rem;
    padding: 1rem 1.1rem 0.95rem;
    border-radius: 18px;
    background: linear-gradient(180deg, var(--cream-50), var(--cream-100));
    box-shadow: inset 0 0 0 1px var(--cream-300);
    color: var(--sage-900);
}
.wc-np[hidden] { display: none; }
.wc-np__eyebrow {
    margin: 0 0 0.6rem;
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold-600);
}
.wc-np__lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.wc-np__line { padding: 0.15rem 0 0.15rem 0.85rem; box-shadow: inset 2px 0 0 var(--gold-400); }
.wc-np__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; }
.wc-np__label { font-size: 0.9rem; font-weight: 650; color: var(--sage-900); }
.wc-np__amt { font-size: 0.85rem; font-weight: 650; color: var(--sage-700); font-variant-numeric: tabular-nums; }
.wc-np__detail { margin: 0.15rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--sage-700); }
.wc-np__fine { margin: 0.6rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--sage-600); }
.wc-np__call, .wc-np__hints, .wc-np__hist { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--cream-300); }
.wc-np__callhead { margin: 0 0 0.4rem; font-size: 0.8125rem; font-weight: 650; color: var(--sage-800); }
.wc-np__calllist { margin: 0; padding-left: 1.1rem; font-size: 0.8125rem; line-height: 1.55; color: var(--sage-700); }
.wc-np__add, .wc-np__ghost {
    display: inline-flex; align-items: center; min-height: 2.5rem; margin: 0.25rem 0.4rem 0 0; padding: 0.45rem 0.95rem;
    border-radius: var(--radius-pill); font-family: inherit; font-size: 0.8125rem; font-weight: 650; line-height: 1.1; cursor: pointer;
}
.wc-np__add { border: 0; background: var(--sage-700); color: var(--cream-50); }
.wc-np__add[disabled] { background: var(--sage-200); color: var(--sage-800); cursor: default; }
.wc-np__ghost { border: 1px solid var(--sage-300); background: transparent; color: var(--sage-800); }
.wc-np__add:focus-visible, .wc-np__ghost:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
    .wc-np { animation: wc-np-in 0.28s ease-out both; }
    @keyframes wc-np-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}
.wc-np__sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* [notes1r] the short spoken summary */
.wc-np__eyebrow:focus { outline: none; }
.wc-np__eyebrow:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }