/* ============================================================================
   Propsys design layer for the Customer portal.

   Class NAMES and structure match the staff portals (ps-card, ps-btn-primary,
   ps-nav-primary...). Every COLOUR resolves through a --brand-* custom property
   from themes.css instead of being hard-coded, which is what lets the five
   client brands (propsys / kainga-ora / peabody / lq / clarion) and dark mode
   keep working. Never put a literal colour in this file — put it in themes.css
   as a token, or the theme switcher silently stops affecting that element.

   Mobile-first throughout (GD9): base rules are the small-screen layout and
   min-width queries add the larger one.
   ========================================================================== */

/* ---- primitives ---------------------------------------------------------- */

/* Toggled by script rather than an inline style, so the two never fight.
   !important because it must beat any display set by a component rule. */
.hidden { display: none !important; }

.ps-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ps-body {
    margin: 0;
    background: var(--brand-bg);
    color: var(--brand-text);
    font-family: var(--brand-font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

.ps-container {
    width: 100%;
    max-width: var(--brand-max-width);
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

.ps-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: .6rem 1rem;
    background: var(--brand-surface);
    color: var(--brand-text);
    border-radius: 0 0 var(--brand-radius) 0;
}
.ps-skip-link:focus { left: 0; }

/* ---- header -------------------------------------------------------------- */

/* The brand band is LIGHT and the nav band below it is dark — not the other way
   round. The Propsys logo is dark artwork on transparency, so a dark header turns
   it into a smudge. I had these two inverted, which is what made the logo look
   like it had lost its transparency. */
.ps-header {
    background: var(--brand-surface);
    color: var(--brand-text);
    border-bottom: 1px solid var(--brand-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.ps-header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: var(--brand-max-width);
    margin: 0 auto;
    padding: .6rem 1rem;
    box-sizing: border-box;
}

.ps-header-logo { display: block; height: 36px; width: auto; }   /* 36px as it was originally */

/* Pushes everything to the right edge, which is what keeps the account menu and
   the theme controls together rather than stranded mid-header. */
.ps-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ---- theme + mode -------------------------------------------------------- */

.ps-theme-switcher { display: flex; align-items: center; gap: .35rem; }

/* On the light band, so these take the ordinary surface/border/text tokens.
   They previously used translucent white, which was invisible here. */
.ps-theme-select {
    background: var(--brand-surface-alt);
    color: var(--brand-text);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: .3rem .5rem;
    font: inherit;
    font-size: 12px;
    max-width: 9rem;
}

.ps-mode-toggle {
    background: var(--brand-surface-alt);
    color: var(--brand-text);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: .3rem .55rem;
    cursor: pointer;
    line-height: 1;
}
.ps-mode-toggle:hover { background: var(--brand-border); }

/* ---- account menu -------------------------------------------------------- */

.ps-user-menu { position: relative; }

.ps-user-trigger {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: var(--brand-surface-alt);
    color: var(--brand-text);
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    padding: .25rem .6rem .25rem .3rem;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
}
.ps-user-trigger:hover { background: var(--brand-border); }

.ps-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--brand-accent);
    color: var(--brand-text-inverse);
    font-size: 11px;
    font-weight: 700;
}

/* The name is the first thing to go on a narrow screen; the avatar still
   identifies who is signed in. */
.ps-user-name { display: none; }
.ps-user-caret { font-size: 10px; opacity: .8; }

.ps-user-panel {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    z-index: 60;
    min-width: 15rem;
    max-width: min(20rem, calc(100vw - 2rem));
    margin: 0;
    padding: .35rem;
    list-style: none;
    background: var(--brand-surface);
    color: var(--brand-text);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-card-shadow);
}

.ps-user-panel a {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .55rem;
    border-radius: var(--brand-radius);
    color: var(--brand-text);
    text-decoration: none;
    font-size: 13px;
}
.ps-user-panel a:hover { background: var(--brand-surface-alt); }
.ps-user-panel a i { width: 1rem; text-align: center; opacity: .75; }

