/* ============================================================================
   SiteTrack design system
   Mobile-first. Design tokens plus Bootstrap 5.3 overrides. Deep blue with a
   warm amber accent for attention. Big tap targets: this is used on site.
   ============================================================================ */

:root {
    --st-bg: #f4f6f8;
    --st-surface: #ffffff;
    --st-border: #dfe4ea;
    --st-text: #172033;
    --st-text-rgb: 23, 32, 51;
    --st-text-secondary: #55627a;
    --st-text-faint: #8b95a7;
    --st-primary: #1f3a5f;
    --st-primary-strong: #16314f;
    --st-primary-soft: #e3ebf5;
    --st-accent: #d97706;
    --st-accent-soft: #fef3c7;
    --st-success: #15803d;
    --st-success-soft: #dcfce7;
    --st-danger: #b91c1c;
    --st-danger-soft: #fee2e2;
    --st-info-soft: #e0f2fe;
    --st-radius: 0.8rem;
    --st-radius-sm: 0.5rem;
    --st-shadow: 0 1px 2px rgba(23, 32, 51, 0.06);
    --st-nav-height: 4rem;

    --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-bg: var(--st-bg);
    --bs-body-color: var(--st-text);
    --bs-secondary-color: var(--st-text-secondary);
    --bs-primary: var(--st-primary);
    --bs-primary-rgb: 31, 58, 95;
    --bs-link-color: var(--st-primary);
    --bs-link-color-rgb: 31, 58, 95;
    --bs-link-hover-color: var(--st-primary-strong);
    --bs-link-hover-color-rgb: 22, 49, 79;
    --bs-border-color: var(--st-border);
    --bs-border-radius: var(--st-radius-sm);
    --bs-focus-ring-color: rgba(31, 58, 95, 0.25);
}

html, body {
    font-family: var(--bs-body-font-family);
    background: var(--st-bg);
    color: var(--st-text);
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; color: var(--st-text); }
h1:focus { outline: none; }

.btn-primary { --bs-btn-bg: var(--st-primary); --bs-btn-border-color: var(--st-primary); --bs-btn-hover-bg: var(--st-primary-strong); --bs-btn-hover-border-color: var(--st-primary-strong); --bs-btn-active-bg: var(--st-primary-strong); }
.btn-outline-primary { --bs-btn-color: var(--st-primary); --bs-btn-border-color: var(--st-primary); --bs-btn-hover-bg: var(--st-primary); --bs-btn-hover-border-color: var(--st-primary); --bs-btn-active-bg: var(--st-primary); }
.btn { min-height: 2.75rem; border-radius: var(--st-radius-sm); font-weight: 600; }
.btn-sm { min-height: 2.25rem; }
.btn-link { text-decoration: none; }
.form-control, .form-select { min-height: 2.75rem; border-radius: var(--st-radius-sm); border-color: var(--st-border); }
.form-select-sm, .form-control-sm { min-height: 2.25rem; }
.form-label { font-size: 0.85rem; font-weight: 600; color: var(--st-text-secondary); margin-bottom: 0.3rem; }

/* ---- App shell ---------------------------------------------------------- */

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(var(--st-nav-height) + env(safe-area-inset-bottom));
}

.app-top { position: sticky; top: 0; z-index: 20; }

.app-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    padding-top: calc(0.6rem + env(safe-area-inset-top));
    background: var(--st-primary);
    color: #fff;
}

.brand { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; font-weight: 700; }
.brand-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.6rem; background: rgba(255, 255, 255, 0.15); }
.brand-mark .icon svg { width: 1.25rem; height: 1.25rem; }
.brand-mark-lg { width: 3.25rem; height: 3.25rem; background: var(--st-primary-soft); color: var(--st-primary); margin-bottom: 1rem; border-radius: 1rem; }
.brand-mark-lg .icon svg { width: 2rem; height: 2rem; }
.app-project { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; font-size: 0.95rem; }
.app-account { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.app-account-name { font-size: 0.85rem; font-weight: 600; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-account-role { font-size: 0.72rem; opacity: 0.8; }

/* View as: a Homeowner's switch to another Member's view, and the strip that says it is on. */
.app-view-as { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; margin: 0; line-height: 1.15; }
.app-view-as-label { font-size: 0.68rem; opacity: 0.8; }
.app-view-as-select {
    max-width: 9rem;
    padding: 0.2rem 1.5rem 0.2rem 0.5rem;
    border: 0;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 6 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.4rem center / 0.75rem;
    appearance: none;
    text-overflow: ellipsis;
    cursor: pointer;
}
.app-view-as-select.is-viewing { background-color: var(--st-accent); }
.app-view-as-select option { color: var(--st-text); background: var(--st-surface); }
.view-as-banner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 1rem; font-size: 0.85rem; background: var(--st-accent-soft); border-bottom: 1px solid var(--st-accent); }
.view-as-banner .btn { flex: none; background: var(--st-surface); }
.view-as-banner .btn:hover { background: var(--st-primary); }

.app-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    display: flex;
    justify-content: space-around;
    height: calc(var(--st-nav-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--st-surface);
    border-top: 1px solid var(--st-border);
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--st-text-secondary);
    text-decoration: none;
}
.nav-item .icon svg { width: 1.4rem; height: 1.4rem; }
.nav-item.active { color: var(--st-primary); }
.nav-item-logout { color: var(--st-text-faint); }
.nav-desktop-only { display: none; }

