/* One continuous calendar: horizontal on desktop, vertical on phones. */
#app { position: relative; max-width: none; min-height: 0; height: 100dvh; }
.calendar-workspace { position: relative; display: flex; flex: 1; min-height: 0; min-width: 0; gap: 20px; }
.calendar-card { position: relative; min-width: 0; }
#calendar { overflow-anchor: none; scroll-behavior: auto; user-select: none; -webkit-user-select: none; }
.day { touch-action: pinch-zoom; -webkit-touch-callout: none; }
.day.is-today { text-decoration: none; font-weight: 650; }
.day.range-anchor { outline: 3px dashed var(--green); outline-offset: -3px; }
.calendar-today { position: absolute; right: 14px; bottom: 6px; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 0 9px; font-size: 11px; background: var(--card); border: 1px solid var(--line); border-radius: 9px; }
.calendar-today svg { width: 16px; height: 16px; stroke-width: 1.7; }
.calendar-today::before { content: ''; position: absolute; inset: -5px; }
.month-nav { position: absolute; z-index: 5; top: 46%; width: 40px; min-height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); box-shadow: 0 3px 14px #10202016; display: grid; place-items: center; }
.month-nav svg { width: 19px; height: 19px; }
#months-prev { left: 8px; } #months-next { right: 8px; }
.month-nav:disabled { opacity: .25; }
#calendar.dragging { cursor: crosshair; }
#calendar.dragging .day { cursor: crosshair; }
#calendar.dragging ~ .month-nav { pointer-events: none; opacity: .15; }
:root { --range-stroke: #17785f; --comment-free: #d5efe7; --comment-busy: #f7dce4; --comment-unknown: #e3e8f0; }
body.dark { --range-stroke: #85cdb6; --comment-free: #174b43; --comment-busy: #57303b; --comment-unknown: #303b46; }
#calendar .day { --day-fill: var(--free); --cell-shade: 0%; background: var(--day-fill); background: color-mix(in srgb,var(--day-fill),#061a15 var(--cell-shade)); color: var(--free-text); }
#calendar .day.booked { --day-fill: var(--busy); color: var(--busy-text); }
#calendar .day.unknown { --day-fill: var(--unknown); color: var(--text); }
#calendar .day.weekend { --cell-shade: 6%; }
#calendar .day.has-comment.available { --day-fill: var(--comment-free); }
#calendar .day.has-comment.booked { --day-fill: var(--comment-busy); }
#calendar .day.has-comment.unknown { --day-fill: var(--comment-unknown); }
#calendar .day.has-comment::before { content: ''; position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .65; pointer-events: none; }
#calendar .day.inrange, #calendar .day.endpoint, #calendar .day.checkout { --cell-shade: 14%; border-radius: 6px; outline: none; box-shadow: inset 0 0 0 1.5px var(--range-stroke); }
#calendar .day.weekend:is(.inrange,.endpoint,.checkout) { --cell-shade: 18%; }
#calendar .day.endpoint, #calendar .day.checkout { box-shadow: inset 0 0 0 2.5px var(--range-stroke); font-weight: 600; }
#calendar .day.range-anchor { outline: 2px dashed var(--range-stroke); outline-offset: -6px; }
#calendar .day:focus-visible { outline: 2px solid #4f9df5; outline-offset: 1px; }
#calendar .day.today-flash { animation: today-flash 1s ease-out; }
@keyframes today-flash { 0%,40% { box-shadow: inset 0 0 0 3px var(--range-stroke); } }
/* Dates and their status form one sentence. Price and its unit share one line. */
#details { padding: 0 0 8px; max-width: none; animation: none; }
.selection-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.selection-copy { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
#details h2 { font-size: 16px; line-height: 22px; margin: 0; }
#details .status { font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; color: var(--green); }
body.dark #details .status[data-status="available"] { color: #87e5b5; }
#details .status[data-status="booked"], body.dark #details .status[data-status="booked"] { color: var(--busy-text); }
#details .status[data-status="unknown"], body.dark #details .status[data-status="unknown"] { color: var(--muted); }
#clear { float: none; position: relative; margin: 0 -3px 0 0; width: 28px; min-height: 28px; font-size: 22px; flex-shrink: 0; }
#clear::before { content: ''; position: absolute; inset: -6px; }
.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin: 2px 0 0; }
.price-row strong { font-size: 21px; line-height: 26px; font-weight: 600; letter-spacing: -.04em; white-space: nowrap; }
.price-unit { font-size: 11px; line-height: 18px; color: var(--muted); white-space: nowrap; }
.minimum-stay { font-size: 10px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.selection-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; }
.selection-actions .price-row { margin: 0; flex: 1; min-width: 0; }
.selection-actions .minimum-stay { flex-basis: 100%; margin: -2px 0 0; line-height: 13px; }
.set-range-start { display: flex; align-items: center; justify-content: center; gap: 5px; width: 134px; min-height: 38px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; font-size: 11px; line-height: 14px; text-align: left; flex-shrink: 0; }
.set-range-start svg { width: 15px; height: 15px; flex-shrink: 0; }
.set-range-start[aria-pressed="true"] { color: var(--free-text); background: var(--selected); border-color: var(--green); }
.selection-extra { display: flex; align-items: center; gap: 10px; margin-top: 2px; min-width: 0; }
#details .times { gap: 10px; padding: 0; flex-shrink: 0; }
#details .times > div { padding: 0; border: 0; font-size: 10px; line-height: 16px; white-space: nowrap; }
#details .times strong { display: inline; font-size: 10px; font-weight: 500; margin: 0; }
.selection-note { display: flex; align-items: center; gap: 4px; padding: 0; min-height: 20px; min-width: 0; flex: 1; color: var(--muted); font-size: 11px; text-align: left; }
.selection-note svg { width: 14px; height: 14px; flex-shrink: 0; stroke-width: 1.6; }
.selection-note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#selection-full-note { white-space: pre-wrap; overflow-wrap: anywhere; }
/* A small anchored language menu, with platform-independent flags. */
.language-control { position: relative; }
#language { display: flex; align-items: center; gap: 6px; min-height: 36px; border-radius: 8px; font-size: 12px; }
#language[aria-expanded="true"] { background: var(--unknown); }
#language > svg { width: 13px; height: 13px; }
#language-menu { position: absolute; top: calc(100% + 7px); right: 0; width: 204px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 38px #10202026; z-index: 30; }
#language-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 8px 10px; text-align: left; border-radius: 9px; }
#language-menu button:hover, #language-menu button[aria-checked="true"] { background: var(--unknown); }
.language-option { flex: 1; }
.language-option strong { font-size: 12px; font-weight: 600; display: block; }
.language-option small { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }
.language-check { width: 16px; height: 16px; color: var(--green); visibility: hidden; }
#language-menu [aria-checked="true"] .language-check { visibility: visible; }
.flag { width: 22px; height: 15px; flex-shrink: 0; box-shadow: 0 0 0 1px #0000000a; }
.flag.en { background: linear-gradient(90deg,transparent 42%,#c8102e 42% 58%,transparent 58%),linear-gradient(transparent 35%,#c8102e 35% 65%,transparent 65%),linear-gradient(90deg,transparent 34%,#fff 34% 66%,transparent 66%),linear-gradient(transparent 24%,#fff 24% 76%,transparent 76%),linear-gradient(33deg,transparent 44%,#fff 44% 56%,transparent 56%),linear-gradient(-33deg,transparent 44%,#fff 44% 56%,transparent 56%),#012169; }
.flag.en::before,.flag.en::after { content: none; }
/* Photographs open at a useful size, including the demo photo. */
.gallery-dialog { max-width: 850px; padding: 22px; }
#content .gallery-title { font-size: 20px; margin: 0 32px 16px 0; }
#content #gallery-image { display: block; width: 100%; max-height: 65dvh; object-fit: contain; border-radius: 12px; touch-action: pan-y; }
.gallery-controls { margin-top: 8px; }
#content .gallery-controls button { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; width: 40px; min-height: 40px; padding: 0; }
#photo-count { color: var(--muted); font-size: 12px; }
.album-link { display: block; text-align: center; font-size: 13px; padding: 10px; }
@media (min-width: 700px) {
  #app { padding: 18px 24px; gap: 14px; overflow: hidden; }
  #app > header { height: 36px; }
  #app .property { min-height: 88px; padding: 10px 12px; }
  #photo { width: 64px; height: 64px; }
  .property > div { min-width: 0; }
  .property h1, #rate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .calendar-card { padding: 0 0 12px; }
  #calendar { display: flex; gap: 40px; padding: 12px 52px 16px; overflow-x: auto; overflow-y: auto; touch-action: pan-x pan-y pinch-zoom; align-items: flex-start; }
  .month { flex: 0 0 clamp(300px,25vw,360px); padding: 0; }
  .month h2 { position: static; font-size: 24px; min-height: 50px; padding: 6px 0 12px; }
  .month .week { position: static; padding: 6px 0; margin-bottom: 8px; }
  .week,.grid { gap: 4px; }
  .day { height: clamp(44px,6.5dvh,56px); }
  .legend { font-size: 12px; }
  .calendar-workspace > .dock { position: absolute; right: 16px; bottom: 50px; width: 320px; max-width: none; padding: 10px; z-index: 6; box-shadow: 0 4px 18px #1020200a; }
  .has-selection .calendar-workspace > .dock { position: relative; right: auto; bottom: auto; align-self: flex-start; width: 286px; flex-shrink: 0; padding: 14px; max-height: 100%; overflow-y: auto; animation: sidebar-enter .2s ease-out; }
  .has-selection .selection-copy { gap: 5px; }
  .has-selection #details h2 { font-size: 18px; }
  .has-selection .price-row { margin-top: 12px; }
  .has-selection .price-row strong { font-size: 25px; }
  .has-selection .minimum-stay { margin-left: 0; }
  .has-selection .selection-extra { flex-wrap: wrap; margin-top: 10px; }
  .has-selection .selection-note { flex-basis: 100%; }
  .has-selection .selection-actions { flex-wrap: wrap; margin-top: 12px; }
  .has-selection .selection-actions .price-row { flex-basis: 100%; }
  .has-selection .selection-actions .set-range-start { width: 100%; min-height: 36px; }
  .dock footer { gap: 8px; }
  .dock .primary { font-size: 12px; min-height: 44px; padding: 7px 9px; gap: 7px; line-height: 16px; }
  .dock .primary svg { width: 22px; height: 22px; }
  .dock .square { width: 44px; height: 44px; }
}
@media (max-width: 699px) {
  #app { --mobile-inset: 12px; height: 100vh; height: 100dvh; padding: 8px 12px max(8px,env(safe-area-inset-bottom)); gap: 8px; overflow: hidden; }
  #app > header { height: 36px; }
  .calendar-workspace { flex-direction: column; gap: 8px; }
  #app .property { position: relative; min-height: 72px; padding: 6px 8px; gap: 10px; }
  #photo { width: 56px; height: 56px; }
  .property > div { min-width: 0; flex: 1; }
  .property h1 { font-size: 17px; line-height: 21px; margin-bottom: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .property #location { display: block; font-size: 12px; min-height: 20px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .property #location svg { vertical-align: -3px; margin-right: 4px; }
  #rate { font-size: 12px; line-height: 16px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #app.has-selection > header { display: contents; }
  #app.has-selection > header .brand { display: none; }
  #app.has-selection > header .tools { position: absolute; right: calc(var(--mobile-inset) + 58px); top: 14px; height: 44px; gap: 0; z-index: 10; }
  #app.has-selection #language { width: 76px; min-height: 44px; padding: 0 2px; gap: 4px; font-size: 12px; }
  #app.has-selection #theme { width: 32px; min-height: 44px; }
  #app.has-selection .property { min-height: 56px; }
  #app.has-selection #photo { width: 42px; height: 42px; }
  #app.has-selection .property > div { padding-right: 166px; }
  #app.has-selection .property h1 { font-size: 15px; line-height: 20px; }
  #app.has-selection #rate { display: none; }
  #app.has-selection #more { position: absolute; right: 8px; top: 50%; bottom: auto; transform: translateY(-50%); width: 44px; min-height: 44px; padding: 0; font-size: 17px; }
  #calendar { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; padding: 0; overflow-x: hidden; overflow-y: auto; touch-action: pan-y pinch-zoom; }
  .month-nav { display: none; }
  .calendar-card { padding: 0 8px 6px; }
  .month { padding-bottom: 0; }
  .month h2 { font-size: 21px; line-height: 26px; padding: 7px 98px 7px 2px; min-height: 44px; white-space: nowrap; }
  .month-heading { position: sticky; top: 0; z-index: 2; background: var(--card); display: flow-root; }
  .month h2, .month .week { position: static; }
  .calendar-today { top: 5px; right: 10px; bottom: auto; min-height: 34px; font-size: 10px; padding: 0 7px; }
  .month .week { top: 44px; font-size: 10px; line-height: 13px; padding: 4px 0; margin-bottom: 4px; }
  .week,.grid { gap: 2px; }
  .day { height: 44px; min-height: 44px; }
  .legend { padding-top: 5px; min-height: 29px; font-size: 10px; gap: 9px; }
  .legend i { width: 11px; height: 11px; }
  .dock { padding: 8px; }
  #details { padding: 0 0 6px; }
  #details .selection-copy { flex-wrap: nowrap; }
  #details h2 { font-size: 15px; line-height: 20px; white-space: nowrap; }
  #details .status { font-size: 11px; }
  .price-row strong { font-size: 20px; line-height: 24px; }
  .dock footer { gap: 7px; }
  .dock .primary { min-width: 0; min-height: 44px; padding: 6px 8px; gap: 7px; font-size: 12px; line-height: 15px; }
  .dock .primary svg { width: 21px; height: 21px; }
  .dock .square { width: 44px; height: 44px; }
  .dock .square svg { width: 22px; height: 22px; }
}
@media (min-width: 700px) and (max-height: 680px) {
  #app { padding: 12px 20px; gap: 10px; }
  #app > header { height: 30px; }
  #app .property { min-height: 64px; padding: 8px 10px; }
  #photo { width: 44px; height: 44px; }
  .property h1 { font-size: 17px; }
  .property #location { min-height: 20px; font-size: 12px; }
  #rate { margin-top: 1px; font-size: 12px; }
  .day { height: clamp(32px,calc((100dvh - 312px)/6),52px); min-height: 32px; }
}
@media (max-width: 360px) {
  #app { --mobile-inset: 8px; padding-left: 8px; padding-right: 8px; }
  #app.has-selection #photo { width: 36px; height: 36px; }
  #app.has-selection .property { gap: 8px; }
  #app.has-selection #language { width: 68px; }
  #app.has-selection .property > div { padding-right: 158px; }
  .month h2 { font-size: 18px; }
  #details h2 { font-size: 13px; }
  #details .status { font-size: 10px; }
  .selection-copy { gap: 3px; }
  .price-row strong { font-size: 18px; }
  .minimum-stay,.selection-note { font-size: 10px; }
  .set-range-start { width: 120px; font-size: 10px; padding: 5px; }
  .selection-actions { gap: 6px; }
  .legend { gap: 7px; font-size: 9px; }
  .calendar-today { font-size: 10px; padding: 0 7px; }
}
@media (max-width: 699px) and (max-height: 620px) {
  .day { height: 38px; min-height: 38px; }
  .month h2 { min-height: 40px; padding: 5px 2px; }
  .month .week { top: 40px; padding: 3px 0; margin-bottom: 3px; }
}
@keyframes sidebar-enter { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .has-selection .calendar-workspace > .dock { animation: none; } }

/* A note sits next to its date without taking space from the calendar. */
#date-comment { position: fixed; z-index: 20; width: max-content; max-width: min(300px,calc(100vw - 24px)); padding: 14px 38px 14px 16px; border: 1px solid var(--line); border-radius: 17px; background: var(--card); color: var(--text); box-shadow: 0 10px 38px rgb(8 30 26 / 16%); }
body.dark #date-comment { box-shadow: 0 10px 38px rgb(0 0 0 / 35%); }
#date-comment[hidden] { display: none; }
#date-comment::after { content: ''; position: absolute; left: var(--comment-arrow-x,50%); width: 10px; height: 10px; background: var(--card); transform: translateX(-50%) rotate(45deg); border: 1px solid var(--line); }
#date-comment[data-side="above"]::after { bottom: -6px; border-top: 0; border-left: 0; }
#date-comment[data-side="below"]::after { top: -6px; border-bottom: 0; border-right: 0; }
.comment-date { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin: 0 0 6px; }
.comment-text { font-size: 13px; line-height: 1.5; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: min(180px,30dvh); overflow-y: auto; }
#comment-close { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 28px; min-height: 28px; border-radius: 50%; color: var(--muted); }
#comment-close::before { content: ''; position: absolute; inset: -5px; }
#comment-close svg { width: 14px; height: 14px; }
#toast { width: max-content; max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 13px; font-size: 12px; line-height: 1.4; text-align: center; }