@layer components {
/* ── toolbar ────────────────────────────────────────────────────── */
#bar {
  --face: var(--bg);
  display: flex; flex-wrap: wrap; gap: .3rem; row-gap: .3rem; align-items: center;
  position: relative;   /* the toast anchors to it */
  padding: .25rem .4rem; border-top: 1px solid var(--line); background: var(--bg);

  /* the buttons hold their places: the cycles, ◷ and ↶ on the left, a
     growing gap, then the stat, wrap (with a selection) and ⋮ on the right */
  > button {
    flex: none;

    &[data-act="undo"] { margin-right: auto; }
  }
  button {
    font: .95rem var(--mono); min-width: 2.05rem; height: 2rem;
    padding: 0 .25rem;
    border: 1px solid var(--line); border-radius: calc(.5rem * var(--round)); background: none; color: var(--ink);
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    touch-action: none;   /* the slide is ours, not a pan */

    &:disabled { color: var(--dim); border-color: transparent; box-shadow: none; }
    &:active { background: var(--chip); --face: var(--chip); }
    /* each cycle gets its own body shape, so the thumb learns them apart:
       ¶ a pill, ⇥ a right-rounded tag (indent points the way), ☐ a
       checkbox corner, ◷ a clock face */
    &[data-act="type"]   { border-radius: 1rem; }
    &[data-act="punch"]  { border-radius: 50%; }
    &[data-act="nest"]   { border-radius: .15rem 1rem 1rem .15rem; }
    /* a slidey button wears its orbit: a second line just inside the
       border — a double outline tracing the body shape, the ring a slide
       deals out (swipe.js). --face keeps the gap the button's own color. */
    &:is([data-act="type"], [data-act="nest"], [data-act="undo"],
         [data-act="wrap"], [data-act="block"]) {
      --orbit: inset 0 0 0 2px var(--face), inset 0 0 0 3px var(--line);
      box-shadow: var(--orbit);
    }
    &:hover:not(:disabled) { box-shadow: var(--orbit, 0 0 transparent), inset 0 0 0 99em var(--wash); }
    /* drag mode, a thumb's Shift (reorder.js): a mouse has the key */
    &[aria-pressed="true"] { background: var(--accent); --face: var(--accent); color: var(--bg); }
    @media (hover: hover) and (pointer: fine) { &[data-act="drag"] { display: none; } }
  }
}
#stat {
  flex: none;
  font-size: .68rem; color: var(--dim); white-space: nowrap;
  max-width: 5.5rem; overflow: hidden; text-overflow: ellipsis;

  &:empty { display: none; }
}
/* the toast floats above the bar — never clipped, so "was ☐ todo, now
   ◧ in-progress" reads whole — and wraps when it must */
#toast {
  position: absolute; right: .5rem; bottom: calc(100% + .35rem);
  max-width: calc(100% - 1rem);
  font-size: .78rem; color: var(--dim);
  background: var(--bg); border: 1px solid var(--line); border-radius: calc(.4rem * var(--round));
  padding: .2rem .5rem; box-shadow: var(--float);
  pointer-events: none;
  transition: opacity .6s;

  &.fade { opacity: 0; }
  &:empty { display: none; }
  /* one that offers its destination is a target for the seconds it lasts */
  &.link { pointer-events: auto; cursor: pointer; color: var(--ink); text-decoration: underline dotted; }
}
#date { position: absolute; width: 0; height: 0; opacity: 0; border: 0; padding: 0; }

/* ── the floating menu (long-press orbits, move targets) ────────── */
#menu {
  position: fixed; z-index: 10; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: calc(.5rem * var(--round));
  box-shadow: var(--float); padding: .2rem; min-width: 9rem;

  &[hidden] { display: none; }
  &:not([hidden]) { animation: pop .12s ease-out; }
  button {
    font: inherit; text-align: left; background: none; border: none;
    color: var(--ink); padding: .45rem .6rem; border-radius: calc(.35rem * var(--round));
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    display: flex; align-items: baseline;

    &:active { background: var(--chip); }
  }
  kbd { margin-left: auto; padding-left: 1em; font: .7rem var(--mono); color: var(--dim); }   /* its Cmd-K path */
}
@keyframes pop { from { opacity: 0; transform: translateY(.3rem) scale(.98); } }

/* ── a day done: confetti in the note's hue (cheer.js) ───────────── */
.confetti { position: fixed; left: 50%; top: 35%; z-index: 40; pointer-events: none; }
.confetti i { position: absolute; width: .5rem; height: .3rem; }

/* ── the key overlay (Cmd/Ctrl-K: the action bar as a key sequence) ─ */
/* A which-key panel — the bar's buttons (then a pie's options) as rows,
   each led by the letter that picks it. Floats above the bar, centered;
   it mirrors what a hold-and-slide would offer for the caret's row. */
@scope (#keys) {
  :scope {
    position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom) + 4rem);
    display: grid; grid-template-columns: auto auto 1fr; gap: .15rem .6rem;
    align-items: baseline; max-width: min(22rem, 92vw);
    background: var(--bg); border: 1px solid var(--line); border-radius: calc(.6rem * var(--round));
    box-shadow: 0 4px 18px color-mix(in oklab, var(--shade) 20%, transparent); padding: .6rem .7rem;
    user-select: none; -webkit-user-select: none;

    &[hidden] { display: none; }
    &:not([hidden]) { animation: pop .12s ease-out; }
  }
  .title { grid-column: 1 / -1; color: var(--dim); padding-bottom: .2rem; }
  kbd {
    font: inherit; font-weight: 600; justify-self: center; min-width: 1.1em;
    text-align: center; padding: 0 .3em; border-radius: calc(.3rem * var(--round));
    background: var(--chip); color: var(--ink);
  }
  .glyph { color: var(--ink); }
  .label { color: var(--dim); }
  .now:is(.glyph, .label) { color: var(--ink); font-weight: 600; }
}
} /* @layer components */