body { background-color: #fff8f6; color: #261814; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #fff8f6; border-left: 2px solid #261814; }
::-webkit-scrollbar-thumb { background: #261814; }
.press { transition: all .1s ease; }
.press:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 rgba(0,0,0,1); }

/* Navigating swaps <main> in place, so there is no browser spinner to say
   anything is happening. This bar is the only progress signal the user gets. */
#routebar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: #a63500; z-index: 100; opacity: 0;
  transition: width .2s ease, opacity .2s ease;
}
#routebar.on { opacity: 1; }
main[data-loading="1"] { opacity: .55; transition: opacity .12s ease; }

/* A cell being edited has to look editable before it is clicked, or nobody
   discovers that the table is editable at all. */
.cell-edit {
  background: transparent; border: 2px solid transparent; width: 100%;
  padding: 2px 6px; margin: -2px -6px;
}
.cell-edit:hover { border-color: #e2bfb4; background: #fff; }
.cell-edit:focus { outline: none; border-color: #a63500; background: #fff; }
.saved-flash { animation: savedflash .9s ease; }
@keyframes savedflash {
  0% { background: #e2f2e8; } 100% { background: transparent; }
}

/* ------------------------------------------------------------------ */
/* public pages (landing, login)                                       */
/* ------------------------------------------------------------------ */

/* Faint engineering-paper grid. It gives the warm off-white some texture
   without adding an image request, and echoes the squared-off geometry the
   rest of the design system is built on. */
.paper {
  background-image:
    linear-gradient(to right, rgba(38,24,20,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(38,24,20,.055) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Diagonal hazard stripes, used once — on the band that states the problem
   the product exists to solve. Straight out of the workshop. */
.hazard {
  background-image: repeating-linear-gradient(
    45deg, #261814 0 12px, #a63500 12px 24px);
}

/* One staggered reveal on load. The audience checks this on a phone between
   jobs, so it stays short and never delays the text being readable. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.rise { animation: rise .5s cubic-bezier(.2,.7,.3,1) both; }
.rise-1 { animation-delay: .05s }
.rise-2 { animation-delay: .13s }
.rise-3 { animation-delay: .21s }
.rise-4 { animation-delay: .29s }

/* Someone who has asked not to see motion has asked for a reason. */
@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  .press { transition: none; }
}

/* A plate that lifts into its own shadow on hover — the same physical
   language as .press, running the other way. */
.plate { transition: transform .12s ease, box-shadow .12s ease; }
.plate:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 0 rgba(0,0,0,1); }