/* app-theme.css — the ground.
 *
 * Green-cast near-black with emerald bleeding in from the corners, grain over
 * everything, and ONE gradient spent only on the primary action. The surfaces
 * that hold a part are white cards floating on it; that half lives in
 * app-find.css, scoped to the card.
 *
 * Why white cards and not dark ones: catalog photography is shot on white. On a
 * dark card every product shot glows like a light box. In a white card it just
 * sits there, which is the whole reason this ground works for a parts catalogue
 * and not just for a landing page.
 *
 * tokens.css is still not edited. It is Holo's structural layer — type, space,
 * motion, glass — and both shells keep consuming it; what moved is only the
 * COLOUR on top of it, and that now lives in spectrum.css so the phone can load
 * the same file rather than a copy of these values (2026-08-23).
 */

/* The ~40 semantic tokens this file used to open with now live in spectrum.css,
 * which desktop.html loads immediately before this one — same values, same place
 * in the cascade, but the phone shell loads it too instead of holding a copy.
 * Everything below is DESKTOP paint: the ground, the garage surfaces, the mark. */

body { background-color:#0B0E0D; }
/* emerald from the corners */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 640px at 100% 0%,  rgba(24,116,86,0.42), rgba(24,116,86,0) 60%),
    radial-gradient(820px 620px at 0% 100%,  rgba(20,104,78,0.34), rgba(20,104,78,0) 62%),
    radial-gradient(700px 460px at 50% -10%, rgba(52,232,158,0.07), rgba(52,232,158,0) 60%);
}
/* grain: the single cheapest thing that stops a flat colour reading as flat CSS */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:0.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

#rail { background:rgba(11,14,13,0.86); border-right:1px solid var(--line); }
#topbar { background:rgba(11,14,13,0.72); border-bottom:1px solid var(--line); }
.acct { background:#131917; border:1px solid var(--line); }

/* ── the garage ────────────────────────────────────────────────
   White is the CATALOGUE's material — product photography is shot on white, so a
   paper card is what stops every part shot glowing like a light box. Nothing in
   the garage is a photograph on a white ground: the readout is a number, the
   tiles are counters, the panels are lists. Given paper anyway they added up to
   a wall of glare around the one thing you came to read.
   So the build surfaces take the material the story below them already uses —
   .tl-entry's dark card, hairline, lit top edge. The feed card keeps its paper
   (it carries photos); this is the garage only. */
#main .card{
  background:#FFFFFF; border:0; border-radius:var(--radius); color:#0F1412;
  box-shadow:var(--shadow-card);
}
#main .panel, #main .tile, #main .readout{
  background:var(--glass-card); border:1px solid var(--line); border-radius:var(--radius);
  color:var(--ink); box-shadow:var(--glass-hi);
}

/* Publish is the SECOND action, so it is neither the gradient nor a paper slab
   competing with it — a filled neutral one step above the panels it sits on. */
#main .gar-cta:not(.ghost){ background:var(--grad); color:#06140F; border:0; font-weight:700; }
#main .gar-cta.ghost{
  background:var(--surface-solid-2); color:var(--ink); border:1px solid var(--line-2);
  font-weight:600; box-shadow:var(--glass-hi);
}
#main .gar-cta.ghost:hover{ background:var(--surface-solid-3); border-color:var(--line-2); }

/* The tiles are FILTERS over the story below, not calls to action. Selected is a
   quiet accent state — a tinted face and a ring — not the brand gradient. */
#main .tile{ cursor:pointer; }
#main .tile.on{
  background:var(--accent-a07); color:var(--ink);
  box-shadow:var(--glass-hi), inset 0 0 0 1.5px var(--accent-a48);
}
#main .tile.on .k{ color:var(--accent); }

/* ── hierarchy ──────────────────────────────────────────────────────────────
   The column was stats, then actions, then photos, then specs, all at the same
   weight. What you came to the garage to do is log something, so the actions go
   first and the counters become a summary rather than the headline. */
#main .gar-grid > div:last-child{ display:flex; flex-direction:column; gap:10px; }
#main .gar-grid > div:last-child > .panel{ margin-top:6px !important; }
#main .gar-tiles .tile{ padding:14px 16px; }
#main .gar-tiles .tile .v{ font-size:30px; line-height:1; letter-spacing:-.03em; }
#main .gar-tiles .tile .k{ font-size:10.5px; letter-spacing:.12em; margin-top:4px; }

/* ── the mark ────────────────────────────────────────────────────────────────
 * The drawn logotype, restored 2026-08-22 after a run at replacing it with type.
 * It is a single <symbol> in desktop.html used four times — no font file, no
 * @font-face, no FOUT, and nobody else has it.
 *
 * It is 6.22:1, and that proportion is the whole brief. Every slot sizes it by
 * WIDTH; height follows and cannot be argued with. The one place it cannot go is
 * the 38x38 collapsed rail square — a mark this wide has no square form, which is
 * why .mark stays a letter (app-core.css owns that rule).
 *
 * New here: the home hero and the find topbar. Those two were never the logo —
 * they were bold system text reading "fiddle." with a teal period, so the product
 * shipped two different marks depending on which screen you were on. One mark now.
 */
/* Paint only. NO display here: app-core.css flips #rail .wm svg to none at
 * <=1263px and #topbar .wm-sm to block at <=767px, and this file loads after it,
 * so a display value on this selector silently beats both media queries and puts
 * a 92px logotype inside a 72px rail. Only the two #find marks — which app-core
 * knows nothing about — get their display set, below. */
#find .wordmark svg, #find .tbmark svg,
#rail .wm svg, #topbar .wm-sm{
  color:var(--ink); fill:currentColor; height:auto;
}

/* Home hero. Sized against the search field below it, not against the old text
 * mark: the field is what the eye goes to and it caps at 640px, so the mark takes
 * 52% of that and the two read as one centred stack. The 333px ceiling is set by
 * hand; 6.22:1 makes that 53px tall. clamp keeps it from outgrowing a narrow
 * column — at 320px it is still inside the gutters, and it never exceeds the
 * field it sits above. */
#find .wordmark{
  width:clamp(210px, 46vw, 333px);
  margin:0 auto;
  line-height:0;          /* an h1 wrapping an svg would otherwise carry leading */
}
#find .wordmark svg{ width:100%; display:block; }

/* Find topbar. The old text mark was 60px wide; the logotype needs more length to
 * stay legible at 6.22:1, and the bar has the room. */
#find .tbmark{ width:104px; flex:0 0 auto; padding:0; line-height:0; }
#find .tbmark svg{ width:100%; display:block; }