/* =====================================================================
 *  "My day": the article's estate cards get an "Add to my day" button, a
 *  compact panel builds beside the text, and the panel opens an overlay with
 *  a map view (the shared atlas plate in trip mode) and an expanded list.
 *  Loaded by app/Views/article/detail.php only when the article has a
 *  travel_planner block.
 *  Spec: docs/specs/2026-09-08-travel-planner-block.md (revision 2)
 * ===================================================================== */

/* ── The button on every estate card ── */
.iw-day-slot { position: relative; }
.iw-day-add {
    position: absolute; right: 12px; top: 12px; z-index: 3;
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-label), serif;
    font-weight: 700; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-primary, #561371);
    background: rgba(255, 255, 255, 0.94);
    border: 0; border-radius: 999px;
    padding: 7px 11px 7px 10px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(4px);
    transition: transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.iw-day-add > span { font-size: 14px; line-height: 1; font-weight: 700; }
.iw-day-add:hover { transform: translateY(-1px); background: #fff; }
.iw-day-add:focus-visible { outline: 2px solid var(--color-primary, #561371); outline-offset: 2px; }
.iw-day-add[aria-pressed="true"] { background: var(--color-primary, #561371); color: #fff; }
.iw-day-add[aria-pressed="true"]:hover { background: #6b2488; }
.iw-day-add.is-coach { animation: iw-day-coach 1.7s ease-in-out infinite; }
@keyframes iw-day-coach {
    0%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(86, 19, 113, 0.55); }
    55%      { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18), 0 0 0 12px rgba(86, 19, 113, 0); }
}
.iw-day-slot.is-in-day .wcc-card {
    box-shadow: 0 0 0 2px var(--color-primary, #561371), 0 8px 22px -16px rgba(86, 19, 113, 0.28);
}

/* ── The flying thumbnail when an estate is added ── */
.iw-day-ghost {
    position: fixed; z-index: 1200;
    width: 44px; height: 44px; border-radius: 999px;
    background: var(--color-primary, #561371) center / cover no-repeat;
    box-shadow: 0 8px 24px rgba(86, 19, 113, 0.35);
    pointer-events: none;
    transition: transform 460ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 460ms ease;
    will-change: transform, opacity;
}

/* ── Desktop host: the panel and the contents list share one sticky column ── */
.iw-day-host {
    position: sticky; top: 7rem;
    max-height: calc(100vh - 8rem);
    display: flex; flex-direction: column;
    min-height: 0;
}
.iw-day-host > .iw-day { flex: none; margin-bottom: 16px; }
/* The contents list takes the height that is left. It scrolls only when
   something is really hidden (is-scroll, set by the script, which ignores a
   pixel of rounding), with a thin scrollbar and a fade at its foot while
   there is more below (is-more). A short screen used to cut it off with no
   sign that it went on (2026-09-09). */
.iw-day-host > nav {
    flex: 1 1 auto; min-height: 0;
    overflow-y: hidden; overscroll-behavior: contain;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(86, 19, 113, 0.28) transparent;
}
.iw-day-host > nav.is-scroll { overflow-y: auto; }
.iw-day-host > nav.is-more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), rgba(0, 0, 0, 0) 100%);
}

/* ── The compact panel ── */
.iw-day {
    background: var(--color-surface-container-lowest, #fff);
    border: 1px solid var(--color-outline-variant, #e6e0d9);
    border-radius: 20px;
    padding: 18px 18px 16px;
    margin-bottom: 28px;
    box-shadow: 0 8px 22px -16px rgba(86, 19, 113, 0.28);
    color: var(--color-on-surface, #1f1a17);
}
.iw-day-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.iw-day-title {
    margin: 0;
    font-family: var(--font-label), serif;
    font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
}
.iw-day-base {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; color: var(--color-on-surface-variant, #5d5550);
}
.iw-day-base select {
    font: inherit; font-weight: 600;
    color: var(--color-primary, #561371);
    background: transparent; border: 0; border-bottom: 1px dashed currentColor;
    padding: 0 2px; cursor: pointer;
}
.iw-day-empty p {
    margin: 0;
    font-size: 13.5px; line-height: 1.55;
    color: var(--color-on-surface-variant, #5d5550);
}
.iw-day-empty b { color: var(--color-on-surface, #1f1a17); white-space: nowrap; }

/* The summary row is one big tap target that opens the overlay */
.iw-day-summary {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
    width: 100%; margin: 2px 0 8px; padding: 10px 10px 10px 8px;
    border: 1px solid var(--color-outline-variant, #e6e0d9); border-radius: 14px;
    background: var(--color-surface-container-low, #f6f3ee);
    font: inherit; color: inherit; text-align: left; cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}
.iw-day-summary:hover { background: #f1ebf3; border-color: var(--color-primary, #561371); }
.iw-day-summary:focus-visible { outline: 2px solid var(--color-primary, #561371); outline-offset: 2px; }
.iw-day-summary[hidden] { display: none; }
.iw-day-stack { display: flex; align-items: center; }
.iw-day-stack img, .iw-day-stack span {
    display: block; width: 30px; height: 30px; border-radius: 999px; object-fit: cover;
    border: 2px solid var(--color-surface-container-lowest, #fff);
    background: var(--color-primary, #561371); margin-left: -9px;
    font-size: 10px; font-weight: 700; color: #fff; text-align: center; line-height: 26px;
}
.iw-day-stack img:first-child, .iw-day-stack span:first-child { margin-left: 0; }
.iw-day-summary-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iw-day-summary-text b { font-family: var(--font-display), serif; font-size: 15px; line-height: 1.2; }
.iw-day-summary-text span { font-size: 11.5px; color: var(--color-on-surface-variant, #5d5550); }
.iw-day-summary-arrow { font-size: 26px; line-height: 1; color: var(--color-primary, #561371); }
.iw-day-verdict-line { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; }
.iw-day-verdict-line.is-over { color: #8a3d05; }

/* Buttons */
.iw-day-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.iw-day-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2; text-decoration: none;
    border-radius: 999px; padding: 8px 14px; cursor: pointer;
    border: 1.5px solid var(--color-primary, #561371);
    color: var(--color-primary, #561371); background: transparent;
    transition: background 150ms ease, color 150ms ease;
}
.iw-day-btn:hover { background: #f5f0f8; }
.iw-day-btn:disabled { opacity: 0.6; cursor: default; }
.iw-day-btn--primary { background: var(--color-primary, #561371); color: #fff; }
.iw-day-btn--primary:hover { background: #6b2488; }
.iw-day-btn--quiet { border-color: transparent; color: var(--color-on-surface-variant, #5d5550); padding: 8px 6px; }
.iw-day-btn[hidden] { display: none; }
.iw-day-status { margin: 8px 0 0; min-height: 1em; font-size: 12px; line-height: 1.4; color: var(--color-on-surface-variant, #5d5550); word-break: break-word; }

/* ── Mobile: a bottom bar that opens the overlay ── */
.iw-day-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--color-surface-container-lowest, #fff);
    border-top: 1px solid var(--color-outline-variant, #e6e0d9);
    box-shadow: 0 -6px 24px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(100%);
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.iw-day-bar.is-shown { transform: none; }
.iw-day-bar-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer;
}
.iw-day-bar-text { font-size: 13px; color: var(--color-on-surface, #1f1a17); }
.iw-day-bar-text b { color: var(--color-primary, #561371); }
.iw-day-bar-chev { color: var(--color-primary, #561371); font-size: 22px; line-height: 1; }
body.iw-day-has-bar { padding-bottom: 64px; }
@media (min-width: 1024px) {
    .iw-day-bar { display: none; }
    body.iw-day-has-bar { padding-bottom: 0; }
}

/* ── The overlay ── */
body.iw-day-lock { overflow: hidden; }
.iw-day-scrim {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(28, 28, 25, 0.45);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.iw-day-scrim[hidden] { display: none; }
.iw-day-scrim.is-open { opacity: 1; }
.iw-day-dialog {
    position: relative;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(1120px, 100%);
    height: min(88vh, 920px);
    background: var(--color-surface-container-lowest, #fff);
    color: var(--color-on-surface, #1f1a17);
    border-radius: 20px;
    box-shadow: var(--shadow-ambient-lg, 0 32px 60px rgba(86, 19, 113, 0.18));
    transform: translateY(18px) scale(0.97);
    opacity: 0;
    transition: transform 0.30s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease;
    overflow: hidden;
}
.iw-day-scrim.is-open .iw-day-dialog { transform: none; opacity: 1; }
.iw-day-dialog:focus { outline: none; }

.iw-day-dlg-head {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 16px 60px 14px 22px;
    border-bottom: 1px solid var(--color-outline-variant, #e6e0d9);
}
.iw-day-dlg-titles { min-width: 0; margin-right: auto; }
.iw-day-dlg-title {
    margin: 0;
    font-family: var(--font-display), serif; font-size: 22px; line-height: 1.15;
}
.iw-day-dlg-sub {
    margin: 2px 0 0; font-size: 12.5px; color: var(--color-on-surface-variant, #5d5550);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* one line, so the header never changes height */
}
.iw-day-base--dlg { font-size: 13px; }
.iw-day-tabs {
    display: inline-flex; padding: 3px; border-radius: 999px;
    background: var(--color-surface-container-low, #f6f3ee);
}
.iw-day-tab {
    font: inherit; font-size: 12.5px; font-weight: 600;
    padding: 7px 16px; border: 0; border-radius: 999px; background: transparent;
    color: var(--color-on-surface-variant, #5d5550); cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.iw-day-tab.is-active { background: var(--color-primary, #561371); color: #fff; }
.iw-day-tab[hidden] { display: none; }
.iw-day-x {
    position: absolute; top: 12px; right: 12px;
    width: 36px; height: 36px; border: 0; border-radius: 999px;
    background: transparent; color: var(--color-on-surface-variant, #5d5550);
    cursor: pointer; display: grid; place-items: center;
    transition: background 0.16s ease, color 0.16s ease;
}
.iw-day-x:hover { background: var(--color-surface-container-low, #f6f3ee); color: var(--color-primary, #561371); }

.iw-day-body { min-height: 0; }
.iw-day-pane { height: 100%; min-height: 0; }
.iw-day-pane[hidden] { display: none; }

/* Map view: the plate and a synced itinerary beside it */
.iw-day-pane--map {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px; padding: 16px 22px;
    overflow: hidden;
}
.iw-day-map {
    position: relative; width: 100%; align-self: start;
    border-radius: 16px; overflow: hidden;
    background: #dde4e3;
    box-shadow: inset 0 0 0 1px rgba(75, 52, 30, 0.18);
    max-height: 100%;
}
.iw-day-map:not(:has(.wr-map-svg)) { min-height: 340px; }
.iw-day-map-loading {
    position: absolute; inset: 0; display: grid; place-items: center; margin: 0;
    padding: 30px 16px; text-align: center; font-size: 13px; color: var(--color-on-surface-variant, #5d5550);
}
.iw-day-map-loading[hidden] { display: none; }
.trip-map-zoom {
    position: absolute; bottom: 12px; right: 12px; z-index: 4;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-label), serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
    color: #5e243c; background: rgba(251, 243, 223, 0.95);
    border: 1px solid rgba(94, 36, 60, 0.35); border-radius: 999px; padding: 7px 12px; cursor: pointer;
    box-shadow: 0 2px 8px rgba(75, 50, 28, 0.18);
}
.trip-map-zoom[hidden] { display: none; }
.trip-map-zoom:hover { background: #fcf6e6; }
/* The stops/region toggle owns the bottom-right corner; the atlas gesture
   hint sits above it, as on the route plate. */
.iw-day-map.iw-atlas .wr-map-gesture-hint { bottom: 54px; }
.iw-day-side { min-height: 0; overflow-y: auto; padding-right: 4px; }
.iw-day-side-hint { margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: var(--color-on-surface-variant, #5d5550); }

/* Compact stop rows (panel-style), used beside the map */
.iw-day-stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.iw-day-stop {
    position: relative;
    display: grid; grid-template-columns: 42px 1fr 26px; gap: 10px; align-items: center;
    padding: 4px; border-radius: 12px;
    transition: background 160ms ease;
}
.iw-day-stop.is-hot, .iw-day-stop:hover { background: var(--color-surface-container-low, #f6f3ee); }
.iw-day-num {
    position: absolute; left: -3px; top: -3px; z-index: 1;
    width: 19px; height: 19px; border-radius: 999px;
    background: var(--color-primary, #561371); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 19px; text-align: center;
    box-shadow: 0 0 0 2px var(--color-surface-container-lowest, #fff);
}
.iw-day-thumb {
    display: block; width: 42px; height: 42px; border-radius: 12px; object-fit: cover;
    background: var(--color-surface-container-low, #f3eee9);
}
.iw-day-stop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iw-day-stop-name { font-family: var(--font-display), serif; font-size: 14.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-day-stop-meta { font-size: 11.5px; line-height: 1.35; color: var(--color-on-surface-variant, #5d5550); }
.iw-day-remove {
    width: 26px; height: 26px; border: 0; border-radius: 999px;
    background: transparent; color: var(--color-on-surface-variant, #5d5550);
    font-size: 18px; line-height: 1; cursor: pointer;
}
.iw-day-remove:hover { background: var(--color-surface-container-low, #f3eee9); color: var(--color-primary, #561371); }
.iw-day-back { padding-left: 52px; font-size: 11.5px; color: var(--color-on-surface-variant, #5d5550); }
.iw-day-stops-empty { margin: 0; font-size: 13px; color: var(--color-on-surface-variant, #5d5550); }

/* List view: expanded rows with the estate's facts */
.iw-day-pane--list { overflow-y: auto; padding: 18px 22px; }
.iw-day-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.iw-day-row {
    position: relative;
    display: grid; grid-template-columns: 132px minmax(0, 1fr) 30px; gap: 16px; align-items: start;
    padding: 12px; border-radius: 16px;
    border: 1px solid var(--color-outline-variant, #e6e0d9);
    background: var(--color-surface-container-lowest, #fff);
    transition: background 160ms ease, box-shadow 160ms ease;
}
.iw-day-row.is-hot, .iw-day-row:hover { background: var(--color-surface-container-low, #f6f3ee); }
.iw-day-row.is-flash { box-shadow: 0 0 0 2px var(--color-primary, #561371); }
.iw-day-row .iw-day-num { left: 4px; top: 4px; width: 22px; height: 22px; line-height: 22px; font-size: 11.5px; }
.iw-day-row-photo { display: block; width: 132px; height: 96px; border-radius: 12px; overflow: hidden; background: var(--color-surface-container-low, #f3eee9); }
.iw-day-row-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iw-day-row-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.iw-day-row-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.iw-day-row-name { font-family: var(--font-display), serif; font-size: 18px; line-height: 1.15; color: var(--color-primary, #561371); text-decoration: none; }
.iw-day-row-name:hover { text-decoration: underline; }
.iw-day-row-est { font-family: var(--font-label), serif; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-on-surface-variant, #5d5550); }
.iw-day-row-place { margin: 0; font-size: 12.5px; color: var(--color-on-surface-variant, #5d5550); }
.iw-day-row-blurb {
    margin: 0; font-size: 13px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.iw-day-row-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; color: var(--color-on-surface-variant, #5d5550); }
.iw-day-row-facts b { color: var(--color-on-surface, #1f1a17); font-variant-numeric: tabular-nums; }
.iw-day-row-facts .wcc-visit { margin: 0; }
.iw-day-row-leg { margin: 2px 0 0; font-size: 12.5px; color: var(--color-on-surface, #1f1a17); }
.iw-day-row-leg a { color: var(--color-primary, #561371); font-weight: 600; text-decoration: none; }
.iw-day-row-leg a:hover { text-decoration: underline; }
.iw-day-row .iw-day-remove { align-self: start; }
.iw-day-rows-back {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; font-size: 12.5px; color: var(--color-on-surface-variant, #5d5550);
}
.iw-day-rows-back a { color: var(--color-primary, #561371); font-weight: 600; text-decoration: none; }
.iw-day-rows-back a:hover { text-decoration: underline; }

/* Footer: meter, totals, actions */
.iw-day-dlg-foot {
    padding: 12px 22px 16px;
    border-top: 1px solid var(--color-outline-variant, #e6e0d9);
    background: var(--color-surface-container-lowest, #fff);
}
.iw-day-meter { margin: 0; }
.iw-day-meter[hidden] { display: none; }
.iw-day-meter-bar { height: 6px; border-radius: 999px; background: var(--color-surface-container-low, #f3eee9); overflow: hidden; }
.iw-day-meter-fill {
    height: 100%; width: 0; border-radius: 999px;
    background: var(--color-primary, #561371);
    transition: width 480ms cubic-bezier(0.2, 0.8, 0.2, 1), background 200ms ease;
}
.iw-day-meter.is-long .iw-day-meter-fill { background: #8a5a12; }
.iw-day-meter.is-over .iw-day-meter-fill { background: #b8560f; }
.iw-day-verdict { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; }
.iw-day-meter.is-over .iw-day-verdict { color: #8a3d05; }
.iw-day-totals { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--color-on-surface-variant, #5d5550); }
.iw-day-totals b { color: var(--color-on-surface, #1f1a17); font-variant-numeric: tabular-nums; }
.iw-day-totals[hidden], .iw-day-actions[hidden] { display: none; }
/* An empty day keeps the footer's size: placeholders in the quiet colour,
   buttons present but disabled, so a tap on the map moves nothing. */
.iw-day-meter.is-empty .iw-day-verdict, .iw-day-totals.is-empty { color: var(--color-on-surface-variant, #5d5550); font-weight: 400; }
.iw-day-totals.is-empty b { color: inherit; }
.iw-day-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.iw-day-dlg-foot .iw-day-actions { margin-top: 10px; }

/* Phones: the dialog is the screen; the map stacks above its list */
@media (max-width: 767px) {
    .iw-day-scrim { padding: 0; align-items: stretch; }
    .iw-day-dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; }
    .iw-day-dlg-head { padding: 14px 56px 12px 16px; gap: 10px; }
    .iw-day-dlg-title { font-size: 19px; }
    .iw-day-pane--map { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); padding: 12px 16px; overflow-y: auto; }
    .iw-day-map { max-height: none; }
    .iw-day-pane--list { padding: 12px 16px; }
    .iw-day-row { grid-template-columns: 96px minmax(0, 1fr) 28px; gap: 12px; padding: 10px; }
    .iw-day-row-photo { width: 96px; height: 72px; }
    .iw-day-row-name { font-size: 16px; }
    .iw-day-dlg-foot { padding: 10px 16px 14px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .iw-day-add, .iw-day-stop, .iw-day-row, .iw-day-meter-fill, .iw-day-bar, .iw-day-ghost, .iw-day-btn,
    .iw-day-scrim, .iw-day-dialog, .iw-day-summary, .iw-day-tab {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
    }
}