/* #123 */

.fm-density {
    display: inline-flex;
    gap: 0;
    border: 0.0625rem solid var(--border);
    padding: 0;
    overflow: hidden;
}
.fm-density-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.375rem;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 0;
}
.fm-density-btn + .fm-density-btn { border-left: 0.0625rem solid var(--border); }
.fm-density-btn svg { display: block; }
.fm-density-btn:hover { color: var(--text-primary); }
.fm-density-btn.is-active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* #124 */
.rework-section .rework-title {
    color: var(--secondary);
    border-color: var(--secondary);
}
.rework-table {
    font-variant-numeric: tabular-nums;
}
.rework-row { cursor: pointer; transition: background 0.12s ease; }
.rework-row:hover { background: color-mix(in srgb, var(--secondary) 5%, transparent); }
.rework-row .rework-row-mark {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    color: var(--secondary);
    width: 2.5rem;
    text-align: left;
}

/* #125 */
.rules-hint {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-lg);
    max-width: 80ch;
    line-height: 1.6;
}
.rules-grid {
    display: block;
    margin-bottom: var(--space-2xl);
    background: transparent;
    border-top: 0.0625rem solid var(--border);
    border-bottom: 0.0625rem solid var(--border);
}
.rules-head,
.rule-row {
    display: grid;
    grid-template-columns: var(--grid-cols,
        minmax(10rem, 1.2fr) minmax(10rem, 1fr) minmax(9rem, auto)
        minmax(12rem, 2fr)   minmax(12rem, 2fr) auto auto auto);
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md) 0;
    border-bottom: 0.0625rem solid var(--border);
}
.rules-head {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    padding: var(--space-sm) 0;
    border-bottom-color: var(--text-muted);
}
.rule-row:last-of-type { border-bottom: 0; }
.rule-row:hover { background: color-mix(in srgb, var(--primary) 3%, transparent); }
.rule-row .form-input,
.rule-row .form-select,
.rule-row .rule-cell {
    min-width: 0;
}
/* #126 */
.rule-row .form-input,
.rule-row .form-select {
    background: transparent;
    border: 0;
    border-bottom: 0.0625rem solid transparent;
    padding: 0.25rem 0.125rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-primary);
    border-radius: 0;
    transition: border-color 0.15s ease;
}
.rule-row .form-input:hover,
.rule-row .form-select:hover { border-bottom-color: var(--border); }
.rule-row .form-input:focus,
.rule-row .form-select:focus {
    outline: none;
    border-bottom-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.rule-row .form-input::placeholder { color: var(--text-muted); opacity: 0.7; }

.channel-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.channel-row .ch {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
}
.channel-row .ch input[type="checkbox"] {
    width: 0.75rem;
    height: 0.75rem;
    border-width: 0.0625rem;
}
.channel-row .ch input[type="checkbox"]:checked + span { color: var(--primary); }
.active-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}
.i18n-cell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
}
.rule-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
}
/* #127 */
.rule-row .btn-sm {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
    padding: 0.25rem 0.5rem;
    min-height: 1.5rem;
}
.btn-link-danger {
    background: none;
    border: 0;
    padding: 0.25rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    cursor: pointer;
}
.btn-link-danger:hover { color: var(--secondary); }
.rule-row-new {
    background: color-mix(in srgb, var(--bg-elevated) 50%, transparent);
}
.rules-add-title {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    margin: var(--space-2xl) 0 var(--space-md);
}
.rule-add-form { max-width: 44rem; }

/* #128 */
@media (max-width: 60em) {
    .rules-head { display: none; }
    .rule-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: var(--space-md) 0;
    }
    .i18n-cell { grid-template-columns: 1fr; }
}

/* #129 */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-surface);
    border: 0.0625rem solid var(--border);
    color: var(--text-muted);
    flex-shrink: 0;
    object-fit: cover;
    vertical-align: middle;
}
.avatar--sm { width: 1.5rem;   height: 1.5rem; }
.avatar--md { width: 2.25rem;  height: 2.25rem; }
.avatar--lg { width: 3rem;     height: 3rem; }
.avatar--xl { width: 10rem;    height: 10rem; border-width: 0.125rem; }
.avatar--placeholder svg {
    width: 60%;
    height: 60%;
    opacity: 0.5;
}
/* #130 */
img.avatar { object-fit: cover; }

/* #131 */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: start;
}
@media (min-width: 48em) {
    .profile-grid { grid-template-columns: auto 1fr; }
}
.profile-avatar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}
.profile-avatar-form input[type="file"] { display: none; }
.profile-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-xs) var(--space-md);
    margin-top: var(--space-lg);
    font-size: 0.8125rem;
}
.profile-meta dt {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.6875rem;
}
.profile-meta dd { margin: 0; color: var(--text-primary); }

/* #132 */
.role-indicator {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0.0625rem solid transparent;
    padding: 0.25rem;
    color: inherit;
    cursor: pointer;
    min-height: 2.25rem;
    min-width: 2.25rem;
}
.role-indicator:hover { border-color: var(--border); }
.role-indicator[aria-expanded="true"] { border-color: var(--accent); }
.role-indicator .role-badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
}

