/* Shared design tokens and primitives for the Primary Source Navigator student and teacher interfaces. Cacheable, served as a static file so both pages share one HTTP cache entry instead of duplicating this CSS inline. Fonts are real .woff2 files (assets/fonts/) rather than embedded base64, so they get their own cache entry too. */ @font-face { font-family: "Averia Libre"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/averia-libre-regular.woff2") format("woff2"); } @font-face { font-family: "Averia Libre"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/averia-libre-bold.woff2") format("woff2"); } @font-face { font-family: "Averia Sans Libre"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/averia-sans-libre-regular.woff2") format("woff2"); } @font-face { font-family: "Averia Sans Libre"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/averia-sans-libre-bold.woff2") format("woff2"); } :root { color-scheme: light; --cork: #5B3F26; --wood-frame: #3A2A1C; --paper: #F7F2E6; --paper-flat: #EFE9DA; --ink: #26170D; --ink-soft: #6B5847; --status-neutral: #8A7A5E; --status-neutral-bg: rgba(138, 122, 94, 0.16); --status-good: #2E6B4F; --status-good-bg: rgba(46, 107, 79, 0.14); --status-warn: #A8642B; --status-warn-bg: rgba(168, 100, 43, 0.16); --status-bad: #A8402D; --status-bad-bg: rgba(168, 64, 45, 0.14); --link-disabled-bg: rgba(38, 23, 13, 0.07); --focus-ring: #26170D; --border-soft: rgba(38, 23, 13, 0.14); --font-display: "Averia Libre", Georgia, serif; --font-body: "Averia Sans Libre", "Helvetica Neue", Helvetica, Arial, sans-serif; --shift-duration: 450ms; } @media (prefers-reduced-motion: reduce) { :root { --shift-duration: 0ms; } } * { box-sizing: border-box; } /* Corkboard background + wood-frame border, shared verbatim by the student, teacher, and Corpus Studio pages (previously duplicated in student.css and teacher.css). Apply with . */ body.corkboard-frame { background-color: var(--cork); background-image: radial-gradient(rgba(0, 0, 0, 0.14) 1px, transparent 1.3px), radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1.3px), radial-gradient(ellipse 220px 160px at 18% 22%, rgba(255, 235, 200, 0.07) 0%, transparent 70%), radial-gradient(ellipse 260px 180px at 76% 68%, rgba(255, 235, 200, 0.05) 0%, transparent 70%), radial-gradient(ellipse 240px 170px at 88% 18%, rgba(20, 12, 4, 0.2) 0%, transparent 65%), radial-gradient(ellipse 260px 190px at 8% 82%, rgba(20, 12, 4, 0.18) 0%, transparent 65%), radial-gradient(ellipse 300px 150px at 48% 95%, rgba(20, 12, 4, 0.14) 0%, transparent 70%), radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.16) 100%), radial-gradient(ellipse 160px 120px at 12% 88%, rgba(0, 0, 0, 0.25) 0%, transparent 70%), radial-gradient(ellipse 140px 110px at 88% 8%, rgba(0, 0, 0, 0.2) 0%, transparent 70%); background-size: 9px 9px, 13px 13px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-position: 0 0, 4px 5px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; background-attachment: fixed; } /* This pseudo-element only draws the wood-frame border, at a z-index above ordinary page content (so the border always reads as a frame around the viewport). Its own "grime" gradients used to live here too, but since this element is `inset: 0` and `background-clip: border-box`, that background painted across the *entire* viewport -- not just the border ring -- so those dark corner spots showed up floating in front of paper panels and tables everywhere on the page. They now live in the plain body background above, which paints beneath all normal content. */ body.corkboard-frame::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 44; border: 18px solid var(--wood-frame); box-sizing: border-box; } /* The native [hidden] attribute loses to any author rule that sets `display` on the same element (e.g. a flex/grid layout class) once that rule's selector is at least as specific - which is common, since a single class already matches a single-attribute selector's specificity. This keeps `hidden` authoritative everywhere in both apps. */ [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--ink); line-height: 1.5; } a, button, input, select, textarea { outline-offset: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--paper); color: var(--ink); padding: 0.6rem 1rem; border-radius: 3px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } .skip-link:focus { left: 1rem; top: 1rem; } /* ---- Floating panel primitive (paper card look, reused on both pages) ---- */ .floating-panel { background-color: var(--paper); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); border-radius: 3px; padding: 0.6rem 0.75rem; font-size: 13px; color: var(--ink); } .floating-panel h2 { font-family: var(--font-display); font-weight: 700; font-size: 13px; margin: 0 0 0.4rem 0; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; } /* ---- Buttons ---- */ .btn { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--ink); background-color: var(--paper); border: 1px solid var(--border-soft); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18); border-radius: 3px; padding: 0.5rem 0.85rem; cursor: pointer; white-space: nowrap; min-height: 40px; } .btn:hover:not(:disabled) { background-color: #efe7d4; } .btn:disabled { cursor: not-allowed; opacity: 0.55; } .btn-primary { color: var(--paper); background-color: var(--wood-frame); border-color: var(--wood-frame); } .btn-primary:hover:not(:disabled) { background-color: #4a3626; } .btn-danger { color: var(--status-bad); border-color: var(--status-bad); } .btn-danger:hover:not(:disabled) { background-color: var(--status-bad-bg); } .btn-quiet { background: none; box-shadow: none; border-color: transparent; } .btn-quiet:hover:not(:disabled) { background-color: var(--status-neutral-bg); } /* ---- Badges / status chips ---- */ .badge { display: inline-block; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--status-neutral); background: var(--status-neutral-bg); border: 1px solid var(--status-neutral); border-radius: 3px; padding: 0.1rem 0.35rem; margin-left: 0.3rem; vertical-align: middle; } .badge-good { color: var(--status-good); background: var(--status-good-bg); border-color: var(--status-good); } .badge-warn { color: var(--status-warn); background: var(--status-warn-bg); border-color: var(--status-warn); } .badge-bad { color: var(--status-bad); background: var(--status-bad-bg); border-color: var(--status-bad); } /* ---- Links ---- */ .landing-link, .link-disabled { display: inline-block; font-family: var(--font-body); font-size: 13px; border-radius: 3px; padding: 0.35rem 0.7rem; text-decoration: none; } .landing-link { color: var(--paper); background: var(--wood-frame); font-weight: 700; } .link-disabled { color: var(--ink-soft); background: var(--link-disabled-bg); } /* ---- Generic states ---- */ .empty-state { font-family: var(--font-body); font-style: italic; padding: 2rem; text-align: center; color: var(--ink-soft); } .load-error { font-family: var(--font-body); background: #f3e0d8; border: 1px solid #a8402d; color: #6e2417; padding: 1rem; border-radius: 3px; margin: 1.25rem; } .spinner-msg { font-family: var(--font-body); color: var(--ink-soft); font-style: italic; } .offline-banner { background: var(--status-warn-bg); border: 1px solid var(--status-warn); color: var(--status-warn); border-radius: 3px; padding: 0.65rem 1rem; font-size: 13px; font-family: var(--font-body); } /* ---- Data table primitive (reused by teacher corpus/set tables and the student list view) ---- */ .table-wrap { overflow-x: auto; background-color: var(--paper); border-radius: 3px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); } .data-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 14px; color: var(--ink); } .data-table th, .data-table td { text-align: left; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; overflow-wrap: break-word; } .data-table th { font-family: var(--font-display); font-weight: 700; color: var(--ink-soft); text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; } .data-table thead tr:first-child th { border-bottom: none; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background-color: rgba(138, 122, 94, 0.08); } .sort-button { display: inline-flex; align-items: center; gap: 0.35rem; border: none; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0; cursor: pointer; } .sort-indicator { color: var(--status-neutral); font-family: var(--font-body); font-size: 12px; } .sort-button.is-active .sort-indicator { color: var(--ink); } .column-filter { width: 100%; min-width: 110px; border: 1px solid rgba(138, 122, 94, 0.55); border-radius: 3px; background: rgba(138, 122, 94, 0.08); color: var(--ink); font-family: var(--font-body); font-size: 12px; padding: 0.32rem 0.45rem; } .column-filter::placeholder { color: var(--ink-soft); opacity: 0.78; } .list-empty { color: var(--ink-soft); font-style: italic; text-align: center !important; padding: 1.25rem !important; } /* ---- Form primitives (teacher forms; kept plain/semantic) ---- */ .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; } .field label { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink-soft); } .field input[type="text"], .field input[type="search"], .field input[type="email"], .field input[type="password"], .field input[type="date"], .field input[type="url"], .field select, .field textarea { font-family: var(--font-body); font-size: 14px; color: var(--ink); background: var(--paper); border: 1px solid var(--border-soft); border-radius: 3px; padding: 0.55rem 0.65rem; min-height: 40px; } /* File inputs can't be restyled directly, but ::file-selector-button lets the "choose file" control itself pick up the same raised-paper look as every other button. */ .field input[type="file"] { font-family: var(--font-body); font-size: 13px; color: var(--ink); text-transform: capitalize; } .field input[type="file"]::file-selector-button { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--ink); background-color: var(--paper); border: 1px solid var(--border-soft); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18); border-radius: 3px; padding: 0.5rem 0.85rem; cursor: pointer; margin-right: 0.9rem; } .field input[type="file"]::file-selector-button:hover { background-color: #efe7d4; } .field-hint { font-size: 12px; color: var(--ink-soft); } .field-error { font-size: 12px; color: var(--status-bad); } /* ---- Accessible tabs ---- */ .tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; } .tab-button { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink-soft); background: none; border: none; border-bottom: 3px solid transparent; padding: 0.7rem 1rem; cursor: pointer; min-height: 44px; } .tab-button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--wood-frame); } .tab-panel { padding-top: 1.25rem; } .tab-panel[hidden] { display: none; }