/* Mobile site styles — scoped under .m-app to avoid colliding with the
   main public site's Bootstrap 3 stylesheet. Hand-rolled, no preprocessor.
   Targets iOS Safari + modern WebKit; replicates the jQTouch panel-stack
   UX with modern flat design. */

:root {
    --m-bg: #f2f2f7;
    --m-panel-bg: #f2f2f7;
    --m-list-bg: #ffffff;
    --m-list-divider: rgba(60, 60, 67, 0.12);
    --m-text: #1c1c1e;
    --m-text-muted: #6e6e73;
    --m-text-inverse: #ffffff;
    --m-accent: #1d3a5f;
    --m-accent-hover: #2c4f7f;
    --m-toolbar-bg: var(--m-accent);
    --m-toolbar-text: var(--m-text-inverse);
    --m-chevron: rgba(60, 60, 67, 0.3);
    --m-pad-x: 16px;        /* card → viewport edge */
    --m-pad-y: 12px;
    --m-row-pad-x: 20px;    /* content → card edge (slightly more than --m-pad-x so the
                               rounded corners get breathing room around tap content) */
    --m-row-pad-y: 12px;
    --m-list-radius: 10px;
    --m-row-height: 44px;
    --m-toolbar-height: 44px;
}

.m-app, .m-app * { box-sizing: border-box; }
.m-app {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.4;
    color: var(--m-text);
    background: var(--m-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    min-height: 100vh;
    min-height: 100dvh;
}
/* :where() drops this reset's specificity to (0,1,0) — same as a single class —
   so component-level overrides like .m-list { padding: ... } actually win on cascade order. */
.m-app :where(ul) { margin: 0; padding: 0; list-style: none; }
.m-app a { color: inherit; text-decoration: none; }
.m-app h1, .m-app h2, .m-app h3 { margin: 0; font-weight: 600; }

/* Panel = a full-screen "page" in the drill-down stack */
.m-panel {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--m-panel-bg);
}

/* Toolbar with optional back button + centered title.
   3-column grid: left action zone | title | right action zone. The 1fr left/right columns
   are equal width (iOS pattern), so the title in the auto-sized middle column stays
   visually centered relative to the FULL toolbar width whether or not either gutter has an
   action button. Long titles ellipsize within the remaining middle column space. */
.m-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(70px, 1fr) minmax(0, auto) minmax(70px, 1fr);
    align-items: center;
    height: calc(var(--m-toolbar-height) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) var(--m-pad-x) 0;
    background: var(--m-toolbar-bg);
    color: var(--m-toolbar-text);
}
.m-toolbar > h1 {
    grid-column: 2;
    min-width: 0; /* lets the title shrink below its content width so ellipsis kicks in */
    font-size: 17px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-back {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 8px 0 0;
    background: transparent;
    border: 0;
    color: var(--m-toolbar-text);
    font: inherit;
    font-size: 16px;
    cursor: pointer;
}
.m-back::before {
    content: "";
    width: 11px;
    height: 11px;
    margin-right: 6px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

/* Group title (above a list, iOS-style uppercase label).
   Padding-left aligns with row content (outer margin + inner padding) so the header
   sits directly above the leading edge of the rows below it. */
.m-section-title {
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--m-text-muted);
    padding: 24px var(--m-row-pad-x) 8px calc(var(--m-pad-x) + var(--m-row-pad-x));
}

/* Rounded list. The 4px vertical card-padding keeps the first/last rows out of the
   rounded-corner zone so the chevron doesn't crowd the curve. Middle rows stay flush
   with their dividers — only the visible end caps gain breathing room. */
.m-list {
    background: var(--m-list-bg);
    margin: 0 var(--m-pad-x);
    padding: 4px 0;
    border-radius: var(--m-list-radius);
    overflow: hidden;
}
/* When a list follows the toolbar directly (no section-title between), match the
   16px horizontal page padding so the gutter around the rounded card is uniform —
   keeps subtitle-less panels (single-firm shortcut, firm-member view) consistent
   with how .m-card is spaced from the toolbar elsewhere. */
.m-toolbar + .m-list { margin-top: var(--m-pad-x); }
.m-list + .m-list { margin-top: 16px; }
.m-list > li { border-bottom: 1px solid var(--m-list-divider); }
.m-list > li:last-child { border-bottom: none; }
.m-list a, .m-list button.m-list-action {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--m-row-height);
    padding: 10px var(--m-row-pad-x);
    background: transparent;
    border: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.m-list-item-content { flex: 1; min-width: 0; }
.m-list-item-title {
    display: block;
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-list-item-subtitle {
    display: block;
    font-size: 13px;
    color: var(--m-text-muted);
    margin-top: 2px;
}
.m-chevron {
    flex-shrink: 0;
    width: 8px;
    height: 14px;
    margin-left: 8px;
    color: var(--m-chevron);
}
.m-list a:active, .m-list button.m-list-action:active {
    background: rgba(0, 0, 0, 0.04);
}
.m-list-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    margin-right: 12px;
    border-radius: 50%;
    background: var(--m-list-divider);
    object-fit: cover;
}

/* Member contact card */
.m-card {
    margin: 16px var(--m-pad-x) 0;
    padding: 20px 16px 12px;
    background: var(--m-list-bg);
    border-radius: var(--m-list-radius);
}
.m-card-photo {
    display: block;
    width: 84px;
    height: 84px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--m-list-divider);
    object-fit: cover;
}
.m-card-name {
    text-align: center;
    font-size: 20px;
    margin-bottom: 4px;
}
.m-card-firm {
    text-align: center;
    font-size: 15px;
    color: var(--m-text-muted);
    margin-bottom: 4px;
}
.m-contact-row {
    display: flex;
    align-items: center;
    min-height: var(--m-row-height);
    padding: 10px 4px;
    border-bottom: 1px solid var(--m-list-divider);
}
.m-contact-row:last-child { border-bottom: none; }
.m-contact-label {
    width: 72px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--m-text-muted);
}
.m-contact-value { flex: 1; word-break: break-word; }
a.m-contact-value { color: var(--m-accent); }