/* #133 */
.fm-cmdk {
    padding: 0;
    border: 0.0625rem solid var(--border);
    background: var(--bg-elevated, var(--bg-surface));
    color: var(--text-primary);
    width: min(40rem, 92vw);
    max-height: 70vh;
    box-shadow: 0 1.5rem 4.5rem rgba(0,0,0,0.5);
    margin: 10vh auto;
    overflow: hidden;
    font-family: var(--font-mono);
}
.fm-cmdk::backdrop { background: rgba(0,0,0,0.55); }
.fm-cmdk-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-bottom: 0.0625rem solid var(--border);
    color: var(--text-muted);
}
.fm-cmdk-header input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    font-size: 0.875rem;
    text-transform: none;
    letter-spacing: normal;
}
.fm-cmdk-kbd {
    font-size: 0.5625rem;
    padding: 0.125rem 0.375rem;
    border: 0.0625rem solid var(--border);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.fm-cmdk-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    max-height: calc(70vh - 5.875rem);
    overflow-y: auto;
}
.fm-cmdk-item {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    cursor: pointer;
    color: var(--text-primary);
    min-height: 2.5rem;
}
.fm-cmdk-item.is-selected,
.fm-cmdk-item:hover { background: var(--surface-2, rgba(255,255,255,0.05)); }
.fm-cmdk-cat {
    font-size: 0.5625rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.125rem 0.375rem;
    border: 0.0625rem solid var(--border);
    border-radius: 0.125rem;
    text-align: center;
}
.fm-cmdk-title { text-transform: none; letter-spacing: normal; font-size: 0.8125rem; }
.fm-cmdk-meta  { font-size: 0.625rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.fm-cmdk-empty { padding: 1.25rem 0.875rem; color: var(--text-muted); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; text-align: center; }
.fm-cmdk-hint {
    padding: 0.5rem 0.875rem;
    border-top: 0.0625rem solid var(--border);
    color: var(--text-muted);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* #134 */
.fm-ingest-banner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: var(--space-md);
    border: 0.0625rem solid var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
/* #135 */
.fm-ingest-spin { font-size: 1.125rem; color: var(--accent); animation: spin 1.6s linear infinite; display: inline-block; }
.fm-ingest-refresh {
    margin-left: auto;
    background: transparent;
    border: 0.0625rem solid var(--accent);
    color: var(--accent);
    padding: 0.25rem 0.625rem;
    cursor: pointer;
    font: inherit;
}
.fm-ingest-refresh:hover { background: var(--accent); color: var(--bg-base); }

/* #136 */
.fm-field-error {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--secondary, #e2554c);
    margin-top: 0.25rem;
    line-height: 1.3;
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--secondary, #e2554c) !important;
    box-shadow: 0 0 0 0.0625rem var(--secondary, #e2554c);
}
/* #137 */
.fm-board {
    display: grid;
    grid-template-columns: repeat(var(--fm-cols), 1fr);
    gap: var(--fm-gutter);
    margin-bottom: var(--space-xl);
}
.fm-board-col { grid-column: span var(--fm-cols); }
@media (min-width: 37.5em) { .fm-board-col { grid-column: span 6; } }
@media (min-width: 60em) { .fm-board-col { grid-column: span 3; } }

.fm-board-col-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.375rem 0.625rem;
    border-top: 0.125rem solid var(--accent);
    border-bottom: 0.0625rem solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}
.fm-board-col-title { color: var(--text-primary); }
.fm-board-col-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.fm-board-col-list { display: flex; flex-direction: column; gap: var(--space-xs); }

/* #138 */
.fm-board-card {
    --accent-color: var(--text-muted);
    background: var(--bg-surface);
    border: 0.0625rem solid var(--border);
    border-top: 0.09375rem solid var(--accent-color);
    padding: var(--space-sm);
    position: relative;
}

.fm-board-card-title {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-primary);
}
.fm-board-card-body {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}
.fm-board-card-foot {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.375rem;
    flex-wrap: wrap;
}
.fm-board-card-meta {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fm-board-card-move { display: inline; margin: 0; }
.fm-board-btn {
    background: transparent;
    border: 0.0625rem solid var(--border);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    min-height: 1.375rem;
    cursor: pointer;
}
.fm-board-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.fm-board-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.fm-board-btn-danger:hover { color: var(--secondary); border-color: var(--secondary); }
.fm-board-card-edit { margin-top: 0.375rem; }
.fm-board-empty {
    padding: var(--space-sm);
    color: var(--text-muted);
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.625rem;
}

/* #138 */
.fm-onboarding-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; }
.fm-hint {
    position: absolute;
    z-index: 60;
    min-width: 13.75rem;
    max-width: 18.75rem;
    background: var(--bg-elevated, var(--bg-surface));
    border: 0.0625rem solid var(--accent);
    border-radius: 0.1875rem;
    box-shadow: 0 0.75rem 1.75rem rgba(0,0,0,0.5);
    font-family: var(--font-mono);
    pointer-events: auto;
}
.fm-hint-arrow {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--bg-elevated, var(--bg-surface));
    border-top: 0.0625rem solid var(--accent);
    border-left: 0.0625rem solid var(--accent);
    transform: rotate(45deg);
}
.fm-hint--bottom .fm-hint-arrow { top: -0.3125rem; left: calc(50% - 0.25rem); }
.fm-hint--top    .fm-hint-arrow { bottom: -0.3125rem; left: calc(50% - 0.25rem); transform: rotate(225deg); }
.fm-hint--right  .fm-hint-arrow { left: -0.3125rem; top: calc(50% - 0.25rem); transform: rotate(315deg); }
.fm-hint--left   .fm-hint-arrow { right: -0.3125rem; top: calc(50% - 0.25rem); transform: rotate(135deg); }
.fm-hint-body { padding: 0.75rem 0.875rem; }
.fm-hint-title {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: 0.25rem;
}
.fm-hint-text {
    font-size: 0.7812rem;
    color: var(--text-primary);
    line-height: 1.45;
    font-family: var(--font-sans);
}
.fm-hint-actions { margin-top: 0.625rem; display: flex; justify-content: flex-end; }
.fm-hint-ok {
    background: var(--accent);
    border: 0;
    color: var(--bg-base);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    border-radius: 0.125rem;
}
.fm-hint-ok:hover { background: var(--primary-dim); }

/* #139 */
.fm-sitebar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-elevated, var(--bg-surface));
    border-bottom: 0.0625rem solid var(--border);
    min-height: 2.5rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.fm-sitebar-inner {
    width: min(100%, 90rem);
    margin: 0 auto;
    /* #140 */
    padding: 0 var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-height: 2.5rem;
}
@media (min-width: 40em) {
    .fm-sitebar-inner { padding: 0 var(--space-lg); gap: var(--space-md); }
}
.fm-sitebar-switch { position: relative; flex-shrink: 0; }
.fm-sitebar-current {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 0.0625rem solid var(--border);
    color: var(--text-primary);
    padding: 0.25rem 0.625rem;
    font: inherit;
    cursor: pointer;
    min-height: 1.75rem;
}
.fm-sitebar-current:hover { border-color: var(--accent); }
.fm-sitebar-badge { color: var(--accent); font-size: 0.875rem; line-height: 1; }
.fm-sitebar-name { font-weight: 500; }
.fm-sitebar-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 16.25rem;
    background: var(--surface-1, var(--bg-elevated));
    border: 0.0625rem solid var(--border);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.4);
    z-index: 100;
    padding: 0.25rem;
}
.fm-sitebar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    color: var(--text-primary);
    text-decoration: none;
    min-height: 2.25rem;
    font: inherit;
}
.fm-sitebar-item:hover { background: var(--surface-2, rgba(255,255,255,0.04)); }
.fm-sitebar-item.is-current { color: var(--accent); }
.fm-sitebar-item-name { flex: 1; }
.fm-sitebar-item-tick { color: var(--accent); }

