/* ==========================================================================
   LUTHER'S WORLD BUTTON SYSTEM  ("Tactile")
   One file, loaded last on every page. This is the single source of truth
   for how buttons look. Page files may set layout (width, margin, grid) but
   the look of a button comes from here. To restyle every button on the
   site, change the tokens in :root below.

   Style: a solid button that sits on a thicker bottom edge and sinks when
   pressed. Rounded corners (16px), one font, no gloss.

   Three kinds:
   1. PRIMARY   the main "go" action. Bright plum, white text, 48px tall.
   2. SECONDARY every other action. White, gray edge, dark text, 44px.
   3. TOGGLE    pick one of a set. Looks like SECONDARY when off. When
                picked: light plum with a plum outline (never solid, so a
                picked option never looks like the Go button).

   Color jobs:
   bright plum #7b3a72  primary buttons
   dark plum   #5b2a54  brand (logo, header) and the primary button edge
   light plum           a picked option
   white + gray edge    every other button
   gold                 earned things only (stamps, correct answers)

   Not covered on purpose: header chrome, bottom tab bar, cards and tiles,
   quiz answer cards, text links.
   ========================================================================== */

:root{
  --lwb-font:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
  --lwb-radius:16px;
  --lwb-edge:4px;
  --lwb-edge-sec:3px;

  /* primary */
  --lwb-pri:#7b3a72;
  --lwb-pri-hover:#86417c;
  --lwb-pri-edge:#5b2a54;
  --lwb-pri-text:#ffffff;

  /* secondary */
  --lwb-sec:var(--paper,#ffffff);
  --lwb-sec-hover:var(--paper2,#f3f0eb);
  --lwb-sec-line:#e4e0da;
  --lwb-sec-text:var(--ink2,#4c3f49);
  --lwb-sec-text-hover:var(--ink,#241a22);

  /* toggle, picked */
  --lwb-on:#f5ecf3;
  --lwb-on-line:#c79bbf;
  --lwb-on-text:#5b2a54;
}
:root[data-theme="dark"]{
  --lwb-pri:#8a4380;
  --lwb-pri-hover:#96508c;
  --lwb-pri-edge:#4a2244;
  --lwb-sec:var(--paper,#261e24);
  --lwb-sec-hover:var(--paper2,#2e252c);
  --lwb-sec-line:#463a42;
  --lwb-on:#3a2336;
  --lwb-on-line:#9a5a90;
  --lwb-on-text:#f0d6ea;
}

/* Note: rules marked :not(#lwb) are small exceptions. The #lwb part only
   raises their priority so they beat the general rules above them. */

/* ---------- shared base: shape, font, motion ---------- */
html:root body :is(
  .btn-primary,.glass,.start-btn,.next-btn,.go,.print,.mi-btn,.ret-btn,.new-btn,.due-btn,.lw-cel-btn,
  .lg-btn,.pr-btn,.tool-btn,.rev-btn,.vf-btn,
  .btn,.btn-secondary,.unit-link,.hint-btn,.sound-btn,.cb-nav,.tm-say,.pp-share,.pchip,
  .sb,.ex-tab,.set-tab,.seg button,.tool,.chip
){
  position:relative;
  border:none;border-radius:var(--lwb-radius);
  font-family:var(--lwb-font);font-weight:700;letter-spacing:.01em;
  text-decoration:none;text-shadow:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .12s ease,color .12s ease,box-shadow .08s ease,transform .08s ease;
}
/* no gloss strip anywhere */
html:root body :is(
  .btn-primary,.glass,.start-btn,.next-btn,.go,.print,.mi-btn,.ret-btn,.new-btn,.due-btn,.lw-cel-btn,
  .lg-btn,.pr-btn,.tool-btn,.rev-btn,.vf-btn,
  .btn,.btn-secondary,.unit-link,.hint-btn,.sound-btn,.cb-nav,.tm-say,.pp-share,.pchip,
  .sb,.ex-tab,.set-tab,.seg button,.tool,.chip
)::before{content:none;display:none}

/* ---------- 1. PRIMARY ---------- */
html:root body :is(
  .btn-primary,.glass,.start-btn,.next-btn,.go,.print,.mi-btn,.ret-btn,.new-btn,.due-btn,.lw-cel-btn,
  .lg-btn:not(.sec):not(.law):not(.gospel),.pr-btn:not(.sec),
  .tool-btn.primary,.rev-btn.primary,.vf-btn.primary
){
  background:var(--lwb-pri);
  color:var(--lwb-pri-text);
  box-shadow:0 var(--lwb-edge) 0 var(--lwb-pri-edge);
  min-height:48px;padding:10px 26px;font-size:1rem;line-height:1.25;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
/* primaries that were built full-width stay full-width */
html:root body :is(.glass,.go,.lw-cel-btn):not(#lwb){display:flex}
/* toolbar primaries sit in a row with secondaries, so match their height */
html:root body :is(.tool-btn.primary,.new-btn,.vf-btn.primary,.rev-btn.primary):not(#lwb){min-height:44px;padding:8px 20px;font-size:.95rem}

/* ---------- 2. SECONDARY and 3. TOGGLE (off) ---------- */
html:root body :is(
  .btn-secondary,.lg-btn.sec,.lg-btn.law,.lg-btn.gospel,.pr-btn.sec,
  .tool-btn:not(.primary),.rev-btn:not(.primary),.vf-btn:not(.primary),
  .unit-link,.hint-btn,.sound-btn,.cb-nav,.tm-say,.pp-share,.pchip
):not(.glass):not(.btn-primary),
html:root body :is(.sb,.ex-tab,.set-tab,.tool,.chip,.btn):not(.active):not(.on):not([aria-pressed="true"]):not([aria-selected="true"]),
html:root body .seg button:not(.on):not(.active):not([aria-pressed="true"]){
  background:var(--lwb-sec);
  color:var(--lwb-sec-text);
  box-shadow:inset 0 0 0 2px var(--lwb-sec-line),0 var(--lwb-edge-sec) 0 var(--lwb-sec-line);
}

/* ---------- 3. TOGGLE (picked) ---------- */
html:root body :is(.sb,.ex-tab,.set-tab,.tool,.chip,.btn):is(.active,.on,[aria-pressed="true"],[aria-selected="true"]),
html:root body .seg button:is(.on,.active,[aria-pressed="true"]){
  background:var(--lwb-on);
  color:var(--lwb-on-text);
  box-shadow:inset 0 0 0 2px var(--lwb-on-line),0 var(--lwb-edge-sec) 0 var(--lwb-on-line);
}

/* ---------- sizes for secondary and toggle ---------- */
html:root body :is(
  .btn,.btn-secondary,.lg-btn.sec,.lg-btn.law,.lg-btn.gospel,.pr-btn.sec,
  .tool-btn:not(.primary),.rev-btn:not(.primary),.vf-btn:not(.primary),
  .unit-link,.hint-btn,.sound-btn,.cb-nav,.tm-say,.pp-share,.pchip,
  .sb,.ex-tab,.set-tab,.chip,.seg button
):not(.glass):not(.btn-primary){
  min-height:44px;padding:8px 18px;font-size:.95rem;line-height:1.25;
}
/* the word-search text-size buttons show the size, so keep their letter size */
html:root body .sb:is(.s1,.s2,.s3):not(#lwb){min-width:44px;padding-left:10px;padding-right:10px}
html:root body .sb.s1:not(#lwb){font-size:.76rem}
html:root body .sb.s2:not(#lwb){font-size:.9rem}
html:root body .sb.s3:not(#lwb){font-size:1.04rem}
/* icon-only arrows are square */
html:root body .cb-nav:not(#lwb){min-width:44px;padding-left:0;padding-right:0}
/* Law and Gospel keep their label colors so the two piles read apart */
html:root body .lg-btn.law:not(#lwb){color:#5a3a1e}
html:root body .lg-btn.gospel:not(#lwb){color:#5b2a54}
:root[data-theme="dark"] body .lg-btn.law:not(#lwb){color:#e2c9a6}
:root[data-theme="dark"] body .lg-btn.gospel:not(#lwb){color:#e3bddb}

/* ---------- hover (mouse only) ---------- */
@media (hover:hover){
  html:root body :is(
    .btn-primary,.glass,.start-btn,.next-btn,.go,.print,.mi-btn,.ret-btn,.new-btn,.due-btn,.lw-cel-btn,
    .lg-btn:not(.sec):not(.law):not(.gospel),.pr-btn:not(.sec),
    .tool-btn.primary,.rev-btn.primary,.vf-btn.primary
  ):not(:disabled):not([disabled]):hover{
    background:var(--lwb-pri-hover);color:var(--lwb-pri-text);
    box-shadow:0 var(--lwb-edge) 0 var(--lwb-pri-edge);transform:none;
  }
  html:root body :is(
    .btn-secondary,.lg-btn.sec,.lg-btn.law,.lg-btn.gospel,.pr-btn.sec,
    .tool-btn:not(.primary),.rev-btn:not(.primary),.vf-btn:not(.primary),
    .unit-link,.hint-btn,.sound-btn,.cb-nav,.tm-say,.pp-share,.pchip
  ):not(.glass):not(.btn-primary):not(:disabled):not([disabled]):hover,
  html:root body :is(.sb,.ex-tab,.set-tab,.tool,.chip,.btn):not(.active):not(.on):not([aria-pressed="true"]):not([aria-selected="true"]):not(:disabled):not([disabled]):hover,
  html:root body .seg button:not(.on):not(.active):not([aria-pressed="true"]):hover{
    background:var(--lwb-sec-hover);color:var(--lwb-sec-text-hover);
    box-shadow:inset 0 0 0 2px var(--lwb-sec-line),0 var(--lwb-edge-sec) 0 var(--lwb-sec-line);transform:none;
  }
  html:root body :is(.sb,.ex-tab,.set-tab,.tool,.chip,.btn):is(.active,.on,[aria-pressed="true"],[aria-selected="true"]):hover,
  html:root body .seg button:is(.on,.active,[aria-pressed="true"]):hover{
    background:var(--lwb-on);color:var(--lwb-on-text);
    box-shadow:inset 0 0 0 2px var(--lwb-on-line),0 var(--lwb-edge-sec) 0 var(--lwb-on-line);transform:none;
  }
}

/* ---------- press: the button sinks onto its edge ---------- */
html:root body :is(
  .btn-primary,.glass,.start-btn,.next-btn,.go,.print,.mi-btn,.ret-btn,.new-btn,.due-btn,.lw-cel-btn,
  .lg-btn:not(.sec):not(.law):not(.gospel),.pr-btn:not(.sec),
  .tool-btn.primary,.rev-btn.primary,.vf-btn.primary
):not(:disabled):not([disabled]):active{
  transform:translateY(var(--lwb-edge));
  box-shadow:0 0 0 var(--lwb-pri-edge);
}
html:root body :is(
  .btn-secondary,.lg-btn.sec,.lg-btn.law,.lg-btn.gospel,.pr-btn.sec,
  .tool-btn:not(.primary),.rev-btn:not(.primary),.vf-btn:not(.primary),
  .unit-link,.hint-btn,.sound-btn,.cb-nav,.tm-say,.pp-share,.pchip
):not(.glass):not(.btn-primary):not(:disabled):not([disabled]):active,
html:root body :is(.sb,.ex-tab,.set-tab,.tool,.chip,.btn):not(.active):not(.on):not([aria-pressed="true"]):not([aria-selected="true"]):not(:disabled):not([disabled]):active,
html:root body .seg button:not(.on):not(.active):not([aria-pressed="true"]):active{
  transform:translateY(var(--lwb-edge-sec));
  box-shadow:inset 0 0 0 2px var(--lwb-sec-line),0 0 0 var(--lwb-sec-line);
}
html:root body :is(.sb,.ex-tab,.set-tab,.tool,.chip,.btn):is(.active,.on,[aria-pressed="true"],[aria-selected="true"]):not(:disabled):active,
html:root body .seg button:is(.on,.active,[aria-pressed="true"]):active{
  transform:translateY(var(--lwb-edge-sec));
  box-shadow:inset 0 0 0 2px var(--lwb-on-line),0 0 0 var(--lwb-on-line);
}

/* ---------- disabled: flat, no edge ---------- */
html:root body :is(
  .btn-primary,.glass,.start-btn,.next-btn,.go,.print,.mi-btn,.ret-btn,.new-btn,.due-btn,.lw-cel-btn,
  .lg-btn,.pr-btn,.tool-btn,.rev-btn,.vf-btn,.btn,.btn-secondary,.unit-link,.hint-btn,.sound-btn,.cb-nav,
  .tm-say,.pp-share,.pchip,.sb,.ex-tab,.set-tab,.seg button,.tool,.chip
):is(:disabled,[disabled],[aria-disabled="true"]){
  opacity:.45;cursor:default;transform:translateY(2px);
}

/* ---------- keyboard focus ring, same everywhere ---------- */
html:root body :is(
  .btn-primary,.glass,.start-btn,.next-btn,.go,.print,.mi-btn,.ret-btn,.new-btn,.due-btn,.lw-cel-btn,
  .lg-btn,.pr-btn,.tool-btn,.rev-btn,.vf-btn,.btn,.btn-secondary,.unit-link,.hint-btn,.sound-btn,.cb-nav,
  .tm-say,.pp-share,.pchip,.sb,.ex-tab,.set-tab,.seg button,.tool,.chip
):focus-visible{
  outline:3px solid var(--gold,#c99a2e);outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  html:root body :is(.btn-primary,.glass,.start-btn,.next-btn,.go,.print,.mi-btn,.ret-btn,.new-btn,.due-btn,.lw-cel-btn,.lg-btn,.pr-btn,.tool-btn,.rev-btn,.vf-btn,.btn,.btn-secondary,.unit-link,.hint-btn,.sound-btn,.cb-nav,.tm-say,.pp-share,.pchip,.sb,.ex-tab,.set-tab,.seg button,.tool,.chip){transition:none}
}
@media print{
  html:root body :is(.btn-primary,.glass,.start-btn,.next-btn,.go,.print,.mi-btn,.ret-btn,.new-btn,.due-btn,.lw-cel-btn,.lg-btn,.pr-btn,.tool-btn,.rev-btn,.vf-btn,.btn,.btn-secondary,.unit-link,.hint-btn,.sound-btn,.cb-nav,.tm-say,.pp-share,.pchip,.sb,.ex-tab,.set-tab,.seg button,.tool,.chip){box-shadow:none}
}