/* Sign-in panel, answer boxes and leader view. Uses the page's Cornerstone tokens. */
.account { background: var(--leaf); border: 1px solid var(--rule); padding: 28px clamp(20px, 4vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.account h2 { font-family: var(--display); font-weight: 300; font-size: clamp(26px, 3.6vw, 32px); letter-spacing: -0.02em; }
.account .note { font-size: 15px; color: var(--ink-soft); max-width: 38em; }
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--rule); }
.tabs button { font-family: var(--label); font-size: 15px; text-transform: lowercase; background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-soft); padding: 8px 14px; margin-bottom: -1px; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--green); border-bottom-color: var(--green); }
.tabs button:focus-visible, .linkish:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.form { display: flex; flex-direction: column; gap: 14px; max-width: 26em; }
.form label { display: flex; flex-direction: column; gap: 4px; font-family: var(--label); font-size: 13px; font-weight: 500; text-transform: lowercase; letter-spacing: .03em; color: var(--ink-soft); }
.form input { font: inherit; font-family: var(--sans); font-size: 17px; text-transform: none; letter-spacing: normal; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; padding: 10px 12px; }
.form input:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
.form .pw { position: relative; display: flex; }
.form .pw input { flex: 1; padding-right: 64px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--label); font-size: 13px; text-transform: lowercase; background: none; border: none; color: var(--green); padding: 6px 8px; cursor: pointer; }
.pw-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 0; }
.form .note .linkish { display: inline; align-self: auto; }
.form .hint { font-family: var(--sans); text-transform: none; letter-spacing: normal; font-size: 13px; }
button.btn { display: inline-block; align-self: flex-start; background: var(--green); color: var(--leaf); border: none; font-weight: 600; padding: 12px 22px; cursor: pointer; }
button.btn:hover { filter: brightness(1.08); }
button.btn:disabled { opacity: .6; cursor: default; }
.linkish { background: none; border: none; padding: 0; font: inherit; color: var(--green); text-decoration: underline; cursor: pointer; align-self: flex-start; }
.msg { font-size: 16px; }
.msg:empty { display: none; }
.msg:not(:empty) { border-left: 4px solid var(--green); background: var(--paper); padding: 12px 16px; max-width: 32em; }
.msg.err { color: #B03A2E; border-left-color: #B03A2E; font-weight: 600; }
.form .callout { border-left: 4px solid var(--green); background: var(--paper); padding: 12px 16px; font-size: 16px; color: var(--ink); max-width: 32em; }
.form .callout .linkish { font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .msg.err { color: #F1948A; } }
:root[data-theme="dark"] .msg.err { color: #F1948A; }
.whoami { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.whoami strong { font-weight: 600; }

/* Reflect questions with answer boxes */
.reflect { display: flex; flex-direction: column; gap: 14px; max-width: 38em; }
.reflect > span { font-family: var(--label); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.reflect ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.reflect li { display: flex; flex-direction: column; gap: 8px; }
.reflect .q { font-family: var(--serif); font-size: 18px; line-height: 1.5; }
.reflect textarea { font: inherit; font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--leaf); border: 1px solid var(--rule); border-radius: 2px; padding: 10px 12px; min-height: 96px; resize: vertical; width: 100%; }
.reflect textarea:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
.reflect textarea:disabled { background: var(--paper); }
.reflect .status { font-size: 13px; color: var(--ink-soft); min-height: 1.2em; }
.reflect .signin-hint { font-size: 14px; color: var(--ink-soft); }

/* Leader view */
.roster { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.student { padding: 20px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.student h3 { font-family: var(--display); font-weight: 300; font-size: 24px; }
.student .meta { font-size: 14px; color: var(--ink-soft); }
.student dl { margin: 0; display: flex; flex-direction: column; gap: 12px; max-width: 42em; }
.student dt { font-family: var(--serif); font-weight: 600; font-size: 16px; }
.student dd { margin: 4px 0 0; white-space: pre-wrap; font-family: var(--serif); }
.student dd.empty { color: var(--ink-soft); font-style: italic; }