/* public/css/study/study-places-map.css
   ─────────────────────────────────────────────────────────────────────────
   Ask AI places answer: one map, a pin per place, and the place cards docked
   under it as a horizontal row (study-places-map.js).

   Scoped to #view-deeptutor like every other dt2-* rule, and deliberately
   built on the same tokens and the same shape as the product shelf
   (.dt2-shop-*) a few hundred lines up in study-deeptutor-glass.css — same
   card radius, same track scroll-snap, same --dt-ink / --dt-muted / --dt-line.
   Rust (--study-accent, #ab2d00) is the only new colour, and only for the
   pins and the selected card, so the highlight reads instantly against the
   cream map.

   Breakpoints follow this view's own convention: #view-deeptutor sizes itself
   with max-width media queries (768px / 620px), NOT the khio-laptop-scale /
   khio-desktop-wide body classes that scope the Study DASHBOARD layout. A
   body-class rule here would simply never match the chat column. */

#view-deeptutor .dt2-places {
    position: relative;
    --pl-rust: var(--study-accent, #ab2d00);
    width: 100%;
    max-width: 100%;
    margin: 16px 0 8px;
    overflow: hidden;
}

/* The shell is what the message HTML carries. It must occupy nothing at all
   until the module mounts into it, so a message that never gets a map is
   pixel-identical to today. */
#view-deeptutor .dt2-places-shell:empty { display: none; }

/* A compact strip of real property photos directly under the map, above the
   answer text — the ChatGPT reading order James asked for. Three 4:3 tiles;
   when the payload carried more, the last one wears a +N. */
#view-deeptutor .dt2-places-photos {
    display: flex;
    gap: 6px;
    margin: 8px 0 22px;
    overflow: hidden;
}
#view-deeptutor .dt2-places-photo {
    position: relative;
    flex: 1 1 0;
    max-width: calc((100% - 12px) / 3);
    min-width: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: #f1ece4;
}
#view-deeptutor .dt2-places-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .18s ease;
}
#view-deeptutor .dt2-places-photo:hover img { transform: scale(1.025); }
#view-deeptutor .dt2-places-photo-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18,18,16,.52);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .2px;
}
@media (prefers-reduced-motion: reduce) {
    #view-deeptutor .dt2-places-photo img { transition: none; }
}

#view-deeptutor .dt2-places-mapwrap {
    position: relative;
    height: 360px;
    margin-bottom: 0;
    overflow: hidden;
    border: 1px solid var(--dt-line);
    border-radius: 16px;
    background: #f1ece4;   /* cream, so the frame reads warm before tiles land */
}
#view-deeptutor .dt2-places-map { position: absolute; inset: 0; }

/* Expand chip, top-right. Sits LEFT of mapbox's zoom stack on desktop; the
   zoom stack is hidden below 768px, so it slides over into its place there. */
#view-deeptutor .dt2-places-expand {
    position: absolute;
    top: 10px;
    right: 48px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(28,28,25,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    color: #1c1c19;
    font: 600 11.5px/1 Inter, sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(28,28,25,.16);
    transition: background .14s ease, transform .14s ease;
}
#view-deeptutor .dt2-places-expand:hover { background: #fff; transform: translateY(-1px); }
#view-deeptutor .dt2-places-expand:focus-visible { outline: 2px solid var(--pl-rust); outline-offset: 2px; }
html[data-theme="dark"] #view-deeptutor .dt2-places-expand {
    border-color: rgba(255,255,255,.16);
    background: rgba(35,35,38,.94);
    color: #f4f4f5;
}
html[data-theme="dark"] #view-deeptutor .dt2-places-expand:hover { background: #2c2c30; }

/* Tiles failed after we committed the layout: drop the map, keep the cards. */
#view-deeptutor .dt2-places-nomap .dt2-places-mapwrap { display: none; }

/* The marker element itself carries NO transform of ours: mapbox-gl rewrites
   its `transform` every frame to position the pin, so the teardrop rotation
   has to live on the inner shape and the number counter-rotates inside that. */
