/* The Almanac's controls, for the calendar's existing class names (rv-control, rv-press, rv-chosen, rv-main,
   rv-label). Values and grammar come from the designer's own sheet,
   ~/reverie-sources/2026-11-02-blind-rounds/blind/B5/components5.css; the mockup's .is-hover and .is-pressed are
   real :hover and :active here, and .day / .night are the calendar's data-look.

   The grammar, kept exactly:
   - a BUTTON does something: a centred label, edged or filled, raised on a lip, and it sinks when pressed;
   - a DOOR goes somewhere: a paper card with a chevron, which lifts on hover and settles when pressed;
   - ONE raised ink action per screen - here, the +.

   Held in the calendar until the design system ships The Almanac into ~/reverie/design-world/, then replaced. */

:root, :root[data-look='night'] {
  --p-top: #FCF7EB; --p-bot: #E2D9C5; --p-top-hi: #FFFEF8; --p-bot-hi: #EEE6D4; --p-top-pr: #C8BEA8; --p-bot-pr: #D9CFB9; --p-ink: #0E121C;
  --p-shadow: 0 1px 1px rgba(0,0,0,.55), 0 4px 10px -2px rgba(0,0,0,.55), 0 12px 24px -10px rgba(0,0,0,.70);
  --p-shadow-hi: 0 2px 2px rgba(0,0,0,.55), 0 8px 16px -4px rgba(0,0,0,.6), 0 18px 32px -12px rgba(0,0,0,.75);
  --s-top: #2D3547; --s-bot: #212838; --s-top-hi: #364055; --s-bot-hi: #283042; --s-top-pr: #171C28; --s-bot-pr: #1E2433;
  --s-edge: #7B8498; --s-edge-hi: #A9B1C2;
  --s-lip: 0 2px 0 rgba(0,0,0,.55), 0 8px 16px -8px rgba(0,0,0,.6);
  --s-lip-hi: 0 3px 0 rgba(0,0,0,.55), 0 12px 22px -8px rgba(0,0,0,.7);
  --tile-top: #FFFBF0; --tile: #E6DECB; --tile-ink: #0E121C;
  --door-lift: 0 1px 2px rgba(0,0,0,.5), 0 12px 26px -10px rgba(0,0,0,.65);
  --door-lift-hi: 0 2px 4px rgba(0,0,0,.55), 0 18px 34px -12px rgba(0,0,0,.75);
  --tab-on: #2A3245; --tab-press: #3A4560; --bar-shadow: 0 -14px 34px -16px rgba(0,0,0,.7);
}
:root[data-look='day'] {
  --p-top: #2F3442; --p-bot: #1B1E27; --p-top-hi: #3B4153; --p-bot-hi: #252937; --p-top-pr: #0F1116; --p-bot-pr: #1D2029; --p-ink: #FFFDF8;
  --p-shadow: 0 1px 1px rgba(15,17,23,.30), 0 3px 6px -1px rgba(27,30,39,.22), 0 10px 20px -8px rgba(27,30,39,.40);
  --p-shadow-hi: 0 2px 2px rgba(15,17,23,.26), 0 6px 12px -2px rgba(27,30,39,.24), 0 16px 28px -10px rgba(27,30,39,.48);
  --s-top: #FFFEFA; --s-bot: #F0EADE; --s-top-hi: #FFFFFF; --s-bot-hi: #F7F2E8; --s-top-pr: #E2D9C7; --s-bot-pr: #ECE5D6;
  --s-edge: #8A8272; --s-edge-hi: #4A463F;
  --s-lip: 0 2px 0 rgba(27,30,39,.16), 0 6px 14px -8px rgba(27,30,39,.30);
  --s-lip-hi: 0 3px 0 rgba(27,30,39,.16), 0 10px 20px -8px rgba(27,30,39,.34);
  --tile-top: #343A4A; --tile: #1B1E27; --tile-ink: #FFFDF8;
  --door-lift: 0 1px 2px rgba(27,30,39,.08), 0 10px 22px -8px rgba(27,30,39,.22);
  --door-lift-hi: 0 2px 4px rgba(27,30,39,.10), 0 16px 30px -10px rgba(27,30,39,.30);
  --tab-on: #E6DFD0; --tab-press: #D3C8B2; --bar-shadow: 0 -12px 30px -18px rgba(27,30,39,.35);
}

/* ---- A button does something ---- */
.rv-control {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 16px/1 var(--f-sans); letter-spacing: -.005em; font-feature-settings: var(--f-feat);
  background: linear-gradient(var(--s-top), var(--s-bot)); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--s-edge), var(--s-lip);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.rv-control:hover { background: linear-gradient(var(--s-top-hi), var(--s-bot-hi)); box-shadow: inset 0 0 0 1.5px var(--s-edge-hi), var(--s-lip-hi); transform: translateY(-1px); }
.rv-control:active { background: linear-gradient(var(--s-top-pr), var(--s-bot-pr)); box-shadow: inset 0 0 0 1.5px var(--s-edge), var(--press); transform: translateY(1px) scale(.975); }
.rv-control:disabled { background: var(--inset); color: var(--ink2); box-shadow: none; transform: none; }

/* The one filled ink action on a screen: Add, Keep, Done. Cream on ink at night, ink on paper by day. */
.rv-main, .rv-control.rv-main {
  background: linear-gradient(var(--p-top), var(--p-bot)); color: var(--p-ink); box-shadow: var(--p-shadow);
}
.rv-main:hover, .rv-control.rv-main:hover { background: linear-gradient(var(--p-top-hi), var(--p-bot-hi)); box-shadow: var(--p-shadow-hi); transform: translateY(-1px); }
.rv-main:active, .rv-control.rv-main:active { background: linear-gradient(var(--p-top-pr), var(--p-bot-pr)); box-shadow: inset 0 2px 5px rgba(0,0,0,.42); transform: translateY(1px) scale(.975); }

/* Chosen: the same button, filled, so chosen and unchosen are one design in two states (her 2 Nov rule). */
.rv-chosen,
.rv-control[aria-pressed='true'], .rv-control[aria-selected='true'], .rv-control[aria-current] {
  background: linear-gradient(var(--p-top), var(--p-bot)); color: var(--p-ink); box-shadow: var(--p-shadow); font-weight: 700;
}

/* ---- A door goes somewhere: a paper card that lifts ---- */
.rv-press {
  border: 0; background: var(--sheet); color: var(--ink); box-shadow: var(--door-lift);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.rv-press:hover { transform: translateY(-2px); box-shadow: var(--door-lift-hi); }
.rv-press:active { transform: translateY(1px) scale(.985); box-shadow: inset 0 1px 3px rgba(0,0,0,.12); background: var(--tonal); }
.rv-press .chev { color: var(--ink2); transition: transform .16s var(--ease); }
.rv-press:hover .chev { transform: translateX(3px); color: var(--ink); }

/* ---- A small heading over a group ---- */
.rv-label { font: 700 13.5px/18px var(--f-sans); color: var(--ink2); letter-spacing: 0; text-transform: none; }

/* Focus: the gold mark, outside the shape, never a ring drawn into the surface (her rule, and the look's). */
.rv-control:focus-visible, .rv-press:focus-visible { outline: 3px solid var(--gold-mark); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .rv-control, .rv-press, .rv-press .chev { transition: background .16s linear, box-shadow .16s linear; }
  .rv-control:hover, .rv-control:active, .rv-main:hover, .rv-main:active, .rv-press:hover, .rv-press:active { transform: none; }
}