/* Sections, their headings and the longer labels belong to the sidebar. On a phone the groups
   dissolve, leaving their items as direct children of the tab bar. */
.nav-group { display: contents; }
.nav-heading, .nav-full { display: none; }

.app-main { flex: 1; width: 100%; max-width: 64rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; }

@media (min-width: 992px) {
    .app-shell { padding-bottom: 0; padding-left: 14rem; }
    .app-nav {
        top: 0; bottom: 0; right: auto;
        width: 14rem; height: auto;
        flex-direction: column;
        justify-content: flex-start;
        padding: 0.6rem 0.75rem 1rem;
        overflow-y: auto;
        border-top: none;
        border-right: 1px solid var(--st-border);
    }
    .nav-group { display: flex; flex: 0 0 auto; flex-direction: column; margin-top: 0.9rem; }
    .nav-heading { display: block; padding: 0 0.9rem 0.25rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--st-text-secondary); }
    .nav-item { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 0.75rem; padding: 0.4rem 0.9rem; border-radius: var(--st-radius-sm); font-size: 0.95rem; }
    .nav-item .icon svg { width: 1.2rem; height: 1.2rem; }
    .nav-item.active { background: var(--st-primary-soft); }
    .nav-group:last-of-type { margin-bottom: 0.9rem; }
    .nav-item-logout { margin-top: auto; }
    .nav-desktop-only { display: flex; }
    .nav-mobile-only, .nav-short { display: none; }
    .nav-full { display: inline; }
    .app-top { z-index: 30; }
    .app-view-as-select { max-width: 16rem; }
    .app-main { padding: 2rem 2rem 3rem; }
}

/* A wide touch screen, such as a tablet on its side, keeps the big tap targets; the sidebar scrolls if it must. */
@media (min-width: 992px) and (pointer: coarse) {
    .nav-item { padding-top: 0.65rem; padding-bottom: 0.65rem; }
}

.app-version { position: fixed; right: 0.5rem; bottom: 0.15rem; font-size: 0.65rem; color: var(--st-text-faint); pointer-events: none; z-index: 40; }

/* ---- Bare pages: sign-in, no access, invitation result ------------------ */

.bare { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.bare-card { width: 100%; max-width: 30rem; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-radius); padding: 2rem 1.5rem; box-shadow: var(--st-shadow); }
.signin .page-title { margin-bottom: 0.5rem; }

/* ---- Page structure ----------------------------------------------------- */

.page-header { margin-bottom: 1.25rem; }
.page-title { font-size: 1.5rem; margin-bottom: 0.25rem; }
.page-lead { color: var(--st-text-secondary); margin-bottom: 0.5rem; }
.back-link { display: inline-block; font-size: 0.85rem; font-weight: 600; text-decoration: none; margin-bottom: 0.4rem; }
.preserve-lines { white-space: pre-line; }

.card {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    padding: 1.1rem 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--st-shadow);
}
.card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 1.05rem; margin-bottom: 0.85rem; }
.card-title .icon svg { width: 1.1rem; height: 1.1rem; color: var(--st-accent); }
.card-title-note { font-weight: 400; font-size: 0.85rem; color: var(--st-text-secondary); }
.card-subtitle { font-size: 0.9rem; color: var(--st-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin: 1.5rem 0 0.75rem; }

.icon { display: inline-flex; vertical-align: middle; }
.icon svg { width: 1rem; height: 1rem; }

/* ---- Stats -------------------------------------------------------------- */

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(5, 1fr); } }
.stat { display: flex; flex-direction: column; padding: 0.9rem 1rem; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-radius); text-decoration: none; color: inherit; box-shadow: var(--st-shadow); }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-of { font-size: 1rem; font-weight: 500; color: var(--st-text-faint); }
.stat-label { font-size: 0.78rem; color: var(--st-text-secondary); }
.stat-warn .stat-value { color: var(--st-danger); }
.stat-money { grid-column: span 2; }
@media (min-width: 768px) { .stat-money { grid-column: auto; } }

/* ---- Lists -------------------------------------------------------------- */

.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain > li { padding: 0.5rem 0; border-top: 1px solid var(--st-border); } /* direct children only: a row may hold its own list, such as tag chips in an edit form */
.list-plain > li:first-child { border-top: none; padding-top: 0; }
.list-plain a { text-decoration: none; font-weight: 600; }

.wbs { display: inline-block; min-width: 2.6rem; font-variant-numeric: tabular-nums; font-size: 0.8rem; font-weight: 700; color: var(--st-primary); background: var(--st-primary-soft); border-radius: 0.4rem; padding: 0.1rem 0.4rem; text-align: center; }
.wbs-lg { font-size: 1rem; vertical-align: middle; margin-right: 0.35rem; }

/* Previous and next package either side of the title. The arrows sit at the top of the row so they stay put
   under the pointer from one package to the next, however many lines the title wraps to. */
