@charset "UTF-8";

.cal { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: clamp(var(--space-4), 3vw, var(--space-6)); inline-size: 100%; max-inline-size: 380px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); }
.cal__month { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); color: var(--color-text); }
.cal__nav { display: flex; gap: var(--space-2); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dow { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-tertiary); text-align: center; padding-block: var(--space-2); }
.cal__day { aspect-ratio: 1; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--color-text); font-size: var(--text-sm); font-variant-numeric: tabular-nums; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.cal__day:hover { border-color: var(--accent); }
.cal__pad { visibility: hidden; }
.cal__day--double { color: var(--accent-light); font-weight: var(--weight-medium); }
.cal__day--blocked { color: var(--color-error); opacity: 0.55; text-decoration: line-through; }
.cal__legend i.cal__legend-blocked { background: var(--color-error); }
.cal__day--double::after { content: ''; position: absolute; inset-block-end: 5px; inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--accent); }
.cal__day[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.cal__day[aria-pressed="true"]::after { background: #fff; }
.cal__day:disabled { opacity: 0.25; cursor: default; }
.cal__day:disabled:hover { border-color: transparent; }
.cal__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border-subtle); font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); color: var(--color-text-tertiary); }
.cal__legend i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--accent); display: inline-block; margin-inline-end: 5px; }
.cal__selected { margin-block-start: var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-secondary); }
.cal__selected b { color: var(--accent-light); }

.pq { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(var(--space-6), 4vw, var(--space-12)); align-items: start; }
@media (max-width: 920px){ .pq { grid-template-columns: 1fr; } }
.pq__col { display: grid; gap: var(--space-6); }
.pq__rate { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.pq__rate[data-rate="2"] { border-color: var(--accent); color: var(--accent-light); background: var(--accent-faint); }