* { box-sizing: border-box; }
html {
min-height: 100%;
background: var(--app-bg);
}
body {
margin: 0;
min-height: 100vh;
color: var(--app-text);
background:
radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--app-primary) 18%, transparent), transparent 36rem),
radial-gradient(circle at 10% 70%, color-mix(in srgb, var(--app-secondary) 12%, transparent), transparent 34rem),
var(--app-bg);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.shell {
width: min(var(--app-content-width), calc(100% - 32px));
margin: 0 auto;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.site-header,
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
padding: 28px 0 22px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.mark {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 13px;
font-weight: 800;
background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
color: #101526;
box-shadow: var(--app-shadow);
}
.brand-logo {
width: 44px;
height: 44px;
border-radius: 13px;
object-fit: contain;
}
.brand strong {
display: block;
font-size: 1.02rem;
letter-spacing: .02em;
}
.brand .sub {
display: block;
color: var(--app-muted);
font-size: .82rem;
margin-top: 2px;
}
.global-header-image {
width: 100%;
max-height: 260px;
overflow: hidden;
border-radius: var(--app-radius-large);
border: 1px solid var(--app-panel-border);
margin-top: 8px;
}
.global-header-image img {
display: block;
width: 100%;
height: 100%;
max-height: 260px;
object-fit: cover;
}
.top-actions,
.guest-actions,
.user-actions {
display: flex;
align-items: center;
gap: 8px;
}
.btn {
border: 1px solid var(--app-panel-border);
background: var(--app-panel);
color: var(--app-text);
border-radius: var(--app-radius-small);
padding: 10px 14px;
cursor: pointer;
transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.btn:hover:not(:disabled) {
transform: translateY(-1px);
background: var(--app-panel-strong);
}
.btn:disabled {
cursor: not-allowed;
opacity: .45;
}
.btn-primary {
border-color: transparent;
background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
color: #0d1323;
font-weight: 800;
}
.btn-ghost { background: transparent; }
.btn-large { padding: 13px 17px; }
.lang-switch {
display: flex;
gap: 6px;
padding: 5px;
border: 1px solid var(--app-panel-border);
background: var(--app-panel);
border-radius: 999px;
}
.lang-btn {
border: 0;
background: transparent;
color: var(--app-muted);
border-radius: 999px;
padding: 7px 11px;
cursor: pointer;
}
.lang-btn.active {
color: #0d1323;
background: var(--app-text);
font-weight: 700;
}
.hero {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 64px 0 72px;
}
.eyebrow {
color: var(--app-primary);
font-size: .78rem;
font-weight: 800;
letter-spacing: .18em;
margin: 0 0 18px;
}
h1 {
max-width: 850px;
margin: 0;
font-size: clamp(2.6rem, 7vw, 6rem);
line-height: .96;
letter-spacing: -.055em;
}
.lead {
max-width: 760px;
margin: 28px 0 0;
color: var(--app-muted);
font-size: clamp(1.05rem, 2vw, 1.35rem);
line-height: 1.62;
}
.lead.small {
font-size: 1.05rem;
margin-top: 16px;
}
.hero-cta {
display: flex;
gap: 10px;
margin-top: 28px;
flex-wrap: wrap;
}
.status-card {
margin-top: 38px;
display: flex;
gap: 14px;
align-items: flex-start;
width: fit-content;
max-width: 740px;
padding: 17px 19px;
border: 1px solid var(--app-panel-border);
background: var(--app-panel);
border-radius: var(--app-radius-medium);
box-shadow: var(--app-shadow);
backdrop-filter: blur(14px);
}
.status-dot {
width: 11px;
height: 11px;
margin-top: 6px;
border-radius: 50%;
background: var(--app-success);
box-shadow: 0 0 0 6px color-mix(in srgb, var(--app-success) 10%, transparent);
flex: 0 0 auto;
}
.status-card p {
color: var(--app-muted);
margin: 5px 0 0;
line-height: 1.5;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 34px;
}
.feature-grid article,
.panel {
padding: 24px;
border: 1px solid var(--app-panel-border);
background: var(--app-panel);
border-radius: var(--app-radius-large);
}
.feature-grid article { min-height: 210px; }
.num {
color: var(--app-primary);
font-weight: 800;
font-size: .78rem;
letter-spacing: .12em;
}
.feature-grid h2,
.panel h2 {
margin: 28px 0 10px;
font-size: 1.18rem;
}
.feature-grid p {
margin: 0;
color: var(--app-muted);
line-height: 1.55;
}
.app-view,
.page-content {
flex: 1;
padding: 54px 0 72px;
}
.dashboard-title {
font-size: clamp(2.3rem, 5vw, 4.7rem);
max-width: 920px;
}
.dashboard-grid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 14px;
margin-top: 34px;
}
.panel-wide {
grid-row: span 2;
min-height: 500px;
}
.panel-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
}
.panel-head h2 {
margin-top: 8px;
font-size: 1.45rem;
}
.empty-state {
margin-top: 28px;
padding: 28px;
border: 1px dashed var(--app-panel-border);
border-radius: var(--app-radius-medium);
color: var(--app-muted);
}
.empty-state strong { color: var(--app-text); }
.empty-state p {
margin: 8px 0 0;
line-height: 1.55;
}
.session-list {
margin-top: 24px;
display: grid;
gap: 10px;
}
.session-row {
padding: 16px;
border: 1px solid var(--app-panel-border);
border-radius: 16px;
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
}
.session-row p {
margin: 4px 0 0;
color: var(--app-muted);
}
.user-chip {
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--app-panel-border);
background: var(--app-panel);
border-radius: 999px;
padding: 5px 10px 5px 5px;
cursor: pointer;
}
.avatar {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
color: #11182a;
font-weight: 900;
}
.stack-form {
display: grid;
gap: 15px;
margin-top: 22px;
}
.stack-form label {
display: grid;
gap: 7px;
color: var(--app-muted);
font-size: .91rem;
}
.stack-form input,
.stack-form select {
width: 100%;
border: 1px solid var(--app-panel-border);
background: color-mix(in srgb, var(--app-bg) 86%, transparent);
color: var(--app-text);
border-radius: var(--app-radius-small);
padding: 12px 13px;
outline: none;
}
.stack-form input:focus,
.stack-form select:focus {
border-color: var(--app-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 12%, transparent);
}
.stack-form small,
.form-status {
color: var(--app-muted);
}
.form-status {
min-height: 1.4em;
margin: 0;
font-size: .9rem;
}
.form-status.error { color: var(--app-danger); }
.form-status.success { color: var(--app-success); }
.account-data {
margin: 22px 0 0;
display: grid;
gap: 16px;
}
.account-data div {
display: grid;
gap: 4px;
}
.account-data dt {
color: var(--app-muted);
font-size: .82rem;
}
.account-data dd {
margin: 0;
overflow-wrap: anywhere;
}
.auth-dialog {
width: min(520px, calc(100% - 24px));
max-height: calc(100vh - 24px);
padding: 0;
border: 0;
border-radius: 24px;
color: var(--app-text);
background: transparent;
}
.auth-dialog::backdrop {
background: rgba(4,8,18,.72);
backdrop-filter: blur(8px);
}
.dialog-card {
position: relative;
background: color-mix(in srgb, var(--app-bg) 88%, white 12%);
border: 1px solid var(--app-panel-border);
border-radius: 24px;
padding: 26px;
box-shadow: var(--app-shadow);
}
.dialog-close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--app-panel-border);
background: var(--app-panel);
cursor: pointer;
font-size: 1.35rem;
}
.auth-tabs {
display: flex;
gap: 6px;
padding: 5px;
margin: 0 46px 30px 0;
border: 1px solid var(--app-panel-border);
border-radius: 14px;
}
.auth-tab {
flex: 1;
border: 0;
background: transparent;
color: var(--app-muted);
padding: 9px 11px;
border-radius: 10px;
cursor: pointer;
}
.auth-tab.active {
background: var(--app-text);
color: #11182a;
font-weight: 800;
}
.dialog-title {
font-size: 2rem;
line-height: 1.05;
letter-spacing: -.035em;
margin: 0;
}
.toast {
position: fixed;
z-index: 100;
left: 50%;
top: 18px;
transform: translate(-50%, -20px);
opacity: 0;
pointer-events: none;
padding: 11px 15px;
border: 1px solid var(--app-panel-border);
border-radius: 999px;
background: color-mix(in srgb, var(--app-bg) 90%, white 10%);
box-shadow: var(--app-shadow);
transition: opacity .18s ease, transform .18s ease;
}
.toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
/* Central app navigation for future dedicated pages */
.app-navigation {
display: flex;
gap: 8px;
padding: 8px 0 0;
border-top: 1px solid var(--app-panel-border);
}
.app-nav-item {
display: inline-flex;
gap: 7px;
align-items: center;
padding: 9px 11px;
border-radius: var(--app-radius-small);
color: var(--app-muted);
}
.app-nav-item:hover {
background: var(--app-panel);
color: var(--app-text);
}
.mobile-navigation {
display: none;
}
.site-footer {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 20px;
padding: 24px 0 28px;
color: var(--app-muted);
border-top: 1px solid var(--app-panel-border);
font-size: .86rem;
}
.footer-links {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.footer-links a:hover {
color: var(--app-text);
}
@media (max-width: 900px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
.panel-wide {
grid-row: auto;
min-height: auto;
}
}
@media (max-width: 760px) {
.shell {
width: min(100% - 22px, var(--app-content-width));
}
.site-header,
.topbar {
align-items: flex-start;
padding-top: 18px;
}
.top-actions {
flex-wrap: wrap;
justify-content: flex-end;
}
.guest-actions .btn-ghost,
.user-actions #logoutBtn {
display: none;
}
.hero {
padding: 42px 0 50px;
}
h1 {
font-size: clamp(2.6rem, 13vw, 4.7rem);
}
.feature-grid {
grid-template-columns: 1fr;
}
.feature-grid article {
min-height: auto;
}
.panel-head {
flex-direction: column;
}
.site-footer {
grid-template-columns: 1fr;
text-align: center;
}
.mobile-navigation {
position: sticky;
bottom: 0;
z-index: 20;
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--app-panel-border);
background: color-mix(in srgb, var(--app-bg) 94%, transparent);
backdrop-filter: blur(16px);
}
.mobile-navigation a {
display: grid;
place-items: center;
gap: 3px;
padding: 10px 6px;
color: var(--app-muted);
}
}
/* APP2 v0.2.0 – Sessionverwaltung */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.session-dialog {
width: min(820px, calc(100% - 24px));
max-height: calc(100vh - 24px);
padding: 0;
border: 0;
border-radius: 24px;
color: var(--app-text);
background: transparent;
}
.session-dialog::backdrop {
background: rgba(4, 8, 18, .72);
backdrop-filter: blur(8px);
}
.session-dialog-card {
max-height: calc(100vh - 24px);
overflow: auto;
}
.dialog-lead {
margin: 12px 42px 0 0;
color: var(--app-muted);
line-height: 1.55;
}
.session-form {
display: grid;
gap: 16px;
margin-top: 24px;
}
.form-section {
padding: 18px;
border: 1px solid var(--app-panel-border);
border-radius: var(--app-radius-medium);
background: color-mix(in srgb, var(--app-panel) 76%, transparent);
}
.form-section h3 {
margin: 0 0 14px;
font-size: .96rem;
}
.session-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.session-form-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.field-span-2 {
grid-column: span 2;
}
.session-form label {
display: grid;
gap: 7px;
color: var(--app-muted);
font-size: .91rem;
}
.session-form input,
.session-form select,
.session-form textarea {
width: 100%;
border: 1px solid var(--app-panel-border);
background: color-mix(in srgb, var(--app-bg) 86%, transparent);
color: var(--app-text);
border-radius: var(--app-radius-small);
padding: 12px 13px;
outline: none;
}
.session-form textarea {
resize: vertical;
min-height: 100px;
}
.session-form input:focus,
.session-form select:focus,
.session-form textarea:focus {
border-color: var(--app-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 12%, transparent);
}
.checkbox-card {
grid-template-columns: auto 1fr !important;
align-items: flex-start;
gap: 12px !important;
cursor: pointer;
}
.checkbox-card input {
width: 20px;
height: 20px;
margin-top: 2px;
}
.checkbox-card strong {
display: block;
color: var(--app-text);
margin-bottom: 5px;
}
.checkbox-card small {
display: block;
color: var(--app-muted);
line-height: 1.5;
}
.session-form-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.session-row {
align-items: center;
}
.session-row-main {
min-width: 0;
}
.session-row-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
margin-top: 5px;
color: var(--app-muted);
font-size: .88rem;
}
.session-row-actions {
display: flex;
align-items: center;
gap: 9px;
}
.session-badge {
display: inline-flex;
align-items: center;
padding: 5px 8px;
border: 1px solid var(--app-panel-border);
border-radius: 999px;
color: var(--app-muted);
font-size: .72rem;
font-weight: 800;
letter-spacing: .06em;
}
.session-edit-btn {
padding: 8px 10px;
font-size: .84rem;
}
@media (max-width: 760px) {
.session-dialog {
width: calc(100% - 12px);
max-height: calc(100vh - 12px);
}
.session-dialog-card {
max-height: calc(100vh - 12px);
border-radius: 20px;
padding: 20px 16px;
}
.session-form-grid,
.session-form-grid-3 {
grid-template-columns: 1fr;
}
.field-span-2 {
grid-column: auto;
}
.session-row {
grid-template-columns: 1fr;
}
.session-row-actions {
justify-content: space-between;
}
.session-form-actions .btn {
flex: 1;
}
}
/* ================================================================
APP2 v0.3 – Session protocol / S1-S7 manual structure
================================================================ */
.session-progress {
color: var(--app-muted);
font-size: .76rem;
text-align: right;
}
.protocol-dialog {
width: min(1180px, calc(100% - 24px));
max-height: calc(100vh - 20px);
padding: 0;
border: 0;
background: transparent;
color: var(--app-text);
}
.protocol-dialog::backdrop {
background: rgba(4,8,18,.78);
backdrop-filter: blur(8px);
}
.protocol-dialog-card {
min-height: min(820px, calc(100vh - 24px));
background: color-mix(in srgb, var(--app-bg) 92%, white 8%);
border: 1px solid var(--app-panel-border);
border-radius: 24px;
padding: 26px;
box-shadow: var(--app-shadow);
}
.protocol-dialog-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
padding-right: 44px;
}
.protocol-summary {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.protocol-summary span,
.protocol-entry-tags span {
border: 1px solid var(--app-panel-border);
background: var(--app-panel);
border-radius: 999px;
padding: 6px 9px;
color: var(--app-muted);
font-size: .76rem;
}
.protocol-workspace {
display: grid;
grid-template-columns: 270px minmax(0, 1fr);
gap: 16px;
margin-top: 24px;
}
.protocol-pages-panel,
.protocol-page-panel {
border: 1px solid var(--app-panel-border);
background: var(--app-panel);
border-radius: var(--app-radius-large);
min-height: 610px;
}
.protocol-pages-panel {
padding: 16px;
}
.protocol-page-panel {
padding: 22px;
}
.protocol-panel-head,
.protocol-entries-head,
.protocol-page-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.protocol-panel-head small,
.protocol-entries-head small,
.protocol-page-settings small {
display: block;
margin-top: 4px;
color: var(--app-muted);
line-height: 1.4;
}
.protocol-pages-list,
.protocol-entries-list {
display: grid;
gap: 9px;
margin-top: 16px;
}
.protocol-page-item {
width: 100%;
display: grid;
gap: 5px;
text-align: left;
border: 1px solid var(--app-panel-border);
background: color-mix(in srgb, var(--app-panel) 70%, transparent);
color: var(--app-text);
border-radius: 14px;
padding: 12px;
cursor: pointer;
}
.protocol-page-item span {
color: var(--app-muted);
font-size: .78rem;
}
.protocol-page-item.active {
border-color: var(--app-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 10%, transparent);
}
.protocol-empty {
margin-top: 16px;
padding: 18px;
border: 1px dashed var(--app-panel-border);
border-radius: 14px;
color: var(--app-muted);
line-height: 1.5;
}
.protocol-empty-large {
min-height: 360px;
display: grid;
place-items: center;
text-align: center;
}
.protocol-page-head h3 {
margin: 7px 0 0;
font-size: 1.35rem;
}
.protocol-page-actions,
.protocol-entry-controls,
.protocol-inline-actions {
display: flex;
gap: 6px;
}
.icon-action {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid var(--app-panel-border);
background: var(--app-panel);
color: var(--app-text);
border-radius: 10px;
cursor: pointer;
}
.icon-action:disabled {
opacity: .35;
cursor: not-allowed;
}
.icon-action.danger,
.danger-text {
color: var(--app-danger);
}
.protocol-page-settings {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: end;
margin-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--app-panel-border);
}
.protocol-page-settings label,
.protocol-entry-form label {
display: grid;
gap: 7px;
color: var(--app-muted);
font-size: .9rem;
}
.protocol-page-settings select,
.protocol-entry-form select,
.protocol-entry-form textarea {
width: 100%;
border: 1px solid var(--app-panel-border);
background: color-mix(in srgb, var(--app-bg) 88%, transparent);
color: var(--app-text);
border-radius: 12px;
padding: 11px 12px;
}
.protocol-entries-head {
margin-top: 20px;
}
.protocol-entry-card {
border: 1px solid var(--app-panel-border);
background: color-mix(in srgb, var(--app-panel) 72%, transparent);
border-radius: 16px;
padding: 14px;
}
.protocol-entry-card-head,
.protocol-entry-card-footer {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
}
.protocol-entry-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.protocol-stage-tag {
color: var(--app-primary) !important;
}
.protocol-raw-text {
margin: 13px 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
line-height: 1.55;
}
.protocol-entry-card-footer small {
color: var(--app-muted);
white-space: pre-wrap;
}
.protocol-entry-form {
display: grid;
gap: 13px;
margin-top: 18px;
padding: 18px;
border: 1px solid var(--app-primary);
border-radius: 16px;
background: color-mix(in srgb, var(--app-panel) 78%, transparent);
}
.protocol-entry-grid {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: 12px;
}
.protocol-entry-form-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
@media (max-width: 820px) {
.protocol-dialog {
width: 100%;
max-height: 100vh;
margin: 0;
}
.protocol-dialog-card {
min-height: 100vh;
border-radius: 0;
padding: 18px 12px 34px;
}
.protocol-dialog-head {
display: grid;
padding-right: 42px;
}
.protocol-summary {
justify-content: flex-start;
}
.protocol-workspace {
grid-template-columns: 1fr;
}
.protocol-pages-panel,
.protocol-page-panel {
min-height: auto;
}
.protocol-pages-list {
display: flex;
overflow-x: auto;
gap: 8px;
padding-bottom: 4px;
}
.protocol-page-item {
min-width: 145px;
}
.protocol-page-settings,
.protocol-entry-grid {
grid-template-columns: 1fr;
}
.protocol-entry-card-head,
.protocol-entry-card-footer {
display: grid;
}
.protocol-inline-actions {
justify-content: flex-end;
}
}
/* v0.10.13 - registration bot trap and username availability */
.register-honeypot {
position: absolute !important;
left: -10000px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
.username-availability { display: block; min-height: 1.1em; margin-top: 4px; font-size: .75rem; color: var(--app-muted); }
.username-availability.available { color: var(--app-success); }
.username-availability.unavailable { color: var(--app-danger); }
/* v0.10.15 - global mailbox */
.signal-inbox-button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:38px;border:1px solid var(--app-panel-border);border-radius:999px;background:var(--app-panel);color:var(--app-muted);cursor:pointer}.signal-inbox-button:hover{color:var(--app-text);border-color:color-mix(in srgb,var(--app-primary) 45%,var(--app-panel-border))}.signal-inbox-button.has-unread{color:#74df8b;border-color:#4caa63}.signal-inbox-icon{font-size:1.05rem}.signal-inbox-count{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#38b85a;color:#07130a;font-size:.68rem;font-weight:900;line-height:19px;text-align:center}.signal-inbox-dialog{width:min(660px,calc(100vw - 24px));max-height:86vh;padding:0}.signal-inbox-card{width:auto;max-height:82vh;overflow:auto}.signal-inbox-list{display:grid;gap:7px}.signal-inbox-item{display:grid;gap:3px;width:100%;padding:11px 12px;border:1px solid var(--app-panel-border);border-radius:10px;background:var(--app-panel);color:var(--app-text);text-align:left;cursor:pointer}.signal-inbox-item.is-unread{border-color:#4caa63;background:color-mix(in srgb,#38b85a 8%,var(--app-panel))}.signal-inbox-item span,.signal-inbox-item small{color:var(--app-muted);font-size:.76rem}.signal-inbox-item small{font-size:.68rem}
/* ================================================================
SIGNALREITER v0.10.16b - session views, sharing management, inbox
================================================================ */
.signal-inbox-button { position: relative; z-index: 6; pointer-events: auto; cursor: pointer; }
.session-view-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.session-view-tab { border:1px solid var(--app-panel-border); border-radius:999px; background:transparent; color:var(--app-muted); padding:8px 13px; cursor:pointer; font-weight:700; }
.session-view-tab.active { color:var(--app-text); border-color:color-mix(in srgb,var(--app-primary) 60%,var(--app-panel-border)); background:color-mix(in srgb,var(--app-primary) 12%,transparent); }
.session-view-panel.hidden,.session-view-tab.hidden { display:none!important; }
.shared-session-owner { margin-top:5px; color:var(--app-primary); font-size:.82rem; font-weight:800; }
.session-share-meta-button { border:0; background:transparent; color:var(--app-primary); padding:0; font:inherit; cursor:pointer; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.session-share-meta-button:hover,.session-share-meta-button:focus-visible { color:var(--app-text); outline:none; }
.session-share-duration-custom { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.session-share-duration-custom.hidden { display:none!important; }
.session-share-duration-help { grid-column:1/-1; margin-top:-2px; }
.session-share-invite-row small { display:block; }
.session-share-leave { border-color:color-mix(in srgb,var(--app-danger) 38%,var(--app-panel-border)); }
@media(max-width:680px){.session-share-duration-custom{grid-template-columns:1fr}}
/* v0.10.18 FULL FULL - compact admin management */
.admin-user-head-compact{display:grid;grid-template-columns:minmax(240px,1fr) minmax(220px,.8fr) auto;gap:16px;padding:0 12px 8px;align-items:end;font-size:.78rem;opacity:.8}
.admin-user-list{display:grid;gap:10px}.admin-user-compact{border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.025);overflow:hidden}.admin-user-summary{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,.8fr) auto;gap:16px;align-items:center;padding:14px}.admin-user-name,.admin-user-meta{display:grid;gap:3px;min-width:0}.admin-user-name strong,.admin-user-name small,.admin-user-meta small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-user-meta{justify-items:start}.admin-user-detail{border-top:1px solid rgba(255,255,255,.1);padding:16px;background:rgba(5,10,26,.2)}
.admin-detail-tabs{display:flex;gap:8px;overflow-x:auto;padding:0 0 12px;scrollbar-width:thin}.admin-detail-tab{flex:0 0 auto;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.16);color:inherit;border-radius:999px;padding:9px 13px;font-weight:700;cursor:pointer}.admin-detail-tab.active{outline:2px solid rgba(255,255,255,.8);outline-offset:-2px}.admin-detail-tab.is-alert{border-color:rgba(255,90,90,.55)}.admin-detail-pane{display:grid;gap:12px;padding:12px 2px 4px}.admin-detail-pane h3,.admin-detail-pane h4{margin:6px 0 0}.admin-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.admin-detail-pane label{display:grid;gap:6px}.admin-detail-pane input,.admin-detail-pane select,.admin-detail-pane textarea{width:100%;min-width:0}.admin-inline-actions,.admin-inline-fields{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.admin-inline-fields input{flex:1 1 200px}.admin-check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}.admin-check-line{display:flex!important;align-items:flex-start;gap:8px!important}.admin-check-line input[type="checkbox"]{width:auto;flex:0 0 auto;margin-top:2px}.admin-method-rights{display:grid;gap:8px}.admin-rv-profile{display:grid;gap:8px}.admin-rv-row{display:grid;grid-template-columns:minmax(200px,1fr) minmax(160px,.6fr) minmax(220px,1fr);gap:12px;padding:11px 12px;border:1px solid rgba(255,255,255,.1);border-radius:12px}.admin-moderation-summary{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:12px}.admin-moderation-summary.is-review{border-color:rgba(255,80,80,.58);background:rgba(150,20,30,.12)}.admin-danger-zone{margin-top:10px;padding:12px;border:1px solid rgba(255,70,70,.42);border-radius:12px}.admin-history-list{display:grid;gap:8px}.admin-history-row{display:grid;gap:5px;padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:11px}.admin-history-row small{opacity:.76}
@media(max-width:760px){.admin-user-head-compact{display:none}.admin-user-summary{grid-template-columns:1fr auto}.admin-user-meta{grid-column:1/-1;grid-row:2}.admin-rv-row{grid-template-columns:1fr}.admin-user-detail{padding:12px}.admin-detail-tabs{margin-right:-12px;padding-right:12px}}
/* v0.10.18 FULL FULL: session create/manage is a full work page, not a modal */
body.session-page-open{overflow:hidden}.session-page{position:fixed!important;inset:0!important;z-index:8800!important;display:block!important;width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;background:var(--app-bg,#0d1324)!important;overflow:auto!important}.session-page.hidden{display:none!important}.session-page .session-dialog-card{width:min(1240px,calc(100% - 32px))!important;max-width:none!important;max-height:none!important;margin:24px auto 48px!important;border-radius:18px!important;overflow:visible!important}.session-page::backdrop{display:none!important}@media(max-width:680px){.session-page .session-dialog-card{width:calc(100% - 16px)!important;margin:8px auto 24px!important;border-radius:14px!important}}
/* ================================================================
SIGNALREITER v0.10.19 - overview start page + desktop workspace sidebar
================================================================ */
#appView {
padding-top: 24px;
}
#appView > .workspace-dashboard-head,
#appView > .dashboard-head {
display: none !important;
}
.workspace-panel[data-workspace-panel="sessions"] > .panel > .panel-head .num,
.workspace-panel[data-workspace-panel="sessions"] .shared-sessions-head .num {
display: none !important;
}
@media (min-width: 761px) {
#appView:not(.hidden) {
display: grid !important;
grid-template-columns: 188px minmax(0, 1fr);
column-gap: 24px;
align-items: start;
width: 100%;
}
#workspaceTabs {
grid-column: 1;
grid-row: 1;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 7px !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0;
position: sticky;
top: 18px;
align-self: start;
}
#workspaceTabs .workspace-tab {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
justify-content: flex-start !important;
text-align: left !important;
white-space: normal !important;
}
#workspaceTabs .workspace-tab[data-workspace-tab="overview"] { order: 1; }
#workspaceTabs .workspace-tab[data-workspace-tab="sessions"] { order: 2; }
#workspaceTabs .workspace-tab[data-workspace-tab="projects"] { order: 3; }
#workspaceTabs .workspace-tab[data-workspace-tab="evaluation"] { order: 4; }
#workspaceTabs .workspace-tab[data-workspace-tab="analysis"] { order: 5; }
#workspaceTabs .workspace-tab[data-workspace-tab="assistant"] { order: 6; }
#workspaceTabs .workspace-tab[data-workspace-tab="research"] { order: 7; }
#workspaceTabs .workspace-tab[data-workspace-tab="moderation"] { order: 20; margin-top: 20px !important; }
#workspaceTabs .workspace-tab[data-workspace-tab="admin"] { order: 21; margin-top: 20px !important; }
#workspaceTabs .workspace-tab[data-workspace-tab="moderation"]:not(.hidden) ~ .workspace-tab[data-workspace-tab="admin"] {
margin-top: 0 !important;
}
.workspace-panels {
grid-column: 2;
grid-row: 1;
min-width: 0;
width: 100%;
}
.workspace-panels > .workspace-panel,
.workspace-panels > .workspace-panel > .panel {
min-width: 0;
}
}
@media (max-width: 760px) {
#appView { padding-top: 20px; }
}
/* v0.10.19 - rough personal overview/start page */
.overview-panel { min-height: 360px; }
.overview-identity {
margin-top: 22px;
padding: 18px;
border: 1px solid var(--app-panel-border);
border-radius: var(--app-radius-medium);
background: color-mix(in srgb, var(--app-panel) 74%, transparent);
}
.overview-identity span { display: block; color: var(--app-muted); font-size: .82rem; }
.overview-identity strong { display: block; margin-top: 5px; font-size: 1.28rem; overflow-wrap: anywhere; }
.overview-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.overview-stat-card {
width: 100%;
min-height: 118px;
padding: 18px;
border: 1px solid var(--app-panel-border);
border-radius: var(--app-radius-medium);
background: color-mix(in srgb, var(--app-panel) 78%, transparent);
color: var(--app-text);
text-align: left;
cursor: pointer;
transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.overview-stat-card:hover { transform: translateY(-1px); background: var(--app-panel-strong); border-color: color-mix(in srgb, var(--app-primary) 40%, var(--app-panel-border)); }
.overview-stat-card span { display: block; color: var(--app-muted); font-size: .88rem; }
.overview-stat-card strong { display: block; margin-top: 9px; font-size: 2rem; line-height: 1; }
@media (max-width: 760px) { .overview-stats { grid-template-columns: 1fr; } .overview-stat-card { min-height: 96px; } }
/* ================================================================
SIGNALREITER v0.11.3 - compact session search + expandable RV filters
================================================================ */
.session-browser-panel { min-height: 500px; }
.session-browser-head { align-items: center; }
.session-browser-head h2 { margin: 0; }
.session-browser-toolbar {
display: grid;
gap: 7px;
margin-top: 12px;
padding: 0;
border: 0;
background: transparent;
}
.session-browser-compact-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 9px;
align-items: center;
}
.session-search-field { display: block; min-width: 0; }
.session-search-field input,
.session-browser-select select {
width: 100%;
min-width: 0;
border: 1px solid var(--app-panel-border);
background: color-mix(in srgb, var(--app-bg) 86%, transparent);
color: var(--app-text);
border-radius: var(--app-radius-small);
outline: none;
}
.session-search-field input {
min-height: 40px;
padding: 8px 12px;
font-size: .95rem;
}
.session-search-field input:focus,
.session-browser-select select:focus {
border-color: var(--app-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 12%, transparent);
}
.session-browser-compact-actions {
display: flex;
align-items: center;
gap: 7px;
}
.session-filter-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 40px;
padding: 7px 11px;
border: 1px solid var(--app-panel-border);
border-radius: var(--app-radius-small);
background: color-mix(in srgb, var(--app-bg) 75%, transparent);
color: var(--app-text);
cursor: pointer;
font: inherit;
font-weight: 750;
}
.session-filter-toggle:hover,
.session-filter-toggle:focus-visible {
border-color: color-mix(in srgb, var(--app-primary) 50%, var(--app-panel-border));
}
.session-filter-toggle[aria-expanded="true"] {
background: color-mix(in srgb, var(--app-primary) 12%, var(--app-panel));
}
.session-filter-toggle[aria-expanded="true"] .session-filter-toggle-icon { transform: rotate(180deg); }
.session-filter-toggle-icon { transition: transform .15s ease; }
.session-filter-active-badge {
display: inline-grid;
place-items: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 999px;
background: var(--app-primary);
color: #0d1323;
font-size: .72rem;
font-weight: 900;
}
.session-filter-active-badge[hidden] { display: none !important; }
.session-advanced-filters {
margin-top: 2px;
padding: 12px;
border: 1px solid var(--app-panel-border);
border-radius: var(--app-radius-medium);
background: color-mix(in srgb, var(--app-panel) 58%, transparent);
}
.session-advanced-filters[hidden] { display: none !important; }
.session-filter-grid {
display: grid;
grid-template-columns: repeat(4, minmax(145px, 1fr));
gap: 9px;
}
.session-browser-select {
display: grid;
gap: 5px;
min-width: 0;
}
.session-browser-select > span {
color: var(--app-muted);
font-size: .75rem;
font-weight: 700;
}
.session-browser-select select {
min-height: 38px;
padding: 7px 9px;
}
.session-browser-select.is-disabled { opacity: .48; }
.session-layout-switch {
display: flex;
gap: 4px;
padding: 3px;
border: 1px solid var(--app-panel-border);
border-radius: var(--app-radius-small);
background: color-mix(in srgb, var(--app-bg) 75%, transparent);
}
.session-layout-button {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 32px;
padding: 5px 8px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--app-muted);
cursor: pointer;
}
.session-layout-button.active {
background: color-mix(in srgb, var(--app-primary) 18%, var(--app-panel));
color: var(--app-text);
font-weight: 800;
}
.session-browser-filter-footer {
display: flex;
justify-content: flex-end;
margin-top: 9px;
}
.session-browser-statusbar {
display: flex;
justify-content: flex-start;
align-items: center;
min-height: 18px;
color: var(--app-muted);
font-size: .78rem;
}
.session-filter-reset {
border: 0;
background: transparent;
color: var(--app-muted);
padding: 3px 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.session-filter-reset:hover { color: var(--app-text); }
.session-browser-results { margin-top: 7px; }
.session-browser-results.session-layout-list { display: grid; gap: 10px; }
.session-browser-results.session-layout-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.session-browser-item { min-width: 0; }
.session-browser-item-heading {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.session-browser-item-heading > strong { font-size: 1rem; }
.session-browser-meta { align-items: center; }
.session-browser-badge {
display: inline-flex;
align-items: center;
min-height: 23px;
padding: 3px 7px;
border: 1px solid var(--app-panel-border);
border-radius: 999px;
color: var(--app-muted);
font-size: .69rem;
font-weight: 800;
white-space: nowrap;
}
.session-browser-badge.feedback-available {
border-color: color-mix(in srgb, var(--app-success) 52%, var(--app-panel-border));
color: var(--app-success);
}
.session-browser-badge.feedback-partial,
.session-browser-badge.feedback-pending {
border-color: color-mix(in srgb, var(--app-primary) 45%, var(--app-panel-border));
color: var(--app-primary);
}
.session-browser-actions { flex-wrap: wrap; justify-content: flex-end; }
.session-layout-grid .session-browser-item {
grid-template-columns: 1fr;
align-content: space-between;
min-height: 230px;
padding: 17px;
}
.session-layout-grid .session-browser-actions {
margin-top: 15px;
justify-content: flex-start;
}
.session-layout-grid .session-progress {
width: 100%;
text-align: left;
margin-bottom: 2px;
}
.session-layout-grid .session-browser-meta {
margin-top: 10px;
gap: 7px 10px;
}
.session-layout-grid .shared-session-owner { margin-top: 8px; }
@media (max-width: 1100px) {
.session-filter-grid { grid-template-columns: repeat(2, minmax(145px, 1fr)); }
.session-browser-results.session-layout-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.session-browser-compact-row { grid-template-columns: 1fr; }
.session-browser-compact-actions { justify-content: space-between; }
.session-filter-toggle { flex: 0 0 auto; }
.session-layout-switch { margin-left: auto; }
.session-filter-grid { grid-template-columns: 1fr; }
.session-advanced-filters { padding: 10px; }
.session-browser-item { grid-template-columns: 1fr; }
.session-browser-actions { justify-content: flex-start; }
.session-progress { width: 100%; text-align: left; }
}
/* ================================================================
SIGNALREITER v0.11.6 - concise, clickable own-session cards
================================================================ */
.session-browser-results .session-own-card {
position: relative;
display: block;
min-width: 0;
min-height: 112px;
padding: 17px 62px 17px 18px;
overflow: hidden;
cursor: pointer;
border: 1px solid color-mix(in srgb, var(--app-panel-border) 88%, var(--app-primary) 12%);
border-radius: 17px;
background:
linear-gradient(135deg,
color-mix(in srgb, var(--app-panel-strong) 92%, var(--app-primary) 8%) 0%,
color-mix(in srgb, var(--app-panel) 96%, transparent) 58%,
color-mix(in srgb, var(--app-bg) 91%, var(--app-panel) 9%) 100%);
box-shadow: 0 8px 24px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.025);
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.session-browser-results .session-own-card::before {
content: '';
position: absolute;
inset: 14px auto 14px 0;
width: 3px;
border-radius: 0 4px 4px 0;
background: linear-gradient(180deg,
color-mix(in srgb, var(--app-primary) 88%, white 12%),
color-mix(in srgb, var(--app-primary) 38%, transparent));
opacity: .78;
}
.session-browser-results .session-own-card:hover,
.session-browser-results .session-own-card:focus-visible {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--app-primary) 46%, var(--app-panel-border));
box-shadow: 0 12px 30px rgba(0,0,0,.15), 0 0 0 1px color-mix(in srgb, var(--app-primary) 8%, transparent);
outline: none;
}
.session-browser-results .session-own-card:focus-visible {
box-shadow: 0 12px 30px rgba(0,0,0,.15), 0 0 0 3px color-mix(in srgb, var(--app-primary) 17%, transparent);
}
.session-card-content {
display: grid;
gap: 8px;
min-width: 0;
}
.session-card-heading {
gap: 7px;
min-width: 0;
}
.session-browser-item-heading > .session-card-title {
max-width: 100%;
color: var(--app-text);
font-size: 1.04rem;
line-height: 1.3;
font-weight: 850;
letter-spacing: -.01em;
overflow-wrap: anywhere;
}
.session-card-badge {
min-height: 21px;
padding: 2px 7px;
border-color: color-mix(in srgb, var(--app-panel-border) 80%, var(--app-text) 20%);
background: color-mix(in srgb, var(--app-bg) 58%, transparent);
color: color-mix(in srgb, var(--app-text) 76%, var(--app-muted) 24%);
font-size: .66rem;
letter-spacing: .01em;
}
.session-card-badge.training {
border-color: color-mix(in srgb, var(--app-primary) 34%, var(--app-panel-border));
background: color-mix(in srgb, var(--app-primary) 9%, transparent);
}
.session-card-badge.feedback {
border-color: color-mix(in srgb, var(--app-success) 46%, var(--app-panel-border));
background: color-mix(in srgb, var(--app-success) 7%, transparent);
color: color-mix(in srgb, var(--app-success) 82%, var(--app-text) 18%);
}
.session-card-badge.project-copy {
border-color: color-mix(in srgb, var(--app-primary) 48%, var(--app-panel-border));
background: color-mix(in srgb, var(--app-primary) 12%, transparent);
color: color-mix(in srgb, var(--app-primary) 82%, var(--app-text) 18%);
}
.session-card-keyline {
color: color-mix(in srgb, var(--app-text) 80%, var(--app-muted) 20%);
font-size: .86rem;
line-height: 1.45;
font-variant-numeric: tabular-nums;
}
.session-card-info-line {
min-width: 0;
color: var(--app-muted);
font-size: .80rem;
line-height: 1.45;
}
.session-card-share-line {
color: color-mix(in srgb, var(--app-text) 65%, var(--app-muted) 35%);
}
.session-card-feedback-line {
display: -webkit-box;
max-width: 880px;
overflow: hidden;
color: color-mix(in srgb, var(--app-text) 72%, var(--app-muted) 28%);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.session-card-chevron {
position: absolute;
top: 50%;
right: 18px;
width: 31px;
height: 31px;
display: grid;
place-items: center;
border: 1px solid color-mix(in srgb, var(--app-panel-border) 82%, var(--app-primary) 18%);
border-radius: 999px;
background: color-mix(in srgb, var(--app-bg) 64%, transparent);
color: color-mix(in srgb, var(--app-text) 62%, var(--app-muted) 38%);
font-size: 1.45rem;
font-weight: 500;
line-height: 1;
transform: translateY(-50%);
pointer-events: none;
transition: transform .16s ease, color .16s ease, border-color .16s ease, background-color .16s ease;
}
.session-own-card:hover .session-card-chevron,
.session-own-card:focus-visible .session-card-chevron {
transform: translate(2px,-50%);
color: var(--app-text);
border-color: color-mix(in srgb, var(--app-primary) 52%, var(--app-panel-border));
background: color-mix(in srgb, var(--app-primary) 10%, var(--app-panel));
}
.session-layout-grid .session-own-card {
min-height: 168px;
padding: 18px 58px 18px 18px;
}
.session-layout-grid .session-own-card .session-card-feedback-line {
-webkit-line-clamp: 3;
line-clamp: 3;
}
@media (max-width: 760px) {
.session-browser-results .session-own-card,
.session-layout-grid .session-own-card {
min-height: 0;
padding: 15px 48px 15px 15px;
}
.session-browser-results .session-own-card::before { inset-block: 12px; }
.session-card-chevron { right: 11px; width: 28px; height: 28px; font-size: 1.3rem; }
.session-card-keyline { font-size: .82rem; }
.session-card-info-line { font-size: .77rem; }
}
/* v0.11.6 - functions live inside an opened session, not on the Sessions overview. */
.session-quick-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
margin: 14px 0 16px;
padding: 6px;
border: 1px solid var(--app-panel-border);
border-radius: 13px;
background: color-mix(in srgb, var(--app-bg) 54%, transparent);
}
.session-quick-nav.hidden { display: none !important; }
.session-quick-nav-item {
min-height: 34px;
padding: 6px 10px;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--app-muted);
font: inherit;
font-size: .82rem;
font-weight: 750;
cursor: pointer;
}
.session-quick-nav-item:hover,
.session-quick-nav-item:focus-visible {
color: var(--app-text);
background: color-mix(in srgb, var(--app-primary) 8%, var(--app-panel));
outline: none;
}
.session-quick-nav-item.active {
color: var(--app-text);
background: color-mix(in srgb, var(--app-primary) 16%, var(--app-panel));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-primary) 20%, transparent);
cursor: default;
}
@media (max-width: 620px) {
.session-quick-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.session-quick-nav-item { text-align: center; }
}
/* ================================================================
SIGNALREITER v0.11.7 - warm, compact session tiles
================================================================ */
.session-browser-results.session-layout-list {
gap: 7px;
}
.session-browser-results.session-layout-grid {
grid-template-columns: repeat(auto-fill, minmax(270px, 310px));
justify-content: start;
align-items: start;
gap: 11px;
}
.session-browser-results .session-own-card {
min-height: 0;
padding: 13px 54px 13px 14px;
border: 1px solid color-mix(in srgb, var(--app-panel-border) 76%, #f2c96f 24%);
border-radius: 13px;
background:
linear-gradient(118deg,
color-mix(in srgb, var(--app-panel-strong) 88%, #f4d47f 12%) 0%,
color-mix(in srgb, var(--app-panel) 95%, #f0c766 5%) 54%,
color-mix(in srgb, var(--app-panel) 98%, #ffe4a2 2%) 100%);
box-shadow:
0 5px 15px rgba(0,0,0,.09),
inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, filter .14s ease;
}
.session-browser-results .session-own-card::before {
display: none;
}
.session-browser-results .session-own-card:hover,
.session-browser-results .session-own-card:focus-visible {
transform: translateY(-1px);
border-color: color-mix(in srgb, #f3ca6b 48%, var(--app-panel-border));
box-shadow:
0 9px 22px rgba(0,0,0,.13),
0 0 0 1px color-mix(in srgb, #f3ca6b 10%, transparent),
inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
filter: brightness(1.025);
outline: none;
}
.session-browser-results .session-own-card:focus-visible {
box-shadow:
0 9px 22px rgba(0,0,0,.13),
0 0 0 3px color-mix(in srgb, #f3ca6b 22%, transparent);
}
.session-card-content {
gap: 6px;
}
.session-card-heading {
gap: 6px;
}
.session-browser-item-heading > .session-card-title {
font-size: .98rem;
line-height: 1.24;
font-weight: 850;
}
.session-card-badge {
min-height: 18px;
padding: 1px 6px;
border-radius: 5px;
font-size: .61rem;
line-height: 1.2;
font-weight: 850;
}
.session-card-badge.training {
border-color: color-mix(in srgb, #74dfd0 48%, var(--app-panel-border));
background: color-mix(in srgb, #74dfd0 14%, var(--app-panel));
color: color-mix(in srgb, #9af0e4 88%, var(--app-text) 12%);
}
.session-card-badge.feedback {
border-color: color-mix(in srgb, #f4c967 58%, var(--app-panel-border));
background: color-mix(in srgb, #f4c967 15%, var(--app-panel));
color: color-mix(in srgb, #ffe09a 90%, var(--app-text) 10%);
}
.session-card-badge.project-copy {
border-color: color-mix(in srgb, #bd9cff 55%, var(--app-panel-border));
background: color-mix(in srgb, #a982ff 15%, var(--app-panel));
color: color-mix(in srgb, #d3bdff 90%, var(--app-text) 10%);
}
.session-card-keyline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px 8px;
font-size: .78rem;
line-height: 1.35;
}
.session-card-target-chip {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 2px 7px;
border: 1px solid color-mix(in srgb, #efc15c 28%, var(--app-panel-border));
border-radius: 6px;
background: color-mix(in srgb, #e9bd58 8%, var(--app-bg));
color: color-mix(in srgb, #ffe19a 52%, var(--app-text) 48%);
font-weight: 760;
font-variant-numeric: tabular-nums;
}
.session-card-date {
color: color-mix(in srgb, var(--app-text) 73%, var(--app-muted) 27%);
font-variant-numeric: tabular-nums;
}
.session-card-info-line {
font-size: .75rem;
line-height: 1.36;
}
.session-card-share-line {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px 7px;
}
.session-card-share-label {
color: var(--app-muted);
}
.session-card-share-people {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
}
.session-card-share-person {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 21px;
padding: 2px 6px;
border: 1px solid color-mix(in srgb, var(--app-panel-border) 88%, #8fb8ff 12%);
border-radius: 6px;
background: color-mix(in srgb, var(--app-bg) 67%, transparent);
}
.session-card-share-person + .session-card-share-person::before {
content: ',';
margin-right: 3px;
color: color-mix(in srgb, var(--app-muted) 70%, transparent);
font-weight: 500;
}
.session-card-share-name {
color: color-mix(in srgb, var(--app-text) 88%, #dbe8ff 12%);
font-weight: 720;
}
.session-card-share-status {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .64rem;
font-weight: 830;
}
.session-card-share-status::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 12%, transparent);
}
.session-card-share-status.accepted {
color: #77dda0;
}
.session-card-share-status.pending {
color: #f4b567;
}
.session-card-feedback-line {
max-width: 760px;
color: color-mix(in srgb, #ffe09a 38%, var(--app-text) 62%);
-webkit-line-clamp: 1;
line-clamp: 1;
}
.session-card-open-icon {
position: absolute;
top: 50%;
right: 14px;
width: 29px;
height: 29px;
display: grid;
place-items: center;
color: color-mix(in srgb, #f2cb73 72%, var(--app-text) 28%);
transform: translateY(-50%);
pointer-events: none;
opacity: .86;
transition: transform .14s ease, color .14s ease, opacity .14s ease;
}
.session-card-open-icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.session-own-card:hover .session-card-open-icon,
.session-own-card:focus-visible .session-card-open-icon {
transform: translateY(-50%) scale(1.06);
color: #ffe09a;
opacity: 1;
}
.session-card-chevron {
display: none !important;
}
.session-layout-grid .session-browser-item,
.session-layout-grid .session-own-card {
width: 100%;
min-height: 112px;
padding: 14px 48px 14px 14px;
}
.session-layout-grid .session-own-card .session-card-feedback-line {
-webkit-line-clamp: 2;
line-clamp: 2;
}
@media (max-width: 1100px) and (min-width: 761px) {
.session-browser-results.session-layout-grid {
grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
}
@media (max-width: 760px) {
.session-browser-results.session-layout-grid {
grid-template-columns: 1fr;
}
.session-browser-results .session-own-card,
.session-layout-grid .session-own-card {
min-height: 0;
padding: 12px 44px 12px 12px;
border-radius: 11px;
}
.session-card-open-icon { right: 10px; width: 27px; height: 27px; }
.session-card-open-icon svg { width: 22px; height: 22px; }
.session-card-keyline { font-size: .75rem; }
.session-card-info-line { font-size: .72rem; }
}
/* ================================================================
SIGNALREITER v0.11.8 - scan hierarchy + livelier color accents
Goal: title -> target number -> date must be readable at a glance.
================================================================ */
.session-browser-results .session-own-card {
border-color: color-mix(in srgb, var(--app-panel-border) 66%, #d6b44f 34%);
background:
linear-gradient(112deg,
color-mix(in srgb, var(--app-panel-strong) 81%, #b7a43e 19%) 0%,
color-mix(in srgb, var(--app-panel) 89%, #8d9b4f 11%) 47%,
color-mix(in srgb, var(--app-panel) 96%, #4f7184 4%) 100%);
box-shadow:
0 5px 16px rgba(0,0,0,.10),
inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
.session-browser-results .session-own-card:hover,
.session-browser-results .session-own-card:focus-visible {
border-color: color-mix(in srgb, #e0bd58 55%, var(--app-panel-border));
background:
linear-gradient(112deg,
color-mix(in srgb, var(--app-panel-strong) 77%, #c1ad43 23%) 0%,
color-mix(in srgb, var(--app-panel) 86%, #95a354 14%) 47%,
color-mix(in srgb, var(--app-panel) 94%, #55798d 6%) 100%);
box-shadow:
0 9px 22px rgba(0,0,0,.14),
0 0 0 1px color-mix(in srgb, #d9b64e 12%, transparent),
inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
}
/* 1: User-defined session title - blue visual anchor. */
.session-browser-item-heading > .session-card-title {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: min(100%, 720px);
min-height: 27px;
padding: 3px 9px 4px;
border: 1px solid color-mix(in srgb, #6fa3ff 28%, var(--app-panel-border));
border-radius: 7px;
background:
linear-gradient(110deg,
color-mix(in srgb, #315b9e 58%, var(--app-panel-strong) 42%),
color-mix(in srgb, #223f72 50%, var(--app-panel) 50%));
color: #f6f9ff;
font-size: 1.05rem;
line-height: 1.22;
font-weight: 880;
letter-spacing: -.012em;
box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}
/* 2: Target number - the strongest metadata item below the title. */
.session-card-keyline {
gap: 6px 10px;
margin-top: 1px;
}
.session-card-target-chip {
min-height: 27px;
padding: 3px 9px;
border: 1px solid color-mix(in srgb, #e3bd50 64%, var(--app-panel-border));
border-radius: 7px;
background:
linear-gradient(105deg,
color-mix(in srgb, #8f761d 38%, var(--app-bg) 62%),
color-mix(in srgb, #c29b32 17%, var(--app-panel-strong) 83%));
color: #ffe8a2;
font-size: .91rem;
line-height: 1.22;
font-weight: 880;
letter-spacing: .005em;
box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
/* 3: Session date - deliberately quieter than target number; time is hidden in overview. */
.session-card-date {
color: color-mix(in srgb, #eef3ff 80%, var(--app-muted) 20%);
font-size: .80rem;
line-height: 1.25;
font-weight: 670;
}
/* 4: Status colors have fixed semantics and stay visually subordinate. */
.session-card-badge.training {
border-color: color-mix(in srgb, #65ddc8 62%, var(--app-panel-border));
background: color-mix(in srgb, #39bda7 19%, var(--app-panel));
color: #a8f3e7;
}
.session-card-badge.feedback {
border-color: color-mix(in srgb, #f0c75d 68%, var(--app-panel-border));
background: color-mix(in srgb, #d5a936 18%, var(--app-panel));
color: #ffe39a;
}
.session-card-badge.project-copy {
border-color: color-mix(in srgb, #b995ff 65%, var(--app-panel-border));
background: color-mix(in srgb, #8f67e9 18%, var(--app-panel));
color: #dac7ff;
}
.session-card-share-status.accepted { color: #74e39e; }
.session-card-share-status.pending { color: #ffb45f; }
/* The edit/open hint remains recognizable but no longer competes with the title/target. */
.session-card-open-icon {
width: 32px;
height: 32px;
border: 1px solid color-mix(in srgb, #6fa3ff 22%, var(--app-panel-border));
border-radius: 8px;
background: color-mix(in srgb, #274d88 22%, var(--app-bg));
color: #f0cf78;
opacity: .95;
}
.session-own-card:hover .session-card-open-icon,
.session-own-card:focus-visible .session-card-open-icon {
color: #ffe39a;
border-color: color-mix(in srgb, #83adff 42%, var(--app-panel-border));
background: color-mix(in srgb, #315b9e 30%, var(--app-panel));
}
/* Keep tiles compact even with the stronger visual hierarchy. */
.session-layout-grid .session-browser-item,
.session-layout-grid .session-own-card {
min-height: 108px;
}
@media (max-width: 760px) {
.session-browser-item-heading > .session-card-title {
font-size: 1rem;
min-height: 25px;
padding: 3px 8px;
}
.session-card-target-chip {
min-height: 25px;
padding: 3px 8px;
font-size: .86rem;
}
.session-card-date { font-size: .76rem; }
}
/* ================================================================
SIGNALREITER v0.11.9 - calm, scan-friendly session list
Designed for many sessions: title -> target number -> date -> share.
================================================================ */
.session-browser-results.session-layout-list {
gap: 6px;
}
.session-browser-results.session-layout-grid {
grid-template-columns: repeat(auto-fill, minmax(270px, 300px));
gap: 10px;
}
.session-browser-results .session-own-card {
padding: 11px 14px;
border: 1px solid color-mix(in srgb, var(--app-panel-border) 90%, #c9a958 10%);
border-radius: 11px;
background: linear-gradient(110deg,
color-mix(in srgb, var(--app-panel-strong) 96%, #c7ad67 4%) 0%,
color-mix(in srgb, var(--app-panel) 98%, #8c9a66 2%) 100%);
box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 3%, transparent);
transition: border-color .13s ease, background .13s ease, box-shadow .13s ease;
}
.session-browser-results .session-own-card:hover,
.session-browser-results .session-own-card:focus-visible {
transform: none;
filter: none;
border-color: color-mix(in srgb, var(--app-primary) 31%, var(--app-panel-border));
background: linear-gradient(110deg,
color-mix(in srgb, var(--app-panel-strong) 95%, var(--app-primary) 5%) 0%,
color-mix(in srgb, var(--app-panel) 97%, var(--app-primary) 3%) 100%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-primary) 8%, transparent);
outline: none;
}
.session-browser-results .session-own-card:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary) 25%, transparent);
}
/* Title: strong typography, no decorative box. */
.session-browser-item-heading > .session-card-title {
display: inline;
width: auto;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: color-mix(in srgb, #ffffff 94%, #a9c5ff 6%);
font-size: 1.02rem;
line-height: 1.25;
font-weight: 820;
letter-spacing: -.008em;
}
/* Target number: important, but deliberately not a pill/chip. */
.session-card-target-chip {
display: inline;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: #f0cf82;
font-size: .98rem;
line-height: 1.3;
font-weight: 820;
letter-spacing: .003em;
font-variant-numeric: tabular-nums;
}
.session-card-date {
color: color-mix(in srgb, var(--app-text) 72%, var(--app-muted) 28%);
font-size: .78rem;
line-height: 1.3;
font-weight: 580;
}
/* Sharing is information, not another collection of boxes. */
.session-card-share-line {
gap: 4px;
}
.session-card-share-label {
color: var(--app-muted);
}
.session-card-share-people {
gap: 7px;
}
.session-card-share-person {
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
gap: 4px;
}
.session-card-share-name {
color: color-mix(in srgb, var(--app-text) 82%, var(--app-muted) 18%);
font-weight: 650;
}
.session-card-share-status {
font-size: .67rem;
font-weight: 720;
}
.session-card-share-status::before {
width: 4px;
height: 4px;
box-shadow: none;
}
.session-card-share-status.accepted { color: #74d696; }
.session-card-share-status.pending { color: #e9a75d; }
/* Status badges remain badges because they represent exceptional states. */
.session-card-badge {
min-height: 17px;
padding: 1px 5px;
border-radius: 5px;
font-size: .59rem;
font-weight: 760;
}
/* List: two calm scan lines. Everything secondary follows inline. */
.session-layout-list .session-own-card {
min-height: 0;
}
.session-layout-list .session-card-content {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px 9px;
}
.session-layout-list .session-card-heading {
flex: 0 0 100%;
min-width: 0;
}
.session-layout-list .session-card-keyline,
.session-layout-list .session-card-share-line {
display: inline-flex;
align-items: center;
flex: 0 1 auto;
margin: 0;
}
.session-layout-list .session-card-keyline {
gap: 0;
}
.session-layout-list .session-card-keyline > * + *::before {
content: '·';
margin: 0 7px;
color: color-mix(in srgb, var(--app-muted) 72%, transparent);
font-weight: 500;
}
.session-layout-list .session-card-share-line::before {
content: '·';
margin-right: 5px;
color: color-mix(in srgb, var(--app-muted) 72%, transparent);
}
.session-layout-list .session-card-heading + .session-card-share-line::before {
display: none;
}
.session-layout-list .session-card-feedback-line {
flex: 0 0 100%;
margin-top: 1px;
}
/* Grid stays more card-like, but compact and without empty decorative space. */
.session-layout-grid .session-browser-item,
.session-layout-grid .session-own-card {
min-height: 104px;
padding: 12px 13px;
}
.session-layout-grid .session-card-content {
display: grid;
gap: 6px;
}
.session-layout-grid .session-card-keyline {
gap: 7px;
}
/* v0.11.9: no edit/open icon. The full card is the action. */
.session-card-open-icon,
.session-card-chevron {
display: none !important;
}
@media (max-width: 760px) {
.session-browser-results .session-own-card,
.session-layout-grid .session-own-card {
padding: 11px 12px;
}
.session-browser-item-heading > .session-card-title { font-size: .98rem; }
.session-card-target-chip { font-size: .89rem; }
.session-card-date { font-size: .75rem; }
.session-layout-list .session-card-share-line {
flex: 0 0 100%;
}
.session-layout-list .session-card-share-line::before {
display: none;
}
}
/* ================================================================
SIGNALREITER v0.11.10 - title-first session scan hierarchy
The user title is the primary anchor. The stored target code is
intentionally shown without imposing TN/TRN/Target-Nr. terminology.
================================================================ */
.session-browser-results .session-own-card {
padding-top: 10px;
padding-bottom: 10px;
}
/* 1: user-defined title - unmistakably the strongest visual anchor. */
.session-browser-item-heading > .session-card-title {
color: color-mix(in srgb, #ffffff 97%, #b6c9ff 3%);
font-size: 1.13rem;
line-height: 1.18;
font-weight: 850;
letter-spacing: -.013em;
}
.session-layout-list .session-card-heading {
margin-bottom: 1px;
}
/* 2: target code - useful identifier, clearly subordinate to the title. */
.session-card-target-chip {
color: #dcc58d;
font-size: .86rem;
line-height: 1.3;
font-weight: 720;
letter-spacing: .012em;
}
/* 3: session date and sharing stay quiet for fast scanning. */
.session-card-date {
font-size: .76rem;
font-weight: 560;
}
.session-layout-list .session-card-content {
gap: 4px 9px;
}
/* Grid uses the same hierarchy without turning the code into a badge. */
.session-layout-grid .session-browser-item-heading > .session-card-title {
font-size: 1.08rem;
}
.session-layout-grid .session-card-target-chip {
font-size: .84rem;
}
@media (max-width: 760px) {
.session-browser-item-heading > .session-card-title { font-size: 1.03rem; }
.session-card-target-chip { font-size: .82rem; }
}
/* SIGNALREITER v0.11.12 - dedicated session overview work page */
.workspace-panel[data-workspace-panel="session-detail"]{width:100%;min-width:0;}
.session-overview-page{
width:100%;
min-height:520px;
padding:26px;
border:1px solid var(--app-panel-border);
border-radius:22px;
background:linear-gradient(145deg,color-mix(in srgb,var(--app-panel) 94%,#202b47 6%),color-mix(in srgb,var(--app-panel) 98%,#111827 2%));
}
.session-overview-breadcrumb{display:flex;align-items:center;gap:8px;color:var(--app-muted);font-size:.82rem;margin-bottom:18px;}
.session-overview-crumb-link{appearance:none;border:0;background:none;padding:0;color:#a9bcff;font:inherit;font-weight:700;cursor:pointer;}
.session-overview-crumb-link:hover,.session-overview-crumb-link:focus-visible{color:#d7e0ff;text-decoration:underline;text-underline-offset:3px;}
.session-overview-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:8px 0 22px;border-bottom:1px solid color-mix(in srgb,var(--app-panel-border) 72%,transparent);}
.session-overview-heading{min-width:0;}
.session-overview-heading h2{margin:5px 0 10px;font-size:clamp(1.75rem,3vw,2.35rem);line-height:1.05;letter-spacing:-.02em;}
.session-overview-badges{display:flex;flex-wrap:wrap;gap:6px;min-height:22px;}
.session-overview-badge{display:inline-flex;align-items:center;min-height:22px;padding:3px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--app-panel-border) 80%,transparent);background:color-mix(in srgb,var(--app-panel) 82%,#25304e 18%);font-size:.72rem;font-weight:800;line-height:1;}
.session-overview-badge.training{color:#78e6d5;border-color:#397f79;background:#173b3a;}
.session-overview-badge.feedback{color:#f4d77b;border-color:#806b33;background:#3b3219;}
.session-overview-badge.project-copy{color:#c7b4ff;border-color:#66588e;background:#2c2641;}
.session-overview-badge.draft{color:#c9d2e8;background:#252c3d;}
.session-overview-primary-meta{display:flex;align-items:center;flex-wrap:wrap;gap:9px;color:var(--app-muted);}
.session-overview-target{font-size:1.08rem;color:#f2d27b;font-weight:850;letter-spacing:.015em;}
.session-overview-target + .session-overview-date::before{content:'·';margin-right:9px;color:#78849e;}
.session-overview-date{font-size:.9rem;color:#d4daea;font-weight:650;}
.session-overview-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px;}
.session-overview-fact{min-width:0;padding:15px 16px;border:1px solid color-mix(in srgb,var(--app-panel-border) 78%,transparent);border-radius:15px;background:color-mix(in srgb,var(--app-panel) 78%,#111827 22%);}
.session-overview-fact-label{display:block;margin-bottom:7px;color:var(--app-muted);font-size:.75rem;font-weight:750;}
.session-overview-fact strong{font-size:.93rem;}
.session-overview-fact p{margin:7px 0 0;color:#c8d0e2;font-size:.82rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.session-overview-share-list{display:flex;flex-wrap:wrap;gap:7px;}
.session-overview-share{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:9px;background:#161d2e;border:1px solid #313b53;font-size:.79rem;}
.session-overview-share small{font-weight:800;}
.session-overview-share small.accepted{color:#79d69b;}
.session-overview-share small.pending{color:#e9a75d;}
.session-overview-work{margin-top:26px;}
.session-overview-section-head h3{margin:0;font-size:1.1rem;}
.session-overview-section-head p{margin:6px 0 0;color:var(--app-muted);font-size:.84rem;line-height:1.45;}
.session-overview-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px;}
.session-overview-action{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:center;min-height:82px;padding:14px 15px;text-align:left;color:var(--app-text);border:1px solid #39445d;border-radius:15px;background:linear-gradient(145deg,#242d42,#1a2234);cursor:pointer;transition:border-color .14s ease,background .14s ease,transform .14s ease;}
.session-overview-action:not(:disabled):hover,.session-overview-action:not(:disabled):focus-visible{border-color:#758bd2;background:linear-gradient(145deg,#2b3650,#202941);transform:translateY(-1px);outline:none;}
.session-overview-action-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#313d5d;color:#d9e1ff;font-size:1.15rem;font-weight:850;}
.session-overview-action strong{display:block;font-size:.92rem;line-height:1.2;}
.session-overview-action small{display:block;margin-top:4px;color:var(--app-muted);font-size:.74rem;line-height:1.35;}
.session-overview-action em{position:absolute;right:10px;top:9px;font-style:normal;font-size:.66rem;font-weight:800;color:#939db5;}
.session-overview-action.is-planned{cursor:default;opacity:.62;background:#1b2232;}
.session-overview-action.is-planned .session-overview-action-icon{background:#252d40;color:#8995af;}
@media(max-width:900px){.session-overview-facts{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.session-overview-page{padding:16px;border-radius:16px;min-height:0;}.session-overview-facts,.session-overview-actions{grid-template-columns:1fr;}.session-overview-heading h2{font-size:1.55rem;}.session-overview-action{min-height:74px;}}
/* SIGNALREITER v0.11.13 - first session data sheet and help */
.session-setup-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0 -6px;}
.session-required-hint{color:var(--app-muted);font-size:.76rem;}
.session-help-button{font-weight:800;}
.required-mark{color:#f0c86d;font-weight:900;}
.session-setup-help-dialog{width:min(690px,calc(100% - 24px));max-height:calc(100vh - 24px);padding:0;border:0;border-radius:20px;background:transparent;color:var(--app-text);}
.session-setup-help-dialog::backdrop{background:rgba(4,8,18,.76);backdrop-filter:blur(8px);}
.session-setup-help-card{position:relative;max-height:calc(100vh - 24px);overflow:auto;padding:24px;border:1px solid var(--app-panel-border);border-radius:20px;background:linear-gradient(145deg,#202a40,#171e2f);box-shadow:0 24px 70px rgba(0,0,0,.42);}
.session-setup-help-content{display:grid;gap:10px;margin-top:18px;}
.session-setup-help-content section{padding:13px 14px;border:1px solid color-mix(in srgb,var(--app-panel-border) 82%,transparent);border-radius:12px;background:color-mix(in srgb,var(--app-panel) 78%,#111827 22%);}
.session-setup-help-content strong{display:block;font-size:.91rem;color:var(--app-text);}
.session-setup-help-content p{margin:6px 0 0;color:var(--app-muted);font-size:.84rem;line-height:1.48;}
.session-setup-help-note{border-color:color-mix(in srgb,#e8c86d 38%,var(--app-panel-border))!important;background:color-mix(in srgb,#4b3f1f 20%,var(--app-panel))!important;}
#sessionForm .form-section:first-of-type{border-color:color-mix(in srgb,var(--app-primary) 30%,var(--app-panel-border));background:linear-gradient(145deg,color-mix(in srgb,var(--app-panel) 88%,#253658 12%),color-mix(in srgb,var(--app-panel) 96%,transparent));}
@media(max-width:620px){.session-setup-help-dialog{width:calc(100% - 12px);}.session-setup-help-card{padding:20px 16px;border-radius:16px;}.session-setup-toolbar{justify-content:flex-start;}}
/* ================================================================
SIGNALREITER v0.11.14 - Session setup is an inline work page
================================================================ */
body.session-page-open{overflow:auto!important;}
#sessionFormWorkspaceHost{width:100%;min-width:0;}
#sessionFormWorkspaceHost .session-entry-page{
position:static!important;
inset:auto!important;
z-index:auto!important;
display:block!important;
width:100%!important;
max-width:none!important;
height:auto!important;
max-height:none!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
color:inherit!important;
overflow:visible!important;
}
#sessionFormWorkspaceHost .session-entry-page.hidden{display:none!important;}
#sessionFormWorkspaceHost .session-entry-page::backdrop{display:none!important;}
#sessionFormWorkspaceHost .session-entry-card{
width:100%!important;
max-width:none!important;
height:auto!important;
max-height:none!important;
margin:0!important;
padding:26px!important;
border-radius:20px!important;
overflow:visible!important;
box-shadow:none!important;
}
#sessionFormWorkspaceHost .session-entry-card .dialog-lead{margin-right:0;max-width:900px;}
.session-entry-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:18px;color:var(--app-muted);font-size:.82rem;}
.session-entry-crumb-link{appearance:none;border:0;background:none;padding:0;color:#a9bcff;font:inherit;font-weight:700;cursor:pointer;}
.session-entry-crumb-link:hover,.session-entry-crumb-link:focus-visible{color:#d7e0ff;text-decoration:underline;text-underline-offset:3px;outline:none;}
.session-unsaved-card{width:min(610px,calc(100vw - 24px));}
.session-unsaved-text{margin-right:0;}
.session-unsaved-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:22px;}
@media(max-width:620px){
#sessionFormWorkspaceHost .session-entry-card{padding:18px 14px!important;border-radius:14px!important;}
.session-unsaved-actions{flex-direction:column;}
.session-unsaved-actions .btn{width:100%;}
}
/* SIGNALREITER v0.11.16 - Session overview glance + direct share management */
.session-overview-fact-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.session-overview-fact-head .session-overview-fact-label{margin-bottom:0}
.session-overview-manage-link{appearance:none;border:0;background:transparent;color:#a9bcff;padding:2px 0;font:inherit;font-size:.72rem;font-weight:800;cursor:pointer}
.session-overview-manage-link:hover,.session-overview-manage-link:focus-visible{color:#d7e0ff;text-decoration:underline;text-underline-offset:3px;outline:none}
.session-overview-glance{margin-top:24px;padding-top:22px;border-top:1px solid color-mix(in srgb,var(--app-panel-border) 72%,transparent)}
.session-overview-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}
.session-overview-stat{min-width:0;padding:13px 14px;border:1px solid color-mix(in srgb,var(--app-panel-border) 78%,transparent);border-radius:13px;background:color-mix(in srgb,var(--app-panel) 74%,#111827 26%)}
.session-overview-stat span{display:block;color:var(--app-muted);font-size:.7rem;font-weight:750;line-height:1.25}
.session-overview-stat strong{display:block;margin-top:6px;color:var(--app-text);font-size:.9rem;line-height:1.25;overflow-wrap:anywhere}
@media(max-width:1000px){.session-overview-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.session-overview-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* SIGNALREITER v0.11.18 - Freigaben deutlich verwalten + Verlauf */
.session-share-active-list{display:grid;gap:10px;margin:9px 0 20px}
.session-share-active-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:16px;
align-items:center;
padding:13px 14px;
border:1px solid color-mix(in srgb,var(--app-panel-border) 88%,transparent);
border-radius:13px;
background:color-mix(in srgb,var(--app-panel) 88%,var(--app-bg) 12%);
}
.session-share-active-row>div:first-child{min-width:0}
.session-share-active-row.is-active-card{
border-color:color-mix(in srgb,var(--app-success) 48%,var(--app-panel-border));
background:color-mix(in srgb,var(--app-success) 14%,var(--app-panel));
box-shadow:inset 4px 0 0 color-mix(in srgb,var(--app-success) 82%,transparent);
}
.session-share-active-row.is-pending-card{
border-color:color-mix(in srgb,#f1c66a 58%,var(--app-panel-border));
background:color-mix(in srgb,#f1c66a 15%,var(--app-panel));
box-shadow:inset 4px 0 0 color-mix(in srgb,#f1c66a 86%,transparent);
}
.session-share-name-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.session-share-name-line>strong{min-width:0;overflow-wrap:anywhere}
.session-share-active-row small{display:block;margin-top:5px;color:var(--app-muted);line-height:1.45}
.session-share-row-actions{display:flex;align-items:stretch;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.session-share-row-actions .btn{min-height:38px}
.session-share-state-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:21px;
padding:3px 7px;
border:1px solid var(--app-panel-border);
border-radius:999px;
font-size:.64rem;
font-weight:900;
letter-spacing:.07em;
line-height:1;
}
.session-share-state-badge.is-active{
color:var(--app-success);
border-color:color-mix(in srgb,var(--app-success) 55%,var(--app-panel-border));
background:color-mix(in srgb,var(--app-success) 9%,transparent);
}
.session-share-state-badge.is-pending{
color:#f1c66a;
border-color:color-mix(in srgb,#f1c66a 58%,var(--app-panel-border));
background:color-mix(in srgb,#f1c66a 10%,transparent);
}
.session-share-invite-row{
border-color:color-mix(in srgb,#f1c66a 58%,var(--app-panel-border));
}
.session-share-danger-action{
border:1px solid color-mix(in srgb,var(--app-danger) 62%,var(--app-panel-border));
background:color-mix(in srgb,var(--app-danger) 9%,var(--app-panel));
color:color-mix(in srgb,var(--app-danger) 88%,var(--app-text) 12%);
font-weight:850;
cursor:pointer;
}
.session-share-danger-action:hover,.session-share-danger-action:focus-visible{
border-color:var(--app-danger);
background:color-mix(in srgb,var(--app-danger) 18%,var(--app-panel));
color:var(--app-text);
outline:none;
}
.session-share-history{
margin:8px 0 24px;
border:1px solid color-mix(in srgb,var(--app-panel-border) 86%,transparent);
border-radius:14px;
background:color-mix(in srgb,var(--app-bg) 28%,var(--app-panel));
overflow:hidden;
}
.session-share-history>summary{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:13px 14px;cursor:pointer;font-weight:850;list-style:none;
}
.session-share-history>summary::-webkit-details-marker{display:none}
.session-share-history>summary::before{content:'▸';color:var(--app-muted);font-size:.8rem;transition:transform .14s ease}
.session-share-history[open]>summary::before{transform:rotate(90deg)}
.session-share-history>summary>span:first-of-type{flex:1}
.session-share-history-count{
min-width:25px;height:25px;display:inline-grid;place-items:center;padding:0 7px;
border:1px solid var(--app-panel-border);border-radius:999px;color:var(--app-muted);font-size:.7rem;
}
.session-share-history-list{display:grid;gap:8px;padding:0 12px 12px}
.session-share-history-row{
padding:11px 12px;border:1px solid var(--app-panel-border);border-radius:11px;
background:color-mix(in srgb,var(--app-panel) 78%,var(--app-bg) 22%);
}
.session-share-history-row.is-revoked,.session-share-history-row.is-left,.session-share-history-row.is-declined{
border-color:color-mix(in srgb,var(--app-danger) 38%,var(--app-panel-border));
background:color-mix(in srgb,var(--app-danger) 10%,var(--app-panel));
}
.session-share-history-row.is-accepted{
border-color:color-mix(in srgb,var(--app-success) 34%,var(--app-panel-border));
background:color-mix(in srgb,var(--app-success) 8%,var(--app-panel));
}
.session-share-history-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.session-share-history-head strong{overflow-wrap:anywhere}
.session-share-history-row small{display:block;margin-top:5px;color:var(--app-muted);line-height:1.45}
.session-share-state-badge.is-history-revoked,.session-share-state-badge.is-history-left,.session-share-state-badge.is-history-declined{
color:color-mix(in srgb,var(--app-danger) 84%,white 16%);
border-color:color-mix(in srgb,var(--app-danger) 58%,var(--app-panel-border));
background:color-mix(in srgb,var(--app-danger) 12%,transparent);
}
.session-share-state-badge.is-history-accepted{
color:var(--app-success);border-color:color-mix(in srgb,var(--app-success) 55%,var(--app-panel-border));
background:color-mix(in srgb,var(--app-success) 9%,transparent);
}
.session-share-state-badge.is-history-expired,.session-share-state-badge.is-history-ended{
color:var(--app-muted);background:color-mix(in srgb,var(--app-muted) 8%,transparent);
}
@media(max-width:720px){
.session-share-active-row{grid-template-columns:1fr}
.session-share-row-actions{justify-content:stretch}
.session-share-row-actions .btn{flex:1 1 180px}
}
/* SIGNALREITER v0.11.19 - Grunddaten als normale Unterseite */
#sessionFormWorkspaceHost .session-entry-page{position:static!important;inset:auto!important;background:transparent!important;box-shadow:none!important;}
#sessionFormBreadcrumbSession.session-entry-crumb-link{display:inline-flex;align-items:center;gap:5px;}
#sessionFormBreadcrumbSession.session-entry-crumb-link::before{content:'←';font-size:.9em;opacity:.9;}
#sessionFormBreadcrumbSession.session-entry-crumb-link.hidden{display:none!important;}