/* Glass -- a trial look layered over styles.css.
 *
 * The school's campus photo fills the window, blurred and smoked, and the
 * chrome floats over it as frosted panels: the rail a shade lighter than the
 * canvas, the composer and menus as glass cards with a lit top edge. Only
 * active under html.glass (index.html sets it; ?ui=classic turns it off), so
 * styles.css stays the cream look untouched.
 *
 * The photo comes from the school's theme.backdrop in school.json, written to
 * --backdrop-image by app.js. With no photo the smoke alone makes a plain
 * dark ground. */

:root.glass {
  --backdrop-image: none;
  --backdrop-blur: 22px;
  --smoke: rgba(14, 15, 19, 0.58);
  --smoke-deep: rgba(10, 11, 14, 0.74);

  --glass: rgba(255, 255, 255, 0.07);
  --glass-strong: rgba(255, 255, 255, 0.11);
  --glass-hover: rgba(255, 255, 255, 0.1);
  --glass-solid: rgba(28, 29, 34, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-lit: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --frost: blur(28px) saturate(160%);

  --page: transparent;
  --card: rgba(255, 255, 255, 0.07);
  --card-2: rgba(255, 255, 255, 0.05);
  --panel: var(--glass-solid);
  --ink: #f6f4ef;
  --ink-2: #ece8de;
  --ink-3: #ddd8cc;
  --text: rgba(255, 255, 255, 0.8);
  --text-2: rgba(255, 255, 255, 0.86);
  --muted: rgba(255, 255, 255, 0.52);
  --gold: #cab98c;
  --gold-text: #e0cf9f;
  --btn: #f6f4ef;
  --btn-soft: rgba(255, 255, 255, 0.1);
  --btn-soft-text: rgba(255, 255, 255, 0.86);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --white-veil: rgba(255, 255, 255, 0.08);
  --white-veil-strong: rgba(255, 255, 255, 0.12);
  --ink-veil: rgba(255, 255, 255, 0.07);
  --ink-veil-strong: rgba(255, 255, 255, 0.12);
  --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.25);
  --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 30px 90px rgba(0, 0, 0, 0.55);
  --scrim: rgba(6, 7, 9, 0.45);

  color-scheme: dark;
}

/* The ground ------------------------------------------------------- */

.glass body {
  background: #16171b;
  color: var(--text);
}

/* Photo, then smoke. Oversized so the blur has no soft edge to show. */
.glass body::before,
.glass body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.glass body::before {
  inset: -60px;
  background: var(--backdrop-image) center / cover no-repeat;
  filter: blur(var(--backdrop-blur)) saturate(1.25);
  transition: opacity 600ms ease;
}

.glass body::after {
  background:
    radial-gradient(120% 90% at 50% 20%, transparent 0%, rgba(8, 9, 12, 0.35) 100%),
    linear-gradient(180deg, var(--smoke) 0%, var(--smoke-deep) 100%);
}

.glass .shell,
.glass .main,
.glass .lock,
.glass .boot {
  background: transparent;
}

/* The loading overlay must hide the shell while init fills it, exactly as the
 * cream one does -- so it carries its own opaque copy of the ground rather
 * than frosting whatever half-built page is underneath. */
.glass .boot {
  background: #16171b;
  overflow: hidden;
  isolation: isolate;
}

.glass .boot::before,
.glass .boot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.glass .boot::before {
  inset: -60px;
  background: var(--backdrop-image) center / cover no-repeat;
  filter: blur(var(--backdrop-blur)) saturate(1.25);
}

.glass .boot::after {
  background:
    radial-gradient(120% 90% at 50% 20%, transparent 0%, rgba(8, 9, 12, 0.35) 100%),
    linear-gradient(180deg, var(--smoke) 0%, var(--smoke-deep) 100%);
}

.glass .boot-name,
.glass .brand {
  color: var(--ink);
}

/* The Nu mark is drawn in ink; on smoke it turns to paper. */
.glass .brand-mark,
.glass .lock-seal img[src$="nu-mark.svg"] {
  filter: invert(1) brightness(1.05);
}

/* Rail -------------------------------------------------------------- */

.glass .sidebar {
  background: var(--glass);
  border-right: 1px solid var(--line);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
}

.glass .sidebar::before {
  filter: invert(1);
  opacity: 0.05;
}

