/* PUDDY PRESENTS: ODYSSEUS, the editor's frame (ODYSSEUS, 2026-11-13). The page's own style carries the colours,
   the faces and the buttons; this file adds the three more weights the lettering sets, and the editor's bar,
   sheet and lists. One column on a phone and on a folded phone; from 840px the lettering sits beside the page.
   Every grid and flex item carries min-width: 0, and no box here has a width of its own above a phone's. */

@font-face { font-family: 'PUDDY Odysseus Local'; src: url('/fonts/PUDDYOdysseus-Regular.woff2') format('woff2'), url('/fonts/PUDDYOdysseus-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'PUDDY Odysseus Local'; src: url('/fonts/PUDDYOdysseus-Medium.woff2') format('woff2'), url('/fonts/PUDDYOdysseus-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'PUDDY Odysseus Local'; src: url('/fonts/PUDDYOdysseus-Black.woff2') format('woff2'), url('/fonts/PUDDYOdysseus-Black.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; }

.ed-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 840px) { .ed-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.ed-col { min-width: 0; }
.ed-col h3 { margin: 0 0 8px; font-family: var(--face); font-weight: 700; font-size: 16px; letter-spacing: .15em; text-transform: uppercase; }

.ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; }
.ed-bar > * { min-width: 0; }
.ed-bar .label { margin: 0; }
.ed-bar select { max-width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; background: #000; color: #fff; font-family: var(--sans); font-size: 16px; }
.ed-bar .btn { padding: 10px 16px; cursor: pointer; touch-action: manipulation; }
.ed-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--dim); }
.ed-check input { width: 18px; height: 18px; margin: 0; accent-color: #fff; }

.ed-sheet { padding: 8px; border: 1px solid var(--line); background: var(--panel); }
.ed-sheet canvas { display: block; width: 100%; height: auto; background: #fff; }

.ed-checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--dim); }
.ed-checks li { min-width: 0; overflow-wrap: anywhere; }
.ed-checks .bad { color: #fff; }

.ed-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ed-lines li { min-width: 0; display: grid; gap: 4px; }
.ed-lines label { font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); overflow-wrap: anywhere; }
.ed-lines input { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; background: transparent; color: #fff; font-family: var(--sans); font-size: 16px; }
.ed-lines input:focus, .ed-bar select:focus { outline: 2px solid #fff; outline-offset: 0; }