.fm-sitebar-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-md);
    align-items: center;
    flex-wrap: wrap;
}
.fm-sitebar-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-muted);
}
.fm-sitebar-stat-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    opacity: 0.75;
}
.fm-sitebar-stat.is-alert .fm-sitebar-stat-icon { opacity: 1; }
.fm-sitebar-stat.is-alert { color: var(--secondary); }
.fm-sitebar-stat-val {
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.fm-sitebar-stat.is-alert .fm-sitebar-stat-val { color: var(--secondary); }
/* #141 */
.fm-sitebar-stat-lbl { font-size: 0.625rem; display: none; }

@media (min-width: 40em) {
    .fm-sitebar-stat-lbl { display: inline; }
}

/* #142 */
.fm-acc { position: relative; display: inline-flex; align-items: center; }
.fm-acc-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 15rem;
    background: var(--surface-1, #161618);
    border: 0.0625rem solid var(--border);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.4);
    z-index: 100;
    padding: 0.25rem;
    text-align: left;
}
/* #143 */
.fm-acc-avatar { flex-shrink: 0; }
/* #144 — active account row doubles as the profile link (no self-switch no-op) */
.fm-acc-item-go { margin-left: auto; color: var(--text-muted); flex-shrink: 0; }
a.fm-acc-item:hover .fm-acc-item-go { color: var(--accent); }
/* #145 */
.role-indicator .role-avatar {
    width: 2rem;
    height: 2rem;
    border-width: 0;
    object-fit: cover;
}
/* #146 */
.role-indicator:has(> .role-avatar) > svg { display: none; }

/* #147 */
.btn.btn-icon {
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    list-style: none;
    cursor: pointer;
}
/* #148 */
summary.btn {
    display: list-item;
    list-style: none;
    text-align: center;
    line-height: 1.2;
    /* #149 */
    cursor: pointer;
}
summary.btn-icon {
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    display: list-item;
    text-align: center;
    line-height: 2.75rem;
    box-sizing: border-box;
    list-style: none;
    cursor: pointer;
}
.btn.btn-icon svg,
summary.btn-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
    /* #150 */
    pointer-events: none;
}
/* #151 */
summary.btn-icon::-webkit-details-marker { display: none; }
summary.btn-icon::marker { content: ""; }

/* #152 */
.user-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.user-cell-text {
    display: inline-flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}
.fm-acc-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 0.5rem 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-align: left;
    cursor: pointer;
    min-height: 2.25rem;
    text-decoration: none;
}
.fm-acc-item:hover { background: var(--surface-2, #1e1e21); }
.fm-acc-item.is-active { color: var(--accent); }
.fm-acc-item-role {
    font-size: 0.5625rem;
    color: var(--text-muted);
    padding: 0.125rem 0.25rem;
    border: 0.0625rem solid var(--border);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.fm-acc-item-name { flex: 1; }
.fm-acc-item-tick { color: var(--accent); }
.fm-acc-add, .fm-acc-logout {
    border-top: 0.0625rem solid var(--border);
    margin-top: 0.25rem;
    color: var(--text-muted);
}
.fm-acc-add:hover { color: var(--accent); }

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    width: 2.75rem;
    height: 2.75rem;
    /* #153 */
    filter: invert(var(--logo-invert, 0));
    flex-shrink: 0;
}

.logo svg { color: var(--primary); flex-shrink: 0; }

.nav {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    order: 10;
}

.nav-link {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.7) !important;
    text-decoration: none;
    padding: var(--space-xs);
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
    white-space: nowrap;
}

.nav-link::before { content: none; }
.nav-link .icon { opacity: 0.6; margin-right: 0.4em; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.nav-sep { width: 0.0625rem; height: 1rem; background: rgba(255,255,255,0.15); flex-shrink: 0; }
@media (hover: hover) {
    .nav-link:hover { color: #fff !important; }
    .nav-link:hover .icon { opacity: 1; transform: translateX(0.125rem); }
    .nav-link.nav--settings:hover .icon { animation: spin 1.5s linear infinite; transform: none; }
}
.nav-link.active { color: var(--primary) !important; }
.nav-link.active .icon { opacity: 1; }

/* #154 */

.lang-switch {
    display: inline-flex;
    gap: 0.125rem;
}

.lang-btn {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

@media (hover: hover) {
    .lang-btn:hover { color: var(--text-primary); }
}

.lang-btn.active {
    color: var(--text-secondary);
    border-bottom: 0.09375rem solid var(--primary);
}

/* #155 */

.checklist-app {
    background: var(--tg-bg, var(--bg-base));
    color: var(--tg-text, var(--text-primary));
    min-height: 100vh;
    /* #156 */
    padding: var(--space-sm);
}
@media (min-width: 48em) {
    .checklist-app { padding: var(--space-md); }
}

.step { display: none; }
.step.active { display: block; }

.step-title {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--space-lg);
    text-align: center;
}

.site-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.site-btn {
    display: block;
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    background: var(--bg-surface);
    border: 0.09375rem solid var(--border);
    color: var(--tg-text, var(--text-primary));
    cursor: pointer;
    text-align: left;
    min-height: 3rem;
}

.site-btn:active { border-color: var(--primary); }

/* #157 */

.wizard-header {
    margin-bottom: var(--space-xl);
}

.wizard-counter {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--tg-hint, var(--text-secondary));
    text-align: right;
}

.wizard-category {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    margin-bottom: var(--space-sm);
    min-height: 1.125rem;
}

.wizard-question {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    /* #158 */
    margin-bottom: var(--space-lg);
    min-height: 3rem;
}
@media (min-width: 48em) {
    .wizard-question { margin-bottom: var(--space-xl); min-height: 3.75rem; }
}

.wizard-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* #159 */
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}
@media (min-width: 48em) {
    .wizard-actions { gap: var(--space-sm); }
}

.wizard-btn {
    /* #160 */
    padding: var(--space-sm) var(--space-xs);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 700;
    border: 0.09375rem solid var(--border);
    cursor: pointer;
    min-height: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}
@media (min-width: 48em) {
    .wizard-btn { padding: var(--space-md); font-size: 1rem; }
}

.wizard-btn-yes {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.wizard-btn-no {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}

.wizard-btn-na {
    background: var(--bg-surface);
    border-color: var(--border);
    color: var(--text-secondary);
}

.wizard-btn:active { opacity: 0.8; }
.wizard-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

/* #161 */
.wizard-req {
    color: var(--secondary);
    margin-right: 0.25rem;
    font-weight: 700;
}

/* #162 */
.wizard-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: 3rem;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    border: 0.0625rem dashed var(--border);
    border-radius: 0.1875rem;
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.wizard-photo:hover { border-color: var(--primary); color: var(--text-primary); }
.wizard-photo[data-required="1"] { border-color: var(--secondary); color: var(--secondary); }
.wizard-photo.is-uploading { opacity: 0.6; pointer-events: none; }
.wizard-photo.is-done {
    border-style: solid;
    border-color: var(--success);
    color: var(--success);
    background: color-mix(in srgb, var(--success) 8%, transparent);
}
.wizard-photo.is-error {
    border-color: var(--secondary);
    color: var(--secondary);
    background: color-mix(in srgb, var(--secondary) 8%, transparent);
}
.wizard-photo-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}
.wizard-photo-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wizard-photo-thumb .icon { width: 1.25rem; height: 1.25rem; }
/* #163 */
.wizard-btn kbd {
    display: none;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 400;
    padding: 0.0625rem 0.3125rem;
    margin-left: 0.375rem;
    border: 0.0625rem solid rgba(255,255,255,0.3);
    opacity: 0.6;
    vertical-align: middle;
}
@media (hover: hover) and (pointer: fine) {
    .wizard-btn kbd { display: inline-block; }
}
.wizard-btn-na kbd { border-color: var(--border); }

.wizard-note-row {
    margin-top: var(--space-sm);
}

.wizard-note {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-sans);
    /* #164 */
    font-size: 1rem;
    border: 0.09375rem solid var(--border);
    background: var(--bg-surface);
    color: var(--tg-text, var(--text-primary));
}
@media (min-width: 48em) {
    .wizard-note { font-size: 0.875rem; }
}

