/* Chikane Labs student portal (issue #37). Light ground to match the marketing site, * desktop-first lab dashboard. Tokens from tokens.css; light set active via * . app.js contract is load-bearing: element IDs, .hidden, * and .status(+ok/warn/err) must not change. Product register (DESIGN.md): fixed rem * scale, tonal depth, no shadows, Arc Blue as signal only. */ * { box-sizing: border-box; margin: 0; } html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 1rem; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } a { color: inherit; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; border-radius: var(--radius-sm); } .hidden { display: none !important; } .mono { font-family: var(--font-mono); font-size: 0.92em; } /* ---- header ---------------------------------------------------------------- */ .shell-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-7)); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } /* PLACEHOLDER wordmark. SWAP POINT for the #29 mark (same treatment as the site's Wordmark.astro; replace both together). */ .wordmark { font-weight: var(--fw-display); letter-spacing: var(--ls-caps); font-size: 0.95rem; color: var(--text); text-decoration: none; white-space: nowrap; } .wordmark em { font-style: normal; font-weight: var(--fw-body); color: var(--brand-accent); margin-left: 0.35em; } .header-identity { display: flex; align-items: center; gap: var(--space-3); min-height: 32px; } #whoami { color: var(--text-dim); font-size: var(--fs-small); max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Identity lives in the header, outside the JS-toggled views: hide it whenever the signed-in view is hidden (zero JS changes; the CSS reads the view state). */ body:has(#view-app.hidden) .header-identity { visibility: hidden; } /* ---- main container -------------------------------------------------------- */ .shell-main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(var(--space-5), 5vw, var(--space-8)) clamp(var(--space-4), 4vw, var(--space-7)) var(--space-8); } /* ---- login ----------------------------------------------------------------- */ .login { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(var(--space-6), 5vw, var(--space-8)); align-items: center; min-height: min(62vh, 30rem); } .kicker { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--brand-accent); margin-bottom: var(--space-3); } .login-copy h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: var(--fw-display); line-height: 1.06; letter-spacing: var(--ls-display); text-wrap: balance; margin-bottom: var(--space-4); } .login-copy .lede { color: var(--text-dim); font-size: 1.08rem; max-width: 46ch; margin-bottom: var(--space-6); } /* login "what's included" rail */ .includes { list-style: none; display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); } .includes li { display: grid; gap: 2px; padding-left: var(--space-4); position: relative; } .includes li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--brand-accent); } .includes-t { font-weight: var(--fw-heading); font-size: 0.98rem; } .includes-d { color: var(--text-dim); font-size: var(--fs-small); } /* ---- login: the how-it-works strip + doors (#49) --------------------------- */ /* Full-width row under the two-column hero; the login section becomes a single grid column at this point, so .login-more spans both hero columns. */ .login-more { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: var(--space-6); display: grid; gap: var(--space-5); } .steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-5); padding: 0; } .steps li { counter-increment: step; display: grid; gap: var(--space-1); align-content: start; } .steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--brand-accent-strong); margin-bottom: var(--space-1); } .steps-t { font-weight: var(--fw-heading); font-size: 0.98rem; } .steps-d { color: var(--text-dim); font-size: var(--fs-small); max-width: 34ch; } .login-doors { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); font-size: var(--fs-small); color: var(--text-dim); } .login-doors a { color: var(--brand-accent-strong); text-decoration: none; font-weight: var(--fw-heading); } .login-doors a:hover { text-decoration: underline; } /* ---- dashboard ------------------------------------------------------------- */ .dash-head { margin-bottom: var(--space-6); } .dash-head h1 { font-size: 1.9rem; font-weight: var(--fw-heading); line-height: var(--lh-heading); letter-spacing: -0.01em; } .dash-head .sub { color: var(--text-dim); margin-top: var(--space-2); max-width: 60ch; } .dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr); gap: var(--space-5); align-items: start; } .dash-main { display: grid; gap: var(--space-5); align-content: start; } .dash-side { display: grid; gap: var(--space-5); align-content: start; } .lab-detail-value { display: flex; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); } .lab-detail-value input { min-width: 0; width: 100%; font-family: var(--font-mono); } .lab-detail-value button { flex-shrink: 0; } @media (max-width: 420px) { .lab-detail-value { flex-wrap: wrap; } .lab-detail-value button { width: 100%; } } /* ---- panel (the one container primitive) ----------------------------------- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); } .panel-title { font-size: 1.05rem; font-weight: var(--fw-heading); line-height: var(--lh-heading); margin-bottom: var(--space-3); } .panel-body { color: var(--text-dim); font-size: var(--fs-small); margin-bottom: var(--space-3); } .panel-link { display: block; color: var(--brand-accent-strong); text-decoration: none; font-size: var(--fs-small); font-weight: var(--fw-heading); padding: 2px 0; } .panel-link:hover { text-decoration: underline; } /* ---- session cluster ------------------------------------------------------- */ .session { padding: var(--space-6); } .session-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .session-state { min-width: 0; } .session-actions { margin-top: var(--space-5); display: flex; gap: var(--space-3); flex-wrap: wrap; } /* ---- status line (the instrument) ------------------------------------------ */ /* app.js sets className "status [ok|warn|err]"; text stays AA on the light ground, the dot carries the bright signal colour. */ .status { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-3); min-height: 1.75rem; font-size: var(--fs-small); color: var(--text-dim); } .status::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: var(--radius-full); background: #94a3b8; align-self: center; transition: background 150ms cubic-bezier(0.25, 1, 0.5, 1); } .status.ok { color: #15803d; } .status.ok::before { background: var(--ok); } .status.warn { color: #b45309; } .status.warn::before { background: var(--warn); animation: pulse 1.6s cubic-bezier(0.25, 1, 0.5, 1) infinite; } .status.err { color: #b91c1c; } .status.err::before { background: var(--err); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @media (prefers-reduced-motion: reduce) { .status.warn::before { animation: none; } * { transition-duration: 0.01ms !important; } } /* ---- timer (the big instrument) -------------------------------------------- */ .timer { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; } /* ---- buttons --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--brand-accent-strong); color: var(--brand-on-accent); font-weight: var(--fw-heading); text-decoration: none; transition: filter 150ms cubic-bezier(0.25, 1, 0.5, 1), background 150ms; } .btn:hover:not(:disabled) { filter: brightness(1.08); } .btn:disabled { opacity: 0.55; cursor: default; } .btn-lg { padding: 13px 28px; font-size: 1.02rem; } .btn-ghost { background: transparent; color: var(--brand-accent-strong); border: 1px solid var(--line); transition: border-color 150ms cubic-bezier(0.25, 1, 0.5, 1), color 150ms, background 150ms; } .btn-ghost:hover:not(:disabled) { filter: none; border-color: var(--brand-accent); background: var(--brand-accent-soft); } .btn-small { padding: 6px 14px; font-size: var(--fs-small); white-space: nowrap; position: relative; } .btn-small::before { content: ""; position: absolute; inset: -6px; } /* 44px hit area */ /* ---- launch tiles ---------------------------------------------------------- */ .launch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-4); } /* Gaps collapse around .hidden tiles, so an empty grid takes no space. */ .launch-grid:not(:has(a:not(.hidden))) { display: none; } .launch { display: grid; gap: var(--space-2); padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); transition: border-color 150ms cubic-bezier(0.25, 1, 0.5, 1), background 150ms; } .launch:hover { border-color: var(--brand-accent); background: var(--brand-accent-soft); } .launch .t { font-weight: var(--fw-heading); font-size: 1.12rem; } .launch .d { color: var(--text-dim); font-size: var(--fs-small); } .launch-go { margin-top: var(--space-2); color: var(--brand-accent-strong); font-size: var(--fs-small); font-weight: var(--fw-heading); } .launch-go::after { content: " \2197"; } /* ---- modules panel --------------------------------------------------------- */ #account-grants { color: var(--text-dim); font-size: var(--fs-small); display: grid; gap: var(--space-1); } #account-portal { margin-top: var(--space-3); } /* ---- footer ---------------------------------------------------------------- */ .shell-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-5) clamp(var(--space-4), 4vw, var(--space-7)); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-dim); } .shell-footer nav { display: flex; gap: var(--space-5); flex-wrap: wrap; } .shell-footer a { color: var(--text-dim); text-decoration: none; } .shell-footer a:hover { color: var(--text); } /* ---- set-password page (setup.html, #43) ----------------------------------- */ /* A focused single-task card, centered in the wide container. */ .console { width: 100%; max-width: 30rem; margin: clamp(var(--space-5), 6vh, var(--space-8)) auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); } .console h1 { font-size: 1.42rem; font-weight: var(--fw-heading); line-height: var(--lh-heading); letter-spacing: -0.01em; text-wrap: balance; margin-bottom: var(--space-2); } .console .sub { color: var(--text-dim); margin-bottom: var(--space-5); text-wrap: pretty; } .console .btn { width: 100%; } .console .status { margin-top: var(--space-4); } .field { margin-top: var(--space-4); } .field label { display: block; font-size: var(--fs-small); color: var(--text-dim); margin-bottom: var(--space-1); } .input { width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--text); font: inherit; } .input:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 1px; } .field .hint { font-size: var(--fs-small); color: var(--text-dim); margin-top: var(--space-1); } .setup-email { color: var(--text); font-weight: var(--fw-heading); } #setup-form .btn { margin-top: var(--space-5); } /* ---- responsive ------------------------------------------------------------ */ @media (max-width: 56rem) { .login { grid-template-columns: 1fr; min-height: 0; gap: var(--space-6); } .dash-grid { grid-template-columns: 1fr; } } @media (max-width: 34rem) { .shell-header { padding-inline: var(--space-4); } .wordmark { font-size: 0.82rem; } #whoami { max-width: 8rem; } .session { padding: var(--space-5); } .session-actions .btn { flex: 1; } } /* ---- Course selector (2026-08-21) ------------------------------------------ Module + course pickers above the session actions. Hidden until the API reports at least one entitled module, so operator-seeded students who have no grants keep the original single-button dashboard. */ .course-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 0.75rem; align-items: center; margin: 0 0 var(--space-4); max-width: 34rem; } .course-label { font-size: var(--fs-small); color: var(--text-dim); white-space: nowrap; } .course-pick select { width: 100%; padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; } .course-pick select:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 1px; } .course-pick select:disabled { opacity: 0.6; } /* Course progress (#64): checklist + bar */ .progress-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 0.6rem; } #progress-fill { height: 100%; width: 0; background: var(--brand-accent); border-radius: 999px; transition: width 0.3s ease; } .progress-step { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0; font-size: var(--fs-small); cursor: pointer; } .progress-step a { color: inherit; } .progress-final { border-top: 1px solid var(--line); margin-top: 0.3rem; padding-top: 0.5rem; font-weight: 600; } /* Team seats (#63): org-admin seat list in the side rail */ .org-seat { padding: 0.6rem 0; border-top: 1px solid var(--line); font-size: var(--fs-small); } .org-seat:first-child { border-top: 0; padding-top: 0; } .org-seat-form { display: flex; gap: 0.4rem; margin-top: 0.4rem; } .org-seat-form input { flex: 1; min-width: 0; padding: 0.4rem 0.5rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-small); } .org-seat-form input:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 1px; } @media (max-width: 40rem) { .course-pick { grid-template-columns: 1fr; } }