/* Home phasing tool: the one/two-floors toggle, crews legend, the visitor's ADR/occupancy inputs, the late-floor scenario,
   six stats and a cursor that follows a variable programme length.
   Loaded after home.css, which holds the base phasing styles. */
.phasing { --pc-sl: #e9c98f; --pc-slip: var(--flag, #b3362f); }

.phase-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.phase-mode { display: inline-flex; flex-wrap: wrap; justify-self: start; gap: 2px; padding: 3px; border: 1px solid var(--hair-strong); border-radius: 2px; background: rgba(255, 255, 255, .5); }
.phase-mode button { min-height: 44px; padding: 0 16px; border-radius: 2px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); transition: background .15s, color .15s; }
.phase-mode button:hover { background: rgba(17, 21, 28, .06); color: var(--ink); }
.phase-mode button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.phase-mode button:focus-visible, .phase-slip-btn:focus-visible { outline: 2px solid var(--copper-ink, #9c5f2a); outline-offset: 2px; }
.phase-crews { font-size: var(--fs-sm); font-weight: 600; color: var(--slate); }
.phase-crews b { color: var(--ink); font-size: var(--fs-lg); margin-inline-start: 4px; }

/* the visitor's own figures: ADR, occupancy, high-demand nights, the late-floor scenario */
.phase-inputs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 28px; margin: 0; padding: 18px 20px 16px; border: 1px solid var(--hair-strong); background: rgba(255, 255, 255, .45); min-width: 0; }
.phase-inputs legend { padding: 0 8px; margin-inline-start: -8px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.phase-eg { display: inline-block; margin-inline-start: 8px; padding: 1px 8px; border: 1px solid var(--copper-ink); border-radius: 2px; color: var(--copper-ink); font-size: var(--fs-2xs, .75rem); font-weight: 600; vertical-align: 1px; }
.phase-in { display: grid; gap: 6px; align-content: start; min-width: 0; }
.phase-in-l { font-size: var(--fs-cap); font-weight: 600; color: var(--slate); }
.phase-in-f { display: flex; align-items: center; gap: 8px; }
.phase-in input { width: 100%; max-width: 9rem; min-height: 44px; padding: 0 12px; border: 1px solid var(--hair-strong); border-radius: 2px; background: #fff; color: var(--ink); font: 500 var(--fs-lg)/1 var(--f-body); font-variant-numeric: tabular-nums lining-nums; direction: ltr; text-align: start; }
html[dir="rtl"] .phase-in input { text-align: right; }
.phase-in input:focus-visible { outline: 2px solid var(--copper-ink, #9c5f2a); outline-offset: 1px; }
.phase-in input[aria-invalid="true"] { border-color: var(--flag, #b3362f); }
.phase-unit { font-size: var(--fs-sm); color: var(--slate); white-space: nowrap; }
.phase-slip-btn { min-height: 44px; padding: 0 14px; border: 1px solid var(--hair-strong); border-radius: 2px; background: #fff; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-align: start; justify-self: start; }
.phase-slip-btn::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-inline-end: 8px; border: 1.5px solid var(--pc-slip); vertical-align: -1px; }
.phase-slip-btn[aria-pressed="true"] { border-color: var(--pc-slip); color: var(--pc-slip); }
.phase-slip-btn[aria-pressed="true"]::before { background: var(--pc-slip); }
.phase-inputs .note { grid-column: 1 / -1; }

/* chart additions: sold-last floors and the late-floor weeks */
.phase-chart { --weeks: 24; }
.pc-cursor { inset-inline-start: calc(var(--pc-label) + 12px + (100% - var(--pc-label) - var(--pc-status) - 24px) * (var(--w) - .5) / var(--weeks) - 1px); }
.pc-row[data-sl] .pc-lv { background: var(--pc-sl); color: var(--ink); font-weight: 600; padding-inline-end: 4px; }
.pc-row[data-sl] .pc-st { color: #7a5312; }
.pc-cells i[data-x="slip"] { box-shadow: inset 0 0 0 2px var(--pc-slip); }
.phase-key li[hidden] { display: none; }
.phase-key [data-k="selllast"] i { background: var(--pc-sl); }
.phase-key [data-k="slip"] i { background: repeating-linear-gradient(-45deg, #9c5f2a 0 3px, #8a5222 3px 6px); box-shadow: inset 0 0 0 2px var(--pc-slip); }

/* eight stats: 3 + 3 + 2 */
.phase-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.phase-stats div:nth-child(3n+1) { padding-inline-start: 0; border-inline-start: 0; }
.phase-stats div:nth-child(n+4) { border-top: 1px solid var(--hair-strong); margin-top: 12px; padding-top: 12px; }
.phase-rev dd b { color: var(--copper-ink); }
.phase-stats .phase-sar { margin-top: 2px; font-size: var(--fs-sm); color: var(--ink); }
.phase-stats .phase-sar b { font-size: var(--fs-lg); font-weight: 600; }
.phase-stats dt [hidden] { display: none; }
.phase-worst dd b { font-size: var(--fs-lg) !important; color: var(--slate); }
.phase-worst .of { display: block; font-size: var(--fs-2xs, .75rem); }
.phase-inputs #phaseHdNote { margin-top: -6px; }

/* the footnotes: the panel's key sentence first, then how the figures are worked out */
.phase-notes { display: grid; gap: 12px; max-width: 72ch; }
.phase-notes .note { max-width: none; }
.phase-key-note { padding-inline-start: 14px; border-inline-start: 2px solid var(--copper-ink); font-weight: 600; color: var(--ink); }

.phase-compare { max-width: 72ch; padding-inline-start: 14px; border-inline-start: 2px solid var(--copper-ink); font-size: var(--fs-base); color: var(--ink); }
.phase-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; font-size: var(--fs-small); color: var(--ink-2); }
.phase-modes p { max-width: 62ch; }

@media (max-width: 1080px) and (min-width: 721px) {
  .phase-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phase-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phase-stats div:nth-child(3n+1) { padding-inline-start: 16px; border-inline-start: 1px solid var(--hair-strong); }
  .phase-stats div:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
  .phase-stats div:nth-child(n+3) { border-top: 1px solid var(--hair-strong); margin-top: 12px; padding-top: 12px; }
}
@media (max-width: 720px) {
  .phase-top { display: grid; }
  .phase-mode { display: flex; }
  .phase-mode button { flex: 1 1 0; padding: 0 10px; }
  .phase-inputs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 14px 14px 12px; gap: 14px 16px; }
  .phase-inputs .phase-slip { grid-column: 1 / -1; }
  .phase-in input { max-width: none; }
  .phase-stats { grid-template-columns: 1fr; }
  .phase-stats div:nth-child(n+2) { margin-top: 12px; }
  .phase-stats .phase-rev, .phase-stats .phase-worst { flex-wrap: wrap; row-gap: 2px; }
  .phase-stats .phase-rev dt, .phase-stats .phase-worst dt { flex: 1 1 100%; }
  .phase-stats .phase-sar { margin-top: 0; }
  .phase-worst .of { display: inline; }
  .phase-modes { grid-template-columns: 1fr; }
  .pc-cursor { inset-inline-start: calc(var(--pc-label) + 8px + (100% - var(--pc-label) - 16px) * (var(--w) - .5) / var(--weeks) - 1px); }
}