/* ==========================================================================
   BUTTONS — the four click behaviours available in this interface
   --------------------------------------------------------------------------
   Pick one per control by putting its class in the HTML, next to the class
   that gives the control its shape and size.

     .btn-flat    Flat at rest. Rises into a bevelled button under the
                  pointer and fills with the selection colour.
                  Used for list rows: category tree, outline, menu options.

     .btn-raised  Bevelled and outlined at rest, fills on hover, pushes in
                  when held. The plain control.

     .btn-drop    Bevelled, outlined, and standing above a hard rectangular
                  offset shadow — the same shadow the window casts. Lifts
                  away from the shadow on hover and falls flat into it when
                  pressed. Used for the page arrows.

     .btn-ghost   No bevel, ever. Fills with the title-bar colour on hover.

   Add .is-off for a dead control: no fill, no lift, no press.

   Shadow offsets live in one place so buttons, panels and the window all
   cast the same light. Every offset is rectangular; none is ever blurred.
   ========================================================================== */

body {
  --drop-sm: 2px 2px 0 0 var(--shadow);   /* buttons          */
  --drop-md: 3px 3px 0 0 var(--shadow);   /* buttons, lifted  */
  --drop-lg: 4px 4px 0 0 var(--shadow);   /* windows, panels  */
}

/* -- shared shape ---------------------------------------------------------- */

.btn {
  display: flex;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}


/* --------------------------------------------------------------------------
   A — FLAT
   -------------------------------------------------------------------------- */

.btn-flat:not(.is-off):hover {
  color: var(--sel-ink);
  background: var(--sel);
  box-shadow: var(--bevel-up);
}
.btn-flat:not(.is-off):active { box-shadow: var(--bevel-down); }


/* --------------------------------------------------------------------------
   B — RAISED
   -------------------------------------------------------------------------- */

.btn-raised {
  color: var(--ink);
  background: var(--face);
  border: 1px solid var(--ink);
  box-shadow: var(--bevel-up);
}
.btn-raised:not(.is-off):hover {
  color: var(--sel-ink);
  background: var(--sel);
}
.btn-raised:not(.is-off):active { box-shadow: var(--bevel-down); }


/* --------------------------------------------------------------------------
   C — DROP
   The lift uses translate rather than margins so it never disturbs the
   layout around it, and the travel is whole pixels so nothing blurs.
   -------------------------------------------------------------------------- */

.btn-drop {
  color: var(--ink);
  background: var(--face);
  border: 1px solid var(--ink);
  box-shadow: var(--bevel-up), var(--drop-sm);
}
.btn-drop:not(.is-off):hover {
  color: var(--sel-ink);
  background: var(--sel);
  box-shadow: var(--bevel-up), var(--drop-md);
  translate: -1px -1px;
}
.btn-drop:not(.is-off):active {
  box-shadow: var(--bevel-down);
  translate: 2px 2px;            /* lands exactly where its shadow was */
}


/* --------------------------------------------------------------------------
   DEAD CONTROLS
   -------------------------------------------------------------------------- */

.btn.is-off {
  color: var(--ink-dim);
  background: var(--face-alt);
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}


/* ==========================================================================
   STYLE VARIANTS — the Buttons row in the Theme menu
   --------------------------------------------------------------------------
   These re-skin the behaviours above without changing what any of them does.
   Every variant stays inside the palette, so a style is a choice about weight
   and not about colour.

     bs-1  BEVELLED    the default: one-pixel bevels, raised at rest
     bs-2  OUTLINED    no bevel, a hard outline, fill on hover     (v1's look)
     bs-3  UNDERLINED  no box at all until hover; a rule underneath
     bs-4  FLAT        filled blocks, no bevel, no outline
   ========================================================================== */

