/* Encore component sheet. * * Composition, sizing and spacing follow shadcn/ui; colour, type and radius come * from the Encore design system. Plain CSS — this app has no bundler, so there is * no Tailwind to compile and no Radix to mount. * * Every rule is scoped to `.enc`, which pages opt into with . * That is what makes the migration safe: a page without the class keeps app.css * exactly as it was, and `.enc .card` (0,2,0) still outranks app.css's `.card` * (0,1,0) without needing @layer — which would not work here anyway, since * unlayered CSS beats every layer and app.css is unlayered. * * Requires tokens.css. */ /* ── Page ── */ body.enc { margin: 0; padding: 0; background: var(--bg-canvas); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-app-base); line-height: var(--lh-body); letter-spacing: normal; -webkit-font-smoothing: antialiased; } /* ── The fork's palette, pointed at DS values ── * app.css defines five colour variables on :root, and two kinds of rule read * them where the layer cannot reach: inline styles set from JS (record.js paints * the picker label `color: var(--muted)`) and app.css rules the layer has no * reason to restate. Both resolve these names at use time, so redefining the * names on `body.enc` converts them all at once — and converts nothing on a page * that has not opted in. `--accent` is the important one: #E4002B is a crimson * near enough to the DS red to read as a mistake rather than a second colour, * and it paints waveform bars, card links and focus rings. `--mono` has no DS * equivalent — numbers get tabular figures from Inter instead. */ body.enc { --muted: var(--text-muted); --accent: var(--red); --accent-fg: var(--white); --danger: var(--status-failed); --border: var(--border-hairline); --card: var(--bg-card); --mono: var(--font-body); } /* Fluid, never fixed: full width up to the DS content maximum, with the DS gutter held on both edges at every size. */ .enc .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } .enc main.container { padding-block: var(--space-5) var(--space-7); } /* Task pages — upload, record — are a column of controls, not a data grid. The full width only spreads a dropzone thin and drags the eye across a line of copy nobody needs to read that far. */ .enc .container-measure { max-width: calc(860px + var(--gutter) * 2); } /* ── Type ── */ .enc h1 { margin: 0; font-family: var(--font-heading); font-size: var(--fs-app-2xl); font-weight: var(--fw-heading); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); } .enc h2 { margin: 0; font-family: var(--font-heading); font-size: var(--fs-app-xl); font-weight: var(--fw-heading); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); } .enc h3 { margin: 0; font-family: var(--font-heading); font-size: var(--fs-app-lg); font-weight: var(--fw-heading); line-height: var(--lh-heading); } /* Title on the left, the page's one primary action on the right, the count underneath. Baseline-aligned so the button sits on the title's baseline rather than floating against the ascenders. */ .enc .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); } /* A line of copy under the title, where `.page-meta` carries counts. */ .enc .page-header .muted { margin: var(--space-1) 0 0; font-size: var(--fs-app-md); } .enc .page-meta { margin: var(--space-1) 0 0; color: var(--text-muted-strong); font-size: var(--fs-app-sm); font-variant-numeric: tabular-nums; } /* Column headers, eyebrows: the DS caps treatment. */ .enc .enc-label { font-size: var(--fs-app-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted-strong); } .enc .muted { color: var(--text-muted-strong); } /* Figures that sit in a column — durations, counts, dates — line up digit for digit. The DS has no real monospace face (--font-mono is Inter), and this is what that token was actually for. */ .enc .enc-numeric { font-variant-numeric: tabular-nums; } /* ── Links ── */ .enc a { color: var(--text-primary); text-decoration: none; } .enc a:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } /* ── Shell ── * On a desktop this is a left sidebar (see the `min-width: 1000px` block below); * narrower than that it stays a top bar. Both are the same markup: render-nav.js * is shared by every page and pinned by ten tests, so it is not touched — the * whole shell is CSS, which also means one class on still reverts it. * * Base = the top bar. app.css caps the nav at 820px and centres it, which on a * fluid page leaves it floating unaligned above the content; here it spans the * full width and its inner edges line up with the container's. */ .enc .top-nav { max-width: none; height: 56px; margin: 0 0 var(--space-5); padding: 0 var(--gutter); background: var(--bg-chrome); /* A hairline drawn inset, per the DS Navbar, rather than a border — a border would add to the 56px and make the bar taller than the design says. */ border-bottom: 0; box-shadow: inset 0 -1px 0 var(--border-hairline); font-size: var(--fs-app-base); } .enc .top-nav .nav-left, .enc .top-nav .nav-right { gap: var(--space-1); } .enc .top-nav .nav-right { gap: var(--space-3); } /* ── Theme switch ── * Three states, not a toggle: "system" is a real choice, and a two-way switch * makes it unreachable once the reader has touched it. Clustered on glass so the * three icon buttons read as one control rather than three loose marks in the * bar — the same shape the CRM's switch has. */ .enc .theme-switch { display: inline-flex; align-items: center; gap: 1px; padding: var(--space-1); border: 1px solid var(--glass-border); border-radius: var(--radius-surface); background: var(--glass-bg); } .enc .theme-switch button { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-muted-strong); /* The bar is a pointer-first surface at this width; below 1000px the switch moves into the panel and grows to a touch target there. */ position: relative; } .enc .theme-switch button::before { content: ''; position: absolute; inset: -8px; } .enc .theme-switch button svg { width: 16px; height: 16px; } .enc .theme-switch button:hover { background: var(--bg-raised); color: var(--text-primary); } .enc .theme-switch button[aria-checked="true"] { background: var(--bg-active); color: var(--text-primary); } /* In the burger panel the switch is a row of its own, and the account block below it is a column — so it stands on its own line, at full touch size. */ .enc .top-nav[data-nav-open] .nav-panel .theme-switch { align-self: flex-start; margin-bottom: var(--space-1); } .enc .top-nav[data-nav-open] .nav-panel .theme-switch button { width: 44px; height: 44px; } /* Nav links are targets, not text: padded, so the active pill has something to enclose and the hit area is a comfortable 32px. */ .enc .top-nav a { padding: 0 var(--space-3); height: 32px; display: inline-flex; align-items: center; border-radius: var(--radius-control); color: var(--text-muted-strong); } .enc .top-nav a:hover:not(.brand) { background: var(--bg-raised); color: var(--text-primary); text-decoration: none; } /* Where you are, stated once and unmistakably. */ .enc .top-nav a.active { background: var(--bg-active); color: var(--text-primary); font-weight: var(--fw-medium); } /* A label per destination is not enough on a shell you look at every day — the eye finds a shape faster than it reads a word. The glyph is attached by href because render-nav.js is off limits: no markup change, so all ten nav tests still pass. Same Lucide data as icons.js, inlined here because CSS cannot import a JS module, and masked rather than drawn so the colour is the link's own and hover/active need no second rule. */ .enc .top-nav a[href='/transcriptions.html']::before, .enc .top-nav a[href='/activity.html']::before, .enc .top-nav a[href='/record.html']::before, .enc .top-nav a[href='/upload.html']::before { content: ''; flex: 0 0 16px; height: 16px; margin-right: var(--space-2); background-color: currentcolor; mask-position: center; mask-repeat: no-repeat; mask-size: 16px 16px; } .enc .top-nav a[href='/transcriptions.html']::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E"); } .enc .top-nav a[href='/activity.html']::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2'/%3E%3C/svg%3E"); } .enc .top-nav a[href='/record.html']::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19v3'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Crect x='9' y='2' width='6' height='13' rx='3'/%3E%3C/svg%3E"); } .enc .top-nav a[href='/upload.html']::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' x2='12' y1='3' y2='15'/%3E%3C/svg%3E"); } /* Sign out is a