/* ---------------------------------------------------------------------------
   Reactive showcase - styling for the live demos and the code listings that
   sit next to them. Everything here leans on Domma's theme variables, so the
   demos follow whatever theme the site is set to.
   --------------------------------------------------------------------------- */

:root {
    --sc-gap: 1rem;
    --sc-radius: var(--dm-radius-lg, 10px);
    --sc-line: 1px solid var(--dm-border, rgba(128, 128, 128, .25));
    --sc-surface: var(--dm-surface-raised, var(--dm-surface, rgba(128, 128, 128, .06)));
    --sc-muted: var(--dm-text-muted, rgba(128, 128, 128, .9));
}

/* ------------------------------------------------------------- demo shell -- */

.demo {
    border: var(--sc-line);
    border-radius: var(--sc-radius);
    background: var(--sc-surface);
    padding: 1.25rem;
    margin: 1.5rem 0;
}

.demo-stage { display: flex; flex-direction: column; gap: var(--sc-gap); }
.demo-stage--centre { align-items: center; text-align: center; }

.demo-readout {
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 800;
    line-height: 1;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.demo-controls { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.demo-row { display: flex; gap: .5rem; align-items: flex-end; }
.demo-row--wrap { flex-wrap: wrap; }
.demo-row .form-input { flex: 1 1 auto; }

.demo-facts { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0; justify-content: center; }
.demo-facts div { text-align: center; }
.demo-facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-muted); }
.demo-facts dd { margin: 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.demo-note { font-size: .875rem; color: var(--sc-muted); margin: 0; }
.demo-empty { font-style: italic; color: var(--sc-muted); margin: 0; }
.demo-error, .app-error {
    margin: 0; padding: .6rem .8rem; border-radius: var(--dm-radius, 8px);
    background: var(--dm-danger-bg, rgba(220, 38, 38, .12));
    color: var(--dm-danger, #b91c1c);
    font-size: .9rem;
}
.app-success {
    margin: 1rem 0 0; padding: .6rem .8rem; border-radius: var(--dm-radius, 8px);
    background: var(--dm-success-bg, rgba(22, 163, 74, .12));
    color: var(--dm-success, #15803d);
}

.demo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.demo-list li {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .45rem .6rem; border: var(--sc-line); border-radius: var(--dm-radius, 8px);
    background: var(--dm-surface, transparent);
}
.demo-check { display: flex; align-items: center; gap: .6rem; margin: 0; cursor: pointer; }
.demo-check .is-done { text-decoration: line-through; opacity: .55; }

.demo-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.demo-form { display: flex; flex-direction: column; gap: .75rem; }
.demo-fieldset { border: var(--sc-line); border-radius: var(--dm-radius, 8px); padding: .6rem .8rem; margin: 0; }
.demo-fieldset legend { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-muted); }
.demo-fieldset label, .demo-switch { display: inline-flex; gap: .35rem; align-items: center; margin-right: .9rem; }

.demo-mirror-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-muted); margin: 0 0 .4rem; }
.demo-json {
    margin: 0 0 .75rem; padding: .8rem; border-radius: var(--dm-radius, 8px);
    background: var(--dm-code-bg, rgba(0, 0, 0, .06));
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85rem; line-height: 1.5; white-space: pre-wrap;
}

.demo-card { border: var(--sc-line); border-radius: var(--sc-radius); padding: 1rem; background: var(--dm-surface, transparent); }
.demo-card h4 { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-muted); }
.demo-card-name { margin: 0; font-size: 1.35rem; font-weight: 700; }
.demo-card-role { margin: .1rem 0 .8rem; color: var(--sc-muted); }
.demo-card footer { margin-top: .8rem; padding-top: .6rem; border-top: var(--sc-line); }

/* --------------------------------------------------------- code listings -- */