.wp-nav { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.4rem; }
.wp-nav .page-title { flex: 1; min-width: 0; margin: 0; padding-top: 0.45rem; text-align: center; }
.wp-nav-arrow { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: var(--st-primary); background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-radius-sm); box-shadow: var(--st-shadow); }
.wp-nav-arrow:active { background: var(--st-primary-soft); }
.wp-nav-arrow .icon svg { width: 1.25rem; height: 1.25rem; }
.wp-nav-end { visibility: hidden; }
@media (hover: hover) {
    .wp-nav-arrow:hover { background: var(--st-primary-soft); }
    .wp-nav-arrow[data-tip]:hover::after, .wp-nav-arrow[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; top: calc(100% + 0.4rem); z-index: 10; width: max-content; max-width: min(22rem, 70vw); padding: 0.35rem 0.6rem; font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: #fff; background: var(--st-text); border-radius: var(--st-radius-sm); box-shadow: 0 4px 12px rgba(23, 32, 51, 0.18); pointer-events: none; }
    .wp-nav-prev::after { left: 0; }
    .wp-nav-next::after { right: 0; }
}

.wp-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.wp-list li + li { margin-top: 0.5rem; }
.wp-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.9rem; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-radius); text-decoration: none; color: inherit; box-shadow: var(--st-shadow); }
.wp-row:active { background: var(--st-primary-soft); }
.wp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wp-name { font-weight: 600; }
.wp-meta { font-size: 0.78rem; color: var(--st-text-secondary); }
.wp-money { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--st-text-secondary); white-space: nowrap; }
.wp-row .icon { color: var(--st-text-faint); }
.card .wp-list { margin-bottom: 0; }
.card .wp-row { box-shadow: none; }

.filter-row { display: flex; gap: 0.4rem; overflow-x: auto; margin-bottom: 1rem; padding-bottom: 0.25rem; }
.filter { flex: 0 0 auto; border: 1px solid var(--st-border); background: var(--st-surface); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--st-text-secondary); min-height: 2.25rem; }
.filter.active { background: var(--st-primary); border-color: var(--st-primary); color: #fff; }
.filter .count { opacity: 0.7; margin-left: 0.25rem; }

.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-row { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.75rem; align-items: center; padding: 0.65rem 0; border-top: 1px solid var(--st-border); }
.activity-row:first-child { border-top: none; }
.activity-main { display: flex; flex-direction: column; min-width: 0; }
.activity-name { font-weight: 600; }
.activity-desc { font-size: 0.78rem; color: var(--st-text-secondary); }
.activity-status { grid-column: 1 / -1; }
.activity-letter { min-width: 1.8rem; font-size: 0.85rem; font-weight: 700; color: var(--st-text-secondary); text-align: right; }
.activity-na .activity-name, .activity-na .activity-desc, .activity-na .activity-letter { opacity: 0.5; }
@media (min-width: 768px) {
    .activity-row { grid-template-columns: auto 1fr 12rem; }
    .activity-status { grid-column: auto; }
}

.member-row { display: flex; align-items: center; gap: 0.75rem; }
.member-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.badge-role { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--st-primary-soft); color: var(--st-primary); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; }
.kv dt { font-weight: 600; color: var(--st-text-secondary); font-size: 0.9rem; }
.kv dd { margin: 0; }

.feed { list-style: none; padding: 0; margin: 0; }
.feed-item { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; padding: 0.45rem 0; border-top: 1px solid var(--st-border); font-size: 0.92rem; }
.feed-item:first-child { border-top: none; padding-top: 0; }
.feed-when { color: var(--st-text-faint); font-size: 0.8rem; padding-top: 0.15rem; }

/* ---- Status badges ------------------------------------------------------ */