.ps-user-panel-head {
    padding: .5rem .55rem .55rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.ps-user-panel-name { font-weight: 700; }
.ps-user-panel-sub { font-size: 12px; color: var(--brand-text-muted); }

.ps-user-panel-sep {
    height: 1px;
    margin: .35rem .25rem;
    background: var(--brand-border);
}

.ps-user-panel-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .55rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--brand-text-muted);
}

.ps-persona-sublist {
    list-style: none;
    margin: 0;
    padding: 0 0 0 .6rem;
}
.ps-persona-sublist a { font-size: 12.5px; }
.ps-persona-sublist a.is-current { font-weight: 700; color: var(--brand-primary); }
.ps-persona-sublist a.is-current i { opacity: 1; color: var(--brand-success); }

/* ---- primary nav --------------------------------------------------------- */

/* The dark band. Every theme defines --brand-header-bg as a deep brand colour
   precisely for this strip. */
.ps-nav-primary {
    background: var(--brand-header-bg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ps-nav-inner {
    display: flex;
    gap: .25rem;
    width: 100%;
    max-width: var(--brand-max-width);
    margin: 0 auto;
    padding: 0 .5rem;
    box-sizing: border-box;
}

/* Sitting on the dark band, so these read from --brand-header-text rather than
   the body text tokens. */
.ps-nav-inner a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .75rem .8rem;
    white-space: nowrap;
    color: var(--brand-header-text);
    opacity: .75;
    text-decoration: none;
    font-size: 13px;
    border-bottom: 3px solid transparent;
}
.ps-nav-inner a:hover { opacity: 1; }
.ps-nav-inner a.active {
    opacity: 1;
    border-bottom-color: var(--brand-warning);
    font-weight: 700;
}
.ps-nav-inner a:focus-visible { outline: 2px solid var(--brand-header-text); outline-offset: -2px; }

/* ---- page shell ---------------------------------------------------------- */

.ps-main { padding: 1rem 0 2.5rem; }

.ps-page-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.ps-page-main { min-width: 0; }
.ps-page-rail { min-width: 0; }

.ps-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .75rem;
    font-size: 12.5px;
    color: var(--brand-text-muted);
}
.ps-breadcrumb a { color: var(--brand-accent); text-decoration: none; }
.ps-breadcrumb a:hover { text-decoration: underline; }

.ps-page-title {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--brand-text);
}

/* ---- card ---------------------------------------------------------------- */

.ps-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-card-shadow);
    margin-bottom: 1rem;
    overflow: hidden;
}

.ps-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--brand-border);
    background: var(--brand-surface-alt);
}

/* Flex + gap rather than a margin on the icon: card titles are written as
   <i></i>Title with no whitespace between them, so without this the icon butts
   straight against the first letter. The icon must not shrink when the title
   wraps, hence flex: none. */
.ps-card-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}
.ps-card-title > i { flex: none; }
.ps-card-body { padding: 1rem; }

/* ---- buttons ------------------------------------------------------------- */

.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border-radius: var(--brand-radius);
    border: 1px solid transparent;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
}
.ps-btn:disabled { opacity: .55; cursor: not-allowed; }

.ps-btn-primary { background: var(--brand-primary); color: var(--brand-text-inverse); }
.ps-btn-primary:hover:not(:disabled) { background: var(--brand-accent-hover); }

.ps-btn-secondary {
    background: var(--brand-surface);
    color: var(--brand-text);
    border-color: var(--brand-border);
}
.ps-btn-secondary:hover:not(:disabled) { background: var(--brand-surface-alt); }

.ps-btn-sm { padding: .35rem .7rem; font-size: 12.5px; }

.ps-btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ---- forms --------------------------------------------------------------- */

.ps-label {
    display: block;
    margin: 0 0 .3rem;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-text);
}
.ps-label + .ps-label { margin-top: .75rem; }