.glass .rail-search {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line);
}

.glass .rail-search:hover {
  background: rgba(255, 255, 255, 0.08);
}

.glass .rail-search:focus-within {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 1px var(--line-strong);
  background: rgba(255, 255, 255, 0.09);
}

.glass .chat-list {
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.glass .chat-row.active,
.glass .chat-row.active:hover {
  background: var(--glass-strong);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-lit);
}

.glass .chat-row.active .chat-row-title {
  color: var(--ink);
}

.glass .chat-row.active .chat-row-delete {
  color: var(--muted);
}

.glass .chat-row.active .chat-row-delete:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}

.glass .profile-avatar {
  background: rgba(255, 255, 255, 0.16);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Floating glass: menus, modals, the collapsed-rail toggle ------------ */

.glass .account-menu,
.glass .modal,
.glass .lock-card,
.glass .rail-toggle,
.glass .toast {
  background: var(--glass-solid);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-lit), var(--shadow-panel);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
}

.glass .modal {
  box-shadow: var(--glass-lit), var(--shadow-modal);
}

/* The account menu rises over the rail and the chat list, and a dozen lines of
 * small type can't be read with rows showing through, so it is nearly solid. */
.glass .account-menu {
  background: rgba(30, 31, 36, 0.96);
}

.glass .rail-toggle:hover {
  background: rgba(48, 49, 55, 0.8);
}

.glass .toast {
  color: var(--ink);
}

.glass .scrim {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Fields: every white input becomes a recessed pane. */
.glass .lock-field input,
.glass .menu-field input,
.glass .school-select,
.glass .confirm-input,
.glass .report-text,
.glass .ob-field select,
.glass .ob-field input,
.glass .ob-results,
.glass .review-table select {
  background-color: rgba(0, 0, 0, 0.22);
  border-color: var(--line-strong);
  color: var(--ink);
}

.glass .school-select,
.glass .ob-field select {
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%23f6f4ef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
}

.glass select option {
  background: #222328;
  color: #f6f4ef;
}

.glass .lock-field input::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.glass .lock-seal {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-lit);
}

.glass .lock-error,
.glass .error-note {
  color: #ff9d8f;
}

.glass .error-note {
  border-left-color: #e0685a;
  background: rgba(255, 255, 255, 0.05);
}

/* Buttons: the ink pill becomes a paper pill with ink type. */
.glass .btn {
  color: #151105;
}

.glass .btn:hover:not(:disabled) {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.glass .btn.outline {
  color: var(--ink);
  border-color: var(--line-strong);
}

.glass .btn.soft {
  color: var(--btn-soft-text);
  border-color: transparent;
  box-shadow: var(--glass-lit);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
}

.glass .btn.soft:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
}

.glass .btn.danger {
  color: #fff;
}

/* Thread ------------------------------------------------------------ */

.glass .msg-user {
  background: var(--glass-strong);
  color: var(--ink);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-lit);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
}

.glass .mark-avatar:not(.mark-nu) {
  background: rgba(255, 255, 255, 0.92);
  border-color: transparent;
}

/* The Nu mark is ink; on the smoke it turns paper, as in the rail. */
.glass .mark-nu::after {
  filter: invert(1) brightness(1.05);
}

.glass .mark-monogram:not(.mark-avatar) {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.glass .prose pre,
.glass .prose table,
.glass .dev-facts,
.glass .review-table-wrap {
  background: rgba(0, 0, 0, 0.22);
  border-color: var(--line);
}

.glass .prose th,
.glass .review-table th {
  background: rgba(255, 255, 255, 0.06);
}

.glass .prose blockquote {
  background: rgba(255, 255, 255, 0.05);
}

.glass .msg-actions button:hover,
.glass .tool-btn:hover {
  background: var(--ink);
  color: #151105;
}

.glass .report-kind input:checked + span {
  color: #151105;
}

.glass .msg-actions button.reported:hover {
  background: transparent;
  color: var(--muted);
}

.glass .tool-btn {
  border-color: var(--line-strong);
}

.glass .caret {
  background: var(--ink);
}

/* Composer: the centrepiece pane of glass. */
.glass .composer {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-lit), 0 18px 50px rgba(0, 0, 0, 0.3);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
}