.badge-status { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; text-transform: capitalize; }
.status-not-started { background: #eef1f5; color: var(--st-text-secondary); }
.status-planned { background: var(--st-info-soft); color: #075985; }
.status-in-progress { background: var(--st-accent-soft); color: #92400e; }
.status-blocked { background: var(--st-danger-soft); color: var(--st-danger); }
.status-complete { background: var(--st-success-soft); color: var(--st-success); }
.status-not-applicable { background: #eef1f5; color: var(--st-text-faint); }
select.activity-status.status-complete { border-color: var(--st-success); }
select.activity-status.status-in-progress { border-color: var(--st-accent); }

/* ---- Blazor chrome ------------------------------------------------------ */

#blazor-error-ui {
    color-scheme: light only;
    background: var(--st-accent-soft);
    bottom: 0; left: 0; right: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ---- Quotes ------------------------------------------------------------- */

.money-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.money-cell { padding: 0.75rem; border-radius: var(--st-radius-sm); background: var(--st-bg); }
.money-cell-label { display: block; font-size: 0.75rem; color: var(--st-text-secondary); }
.money-cell-value { display: block; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.money-cell-charge { background: var(--st-primary-soft); }
.money-preview { font-variant-numeric: tabular-nums; }
.quote-row .wp-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem 1rem; }
@media (min-width: 768px) { .check-grid { grid-template-columns: repeat(3, 1fr); } }
.check-grid label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; min-height: 2rem; }
.doc-list { list-style: none; padding: 0; margin: 0; }
.doc-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--st-border); }
.doc-row:first-child { border-top: none; }
.doc-row .icon { color: var(--st-text-faint); }
.doc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.doc-thumb { display: block; width: 3rem; height: 3rem; object-fit: cover; border-radius: 0.4rem; border: 1px solid var(--st-border); }
.doc-row .photo-open { flex: none; }
.upload-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.upload-row input[type="file"] { max-width: 100%; }
.alloc-row { display: grid; grid-template-columns: 1fr 8rem auto; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.more-list { list-style: none; padding: 0; margin: 0; }
.more-list a { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 0; border-top: 1px solid var(--st-border); text-decoration: none; font-weight: 600; }
.more-list li:first-child a { border-top: none; }

/* ---- Questions, replies, decisions, photos ---------------------------- */

.q-label { display: inline-block; font-size: 0.8rem; font-weight: 700; color: var(--st-primary); background: var(--st-primary-soft); border-radius: 0.4rem; padding: 0.1rem 0.45rem; white-space: nowrap; }
.q-label-snag { color: #92400e; background: var(--st-accent-soft); }
.q-waiting { font-size: 0.78rem; color: var(--st-text-secondary); }
.q-waiting-me { color: var(--st-accent); font-weight: 600; }
.thread { list-style: none; padding: 0; margin: 0; }
.thread-item { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.75rem; padding: 0.85rem 0; border-top: 1px solid var(--st-border); }
.thread-item:first-child { border-top: none; padding-top: 0; }
.thread-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--st-primary-soft); color: var(--st-primary); font-weight: 700; font-size: 0.85rem; }
.thread-avatar-builder { background: var(--st-accent-soft); color: #92400e; }
.thread-avatar-minute { background: var(--st-info-soft); color: #075985; }
.minute-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 0.4rem; background: var(--st-info-soft); color: #075985; white-space: nowrap; }
.minute-tag-draft { background: #eef1f5; color: var(--st-text-secondary); }
.thread-meta { font-size: 0.8rem; color: var(--st-text-secondary); margin-bottom: 0.2rem; }
.thread-text { white-space: pre-line; }
/* The control that opens a photo in the lightbox: a bare button around the thumbnail, so it reads
   as a button to assistive tech and as "zoom in" to the pointer. Declared before the frames that
   dress it (photo-grid, area-photo-frame) so their border and background win; the cursor needs the
   attribute selector to match the specificity of Bootstrap's own button cursor rule. */
.photo-open { padding: 0; border: none; background: none; line-height: 0; }
.photo-open[type="button"] { cursor: zoom-in; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-top: 0.5rem; }
@media (min-width: 768px) { .photo-grid { grid-template-columns: repeat(5, 1fr); } }
.photo-grid a, .photo-grid .photo-open { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--st-radius-sm); border: 1px solid var(--st-border); background: var(--st-bg); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid .photo-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; font-size: 0.7rem; padding: 0.4rem; text-align: center; color: var(--st-text-secondary); text-decoration: none; word-break: break-word; }
.photo-remove { font-size: 0.75rem; }
.picker { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.picker-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.4rem; }
.picker-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.picker-pending { font-size: 0.8rem; color: var(--st-text-secondary); }
.decision-box { border-left: 4px solid var(--st-success); background: var(--st-success-soft); border-radius: var(--st-radius-sm); padding: 0.75rem 0.9rem; }
.decision-superseded { opacity: 0.65; }
.finishes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; font-size: 0.9rem; }
.segmented { display: inline-flex; border: 1px solid var(--st-border); border-radius: 999px; overflow: hidden; }
.segmented button { border: none; background: var(--st-surface); padding: 0.45rem 0.9rem; font-weight: 600; font-size: 0.85rem; color: var(--st-text-secondary); min-height: 2.5rem; }
.segmented button.active { background: var(--st-primary); color: #fff; }

/* ---- Invoices, lines, payments ---------------------------------------- */

.flag { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--st-accent-soft); color: #92400e; white-space: nowrap; }
.flag-over { background: var(--st-danger-soft, #fee2e2); color: var(--st-danger); }
.flag-list { list-style: none; padding: 0; margin: 0; }
.flag-list li { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.35rem 0; }
.money-box-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .money-box-4 { grid-template-columns: repeat(4, 1fr); } }
.money-cell-warn { background: var(--st-accent-soft); }
.money-cell-danger { background: var(--st-danger-soft, #fee2e2); }
.line-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.line-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--st-text-secondary); font-weight: 600; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--st-border); }
.line-table td { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--st-border); vertical-align: top; }
.line-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.line-table tfoot td { font-weight: 700; border-bottom: none; }
.line-table .line-sub { display: block; font-size: 0.78rem; color: var(--st-text-secondary); }
.table-scroll { overflow-x: auto; }
.line-editor { border: 1px solid var(--st-border); border-radius: var(--st-radius-sm); padding: 0.75rem; margin-bottom: 0.75rem; background: var(--st-bg); }
.line-editor .row { --bs-gutter-y: 0.5rem; }
.line-editor-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.line-charge { font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.25rem 0.75rem; align-items: baseline; padding: 0.5rem 0; border-top: 1px solid var(--st-border); }
.pay-row:first-child { border-top: none; }
.pay-row .pay-amount { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.pay-row .pay-amount.reversal { color: var(--st-danger); }
.pay-reversed { text-decoration: line-through; color: var(--st-text-faint); }
.money-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.money-link { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.9rem 0.5rem; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-radius); text-decoration: none; color: inherit; font-weight: 600; font-size: 0.85rem; box-shadow: var(--st-shadow); }
.money-link .icon svg { width: 1.4rem; height: 1.4rem; color: var(--st-primary); }

/* ---- Budget ------------------------------------------------------------ */

.money-cell-sub { display: block; font-size: 0.72rem; color: var(--st-text-secondary); margin-top: 0.15rem; }
.budget-table td:first-child { min-width: 13rem; }
.budget-table a { text-decoration: none; font-weight: 600; }
.budget-table .wbs { margin-right: 0.25rem; }
.row-over td { background: var(--st-danger-soft); }
.row-unpriced td { background: var(--st-accent-soft); }
.text-success { color: var(--st-success) !important; }
.money-links { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.budget-form { border-top: 1px solid var(--st-border); padding-top: 0.75rem; margin-top: 1rem; }

/* ---- Seen tracking ------------------------------------------------------ */

.badge-new { display: inline-block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 999px; background: var(--st-primary); color: #fff; white-space: nowrap; }
.stat-new .stat-value { color: var(--st-primary); }

/* ---- Search ------------------------------------------------------------- */

/* The header's search field. It is a label, so a click anywhere on it lands in the input. */
.app-search { flex: 0 1 16rem; min-width: 9rem; margin: 0 0.5rem 0 0; }
.app-search-field { display: flex; align-items: center; gap: 0.5rem; height: 2.25rem; margin: 0; padding: 0 0.75rem; border-radius: 0.6rem; background: var(--st-surface); color: var(--st-text-secondary); cursor: text; }
.app-search-field .icon svg { width: 1.1rem; height: 1.1rem; }
.app-search-field input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--st-text); font-size: 1rem; }
.app-search-field input::placeholder { color: var(--st-text-secondary); opacity: 1; }
.app-search:focus-within .app-search-field { box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35); }
@media (min-width: 1200px) { .app-search { flex-basis: 22rem; } }

/* A phone has no room for the field at rest, so it folds down to the magnifier with the input
   lying unseen over it. A tap focuses the input, and the field opens across the header. */
@media (max-width: 767px) {
    .app-search:focus-within { position: absolute; left: 1rem; right: 1rem; margin: 0; z-index: 1; }
    .app-search:not(:focus-within) { flex: none; width: 2.25rem; min-width: 0; }
    .app-search:not(:focus-within) .app-search-field { position: relative; justify-content: center; padding: 0; background: rgba(255, 255, 255, 0.12); color: inherit; cursor: pointer; }
    .app-search:not(:focus-within) .icon svg { width: 1.2rem; height: 1.2rem; }
    .app-search:not(:focus-within) input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
}
.search-form { display: flex; gap: 0.5rem; }
.search-form input { flex: 1; min-width: 0; }
.search-kind { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--st-text-faint); min-width: 4.5rem; }
.search-snippet { display: flex; flex-wrap: wrap; gap: 0 0.75rem; margin-left: 5rem; margin-top: 0.15rem; }
.search-context { color: var(--st-primary); }
@media (max-width: 767px) { .search-snippet { margin-left: 0; } }

