/* Paying and canceling, one look on two pages (macros/paying.html): the trip page says it in general
   (partials/paying_and_canceling.html) and the review step works it out for the booking on screen
   (booking/partials/_paying_review.html). Every color is a token from palette.css. */
/* Flat sections in one card, ruled apart like the review card around it: a box inside a box read as a
   heading one rank below "Check it over". The trip page has no card around it, so it draws its own. */
.pc2-card { padding:16px 20px; border-bottom:1px solid var(--border-color); }
.pc2-boxed { background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; overflow:hidden; }
.pc2-boxed .pc2-card:last-child { border-bottom:none; }
.pc2-t { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:.68rem; font-weight:800;
    letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); }
.pc2-t svg { width:14px; height:14px; color:var(--accent-color); }
.pc2-big { font-size:.95rem; font-weight:700; color:var(--text-primary); line-height:1.4; }
.pc2-small { font-size:.78rem; color:var(--text-muted); line-height:1.5; margin-top:4px; }
/* Whether it runs: one small strip, green when it has, amber while it waits. */
.pc2-status { margin:16px 20px 0; display:flex; gap:9px; align-items:flex-start; padding:9px 12px; border-radius:10px; font-size:.78rem; line-height:1.45; }
.pc2-status svg { width:15px; height:15px; flex-shrink:0; margin-top:1px; }
.pc2-status.go { background:var(--success-alpha); color:var(--success-color); }
.pc2-status.wait { background:color-mix(in srgb, var(--warning-color) 13%, transparent); color:var(--text-primary); }
.pc2-status.wait svg, .pc2-status.wait b { color:color-mix(in srgb, var(--warning-color) 75%, var(--text-primary)); }
/* A question, asked rather than pushed: it opens the window of other dates. */
.pc2-ask { background:none; border:0; padding:0; margin-top:8px; color:var(--accent-color); font:inherit;
    font-size:.78rem; font-weight:600; cursor:pointer; }
.pc2-status .pc2-ask { margin:0 0 0 2px; }
.pc2-ask:hover { text-decoration:underline; }
/* What comes back, day by day: one band each part of the scale, as wide as the days it covers. */
/* Color only: the key under it says each band in words, so the bar does not say them again. */
.pc2-bar { display:flex; gap:2px; height:12px; border-radius:6px; overflow:hidden; margin:12px 0 0; }
.pc2-bar div { min-width:6px; }
.z-window { background:var(--success-color); color:var(--white); }
.z-fee { background:color-mix(in srgb, var(--success-color) 55%, var(--bg-primary)); color:var(--white); }
.z-half { background:var(--brand-highlight); color:var(--brand-highlight-text); }
.z-nothing { background:var(--bg-tertiary); color:var(--text-muted); }
.pc2-ticks { position:relative; height:20px; font-family:var(--font-mono); font-size:.62rem; color:var(--text-muted); }
.pc2-ticks span { position:absolute; top:4px; transform:translateX(-50%); white-space:nowrap; }
.pc2-ticks span.first { transform:none; }
.pc2-ticks span.last { transform:translateX(-100%); }
.pc2-keys { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.pc2-key { display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:10px; align-items:baseline;
    font-size:.8rem; color:var(--text-secondary); }
.pc2-key i { width:10px; height:10px; border-radius:3px; display:block; transform:translateY(1px); }
.pc2-key b { font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pc2-key em { font-style:normal; font-weight:600; color:var(--text-primary); }
.pc2-key small { display:block; font-size:.72rem; color:var(--text-muted); }
/* The scale for every booking, drawn in a dialog: the same bar and key, given room. */
.pc2-modal { padding:4px 20px 22px; }
.pc2-modal .pc2-keys { gap:10px; margin-top:12px; }
.pc2-ok { display:flex; gap:10px; align-items:flex-start; font-size:.8rem; color:var(--text-secondary); line-height:1.5; }
.pc2-ok svg { width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--accent-color); }
.pc2-ok a { color:var(--accent-color); }