/* Your own CSS. Edit freely.
   Colors, fonts and spacing names live in tailwind.config.js. Repeated component styles live in input.css. */

:root {
  --page-max-width: 72rem;   /* width of the page content. Bigger = wider page */
  --page-pad: 2rem;          /* space at the left and right of the page content */
  --logo-h: 26px;            /* height of the logo in the header */
  --logo-shift: -0.75rem;    /* moves the logo left (negative) or right (positive) */
}

/* =====================================================================================================
   CONSISTENCY (desktop and phone). Sizes are NOT changed here, only the things that must match everywhere:
   corners 4px on controls (buttons, fields, toggle, tooltips) and 8px on containers (cards, menus, popups);
   card padding; and one shadow for every menu, dropdown, tooltip and popup (buttons get a tiny one).
   ===================================================================================================== */
:root {
  --r-sm: 4px;
  --r-md: 8px;
  --sh-float: 0 4px 16px rgba(0, 0, 0, 0.12);
  --sh-el: 0 1px 3px rgba(0, 0, 0, 0.12);
  --sh-btn: var(--sh-el);
}
html .btn, html .btn-d, html .btn-l, html .fld, html .in, html .cin, html .tile, html .badge,
html #plat-btn, html .modal-x, html .umenu-item, html .tip, html .wtip { border-radius: var(--r-sm) !important; }
html .seg, html .seg button, html .card, html .modal, html .umenu, html #plat-dd, html .tbl-wrap, html .viewer, html .fq { border-radius: var(--r-md) !important; }
html .btn, html .btn-d, html .btn-l { box-shadow: var(--sh-btn); }
html .btn-d { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); }
html .umenu, html #plat-dd, html .tip, html .wtip, html .modal, html .nav.open { box-shadow: var(--sh-float) !important; }
html .card.p-4, html .card.p-5, html .card.p-6 { padding: 16px; }
html #grade-input, html #paste { padding: 12px; }
html .card, html .fq, html .fld, html .in, html #plat-btn, html .seg, html .tbl-wrap, html .tile { box-shadow: var(--sh-el); }
html #plat-btn, html #paste { box-shadow: none; }

/* ---- Home page: big blue glow behind the paste box ---- */
.glow { position: relative; }
/* Blue wash around the paste box, spreading wide and fading out to the background (fully transparent before the band edge, nothing is cut off) */
.glow::before { content: ""; position: absolute; inset: -100px -190px; z-index: -1; background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.26) 0%, rgba(0, 81, 213, 0.15) 28%, rgba(0, 81, 213, 0.06) 52%, rgba(0, 81, 213, 0) 72%); pointer-events: none; }
.glow > .card { border-color: rgba(0, 30, 130, 0.15); box-shadow: 0 24px 100px rgba(0, 81, 213, 0.18); }
html.m .glow::before { inset: -70px -32px; }

