/* Harmani Management. Brand from harmanirentals.com: green #115b46, Montserrat headings, Open Sans body.
   Dark is the default; the Theme button switches to light and remembers it. */

:root {
    --hm-green: #115b46;
    --hm-green-dark: #0d4636;
    --hm-green-mid: #1a7a5c;
    --hm-green-bright: #22a876;
    --font-heading: 'Montserrat', system-ui, sans-serif;
    --font-body: 'Open Sans', system-ui, sans-serif;
    --sidebar-w: 220px;
}

[data-bs-theme=dark] {
    --bs-body-bg: #0e1412;
    --bs-body-color: #e3e9e6;
    --bs-secondary-color: #9aaba3;
    --bs-tertiary-bg: #16201c;
    --bs-secondary-bg: #1b2722;
    --bs-border-color: #26352f;
    --bs-primary: #22a876;
    --bs-primary-rgb: 34, 168, 118;
    --bs-link-color: #4cc596;
    --bs-link-color-rgb: 76, 197, 150;
    --bs-link-hover-color: #7ad8b2;
    --bs-link-hover-color-rgb: 122, 216, 178;
    --hm-surface: #141c19;
    --hm-surface-2: #19241f;
    --hm-sidebar: #0b100e;
    --hm-accent: #22a876;
    --hm-accent-text: #04140d;
    --bs-table-bg: transparent;
}

[data-bs-theme=light] {
    --bs-body-bg: #f3f6f5;
    --bs-body-color: #222a27;
    --bs-primary: #115b46;
    --bs-primary-rgb: 17, 91, 70;
    --bs-link-color: #115b46;
    --bs-link-color-rgb: 17, 91, 70;
    --bs-link-hover-color: #0d4636;
    --bs-link-hover-color-rgb: 13, 70, 54;
    --hm-surface: #ffffff;
    --hm-surface-2: #f7faf9;
    --hm-sidebar: #ffffff;
    --hm-accent: #115b46;
    --hm-accent-text: #ffffff;
}

body { font-family: var(--font-body); font-size: .92rem; }
h1, h2, h3, h4, h5, h6, .brand-sub, .nav-section, .tile .num { font-family: var(--font-heading); }
h1 { font-size: 1.45rem; font-weight: 600; margin: 0; }
h2 { font-size: 1.1rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Buttons in the brand colour */
.btn-primary {
    --bs-btn-bg: var(--hm-accent); --bs-btn-border-color: var(--hm-accent); --bs-btn-color: var(--hm-accent-text);
    --bs-btn-hover-bg: var(--hm-green-mid); --bs-btn-hover-border-color: var(--hm-green-mid); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--hm-green-dark); --bs-btn-active-border-color: var(--hm-green-dark);
    --bs-btn-disabled-bg: var(--hm-accent); --bs-btn-disabled-border-color: var(--hm-accent);
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-link-color); --bs-btn-border-color: var(--hm-accent);
    --bs-btn-hover-bg: var(--hm-accent); --bs-btn-hover-border-color: var(--hm-accent); --bs-btn-hover-color: var(--hm-accent-text);
    --bs-btn-active-bg: var(--hm-green-dark); --bs-btn-active-border-color: var(--hm-green-dark);
}
.form-check-input:checked { background-color: var(--hm-accent); border-color: var(--hm-accent); }
.form-control:focus, .form-select:focus { border-color: var(--hm-green-mid); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }

/* App shell */
body.app { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar-w); background: var(--hm-sidebar); border-right: 1px solid var(--bs-border-color);
    display: flex; flex-direction: column;
}
@media (min-width: 992px) {
    .sidebar { position: sticky; top: 0; height: 100vh; flex-shrink: 0; }
}
.sidebar-brand { display: flex; align-items: center; gap: .5rem; padding: 1rem 1rem .75rem; }
.brand-link { display: inline-flex; flex-direction: column; gap: .2rem; }
.brand-link:hover { text-decoration: none; }
.logo { height: 26px; width: auto; }
[data-bs-theme=dark] .logo-light, [data-bs-theme=light] .logo-dark { display: none; }
.brand-sub { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bs-secondary-color); }
.sidebar-nav { display: flex; flex-direction: column; padding: .25rem .5rem; overflow-y: auto; flex: 1; }
.sidebar-nav .nav-item {
    color: var(--bs-body-color); padding: .45rem .75rem; border-radius: .4rem; margin-bottom: 1px; font-weight: 500;
}
.sidebar-nav .nav-item:hover { background: var(--bs-secondary-bg); text-decoration: none; }
.sidebar-nav .nav-item.active { background: rgba(var(--bs-primary-rgb), .16); color: var(--bs-link-color); font-weight: 600; }
.sidebar-nav .nav-item.sub { padding-left: 1.6rem; font-size: .85rem; }
.nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--bs-secondary-color); padding: 1rem .75rem .35rem; }
.sidebar-foot { padding: .75rem 1rem; font-size: .75rem; color: var(--bs-secondary-color); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    display: flex; align-items: center; gap: .75rem; padding: .6rem 1.25rem; border-bottom: 1px solid var(--bs-border-color);
    background: var(--hm-surface); position: sticky; top: 0; z-index: 1020;
}
.topsearch { flex: 1; max-width: 520px; }
.topbar-actions { display: flex; gap: .5rem; align-items: center; margin-left: auto; }
.content { padding: 1.25rem; max-width: 1600px; width: 100%; }
.bare-content { max-width: 440px; margin: 8vh auto; padding: 1rem; }

/* Page furniture */
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.page-head .actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.page-head .sub { color: var(--bs-secondary-color); font-size: .85rem; width: 100%; margin-top: -.5rem; }
.crumbs { font-size: .8rem; color: var(--bs-secondary-color); margin-bottom: .35rem; }
.crumbs a { color: var(--bs-secondary-color); }

.card { background: var(--hm-surface); border-color: var(--bs-border-color); }
.card-header { background: var(--hm-surface-2); border-color: var(--bs-border-color); font-family: var(--font-heading); font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
.card-header .ms-auto { font-family: var(--font-body); font-weight: 400; }
.section { margin-bottom: 1.25rem; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: .75rem; }
.filters .form-control, .filters .form-select { width: auto; min-width: 140px; }
.filters .grow { flex: 1; min-width: 200px; }

.table { --bs-table-bg: transparent; margin-bottom: 0; font-size: .87rem; }
.table > :not(caption) > * > * { padding: .45rem .6rem; border-color: var(--bs-border-color); }
.table thead th { font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); white-space: nowrap; }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .07); }
.table .num, .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
tr.dim td { opacity: .6; }

dl.facts { display: grid; grid-template-columns: minmax(7.5rem, max-content) 1fr; gap: .3rem 1rem; margin: 0; }
dl.facts dt { font-weight: 600; color: var(--bs-secondary-color); font-size: .82rem; }
dl.facts dd { margin: 0; }
.muted { color: var(--bs-secondary-color); }
.small-note { font-size: .8rem; color: var(--bs-secondary-color); }
.pre { white-space: pre-wrap; }