.srcview { margin: 1.25rem 0; border: var(--sc-line); border-radius: var(--sc-radius); overflow: hidden; }
.srcview-bar {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .45rem .8rem; background: var(--sc-surface); border-bottom: var(--sc-line);
    font-size: .8rem;
}
.srcview-file { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--sc-muted); }
.srcview-link { font-size: .75rem; }
.srcview-code { margin: 0; padding: 1rem; overflow-x: auto; font-size: .85rem; line-height: 1.6; }
.srcview--missing { padding: .8rem; color: var(--dm-danger, #b91c1c); font-size: .85rem; }

/* -------------------------------------------------------------- the apps -- */

.app { display: flex; flex-direction: column; gap: 1.25rem; }

.app-bar { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.app-query { margin: 0; display: flex; flex-direction: column; gap: .2rem; flex: 1 1 100%; }
.app-query-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sc-muted); }
.app-query code {
    display: block; overflow-x: auto; white-space: nowrap;
    padding: .4rem .6rem; border-radius: var(--dm-radius-sm, 6px);
    background: var(--dm-code-bg, rgba(0, 0, 0, .06)); font-size: .8rem;
}
.app-note { font-size: .85rem; color: var(--sc-muted); margin: 0; }
.app-empty { padding: 1.5rem; text-align: center; color: var(--sc-muted); }

/* Booking ------------------------------------------------------------------ */

.room { border-left: 4px solid var(--accent, var(--dm-primary, #38a169)); padding-left: 1rem; }
.room-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.room-head h3 { margin: 0; }
.room-price { margin: 0; color: var(--sc-muted); font-size: .9rem; }
.room-summary { margin: .4rem 0 .8rem; }

/* The photo is a field on the room, so it arrives with the rest of the entry and
   is laid out at a fixed ratio - the listing decides the crop, not the file. */
.room-photo { margin: .6rem 0 .8rem; }
.room-photo img {
    display: block; width: 100%; height: clamp(170px, 30vw, 280px); object-fit: cover;
    border-radius: var(--sc-radius); background: var(--dm-surface-secondary, rgba(128, 128, 128, .15));
}
.room-photo figcaption { margin-top: .3rem; font-size: .68rem; color: var(--sc-muted); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; padding: 0; }
.chip {
    font-size: .75rem; padding: .2rem .55rem; border-radius: var(--dm-radius-full, 999px);
    background: var(--dm-surface-secondary, rgba(128, 128, 128, .15));
}

.slots-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 .6rem; }
.slots-title small { color: var(--sc-muted); font-weight: 400; }

.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.slot {
    width: 100%; display: flex; flex-direction: column; gap: .1rem; cursor: pointer;
    padding: .5rem .3rem; border: var(--sc-line); border-radius: var(--dm-radius, 8px);
    background: var(--dm-surface, transparent); color: inherit; font: inherit;
    transition: transform .12s ease, border-color .12s ease;
}
.slot:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--accent, var(--dm-primary, #38a169)); }
.slot-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.slot-state { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-muted); }
.slot.is-taken { opacity: .45; cursor: not-allowed; background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(128,128,128,.12) 5px, rgba(128,128,128,.12) 10px); }
.slot.is-chosen { border-color: var(--accent, var(--dm-primary, #38a169)); border-width: 2px; background: var(--dm-primary-bg, rgba(56, 161, 105, .12)); }

.booking { border: var(--sc-line); border-radius: var(--sc-radius); padding: 1rem; background: var(--dm-surface, transparent); }
.booking h4 { margin: 0 0 .8rem; }
.booking-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
.booking-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.booking-total { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.problems { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.problems li { font-size: .85rem; color: var(--dm-danger, #b91c1c); }
.problems li::before { content: "→ "; }

.confirmed { border: 2px solid var(--dm-success, #15803d); border-radius: var(--sc-radius); padding: 1rem; }
.confirmed h4 { margin: 0 0 .4rem; color: var(--dm-success, #15803d); }

.diary-list { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.diary-list li { display: flex; gap: .8rem; align-items: baseline; font-size: .9rem; }
.diary-list b { font-variant-numeric: tabular-nums; }
.diary-list em { margin-left: auto; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-muted); }

/* Examples index ----------------------------------------------------------- */

/* The photograph that heads each demo card on /examples. Fixed height so the two
   cards line up whatever the source images are shaped like. */
.demo-card .card-body > p:first-child { margin: 0 0 .9rem; }
.demo-card .card-body img {
    display: block; width: 100%; height: 190px; object-fit: cover;
    border-radius: var(--dm-radius, 8px); background: var(--dm-surface-secondary, rgba(128, 128, 128, .15));
}

/* House hunter ------------------------------------------------------------- */

.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; align-items: end; }
.filters-search { grid-column: 1 / -1; }
.filters-toggles { grid-column: 1 / -1; display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; }
.filters > .btn { grid-column: 1 / -1; justify-self: start; }
.filters-toggles label { display: inline-flex; gap: .35rem; align-items: center; }

.results-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.results-head h3 { margin: 0; }

.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }

.property { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; height: 100%; }
.property-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.property-head h4 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.property-price { margin: 0; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.property-where { margin: 0; font-size: .85rem; color: var(--sc-muted); }
.property-facts { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; }
.property-facts li {
    font-size: .72rem; padding: .15rem .5rem; border-radius: var(--dm-radius-full, 999px);
    background: var(--dm-surface-secondary, rgba(128, 128, 128, .15));
}
.property-summary { margin: .2rem 0; font-size: .9rem; }
.property-actions { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: auto; padding-top: .5rem; }
.card-footnote { margin: .4rem 0 0; font-size: .72rem; color: var(--sc-muted); }

/* Full-bleed to the card edge, which is why .property clips its overflow. The
   height is fixed so a grid of twelve listings has one horizon, not twelve. */
.property { overflow: hidden; }
.property-photo { margin: -1rem -1rem .1rem; }
.property-photo img {
    display: block; width: 100%; height: 175px; object-fit: cover;
    background: var(--dm-surface-secondary, rgba(128, 128, 128, .15));
}
.property-photo figcaption { padding: .3rem 1rem 0; font-size: .68rem; color: var(--sc-muted); }

/* data-bind-src primes after the first paint, so for one frame these carry no
   src at all - which a browser renders as a broken-image glyph plus alt text. */
.property-photo img:not([src]), .room-photo img:not([src]) { opacity: 0; }

/* A shortlist saved before these rows carried photographs has no path to bind,
   so that thumbnail takes no space rather than leaving a hole in the row. */
.shortlist-thumb:not([src]) { display: none; }

.shortlist, .viewing { border: var(--sc-line); border-radius: var(--sc-radius); padding: 1rem; }
.shortlist h4, .viewing h4 { margin: 0 0 .6rem; }
.shortlist-list { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.shortlist-list li { display: flex; gap: .8rem; align-items: center; font-size: .9rem; }
.shortlist-thumb {
    flex: none; width: 64px; height: 44px; object-fit: cover;
    border-radius: var(--dm-radius-sm, 6px); background: var(--dm-surface-secondary, rgba(128, 128, 128, .15));
}
.shortlist-list li button { margin-left: auto; }
.shortlist-list em { font-style: normal; font-weight: 700; }

.viewing-what { margin: 0 0 .8rem; color: var(--sc-muted); }
.viewing-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
.viewing-form .problems, .viewing-foot { grid-column: 1 / -1; }
.viewing-foot { display: flex; gap: .5rem; }

.form-label--wide { grid-column: 1 / -1; }
.form-label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }

/* ------------------------------------------------------------- narrow -- */

@media (max-width: 720px) {
    .demo-split { grid-template-columns: 1fr; }
    .app-bar { flex-direction: column; align-items: stretch; }
}

/* The tutorial's contacts system ------------------------------------------- */

.contacts { display: flex; flex-direction: column; gap: 1rem; }
.contacts-summary { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-muted); }

.contacts-new, .contacts-filters { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; }
.contacts-new .form-input, .contacts-filters .form-input { flex: 1 1 12rem; }
.contacts-new .form-select, .contacts-filters .form-select { flex: 0 1 10rem; }

.contacts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.contacts-list li {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .2rem; border-bottom: var(--sc-line);
}
.contacts-list li:last-child { border-bottom: none; }
.contacts-list .show, .contacts-list .edit { flex: 1 1 auto; min-width: 0; }
.contacts-list .show { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contacts-list .chip { flex: none; }
.contacts-none { margin: 0; font-style: italic; color: var(--sc-muted); }

@media (max-width: 620px) {
    .contacts-new .form-select, .contacts-filters .form-select { flex: 1 1 100%; }
}

/* Long lines in a code block scroll rather than escape their card. */
.page-body pre,
.page-body .code-block-wrapper { max-width: 100%; overflow-x: auto; }
.page-body pre code { white-space: pre; }

/* Inside a card the block is narrow and the lines are usually a URL or an
   import, so wrapping beats a scrollbar nobody notices. */
.card pre { margin-left: 0; margin-right: 0; }
.card pre code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Contents list, from [toc] --------------------------------------------------- */

.page-toc {
    margin: 1.5rem 0 2rem;
    padding: 1rem 1.25rem;
    border: var(--sc-line);
    border-left: 3px solid var(--dm-primary, #38a169);
    border-radius: var(--sc-radius);
    background: var(--sc-surface);
}
.page-toc-title {
    margin: 0 0 .6rem;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--sc-muted);
}
.page-toc-list {
    list-style: none; margin: 0; padding: 0;
    columns: 2; column-gap: 2rem;
}
.page-toc-list li { break-inside: avoid; line-height: 1.6; }
.page-toc-list a { text-decoration: none; }
.page-toc-list a:hover { text-decoration: underline; }
.page-toc-h2 { font-weight: 600; margin-top: .35rem; }
.page-toc-h2:first-child { margin-top: 0; }
.page-toc-h3 { padding-left: .9rem; font-size: .9rem; }

@media (max-width: 720px) {
    .page-toc-list { columns: 1; }
}

/* Give an anchored heading somewhere to land clear of the fixed navbar. */
.page-body h2[id], .page-body h3[id] { scroll-margin-top: 5rem; }