#view-deeptutor .dt2-places-pin {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    display: block;
    background: none;
    cursor: pointer;
}
#view-deeptutor .dt2-places-pin-shape {
    width: 26px;
    height: 26px;
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pl-rust);
    color: #fff;
    transform: rotate(-45deg);
    box-shadow: 0 2px 7px rgba(28,28,25,.32);
    transition: transform .16s ease, background .16s ease;
}
#view-deeptutor .dt2-places-pin-shape > span {
    font-size: 11.5px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    transform: rotate(45deg);
}
#view-deeptutor .dt2-places-pin:hover .dt2-places-pin-shape { transform: rotate(-45deg) scale(1.12); }
#view-deeptutor .dt2-places-pin.is-active .dt2-places-pin-shape {
    background: #1c1c19;
    transform: rotate(-45deg) scale(1.2);
    box-shadow: 0 4px 12px rgba(28,28,25,.44);
}

#view-deeptutor .dt2-places-track {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 26px;
    z-index: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 290px;
    gap: 11px;
    padding: 1px 2px 9px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(100,116,139,.28) transparent;
}

#view-deeptutor .dt2-places-card {
    min-width: 0;
    overflow: hidden;
    scroll-snap-align: start;
    border: 1px solid rgba(15,23,42,.09);
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 9px;
    gap: 10px;
    background: rgba(255,255,255,.97);
    color: var(--dt-ink);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#view-deeptutor .dt2-places-card:hover {
    transform: translateY(-2px);
    border-color: rgba(171,45,0,.26);
    box-shadow: 0 10px 24px rgba(15,23,42,.10);
}
#view-deeptutor .dt2-places-card.is-active {
    border-color: var(--pl-rust);
    box-shadow: 0 0 0 1px var(--pl-rust), 0 10px 24px rgba(171,45,0,.16);
}
#view-deeptutor .dt2-places-card:focus-visible { outline: 2px solid var(--pl-rust); outline-offset: 2px; }

#view-deeptutor .dt2-places-media {
    position: relative;
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1ece4;
}
#view-deeptutor .dt2-places-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No photo from the payload and none from the unfurl: the place's initial on
   cream, never an empty grey hole. */
#view-deeptutor .dt2-places-media.is-empty::after {
    content: attr(data-initial);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(171,45,0,.34);
    font-size: 30px;
    font-weight: 700;
}
#view-deeptutor .dt2-places-badge {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 1;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pl-rust);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
/* A place the geocoder could not resolve still gets a card — it just has no
   pin to point at, and the badge says so quietly instead of lying with a
   number that is not on the map. */
#view-deeptutor .dt2-places-badge.is-nopin { background: rgba(28,28,25,.36); }

#view-deeptutor .dt2-places-body { min-width: 0; padding: 0; display: flex; flex-direction: column; }
#view-deeptutor .dt2-places-group {
    margin-bottom: 3px;
    overflow: hidden;
    color: var(--dt-muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .4px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
#view-deeptutor .dt2-places-name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--dt-ink);
    font-size: 13px;
    font-weight: 640;
    line-height: 1.34;
}
#view-deeptutor .dt2-places-price { margin-top: 3px; color: var(--dt-muted); font-size: 12px; font-weight: 500; }
#view-deeptutor .dt2-places-detail {
    margin-top: 3px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: var(--dt-muted);
    font-size: 11.5px;
    line-height: 1.4;
}
#view-deeptutor .dt2-places-open {
    align-self: flex-start;
    margin-top: 2px;
    color: var(--pl-rust) !important;
    font-size: 11.5px;
    font-weight: 650;
    text-decoration: none !important;
}
#view-deeptutor .dt2-places-open:hover { text-decoration: underline !important; }
#view-deeptutor .dt2-places-nomap .dt2-places-track { position: static; }

/* Mapbox's own chrome, toned down to match the card row. Attribution stays
   visible — Mapbox's terms require it. */
#view-deeptutor .dt2-places .mapboxgl-ctrl-attrib { font-size: 10px; }
#view-deeptutor .dt2-places .mapboxgl-ctrl-group { border-radius: 8px; box-shadow: 0 1px 4px rgba(28,28,25,.18); }