/* Status chips */
.chip { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.st-occupied { background: rgba(34, 168, 118, .15); color: #2fbf87; border-color: rgba(34, 168, 118, .35); }
.st-vacant { background: rgba(229, 83, 75, .14); color: #ef6b63; border-color: rgba(229, 83, 75, .35); }
.st-notice { background: rgba(240, 160, 50, .15); color: #f0a032; border-color: rgba(240, 160, 50, .35); }
.st-rented { background: rgba(80, 150, 240, .15); color: #6aa8f5; border-color: rgba(80, 150, 240, .35); }
.st-past { background: rgba(150, 160, 155, .14); color: var(--bs-secondary-color); border-color: rgba(150, 160, 155, .3); }
.pr-Emergency { background: #c9302c; color: #fff; }
.pr-High { background: rgba(240, 120, 50, .18); color: #f08a42; border-color: rgba(240, 120, 50, .4); }
.pr-Normal { background: rgba(150, 160, 155, .12); color: var(--bs-body-color); border-color: rgba(150, 160, 155, .3); }
.pr-Low { background: transparent; color: var(--bs-secondary-color); border-color: rgba(150, 160, 155, .3); }
.ms-New { background: rgba(80, 150, 240, .15); color: #6aa8f5; border-color: rgba(80, 150, 240, .35); }
.ms-Scheduled { background: rgba(160, 120, 240, .15); color: #b294f5; border-color: rgba(160, 120, 240, .35); }
.ms-InProgress { background: rgba(240, 160, 50, .15); color: #f0a032; border-color: rgba(240, 160, 50, .35); }
.ms-OnHold { background: rgba(150, 160, 155, .14); color: var(--bs-secondary-color); border-color: rgba(150, 160, 155, .3); }
.ms-Completed { background: rgba(34, 168, 118, .15); color: #2fbf87; border-color: rgba(34, 168, 118, .35); }
.ms-Cancelled { background: transparent; color: var(--bs-secondary-color); border-color: rgba(150, 160, 155, .3); text-decoration: line-through; }
.flag { background: rgba(229, 83, 75, .14); color: #ef6b63; border-color: rgba(229, 83, 75, .35); }
[data-bs-theme=light] .st-occupied, [data-bs-theme=light] .ms-Completed { color: #157a55; }
[data-bs-theme=light] .st-vacant, [data-bs-theme=light] .flag { color: #b8322b; }
[data-bs-theme=light] .st-notice, [data-bs-theme=light] .ms-InProgress { color: #9a5d00; }
[data-bs-theme=light] .st-rented, [data-bs-theme=light] .ms-New { color: #1d5fb8; }
[data-bs-theme=light] .ms-Scheduled { color: #6a3fc1; }
[data-bs-theme=light] .pr-High { color: #a94c0c; }

/* Dashboard tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.tile { background: var(--hm-surface); border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .8rem 1rem; color: var(--bs-body-color); display: block; }
a.tile:hover { border-color: var(--hm-accent); text-decoration: none; }
.tile .num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.tile .lbl { font-size: .8rem; color: var(--bs-secondary-color); }
.tile.warn .num { color: #f0a032; }
.tile.bad .num { color: #ef6b63; }

/* Tabs on record pages */
.nav-tabs { --bs-nav-tabs-border-color: var(--bs-border-color); margin-bottom: 1rem; }
.nav-tabs .nav-link { color: var(--bs-secondary-color); font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--bs-body-color); background: var(--hm-surface); border-color: var(--bs-border-color) var(--bs-border-color) var(--hm-surface); }

.activity { list-style: none; padding: 0; margin: 0; }
.activity li { padding: .45rem 0; border-bottom: 1px solid var(--bs-border-color); font-size: .85rem; }
.activity li:last-child { border-bottom: 0; }
.activity .when { color: var(--bs-secondary-color); font-size: .75rem; }
.activity details summary { cursor: pointer; color: var(--bs-secondary-color); font-size: .75rem; }

.thumbs { display: flex; flex-wrap: wrap; gap: .5rem; }
.thumbs img { height: 90px; width: auto; border-radius: .35rem; border: 1px solid var(--bs-border-color); object-fit: cover; }

/* Maintenance worker view: big touch targets */
.job-card { background: var(--hm-surface); border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .9rem 1rem; margin-bottom: .75rem; }
.job-card .where { font-family: var(--font-heading); font-weight: 600; }
.job-card .btn { min-height: 2.5rem; }

.form-section { font-family: var(--font-heading); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); margin: 1.25rem 0 .5rem; }
.required::after { content: " *"; color: #ef6b63; }
.grid-edit input { min-width: 70px; }
.modal-content { background: var(--hm-surface); }

/* Small text buttons (Make main, Delete...) look like the links beside them. */
.btn-link.small-note, .btn-link.p-0 { text-decoration: none; vertical-align: baseline; }

/* Facts with no value are hidden rather than shown blank. */
dl.facts dd:empty, dl.facts dt:has(+ dd:empty) { display: none; }

/* Dates, phones and money never break across lines. */
.nowrap, .table td.num, .table th.num { white-space: nowrap; }
.table td.wrap { white-space: normal; min-width: 14rem; }

.topbar .user-btn { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }

.getting-started ol { padding-left: 1.2rem; margin: 0; }
.getting-started li { margin-bottom: .5rem; }

/* ---------------------------------------------------------------- phones and small tablets */
@media (max-width: 767.98px) {
    body { font-size: .95rem; }
    .content { padding: .85rem .75rem 2rem; }
    .topbar { gap: .5rem; padding: .5rem .75rem; }
    .topsearch { max-width: none; }
    .topbar .user-btn { max-width: 7rem; }
    h1 { font-size: 1.25rem; }
    .page-head { gap: .5rem; }
    .page-head .actions { margin-left: 0; width: 100%; }
    .page-head .sub { margin-top: 0; }
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-bottom: .9rem; }
    .tile { padding: .45rem .65rem; display: flex; align-items: center; gap: .55rem; }
    .tile .num { font-size: 1.15rem; min-width: 1.8rem; text-align: left !important; }
    .tile .lbl { font-size: .75rem; line-height: 1.15; }
    .hide-sm { display: none !important; }
    dl.facts { grid-template-columns: 8.5rem 1fr; }
    form.filters.collapsible:not(.open) > :not(.grow):not(.filters-toggle) { display: none; }
    form.filters.collapsible .filters-toggle { flex: 0 0 auto; }
    form.filters.collapsible > .grow { flex: 1 1 60%; }
    .filters > * { flex: 1 1 calc(50% - .5rem); }
    .filters .form-control, .filters .form-select { width: 100%; min-width: 0; }
    .filters .grow { flex-basis: 100%; }
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .nav-tabs .nav-link { white-space: nowrap; padding: .45rem .7rem; }
    .card-body { padding: .85rem; }
    .modal-dialog { margin: .5rem; }
    .btn { min-height: 2.25rem; }
    .btn-sm { min-height: 2rem; }
    .form-control, .form-select { font-size: 16px; } /* stops iOS zooming into fields */

    /* Lists become stacked cards: site.js copies each column heading onto its cells. */
    table.stack thead { display: none; }
    table.stack, table.stack tbody, table.stack tfoot, table.stack tr, table.stack td, table.stack th { display: block; width: 100%; }
    table.stack tr { padding: .6rem .8rem; border-bottom: 1px solid var(--bs-border-color); display: flex; flex-direction: column; }
    table.stack td.cell-title { order: -1; }
    table.stack > :not(caption) > * > * { border: 0; padding: .12rem 0; }
    table.stack td { position: relative; text-align: left !important; white-space: normal !important; min-width: 0 !important; }
    table.stack td[data-label] { padding-left: 38% !important; min-height: 1.4rem; }
    table.stack td[data-label]::before {
        content: attr(data-label); position: absolute; left: 0; top: .15rem; width: 35%;
        font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    table.stack td.cell-title { padding-left: 0 !important; font-weight: 600; font-size: 1rem; }
    table.stack td.cell-title::before { display: none; }
    table.stack td:empty { display: none; }
    table.stack tr:hover > * { background: transparent; }
}

@media print {
    .sidebar, .topbar, .no-print, .btn { display: none !important; }
    body.app { display: block; }
    .content { padding: 0; }
}

/* Banking: the month picker, money out, the next-steps list. */
.month-nav { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.month-nav .form-select { max-width: 16rem; }
.table td.money-out { color: var(--bs-secondary-color); }
.bank-desc { word-break: break-word; }
.next-steps { padding-left: 1.2rem; }
.next-steps li { margin-bottom: .5rem; }
.bank-lines td.actions-cell { white-space: nowrap; }
@media (max-width: 767.98px) {
    .month-nav > * { flex: 0 1 auto; }
    .tile.money { flex-direction: column; align-items: flex-start; gap: 0; }
    .tile.money .num { font-size: 1rem; }
    .month-nav .form-select { flex: 1 1 40%; max-width: none; }
    .bank-lines td.actions-cell { white-space: normal; }
    .bank-lines td.actions-cell .btn { margin-top: .25rem; }
}

/* Address picker (site.js): suggestions under the street field, and the list's status below it. */
.address-menu {
    position: absolute; z-index: 1060; left: 0; right: 0; top: 100%; margin-top: 2px;
    background: var(--hm-surface); border: 1px solid var(--bs-border-color); border-radius: .375rem;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .25); max-height: 20rem; overflow-y: auto;
}
.address-menu button {
    display: block; width: 100%; text-align: left; border: 0; background: none; color: inherit;
    padding: .45rem .75rem; line-height: 1.3;
}
.address-menu button.active, .address-menu button:hover { background: var(--hm-surface-2); }
.address-menu button.active { box-shadow: inset 3px 0 0 var(--hm-accent); }
.address-menu .sub { display: block; font-size: .78rem; color: var(--bs-secondary-color); }
.address-menu .credit { font-size: .72rem; color: var(--bs-secondary-color); padding: .3rem .75rem; border-top: 1px solid var(--bs-border-color); }
.address-status { margin-top: .35rem; font-size: .82rem; color: var(--bs-secondary-color); }
.address-status.busy { color: var(--bs-body-color); background: var(--hm-surface-2); border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .35rem .6rem; }
.address-status.warn { color: var(--bs-warning-text-emphasis); }
.address-status .spinner-border { width: .8rem; height: .8rem; border-width: .14em; margin-right: .35rem; vertical-align: -.1em; }

/* Website listings: photo grid (drag to reorder, site.js), QR previews, the listing's HTML text. */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.photo-card { background: var(--hm-surface); border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .5rem; cursor: grab; }
.photo-card.dragging { opacity: .4; }
.photo-card.drop-before { box-shadow: -3px 0 0 var(--hm-accent); }
.photo-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .35rem; display: block; }
.photo-meta { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; font-size: .8rem; }
.photo-alt .form-control { font-size: .78rem; }
.qr-preview { width: 160px; height: 160px; display: block; margin-bottom: .5rem; background: #fff; border-radius: .35rem; }
.listing-text h3 { font-size: .9rem; margin-top: .75rem; }
.listing-text ul { padding-left: 1.2rem; margin-bottom: .5rem; }
.tox-tinymce { border-radius: .375rem !important; }

/* TinyMCE (website listing text) in the app's dark colours rather than its own navy skin. */
[data-bs-theme=dark] .tox.tox-tinymce { border-color: var(--bs-border-color); }
[data-bs-theme=dark] .tox:not(.tox-tinymce-inline) .tox-editor-header,
[data-bs-theme=dark] .tox .tox-toolbar, [data-bs-theme=dark] .tox .tox-toolbar__primary,
[data-bs-theme=dark] .tox .tox-toolbar__overflow, [data-bs-theme=dark] .tox .tox-statusbar { background-color: var(--hm-surface-2); border-color: var(--bs-border-color); }
[data-bs-theme=dark] .tox .tox-edit-area__iframe { background-color: var(--bs-body-bg); }
[data-bs-theme=dark] .tox .tox-tbtn, [data-bs-theme=dark] .tox .tox-statusbar a, [data-bs-theme=dark] .tox .tox-statusbar__path-item { color: var(--bs-body-color); }
[data-bs-theme=dark] .tox .tox-tbtn svg { fill: var(--bs-body-color); }
[data-bs-theme=dark] .tox .tox-tbtn:hover, [data-bs-theme=dark] .tox .tox-tbtn--enabled, [data-bs-theme=dark] .tox .tox-tbtn--enabled:hover { background-color: var(--bs-secondary-bg); }
[data-bs-theme=dark] .tox .tox-tbtn--select, [data-bs-theme=dark] .tox .tox-tbtn--bespoke { background-color: var(--bs-body-bg); }
[data-bs-theme=dark] .tox .tox-menu, [data-bs-theme=dark] .tox .tox-collection--list, [data-bs-theme=dark] .tox .tox-dialog,
[data-bs-theme=dark] .tox .tox-dialog__header, [data-bs-theme=dark] .tox .tox-dialog__footer { background-color: var(--hm-surface); border-color: var(--bs-border-color); }
[data-bs-theme=dark] .tox .tox-collection__item--active { background-color: var(--bs-secondary-bg); }

/* Two-factor sign-in (2026-11-09) ------------------------------------------------------------------------------ */
/* The phone menu's account section (My account, Passkeys, Sign out), set apart by a rule. */
.nav-account { margin-top: .75rem; border-top: 1px solid var(--bs-border-color); padding-top: .25rem; }
.sidebar-nav .nav-logout { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; }
/* "Sign in with a passkey" above the password form, and the line between them. */
.passkey-signin { margin-bottom: 1rem; }
.passkey-divider { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 0; color: var(--bs-secondary-color); font-size: .8rem; }
.passkey-divider::before, .passkey-divider::after { content: ""; flex: 1; border-top: 1px solid var(--bs-border-color); }
/* My account > Passkeys: one row per passkey; the actions wrap under the name on a phone. */
.pk-list .pk-row { padding: .75rem 0; border-top: 1px solid var(--bs-border-color); }
.pk-list .pk-row:first-child { border-top: 0; padding-top: 0; }
.pk-list .pk-name { font-weight: 600; }
.pk-list .pk-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.account-links .list-group-item { background: var(--hm-surface); }
/* Two-step sign-in pages: the code box, the other ways under it, the authenticator QR and the backup codes. */
.code-input { font-size: 1.4rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.second-step-other { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.second-step-other .btn-link { padding-left: 0; }
.tf-list .list-group-item, .card .tf-qr { background: var(--hm-surface); }
.tf-qr { background: #fff; padding: 8px; border-radius: .4rem; }
.backup-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .4rem; font-size: 1.05rem; }
@media print { .sidebar, .topbar, .btn { display: none !important; } }
/* "Protect your account": four large, solid choices that stack at phone width. */
.pa-choices { display: grid; gap: .6rem; }
.pa-choice { display: block; padding: 1rem 1.1rem; border: 1px solid var(--bs-border-color); border-radius: .6rem; background: var(--hm-surface); color: var(--bs-body-color); text-decoration: none; }
.pa-choice:hover { border-color: var(--hm-accent); text-decoration: none; }
.pa-choice.pa-best { border-left: 4px solid var(--hm-accent); }
/* "Sign in faster on this device" (the Portal's .device-passkey-offer): solid, opaque, bordered, in the theme's own
   colours, bottom left; full width less the gutters on a phone, never taller than half the screen. */
.device-passkey-offer {
    position: fixed; left: 1rem; bottom: 1rem; z-index: 1050; width: min(26rem, calc(100vw - 2rem));
    background: var(--hm-surface); background-color: var(--hm-surface); opacity: 1; backdrop-filter: none; -webkit-backdrop-filter: none;
    color: var(--bs-body-color); border: 1px solid var(--bs-border-color); border-left: 4px solid var(--hm-accent); border-radius: .8rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45); padding: .75rem .9rem; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere;
}
.device-passkey-offer[hidden], .device-passkey-offer [hidden] { display: none; }
.device-passkey-offer .device-passkey-head { font-weight: 700; margin-bottom: .35rem; }
.device-passkey-offer .device-passkey-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.device-passkey-offer .device-passkey-status:empty { display: none; }
.device-passkey-offer .device-passkey-later-note { position: relative; padding-right: 2rem; }
.device-passkey-offer .device-passkey-later-note a { font-weight: 700; text-decoration: underline; }
.device-passkey-offer .device-passkey-note-close { position: absolute; top: 0; right: 0; }
@media (max-width: 767.98px) { .device-passkey-offer { left: 1rem; right: 1rem; bottom: 1rem; width: auto; max-height: 50vh; overflow-y: auto; } }
/* In the tenant portal the phone's tab bar runs along the bottom: the card sits above it. */
@media (max-width: 767.98px) { .portal .device-passkey-offer { bottom: calc(5rem + env(safe-area-inset-bottom)); } }