/* Tertius — classical/inscriptional, but modern and clean. Depth comes from background steps and 1px rules only: there are no shadows anywhere, on purpose. Dark is the default; [data-theme="light"] on flips it. */ :root, :root[data-theme="dark"] { --bg: #12100E; --bg-raised: #171411; --bg-sunken: #0F0D0B; --border: #2E2822; --border-subtle: #221E1A; --border-row: #1C1916; --border-control: #3A332C; --text: #EDE7DE; --text-2: #9C9187; --text-3: #6E655C; --text-4: #4F4740; --accent: #C8794E; --accent-mute: rgba(200, 121, 78, .42); --success: #6FA396; --danger: #B5544B; --danger-bg: rgba(181, 84, 75, .05); --paused: #7A6E60; --paused-bar: #4F4740; --on-accent: #12100E; --toggle-on: #2E2822; --wave-rest: #332C26; --row-hover: rgba(23, 20, 17, .5); } :root[data-theme="light"] { --bg: #FBF8F2; --bg-raised: #F4F0E8; --bg-sunken: #FBF8F2; --border: #DED7C9; --border-subtle: #E1DACB; --border-row: #E7E1D5; --border-control: #C9C0AE; --text: #221E19; --text-2: #6B6259; --text-3: #8A8175; --text-4: #A79E90; --accent: #A85A32; --accent-mute: rgba(168, 90, 50, .38); --success: #3E7A6E; --danger: #9C463D; --danger-bg: rgba(181, 84, 75, .06); --paused: #8A8175; --paused-bar: #A79E90; --on-accent: #FBF8F2; --toggle-on: #E7E0D2; --wave-rest: #DED7C9; --row-hover: rgba(244, 240, 232, .5); } /* Two families, three roles. Never mixed within a single line. */ :root { --display: Cardo, Georgia, serif; --ui: "IBM Plex Sans", system-ui, sans-serif; --data: "IBM Plex Mono", ui-monospace, monospace; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 13px/1.5 var(--ui); overflow: hidden; /* only the queue scrolls */ -webkit-font-smoothing: antialiased; } button, input, select { font: inherit; color: inherit; } /* Every interactive element keeps a visible keyboard focus ring. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .data, .mono { font-family: var(--data); } /* ── shell ────────────────────────────────────────────────────────────── */ .shell { display: flex; height: 100%; } .rail { width: 352px; flex: none; display: flex; flex-direction: column; background: var(--bg-raised); border-right: 1px solid var(--border); overflow-y: auto; overscroll-behavior: contain; } .column { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } /* ── brand block ──────────────────────────────────────────────────────── */ .brand { display: flex; align-items: center; gap: 13px; padding: 20px 22px 18px; border-bottom: 1px solid var(--border); } .logo { width: 32px; height: 32px; flex: none; color: var(--accent); } .brand-text { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; } .wordmark { font-family: var(--display); font-size: 20px; line-height: 1; letter-spacing: .19em; text-transform: uppercase; } .brand-sub { font-family: var(--data); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } .theme-toggle { margin-left: auto; flex: none; display: flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; } .theme-toggle button { padding: 5px 9px; font-size: 11px; background: none; border: 0; color: var(--text-3); cursor: pointer; } .theme-toggle button[aria-pressed="true"] { background: var(--toggle-on); color: var(--text); } /* ── rail sections ────────────────────────────────────────────────────── */ .rail-section { padding: 20px 22px; border-bottom: 1px solid var(--border-subtle); } .section-head { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-weight: 400; } .numeral { font-family: var(--display); font-size: 14px; color: var(--accent); } .section-label { font-family: var(--display); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); } .section-head .rule { flex: 1; height: 1px; background: var(--border-subtle); } .rail-foot { margin-top: auto; padding: 14px 22px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; font-family: var(--data); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); } /* ── controls ─────────────────────────────────────────────────────────── */ .field { width: 100%; min-width: 0; padding: 8px 10px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 4px; color: var(--text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .field:focus { color: var(--text); } .path-row { display: flex; gap: 8px; min-width: 0; } .path-row .field { flex: 1; } .btn { padding: 8px 12px; background: none; border: 1px solid var(--border-control); border-radius: 4px; color: var(--text); font-size: 12px; white-space: nowrap; cursor: pointer; transition: border-color 120ms ease, color 120ms ease; } .btn:hover:not(:disabled) { border-color: var(--text-3); } :root[data-theme="light"] .btn:hover:not(:disabled) { border-color: var(--text-2); } .btn:disabled { opacity: .4; cursor: default; } .btn-danger { border-color: var(--danger); color: var(--danger); } .opt-row { display: flex; align-items: center; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--text-2); } .check { display: flex; align-items: center; gap: 8px; cursor: pointer; } /* 14×14 accent square with a checkmark knocked out of it. */ .tick { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; flex: none; margin: 0; border: 1px solid var(--border-control); border-radius: 3px; background: transparent; cursor: pointer; position: relative; } .tick:checked { background: var(--accent); border-color: var(--accent); } .tick:checked::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; line-height: 1; color: var(--on-accent); } .hint { color: var(--text-3); } .linkish { padding: 0; background: none; border: 0; color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 2px; cursor: pointer; font-size: inherit; font-family: inherit; } .linkish:hover { text-decoration-color: var(--accent); } .caption { margin: 12px 0 0; font-size: 11px; line-height: 1.6; color: var(--text-3); white-space: pre-wrap; } .caption:empty { display: none; } .caption.error-text { color: var(--danger); } .caption.warn-text { color: var(--accent); } /* ── settings grid ────────────────────────────────────────────────────── */ .settings-grid { display: grid; grid-template-columns: 78px 1fr; gap: 10px 12px; align-items: center; font-size: 12px; } .settings-grid > label, .settings-grid > span { color: var(--text-3); } .row-pair { display: contents; } .row-pair[hidden] { display: none; } .select { position: relative; min-width: 0; } .select select { appearance: none; -webkit-appearance: none; width: 100%; padding: 7px 26px 7px 10px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 12px; cursor: pointer; } .select .chev { position: absolute; right: 9px; top: 50%; transform: translateY(-60%); pointer-events: none; color: var(--text-3); font-size: 12px; } .with-info { display: flex; align-items: center; gap: 8px; min-width: 0; } .with-info .select { flex: 1; } .info { width: 22px; height: 22px; flex: none; padding: 0; background: none; border: 1px solid var(--border-control); border-radius: 50%; color: var(--text-3); font-size: 11px; font-style: italic; line-height: 1; cursor: pointer; transition: border-color 120ms ease, color 120ms ease; } .info:hover { border-color: var(--text-3); color: var(--text); } .segments { display: flex; gap: 6px; } .seg { flex: 1; padding: 6px 0; text-align: center; background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text-3); font-size: 12px; cursor: pointer; transition: border-color 120ms ease, color 120ms ease; } .seg[aria-checked="true"] { border-color: var(--accent); color: var(--text); } .seg:hover:not(:disabled):not([aria-checked="true"]) { border-color: var(--text-3); } .seg:disabled { opacity: .4; cursor: default; } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { padding: 6px 11px; background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text-3); font-family: var(--data); font-size: 12px; cursor: pointer; transition: border-color 120ms ease, color 120ms ease; } .chip[aria-pressed="true"] { border-color: var(--accent); color: var(--text); } .chip:hover:not([aria-pressed="true"]) { border-color: var(--text-3); } /* ── run section ──────────────────────────────────────────────────────── */ .run-primary { display: block; width: 100%; padding: 12px 0; background: var(--accent); border: 1px solid var(--accent); border-radius: 4px; color: var(--on-accent); font-family: var(--display); font-size: 16px; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; } .run-primary:disabled { opacity: .4; pointer-events: none; } .run-pair { display: flex; gap: 8px; } .run-pair .btn { flex: 1; padding: 11px 0; text-align: center; font-size: 13px; } .run-confirm { border: 1px solid var(--border-control); border-radius: 4px; padding: 12px; } .run-confirm p { margin: 0 0 10px; font-size: 12px; color: var(--text-2); } /* ── status band ──────────────────────────────────────────────────────── */ .band { flex: none; padding: 22px 26px 20px; border-bottom: 1px solid var(--border); } .band-top { display: flex; align-items: baseline; gap: 12px; } .dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--accent); align-self: center; } .dot[data-tone="idle"] { background: none; border: 1px solid var(--text-4); } .dot[data-tone="running"] { animation: pulse 1.6s ease-in-out infinite; } .dot[data-tone="paused"] { background: var(--paused); } .dot[data-tone="success"] { background: var(--success); } .dot[data-tone="danger"] { background: var(--danger); } @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } } .headline { margin: 0; font-family: var(--display); font-size: 25px; font-weight: 400; letter-spacing: .02em; } .headline[data-tone="paused"] { color: var(--text-2); } .counter { font-size: 13px; color: var(--text-2); } .band-right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-family: var(--data); font-size: 12px; color: var(--text-3); text-align: right; } .band-right .btn { padding: 6px 14px; } .band-right .btn-accent { border-color: var(--accent); color: var(--accent); font-family: var(--ui); } .band-right .btn-filled { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-family: var(--ui); } .band-right .btn-plain { font-family: var(--ui); } .track { display: flex; height: 3px; margin-top: 16px; background: var(--border-subtle); border-radius: 2px; overflow: hidden; } .fill { width: 0; background: var(--accent); transition: width 400ms ease-out; } .fill[data-tone="success"] { background: var(--success); } .fill[data-tone="paused"] { background: var(--paused-bar); } .fill-failed { background: var(--danger); } .stats { display: flex; gap: 26px; margin-top: 14px; font-size: 12px; flex-wrap: wrap; } .stats:empty { display: none; } .stats span { color: var(--text-3); } .stats b { font-family: var(--data); font-weight: 400; color: var(--text); margin-left: 6px; } .stats b[data-tone="danger"] { color: var(--danger); } .stats b[data-tone="success"] { color: var(--success); } .stats b[data-tone="accent"] { color: var(--accent); } /* ── panels (things the design has no state for, but the app does) ────── */ .panels { flex: none; max-height: 46vh; overflow-y: auto; } .panel { padding: 14px 26px; border-bottom: 1px solid var(--border); background: var(--bg-raised); font-size: 12px; } .panel.danger { background: var(--danger-bg); } .panel strong { font-weight: 600; } .panel-body { margin: 6px 0 0; color: var(--text-2); } /* Only the machine-written text keeps its own line breaks. */ #panel-error-text, #panel-notice-text { white-space: pre-wrap; } .panel-body.dim { color: var(--text-3); font-size: 11px; } .panel.danger .panel-body { color: var(--danger); } .panel-head { display: flex; align-items: center; justify-content: space-between; } .panel-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .panel-code { display: block; margin: 8px 0; padding: 8px 10px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 4px; font-family: var(--data); font-size: 11px; user-select: all; overflow-x: auto; } .table-scroll { overflow-x: auto; margin-top: 10px; } #model-table { width: 100%; border-collapse: collapse; font-size: 12px; } #model-table th, #model-table td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--border-row); vertical-align: top; } #model-table th { font-family: var(--data); font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); } #model-table td { color: var(--text-2); } #model-table td.name { font-family: var(--data); color: var(--text); } .verdict-ok { color: var(--success); } .verdict-warn { color: var(--accent); cursor: help; } .verdict-bad { color: var(--danger); cursor: help; } .verdict-muted { color: var(--text-3); } /* ── queue ────────────────────────────────────────────────────────────── */ /* Sits above the column headings: how many files are queued, and the one destructive action in the app. Kept quiet - `linkish`, not a button - so it reads as available rather than inviting, and only turns red on hover. */ .qbar { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 26px 0; } .qbar-count { font-family: var(--data); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); } .qbar .linkish { font-size: 11px; color: var(--text-3); text-decoration-color: color-mix(in srgb, var(--text-3) 35%, transparent); } .qbar .linkish:hover { color: var(--danger); } .qhead { flex: none; display: flex; gap: 22px; padding: 14px 26px 10px; border-bottom: 1px solid var(--border-subtle); font-family: var(--data); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); } .queue { flex: 1; overflow-y: auto; overscroll-behavior: contain; } .q-file { flex: 1; min-width: 0; } .q-len { width: 120px; flex: none; } .q-state { width: 130px; flex: none; } .q-out { width: 96px; flex: none; } .q-kill { width: 28px; flex: none; text-align: right; } .qrow { display: flex; align-items: center; gap: 22px; padding: 14px 26px; border-bottom: 1px solid var(--border-row); transition: background 150ms ease; } .qrow:hover { background: var(--row-hover); } .qrow .q-file { font-family: var(--data); font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; } .qrow[data-status="pending"] .q-file { color: var(--text-3); } .qrow[data-status="skipped"] { opacity: .55; } .q-len, .q-out { font-family: var(--data); font-size: 12px; } .q-len { color: var(--text-3); } .q-state { font-size: 12px; color: var(--text-3); } .state-done { color: var(--success); } .state-failed { color: var(--danger); } .state-running { color: var(--accent); } .q-out a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 2px; margin-right: 8px; } .q-out a:hover { text-decoration-color: var(--accent); } .em-dash { color: var(--text-4); } .q-kill button { padding: 0; background: none; border: 0; color: var(--text-4); font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 120ms ease, color 120ms ease; } .qrow:hover .q-kill button, .q-kill button:focus-visible { opacity: 1; } .q-kill button:hover { color: var(--danger); } /* second line under a file name: mode, error, or where we looked */ .q-sub { margin-top: 5px; font-family: var(--ui); font-size: 12px; color: var(--text-3); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .q-sub.is-error { color: var(--danger); } /* A file waiting on an answer is not a failure — it is a question. */ .q-sub.is-ask { color: var(--accent); } /* A decoder's error can run long; two lines, then hover for the rest. */ .q-sub .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: help; } .q-sub.is-text { color: var(--success); } .q-sub .linkish { color: var(--text-2); text-decoration-color: var(--border-control); } .q-sub .linkish:hover { color: var(--text); text-decoration-color: var(--text-3); } /* the file being transcribed, expanded */ .qrow.is-active { flex-direction: column; align-items: stretch; gap: 11px; padding: 16px 26px; background: var(--bg-raised); border-left: 2px solid var(--accent); } .qrow.is-active:hover { background: var(--bg-raised); } .qrow-main { display: flex; align-items: center; gap: 22px; } .waveform { display: flex; align-items: center; gap: 2px; height: 30px; } .waveform i { width: 3px; border-radius: 2px; background: var(--wave-rest); } .waveform i.lit { background: var(--accent); } .excerpt { font-family: var(--display); font-size: 15px; line-height: 1.65; color: var(--text-2); min-height: calc(2 * 1.65em); margin: 0; } .qrow.is-failed { align-items: flex-start; background: var(--danger-bg); } .qrow.is-failed:hover { background: var(--danger-bg); } .qrow.is-failed .q-file { color: var(--text); } .queue-empty { padding: 40px 26px; color: var(--text-3); font-size: 12px; } .queue-more { padding: 14px 26px; color: var(--text-4); font-style: italic; font-size: 12px; } /* ── drag & drop ──────────────────────────────────────────────────────── */ .drop-veil { position: fixed; inset: 0 0 0 352px; border: 2px dashed var(--accent); pointer-events: none; } .drop-veil.is-bad { border-color: var(--danger); } /* ── responsive ───────────────────────────────────────────────────────── */ @media (max-width: 1180px) { .q-len { display: none; } } @media (max-width: 1000px) { body { overflow: auto; } .shell { flex-direction: column; height: auto; } .rail { width: auto; border-right: 0; border-bottom: 1px solid var(--border); } .column { overflow: visible; } .queue { overflow: visible; } .drop-veil { inset: 0; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }