/* Contract: contracts/web/rules.md
 * custom properties, the reset, and the rules that must load first
 *
 * Part of what was style.css — 1700 lines in one file. The parts load in a fixed
 * order and MUST stay in it: the cascade is decided by source order and
 * specificity exactly as it was, because this is a split and not a rewrite.
 *
 * There are deliberately no @layer rules. Layering is the tidier shape and it
 * would have changed behaviour — a later layer beats an earlier one regardless
 * of specificity, and this stylesheet has at least one pair, `body.app > .bar`
 * written above `.bar`, where the MORE specific rule comes first and wins on
 * specificity. Putting those two in different layers silently reverses them.
 * Splitting the file is worth doing on its own; changing the cascade is a
 * separate decision that wants somebody looking at the screen.
 */
/* Contract: contracts/web/rules.md
   Image-first archive browser. Dark by default because artwork reads better on it;
   follows the OS in either direction. */

:root {
  color-scheme: light dark;
  --bg:        light-dark(#f6f5f2, #14141a);
  --panel:     light-dark(#ffffff, #1c1c24);
  --panel-2:   light-dark(#eceae5, #23232d);
  --ink:       light-dark(#1a1a1f, #eceaf2);
  --ink-dim:   light-dark(#6a6a75, #9a9aa8);
  --line:      light-dark(#dcd9d2, #2f2f3b);
  --accent:    light-dark(#b8442c, #ff7a5c);
  --ok:        light-dark(#2f7d54, #52c48a);
  --warn:      light-dark(#9a6a12, #e0b458);
  --radius: 10px;
  --bar-h: 62px;
  /* One height for every control in the filter bar. Taller than the old 32px:
     these are the controls a 70-year-old uses on a laptop trackpad. */
  --control-h: 38px;
  --sidebar-w: 236px;
}

* { box-sizing: border-box; }

/* `hidden` means hidden.
   The user agent's rule for it is `display: none` at the weakest possible
   specificity, so any component rule that sets display — .btn, .dlg, .dropveil,
   .uploads — silently outranks it and the element stays on screen with its
   .hidden property cheerfully reporting true. That has now caused the same bug
   four separate times in this file, each fixed locally. This is the general
   fix, and it is one of the few places !important is the correct tool: the
   whole job of the rule is to outrank the component. */
[hidden] { display: none !important; }

/* Chrome that gets dragged across should not turn blue.
   Cards are draggable onto folders now, and a drag that starts a hair off a
   card — or ends short of one — sweeps a text selection over every label it
   passes. Shift-clicking a range does the same thing and cannot be started off
   a card at all: the whole point of it is to land on the twentieth one, and
   holding shift is exactly how a browser is told to extend a text selection to
   where you clicked. So a card's own labels go too — the caption as well as the
   name, since a range crosses both. The inspector's stay selectable, and a name
   being renamed puts its own back (.meta .name.renaming, below). */
.sidebar, .filters, .folderbar, .card .meta,
.chip-toggle, .frow, .newfolder, .badge, .chips {
  user-select: none; -webkit-user-select: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
}

/* Held for the moment between the markup arriving and its translation doing.
   Only ever set for somebody whose browser is not asking for English, and
   released by web/i18n.js on a timer as well as on success — see the note in
   index.html. Visibility rather than display: the layout is measured during
   boot, and a hidden shell would measure as nothing. */
html.i18n-hold body { visibility: hidden; }