/* ---- Activity log ------------------------------------------------------- */

.feed-day { list-style: none; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--st-text-secondary); padding: 0.9rem 0 0.25rem; border-top: 1px solid var(--st-border); }
.feed-day:first-child { padding-top: 0; border-top: none; }
.feed-full .feed-item { border-top: none; padding: 0.35rem 0; }
.feed-diff { display: block; font-size: 0.8rem; color: var(--st-text-secondary); margin-top: 0.1rem; }
.feed-arrow { color: var(--st-text-faint); margin: 0 0.35rem; }
.feed-text a { text-decoration: none; }

/* ---- Diary, Area tags, Area photos -------------------------------------- */

/* Tags on a form (the Areas a photo shows, what a Question or Decision is about): a label, the chosen
   ones as pills each with a cross, and add links that open the picker modal. */
.tag-picker { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; }
.tag-picker-label { flex-basis: 100%; font-size: 0.8rem; font-weight: 600; color: var(--st-text-secondary); }
.tag-picker-empty { font-size: 0.85rem; color: var(--st-text-faint); }
.tag-picker-actions { display: inline-flex; flex-wrap: wrap; gap: 0 1rem; }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.tag-chip { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--st-primary); background: var(--st-primary-soft); border-radius: 999px; padding: 0.2rem 0.3rem 0.2rem 0.75rem; font-size: 0.8rem; font-weight: 600; color: var(--st-primary); min-height: 2.1rem; }
.tag-remove { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border: none; border-radius: 50%; background: transparent; color: inherit; }
.tag-remove .icon svg { width: 0.9rem; height: 0.9rem; }
.tag-remove:hover, .tag-remove:focus-visible { background: var(--st-primary); color: #fff; }

/* The pick modal: Areas by floor or Work packages in WBS order over the page, each row a toggle with
   a check box, Done at the foot. One column on a phone; from tablet width up, a column per floor for
   Areas and three equal runs for Work packages. Escape or the backdrop closes it. */
.pick-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(var(--st-text-rgb), 0.55); outline: none; }
.pick-modal { display: flex; flex-direction: column; width: min(100%, 26rem); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); background: var(--st-surface); border-radius: var(--st-radius); box-shadow: 0 12px 40px rgba(var(--st-text-rgb), 0.3); }
.pick-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--st-border); }
.pick-modal-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.pick-modal-close { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: none; border-radius: 50%; background: transparent; color: var(--st-text-secondary); }
.pick-modal-close:hover, .pick-modal-close:focus-visible { background: var(--st-bg); color: var(--st-text); }
.pick-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.5rem; display: grid; gap: 0 1rem; align-items: start; }
.pick-modal-list { margin: 0; padding: 0; list-style: none; }
.pick-modal-group { padding: 0.75rem 0.6rem 0.25rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--st-text-secondary); }
.pick-modal-option { display: flex; align-items: center; gap: 0.7rem; width: 100%; min-height: 2.75rem; padding: 0.5rem 0.6rem; border: none; border-radius: var(--st-radius-sm); background: transparent; color: var(--st-text); text-align: left; }
.pick-modal-option:hover, .pick-modal-option:focus-visible { background: var(--st-bg); }
.pick-modal-option.active { color: var(--st-primary); font-weight: 600; }
.pick-modal-check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border: 1px solid var(--st-border); border-radius: 0.35rem; background: var(--st-surface); color: #fff; }
.pick-modal-check .icon svg { width: 0.95rem; height: 0.95rem; }
.pick-modal-option.active .pick-modal-check { background: var(--st-primary); border-color: var(--st-primary); }
.pick-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--st-border); }
@media (min-width: 768px) {
    .pick-modal { width: min(100%, 54rem); }
    .pick-modal-body { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 0.75rem; }
}
.photo-tile { margin: 0; min-width: 0; }
.photo-frame { position: relative; }
.photo-remove-btn { position: absolute; top: 0.3rem; right: 0.3rem; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: none; border-radius: 50%; background: rgba(23, 32, 51, 0.65); color: #fff; }
.photo-remove-btn .icon svg { width: 1rem; height: 1rem; }
.photo-remove-btn:hover, .photo-remove-btn:focus-visible { background: var(--st-danger); }
.photo-caption { display: flex; align-items: flex-start; gap: 0.3rem; margin-top: 0.25rem; font-size: 0.72rem; line-height: 1.25; color: var(--st-text-secondary); }
.photo-caption-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; word-break: break-word; }
.photo-tags { color: var(--st-primary); font-weight: 600; }
.photo-edit-btn { flex: none; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: none; border-radius: 0.4rem; background: transparent; color: var(--st-primary); }
.photo-edit-btn .icon svg { width: 0.95rem; height: 0.95rem; }
.photo-edit-btn:hover, .photo-edit-btn:focus-visible { background: var(--st-primary-soft); }
.photo-editor { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--st-border); border-radius: var(--st-radius-sm); background: var(--st-bg); }

