/* ============================================================================
   FYSH — Sold price history (standalone guides page)
   CR: fysh-sold-price-intelligence-2026-10-21
   Page creation: 21/10/2026 22:47
   Page modified: 23/10/2026 14:05
   Mobile-first. Content cards use the FYSH 4px corner radius.
============================================================================ */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.ph-hero {
    background: linear-gradient(135deg, #0F2340 0%, #163258 100%);
    color: #FFFFFF;
    padding: 48px 0 40px;
}
.ph-hero__inner { max-width: 760px; }
.ph-hero__label {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #C9A84C;
    margin-bottom: 10px;
}
.ph-hero__heading {
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #FFFFFF;
}
.ph-hero__sub {
    font-size: 15px;
    line-height: 1.6;
    color: #D4DBE2;
    margin: 0;
}

/* ── Search card ──────────────────────────────────────────────────────── */
.ph-search {
    max-width: 760px;
    margin: 0 auto 8px;
    background: #FFFFFF;
    border: 1px solid #E6EBF0;
    border-radius: 4px; /* FYSH content-card radius */
    padding: 18px 16px;
    box-shadow: 0 1px 3px rgba(15, 35, 64, .06);
}
.ph-search__row {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ph-search__row + .ph-search__row { margin-top: 14px; }

/* ── Match type slide toggle ──────────────────────────────────────────── */
.ph-match {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.ph-match__label {
    font-size: 13px;
    font-weight: 600;
    color: #0F2340;
}
.ph-toggle {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    background: #F1F4F8;
    border: 1px solid #E0E6ED;
    border-radius: 4px;
    padding: 3px;
}
.ph-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.ph-toggle label {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #45566A;
    padding: 8px 14px;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease;
}
.ph-toggle__thumb {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    background: #FFFFFF;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(15, 35, 64, .10);
    transition: transform .18s ease;
    pointer-events: none;
}
.ph-toggle input#ph-match-district:checked ~ .ph-toggle__thumb { transform: translateX(100%); }
.ph-toggle input#ph-match-full:checked ~ label[for="ph-match-full"],
.ph-toggle input#ph-match-district:checked ~ label[for="ph-match-district"] { color: #0F2340; }
.ph-toggle input:focus-visible + label { outline: 2px solid #1E5BA8; outline-offset: 2px; }

.ph-field { display: flex; flex-direction: column; }
.ph-field label {
    font-size: 13px;
    font-weight: 600;
    color: #0F2340;
    margin-bottom: 6px;
}
.ph-field input,
.ph-field select {
    width: 100%;
    font-size: 15px;
    color: #0F2340;
    background: #FFFFFF;
    border: 1px solid #D4DBE2;
    border-radius: 4px;
    padding: 11px 12px;
    line-height: 1.3;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ph-field input:focus,
.ph-field select:focus {
    outline: none;
    border-color: #1E5BA8;
    box-shadow: 0 0 0 3px rgba(30, 91, 168, .15);
}
.ph-field__hint {
    font-size: 12px;
    color: #6B7A8D;
    margin-top: 6px;
}
.ph-field--action {
    justify-content: flex-end;
}
.ph-field--action .btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ── Status ───────────────────────────────────────────────────────────── */
.ph-status {
    max-width: 760px;
    margin: 14px auto 0;
    font-size: 13px;
    color: #6B7A8D;
    min-height: 18px;
}
.ph-status.is-error { color: #B23A3A; }

/* ── Headline figures ─────────────────────────────────────────────────── */
.ph-summary {
    max-width: 760px;
    margin: 14px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ph-stat {
    background: #F7F9FC;
    border: 1px solid #E6EBF0;
    border-radius: 4px;
    padding: 12px 14px;
    text-align: center;
}
.ph-stat__val {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #0F2340;
    line-height: 1.2;
}
.ph-stat__label {
    display: block;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6B7A8D;
    margin-top: 4px;
}

/* ── Results list ─────────────────────────────────────────────────────── */
.ph-list {
    max-width: 760px;
    margin: 16px auto 0;
    list-style: none;
    padding: 0;
    display: grid;
    gap: 8px;
}
.ph-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #E6EBF0;
    border-radius: 4px; /* FYSH content-card radius */
    background: #FFFFFF;
}
.ph-item__body { flex: 1 1 auto; min-width: 0; }

/* Selectable sale rows open the property history on click */
.ph-item--selectable { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.ph-item--selectable:hover { border-color: #1E5BA8; box-shadow: 0 2px 10px rgba(15, 35, 64, .10); }
.ph-item--selectable:active { transform: translateY(1px); }
.ph-item--selectable:focus-visible { outline: 2px solid #1E5BA8; outline-offset: 2px; }
.ph-item__go {
    flex: 0 0 auto;
    font-size: 18px;
    color: #9BA8B4;
    transition: color .15s ease, transform .15s ease;
}
.ph-item--selectable:hover .ph-item__go { color: #1E5BA8; transform: translateX(2px); }
.ph-item__addr {
    font-size: 14px;
    font-weight: 600;
    color: #0F2340;
    line-height: 1.35;
}
.ph-item__meta {
    font-size: 12px;
    color: #6B7A8D;
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.ph-item__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ph-item__tag.is-new { color: #1E8A63; font-weight: 600; }
.ph-item__price {
    flex: 0 0 auto;
    text-align: right;
}
.ph-item__price-val {
    font-size: 16px;
    font-weight: 700;
    color: #0F2340;
    white-space: nowrap;
}
.ph-item__price-date {
    font-size: 11px;
    color: #6B7A8D;
    margin-top: 2px;
    white-space: nowrap;
}

/* Empty / loading placeholder row */
.ph-empty {
    max-width: 760px;
    margin: 16px auto 0;
    padding: 20px 16px;
    border: 1px dashed #D4DBE2;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    color: #6B7A8D;
    background: #FBFCFE;
}

/* ── Source + caveat ──────────────────────────────────────────────────── */
.ph-source {
    max-width: 760px;
    margin: 18px auto 0;
    font-size: 12px;
    color: #45566A;
    font-weight: 600;
}
.ph-caveat {
    max-width: 760px;
    margin: 6px auto 0;
    font-size: 12px;
    color: #9BA8B4;
    line-height: 1.5;
}

/* ── Wider viewports ──────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .ph-hero { padding: 64px 0 52px; }
    .ph-hero__heading { font-size: 34px; }

    .ph-match { flex-direction: row; align-items: center; gap: 12px; }
    .ph-toggle { width: auto; min-width: 320px; }

    .ph-search__row {
        flex-direction: row;
        align-items: flex-start;
    }
    .ph-field--grow { flex: 1 1 auto; }
    .ph-field { flex: 1 1 0; }
    .ph-field--action { flex: 0 0 auto; align-self: flex-end; }
    .ph-field--action .btn { width: auto; padding-left: 28px; padding-right: 28px; }

    .ph-summary { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================================
   Smart filters, tabs, table and trend chart
   CR: fysh-sold-price-intelligence-2026-10-21
============================================================================ */

/* ── Filters fieldset ─────────────────────────────────────────────────── */
.ph-filters {
    border: 0;
    border-top: 1px solid #E6EBF0;
    margin: 14px 0 0;
    padding: 14px 0 0;
}
.ph-filters__legend {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6B7A8D;
    padding: 0;
    margin-bottom: 10px;
}

/* ── Results + tabs ───────────────────────────────────────────────────── */
.ph-results {
    max-width: 760px;
    margin: 18px auto 0;
}
.ph-tabs {
    display: inline-flex;
    background: #F1F4F8;
    border: 1px solid #E0E6ED;
    border-radius: 4px;
    padding: 3px;
    gap: 2px;
    margin-bottom: 14px;
}
.ph-tab {
    border: none;
    background: transparent;
    color: #45566A;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 3px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.ph-tab:hover { color: #0F2340; }
.ph-tab:focus-visible { outline: 2px solid #1E5BA8; outline-offset: 2px; }
.ph-tab.is-active {
    background: #FFFFFF;
    color: #0F2340;
    box-shadow: 0 1px 2px rgba(15, 35, 64, .10);
}
.ph-panel:focus-visible { outline: 2px solid #1E5BA8; outline-offset: 4px; }

/* The sales list sits full width inside its panel */
.ph-panel .ph-list,
.ph-panel .ph-summary { max-width: none; margin-left: 0; margin-right: 0; }
.ph-panel .ph-summary { margin-top: 0; }

/* ── Aggregated table ─────────────────────────────────────────────────── */
.ph-table-wrap {
    overflow-x: auto;
    border: 1px solid #E6EBF0;
    border-radius: 4px; /* FYSH content-card radius */
}
.ph-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 440px;
}
.ph-table th,
.ph-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #EEF2F6;
    white-space: nowrap;
}
.ph-table thead th {
    background: #F7F9FC;
    color: #45566A;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
}
.ph-table .ph-num { text-align: right; }
.ph-table tbody tr:last-child td { border-bottom: 0; }
.ph-table tbody tr:hover { background: #FBFCFE; }
.ph-table td:first-child { font-weight: 600; color: #0F2340; }

/* ── Trend chart ──────────────────────────────────────────────────────── */
.ph-chart__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 10px;
}
.ph-chart__caption { font-size: 13px; color: #45566A; margin: 0; }
.ph-chart__legend { display: flex; gap: 14px; font-size: 12px; color: #6B7A8D; }
.ph-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.ph-legend-swatch { width: 14px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.ph-legend-swatch.is-price  { height: 3px; background: #1E5BA8; }
.ph-legend-swatch.is-volume { background: #C9D6E6; }

.ph-chart {
    border: 1px solid #E6EBF0;
    border-radius: 4px; /* FYSH content-card radius */
    background: #FFFFFF;
    padding: 8px 4px 4px;
}
.ph-chart svg { display: block; width: 100%; height: auto; }
.ph-chart .ph-bar { fill: #C9D6E6; }
.ph-chart .ph-grid { stroke: #EEF2F6; stroke-width: 1; }
.ph-chart .ph-axis { stroke: #D4DBE2; stroke-width: 1; }
.ph-chart .ph-line { fill: none; stroke: #1E5BA8; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ph-chart .ph-dot  { fill: #1E5BA8; }
.ph-chart .ph-tick { fill: #6B7A8D; font-size: 10px; }
.ph-chart .ph-tick--x { text-anchor: middle; }
.ph-chart .ph-tick--y { text-anchor: end; }
.ph-chart .ph-tick--y2 { text-anchor: start; }

/* ── Premium single-property history ──────────────────────────────────── */
.ph-chart .ph-parea { stroke: none; }
.ph-chart .ph-vlabel { fill: #0F2340; font-size: 10px; font-weight: 700; text-anchor: middle; }
#ph-panel-property .ph-chart {
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
    border-color: #DCE4EE;
    box-shadow: 0 1px 3px rgba(15, 35, 64, .06);
}
#ph-prop-caption {
    font-size: 15px;
    font-weight: 600;
    color: #0F2340;
    margin: 0 0 12px;
    padding-left: 12px;
    border-left: 3px solid #C9A84C;
    line-height: 1.4;
}
#ph-prop-table { margin-top: 14px; }

.ph-chart__empty {
    padding: 28px 16px;
    text-align: center;
    font-size: 14px;
    color: #6B7A8D;
}

@media (min-width: 640px) {
    .ph-results { }
    .ph-chart { padding: 12px 8px 6px; }
}