.wizard-note:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 0.1875rem var(--focus-ring);
}

/* #165 */

.done-icon {
    font-family: var(--font-mono);
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    margin: var(--space-xl) 0 var(--space-md);
}

.done-stats {
    display: flex;
    justify-content: center;
    /* #166 */
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}
@media (min-width: 48em) {
    .done-stats { gap: var(--space-xl); }
}

.done-stat {
    text-align: center;
}

.done-val {
    display: block;
    font-family: var(--font-mono);
    /* #167 */
    font-size: 1.75rem;
    font-weight: 700;
}
@media (min-width: 48em) {
    .done-val { font-size: 2rem; }
}

.done-yes { color: var(--success); }
.done-no { color: var(--secondary); }

.done-lbl {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--tg-hint, var(--text-secondary));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: var(--space-xs);
}

/* #168 */

.role-assign {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}

.role-assign select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem var(--space-sm);
    padding-right: 1.25rem;
    background: var(--bg-surface);
    border: 0.09375rem solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    min-height: 1.75rem;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2378716c'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
    transition: border-color 0.15s ease;
}

.role-assign select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 0.1875rem var(--focus-ring);
}

@media (hover: hover) {
    .role-assign select:hover { border-color: var(--text-muted); }
}

@media (pointer: coarse) {
    .role-assign select { min-height: 2.5rem; font-size: 0.75rem; }
    .form-check input[type="checkbox"] { width: 1.375rem; height: 1.375rem; }
    .toggle input { width: 2.75rem; height: 1.5rem; }
    .toggle input::after { width: 1rem; height: 1rem; }
    .toggle input:checked::after { transform: translateX(1.25rem); }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 0.09375rem solid;
    cursor: pointer;
    min-height: 2.75rem; /* #169 */
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.btn-secondary {
    background: var(--bg-surface);
    border-color: var(--border);
    color: var(--text-primary);
}

.btn-danger {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:active:not(:disabled) { transform: scale(0.96); transition-duration: var(--dur-fast); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 0.1875rem var(--focus-ring); }

/* #170 */
.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
/* #171 */
@media (hover: hover) {
    .btn-primary:hover { background: var(--primary-dim); border-color: var(--primary-dim); }
    .btn-secondary:hover { background: var(--bg-elevated); }
}

/* #172 */

.upload-zone {
    border: 0.125rem dashed var(--border);
    padding: var(--space-xl);
    text-align: center;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: border-color 0.15s;
}

.upload-zone.dragover { border-color: var(--primary); color: var(--primary); }
@media (hover: hover) { .upload-zone:hover { border-color: var(--primary); color: var(--primary); } }

.upload-zone input[type="file"] { display: none; }

.upload-preview {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-md);
}

/* #173 */

/* #174 */
/* #175 */
.chip-island {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 0.0625rem solid var(--border);
    box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.35);
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    transform: translateX(-50%);
    z-index: 40;
    max-width: calc(100% - 1.5rem);
    overflow-x: auto;
    scrollbar-width: none;
}
.chip-island::-webkit-scrollbar { display: none; }
.chip-island-btn {
    appearance: none;
    white-space: nowrap;
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.chip-island-btn:hover { color: var(--text-primary); }
.chip-island-btn[data-active="true"] {
    background: var(--primary);
    color: var(--bg-base);
}
/* #176 */
@media (min-width: 48em) {
    .chip-island {
        position: static;
        transform: none;
        left: auto;
        bottom: auto;
        max-width: none;
        box-shadow: none;
        backdrop-filter: none;
        margin-bottom: var(--space-md);
        padding: 0;
        background: transparent;
        border: 0;
    }
    .chip-island-btn {
        border: 0.0625rem solid var(--border);
        background: var(--bg-surface);
    }
}
/* #177 */
@media (max-width: 47.99em) {
    .photo-grid { padding-bottom: 5rem; }
}

.chip-scroll {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
    scrollbar-width: none;
}
.chip-scroll::-webkit-scrollbar { display: none; }

.chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 0.375rem 0.75rem;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 0.0625rem solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    scroll-snap-align: start;
    transition: all var(--dur-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}
.chip:hover { border-color: var(--text-muted); color: var(--text-primary); }
.chip[data-active="true"], .chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.chip-select, .chip-date {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    padding: 0.375rem 0.5rem;
    height: 2rem;
    border: 0.0625rem solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    appearance: none;
    -webkit-appearance: none;
    white-space: nowrap;
    scroll-snap-align: start;
    flex-shrink: 0;
}
.chip-select {
    padding-right: 1.25rem;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2378716c'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
}
.chip-date { width: 8.5rem; }
.chip-select:focus-visible, .chip-date:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 0.1875rem var(--focus-ring); }

/* #178 */
.chip-admin { border-color: var(--primary); color: var(--primary); background: transparent; }
.chip-inspector { border-color: var(--success); color: var(--success); background: transparent; }
.chip-foreman { border-color: var(--text-secondary); color: var(--text-primary); background: transparent; }
.chip-worker { border-color: var(--border); color: var(--text-secondary); background: transparent; }
.chip .site-label { font-weight: 400; opacity: .6; text-transform: none; letter-spacing: 0; margin-left: 0.25rem; }