/* A dialog of our own: Bootstrap's needs its script, which the site does not load. */
.st-modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(23, 32, 51, 0.5); }
.st-modal { display: flex; flex-direction: column; gap: 0.9rem; width: 100%; max-width: 28rem; max-height: 90vh; overflow-y: auto; padding: 1.25rem 1rem; background: var(--st-surface); border-radius: var(--st-radius); box-shadow: 0 12px 32px rgba(23, 32, 51, 0.3); }
.st-modal .card-title { font-size: 1rem; word-break: break-word; }

.area-photo-frame { display: block; width: 100%; overflow: hidden; border: 1px solid var(--st-border); border-radius: var(--st-radius-sm); background: #0f172a; }
.area-photo-frame img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }

/* Video embed: the YouTube player on a Diary entry, as wide as the card and 16:9, under the text and before the photos. */
.video-embed { width: 100%; aspect-ratio: 16 / 9; margin-top: 0.5rem; overflow: hidden; border: 1px solid var(--st-border); border-radius: var(--st-radius-sm); background: #0f172a; }
.video-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.area-photo-bar { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.6rem; }
.area-photo-arrow { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: var(--st-primary); background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-radius-sm); box-shadow: var(--st-shadow); }
.area-photo-arrow:disabled { opacity: 0.35; }
.area-photo-arrow .icon svg { width: 1.25rem; height: 1.25rem; }
.area-photo-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 0.85rem; padding-top: 0.2rem; }
.area-photo-when { font-weight: 600; }
.area-photo-caption { color: var(--st-text-secondary); }
.area-photo-count { font-size: 0.78rem; color: var(--st-text-faint); }
.area-photo-source { font-weight: 600; text-decoration: none; }

