/* andbold sign-in "sun study" panel (13 November 2026) — the TeamOS sign-in panel's look, for sunstudy.js.
 * The page decides where the panel sits and how big it is ([data-sunstudy]); everything inside is here.
 * Geist + Geist Mono (OFL), served next to this file. */
@font-face { font-family: "Geist AB"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/Geist-Variable.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono AB"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); }

[data-sunstudy] { background: #3A2418; }
.ss {
	position: relative; isolation: isolate; box-sizing: border-box; display: flex; flex-direction: column;
	width: 100%; height: 100%; overflow: hidden; padding: 40px 48px 36px;
	background: #3A2418; color: #fff; text-align: left;
	font-family: "Geist AB", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
.ss *, .ss *::before, .ss *::after { box-sizing: border-box; }
.ss p, .ss span { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; } /* host pages size every <p> (Authentik: 14px) */
.ss-canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; }
.ss-vignette, .ss-grain, .ss-scrim-top, .ss-scrim-bottom { position: absolute; z-index: -1; pointer-events: none; }
.ss-vignette { inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(48, 22, 10, 0.45) 100%); }
.ss-grain {
	inset: 0; opacity: 0.06; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.ss-scrim-top { inset: 0 0 auto 0; height: 160px; background: linear-gradient(180deg, rgba(44, 22, 12, 0.55), transparent); }
.ss-scrim-bottom { inset: auto 0 0 0; height: 38%; background: linear-gradient(0deg, rgba(40, 20, 11, 0.9) 0%, rgba(40, 20, 11, 0.6) 45%, transparent); }

.ss .ss-meta { font-family: "Geist Mono AB", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 500; line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; }
.ss-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.ss-brand { display: flex; flex-direction: column; gap: 10px; }
.ss-logo { display: block; height: 24px; width: auto; }
.ss .ss-label { color: rgba(255, 255, 255, 0.6); }
.ss-readout { display: flex; align-items: flex-start; gap: 16px; }
.ss-facts { text-align: right; color: rgba(255, 255, 255, 0.6); }
.ss .ss-title { color: rgba(255, 255, 255, 0.8); }
.ss .ss-place { margin-top: 4px; }
.ss .ss-dim { color: rgba(255, 255, 255, 0.45); }
.ss .ss-clock { margin-top: 12px; font-size: 20px; line-height: 24px; letter-spacing: 0.02em; text-transform: none; color: #fff; font-variant-numeric: tabular-nums; }
.ss .ss-live { margin-top: 4px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: rgba(255, 255, 255, 0.55); }
.ss-dot { width: 6px; height: 6px; border-radius: 50%; background: #F0A060; }
.ss-arc { width: 128px; }
.ss-arc svg { display: block; width: 128px; height: 66px; overflow: visible; }
.ss .ss-times { margin-top: 6px; display: flex; justify-content: space-between; color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }
.ss-fill { flex: 1; }
.ss-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.ss .ss-greeting { font-size: clamp(40px, 3.6vw, 60px); font-weight: 500; line-height: 1; letter-spacing: -0.045em; }
.ss .ss-line { margin-top: 12px; max-width: 480px; font-size: 17px; line-height: 28px; color: rgba(255, 255, 255, 0.85); }
.ss .ss-stamp { margin-left: 12px; vertical-align: middle; color: rgba(255, 255, 255, 0.55); }
.ss-pause {
	flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
	border: 0; border-radius: 6px; background: transparent; color: rgba(255, 255, 255, 0.75); cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}
.ss-pause:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.ss-pause:focus-visible { outline: 1px solid #fff; outline-offset: 0; }
.ss-pause[hidden] { display: none; }

/* Tablets: no readout, smaller words. */
@media (max-width: 1023.98px) {
	.ss { padding: 28px 32px; }
	.ss-readout, .ss .ss-stamp { display: none; }
	.ss .ss-greeting { font-size: 44px; }
	.ss .ss-line { font-size: 15px; line-height: 24px; }
}
/* Phones: a short band — the scene, the wordmark, the greeting. */
@media (max-width: 639.98px) {
	.ss { padding: 18px 20px 16px; }
	.ss-logo { height: 20px; }
	.ss-brand { gap: 6px; }
	.ss .ss-greeting { font-size: 26px; letter-spacing: -0.03em; }
	.ss .ss-line { display: none; }
	.ss-pause { width: 32px; height: 32px; }
}