.ps-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .55rem .65rem;
    background: var(--brand-surface);
    color: var(--brand-text);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    font: inherit;
    font-size: 13.5px;
}
.ps-input:focus {
    outline: 2px solid var(--brand-accent);
    outline-offset: 1px;
    border-color: var(--brand-accent);
}
.ps-field { margin-bottom: .85rem; }
.ps-hint { margin: .3rem 0 0; font-size: 12px; color: var(--brand-text-muted); }

/* ---- wizard steps -------------------------------------------------------- */

.ps-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.ps-step {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--brand-surface-alt);
    border: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
    font-size: 12px;
    white-space: nowrap;
}
.ps-step .ps-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--brand-border);
    color: var(--brand-text);
    font-size: 11px;
    font-weight: 700;
}
.ps-step.is-active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-text-inverse);
    font-weight: 600;
}
.ps-step.is-active .ps-step-num {
    background: var(--brand-text-inverse);
    color: var(--brand-primary);
}
.ps-step.is-done { color: var(--brand-text); }
.ps-step.is-done .ps-step-num { background: var(--brand-success); color: var(--brand-text-inverse); }

/* ---- notices ------------------------------------------------------------- */

.ps-notice {
    display: flex;
    gap: .6rem;
    padding: .8rem .9rem;
    border-radius: var(--brand-radius);
    border: 1px solid var(--brand-border);
    border-left: 4px solid var(--brand-accent);
    background: var(--brand-surface-alt);
    margin-bottom: 1rem;
    font-size: 13px;
}
.ps-notice--warn { border-left-color: var(--brand-warning); }
.ps-notice--error { border-left-color: var(--brand-danger); color: var(--brand-danger); }
.ps-notice--success { border-left-color: var(--brand-success); }

/* ---- footer -------------------------------------------------------------- */

.ps-footer {
    padding: 1.2rem 0;
    border-top: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
    font-size: 12.5px;
}
.ps-footer a { color: var(--brand-accent); }

/* ---- larger screens ------------------------------------------------------ */

@media (min-width: 640px) {
    .ps-user-name { display: inline; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ps-container { padding: 0 1.5rem; }
    .ps-header-inner, .ps-nav-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
    .ps-page-grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
    .ps-page-grid--norail { grid-template-columns: minmax(0, 1fr); }
    .ps-main { padding: 1.5rem 0 3rem; }
}

/* ============================================================================
   Repairs list (rp-*).

   Same token rule as everything above: no literal colours, so the cards, the
   status pills and the rating stars all follow the active brand and dark mode.
   ========================================================================== */

.rp-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.rp-page-head .ps-page-title { margin-bottom: 0; }

.rp-section-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 1.5rem 0 .6rem;
    font-size: 1rem;
    font-weight: 700;
}
.rp-section-intro { margin: -.3rem 0 .7rem; }

.rp-empty { text-align: center; padding: 2rem 1rem; }
.rp-empty-icon { font-size: 2rem; color: var(--brand-text-muted); display: block; margin-bottom: .6rem; }
.rp-empty p { color: var(--brand-text-muted); margin: 0 0 1rem; }

/* ---- repair card --------------------------------------------------------- */

.rp-card {
    display: block;
    margin-bottom: .7rem;
    padding: 0;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-left: 4px solid var(--brand-border);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-card-shadow);
    color: inherit;
    text-decoration: none;
}
.rp-card:hover { border-color: var(--brand-accent); }
.rp-card:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

.rp-card--active { border-left-color: var(--brand-warning); }
.rp-card--communal { border-left-color: var(--brand-accent); }
.rp-card--history { border-left-color: var(--brand-success); }

.rp-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--brand-border);
}
.rp-card-title { font-weight: 700; font-size: 14px; }

.rp-card-facts { margin: 0; padding: .7rem .9rem; display: grid; gap: .35rem; }
.rp-card-facts > div { display: grid; grid-template-columns: 1fr; gap: .05rem; }
.rp-card-facts dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--brand-text-muted);
}
.rp-card-facts dd { margin: 0; font-size: 13px; }

.rp-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--brand-text-muted);
}