html[data-theme="dark"] #view-deeptutor .dt2-places {
    --pl-rust: #e8674c;
}
html[data-theme="dark"] #view-deeptutor .dt2-places-card {
    border-color: rgba(255,255,255,.10);
    background: rgba(30,30,33,.8);
    box-shadow: none;
}
html[data-theme="dark"] #view-deeptutor .dt2-places-card:hover { border-color: rgba(232,103,76,.38); }
html[data-theme="dark"] #view-deeptutor .dt2-places-mapwrap { background: #222225; }
html[data-theme="dark"] #view-deeptutor .dt2-places-media { background: #222225; }

@media (max-width: 768px) {
    #view-deeptutor .dt2-places-mapwrap { height: 330px; border-radius: 14px; }
    /* The zoom buttons cost more than they earn on a phone — they sit on top
       of the top-right pins, and pinch already zooms. */
    #view-deeptutor .dt2-places .mapboxgl-ctrl-top-right { display: none; }
    /* …which frees the corner the Expand chip was dodging. */
    #view-deeptutor .dt2-places-expand { right: 10px; }
    /* Cards go near-full-width so one is legible at a glance and the next
       peeks in, which is what makes the row read as swipeable. */
    #view-deeptutor .dt2-places-track { grid-auto-columns: 78%; gap: 9px; }
}
@media (max-width: 620px) {
    #view-deeptutor .dt2-places { margin: 13px 0 6px; }
    #view-deeptutor .dt2-places-track { grid-auto-columns: 82%; }
}
@media (prefers-reduced-motion: reduce) {
    #view-deeptutor .dt2-places-card,
    #view-deeptutor .dt2-places-pin { transition: none; }
    #view-deeptutor .dt2-places-card:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   EXPANDED VIEW. Deliberately NOT scoped to #view-deeptutor: the overlay is
   appended to document.body so `position: fixed` measures against the
   viewport rather than the chat column. Everything it needs is redeclared
   here — the badge, the Open link and the pin all live behind a
   #view-deeptutor prefix above and would not reach it otherwise. */
.dt2-places-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    background: #f7f3ec;
    --pl-rust: #ab2d00;
}
.dt2-places-ov-mapwrap { position: relative; flex: 1 1 auto; min-width: 0; }
/* Two classes deep DELIBERATELY. mapbox-gl.css is appended to <head> at
   runtime, so its own `.mapboxgl-map { position: relative }` lands after this
   file and wins a one-class tie — the container then collapses to zero height
   and the map paints nothing. The inline map dodges this behind its
   #view-deeptutor prefix; the overlay has to earn the specificity here. */
