/* base.css — owned by cto. Structural only.
 *
 * This file exists so that the sourced pixel dimensions cannot be broken by styling.
 * It loads BEFORE style.css, so everything here is overridable by the designer except
 * the dimensions themselves, which app.js sets as inline styles and which nothing in
 * this project should override. If a rule here is cosmetic, the designer wins.
 *
 * Designer: work in style.css. Do not edit this file or index.html; markup requests go
 * in designer-notes.md.
 */

*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }

.ev-skip-link { position: absolute; left: -9999px; }
.ev-skip-link:focus { position: static; display: inline-block; padding: .5rem; }

.ev-header, .ev-main, .ev-footer { padding: 0 1rem; }

/* The preview boxes. Widths and heights come from app.js and are the product. */
/* The shelf is the product: it must render at the TRUE sourced width, never
   squashed to fit. max-width:100% used to cap it here, which is what crushed
   the desktop-search row until its title rendered one letter per line. Per
   CEO D11 the preview never scales and the page accommodates it -- so the
   CARD scrolls (see .ev-surface in style.css), the shelf does not shrink. */
/* content-box, deliberately, against the global border-box. app.js sets the
   shelf width to the SOURCED width; with border-box the shelf's own padding ate
   into that, so the thumb overflowed its container by exactly the padding and
   every preview grew a stray scrollbar. The sourced number is the width of the
   content, and the chrome sits outside it. */
.ev-shelf { max-width: none; box-sizing: content-box; }
/* In the row layouts the text column must keep enough width to be a column of
   text rather than a stack of glyphs, even if something upstream goes wrong. */
.ev-shelf--row .ev-shelf__meta { min-width: 8rem; }
.ev-shelf--row { display: flex; gap: 8px; align-items: flex-start; }
.ev-shelf--stacked { display: block; }
.ev-shelf--row .ev-shelf__meta { flex: 1 1 auto; min-width: 0; }

.ev-shelf__thumb { position: relative; overflow: hidden; flex: 0 0 auto;
                   background: #e0e0e0; }
.ev-shelf__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-shelf__placeholder { position: absolute; inset: 0; display: flex;
                         align-items: center; justify-content: center;
                         font-size: 11px; color: #767676; }
.ev-shelf--has-image .ev-shelf__placeholder { display: none; }

/* YouTube's declared family for the sourced mobile surface. We load no fonts, so this
   falls through to the second name in YouTube's own stack. */
.ev-shelf__title { margin: 8px 0 0; font-family: Roboto, Arial, Helvetica, sans-serif;
                   font-weight: 500; word-break: break-word; }
.ev-shelf__title--empty { color: #767676; font-weight: 400; }

/* Stands in for the channel name and view count. Deliberately blank: we are not going
   to print invented metadata under someone's thumbnail. */
.ev-shelf__bar { display: block; width: 60%; height: 12px; margin-top: 8px;
                 background: #e0e0e0; }

.ev-file-input { display: block; }   /* must stay focusable — do not display:none it */

.ev-approx { font-weight: 700; }
.ev-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.ev-sources__table { border-collapse: collapse; }
.ev-sources__table th, .ev-sources__table td { text-align: left; vertical-align: top;
                                               padding: .5rem; border: 1px solid #ccc; }
.ev-source-cell__sub { display: block; font-size: .85em; color: #555; margin-top: .25rem; }

/* The hidden attribute must win over the class rules above (app.js hides the <img>
   with it when there is no image). */
[hidden] { display: none !important; }