/* ---- status + chips ------------------------------------------------------ */

.rp-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--brand-border);
    background: var(--brand-surface-alt);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.rp-status.is-success { color: var(--brand-success); border-color: var(--brand-success); }
.rp-status.is-warn { color: var(--brand-warning); border-color: var(--brand-warning); }

.rp-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .4rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    border: 1px solid var(--brand-border);
    background: var(--brand-surface-alt);
    font-size: 11px;
    font-weight: 600;
}
.rp-chip--communal { color: var(--brand-accent); border-color: var(--brand-accent); }
.rp-chip--count { margin-left: 0; color: var(--brand-warning); border-color: var(--brand-warning); }

/* ---- rate it ------------------------------------------------------------- */

.rp-feedback { border-left: 4px solid var(--brand-warning); }
.rp-feedback-icon { color: var(--brand-warning); }   /* spacing comes from .ps-card-title gap */
.rp-feedback-intro { margin-top: 0; }

.rp-rate {
    padding: .8rem .9rem;
    margin-bottom: .6rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    background: var(--brand-surface);
}
.rp-rate.is-done { border-color: var(--brand-success); }

.rp-rate-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}
.rp-rate-what { display: flex; flex-direction: column; gap: .15rem; min-width: 12rem; flex: 1; }

.rp-stars { display: inline-flex; gap: .1rem; }
.rp-star {
    padding: .1rem .15rem;
    border: 0;
    background: none;
    color: var(--brand-border);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.rp-star.is-on { color: var(--brand-warning); }
.rp-star:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

.rp-rate-more {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--brand-border);
}
.rp-rate-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.rp-rate-fieldset { border: 0; margin: 0; padding: 0; }
.rp-rate-radios { display: flex; gap: 1rem; padding-top: .3rem; font-size: 13px; }
.rp-rate-radios label { display: inline-flex; align-items: center; gap: .3rem; }
.rp-rate-actions { justify-content: flex-end; }

.rp-rate-thanks {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .5rem 0;
    color: var(--brand-success);
    font-weight: 600;
}

@media (min-width: 640px) {
    .rp-card-facts > div { grid-template-columns: 9rem 1fr; gap: .75rem; align-items: baseline; }
    .rp-rate-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- repair detail (rd-*) ------------------------------------------------ */

.rd-head--communal { border-left: 4px solid var(--brand-accent); }
.rd-head-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.rd-title { margin: 0 0 .3rem; font-size: 1.3rem; font-weight: 700; }
.rd-meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    color: var(--brand-text-muted);
    font-size: 12.5px;
}
.rd-when {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .4rem 0 0;
    color: var(--brand-text-muted);
    font-size: 13px;
}
/* Preserves the line breaks the tenant typed without letting a long unbroken
   string blow out the card. */
.rd-reported { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.rd-var {
    padding: .9rem;
    margin-bottom: .75rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    background: var(--brand-surface-alt);
}
.rd-var-intro { margin-top: 0; }
.rd-var-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .4rem;
}
.rd-var-when { display: block; }
.rd-var-status { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.rd-var-delta { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-var-delta.is-up { color: var(--brand-warning); }
.rd-var-delta.is-down { color: var(--brand-success); }
.rd-var-reason { margin: .3rem 0 .6rem; font-style: italic; }

.rd-var-lines-title {
    margin: .6rem 0 .3rem;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--brand-text-muted);
}
.rd-var-lines { list-style: none; margin: 0; padding: 0; }
.rd-var-lines li {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--brand-border);
    font-size: 13px;
}
.rd-var-line-cost { font-variant-numeric: tabular-nums; white-space: nowrap; }

.rd-var-totals {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .6rem;
    font-size: 12.5px;
    color: var(--brand-text-muted);
    font-variant-numeric: tabular-nums;
}