/* #179 */
.row-list {
    display: flex;
    flex-direction: column;
}

.row-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 0.0625rem solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: padding-left var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
    .row-item:hover {
        padding-left: var(--space-sm);
        background: linear-gradient(90deg, var(--bg-elevated) 0%, transparent 100%);
    }
}

.row-idx {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 2.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    transition: color var(--dur-fast) var(--ease-out);
}
.row-item:hover .row-idx { color: var(--primary); }

.row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.row-title {
    font-weight: 600;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row-meta {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.row-end {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

/* #180 */
.btn-inline {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border: 0.0625rem solid;
    background: transparent;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all var(--dur-fast) var(--ease-out);
}
.btn-inline--ok { color: var(--success); border-color: var(--success); }
.btn-inline--ok:hover { background: var(--success); color: #fff; }

/* #181 */
.gallery-group {
    margin-bottom: var(--space-xl);
}

.gallery-group-header {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    padding: var(--space-xs) 0;
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    list-style: none;
}
.gallery-group-header::-webkit-details-marker { display: none; }
.gallery-group-header::before {
    content: "+";
    font-size: 0.625rem;
    color: var(--text-muted);
    transition: transform var(--dur-fast) var(--ease-out);
}
details[open] > .gallery-group-header::before {
    transform: rotate(45deg);
}
.gallery-group-header .micro {
    margin-left: auto;
    background: var(--bg-elevated);
    padding: 0.125rem 0.375rem;
}

/* #182 */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    grid-auto-flow: row dense;
    gap: 0.1875rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    background: var(--bg-surface);
    cursor: pointer;
    aspect-ratio: 1;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-normal) var(--ease-out);
}
@media (hover: hover) {
    .gallery-item:hover img {
        transform: scale(1.05);
    }
    .gallery-item:hover .gallery-overlay {
        opacity: 1;
    }
}

/* #183 */
.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.7));
    display: flex;
    align-items: flex-end;
    padding: var(--space-xs);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
    pointer-events: none;
}
.gallery-overlay span {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* #184 */
.gallery-item--wide {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}

/* #185 */
.audit-day { margin-bottom: var(--space-lg); }
.audit-date {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    padding-bottom: var(--space-xs);
    border-bottom: 0.0625rem solid var(--border);
    margin-bottom: var(--space-xs);
}
.audit-entries { display: flex; flex-direction: column; }
.audit-entry {
    display: flex;
    gap: var(--space-sm);
    align-items: baseline;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    border-bottom: 0.0625rem solid rgba(255,255,255,0.03);
}
.audit-time {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--text-muted);
    min-width: 3.5rem;
    flex-shrink: 0;
}
.audit-event {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--primary);
    min-width: 8rem;
    flex-shrink: 0;
}
.audit-actor { color: var(--text-secondary); flex-shrink: 0; }
.audit-detail { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.photo-grid {
    display: grid;
    /* #186 */
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: var(--space-sm);
}
@media (min-width: 48em) {
    .photo-grid { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
}

.photo-card {
    position: relative;
    overflow: hidden;
    border: 0.09375rem solid var(--border);
    cursor: pointer;
}

.photo-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.photo-caption {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--text-secondary);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-elevated);
    border-top: 0.0625rem solid var(--border);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.photo-meta {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--text-secondary);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-surface);
}

/* #187 */
.video-card video {
    width: 100%;
    display: block;
    background: #000;
}

/* #188 */
.comment-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.comment {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-surface);
    border: 0.09375rem solid var(--border);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
}

/* #189 */
.comment-user {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    text-decoration: none;
}
.comment-user:hover { text-decoration: underline; }

.comment-date {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--text-muted);
}

.comment-text {
    font-size: 0.75rem;
    color: var(--text-primary);
    line-height: 1.5;
}

/* #190 */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.lightbox[hidden] { display: none; }

.lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
}

/* #191 */

.inline-form {
    display: none;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 0.0625rem solid var(--border);
}

.inline-form.active { display: block; }
details[open] > .inline-form { display: block; }

.site-card .btn { margin-top: var(--space-sm); font-size: 0.75rem; padding: var(--space-sm) var(--space-md); min-height: 2.75rem; }

/* #192 */

/* #193 */
.toast {
    position: fixed;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 0.0625rem solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    padding: var(--space-sm) var(--space-lg);
    z-index: 300;
    animation: toast-in var(--dur-normal) var(--ease-out);
    min-height: 2.75rem;
    display: none;
    align-items: center;
    max-width: 90vw;
    overflow: hidden;
}
.toast::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0.125rem;
    background: var(--primary);
    animation: toast-timer 4s linear forwards;
}

.toast.toast-error { border-color: var(--secondary); }
.toast.toast-error::after { background: var(--secondary); }
.toast.toast-success::after { background: var(--success); }

.toast[style*="display: block"] { display: flex; }
/* #194 */

/* #195 — Group Chat */
.group-chat-page {
    max-width: 56rem;
    margin: 0 auto;
}

.group-chat-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.chat-selector {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--text-muted);
}

.chat-selector-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.chat-select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    padding: 0.25rem 1.5rem 0.25rem 0.5rem;
    background: var(--bg-surface);
    border: 0.0625rem solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    min-height: 1.75rem;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2378716c'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
}

.chat-select:focus { outline: none; border-color: var(--primary); }

/* #196 */
.chat-meta {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 0.0625rem solid var(--border);
    background: var(--bg-surface);
    max-height: 75vh;
    overflow-y: auto;
}

/* #197 */
.chat-msg {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 0.0625rem solid var(--border);
    transition: background 0.15s ease;
}

.chat-msg:last-child { border-bottom: 0; }
.chat-msg:hover { background: var(--bg-elevated); }

.chat-msg-meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.chat-msg-author {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
}

.chat-msg-time {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--text-muted);
}

.chat-msg-kind {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 0.0625rem 0.25rem;
    border: 0.0625rem solid var(--border);
}

.chat-msg-body {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-primary);
    word-break: break-word;
}

.chat-msg-text { white-space: pre-wrap; }

.chat-msg-photo { margin-top: var(--space-xs); }

/* Internal vs Telegram in the merged feed — differentiated by author accent
   + a whisper-faint fill, no border bars. */