/* ---- Lightbox: a photo almost full screen over the page --------------------------------------
   Every photo on the site opens here instead of in a new tab (Lightbox.razor draws it; nothing
   else does; button.photo-open above opens it). The image fits the viewport with a thin margin and
   room for its caption; close sits top right, arrows at the sides when there is a set to step
   through. */
.lightbox-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(var(--st-text-rgb), 0.92); outline: none; }
.lightbox { margin: 0; min-width: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem); object-fit: contain; border-radius: var(--st-radius-sm); }
.lightbox-caption { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.75rem; font-size: 0.85rem; line-height: 1.3; text-align: center; color: var(--st-surface); word-break: break-word; }
.lightbox-note { color: var(--st-border); }
a.lightbox-note { text-decoration: underline; }
a.lightbox-note:hover, a.lightbox-note:focus-visible { color: var(--st-surface); }
.lightbox-close, .lightbox-arrow { position: fixed; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: none; border-radius: 50%; background: rgba(var(--st-text-rgb), 0.65); color: var(--st-surface); }
.lightbox-close { top: calc(0.75rem + env(safe-area-inset-top)); right: calc(0.75rem + env(safe-area-inset-right)); }
.lightbox-arrow { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: calc(0.5rem + env(safe-area-inset-left)); }
.lightbox-next { right: calc(0.5rem + env(safe-area-inset-right)); }
.lightbox-arrow:disabled { opacity: 0.3; }
.lightbox-close:hover, .lightbox-close:focus-visible, .lightbox-arrow:not(:disabled):hover, .lightbox-arrow:focus-visible { background: var(--st-primary); }
.lightbox-close .icon svg, .lightbox-arrow .icon svg { width: 1.4rem; height: 1.4rem; }

.markdown > :last-child { margin-bottom: 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { font-size: 1.05rem; margin: 1rem 0 0.4rem; }
.markdown h1:first-child, .markdown h2:first-child, .markdown h3:first-child { margin-top: 0; }
.markdown img { max-width: 100%; }
.markdown blockquote { border-left: 3px solid var(--st-border); padding-left: 0.75rem; color: var(--st-text-secondary); }
.markdown pre { background: var(--st-bg); padding: 0.6rem 0.75rem; border-radius: var(--st-radius-sm); font-size: 0.85rem; }
.markdown table { width: 100%; font-size: 0.9rem; margin-bottom: 1rem; }
.markdown th, .markdown td { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--st-border); text-align: left; }
.diary-entry .card-title a { text-decoration: none; }
.diary-share { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }
.diary-share label { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.9rem; min-height: 2rem; }

/* ---- Area status: a sentence with a pencil, a textarea with a save while editing -------- */
.status-row { display: flex; align-items: flex-start; gap: 0.6rem; }
.status-row .status-text, .status-row textarea { flex: 1; min-width: 0; }
.status-row .photo-edit-btn { margin-top: -0.2rem; }
/* A pencil in a card title sits in the card's top-right corner without making the title line taller,
   and keeps the pencil's own colour rather than the accent that title icons take. */
.card-title .photo-edit-btn { margin: -0.25rem 0 -0.25rem auto; }
.card-title .photo-edit-btn .icon svg { color: inherit; }

/* ---- Plans: the drawings on the Areas page, every room a link to its Area ------------------
   A figure per drawing in a grid that fits three across on a desktop and stacks on a phone. The
   SVG keeps its drawing's proportions; strokes are in screen pixels so every plan reads alike. */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem 1.5rem; align-items: start; }
.plan { margin: 0; min-width: 0; }
.plan-svg { display: block; width: 100%; height: auto; overflow: visible; }
.plan-caption { margin-top: 0.5rem; font-size: 0.78rem; font-weight: 600; color: var(--st-text-secondary); text-align: center; }
/* Walls are the outline filled dark with the rooms laid over it; the site plan's outline is the plot, light and dashed. */
.plan-walls { fill: var(--st-text-secondary); }
.plan-site { fill: var(--st-surface); stroke: var(--st-border); stroke-width: 1.5px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.plan-room { text-decoration: none; }
.plan-room polygon { fill: var(--st-bg); stroke: var(--st-border); stroke-width: 1px; vector-effect: non-scaling-stroke; transition: fill 0.1s ease; }
.plan-room-building polygon { fill: var(--st-border); }
.plan-room:hover polygon, .plan-room:focus-visible polygon { fill: var(--st-primary-soft); stroke: var(--st-primary); stroke-width: 2.5px; }
.plan-room:focus { outline: none; }
.plan-room text { font-weight: 600; fill: var(--st-text); text-anchor: middle; dominant-baseline: central; pointer-events: none; paint-order: stroke; stroke: var(--st-surface); stroke-width: 0.3em; stroke-linejoin: round; }
.plan-room:hover text, .plan-room:focus-visible text { fill: var(--st-primary); }
/* A room too small for its name shows it on hover, over whatever is around it. */
.plan-room-small text { opacity: 0; transition: opacity 0.1s ease; }
.plan-room-small:hover text, .plan-room-small:focus-visible text { opacity: 1; }
/* A room whose Area is gone stays on the plan, unlinked. */
.plan-room-unlinked polygon { fill: var(--st-surface); stroke-dasharray: 3 3; }
.plan-room-unlinked text { fill: var(--st-text-faint); }
/* A door is floor painted over the wall; its own hairline in the floor colour hides the rooms' edges across the gap. */
.plan-door { fill: var(--st-bg); stroke: var(--st-bg); stroke-width: 1.5px; vector-effect: non-scaling-stroke; pointer-events: none; }
.plan-line { fill: none; stroke: var(--st-text-secondary); stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }

/* ---- Inspiration: Boards of Pins, room by room (ADR 0007) ---------------- */

/* A Board on its Area's inspiration page: its cover (the chosen Pin's picture, else the newest Pin's), name and size. */
.board-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 768px) { .board-grid { grid-template-columns: repeat(4, 1fr); } }
.board-tile { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; text-decoration: none; color: inherit; }
.board-cover { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--st-radius-sm); border: 1px solid var(--st-border); background: var(--st-primary-soft); color: var(--st-primary); }
.board-cover img { width: 100%; height: 100%; object-fit: cover; }
.board-cover .icon svg { width: 2rem; height: 2rem; }
.board-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-count { font-size: 0.78rem; color: var(--st-text-secondary); }
.board-tile:hover .board-name, .board-tile:focus-visible .board-name { color: var(--st-primary); text-decoration: underline; }