.rd-timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--brand-border); }
.rd-timeline li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: 0 0 1rem .3rem;
}
.rd-timeline li::before {
    content: "";
    position: absolute;
    left: -1.36rem;
    top: .35rem;
    width: .6rem; height: .6rem;
    border-radius: 50%;
    background: var(--brand-accent);
}
.rd-timeline-date { font-size: 11.5px; color: var(--brand-text-muted); }
.rd-timeline-title { font-weight: 600; font-size: 13.5px; }
.rd-timeline-detail { font-size: 12.5px; color: var(--brand-text-muted); }

/* ---- home / dashboard (hm-*) --------------------------------------------- */

.hm-welcome { border-left: 4px solid var(--brand-accent); }
.hm-welcome-title { margin: 0 0 .25rem; font-size: 1.3rem; font-weight: 700; }
.hm-welcome-sub { margin: 0; }

.hm-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .6rem;
    margin-bottom: 1rem;
}

.hm-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .9rem .6rem;
    text-align: center;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-card-shadow);
    color: inherit;
    text-decoration: none;
}
a.hm-kpi:hover { border-color: var(--brand-accent); }
a.hm-kpi:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

.hm-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
/* Home safety shows words rather than a number, which needs a smaller size to
   sit on one line in the same box. */
.hm-kpi-value--sm { font-size: 1rem; }
.hm-kpi-value.is-error { color: var(--brand-danger); }
.hm-kpi-value.is-warn { color: var(--brand-warning); }
.hm-kpi-value.is-success { color: var(--brand-success); }
.hm-kpi-value.is-neutral { color: var(--brand-text); }

.hm-kpi-label {
    font-size: 11.5px;
    color: var(--brand-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.hm-empty { margin: 0; }

.hm-list { list-style: none; margin: 0; padding: 0; }
.hm-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--brand-border);
}
.hm-list li:last-child { border-bottom: 0; }
.hm-list-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.hm-list-title { font-weight: 600; font-size: 13.5px; }

.hm-table-wrap { overflow-x: auto; }
.hm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hm-table th, .hm-table td {
    padding: .5rem .6rem;
    text-align: left;
    border-bottom: 1px solid var(--brand-border);
    white-space: nowrap;
}
.hm-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--brand-text-muted);
}
.hm-table tbody tr:last-child td { border-bottom: 0; }

.hm-prose h2 { margin: 1.4rem 0 .5rem; font-size: 1rem; font-weight: 700; }
.hm-prose h2:first-of-type { margin-top: .5rem; }
.hm-prose ul { margin: .3rem 0 .8rem; padding-left: 1.2rem; }
.hm-prose li { margin-bottom: .25rem; }
.hm-prose p { margin: 0 0 .7rem; }

.hm-error { text-align: center; padding: 2.5rem 1rem; }
.hm-error-icon { font-size: 2.4rem; color: var(--brand-warning); }
.hm-error-title { margin: .7rem 0 .5rem; font-size: 1.25rem; }
.hm-error-ref { margin-top: 1rem; font-size: 12.5px; color: var(--brand-text-muted); }
.hm-error-actions { justify-content: center; }

/* ---- rent (rn-*) --------------------------------------------------------- */

.rn-tabs {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .2rem;
}

.rn-tab {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex: none;
    min-width: 10rem;
    padding: .6rem .8rem;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    color: inherit;
    text-decoration: none;
}
.rn-tab:hover { border-color: var(--brand-accent); }
.rn-tab.is-active {
    border-color: var(--brand-primary);
    box-shadow: inset 0 -3px 0 var(--brand-nav-active);
}