.chat-msg--fm { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.chat-msg--fm .chat-msg-author { color: var(--primary); }
.chat-msg--tg .chat-msg-author { color: var(--text-secondary); }

/* Compose bar — sticky at the bottom of the chat view */
.chat-reply {
    position: sticky;
    bottom: 0;
    margin-top: var(--space-sm);
    padding-top: var(--space-xs);
    /* Keep the composer clear of the iPhone home indicator (full-screen chat). */
    padding-bottom: max(var(--space-xs), env(safe-area-inset-bottom));
    background: var(--bg-base);
}
.chat-reply-row {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}
.chat-reply-input {
    flex: 1 1 auto;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius);
}
.chat-reply-input:focus { outline: none; border-color: var(--primary); }
.chat-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    padding: 0 0.875rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--primary);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
}
.chat-reply-btn:hover { filter: brightness(1.08); }
.chat-reply-status { min-height: 1.1em; margin-top: 0.25rem; font-family: var(--font-mono); font-size: var(--micro-size); }
.chat-reply-ok { color: var(--primary); }
.chat-reply-err { color: var(--secondary); }

/* #198 */
.chat-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 0.0625rem solid var(--border);
    background: var(--bg-surface);
}

/* ── Direct messages (moved from direct_messages.html head; foreman tokens) ── */
.dm-layout { display:flex; height:calc(100dvh - var(--header-h, 60px) - var(--nav-h, 0px)); overflow:hidden; border:0.0625rem solid var(--border); background:var(--bg-surface); }
.dm-sidebar { width:min(35vw, 340px); border-right:0.0625rem solid var(--border); flex-shrink:0; background:var(--bg-base); display:flex; flex-direction:column; }
/* Tab bar pinned at top; only the list below it scrolls. */
.dm-tabs { display:flex; flex-shrink:0; border-bottom:0.0625rem solid var(--border); }
.dm-tab {
  flex:1; padding:0.75em 0.5em; background:var(--bg-base); border:0;
  border-right:0.0625rem solid var(--border);
  color:var(--text-muted); font-family:var(--font-mono); font-size:0.72em;
  text-transform:uppercase; letter-spacing:0.08em; cursor:pointer;
  transition:color 0.15s, background 0.15s;
}
.dm-tab:last-child { border-right:0; }
.dm-tab:hover { background:var(--bg-elevated); color:var(--text-secondary); }
.dm-tab.is-active { color:var(--primary); background:var(--bg-surface); box-shadow: inset 0 -0.125rem 0 var(--primary); }
.dm-sidebar-scroll { flex:1; overflow-y:auto; min-height:0; }
/* Show only the section matching the active tab. */
.dm-sidebar[data-tab="groups"] .dm-section--dm { display:none; }
.dm-sidebar[data-tab="dm"] .dm-section--groups { display:none; }
.dm-empty--mini { flex:initial; min-height:0; padding:2.5em 1em; }
.dm-chat { flex:1; display:flex; flex-direction:column; min-width:0; }
/* render_inline wrapper must fill the column so messages grow and the
   compose form sticks to the bottom (instead of floating up top). */
.dm-chat > #frag-dm-chat { flex:1; display:flex; flex-direction:column; min-height:0; }

