so the header's own muted link styling is left alone. */ main a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); } main a:hover { color: var(--ink); } /* Workbench --------------------------------------------------------------- */ /* Form left, video right. The form column is deliberately narrow: every field in it is short, and a 700px-wide text input just makes the eye travel. The width it gives up goes to the video, which is the thing being sold. `align-items: start` matters — without it the stage card stretches to the form's height and the placeholder floats in a sea of panel. */ .workbench { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: start; gap: 20px; } .form-column { min-width: 0; } /* The form's header row: its title, and the one link that abandons the current video. The link lives up here, away from the submit buttons, precisely so it cannot be mistaken for one of them. */ .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .card-head h2 { margin: 0 0 14px; } .brief-summary { margin: 0 0 12px; font-size: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The conversation so far: the brief, then every correction, oldest first. All of it still applies — that is why it stays on screen instead of collapsing. */ .said { margin: 0 0 18px; padding-left: 18px; font-size: 13px; color: var(--dim); } .said li { margin-bottom: 5px; } .said li:last-child { color: var(--ink); } /* One column before the video gets too small to be worth showing large. Below this the form comes first, which is also the order you use them in. `minmax(0, 1fr)` for the same reason the two-column rule above uses it: a bare `1fr` track floors at its content's min-content width, so one wide child — a long address in the renders list — silently widens the whole page. */ @media (max-width: 900px) { .workbench { grid-template-columns: minmax(0, 1fr); } } /* Panels ------------------------------------------------------------------ */ .panel { background: var(--panel-glass); border: 1px solid var(--glass-line); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: var(--panel-shadow); } .panel h2 { margin: 0 0 14px; font-size: 19px; letter-spacing: -0.01em; } /* Form -------------------------------------------------------------------- */ .field { display: block; margin-bottom: 20px; } .label { display: block; font-size: 14px; font-weight: 550; margin-bottom: 7px; } .hint { display: block; margin-top: 7px; font-size: 13px; color: var(--dim); } /* A label with something beside it. The 7px moves from the label to the row, so the row is exactly as tall as the label text and a bare label and a row leave the field below them in the same place — and so the panel below can be placed to meet the row's bottom edge exactly (see .help-pop). */ .label-row { display: flex; align-items: baseline; gap: 7px; margin-bottom: 7px; } .label-row .label { margin-bottom: 0; } /* The ? that opens the description field's instructions -------------------- */ /* Sized in em so it tracks the 14px label rather than being pinned to a pixel size that stops matching the day the label changes — the same reasoning as .nav-icon. A circle rather than a bare glyph because at this size the question mark alone doesn't read as something you can press. */ .help-icon { flex: none; width: 1.35em; height: 1.35em; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--dim); font: inherit; font-size: 12px; line-height: 1; font-weight: 600; cursor: pointer; align-self: center; } .help-icon:hover, .help-icon[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); } .help-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* The panel it opens. Absolute, so opening it never moves the field underneath the cursor — the reason a pushed-down layout is worse than an overlay here is that the textarea you are about to type in would walk away as you read. z-index because it overlaps the textarea below it, which is a later sibling and would otherwise paint on top. Its own background rather than the panel glass: this sits *over* a panel, and a translucent layer on a translucent layer is a smear in both themes. */ .has-help { position: relative; } .help-pop { /* 22px is the label row's own height, so the panel *meets* it rather than floating below: the pointer travels from the ? into the panel without crossing a gap, which is what makes hover-to-open usable at all. */ position: absolute; z-index: 5; top: 22px; left: 0; right: 0; max-height: min(60vh, 420px); overflow-y: auto; padding: 14px 16px; border-radius: 12px; /* Its own solid background, not the panel glass: this sits *over* a panel, and a translucent layer on a translucent layer is a smear in both themes. */ background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28); font-size: 13px; color: var(--dim); } .help-pop .hint { margin-top: 0; } .help-pop .help-title { margin: 12px 0 6px; color: var(--ink); font-weight: 550; } .help-pop ul { margin: 0; padding-left: 18px; } .help-pop li { margin-bottom: 6px; } .help-pop li strong, .help-pop .hint strong { color: var(--ink); font-weight: 600; } .help-pop > .hint:last-child { margin-top: 12px; } /* Two ways in, one panel — hover for a pointer, the ? for a tap, and a phone is never shown less than a laptop. The hover rules override the `hidden` attribute (higher specificity than the UA's `[hidden] { display: none }`) rather than replacing it, so app.js keeps owning the open/closed state and the button's aria-expanded stays true to what a click did. Scoped to the row and the panel, never the whole field: `.has-help:hover` would pop the panel open over the textarea the moment the pointer crossed it on the way to typing. */ .label-row:hover + .help-pop[hidden], .help-pop[hidden]:hover { display: block; } input[type=text], input[type=url], input[type=email], input[type=password], textarea, select { width: 100%; padding: 11px 13px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 15px; /* One height for every control, stated rather than left to each one's own text metrics. The arithmetic is the inputs': one line of 1.55 leading, plus 11px padding and 1px border, twice over. */ min-height: calc(1.55em + 24px); } /* A