/* A Board's canvas (BoardCanvas): Canvas.Width units across and --canvas-h units tall, drawn at any
   width, with each Pin at its place through the --x, --y, --w and --z custom properties its tile
   carries. A dotted ground says "board"; the grab cursor and the corner handle say what a drag does. */
.canvas { --canvas-w: 1200; position: relative; width: 100%; aspect-ratio: var(--canvas-w) / var(--canvas-h); overflow: hidden; border: 1px solid var(--st-border); border-radius: var(--st-radius-sm); background-color: var(--st-bg); background-image: radial-gradient(var(--st-border) 1px, transparent 1.5px); background-size: 1.5rem 1.5rem; }
.canvas-pin { position: absolute; left: calc(var(--x) / var(--canvas-w) * 100%); top: calc(var(--y) / var(--canvas-h) * 100%); width: calc(var(--w) / var(--canvas-w) * 100%); z-index: var(--z); display: block; overflow: hidden; border-radius: 0.4rem; background: var(--st-surface); box-shadow: 0 1px 3px rgba(var(--st-text-rgb), 0.25); touch-action: pan-y pinch-zoom; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.canvas-pin img { display: block; width: 100%; height: auto; pointer-events: none; }
.canvas-pin:hover, .canvas-pin:focus-visible { box-shadow: 0 0 0 2px var(--st-primary), 0 4px 12px rgba(var(--st-text-rgb), 0.25); }
.canvas-pin.is-dragging { z-index: 10000; cursor: grabbing; transform: scale(1.02); box-shadow: 0 12px 32px rgba(var(--st-text-rgb), 0.35); }
.canvas-pin-badge { position: absolute; top: 0.3rem; left: 0.3rem; display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: rgba(var(--st-text-rgb), 0.65); color: #fff; font-size: 0.7rem; font-weight: 700; }
.canvas-pin-badge .icon svg { width: 0.8rem; height: 0.8rem; }
.canvas-pin-resize { position: absolute; right: 0; bottom: 0; width: 1.5rem; height: 1.5rem; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 55%, rgba(255, 255, 255, 0.95) 55%); border-top-left-radius: 0.3rem; }
/* The cover's mark: a filled bookmark at the top right of the tile that stands for the Board on its Area's page. */
.canvas-pin-cover { position: absolute; top: 0.3rem; right: 0.3rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: rgba(var(--st-text-rgb), 0.65); color: #fff; }
.canvas-pin-cover .icon svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }
/* Choosing a cover ("Change cover" on the Pictures card): the pointer says pick, a tap picks, and nothing drags or resizes. */
.canvas.is-choosing .canvas-pin { cursor: pointer; }

/* ---- Roles: a Role's Grant on each Section, on the Roles pages (ADR 0008) --------------------
   A row per Section: its name and, at the right, either the Grant as a word (the role's page at rest)
   or the segmented Hidden / Read-only / Full control (the form), with the help line underneath. */
.grant-list { list-style: none; padding: 0; margin: 0; }
.grant-row { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; align-items: center; padding: 0.65rem 0; border-top: 1px solid var(--st-border); }
.grant-row:first-child { border-top: none; padding-top: 0; }
.grant-name { font-weight: 600; }
.grant-help { grid-column: 1 / -1; margin: 0; font-size: 0.8rem; color: var(--st-text-secondary); }
.grant-word { font-size: 0.85rem; font-weight: 600; }
.grant-word-full { color: var(--st-primary); }
.grant-word-read-only { color: var(--st-text-secondary); }
.grant-word-hidden { color: var(--st-text-faint); }
@media (max-width: 575px) { .grant-row { grid-template-columns: 1fr; } }