` actually hide (lesson 2026-05-14). */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html:lang(th) body { font-family: 'IBM Plex Sans Thai Looped', var(--sans); } body.cal-body { min-height: 100vh; display: grid; grid-template-rows: 1fr auto; position: relative; overflow-x: hidden; } /* ── Decorative motifs (parity with dashboard/login) ───────── */ .bg-grid { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(rgba(231, 226, 211, 0.05) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(ellipse at center, #000 50%, transparent 100%); } .bg-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; filter: blur(80px); opacity: 0.5; } .bg-glow span { position: absolute; width: 400px; height: 400px; border-radius: 50%; animation: drift 18s ease-in-out infinite alternate; } .bg-glow span:nth-child(1) { top: -8%; left: -10%; background: var(--coral-glow); } .bg-glow span:nth-child(2) { bottom: 8%; right: -12%; background: rgba(95, 212, 255, 0.16); animation-delay: -6s; } .bg-glow span:nth-child(3) { top: 40%; left: 50%; background: rgba(245, 196, 94, 0.12); animation-delay: -12s; } @keyframes drift { to { transform: translate(40px, -30px) scale(1.1); } } /* ── Language toggle (top-right, same as dashboard) ────────── */ .lang-toggle { position: fixed; top: 18px; right: 22px; z-index: 10; display: inline-flex; align-items: center; font: 500 13px/1 var(--mono); background: rgba(11, 12, 16, 0.6); border: 1px solid var(--line-2); border-radius: 4px; backdrop-filter: blur(8px); } .lang-toggle__btn { appearance: none; background: transparent; border: 0; color: var(--text-3); padding: 8px 10px; cursor: pointer; font: inherit; letter-spacing: 0.05em; transition: color 120ms; } .lang-toggle__btn[aria-pressed="true"] { color: var(--coral); } .lang-toggle__btn:hover { color: var(--text); } .lang-toggle__btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; } .lang-toggle__sep { color: var(--mute); } /* ── Card shell with coral corner brackets ─────────────────── */ .cal-shell { position: relative; width: min(560px, calc(100vw - 32px)); margin: auto; padding: 56px 40px 40px; background: linear-gradient(180deg, var(--bg-2), var(--bg)); border: 1px solid var(--line-2); border-radius: 6px; z-index: 1; } @media (max-width: 480px) { .cal-shell { padding: 48px 18px 32px; } } .bracket { position: absolute; width: 20px; height: 20px; border-color: var(--coral); border-style: solid; } .bracket--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; } .bracket--tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; } .bracket--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; } .bracket--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; } /* ── Head: brand mark + section marker ─────────────────────── */ .cal-head { display: grid; gap: 18px; margin-bottom: 22px; } .cal-mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); width: max-content; } .cal-mark img { display: block; image-rendering: -webkit-optimize-contrast; } .cal-mark__brand { font: 700 18px/1 var(--display); letter-spacing: -0.01em; } .cal-section { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: 0.12em; color: var(--text-3); text-transform: uppercase; } .cal-section .cursor { display: inline-block; width: 6px; height: 11px; margin-left: 4px; background: var(--coral); vertical-align: -1px; animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ── Title + lead ──────────────────────────────────────────── */ .cal-title { margin: 0 0 10px; font: 600 34px/1.08 var(--display); letter-spacing: -0.01em; color: var(--text); } html:lang(th) .cal-title { font-size: 30px; } .cal-title__accent { font-family: var(--editorial); font-style: italic; font-weight: 400; color: var(--coral); } .cal-lead { margin: 0 0 20px; font: 400 14px/1.6 var(--sans); color: var(--text-2); } html:lang(th) .cal-lead { font-family: 'IBM Plex Sans Thai Looped', var(--sans); } /* ── Status banner ─────────────────────────────────────────── */ .cal-status { margin: -6px 0 16px; padding: 10px 12px; font: 500 13px/1.4 var(--mono); border-radius: 4px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--text-2); } .cal-status[data-tone="error"] { border-color: var(--coral); color: var(--coral-2); } .cal-status[data-tone="info"] { border-color: var(--cyan); color: var(--cyan); } .cal-status[data-tone="success"] { border-color: var(--lime); color: var(--lime); } /* Collapse (but keep rendered) when there is no message — the element must stay in the accessibility tree for aria-live to fire reliably. */ .cal-status:empty { margin: 0; padding: 0; border: 0; } /* ── Calendar card ─────────────────────────────────────────── */ .cal-card { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 20px; margin-bottom: 22px; transition: opacity 160ms; } /* Free tier: calendar stays visible as a dimmed, inert preview behind the lock panel. */ .cal-card--locked { opacity: 0.4; pointer-events: none; user-select: none; } /* Toolbar: prev / month label / next */ .cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .cal-month { margin: 0; font: 600 13px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); text-align: center; } .cal-nav { appearance: none; flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 4px; color: var(--text-2); font: 500 15px/1 var(--mono); cursor: pointer; transition: border-color 120ms, color 120ms, transform 120ms; } .cal-nav:hover { border-color: var(--line-3); color: var(--text); transform: translateY(-1px); } .cal-nav:active { transform: translateY(0); } .cal-nav:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; } .cal-nav:disabled, .cal-nav[aria-disabled="true"] { opacity: 0.35; pointer-events: none; } /* Weekday header row */ .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; } .cal-weekdays span { font: 500 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); text-align: center; padding: 4px 0; } /* Day grid */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-day { appearance: none; position: relative; aspect-ratio: 1; min-height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg-3); border: 1px solid var(--line); border-radius: 4px; color: var(--text-2); font: 500 14px/1 var(--mono); cursor: pointer; transition: border-color 120ms, background 120ms, color 120ms; } .cal-day:hover { border-color: var(--line-3); color: var(--text); } .cal-day:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; } .cal-day:disabled { cursor: default; } /* Selected study day */ .cal-day[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: #fff; font-weight: 600; } .cal-day[aria-pressed="true"]:hover { background: var(--coral-2); border-color: var(--coral-2); } /* Today ring (amber, per Night Workshop status/warm signal) */ .cal-day[data-today] { border-color: var(--amber); } .cal-day[data-today]::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--amber); } /* Save in-flight: freeze the cell so rapid double-clicks can't race */ .cal-day[data-busy] { opacity: 0.6; pointer-events: none; } /* Leading/trailing padding cells keep the grid aligned */ .cal-day--pad { visibility: hidden; pointer-events: none; } /* Narrow screens: drop the 40px floor — with aspect-ratio the min-height transfers to min-width and 7 columns overflow the card below ~420px. Cells stay square via aspect-ratio, sized by the grid track. */ @media (max-width: 480px) { .cal-card { padding: 14px; } .cal-grid, .cal-weekdays { gap: 4px; } .cal-day { min-height: 0; font-size: 13px; } } /* Grid states — days are inert until the data layer confirms */ .cal-grid[data-state="loading"] .cal-day, .cal-grid[data-state="error"] .cal-day { opacity: 0.45; pointer-events: none; } .cal-grid[data-state="loading"] { animation: calPulse 1.8s ease-in-out infinite; } @keyframes calPulse { 50% { opacity: 0.7; } } /* Legend + month count */ .cal-meta { display: flex; align-items: center; gap: 16px; margin-top: 14px; font: 400 12px/1 var(--mono); color: var(--text-3); letter-spacing: 0.03em; } .cal-legend { display: inline-flex; align-items: center; gap: 6px; } .cal-dot { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; } .cal-dot--selected { background: var(--coral); } .cal-dot--today { border: 1px solid var(--amber); } .cal-count { margin-left: auto; color: var(--text-2); } /* ── Free-tier lock panel ──────────────────────────────────── */ .cal-lock { background: var(--bg-2); border: 1px solid var(--line-2); border-left: 2px solid var(--coral); border-radius: 6px; padding: 22px 24px; margin-bottom: 22px; } .cal-lock__badge { margin: 0 0 8px; font: 600 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral); } .cal-lock__title { margin: 0 0 8px; font: 600 20px/1.2 var(--display); color: var(--text); } .cal-lock__copy { margin: 0 0 16px; font: 400 14px/1.6 var(--sans); color: var(--text-2); } html:lang(th) .cal-lock__copy { font-family: 'IBM Plex Sans Thai Looped', var(--sans); } /* ── Buttons (mirror .dash-btn) ────────────────────────────── */ .cal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .cal-actions { grid-template-columns: 1fr; } } .cal-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 18px; font: 500 15px/1 var(--sans); letter-spacing: 0.005em; border-radius: 4px; cursor: pointer; text-decoration: none; text-align: center; transition: transform 120ms, border-color 120ms, background 120ms, opacity 120ms; } html:lang(th) .cal-btn { font-family: 'IBM Plex Sans Thai Looped', var(--sans); } .cal-btn:hover { transform: translateY(-1px); } .cal-btn:active { transform: translateY(0); } .cal-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; } .cal-btn--primary { background: var(--coral); border: 1px solid var(--coral); color: #fff; } .cal-btn--primary:hover { background: var(--coral-2); border-color: var(--coral-2); } .cal-btn--outline { background: var(--bg-3); border: 1px solid var(--line-2); color: var(--text-2); } .cal-btn--outline:hover { border-color: var(--line-3); background: var(--bg-2); color: var(--text); } /* ── Footer ────────────────────────────────────────────────── */ .cal-foot { position: relative; z-index: 1; padding: 20px; text-align: center; font: 400 12px/1 var(--mono); color: var(--mute); letter-spacing: 0.06em; } /* ── Reduced-motion respect ───────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .bg-glow span { animation: none; } .cal-section .cursor { animation: none; opacity: 1; } .cal-grid[data-state="loading"] { animation: none; } .cal-btn, .cal-nav, .cal-day { transition: none; } }