/* What just happened, and "Back" (js/back.js): one note at the top left of the view, in ink,
   tilted a little like a slip of paper laid on the page. It names what happened to the question
   that just left and takes it back; a scribbled line under it runs out. It never lies over the
   answers, which are at the right. */
.says-host { position: absolute; z-index: 30; pointer-events: none; }
.says-page { position: fixed; }
.says {
  position: relative; pointer-events: auto; display: flex; align-items: center; gap: var(--s-3); width: max-content; max-width: min(430px, calc(100vw - 28px));
  padding: 9px 10px 13px 14px; border-radius: 10px 13px 9px 12px; background: var(--fg); color: var(--bg);
  box-shadow: 0 2px 3px rgb(20 30 25 / .12), 0 12px 26px -10px rgb(20 30 25 / .5);
  rotate: -.7deg; transform-origin: 100% 50%; animation: says-in 260ms cubic-bezier(.25, 1.4, .5, 1);
}
@keyframes says-in { from { opacity: 0; translate: -10px -8px; } }
.says-words { min-width: 0; display: grid; gap: 2px; }
.says-words b { font: 800 1.02rem/1.15 var(--display); letter-spacing: -.005em; overflow-wrap: anywhere; }
.says-words span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--t-sm)/1.3 var(--font); opacity: .8; }
.says-back { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 10px 0 8px; border: 0; border-radius: var(--r-pill); background: var(--bg); color: var(--fg); font: 700 var(--t-sm)/1 var(--font); transition: scale 100ms ease-out; }
.says-back:hover { filter: brightness(.94); }
.says-back:active { scale: .96; }
.says-back:disabled { opacity: .5; }
.says-back:focus-visible { outline: 3px solid var(--bg); outline-offset: 2px; }
.back-arrow { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.says-back kbd { min-width: 20px; padding: 3px 5px; border-radius: 5px; background: color-mix(in srgb, var(--fg) 10%, transparent); font: 500 .7rem/1 var(--mono); text-align: center; }
@media (pointer: coarse) { .says-back kbd { display: none; } .says-back { min-height: 44px; padding-inline: 12px 14px; } }
/* The time left runs out along a scribbled line. */
.back-line { position: absolute; left: 14px; bottom: 4px; width: calc(100% - 28px); height: 6px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .6; overflow: visible; pointer-events: none; }
.back-line path { vector-effect: non-scaling-stroke; stroke-dasharray: 100; animation: back-time var(--back-ms, 4s) linear forwards; }
.says[data-paused] .back-line path { animation-play-state: paused; }
@keyframes back-time { to { stroke-dashoffset: 100; } }
/* The line is the clock, not an ornament: it keeps running where motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  .says.says { animation: none !important; }
  .says.says .back-line path { animation-duration: var(--back-ms, 4s) !important; }
}
/* In the Focus window: its own top left corner, over the tab of the top bar for these few seconds. */
.focus-says { top: 10px; left: 12px; }
.focus-says .says { max-width: min(430px, calc(100cqi - 24px)); }

/* ---- a question leaves: one calm motion that shows where it goes ---- */
/* In a list the row that left stays for a moment as a ghost in its old place: an answered one
   slides off to the side, one that was put off (Later, asked to explain) sinks towards the
   "Later" group at the end. The rows below move up once it is on its way (inbox.js). */
.inbox-groups { position: relative; }
.inbox-row.is-leaving { position: absolute; z-index: 0; margin: 0; pointer-events: none; animation: row-answered 300ms cubic-bezier(.4, 0, .7, .2) forwards; }
.inbox-row.is-leaving[data-leave="later"] { animation-name: row-later; }
@keyframes row-answered { to { opacity: 0; translate: 72px -6px; rotate: 1.2deg; } }
@keyframes row-later { to { opacity: 0; translate: 0 64px; scale: .96; } }
/* In the Focus window the same two motions, a little longer than the window's own steps. */
.focus-card[data-out="sent"] { animation: focus-leave-answered 300ms cubic-bezier(.4, 0, .7, .2) forwards; }
.focus-card[data-out="later"] { animation: focus-leave-later 300ms cubic-bezier(.4, 0, .7, .2) forwards; }
.focus-card[data-in="sent"], .focus-card[data-in="later"] { animation-delay: 170ms; animation-fill-mode: backwards; }
@keyframes focus-leave-answered { to { opacity: 0; transform: translate3d(0, -64px, 0) rotate(-.6deg); } }
@keyframes focus-leave-later { to { opacity: 0; transform: translate3d(0, 88px, 0) scale(.95); } }
@media (prefers-reduced-motion: reduce) {
  .inbox-row.is-leaving.is-leaving { animation: row-fade 160ms linear forwards !important; }
  .focus .focus-card[data-out="sent"], .focus .focus-card[data-out="later"] { animation: row-fade 160ms linear forwards !important; }
}
@keyframes row-fade { to { opacity: 0; } }

/* ---- Answered: the group at the very end of the inbox ---- */
/* Folded to its heading until it is opened. Then every answer is a slim row: what was asked, what
   was said, who asked and when, and "Take back". Solid lines: these are decided. */
.inbox-group-answered { gap: var(--s-2); }
.inbox-group-answered .inbox-sender { color: var(--muted); }
.inbox-group-answered .inbox-sender::after { content: none; }
.inbox-answered-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: left; }
.inbox-answered-toggle::after { content: ""; flex: 1; order: 2; border-top: 1px solid var(--line-strong); }
.inbox-answered-toggle b { order: 3; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.inbox-answered-toggle:hover { color: var(--fg); }
.inbox-group-answered .inbox-avatar { background: none; color: var(--muted); outline: 1px solid var(--line-strong); outline-offset: -1px; }
.inbox-done { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-height: 60px; padding: 8px 12px 8px 14px; border-radius: 6px; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); scroll-margin: 72px 0 28px; }
.inbox-done:focus { outline: none; }
.inbox-done-mark { display: grid; place-items: center; color: var(--muted); }
.inbox-done-mark .sketch { width: 26px; height: 26px; stroke-width: 1.7; }
.inbox-done-text { min-width: 0; display: grid; gap: 2px; }
.inbox-done-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 1.02rem/1.25 var(--display); letter-spacing: -.005em; }
.inbox-done-sub { display: flex; align-items: center; gap: var(--s-3); min-width: 0; overflow: hidden; white-space: nowrap; font-size: var(--t-sm); color: var(--muted); }
.inbox-done-sub b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--accent); }
.inbox-done-who { flex: none; display: inline-flex; align-items: center; gap: 5px; }
.inbox-done-who .doodle { width: 16px; height: 16px; }
.inbox-done-ago { flex: none; font-size: var(--t-xs); color: var(--faint); }
.inbox-done-closed { flex: none; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.inbox-takeback { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--fg); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.inbox-takeback:hover { border-color: var(--fg); }
.inbox-takeback:disabled { opacity: .5; }
@container rows (max-width: 520px) {
  .inbox-done { grid-template-columns: 26px minmax(0, 1fr); }
  .inbox-takeback { grid-column: 2; justify-self: start; }
  .inbox-done-who { display: none; }
}

/* A phone has no free corner: while a note is up, the view gives it a strip at its lower edge
   (above the tab bar; the composer moves up with the view), so the note lies over nothing. */
@media (max-width: 860px) {
  body[data-says] main { margin-bottom: 72px; }
  .says-page .says { rotate: 0deg; max-width: calc(100vw - 16px); padding-block: 7px 11px; }
  .focus-says .says { max-width: calc(100cqi - 120px); }
}
/* For a moment a new note lets taps through, so a second tap meant for the next answer cannot hit "Back". */
.says[data-fresh] { pointer-events: none; }

/* What went wrong with an answer on a row: on the row's lower edge, in full, never cut by the text's fixed lines. */
.inbox-row-error { position: absolute; z-index: 2; left: 76px; bottom: 6px; max-width: calc(100% - 96px); padding: 3px 9px; border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--deny) 40%, var(--surface)); font-weight: 600; line-height: 1.3; }
.inbox-row-error[hidden] { display: none; }