/* ---- Home page: full-width bands that alternate white / the default background ---- */
.band { padding-block: 48px; }
.band > section.wrap { padding-block: 0; }
.band > section.wrap + section.wrap { margin-top: 24px; }
.band-white { background: #fff; }
.band-grey { background: #f5faff; }
.band-hero { position: relative; isolation: isolate; overflow: clip; padding-bottom: 150px; }   /* room for the glow, which is cut off at the edge of the band */
html.m .band-hero { padding-bottom: 95px; }

/* ---- Nav bar shadow ---- */
html .hd { box-shadow: 0 1px 10px rgba(0, 0, 0, 0.06); }

/* ---- Home page: pictures behind the three cards, strongest at the top and fading into white ---- */
.card-img { position: relative; overflow: hidden; isolation: isolate; }
.card-img::before { content: ""; position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center top; background-repeat: no-repeat; opacity: 0.55; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 90%); mask-image: linear-gradient(to bottom, #000 0%, transparent 90%); pointer-events: none; }
html .card-img .txt { color: #0f172a; }
.bg-c1::before { background-image: url("assets/card-1.webp"); }
.bg-c2::before { background-image: url("assets/card-2.webp"); }
.bg-c3::before { background-image: url("assets/card-3.webp"); }

/* ---- Home page: blue privacy banner ---- */
html .banner-blue { background: linear-gradient(135deg, #0a3fb5, #0051d5 55%, #2f6df0) !important; border: 0 !important; background-origin: border-box; color: #fff; }
.banner-blue .txt, .banner-blue li { color: #fff; }
.banner-blue .ic { color: #fff; }

/* ---- Home page: FAQ with the title on the left ---- */
.faq-grid { display: grid; gap: 24px; max-width: 56rem; margin-inline: auto; text-align: left; }
.faq-head .txt { margin-top: 8px; color: #475569; }
@media (min-width: 768px) { .faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

/* ---- Paste box hint text: smaller ---- */
#grade-input::placeholder, #paste::placeholder { font-size: 11px; line-height: 16px; }
html.m #grade-input::placeholder, html.m #paste::placeholder { font-size: 13px; line-height: 18px; }

/* ---- Footer: white, and the space beside and below it is white too; short pages keep it at the bottom ---- */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main { flex: 1 0 auto; }
html .ft { background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax -100vmax -100vmax); }

/* Table: desktop keeps every assignment on one line */
#grid-card .th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#grid-card .td { white-space: nowrap; }
#rows td[colspan] { white-space: normal; }

html { background: #f5faff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis-weight: none; }
::-webkit-scrollbar { display: none; }

.logo img { display: block; height: var(--logo-h); width: auto; }

/* Icons (see icons.js) */
.ic { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; fill: currentColor; vertical-align: middle; }

/* Tooltip (How to copy) */
.tip-wrap { position: relative; display: inline-flex; align-items: center; }
.tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 20rem;
  padding: 6px 9px;
  border-radius: 6px;
  background: #0a0a0a;
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
  z-index: 30;
  pointer-events: none;
}
.tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 12px;
  border: 5px solid transparent;
  border-top-color: #0a0a0a;
}
.tip-wrap:hover .tip,
.tip-wrap:focus-within .tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0.15s;
}

.logo { margin-left: var(--logo-shift, 0); }

/* ---- Accessibility ---- */
[hidden] { display: none !important; }
*:focus-visible { outline: 2px solid #0051d5 !important; outline-offset: 2px !important; }
main:focus, main:focus-visible { outline: none !important; }
.skip { position: absolute; left: 0.5rem; top: -4rem; z-index: 100; padding: 0.5rem 0.9rem; border-radius: 0.5rem; background: #000; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 0.5rem; }
.fld::placeholder, input::placeholder, textarea::placeholder { color: #64748b !important; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---- Submit, admin and legal pages ---- */
.page { padding-block: 2rem 3rem; }
.narrow { max-width: 42rem; margin-inline: auto; }
.legal { max-width: 46rem; margin-inline: auto; }
.legal h2 { margin-top: 1.75rem; }
.legal p, .legal li { font-size: 14px; line-height: 22px; color: #334155; margin-top: 0.5rem; }
.legal ul { padding-left: 1.25rem; list-style: disc; }
.legal a, .notice a, .chk a { color: #0051d5; text-decoration: underline; }
/* Buttons placed inside a guide or legal page keep their own button text colour and no underline */
.legal a.btn-d { color: #fff; text-decoration: none; }
.legal a.btn-l { color: #0f172a; text-decoration: none; }
.form { display: grid; gap: 1.1rem; padding: 1.25rem; margin-top: 1rem; }
.lbl { display: block; font-size: 12px; font-weight: 600; line-height: 16px; color: #0f172a; margin-bottom: 0.25rem; }
.req { font-weight: 400; color: #475569; }
.in { padding: 0.55rem 0.7rem; font-size: 13px; line-height: 20px; }
.fld[aria-invalid="true"] { border-color: #b91c1c; }
.err { font-size: 12px; line-height: 16px; color: #b91c1c; margin-top: 0.25rem; }
.notice { padding: 1rem 1.25rem; margin-top: 1rem; }
.notice ul { padding-left: 1.25rem; list-style: disc; }
.notice li { font-size: 13px; line-height: 20px; color: #475569; margin-top: 0.25rem; }
.chk { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 13px; line-height: 20px; color: #0f172a; }
.chk input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; flex-shrink: 0; accent-color: #0051d5; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.btn-d:disabled { opacity: 0.5; cursor: not-allowed; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.row-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; align-items: center; }


/* ---- Popup (sign-in and confirmations) ----
   Same look everywhere: black see-through overlay, small radius and padding, no blue. */
.modal { border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0; width: min(22rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; background: #fff; color: #0f172a; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.modal::backdrop { background: rgba(0, 0, 0, 0.5); }
.modal-in { padding: 1rem; }
.modal-in > * + * { margin-top: 0.75rem; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.modal-x { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin: -0.25rem -0.25rem 0 0; border: 0; border-radius: 0.25rem; background: transparent; color: #475569; cursor: pointer; }
.modal-x:hover { color: #0f172a; background: #f1f5f9; }
.modal a { color: inherit; text-decoration: underline; }
.modal *:focus-visible { outline: 2px solid #000 !important; outline-offset: 2px !important; }
.g-slot { min-height: 32px; width: 100%; }
.g-slot iframe { display: block; }

/* ---- Header: account buttons and menu ---- */
.auth-slot { display: flex; align-items: center; gap: 0.75rem; }
.auth-slot:empty { display: none; }
.umenu-wrap { position: relative; }
.avatar { overflow: hidden; padding: 0; }
.avatar.has-img { background: #e2e8f0; }
.avatar img { display: block; width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
.avatar { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: #000; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.umenu { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 60; min-width: 14rem; max-width: calc(100vw - 2rem); padding: 0.5rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.umenu-email { font-size: 13px; line-height: 20px; font-weight: 600; color: #0f172a; word-break: break-all; margin-bottom: 0.25rem; }
.umenu-item { display: flex; width: 100%; align-items: center; min-height: 2rem; padding: 0.25rem 0.5rem; border: 0; border-radius: 0.25rem; background: transparent; font: inherit; font-size: 13px; color: #0f172a; text-align: left; text-decoration: none; cursor: pointer; }
.umenu-item:hover { font-weight: 700; background: #f1f5f9; }

/* Small screens: the main links open from the menu button */
@media (max-width: 767px) {
  .nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: fixed; top: 4rem; left: 0; right: 0; padding: 0.5rem 1rem 0.75rem; background: #f8f9ff; border-bottom: 1px solid #e2e8f0; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06); }
  .nav.open .nav-a { align-items: flex-start; padding: 0.75rem 0.5rem; }
}

/* ---- Unsupported platform: yellow warning icon with a small tooltip ---- */
.warn-ic { display: inline-flex; color: #eab308; }
.wtip { position: fixed; z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0s linear 0.15s; background: #0a0a0a; color: #fff; font-size: 11px; line-height: 16px; padding: 4px 8px; border-radius: 0.25rem; white-space: nowrap; pointer-events: none; }
.wtip.on { opacity: 1; visibility: visible; transition: opacity 0.15s ease; }
.modal-btns { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* The chosen toggle stays white on black, even while the pointer is on it */
.seg button[aria-pressed='true'], .seg button[aria-pressed='true']:hover, .seg button[aria-pressed='true']:focus { background-color: #000 !important; color: #fff !important; }

/* No outline box on the platform search field */
#plat-q:focus, #plat-q:focus-visible { outline: none !important; }

/* ---- Narrow desktop windows (not phones): keep the logo full size and the menu button on the right ---- */
@media (max-width: 767px) {
  .hd-in { display: flex; justify-content: space-between; }
  .hd-r { margin-left: auto; }
  .logo { flex-shrink: 0; }
}

/* =====================================================================================================
   PHONE LAYOUT
   Only applies on real phones: mobile.js adds class "m" to <html> (see mobile.js). A narrow desktop window
   never gets this, and a phone turned sideways keeps it. Everything below is scoped to html.m.
   Sizes: page edge 10px, card padding 12px, tap targets 44-48px, inputs 16px (iPhones zoom into smaller text).
   ===================================================================================================== */
html.m {
  --page-pad: 10px;
  --hd-h: 56px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.m body { min-height: 100dvh; }
html.m main { padding-top: var(--hd-h); }
html.m a, html.m button, html.m summary, html.m label, html.m input, html.m textarea { touch-action: manipulation; }

/* Header: logo on the left, menu button on the right */
html.m .hd { height: var(--hd-h); }
html.m .hd-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: var(--page-pad); }
html.m .hd-r { margin-left: auto; gap: 4px; }
html.m .logo { margin-left: 0; flex: 0 1 auto; min-width: 0; min-height: 44px; align-items: center; font-size: 22px; }   /* 44px tall so the whole logo area is easy to tap */
/* The logo gets a real width based on the screen (about 170px on the smallest phones, 240px at most), so it never shrinks to fit a grid cell */
html.m .logo img { height: auto; width: clamp(168px, 58vw, 240px); max-width: none; aspect-ratio: 1389 / 147; }
html.m .menu-btn { display: inline-flex; width: 44px; height: 44px; margin-right: -6px; border-radius: 4px; }
html.m .menu-btn .ic { font-size: 26px; }
html.m .menu-btn:active, html.m .menu-btn[aria-expanded='true'] { background: #e2e8f0; }
html.m .avatar { width: 40px; height: 40px; font-size: 15px; }
html.m .umenu { min-width: 15rem; right: -4px; }
html.m .umenu-item { min-height: 44px; font-size: 15px; }

/* Menu: full-width list under the header with big rows, dark backdrop behind it */
html.m .nav { display: none; }
html.m .nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: fixed; top: var(--hd-h); left: 0; right: 0; padding: 0; background: #fff; border-bottom: 1px solid #e2e8f0; box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14); max-height: calc(100dvh - var(--hd-h)); overflow-y: auto; overscroll-behavior: contain; }
html.m .nav.open .nav-a { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 54px; padding: 0 var(--page-pad); border-radius: 0; font-size: 17px; font-weight: 500; color: #0f172a; text-decoration: none; }
html.m .nav.open .nav-a::after { display: none; }
html.m .nav.open .nav-a + .nav-a { border-top: 1px solid #f1f5f9; }
html.m .nav.open .nav-a:active { background: #f1f5f9; }
html.m .nav.open .nav-a[aria-current='page'] { background: #eff4ff; color: #0051d5; font-weight: 600; text-decoration: none; }
.nav-scrim { display: none; }
html.m .nav-scrim.on { display: block; position: fixed; top: var(--hd-h); right: 0; bottom: 0; left: 0; z-index: 49; background: rgba(15, 23, 42, 0.45); touch-action: none; }

/* Page spacing: as little padding as possible */
html.m .wrap { padding-inline: var(--page-pad); }
html.m .page { padding-block: 14px 24px; }
html.m main > section.wrap { padding-top: 0; padding-bottom: 20px; }
html.m main > section.wrap:first-child { padding-top: 14px; }
html.m .h2 + div { margin-top: 12px; }
html.m .card.p-4, html.m .card.p-5, html.m .card.p-6 { padding: 12px; }

/* Text: one readable size per role */
html.m .h1 { font-size: 24px; line-height: 30px; }
html.m .h2 { font-size: 20px; line-height: 26px; }
html.m .h3 { font-size: 17px; line-height: 23px; }
html.m .txt { font-size: 15px; line-height: 22px; }
html.m .cap { font-size: 13px; line-height: 18px; }
html.m .badge { font-size: 12px; line-height: 18px; }
html.m .legal p, html.m .legal li { font-size: 16px; line-height: 25px; }
html.m .legal h2 { margin-top: 22px; }

/* The wide layouts switch to one column on a phone, even when it is turned sideways */
html.m .md\:grid-cols-2, html.m .md\:grid-cols-3, html.m .lg\:grid-cols-12 { grid-template-columns: minmax(0, 1fr); }
html.m .lg\:col-span-5, html.m .lg\:col-span-7 { grid-column: auto; }
html.m .md\:flex-row, html.m .sm\:flex-row { flex-direction: column; }
html.m .md\:text-left { text-align: center; }

/* Buttons and fields */
html.m .btn, html.m .btn-d, html.m .btn-l { min-height: 48px; padding: 0 18px; border-radius: 4px; font-size: 16px; gap: 8px; }
html.m .btn .ic, html.m .btn-d .ic, html.m .btn-l .ic { font-size: 18px; }
html.m .fld, html.m input:not([type='checkbox']), html.m textarea { font-size: 16px; }
html.m textarea.fld { line-height: 22px; border-radius: 4px; }
html.m .seg { display: flex; width: 100%; border-radius: 8px; }
html.m .seg button { flex: 1; min-height: 44px; border-radius: 8px; font-size: 15px; padding: 0 8px; }
html.m .act-row { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; }
html.m .act-row > .tip-wrap { order: 2; }
html.m .act-row > .btn-d, html.m .act-row > .act-pair { order: 1; width: 100%; }
html.m .act-pair { flex-direction: column-reverse; align-items: stretch; width: 100%; gap: 8px; }
html.m .act-pair > * { width: 100%; }

/* "How to copy": opens under the link when tapped */
html.m .tip-wrap { display: block; width: 100%; }
html.m .tip-wrap > button { min-height: 44px; font-size: 14px; gap: 6px; }
html.m .tip { position: static; display: none; width: auto; max-width: none; margin: 0 0 4px; padding: 10px 12px; border-radius: 4px; font-size: 14px; line-height: 20px; box-shadow: none; opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
html.m .tip::after { display: none; }
html.m .tip-wrap.on .tip { display: block; }
html.m .tip { box-shadow: none !important; }

/* Home page */
html.m #grade-input { height: 140px; padding: 10px; }
html.m .tile { width: 40px; height: 40px; }
html.m .fq summary { min-height: 52px; padding: 12px; gap: 12px; }
html.m .fq summary svg { font-size: 22px; }
html.m .fq p { padding: 0 12px 12px; }

/* Calculator: platform picker and paste box */
html.m .calc-intro { display: none; }
html.m #paste-card { gap: 14px; }
html.m #plat-btn { min-height: 48px; padding: 0 12px; font-size: 16px; border-radius: 4px; }
html.m #plat-btn .ic { font-size: 22px; }
html.m #plat-dd { border-radius: 8px; }
html.m #plat-dd > div:first-child > div { padding: 6px 10px; border-radius: 4px; }
html.m #plat-q { min-height: 32px; }
html.m #plat-list { max-height: 46dvh; }
html.m #plat-list button { min-height: 48px; padding: 0 12px; font-size: 16px; }
html.m #paste { height: 120px; padding: 10px; }

/* Calculator: the table becomes one card per assignment, and the grade stays visible at the top while scrolling */
html.m #grid-card { display: flex; flex-direction: column; overflow: visible; scroll-margin-top: calc(var(--hd-h) + 8px); }
html.m #grid-card > :nth-child(1) { order: 0; position: sticky; top: var(--hd-h); z-index: 10; flex-wrap: nowrap; gap: 12px; padding: 10px 12px; background: #fff; border-radius: 7px 7px 0 0; }
html.m #grid-card > :nth-child(3) { order: 1; padding: 8px 12px; border-top: 0; border-bottom: 1px solid #e2e8f0; }
html.m #grid-card > :nth-child(2) { order: 2; overflow: hidden; border-radius: 0 0 7px 7px; }
html.m #course { width: auto !important; flex: 1 1 0; min-width: 0; }
html.m .tb-row { flex-wrap: nowrap; flex: 1 1 0; min-width: 0; }
html.m .tb-row > h2 { flex: 1 1 0; min-width: 0; }
html.m #score, html.m #letter { font-size: 24px; line-height: 28px; }
html.m #grid-card > :nth-child(3) { flex-wrap: nowrap; gap: 12px; }
html.m #count { display: none; }
/* Table on a phone: one compact card per assignment, two lines, no labels above the fields.
   Line 1: assignment name and remove.  Line 2: type, score, weight. */
html.m #grid-card table, html.m #grid-card tbody { display: block; width: 100%; }
html.m #grid-card colgroup { display: none; }
html.m #grid-card thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* hidden from view, still read by screen readers */
html.m #rows tr { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.7fr); gap: 4px 8px; padding: 6px 12px 8px; align-items: center; }
html.m #rows .td { padding: 0; min-width: 0; }
html.m #rows td[data-c='name'] { grid-column: 1 / 3; grid-row: 1; }
html.m #rows td[data-c='rm'] { grid-column: 3; grid-row: 1; justify-self: end; }
html.m #rows td[data-c='type'] { grid-column: 1; grid-row: 2; }
html.m #rows td[data-c='score'] { grid-column: 2; grid-row: 2; }
html.m #rows td[data-c='mult'] { grid-column: 3; grid-row: 2; }
/* College: category, percentage, score and multiplier share the second line */
html.m #grid-card.college #rows tr { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.75fr) minmax(0, 1fr) minmax(0, 0.8fr); }
html.m #grid-card.college #rows td[data-c='name'] { grid-column: 1 / 4; }
html.m #grid-card.college #rows td[data-c='rm'] { grid-column: 4; }
html.m #grid-card.college #rows td[data-c='type'] { grid-column: 1; grid-row: 2; }
html.m #grid-card.college #rows td[data-c='pct'] { grid-column: 2; grid-row: 2; }
html.m #grid-card.college #rows td[data-c='score'] { grid-column: 3; grid-row: 2; }
html.m #grid-card.college #rows td[data-c='mult'] { grid-column: 4; grid-row: 2; }
html.m #rows td[colspan] { grid-column: 1 / -1 !important; grid-row: auto !important; justify-self: stretch; padding: 24px 8px; text-align: center; white-space: normal; }
html.m #rows .cin { display: block; width: 100%; height: 36px; padding: 0 10px; border: 1px solid #e2e8f0; border-radius: 4px; background: #f8fafc; font-size: 16px; line-height: 24px; color: #0f172a; }
html.m #rows td:nth-child(1) .cin { font-weight: 600; }
html.m #rows [data-rm] { width: 36px; height: 36px; margin-right: -6px; border-radius: 4px; }
html.m #rows [data-rm]:active { background: #f1f5f9; }
html.m #rows [data-rm] .ic { font-size: 20px; }
@media (max-width: 359px) {
  html.m #rows tr { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); }
  html.m #rows td[data-c='name'] { grid-column: 1; }
  html.m #rows td[data-c='rm'] { grid-column: 2; }
  html.m #rows td[data-c='type'] { grid-column: 1 / -1; grid-row: 2; }
  html.m #rows td[data-c='score'] { grid-column: 1; grid-row: 3; }
  html.m #rows td[data-c='mult'] { grid-column: 2; grid-row: 3; }
  html.m #grid-card.college #rows tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html.m #grid-card.college #rows td[data-c='name'] { grid-column: 1; }
  html.m #grid-card.college #rows td[data-c='rm'] { grid-column: 2; }
  html.m #grid-card.college #rows td[data-c='type'] { grid-column: 1 / -1; grid-row: 2; }
  html.m #grid-card.college #rows td[data-c='pct'] { grid-column: 1; grid-row: 3; }
  html.m #grid-card.college #rows td[data-c='score'] { grid-column: 2; grid-row: 3; }
  html.m #grid-card.college #rows td[data-c='mult'] { grid-column: 1 / -1; grid-row: 4; }
}

/* Submit and admin pages */
html.m .form { padding: 12px; gap: 14px; margin-top: 12px; }
html.m .lbl { margin-bottom: 6px; font-size: 14px; line-height: 20px; }
html.m .in { min-height: 48px; padding: 0 12px; border-radius: 4px; font-size: 16px; line-height: 24px; }
html.m textarea.in { min-height: 160px; padding: 12px; }
html.m .chk { gap: 12px; min-height: 44px; font-size: 15px; line-height: 22px; }
html.m .chk input { width: 24px; height: 24px; margin-top: 0; }
html.m .err { font-size: 13px; line-height: 18px; }
html.m .actions { flex-direction: column; align-items: stretch; }
html.m .actions .btn-d { width: 100%; }
html.m .notice { padding: 12px; margin-top: 12px; }
html.m .notice li { font-size: 15px; line-height: 22px; }
html.m .row-btns { gap: 8px; }

/* Popups: nearly full width, big buttons */
html.m .modal { width: calc(100vw - 20px); max-width: 26rem; max-height: calc(100dvh - 20px); border-radius: 8px; }
html.m .modal-in { padding: 14px; }
html.m .modal-x { width: 44px; height: 44px; margin: -10px -10px 0 0; }
html.m .modal-btns .btn, html.m .modal-btns .btn-d, html.m .modal-btns .btn-l, html.m .row-btns .btn, html.m .row-btns .btn-d, html.m .row-btns .btn-l { flex: 1 1 auto; }

/* Footer: links wrap into rows with big tap targets, copyright last */
html.m .ft-in { flex-direction: column; align-items: center; gap: 0; padding: 4px var(--page-pad) calc(8px + env(safe-area-inset-bottom, 0px)); font-size: 13px; line-height: 18px; }
html.m .ft-in nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; }
html.m .ft-in nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
html.m .ft-in > span { order: 2; padding-bottom: 4px; }

/* ---- Submit a platform page: the form card keeps its shadow, the fields and buttons inside it have none ---- */
.page-submit .in, .page-submit .fld, .page-submit .notice, .page-submit .btn, .page-submit .btn-d, .page-submit .btn-l, .page-submit .chk input { box-shadow: none; }

/* ======================================================================================================================
   Admin console (/admin and /admin/email)
   Same look as the rest of the site, just denser: white panels with 8px corners and a soft shadow, 4px controls, light borders.
   Colors used: ink #0f172a, lines #e2e8f0 / #cbd5e1, strip #f8fafc, accent #0051d5, danger #b91c1c. Mono is kept only for code, addresses and values.
   ====================================================================================================================== */
:root { --ad-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
.ad-wrap { max-width: 76rem; margin-inline: auto; }
.ad-wrap [hidden], .ad-modal [hidden] { display: none !important; }
.ad-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Title and page bar */
.ad-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ad-title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.025em; color: #0f172a; }
@media (min-width: 640px) { .ad-title { font-size: 30px; line-height: 38px; } }
.ad-sub { font-size: 13px; line-height: 20px; color: #64748b; }
.ad-nav { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 12px 0 16px; border-bottom: 1px solid #e2e8f0; }
.ad-nav-links { display: flex; overflow-x: auto; scrollbar-width: none; }
.ad-nav-a { display: inline-flex; align-items: center; padding: 10px 16px; margin-bottom: -1px; border-bottom: 2px solid transparent; border-radius: 4px 4px 0 0; font-size: 13px; line-height: 20px; font-weight: 500; color: #475569; text-decoration: none; white-space: nowrap; }
.ad-nav-a:hover { color: #0f172a; background: rgba(255, 255, 255, 0.7); }
.ad-nav-a[aria-current="page"] { color: #0f172a; font-weight: 600; border-bottom-color: #0f172a; }
.ad-nav-r { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; }

/* Sign-in box */
.ad-gate { margin-top: 16px; padding: 20px; max-width: 28rem; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-md); box-shadow: var(--sh-el); }
.ad-gate-t { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: #0f172a; }
.ad-gate-p { margin: 6px 0 12px; font-size: 13px; line-height: 20px; color: #475569; }

/* The panel: title strip, optional bars, content, status strip */
.ad-frame { background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-md); box-shadow: var(--sh-el); overflow: hidden; }
.ad-frame-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.ad-frame-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; min-width: 0; }
.ad-frame-name { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.005em; color: #0f172a; }
.ad-frame-meta { font-size: 12px; line-height: 16px; color: #64748b; overflow-wrap: anywhere; }
.ad-frame-bar { padding: 8px 12px; border-bottom: 1px solid #e2e8f0; }
.ad-frame-f { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 8px 12px; background: #f8fafc; border-top: 1px solid #e2e8f0; }
.ad-spacer { flex: 1; }

/* Buttons and fields: flat, square, one clear focus ring */
.ad-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid #e2e8f0; border-radius: var(--r-sm); background: #fff; box-shadow: none; font: inherit; font-size: 13px; line-height: 1; font-weight: 500; color: #0f172a; transition: background-color 0.15s; white-space: nowrap; cursor: pointer; }
.ad-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.ad-btn.sm { min-height: 28px; padding: 0 10px; font-size: 12px; }
.ad-btn.pri { background: #000; border-color: #000; color: #fff; }
.ad-btn.pri:hover { background: #131b2e; border-color: #131b2e; }
.ad-btn.danger { color: #b91c1c; border-color: #fecaca; }
.ad-btn.danger:hover { background: #fef2f2; border-color: #fca5a5; }
.ad-btn.danger-solid { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.ad-btn.danger-solid:hover { background: #991b1b; border-color: #991b1b; }
.ad-btn.quiet { border-color: transparent; background: transparent; box-shadow: none; color: #475569; }
.ad-btn.quiet:hover { color: #0f172a; background: #f1f5f9; }
.ad-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ad-btn:focus-visible, .ad-seg button:focus-visible, .ad-nav-a:focus-visible, .em-row:focus-visible, .ad-code:focus-visible, .ad-tbl tbody tr:focus-visible { outline: 2px solid #0051d5; outline-offset: -2px; }
.ad-btn:focus-visible { outline-offset: 1px; }
.ad-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ad-end { justify-content: flex-end; }
.ad-lbl { display: block; margin-bottom: 4px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #475569; }
.ad-hint { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: #64748b; }
.ad-note { margin: 0; font-size: 12px; line-height: 18px; color: #475569; }
.ad-note.err { color: #b91c1c; }
.ad-empty { margin: 0; padding: 24px 16px; text-align: center; font-size: 13px; line-height: 20px; color: #64748b; }
.ad-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; line-height: 16px; color: #334155; cursor: pointer; }
.ad-check input, .em-selall input, .em-item input, .em-option input { width: 16px; height: 16px; margin: 0; accent-color: #0f172a; cursor: pointer; }

/* Filter: connected square segments */
.ad-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid #e2e8f0; border-radius: var(--r-md); background: #fff; box-shadow: var(--sh-el); }
.ad-seg button { appearance: none; min-height: 28px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; font: inherit; font-size: 12px; line-height: 1; font-weight: 500; color: #475569; cursor: pointer; }
.ad-seg button:hover { color: #0f172a; }
.ad-seg button[aria-pressed="true"], .ad-seg button[aria-pressed="true"]:hover { background: #000; color: #fff; }

/* Submissions: list and detail side by side, each scrolls inside the panel */
.ad-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); height: clamp(26rem, 68vh, 46rem); }
.ad-list { min-width: 0; overflow: auto; border-right: 1px solid #e2e8f0; }
.ad-detail { min-width: 0; overflow: auto; padding: 16px; }
.ad-tbl { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 20px; text-align: left; }
.ad-tbl th { position: sticky; top: 0; z-index: 1; padding: 8px 12px; background: #fff; border-bottom: 1px solid #e2e8f0; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; white-space: nowrap; }
.ad-tbl td { padding: 6px 12px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; color: #0f172a; }
.ad-tbl td:nth-child(2), .ad-tbl td:nth-child(3), .ad-tbl td:nth-child(4) { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #475569; }
.ad-tbl td:first-child, .ad-tbl th:first-child { border-left: 3px solid transparent; }
.ad-tbl tbody tr { cursor: pointer; }
.ad-tbl tbody tr:hover { background: #f8fafc; }
.ad-tbl tbody tr.sel { background: #eff4ff; }
.ad-tbl tbody tr.sel td:first-child { border-left-color: #0051d5; }
.ad-tbl tr.done td { color: #64748b; }
.ad-tag { display: inline-block; padding: 1px 8px; border: 1px solid; border-radius: 999px; font-size: 11px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.ad-tag.open { color: #0051d5; border-color: #b4c5ff; background: #eff4ff; }
.ad-tag.done { color: #64748b; border-color: #e2e8f0; background: #f1f5f9; }
.ad-detail-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.ad-detail-t { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: #0f172a; overflow-wrap: anywhere; }
.ad-detail-t:focus { outline: none; }
.ad-detail-bar { margin-top: 12px; }
.ad-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 12px 0 0; border: 1px solid #e2e8f0; border-radius: var(--r-md); overflow: hidden; }
.ad-meta dt, .ad-meta dd { margin: 0; padding: 6px 10px; border-bottom: 1px solid #e2e8f0; }
.ad-meta dt:last-of-type, .ad-meta dd:last-of-type { border-bottom: 0; }
.ad-meta dt { background: #f8fafc; border-right: 1px solid #e2e8f0; font-size: 11px; line-height: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
.ad-meta dd { font-family: var(--ad-mono); font-size: 12px; line-height: 18px; color: #0f172a; overflow-wrap: anywhere; }
.ad-code { margin: 8px 0 0; padding: 10px 12px; max-height: 24rem; overflow: auto; background: #f8fafc; color: #0f172a; border: 1px solid #e2e8f0; border-radius: var(--r-md); font-family: var(--ad-mono); font-size: 12px; line-height: 18px; white-space: pre-wrap; word-break: break-all; }

/* Email */
.em-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; padding: 6px 12px; border-bottom: 1px solid #e2e8f0; }
.em-selall { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; cursor: pointer; }
.em-title { font-size: 13px; line-height: 20px; font-weight: 700; color: #0f172a; }
.em-pad { padding: 16px; }
.em-list:empty { display: none; }
.em-colhead { display: grid; grid-template-columns: 10px 180px minmax(0, 1fr) 92px 84px; gap: 12px; padding: 6px 12px 6px 40px; border-bottom: 1px solid #e2e8f0; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
.em-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.em-item input { justify-self: center; }
.em-item.unread { background: #fff; }
.em-item:hover { background: #f1f5f9; }
.em-item.sel, .em-item.sel:hover { background: #eff4ff; }
.em-row { display: grid; grid-template-columns: 10px 180px minmax(0, 1fr) 92px 84px; gap: 12px; align-items: center; min-width: 0; padding: 9px 12px 9px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left; font: inherit; font-size: 13px; line-height: 20px; color: #475569; cursor: pointer; }
.em-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.em-item.unread .em-dot { background: #0051d5; }
.em-from, .em-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-snip { color: #94a3b8; }
.em-rcpt { min-width: 0; }
.em-rcpt span { display: inline-block; max-width: 100%; padding: 1px 8px; border: 1px solid #e2e8f0; border-radius: 999px; background: #f1f5f9; font-size: 11px; line-height: 16px; font-weight: 500; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.em-rcpt.p span { background: #eff4ff; border-color: #b4c5ff; color: #0051d5; }
.em-date { font-variant-numeric: tabular-nums; font-size: 12px; line-height: 16px; color: #64748b; white-space: nowrap; }
.em-item.unread .em-from, .em-item.unread .em-subj { font-weight: 700; color: #0f172a; }
.em-item.unread .em-date { color: #0f172a; }
.em-more { margin: 12px; }
.em-subject { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; color: #0f172a; overflow-wrap: anywhere; }
.em-headers { margin-top: 12px; }
.em-msg-body { margin: 16px 0 0; padding: 12px; border: 1px solid #e2e8f0; border-radius: var(--r-md); font: inherit; font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; color: #0f172a; }
.em-frame { display: block; width: 100%; height: 28rem; margin-top: 16px; border: 1px solid #e2e8f0; border-radius: var(--r-md); background: #fff; }
.em-readarea .ad-note { margin-top: 12px; }
.em-form { max-width: 48rem; }
.em-field { margin-top: 14px; }
.em-field:first-child { margin-top: 0; }
.em-input { display: block; width: 100%; padding: 0.55rem 0.7rem; border: 1px solid #e2e8f0; border-radius: var(--r-sm); background: #f8fafc; box-shadow: none; font: inherit; font-size: 13px; line-height: 20px; color: #0f172a; }
.em-input:focus { border-color: #0051d5; }
.em-textarea { min-height: 12rem; resize: vertical; }
.em-from-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.em-from-row .em-input { width: auto; flex: 1 1 10rem; }
.em-at { font-family: var(--ad-mono); font-size: 13px; line-height: 20px; color: #475569; }
.em-option { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: var(--r-sm); background: #fff; cursor: pointer; }
.em-option input { flex: none; margin-top: 2px; }
.em-option-t { display: block; font-size: 13px; line-height: 20px; font-weight: 600; color: #0f172a; }
.em-send-row { margin-top: 14px; }
.em-send-row + .ad-note { margin-top: 8px; }
.em-usage { display: flex; align-items: center; gap: 12px; }
.em-meter { width: 140px; height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.em-meter > div { height: 100%; width: 0; background: #0f172a; transition: width 0.3s; }
.em-meter.warn > div { background: #b91c1c; }
@media (prefers-reduced-motion: reduce) { .em-meter > div { transition: none; } }

/* Confirmation popup in the admin pages: same flat look. The selector is more specific than the site-wide popup rules, so it wins. */
html .modal.ad-modal { border: 1px solid #e2e8f0; border-radius: var(--r-md) !important; box-shadow: var(--sh-float) !important; }
.ad-modal-t { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: #0f172a; }
.ad-modal-p { margin: 0; font-size: 13px; line-height: 20px; color: #475569; }

/* Narrower windows: the submission list and its detail stack, and the email list becomes two lines per message */
@media (max-width: 62rem) {
  .ad-split { display: block; height: auto; }
  .ad-list { max-height: 24rem; border-right: 0; border-bottom: 1px solid #e2e8f0; }
  .ad-detail { overflow: visible; }
}
@media (max-width: 699px) {
  .em-colhead { display: none; }
  .em-row { grid-template-columns: 10px minmax(0, 1fr) auto; gap: 2px 8px; }
  .em-from { grid-column: 2; }
  .em-date { grid-column: 3; }
  .em-rcpt { grid-column: 2; grid-row: 3; justify-self: start; }
  .em-text { grid-column: 2 / -1; grid-row: 2; }
  .ad-meta { grid-template-columns: minmax(0, 1fr); }
  .ad-meta dt { border-right: 0; }
}

/* Phones: bigger tap targets, and fields at 16px so the browser does not zoom in */
html.m .ad-btn, html.m .ad-btn.sm { min-height: 44px; font-size: 14px; }
html.m .ad-seg { display: flex; width: 100%; }
html.m .ad-seg button { flex: 1; min-height: 44px; font-size: 13px; padding: 0 6px; }
html.m .ad-nav-a { min-height: 44px; padding: 0 14px; font-size: 15px; }
html.m .ad-tbl { font-size: 13px; }
html.m .em-input { font-size: 16px; line-height: 22px; }
html.m .em-item { grid-template-columns: 48px minmax(0, 1fr); }
html.m .em-item input, html.m .em-selall input { width: 20px; height: 20px; }
html.m .em-row { padding-block: 12px; }
html.m .ad-actions .ad-btn { flex: 1 1 auto; }

/* ---- Pasted gradebook: the "Uploaded" line under the paste box (pastebox.js) ---- */
.pf { display: none; margin-top: 6px; font-size: 11px; line-height: 16px; color: #64748b; }
.pf.on { display: block; }
.pf-t { display: block; min-width: 0; overflow-wrap: anywhere; }
.pf-warn { color: #b45309; }
.cl-mark { margin: 0; font-size: 11px; line-height: 16px; color: #475569; }

/* Adjust (bare icon) and Reset (square button) before the class name, and the Adjust menu */
.tb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn-l.sq { width: 34px; height: 34px; padding: 0; gap: 0; }   /* same height as Add assignment, so it is an even square */
.tb-i { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: #475569; cursor: pointer; }
.tb-i:hover, .tb-i[aria-expanded='true'] { color: #0f172a; }
.th-add { display: inline-flex; align-items: center; gap: 4px; }
.th-i { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: -4px 0; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #fff !important; cursor: pointer; }
.th-i, .th-i:hover, .th-i:focus { color: #fff !important; opacity: 1 !important; }
.th-i .ic { font-size: 16px; fill: #fff !important; stroke: #fff !important; stroke-width: 36px; opacity: 1 !important; }   /* white and a little heavier so it stands out on the black header */
.th-i:hover { background: rgba(255, 255, 255, 0.2); }
.th-i:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.add-m { display: none; }
html.m .add-m { display: inline-flex; }
html.m .th-i { display: none; }
.btn-l:disabled { opacity: 0.45; cursor: not-allowed; }
html.m .btn-l.sq { width: 48px; height: 48px; min-height: 48px; padding: 0; }
html.m .tb-i { width: 44px; height: 44px; }
html.m .tb-i .ic { font-size: 22px; }
#letter { color: #0f172a; }

/* College: category picker in the Type column, and its dropdown */
.tsel { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 4px; border: 0; text-align: left; cursor: pointer; font: inherit; font-size: 12px; color: #475569; }
.tsel:hover, .tsel[aria-expanded='true'] { background: #f1f5f9; color: #0f172a; }
.tsel-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.m #rows .tsel { display: flex; align-items: center; justify-content: space-between; text-align: left; font-size: 16px; }
.tdd { position: fixed; z-index: 60; width: 20rem; max-width: calc(100vw - 16px); padding: 6px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #0f172a; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06); font-size: 13px; }
.tdd-list { max-height: 14rem; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.tdd-o { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.tdd-o:hover, .tdd-o:focus-visible { background: #f1f5f9; outline: none; }
.tdd-o[aria-selected='true'] { font-weight: 700; background: #f8fafc; }
.tdd-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdd-w { flex: none; color: #64748b; font-variant-numeric: tabular-nums; font-size: 12px; }
.tdd-new { display: flex; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #e2e8f0; }
.tdd-in { min-width: 0; height: 30px; padding: 0 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #0f172a; font: inherit; }
.tdd-new .tdd-in { flex: 1; }
.tdd-in { --ring: #0f172a; }
.tdd-add { appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: #000; color: #fff; cursor: pointer; }
.tdd-add:hover { background: #1f2937; }
.tdd-edit { appearance: none; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 6px; padding: 6px; border: 0; border-top: 1px solid #e2e8f0; border-radius: 0 0 6px 6px; background: transparent; color: #475569; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.tdd-edit:hover { color: #0f172a; }
.tdd-h { display: flex; align-items: center; gap: 8px; padding: 0 2px 6px; margin-bottom: 4px; border-bottom: 1px solid #e2e8f0; }
.tdd-back { appearance: none; border: 0; background: transparent; color: #475569; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.tdd-back:hover { color: #0f172a; }
.tdd-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.tdd-e { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.tdd-nm { flex: 1; }
.tdd-p { flex: none; width: 3.25rem; text-align: center; font-variant-numeric: tabular-nums; }
.tdd-x { appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; background: transparent; color: #64748b; cursor: pointer; }
.tdd-x:hover:not(:disabled) { color: #0f172a; }
.tdd-x:disabled { opacity: 0.3; cursor: not-allowed; }
.tdd-sum { margin-top: 6px; padding: 6px 2px 0; border-top: 1px solid #e2e8f0; color: #64748b; font-size: 12px; }
html.m .tdd { width: calc(100vw - 16px); max-width: 22rem; padding: 8px; font-size: 16px; }
html.m .tdd-o { padding: 10px 12px; }
html.m .tdd-in { height: 40px; font-size: 16px; }
html.m .tdd-add { width: 40px; height: 40px; }
html.m .tdd-x { width: 40px; height: 40px; }

/* The Percentage column only exists in College mode */
#grid-card:not(.college) .cp { display: none; }

/* ---- Text boxes: one focus ring that stays inside the box (no gap, never bigger than the box) ----
   The ring is an inset shadow, not an outline. An outline gets snapped to whole screen pixels, so on screens scaled to 125% or 150% (or a zoomed browser)
   it came out 2px thick in some places and thinner in others depending on where the box sat. An inset shadow is exactly 2px everywhere.
   The box's own border counts toward the ring (--fbw), so bordered and borderless boxes look the same. --ring is the colour.
   --rw (ring thickness) and --bw1 (what a 1px border measures) are set by calculator.js in whole screen pixels, so the ring is crisp at any zoom. */
:where(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='button']):not([type='submit']), textarea, select):focus,
:where(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='button']):not([type='submit']), textarea, select):focus-visible,
.fld:focus, .fld:focus-visible, .in:focus, .in:focus-visible { outline: none !important; box-shadow: inset 0 0 0 calc(var(--rw, 2px) - var(--fbw, var(--bw1, 1px))) var(--ring, #0051d5) !important; border-color: var(--ring, #0051d5) !important; }
.cin { --fbw: 0px; }
html.m #rows .cin { --fbw: var(--bw1, 1px); }
.fld[aria-invalid='true'], [aria-invalid='true'] { --ring: #b91c1c; }
.modal input:focus, .modal input:focus-visible, .modal textarea:focus, .modal textarea:focus-visible { outline: none !important; box-shadow: inset 0 0 0 calc(var(--rw, 2px) - var(--fbw, var(--bw1, 1px))) var(--ring, #000) !important; border-color: var(--ring, #000) !important; }
#rows .cin:focus, #rows .cin:focus-visible { border-color: transparent !important; }
html.m #rows .cin:focus, html.m #rows .cin:focus-visible { border-color: #0051d5 !important; }
.tsel:focus-visible, .tb-i:focus-visible { outline: none !important; box-shadow: inset 0 0 0 var(--rw, 2px) #0051d5 !important; }

/* ---- Dropdown rows: pick + rename + delete ---- */
.tdd-or { display: flex; align-items: center; gap: 2px; }
.tdd-or .tdd-o { flex: 1; min-width: 0; }
.tdd-or .tdd-nm { flex: 1; }
.tdd-i { appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer; }
.tdd-i:hover, .tdd-i:focus-visible { color: #0f172a; background: #f1f5f9; }
html.m .tdd-i { width: 40px; height: 40px; }


/* ---- Percentage column (College): plain text like the other cells, no box ---- */
#rows .pct-in { width: 100%; max-width: 100%; }
#rows .pct-in:disabled { opacity: 0.4; }

/* ---- Category dropdown: the New button ---- */
.tdd-newb { appearance: none; display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 30px; border: 0; border-radius: 6px; background: #000; color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.tdd-newb:hover { background: #1f2937; }
html.m .tdd-newb { height: 40px; font-size: 16px; }

/* ---- New category prompt ---- */
.pr-l { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: #0f172a; }
.pr-in { width: 100%; box-sizing: border-box; height: 34px; padding: 0 10px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #0f172a; font: inherit; font-size: 13px; }
.pr-err { margin: 0; color: #b91c1c; }
html.m .pr-in { height: 44px; font-size: 16px; }
html.m .pr-l { font-size: 14px; }

/* ---- Adjust popup: sidebar (Letter grades, Saved classes) and a panel ---- */
.modal.adj-modal { width: min(36rem, calc(100vw - 2rem)); overflow: hidden; }
.adj-wrap { display: flex; min-height: 21rem; }
.adj-side { flex: none; width: 9.5rem; display: flex; flex-direction: column; gap: 2px; padding: 14px 8px; background: #f8fafc; border-right: 1px solid #e2e8f0; }
.adj-tab { appearance: none; border: 0; border-radius: 6px; background: transparent; padding: 7px 10px; font: inherit; font-size: 13px; font-weight: 500; text-align: left; color: #475569; cursor: pointer; }
.adj-tab:hover { background: #eef2f6; color: #0f172a; }
.adj-tab[aria-selected='true'] { background: #fff; color: #0f172a; font-weight: 600; box-shadow: 0 0 0 1px #e2e8f0; }
.adj-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 14px 16px; }
.adj-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.adj-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 22px; color: #0f172a; }
.adj-body { flex: 1; min-height: 13rem; overflow-y: auto; max-height: 20rem; }
.adj-hint { margin: 0 0 10px; font-size: 12px; line-height: 16px; color: #64748b; }
.adj-empty { margin: 0; font-size: 13px; line-height: 20px; color: #64748b; }
.adj-note { margin: 8px 0 0; font-size: 12px; color: #475569; }
.adj-foot { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
.adj-rows { display: flex; flex-direction: column; gap: 4px; max-width: 14rem; }
.adj-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 2px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: text; }
.adj-r:hover { background: #f8fafc; }
.adj-r input { width: 4rem; height: 30px; padding: 0 6px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #0f172a; font: inherit; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.adj-r input { --ring: #0f172a; }
.adj-defaults { margin-top: 14px; }
.adj-list { display: flex; flex-direction: column; gap: 4px; }
.adj-cls { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #0f172a; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.adj-cls:hover { background: #f8fafc; border-color: #cbd5e1; }
.adj-cls-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.adj-cls-m { flex: none; font-size: 12px; color: #64748b; }
.adj-back { appearance: none; border: 0; background: transparent; padding: 0; margin-bottom: 8px; font: inherit; font-size: 12px; font-weight: 600; color: #475569; cursor: pointer; }
.adj-back:hover { color: #0f172a; }
.adj-cats { border: 1px solid #e2e8f0; border-radius: 8px; }
.adj-cat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-top: 1px solid #e2e8f0; font-size: 13px; }
.adj-cat:first-child { border-top: 0; }
.adj-cat-n { min-width: 0; overflow-wrap: anywhere; }
.adj-cat-p { flex: none; font-variant-numeric: tabular-nums; color: #475569; }
.adj-total { margin: 8px 0 0; }
.adj-btns { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.adj-btns .adj-hint { margin: 0; }
html.m .modal.adj-modal { width: calc(100vw - 20px); max-width: 28rem; }
html.m .adj-wrap { flex-direction: column; min-height: 0; }
html.m .adj-side { width: auto; flex-direction: row; padding: 10px; border-right: 0; border-bottom: 1px solid #e2e8f0; }
html.m .adj-tab { flex: 1; text-align: center; font-size: 15px; padding: 10px; }
html.m .adj-body { max-height: 50dvh; }
html.m .adj-r { font-size: 16px; padding-left: 12px; }
html.m .adj-r input { width: 5rem; height: 40px; font-size: 16px; }
html.m .adj-cls, html.m .adj-cat { font-size: 15px; }

/* ---- Class name (editable) and the class arrow ---- */
.tb-i[hidden] { display: none; }
.tdd-empty { margin: 0; padding: 8px 10px; color: #64748b; font-size: 12px; line-height: 16px; }
.cdd .tdd-o { gap: 16px; }

/* ---- Category dropdown: the gray "New category" row ---- */

/* ---- Saved classes: edit a class ---- */
.adj-name { display: block; width: 100%; box-sizing: border-box; height: 32px; margin: 0 0 8px; padding: 0 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #0f172a; font: inherit; font-size: 14px; font-weight: 600; }
.adj-ci { box-sizing: border-box; min-width: 0; height: 28px; line-height: 26px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #0f172a; font: inherit; font-size: 13px; }
.adj-ci:hover { border-color: #e2e8f0; }
.adj-ci:focus { background: #fff; border-color: #0f172a; }
.adj-cname { flex: 1; }
.adj-cp { flex: none; width: 3.25rem; text-align: center; font-variant-numeric: tabular-nums; }
.adj-pc { flex: none; margin-left: -6px; color: #64748b; font-size: 13px; }
.adj-x { appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer; }
.adj-x:hover { color: #0f172a; background: #f1f5f9; }
.adj-cat { padding: 4px 6px; gap: 6px; }
.adj-pad { padding: 8px 10px; }
.adj-cur { margin-top: 10px; }
html.m .adj-name { height: 44px; font-size: 16px; }
html.m .adj-ci { height: 40px; font-size: 16px; }
html.m .adj-cp { width: 4rem; }
html.m .adj-x { width: 40px; height: 40px; }

/* ---- Category dropdown: percentage on every row, and a full-width gray New category row ---- */
.tdd-or { align-items: stretch; }
.tdd-or > .tdd-in { align-self: center; }
.tdd-or > .tdd-i { align-self: stretch; height: auto; width: 32px; }   /* as tall as the row's background, so square */
.tdd-pw { flex: none; display: inline-flex; align-self: stretch; }
.tdd-pi { width: 3.75rem; height: auto; min-height: 0; padding: 0 4px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #0f172a; font: inherit; font-size: 13px; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.tdd-pi:hover { background: #f1f5f9; }
.tdd-pi { --ring: #0f172a; }
.tdd-pi:focus, .tdd-pi:focus-visible { background: #fff; }
.tdd-pi::placeholder { color: #94a3b8; }
/* New category row: stays gray (and dashed) while you type */
.tdd-ghost { opacity: 1; }
.tdd-ghost .tdd-gin { flex: 1; width: 100%; height: 32px; background: #f8fafc; border-style: dashed; color: #0f172a; }
.tdd-ghost .tdd-gin::placeholder { color: #94a3b8; }
.tdd-ghost .tdd-gin:focus, .tdd-ghost .tdd-gin:focus-visible { background: #f8fafc; border-style: solid; }
html.m .tdd-ghost .tdd-gin { height: 40px; }
html.m .tdd-or > .tdd-i { width: 40px; height: auto; }

/* ---- The class name is a plain textbox ---- */
.course-in { appearance: none; display: block; max-width: 100%; min-width: 6ch; margin: 0 0 0 -6px; padding: 1px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-overflow: ellipsis; }
.course-in:hover { border-color: #e2e8f0; }
.course-in:focus { background: #fff; }

/* ---- Adjust > category presets: a table like the calculator's, then Delete (red, left) and Done in the bottom row ---- */
.adj-tbl { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 8px; }
.adj-tbl .cin { display: block; border: 0; }
.adj-tbl .cin:hover { background: transparent; }
.modal .adj-tbl .cin { --ring: #0051d5; --fbw: 0px; }
.modal .adj-tbl .cin:focus, .modal .adj-tbl .cin:focus-visible { background: #fff; }
html.m .adj-tbl .cin { height: 36px; }

/* ---- Adjust > Saved classes: the direct note ---- */
.adj-warn { margin: 0 0 10px; padding: 8px 10px; border: 1px solid #fcd34d; border-radius: 8px; background: #fffbeb; color: #92400e; font-size: 12px; line-height: 16px; font-weight: 600; }

/* ---- Saved class name row: name box with a white, red-text Delete class button (no shadow) to its right ---- */
.adj-namerow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.adj-namerow .adj-name { flex: 1; min-width: 0; margin: 0; }
.adj-delt { appearance: none; flex: none; height: 32px; padding: 0 12px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; box-shadow: none; color: #dc2626; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.adj-delt:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
html.m .adj-delt { height: 44px; font-size: 16px; }

/* ---------- Admin: Analytics (/admin/analytics) ---------- */
.an-note { padding: 6px 12px; min-height: 0; }
.an-note:empty { display: none; }
.an-out { margin-top: 16px; }
.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr)); gap: 10px; margin-bottom: 16px; }
.an-kpi { padding: 12px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-md); box-shadow: var(--sh-el); }
.an-kpi-l { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
.an-kpi-v { margin-top: 4px; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; color: #0f172a; font-variant-numeric: tabular-nums; }
.an-kpi-s { margin-top: 2px; font-size: 12px; line-height: 16px; color: #64748b; }
.an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.an-gap { margin-bottom: 16px; }
.an-pad { padding: 14px 16px; }
.an-donut { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.an-donut-svg { width: 150px; height: 150px; flex: 0 0 auto; }
.an-donut-n { font-size: 18px; font-weight: 700; fill: #0f172a; }
.an-donut-s { font-size: 8px; fill: #64748b; }
.an-legend { flex: 1 1 13rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
.an-legend li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; line-height: 20px; color: #0f172a; }
.an-legend li:last-child { border-bottom: 0; }
.an-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; }
.an-lname { min-width: 0; overflow-wrap: anywhere; }
.an-lnote { font-size: 12px; color: #64748b; white-space: nowrap; }
.an-lv { margin-left: auto; font-variant-numeric: tabular-nums; color: #475569; white-space: nowrap; }
.an-thresh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; line-height: 20px; color: #334155; }
.an-num { width: 4.5rem; display: inline-block; padding: 0.3rem 0.5rem; }
.an-bars { display: grid; gap: 8px; }
.an-bar { display: grid; grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; line-height: 20px; }
.an-bar-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0f172a; }
.an-bar-t { height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.an-bar-f { height: 100%; background: #0051d5; border-radius: 999px; }
.an-bar-v { font-size: 12px; color: #475569; white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-chart svg, .an-map svg { display: block; width: 100%; height: auto; }
.an-chart-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px; font-size: 12px; line-height: 16px; color: #475569; }
.an-key { display: inline-flex; align-items: center; gap: 6px; }
.an-ax { font-size: 10px; fill: #64748b; }
.an-map { border: 1px solid #e2e8f0; border-radius: var(--r-md); overflow: hidden; }
.an-mapbar { margin-bottom: 10px; }
.an-tables { margin: 16px 0 0; }
@media (min-width: 1100px) { .an-tables { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.an-twrap { overflow-x: auto; }
.an-tbl th.num, .an-tbl td.num { text-align: right; }
.an-tbl td:nth-child(2), .an-tbl td:nth-child(3) { color: #0f172a; font-size: 13px; }
.an-steps { margin: 10px 0 0; padding-left: 20px; font-size: 13px; line-height: 21px; color: #334155; }
.an-steps li { margin-bottom: 6px; }
.an-foot { margin: 4px 0 0; max-width: 56rem; }
@media (max-width: 860px) { .an-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .an-bar { grid-template-columns: minmax(4rem, 7rem) minmax(0, 1fr); } .an-bar-v { grid-column: 1 / -1; margin-top: -4px; } }
html.m .an-num { font-size: 16px; }