/* How the house speaks after an act (Vikrant, 29 Oct 2026), drawn by designs/_said.html and moved by designs/said.js.
   Colours mean what they mean everywhere in the house: green done, burgundy not done or due, walnut said for knowing. */

/* The slips float in the page's top right corner, under the bar, so the page beneath never moves when one comes or goes
   (Vikrant chose the corner, 29 Oct 2026). */
.said-slips { position: fixed; top: calc(var(--topbar, 76px) + 12px); right: 20px; z-index: 40; width: min(380px, calc(100vw - 32px));
  display: grid; gap: 8px; pointer-events: none; }
.said-slips:empty { display: none; }
.slip { pointer-events: auto; position: relative; overflow: hidden; margin: 0; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 10px; align-items: center; padding: 11px 10px 11px 14px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--ink) 45%, transparent);
  font: 500 .9rem/1.4 'Manrope', system-ui, sans-serif; animation: slip-in .22s cubic-bezier(.2, .7, .2, 1) both; }
.slip > i { width: 8px; height: 8px; border-radius: 50%; background: var(--quiet); }
.slip.is-done > i { background: var(--fine); }                 /* green: done, all clear */
.slip.is-not-done > i { background: var(--wine); }             /* burgundy: not done, and already answered */
.slip-x, .stop-x { border: 0; background: transparent; color: var(--quiet); font: inherit; font-size: 1.15rem; line-height: 1;
  min-width: 32px; min-height: 32px; border-radius: 50%; cursor: pointer; }
.slip-x:hover { color: var(--wine); }
.slip-x:focus-visible, .stop-x:focus-visible { outline: 2px solid var(--wine); outline-offset: 1px; }
/* The time left, a hairline that empties along the foot of the slip and stops while it is held. */
.slip::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--rule); transform-origin: left;
  transform: scaleX(0); }
.slip.is-timed::after { animation: slip-clock var(--slip-hold, 4000ms) linear forwards; }
.slip.is-held::after { animation-play-state: paused; }
.slip.is-leaving { animation: slip-out .36s cubic-bezier(.4, 0, .8, .4) forwards; pointer-events: none; }
@keyframes slip-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes slip-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes slip-clock { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* A stop stays until it is acted on: rose and burgundy, due. It stands at the foot of the screen, above any bar of acts the
   page keeps there (said.js measures it into --said-foot), nearest the button that was refused. */
.stop { position: fixed; z-index: 40; left: 50%; bottom: calc(var(--said-foot, 0px) + 16px); transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px)); box-sizing: border-box; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px; align-items: center; padding: 12px 10px 12px 16px; background: var(--wine-soft); color: var(--wine-deep);
  border: 1px solid var(--rose-deep); border-radius: 12px; font: 600 .92rem/1.45 'Manrope', system-ui, sans-serif;
  animation: stop-in .26s cubic-bezier(.2, .7, .2, 1) both; }
.stop + .stop { bottom: calc(var(--said-foot, 0px) + 16px + var(--stop-rise, 0px)); }
.stop-x { color: var(--wine); }
@keyframes stop-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }

/* The note beside the field: a look or a box that is wanted, said under it, the box ringed, until the box is touched. */
.beside { margin: 6px 0 0; color: var(--wine); font: 600 .86rem/1.4 'Manrope', system-ui, sans-serif; animation: slip-in .22s cubic-bezier(.2, .7, .2, 1) both;
  grid-column: 1 / -1; }
.is-wanted { border-radius: 12px; box-shadow: 0 0 0 1px var(--wine), 0 0 0 4px var(--wine-soft); transition: box-shadow .2s; }

/* The line on the record: where a result would have been, the reason it is not there and when, quiet, until a try succeeds. */
.record-line { margin: 6px 0 0; color: var(--quiet); font: 500 .84rem/1.4 'Manrope', system-ui, sans-serif; grid-column: 1 / -1; }

/* The second tap: the button's own place holds its question, Yes and No, until a tap or 4 s (5 s when long). */
.second-tap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; animation: slip-in .18s cubic-bezier(.2, .7, .2, 1) both; }
.second-tap-ask { color: var(--wine); font: 600 .86rem/1.35 'Manrope', system-ui, sans-serif; max-width: 40ch; }
.second-tap button { min-height: 36px; padding: 0 16px; border: 1px solid var(--wine); border-radius: 999px; font: 600 .84rem 'Manrope', system-ui, sans-serif; cursor: pointer; }
.second-tap-yes { background: var(--wine); color: var(--wine-on); }
.second-tap-no { background: transparent; color: var(--wine); }
.second-tap button:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

/* The floor's tablet has no bar that stays, so the corner is the screen's own. */
body.tablet .said-slips { top: 16px; right: 16px; }
/* The App and the Team App are phones: the slip spans the screen under the notch, inside the house's gutter. */
body.app .said-slips, body.passport .said-slips { top: calc(env(safe-area-inset-top, 0px) + 12px); left: 16px; right: 16px; width: auto; }

@media (max-width: 560px) {
  .said-slips { left: 16px; right: 16px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .slip, .stop, .beside, .second-tap { animation: said-fade .2s linear both; }
  .stop { transform: translateX(-50%); }
  .slip.is-leaving { animation: said-fade-out .3s linear forwards; }
  @keyframes said-fade { from { opacity: 0; } }
  @keyframes said-fade-out { to { opacity: 0; } }
}