.rn-tab-label { font-size: 13px; font-weight: 600; }
.rn-tab-acct { font-size: 11.5px; color: var(--brand-text-muted); }
.rn-tab-balance { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rn-tab-balance.is-error { color: var(--brand-danger); }
.rn-tab-balance.is-success { color: var(--brand-success); }

.rn-summary { border-left: 4px solid var(--brand-accent); }
.rn-summary .hm-kpis { margin-bottom: 0; }
.rn-notice { margin: 1rem 0 0; }

/* The table runs edge to edge inside the card, so the card body loses its padding
   and the empty state supplies its own. */
.rn-tx-body { padding: 0; }
.rn-tx-empty { padding: 1rem; margin: 0; }

.rn-tx td, .rn-tx th { padding: .55rem .75rem; }
.rn-num { text-align: right; font-variant-numeric: tabular-nums; }
.rn-num.is-credit { color: var(--brand-success); }
/* Descriptions are the one column allowed to wrap — everything else stays on
   one line so the numbers keep their column. */
.rn-desc { white-space: normal; min-width: 12rem; }

/* ---- cases (cs-*) -------------------------------------------------------- */

.cs-card-body { padding: .7rem .9rem; }
.cs-card-desc { margin: 0 0 .6rem; font-size: 13px; color: var(--brand-text-muted); }
.cs-card-facts { padding: 0; }

.cs-new-intro { margin-top: 0; }
.cs-new-actions { justify-content: flex-end; }

.cs-type-set { border: 0; margin: 0; padding: 0; }
.cs-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .6rem;
}

.cs-type {
    display: flex;
    gap: .6rem;
    padding: .8rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    background: var(--brand-surface);
    cursor: pointer;
}
.cs-type:hover { border-color: var(--brand-accent); }
/* The whole tile reads as selected, not just the radio — the radio alone is a
   small target and easy to miss on a phone. */
.cs-type:has(input:checked) {
    border-color: var(--brand-primary);
    box-shadow: inset 0 0 0 1px var(--brand-primary);
}
.cs-type:focus-within { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

.cs-type-body { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; }
.cs-type-name { font-weight: 600; font-size: 13.5px; }
.cs-type-desc { font-size: 12px; color: var(--brand-text-muted); }

.cs-actions { list-style: none; margin: 0; padding: 0; }
.cs-actions li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--brand-border);
}
.cs-actions li:last-child { border-bottom: 0; }
.cs-actions a.hm-list-title { display: inline-flex; align-items: center; gap: .4rem; color: var(--brand-accent); text-decoration: none; }
.cs-actions a.hm-list-title:hover { text-decoration: underline; }

.cs-intake-title { margin: .8rem 0 .3rem; font-size: .95rem; font-weight: 700; }
.cs-intake-title:first-child { margin-top: 0; }
.cs-intake { padding: 0; }

/* ---- tenancy + documents (tn-*, dc-*) ------------------------------------ */

.tn-facts { padding: 0; }
.tn-doc-intro { margin-top: 0; }
.tn-contact { display: flex; flex-direction: column; gap: .1rem; white-space: normal; }

.dc-intro { margin: -.4rem 0 1rem; }
.dc-name { white-space: normal; min-width: 14rem; }
.dc-name a { display: inline-flex; align-items: center; gap: .4rem; color: var(--brand-accent); text-decoration: none; }
.dc-name a:hover { text-decoration: underline; }

/* ---- support plans (sp-*) ------------------------------------------------ */

.sp-plan { margin-bottom: 1.25rem; }
.sp-plan-title { margin: .15rem 0 .25rem; font-size: 1.05rem; font-weight: 700; }
.sp-plan-goal { margin: 0; color: var(--brand-text-muted); font-size: 13px; }

/* Native <progress> styled to match, so the semantics come free. */
.sp-progress {
    display: block;
    width: 100%;
    height: 6px;
    margin-top: .75rem;
    border: 0;
    border-radius: 3px;
    background: var(--brand-border);
    appearance: none;
}
.sp-progress::-webkit-progress-bar { background: var(--brand-border); border-radius: 3px; }
.sp-progress::-webkit-progress-value { background: var(--brand-primary); border-radius: 3px; }
.sp-progress::-moz-progress-bar { background: var(--brand-primary); border-radius: 3px; }
.sp-progress-note { margin: .3rem 0 0; }

.sp-section { margin: 1.1rem 0 .4rem; font-size: .9rem; font-weight: 700; }