.glass .composer:focus-within {
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow: var(--glass-lit), 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 50px rgba(0, 0, 0, 0.34);
}

.glass .starter,
.glass .starters-more {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-lit);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
}

.glass .starter:hover,
.glass .starters-more:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.26);
}

.glass .round-tool {
  border-color: var(--line-strong);
}

.glass .round-tool:hover,
.glass .round-tool[aria-expanded="true"] {
  color: #151105;
}

/* Nested in the composer's glass, its own frost would blur nothing, so the
 * menu is nearly solid like the account menu; the tour card matches. */
.glass .a11y-menu,
.glass .tour-card {
  background: rgba(30, 31, 36, 0.97);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-lit), var(--shadow-panel);
}

.glass .switch {
  background: rgba(255, 255, 255, 0.22);
}

/* --page is transparent under glass, so ink-on-page pairs name the colour. */
.glass .stepper button:hover:not(:disabled) {
  color: #151105;
}

.glass .switch[aria-checked="true"]::after {
  background: #151105;
}

/* High contrast: the photo recedes behind deeper smoke, every pane goes
 * solid, and text and edges brighten. */
.glass.a11y-contrast {
  --smoke: rgba(8, 9, 12, 0.86);
  --smoke-deep: rgba(6, 7, 9, 0.92);
  --glass: #1f2025;
  --glass-strong: #2a2b31;
  --glass-solid: #1b1c21;
  --glass-edge: rgba(255, 255, 255, 0.5);
  --card: #1f2025;
  --card-2: #1b1c21;
  --text: #fff;
  --text-2: #fff;
  --muted: rgba(255, 255, 255, 0.82);
  --line: rgba(255, 255, 255, 0.4);
  --line-strong: rgba(255, 255, 255, 0.65);
  --white-veil: rgba(255, 255, 255, 0.14);
  --btn-soft-text: #fff;
}

.glass.a11y-contrast .composer,
.glass.a11y-contrast .starter,
.glass.a11y-contrast .starters-more,
.glass.a11y-contrast .sidebar,
.glass.a11y-contrast .msg-user {
  background: var(--glass-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.glass .send-btn {
  background: var(--ink);
  color: #151105;
}

.glass .send-btn:hover:not(:disabled) {
  background: #fff;
}

.glass .send-btn:disabled {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.5);
}

/* Record flow leftovers that were cream cards. */
.glass .chip,
.glass .notice,
.glass .review-summary,
.glass .drop:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--line);
  color: var(--text);
}

.glass .review-table .unmatched-row td {
  background: rgba(255, 196, 92, 0.1);
}

.glass .tag {
  background: rgba(255, 196, 92, 0.22);
  color: #ffd99a;
}

@media (max-width: 860px) {
  /* Over the thread on a phone the rail needs to hold its own. */
  .glass .sidebar {
    background: var(--glass-solid);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass .sidebar,
  .glass .composer,
  .glass .msg-user,
  .glass .account-menu,
  .glass .modal,
  .glass .lock-card {
    background: #24252a;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Answer cards on glass: the frosted card colour, status and series steps
 * chosen for a dark ground, and the grade ramp turned round (A lightest). */
:root.glass {
  /* Smoked, not frosted: the cards sit darker than the page so the data
   * reads against them. */
  --cc-bg: rgba(10, 11, 14, 0.66);
  --cc-bg-2: rgba(255, 255, 255, 0.07);
  --cc-inset: rgba(0, 0, 0, 0.24);
  --tone-good: #6fcf7f;
  --tone-info: #7fb0f0;
  --tone-warn: #f2b84b;
  --tone-serious: #ef8a5f;
  --tone-bad: #f07070;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #9085e9;
  --grade-0: #f1e6c4;
  --grade-1: #d9c48a;
  --grade-2: #b9a05c;
  --grade-3: #937b3b;
  --grade-4: #6b5726;
  --grade-ink-0: #16171b;
  --grade-ink-1: #16171b;
  --grade-ink-2: #16171b;
}

.glass .cc {
  backdrop-filter: blur(12px);
  border-color: var(--glass-edge);
}

.glass .cc-seg.g3,
.glass .cc-seg.g4 {
  color: #f6f4ef;
}

.glass .cc-days i.on {
  color: #16171b;
}