/* -- 2  OUTLINED ---------------------------------------------------------- */
body:has(#bs-2:checked) .btn-raised,
body:has(#bs-2:checked) .btn-drop {
  background: transparent;
  border: 2px solid var(--ink);
  box-shadow: none;
}
body:has(#bs-2:checked) .btn-raised:not(.is-off):hover,
body:has(#bs-2:checked) .btn-drop:not(.is-off):hover {
  background: var(--sel);
  box-shadow: none;
  translate: none;
}
body:has(#bs-2:checked) .btn-raised:not(.is-off):active,
body:has(#bs-2:checked) .btn-drop:not(.is-off):active {
  background: var(--ink);
  color: var(--face);
  translate: none;
}
body:has(#bs-2:checked) .btn-flat:not(.is-off):hover { box-shadow: none; }

/* -- 3  UNDERLINED -------------------------------------------------------- */
body:has(#bs-3:checked) .btn-raised,
body:has(#bs-3:checked) .btn-drop {
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--line);
  box-shadow: none;
}
body:has(#bs-3:checked) .btn-raised:not(.is-off):hover,
body:has(#bs-3:checked) .btn-drop:not(.is-off):hover {
  color: var(--link);
  background: transparent;
  border-bottom-color: var(--pop);
  box-shadow: none;
  translate: none;
}
body:has(#bs-3:checked) .btn-raised:not(.is-off):active,
body:has(#bs-3:checked) .btn-drop:not(.is-off):active {
  color: var(--sel-ink);
  background: var(--sel);
  translate: none;
}
body:has(#bs-3:checked) .btn-flat:not(.is-off):hover {
  background: transparent;
  color: var(--link);
  box-shadow: inset 0 -2px 0 0 var(--pop);
}

/* -- 4  FLAT — matches the navigation rows, no relief anywhere ------------- */
body:has(#bs-4:checked) .btn-raised,
body:has(#bs-4:checked) .btn-drop {
  background: color-mix(in srgb, var(--ink) 12%, var(--face));
  border: 1px solid transparent;
  box-shadow: none;
}
body:has(#bs-4:checked) .btn-raised:not(.is-off):hover,
body:has(#bs-4:checked) .btn-drop:not(.is-off):hover {
  color: var(--sel-ink);
  background: var(--sel);
  box-shadow: none;
  translate: none;
}
body:has(#bs-4:checked) .btn-raised:not(.is-off):active,
body:has(#bs-4:checked) .btn-drop:not(.is-off):active {
  background: color-mix(in srgb, var(--sel) 70%, var(--ink));
  translate: none;
}
body:has(#bs-4:checked) .btn-flat:not(.is-off):hover { box-shadow: none; }


/* -- 5  CLEAN — no box at all. A row of text that happens to respond to the
      pointer: no bevel, no outline, no fill behind it at rest. The lightest
      the interface goes while still being obviously clickable. ------------ */
body:has(#bs-5:checked) .btn-raised,
body:has(#bs-5:checked) .btn-drop {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}
body:has(#bs-5:checked) .btn-raised:not(.is-off):hover,
body:has(#bs-5:checked) .btn-drop:not(.is-off):hover,
body:has(#bs-5:checked) .btn-flat:not(.is-off):hover {
  color: var(--link);
  background: transparent;
  box-shadow: none;
  translate: none;
}
body:has(#bs-5:checked) .btn-raised:not(.is-off):active,
body:has(#bs-5:checked) .btn-drop:not(.is-off):active,
body:has(#bs-5:checked) .btn-flat:not(.is-off):active {
  color: var(--sel-ink);
  background: var(--sel);
  translate: none;
}


/* --------------------------------------------------------------------------
   The dark bottom-right edge belongs to the Bevelled style alone. Every other
   style is defined by NOT having relief, and a leftover dark edge under a
   flat or outlined control just looks like a mistake. This drops it from the
   four of them in one place rather than unpicking each rule above.
   -------------------------------------------------------------------------- */

body:has(#bs-2:checked), body:has(#bs-3:checked),
body:has(#bs-4:checked), body:has(#bs-5:checked) {
  --bevel-up:   inset 1px 1px 0 0 var(--edge-lt);
  --bevel-down: inset 1px 1px 0 0 var(--edge-dk);
  --drop-sm: none;
  --drop-md: none;
}