/*
 * GedankenAuge (bisher Mindreader) – Bedienung im Design System „Samt & Messing“ (design/tokens.css + design/samt-messing.css).
 * Hier nur App-Layout. Farben ausschließlich über Tokens.
 * Die Bühne des Tricks (buehne.php) nutzt diese Datei NICHT.
 */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Seite mit Platz für die Tab-Leiste unten */
.page { padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--space-28)); }
.page.auth { padding-bottom: var(--space-40); }

/* Bereiche umschalten */
.panel { display: none; flex-direction: column; gap: var(--space-14); padding-top: var(--space-8); }
body.view-trick #panel-trick,
body.view-lage #panel-lage,
body.view-spick #panel-spick,
body.view-settings #panel-settings,
body.view-users #panel-users { display: flex; }

.stack { display: flex; flex-direction: column; gap: var(--space-14); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-14) var(--space-12); }
.row { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
.panel-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.3; }
.section-title { margin: var(--space-14) 0 0; }
.prose h2 { margin-bottom: 0; }
.prose p:last-child { margin-bottom: 0; }

/* Links als Buttons, Tippziele mindestens 44 px */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--text); }
a.btn.primary { color: var(--primary-ink); }
.btn { min-height: 44px; }
.btn.wide { display: flex; }

/* Meldungen */
.notice { margin: var(--space-8) 0 0; padding: var(--space-10) var(--space-14); border-radius: var(--radius); border: 1px solid; font-weight: 600; }
.notice.good { color: var(--good); border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--surface)); }
.notice.bad { color: var(--bad); border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--surface)); }

/* Anmeldung */
.auth { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: var(--space-20); max-width: 400px; }
.wm-big { font-size: 2rem; }

/* Wortmarke: Gedankenblase mit Auge (Motiv GedankenAuge), je Farbwelt eine Datei */
.logo-dunkel { display: none; }
[data-theme="messing"] .logo-hell { display: none; }
[data-theme="messing"] .logo-dunkel { display: inline; }

/* Kopfzeile */
.topbar .wm-text { font-size: 1.35rem; }

/* Tab-Leiste: 4 oder 5 Bereiche, nur Text (Symbole folgen nach Freigabe) */
.tabbar { grid-template-columns: repeat(var(--tabs, 4), minmax(0, 1fr)); }
.tab-btn { text-decoration: none; text-align: center; padding: 0 2px; line-height: 1.2; hyphens: manual; }

/* Trick */
.hero-text { margin: 0; }
.preview-buttons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6); }
.preview-buttons .btn { padding: 10px 0; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }

/* Lagetest */
.readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.readings .stat { text-align: center; }
.readings .stat strong { font-size: 1.45rem; }
.readings .stat span { font-size: .78rem; }
.zbar { display: flex; align-items: center; gap: var(--space-8); color: var(--muted); font-size: .85rem; }
.zbar-track { position: relative; flex: 1; height: 8px; border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--bad), var(--surface-2) 50%, var(--good)); }
.zbar-marker { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; border-radius: var(--radius-circle);
    background: var(--accent); box-shadow: 0 0 0 2px var(--surface); transform: translate(-50%, -50%); transition: left .08s linear; }
.message { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-28) var(--space-12); text-align: center;
    transition: border-color .2s, background .2s; }
.message-icon { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--accent); min-height: 1em; }
.message-text { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
#message-sub { min-height: 1.5em; }
.message[data-state="up"]       { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--surface)); }
.message[data-state="vertical"] { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }

/* Lagetest: vollflächig weiß leuchtend (Leuchte-Bildschirm – bewusst feste Werte, kein Design System) */
.facedown-overlay {
    position: fixed; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: #c8c8c8;
    font: 600 1.2em/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Spickzettel */
.table-wrap { overflow-x: auto; padding: var(--space-4) var(--space-8); }
.mapping { border-collapse: collapse; font-size: .9rem; white-space: nowrap; }
.mapping th, .mapping td { padding: var(--space-8); text-align: left; border-bottom: 1px solid var(--border); }
.mapping tr:last-child td { border-bottom: 0; }
.mapping th { color: var(--muted); font-weight: 700; font-size: .85rem; }
.num { font-family: var(--font-display); font-weight: 800; color: var(--accent); text-align: center; }
/* Farbfeld der Leuchtfarbe (Wert aus den Einstellungen) */
.swatch { display: inline-block; vertical-align: middle; width: 1.6em; height: 1em; margin-right: var(--space-6);
    border-radius: var(--radius-bar); background: var(--c); border: 1px solid var(--border-strong); }

/* Einstellungen */
.positions { display: grid; gap: var(--space-6); }
.pos-row { display: grid; grid-template-columns: 1.6em 64px 1fr; gap: var(--space-8); align-items: center; }
.pos-row input[type=color] { height: 44px; padding: 4px; cursor: pointer; }
.zodiac-cols { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.theme-picker .theme-opt { min-height: 56px; }
label.theme-opt { position: relative; }
label.theme-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
label.theme-opt:has(input:checked) { border-color: var(--accent); }
label.theme-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.reveal-themes { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.logout { margin-top: var(--space-8); }

/* Konten */
.user-list { padding-top: var(--space-4); padding-bottom: var(--space-4); }
details.user { border-top: 1px solid var(--border); padding: var(--space-12) 0; }
details.user:first-of-type { border-top: 0; }
details.user summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8);
    list-style: none; min-height: 40px; }
details.user summary::-webkit-details-marker { display: none; }
details.user summary small { flex-basis: 100%; }
details.user form { margin-top: var(--space-12); }

/* Simulator (?sim=1) – nur zum Testen am Desktop */
.simulator {
    position: fixed; right: var(--space-8); bottom: calc(var(--tabbar-height) + var(--space-8)); z-index: 100;
    display: flex; flex-direction: column; gap: var(--space-4);
    padding: var(--space-10) var(--space-12); font-size: .8rem;
    background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.simulator label { display: flex; align-items: center; gap: var(--space-6); }
.simulator input[type=range] { padding: 0; }
.simulator output { width: 2.5rem; text-align: right; }
.sim-presets { display: flex; gap: var(--space-4); }
.sim-presets button { font-size: .75rem; padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); }