/* Shared interaction and readability rules. Keep page-specific layouts in their views. */
:root { --text-muted: #9aabc1; }
[hidden] { display: none !important; }
body { overflow-wrap: break-word; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #c4b5fd; outline-offset: 3px;
}
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 2000; transform: translateY(-150%); padding: 12px 20px; background: #fff; color: #132236; border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }
.btn { min-height: 42px; gap: 8px; font-weight: 600; }
.btn-sm { min-height: 36px; }
.btn:has(> svg:only-child) { min-width: 44px; min-height: 44px; }
.main-content .btn-ghost, .auth-card .btn-ghost {
    background: var(--bg-card, #132236); border: 1px solid #476080; color: var(--text-primary, #f8fafc);
}
.main-content .btn-ghost:hover, .auth-card .btn-ghost:hover { background: #223b57; border-color: #7892b3; }
.btn-secondary { border-color: #476080; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .65; cursor: not-allowed; }
.form-label { color: var(--text-primary); }
.form-hint, .form-error { line-height: 1.5; }
.form-input, .form-select, .form-textarea { min-height: 44px; }
.tabs { flex-wrap: wrap; height: auto; }
.tab { white-space: normal; text-align: center; }
.page-header { gap: 16px; flex-wrap: wrap; }
.page-header > *, .card, .grid > * { min-width: 0; }
.sidebar-nav a.active { background: #38235c; color: #f5f0ff; box-shadow: inset 3px 0 #b794ff; }
.sidebar-nav a { min-height: 42px; }
.sidebar-close, .sidebar-scrim { display: none; }
.bottom-nav button { font: inherit; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; flex: 1; font-size: 11px; }
.bottom-nav :is(a,button).active { color: #c4b5fd; background: #231d3f; }
.page-section-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 12px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-card); }
.page-section-nav a { padding: 8px 12px; border: 1px solid #476080; border-radius: 8px; color: var(--text-primary); font-size: 13px; }
[data-page-section] { scroll-margin-top: 88px; }
.filter-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 16px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 12px; margin-bottom: 20px; }
.filter-toolbar .form-group { margin: 0; flex: 1 1 180px; }
.filter-toolbar label { display: block; margin-bottom: 6px; }
.report-versions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-default); }
.report-versions > summary { display: inline-flex; cursor: pointer; gap: 8px; }
.report-versions > summary::after { content: '▾'; }
.report-versions[open] > summary::after { content: '▴'; }
.report-versions-menu { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.diagnostic-report-versions .report-versions-menu { position: static; box-shadow: none; border: none; padding: 0; background: transparent; }
.diagnostic-report-versions .report-versions-menu a { display: inline-flex; border: 1px solid #476080; }
.kanban-task { cursor: default; }
.kanban-task-title { white-space: normal !important; -webkit-line-clamp: unset !important; }
.task-modal-backdrop :is(button, .btn) { min-height: 40px; }
.kanban-board.is-list { display: block; }
.kanban-board.is-list .kanban-col { margin-bottom: 20px; width: 100%; min-height: auto; }
.kanban-board.is-list .kanban-tasks { min-height: 60px; }
.kanban-task-title { padding-right: 0; }
.task-card-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #36516d; }
.task-more { position: relative; }
.task-more > summary { list-style: none; cursor: pointer; }
.task-more-menu { position: absolute; right: 0; bottom: calc(100% + 4px); z-index: 10; padding: 8px; margin: 0; min-width: 160px; background: #132236; border: 1px solid #476080; border-radius: 8px; box-shadow: 0 4px 16px #0008; }
.task-more-menu button { width: 100%; margin: 4px 0; }
.task-more-menu button[type="submit"] { color: #ff9ca3; }
.kanban-task-badge { font-size: 12px; padding: 3px 8px; }
.kanban-task-footer { flex-wrap: wrap; }
.kanban-task-due { font-size: 12px; }
.priority-high { color: #ff9ca3; }
.kanban-add-btn { min-height: 44px; }
.kanban-board.is-list .kanban-task { min-height: auto; }
.rating-choice { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; border-radius: 8px; cursor: pointer; }
.rating-choice:has(input:focus-visible) { outline: 3px solid #c4b5fd; }
.rating-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.survey-shell .btn { white-space: normal; max-width: 100%; text-align: center; }
.survey-shell .btn svg { flex-shrink: 0; }
.calendar-tools { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
@media (max-width: 768px) {
    .btn, .btn-sm { min-height: 44px; }
    .main-content { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
    .bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
    .sidebar.is-mobile-open { display: flex; width: min(320px, 88vw); z-index: 1101; height: 100dvh; overflow-y: auto; }
    .sidebar.is-mobile-open .sidebar-nav-label, .sidebar.is-mobile-open .sidebar-section-label, .sidebar.is-mobile-open .sidebar-user-info { display: block; }
    .sidebar.is-mobile-open .sidebar-nav a { justify-content: flex-start; padding: 12px 16px; gap: 12px; }
    .sidebar.is-mobile-open .sidebar-section { overflow: visible; }
    .sidebar-close { display: inline-flex; margin-left: auto; border: 1px solid #476080; color: #fff; background: transparent; border-radius: 8px; min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
    .sidebar-logo { display: flex; justify-content: space-between; gap: 16px; }
    .sidebar-scrim:not([hidden]) { display: block; position: fixed; inset: 0; background: #020817b8; z-index: 1100; }
    .profile-grid { grid-template-columns: minmax(0,1fr) !important; }
    .responsive-records table, .responsive-records tbody, .responsive-records tr, .responsive-records td { display: block; width: 100%; min-width: 0; }
    .responsive-records thead { display: none; }
    .responsive-records tr { padding: 16px; border-bottom: 1px solid var(--border-default); }
    .responsive-records td { padding: 6px 0; border: 0; white-space: normal; }
    .responsive-records td[data-label]::before { content: attr(data-label) ': '; color: var(--text-muted); font-weight: 600; }
    .responsive-records td:last-child { margin-top: 12px; }
    .calendar-month-grid { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.diagnostics-page .diagnostic-report-versions-toggle { border:1px solid var(--border-default, #38536f); background:var(--bg-surface-2, #1c3047); color:var(--text-primary); padding:12px 16px; width:fit-content; max-width:100%; }

/* Contextual help is supplementary; reasons for unavailable actions stay visible. */
.context-help { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0; padding:0; background:transparent; color:var(--text-secondary); border:1px solid var(--border-default); border-radius:50%; cursor:pointer; vertical-align:middle; }
.context-help:hover, .context-help[aria-describedby] { color:var(--text-primary); background:var(--bg-surface-2); border-color:var(--brand-light); }
.context-help-tooltip { position:fixed; z-index:1900; width:max-content; max-width:min(340px, calc(100vw - 24px)); padding:14px 16px; border:1px solid var(--border-strong); border-radius:var(--r-md); background-color:var(--bg-surface-2, #1a2e47); color:var(--text-primary, #f8fafc); box-shadow:0 8px 24px #0006; font-size:.875rem; font-weight:400; line-height:1.65; overflow-wrap:break-word; }
.session-participation-heading { display:flex; align-items:center; gap:10px; }
.session-participation-heading h2 { margin:0; font-size:1rem; font-weight:600; }
.session-participation-main { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-top:16px; }
.session-participation-data { min-width:0; }
.session-response-count { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin:0; color:var(--text-secondary); font-size:.875rem; }
.session-response-count strong { color:var(--text-primary); font-size:1.75rem; line-height:1.2; }
.session-deadline { margin:8px 0 0; color:var(--text-secondary); font-size:.8125rem; }
.session-action-reason { margin:8px 0 0; color:var(--text-secondary); font-size:.875rem; max-width:65ch; }
.session-participation-actions:empty { display:none; }
.session-participation-track { margin-top:18px; height:6px; background:var(--bg-surface-2); border-radius:6px; overflow:hidden; }
.session-participation-track > div { height:100%; background:var(--brand-light); }
.session-result-metadata, .diagnostic-round-metadata { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px 28px; margin:0; }
.session-result-metadata { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:600px; }
.session-result-metadata dt, .diagnostic-round-metadata dt { color:var(--text-secondary); font-size:.75rem; margin-bottom:5px; }
.session-result-metadata dd, .diagnostic-round-metadata dd { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0; color:var(--text-primary); font-size:.9375rem; font-weight:600; line-height:1.5; }
.diagnostic-sector-toggle { font-size:1rem; }
.diagnostic-round { align-items:flex-start; flex-wrap:wrap; gap:20px; }
.diagnostic-round-info { width:100%; }
.diagnostic-round-metadata { width:100%; max-width:780px; }
.diagnostic-round-actions { justify-content:flex-start; }
.diagnostic-round-featured { background:var(--bg-surface-2); }
.diagnostic-round-context { font-size:.8125rem; color:var(--text-secondary); margin:0 0 12px; }
.diagnostic-round-history > summary { cursor:pointer; padding:12px 20px; color:var(--text-secondary); font-size:.8125rem; min-height:44px; }
.diagnostic-round-history > .diagnostic-round { border-top:1px solid var(--border-subtle); }
@media (pointer:coarse) { .context-help { width:44px; height:44px; } }
@media (max-width:767px) {
    .analysis-detail .page-header > * { max-width:100%; }
    .analysis-detail .page-header .flex { flex-wrap:wrap; }
    .analysis-detail .page-title { overflow-wrap:anywhere; }
    .session-detail .page-header > .flex { flex-wrap:wrap; }
    .session-participation-actions, .session-participation-actions .btn { width:100%; }
    .diagnostic-round-metadata { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
    .diagnostic-round-metadata > :last-child { grid-column:1 / -1; }
    .diagnostic-round-actions form { flex:1; }
    .diagnostic-round-actions form .btn { width:100%; }
    .diagnostic-sector-header { flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px; }
    .diagnostic-sector-toggle { width:auto; }
    .diagnostic-state { margin-left:0; }
}
@media (max-width:480px) {
    .diagnostic-round-actions { flex-direction:column; align-items:stretch; }
    .diagnostic-round-actions .btn { width:100%; white-space:normal; text-align:center; }
}