.sp-action {
    margin: .5rem 0;
    padding: .75rem .9rem;
    border: 1px solid var(--brand-border);
    border-left: 4px solid var(--brand-accent);
    border-radius: var(--brand-radius);
    background: var(--brand-surface);
}
.sp-action.is-done { border-left-color: var(--brand-success); }
.sp-action.is-overdue { border-left-color: var(--brand-danger); }
/* Someone else's step: still readable, visibly not yours to action. */
.sp-action--other { border-left-color: var(--brand-border); background: var(--brand-surface-alt); }

.sp-action-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}
.sp-action-target { margin-left: .5rem; font-size: 12px; color: var(--brand-text-muted); }
.sp-action-target.is-overdue { color: var(--brand-danger); font-weight: 600; }
.sp-action-who { display: block; margin-top: .15rem; }
.sp-action-desc { margin: .3rem 0 0; font-size: 13px; color: var(--brand-text-muted); white-space: pre-wrap; }
.sp-action-done { margin: .5rem 0 0; }
.sp-action-notes { margin: .3rem 0 0; font-size: 13px; white-space: pre-wrap; }

.sp-action-form { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.sp-action-form .ps-input { width: 100%; }

/* ---- feedback magic link (fb-*) ------------------------------------------ */

/* Narrower measure than the rest of the portal: this page is one short task
   arriving from an email, not part of the signed-in journey. */
.fb-panel { max-width: 42rem; margin-left: auto; margin-right: auto; }
.fb-intro { margin: -.5rem 0 1rem; }
.fb-field { border: 0; margin: 0 0 1rem; padding: 0; }
.fb-actions { justify-content: flex-end; }
.fb-smallprint { margin-top: 1.25rem; font-size: 11.5px; }

.fb-outcome { text-align: center; padding: 2.5rem 1.5rem; }
.fb-outcome-icon { font-size: 2.6rem; color: var(--brand-text-muted); }
.fb-outcome-icon.is-success { color: var(--brand-success); }
.fb-outcome-title { margin: .7rem 0 .5rem; font-size: 1.25rem; font-weight: 700; }
.fb-outcome-actions { justify-content: center; }

/* ---- my details (dt-*) --------------------------------------------------- */

.dt-rule { margin: 1rem 0; border: 0; border-top: 1px dashed var(--brand-border); }
.dt-intro { margin: 0 0 .75rem; }
.dt-note { margin: .5rem 0 0; font-size: 11.5px; }
.dt-note a { color: var(--brand-accent); }

.dt-name-form {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: flex-end;
}
.dt-name-field { flex: 1; min-width: 14rem; }
.dt-name-field .ps-input { width: 100%; }

.dt-chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.dt-agent {
    padding: .5rem 0 .5rem .6rem;
    margin-bottom: .5rem;
    border-left: 3px solid var(--brand-border);
}
/* Ongoing authority is the weightier of the two — someone can act for this tenant
   indefinitely — so it carries the stronger accent. */
.dt-agent--long { border-left-color: var(--brand-danger); }
.dt-agent--once { border-left-color: var(--brand-accent); }

.dt-agent-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
.dt-agent-what { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .2rem; font-size: 12.5px; }

/* Case photos — a thumbnail strip. Fixed-height tiles with object-fit so a
   portrait phone photo and a landscape one sit on the same line. */
.cs-photos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.cs-photos img {
    display: block;
    width: 7rem;
    height: 7rem;
    object-fit: cover;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
}
.cs-photos a:focus-visible img { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

/* Repair photos — reuses the case strip, plus a per-group heading and a small
   stage caption under visit photos. */
.rd-photo-title { margin-top: .2rem; font-size: .9rem; }
.rd-photo-title + .cs-photos { margin-bottom: 1rem; }
.cs-photos li { display: flex; flex-direction: column; gap: .2rem; }
.rd-photo-stage { font-size: 11px; text-align: center; }

.rd-photo-empty { margin: 0 0 1rem; }
.rd-photo-add {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--brand-border);
}
.rd-photo-add .ps-field { max-width: 26rem; }