.dm-contact {
  display:flex; align-items:center; gap:0.5em; padding:0.7em 1em;
  border-bottom:0.0625rem solid var(--border);
  cursor:pointer; transition:background 0.15s;
}
.dm-contact:hover { background:var(--bg-elevated); }
/* Active row — soft fill + name accent, no border bar (cleaner, modern). */
.dm-contact--active { background: color-mix(in srgb, var(--primary) 9%, var(--bg-base)); }
.dm-contact--active .dm-contact-name { color: var(--primary); }
.dm-contact-avatar {
  width:2.5em; height:2.5em; border-radius:50%; flex-shrink:0;
  background:var(--bg-elevated);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:0.85em; color:var(--text-secondary); overflow:hidden;
}
.dm-contact-info { flex:1; min-width:0; }
.dm-contact-name { font-weight:600; font-size:0.9em; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-contact-role { font-size:0.7em; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.05em; font-family:var(--font-mono); }
.dm-contact-last { font-size:0.78em; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-contact-meta { text-align:right; flex-shrink:0; min-width:2.5em; }
.dm-contact-time { font-size:0.7em; color:var(--text-muted); font-family:var(--font-mono); }
.dm-contact-badge {
  display:inline-block; background:var(--primary); color:#fff;
  font-size:0.65em; font-weight:700; min-width:1.4em; padding:0.15em 0.35em;
  border-radius:0.7em; text-align:center; margin-top:0.15em;
}

.dm-empty {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--text-muted); gap:0.5em; font-family:var(--font-mono);
}
.dm-empty svg { width:3em; height:3em; opacity:0.3; }
.dm-empty p { font-size:0.85em; text-transform:uppercase; letter-spacing:0.08em; }

.dm-messages { flex:1; overflow-y:auto; padding:1em; display:flex; flex-direction:column; gap:0.3em; background:var(--bg-surface); }
.dm-msg { max-width:75%; padding:0.5em 0.85em; border-radius:1em; font-size:0.9em; line-height:1.4; word-break:break-word; }
.dm-msg--mine { align-self:flex-end; background:var(--primary); color:#fff; border-bottom-right-radius:0.2em; }
.dm-msg--their { align-self:flex-start; background:var(--bg-elevated); color:var(--text-primary); border-bottom-left-radius:0.2em; }
.dm-msg-sender { font-size:0.7em; font-weight:600; margin-bottom:0.15em; opacity:0.8; }
.dm-msg-time { font-size:0.65em; margin-top:0.3em; opacity:0.7; text-align:right; font-family:var(--font-mono); }

/* Compose bar — industrial: square edges (--radius:0), accent send, focus ring. */
.dm-input-wrap {
  padding:0.6rem 0.7rem;
  padding-bottom:max(0.6rem, env(safe-area-inset-bottom));
  border-top:0.0625rem solid var(--border);
  display:flex; gap:0.5rem; align-items:stretch;
  background:var(--bg-base);
}
.dm-input {
  flex:1; min-height:2.75rem; border-radius:0;
  border:0.0625rem solid var(--border);
  padding:0 0.85rem; font-size:0.9rem; line-height:2.75rem; outline:none;
  background:var(--bg-surface); color:var(--text-primary);
}
.dm-input::placeholder { color:var(--text-muted); }
.dm-input:focus { border-color:var(--accent); box-shadow:inset 0 0 0 0.0625rem var(--accent); }
.dm-send-btn {
  width:2.75rem; min-height:2.75rem; border-radius:0; border:0;
  background:var(--accent); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.dm-send-btn:hover { background:var(--primary-dim); }
.dm-send-btn:active { transform:translateY(0.0625rem); }
.dm-send-btn:disabled { opacity:0.4; cursor:default; }

@media (max-width:600px) {
  .dm-sidebar { width:100%; max-width:100%; }
  .dm-chat { display:none; }
  .dm-layout--chat-open .dm-sidebar { display:none; }
  .dm-layout--chat-open .dm-chat { display:flex; }
  /* Hide the ugly scrollbar "полоски" on mobile — scroll still works. */
  .dm-sidebar, .dm-messages, .chat-messages { scrollbar-width: none; -ms-overflow-style: none; }
  .dm-sidebar::-webkit-scrollbar,
  .dm-messages::-webkit-scrollbar,
  .chat-messages::-webkit-scrollbar { width:0; height:0; display:none; }
  /* Full-screen messenger: with a conversation open, drop the global top
     nav/header (Ben Frain — small screens = single "tube" of content; the
     menu lives off-canvas/behind the back button). Conversation uses the
     whole viewport; the dm-chat-head IS the messenger top bar. */
  body.dm-chat-open .header { display:none; }
  body.dm-chat-open .dm-layout { height:100vh; height:100dvh; border:0; }
  /* 2-class selector beats the base `.dm-back{display:none}` regardless of
     order; gated to ≤600px so the back button only appears single-pane. */
  .dm-layout--chat-open .dm-back { display:inline-flex; }
}

/* DM chat header (contact name + mobile back) */
.dm-chat-head { display:flex; align-items:center; gap:0.6em; padding:0.6em 1em; padding-top:max(0.6em, env(safe-area-inset-top)); border-bottom:0.0625rem solid var(--border); background:var(--bg-base); flex-shrink:0; }
.dm-back { display:none; background:none; border:none; color:var(--text-secondary); font-size:1.5em; line-height:1; cursor:pointer; padding:0 0.3em; border-radius:var(--radius); }
.dm-back:hover { color:var(--primary); background:var(--bg-elevated); }
.dm-chat-title { font-weight:600; color:var(--text-primary); font-size:0.95em; }

/* Group conversation entries in the unified DM list */
.dm-contact--group { text-decoration:none; color:inherit; }
.dm-avatar--group { color:var(--primary); background:color-mix(in srgb, var(--primary) 15%, var(--bg-elevated)); }

/* #139 — users page: per-object role cards, mobile-first */
.user-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Collapsed row — tap target ≥44px, no overflow at 360px */
.user-row {
  border: 0.0625rem solid var(--border);
  background: var(--bg-surface);
  overflow: hidden;
}
.user-row[open] { border-color: var(--accent); }

.user-row-summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  min-height: 3rem; /* ≥48px touch target */
  cursor: pointer;
  list-style: none; /* hide default triangle on WebKit */
  -webkit-user-select: none;
  user-select: none;
}
.user-row-summary::-webkit-details-marker { display: none; }
/* Custom disclosure indicator — a small chevron that rotates on open */
.user-row-summary::after {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 0.125rem solid var(--text-muted);
  border-bottom: 0.125rem solid var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.user-row[open] .user-row-summary::after { transform: rotate(-135deg); }

.user-row-avatar { flex-shrink: 0; }

.user-row-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.user-row-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-row-tg {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Compact role summary in collapsed state */
.user-row-roles-snippet {
  display: none; /* hidden by default on mobile (narrow) */
  font-size: 0.6875rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
  flex-shrink: 1;
}
@media (min-width: 30em) {
  .user-row-roles-snippet { display: block; }
}

.user-row-no-roles {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.role-tag {
  display: inline;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.role-tag--worker    { color: var(--primary, #4a90d9); }
.role-tag--foreman   { color: var(--accent, #e8962e); }
.role-tag--inspector { color: var(--secondary, #d94a4a); }
.role-tag--admin     { color: var(--tertiary, #34a853); }
.role-tag--org       { color: var(--accent); }
.role-tag-site {
  font-size: 0.625rem;
  color: var(--text-muted);
}

/* Expanded detail area */
.user-row-detail {
  padding: 0.75rem;
  border-top: 0.0625rem solid var(--border);
  background: var(--bg-base);
}

/* «Всі об'єкти» org-select row */
.user-org-role {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 0.0625rem solid var(--border);
  flex-wrap: wrap;
}
.user-org-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  white-space: nowrap;
}
.user-org-role .role-select {
  flex: 1;
  min-width: 8rem;
  height: 2.75rem; /* ≥44px touch target */
  font-size: 0.8125rem;
}

/* Per-site role grid — responsive: 1 col narrow, 2 cols wide */
.user-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.5rem;
}

.user-site-role {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  min-height: 2.75rem; /* touch target ≥44px */
}
.user-site-role-name {
  font-size: 0.8125rem;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.user-site-role .role-select {
  width: 8rem;
  flex-shrink: 0;
  height: 2.5rem;
  font-size: 0.75rem;
}
.user-site-role .btn-sm {
  flex-shrink: 0;
  font-size: 0.6875rem;
  padding: 0.25rem 0.5rem;
  min-height: 2rem;
}

.user-role-empty {
  color: var(--text-muted);
  font-size: 0.8125rem;
  text-align: center;
  padding: 1rem 0;
}

/* Form-control base for selects */
.role-select {
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border);
  color: var(--text-primary);
  padding: 0.25rem 0.5rem;
  font-family: inherit;
  appearance: auto;
  accent-color: var(--accent);
}
.role-select:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: -0.125rem;
}

/* Hide noscript submit buttons when JS is active — HTMX handles autosave.
   The `noscript` element auto-hides when scripting is enabled. */

/* #199 — Tap-first chip groups for finite-value inputs (report forms, checklists).
   Each chip is a <button> inside a flex row; the active one gets solid fill.
   Under the hood a hidden radio syncs the value. */
.fm-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}
.fm-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;      /* ≥44px touch target */
    min-width: 2.75rem;
    padding: 0.375rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 0.0625rem solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.fm-chip:hover { border-color: var(--text-muted); color: var(--text-primary); }
.fm-chip[aria-pressed="true"],
.fm-chip.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.fm-chip:focus-visible {
    outline: 0.125rem solid var(--primary);
    outline-offset: 0.125rem;
}
/* Wider chips for text labels ("YES"/"NO"/"N/A", zone names, etc.) */
.fm-chip--wide { min-width: 4rem; }

/* #200 — Preset row: chips + hidden free-input for "other" value.
   Layout: chips → "…" chip (reveals free-input) → trailing <input> */
.fm-chip-preset {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}
.fm-chip-preset .fm-chip--other {
    color: var(--text-muted);
    border-style: dashed;
}
.fm-chip-preset .fm-chip--other[aria-pressed="true"] {
    background: transparent;
    border-color: var(--primary);
    color: var(--primary);
}
.fm-chip-free {
    width: 3.5rem;
    min-height: 2.75rem;
    padding: 0.375rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    text-align: center;
    border: 0.0625rem solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    border-radius: 0;
    -moz-appearance: textfield;
}
.fm-chip-free::-webkit-inner-spin-button,
.fm-chip-free::-webkit-outer-spin-button { opacity: 1; height: 2rem; }
.fm-chip-free:focus { outline: none; border-color: var(--primary); }
.fm-chip-free[hidden] { display: none; }

/* ─── Profile: industrial "spec-sheet" composition + micro-graphics ─── */
.pf { max-width: 640px; }

/* Identity band — equipment/ID header */
.pf-band { position: relative; border: 1px solid var(--border); background: var(--bg-base);
  padding: 1.5rem 1.25rem 1.25rem; margin-bottom: 1.75rem; overflow: hidden; }
.pf-band::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--primary); }
.pf-band-tag { position: absolute; top: 0.5rem; left: 1.25rem; font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.pf-band-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.14;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(105deg, transparent, #000 60%); mask-image: linear-gradient(105deg, transparent, #000 60%); }
.pf-band-body { position: relative; display: flex; align-items: center; gap: 1.1rem; margin-top: 0.7rem; }

/* avatar with corner crosshairs (square = industrial) */
.pf-id-avatar-wrap { position: relative; flex-shrink: 0; width: 96px; height: 96px; }
.pf-id-avatar { width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--border);
  background: var(--bg-surface); border-radius: 2px; display: block; }
.pf-id-avatar--ph { display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.pf-id-avatar--ph svg { width: 44%; height: 44%; }
.pf-cross { position: absolute; width: 9px; height: 9px; pointer-events: none; z-index: 1; }
.pf-cross::before, .pf-cross::after { content: ""; position: absolute; background: var(--primary); }
.pf-cross::before { width: 9px; height: 1px; top: 0; left: 0; }
.pf-cross::after  { width: 1px; height: 9px; top: 0; left: 0; }
.pf-cross--tl { top: -4px; left: -4px; }
.pf-cross--tr { top: -4px; right: -4px; } .pf-cross--tr::before { left: auto; right: 0; } .pf-cross--tr::after { left: auto; right: 0; }
.pf-cross--bl { bottom: -4px; left: -4px; } .pf-cross--bl::before { top: auto; bottom: 0; } .pf-cross--bl::after { top: auto; bottom: 0; }
.pf-cross--br { bottom: -4px; right: -4px; } .pf-cross--br::before { top: auto; bottom: 0; left: auto; right: 0; } .pf-cross--br::after { top: auto; bottom: 0; left: auto; right: 0; }
.pf-id-cam { position: absolute; bottom: -7px; right: -7px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-base); border: 1px solid var(--border); border-radius: 2px; color: var(--text-secondary); cursor: pointer; z-index: 2; }
.pf-id-cam:hover { color: var(--primary); border-color: var(--primary); }

.pf-id-meta { display: flex; flex-direction: column; gap: 0.32rem; min-width: 0; }
.pf-id-name { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1; }
.pf-id-role { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.pf-tick { width: 6px; height: 6px; background: var(--primary); display: inline-block; flex-shrink: 0; }
.pf-id-readout { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* numbered sections */
.pf-sec { margin-bottom: 1.6rem; }
.pf-sec-h { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.85rem; font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); }
.pf-sec-h::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.pf-sec-no { color: var(--primary); }

/* editable fields */
.pf-form { display: flex; flex-direction: column; gap: 0.85rem; }
.pf-field { display: flex; flex-direction: column; gap: 0.32rem; }
.pf-field-k { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pf-input { width: 100%; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 2px;
  padding: 0.62rem 0.7rem; color: var(--text-primary); font-size: 0.95rem; }
.pf-input:focus { outline: none; border-color: var(--primary); }
.pf-save { align-self: flex-start; margin-top: 0.2rem; }

/* tabular spec rows with dotted leaders */
.pf-rows { margin: 0; border: 1px solid var(--border); border-radius: 2px; }
.pf-row { display: flex; align-items: baseline; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); }
.pf-row:last-child { border-bottom: 0; }
.pf-row dt { flex: 1; display: flex; align-items: baseline; font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.pf-row dt::after { content: ""; flex: 1; margin: 0 0.6rem 0.28em; border-bottom: 1px dotted color-mix(in srgb, var(--border) 85%, transparent); }
.pf-row dd { flex-shrink: 0; margin: 0; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-primary); text-align: right; }

.pf-action { display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; }
.pf-toggle { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.pf-hint { color: var(--text-muted); font-size: 0.75rem; line-height: 1.4; }

/* ── Profile band: enerblock-style micro-graphics (LED · QR · blueprint caption · scanline) ── */
.pf-band { padding-top: 1.1rem; }
.pf-band-top, .pf-band-body, .pf-caption { position: relative; z-index: 1; }
.pf-band-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
/* tag now flows in the top row (override earlier absolute positioning) */
.pf-band .pf-band-tag { position: static; top: auto; left: auto; }
.pf-band-status { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); flex-shrink: 0; }
.pf-led { width: 7px; height: 7px; border-radius: 50%; background: #4af626; box-shadow: 0 0 6px rgba(74,246,38,0.6);
  display: inline-block; animation: pf-pulse 2s ease-in-out infinite; }
@keyframes pf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* scannable traceability tag — printed-label look (cream tile, dark modules) */
.pf-qr { flex-shrink: 0; margin-left: auto; align-self: flex-start; width: 60px; height: 60px;
  padding: 4px; background: #e8e0d4; border-radius: 2px; line-height: 0; }
.pf-qr svg { width: 100%; height: 100%; display: block; }

/* blueprint metadata caption */
.pf-caption { display: block; margin-top: 0.9rem; padding-top: 0.55rem; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* subtle scanline texture — band only (keeps page content fully readable in sunlight) */
.pf-scan { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5;
  background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.16) 2px 3px); }
@media (prefers-reduced-motion: reduce) { .pf-led { animation: none; } }

/* small phones: drop the QR so the ID band stays clean + tappable */
@media (max-width: 420px) { .pf-qr { display: none; } }

/* ── Profile SECURITY: enrolled status + ghost "add another" ── */
.pf-status { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.pf-addmore { background: transparent; border: 1px solid var(--border); color: var(--text-secondary);
  padding: 0.4rem 0.75rem; font-size: 0.8rem; }
.pf-addmore:hover { border-color: var(--primary); color: var(--primary); }