/* Search form */
.m-form { padding: 0 var(--m-pad-x); margin-top: 16px; }
.m-form .m-field {
    padding: 12px var(--m-pad-x);
    margin-bottom: 12px;
    background: var(--m-list-bg);
    border-radius: var(--m-list-radius);
}
.m-form input[type="text"],
.m-form input[type="search"] {
    width: 100%;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--m-text);
    font: inherit;
}
.m-form input::placeholder { color: var(--m-text-muted); }
.m-submit {
    display: block;
    width: calc(100% - 2 * var(--m-pad-x));
    margin: 16px var(--m-pad-x);
    padding: 14px;
    background: var(--m-accent);
    border: 0;
    border-radius: var(--m-list-radius);
    color: var(--m-text-inverse);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.m-submit:active { background: var(--m-accent-hover); }
.m-submit:disabled { cursor: not-allowed; opacity: 0.7; }

/* Empty + loading */
.m-empty {
    text-align: center;
    color: var(--m-text-muted);
    padding: 32px var(--m-pad-x);
}
.m-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: m-spin 0.7s linear infinite;
    vertical-align: text-bottom;
}
@keyframes m-spin { to { transform: rotate(360deg); } }

/* Panel swap animation via the View Transitions API.
   htmx wraps each swap in document.startViewTransition() when globalViewTransitions=true
   (configured in _Layout.cshtml). Old DOM gets snapshotted as ::view-transition-old(root)
   and new DOM as ::view-transition-new(root); they cross-fade and slide between. */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 220ms;
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        animation-fill-mode: both;
    }
    ::view-transition-old(root) {
        animation-name: m-slide-out;
    }
    ::view-transition-new(root) {
        animation-name: m-slide-in;
    }
    @keyframes m-slide-out {
        to { opacity: 0; transform: translateX(-12%); }
    }
    @keyframes m-slide-in {
        from { opacity: 0; transform: translateX(12%); }
    }
}

/* Loading feedback. htmx adds .htmx-request to the element that initiated the fetch.
   For list rows the chevron disappears and the spinner takes its slot — same column,
   no layout shift. For submit buttons the spinner sits to the right of the label. */
.m-nav-spinner {
    display: none;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid var(--m-chevron);
    border-right-color: transparent;
    border-radius: 50%;
    animation: m-spin 0.7s linear infinite;
}
.m-list a.htmx-request .m-chevron { display: none; }
.m-list a.htmx-request .m-nav-spinner { display: inline-block; }

.m-btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: m-spin 0.7s linear infinite;
    vertical-align: -2px;
}
form.htmx-request .m-submit .m-btn-spinner { display: inline-block; }
form.htmx-request .m-submit { opacity: 0.85; }