.dt2-places-overlay .dt2-places-ov-map { position: absolute; inset: 0; }
.dt2-places-ov-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(28,28,25,.10);
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #1c1c19;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(28,28,25,.2);
}
.dt2-places-ov-close:hover { background: #fff; }
.dt2-places-ov-close:focus-visible { outline: 2px solid var(--pl-rust); outline-offset: 2px; }

.dt2-places-ov-panel {
    flex: 0 0 372px;
    max-width: 42vw;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-left: 1px solid rgba(28,28,25,.10);
    background: #fffdfa;
}
.dt2-places-ov-row {
    display: flex;
    gap: 12px;
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(15,23,42,.09);
    border-radius: 14px;
    background: #fff;
    color: #1c1c19;
    cursor: pointer;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.dt2-places-ov-row:hover { border-color: rgba(171,45,0,.28); box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.dt2-places-ov-row.is-active { border-color: var(--pl-rust); box-shadow: 0 0 0 1px var(--pl-rust), 0 6px 18px rgba(171,45,0,.16); }
.dt2-places-ov-row:focus-visible { outline: 2px solid var(--pl-rust); outline-offset: 2px; }
.dt2-places-ov-media {
    position: relative;
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    overflow: hidden;
    border-radius: 11px;
    background: #f1ece4;
}
.dt2-places-ov-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt2-places-ov-media.is-empty::after {
    content: attr(data-initial);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(171,45,0,.34);
    font-size: 34px;
    font-weight: 700;
}
.dt2-places-overlay .dt2-places-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pl-rust);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.dt2-places-overlay .dt2-places-badge.is-nopin { background: rgba(28,28,25,.36); }
.dt2-places-ov-body { min-width: 0; display: flex; flex-direction: column; }
.dt2-places-ov-name { font: 640 14px/1.35 Inter, sans-serif; }
.dt2-places-ov-price { margin-top: 3px; color: rgba(28,28,25,.6); font: 500 12.5px/1.4 Inter, sans-serif; }
.dt2-places-ov-detail { margin-top: 3px; color: rgba(28,28,25,.6); font: 450 12px/1.45 Inter, sans-serif; }
.dt2-places-overlay .dt2-places-open {
    align-self: flex-start;
    margin-top: 5px;
    color: var(--pl-rust) !important;
    font: 650 12px/1 Inter, sans-serif;
    text-decoration: none !important;
}
.dt2-places-overlay .dt2-places-open:hover { text-decoration: underline !important; }
/* The pin markup is created by the module, so the shape rules above (scoped
   to #view-deeptutor) do not reach the overlay's own markers. */
.dt2-places-overlay .dt2-places-pin { width: 26px; height: 26px; padding: 0; border: 0; display: block; background: none; cursor: pointer; }
.dt2-places-overlay .dt2-places-pin-shape {
    width: 26px;
    height: 26px;
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pl-rust);
    color: #fff;
    transform: rotate(-45deg);
    box-shadow: 0 2px 7px rgba(28,28,25,.32);
    transition: transform .16s ease, background .16s ease;
}
.dt2-places-overlay .dt2-places-pin-shape > span { font: 700 11.5px/1 Inter, sans-serif; font-style: normal; transform: rotate(45deg); }
.dt2-places-overlay .dt2-places-pin.is-active .dt2-places-pin-shape {
    background: #1c1c19;
    transform: rotate(-45deg) scale(1.2);
    box-shadow: 0 4px 12px rgba(28,28,25,.44);
}
/* Mapbox + OpenStreetMap credit stays on screen in the expanded view too —
   Mapbox's terms require it. */
.dt2-places-overlay .mapboxgl-ctrl-attrib { font-size: 10px; }
.dt2-places-overlay .mapboxgl-ctrl-group { border-radius: 8px; box-shadow: 0 1px 4px rgba(28,28,25,.18); }

html[data-theme="dark"] .dt2-places-overlay { background: #191919; --pl-rust: #e8674c; }
html[data-theme="dark"] .dt2-places-ov-panel { background: #1e1e21; border-left-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .dt2-places-ov-row { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); color: #f4f4f5; }
html[data-theme="dark"] .dt2-places-ov-row:hover { border-color: rgba(232,103,76,.38); box-shadow: none; }
html[data-theme="dark"] .dt2-places-ov-media { background: #222225; }
html[data-theme="dark"] .dt2-places-ov-price,
html[data-theme="dark"] .dt2-places-ov-detail { color: rgba(244,244,245,.6); }
html[data-theme="dark"] .dt2-places-ov-close { background: rgba(35,35,38,.95); border-color: rgba(255,255,255,.16); color: #f4f4f5; }

/* Phone and tablet: the panel is a bottom sheet under the map. */
@media (max-width: 1023px) {
    .dt2-places-overlay { flex-direction: column; }
    .dt2-places-ov-mapwrap { flex: 1 1 auto; min-height: 45vh; }
    .dt2-places-ov-panel {
        flex: 0 0 auto;
        max-width: none;
        max-height: 46vh;
        padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
        border-left: 0;
        border-top: 1px solid rgba(28,28,25,.10);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 24px rgba(28,28,25,.12);
    }
    html[data-theme="dark"] .dt2-places-ov-panel { border-top-color: rgba(255,255,255,.10); }
}
@media (prefers-reduced-motion: reduce) {
    .dt2-places-overlay .dt2-places-pin,
    .dt2-places-ov-row { transition: none; }
}