@layer components {
/* ── the overlays ──────────────────────────────────────────────────── */
/* Every dialog is a body that scrolls over a footer that stays in view.
   The two fill it, so a press lands on the dialog itself only on its
   backdrop (modal.js). */
dialog {
  border: 1px solid var(--line); border-radius: calc(.6rem * var(--round)); padding: 0;
  max-width: 94vw; max-height: 90vh; max-height: 90dvh;

  &[open] { display: flex; flex-direction: column; }
  &::backdrop { background: color-mix(in oklab, var(--bg) 93%, transparent); }
  > .mbody { overflow: auto; overscroll-behavior: contain; padding: 1rem 1rem .6rem; }
  > .mfoot {
    text-align: right; padding: .6rem 1rem 1rem; border-top: 1px solid var(--line);

    button { font: inherit; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: calc(.4rem * var(--round)); background: none; color: inherit; }
  }
}
/* the stack stays put behind an open one */
:root:has(dialog:modal) #panes { overflow: hidden; }

/* ── settings ───────────────────────────────────────────────────── */
#settings {
  h3 { margin: 0 0 .8rem; font-size: 1rem; }
  label { display: block; }
  .settingsnote { color: var(--dim); font-size: .8rem; margin: .3rem 0 .9rem; max-width: 18rem; }
  .dows {
    display: flex; flex-wrap: wrap; gap: .45rem; font-size: .8rem; margin-top: .3rem;

    label { display: flex; align-items: center; gap: .15rem; }
  }
  input[type="time"] { font: inherit; font-size: .85rem; }
  /* the hold-and-slide demo wears the same slidey double-outline as a bar
     button, and the slide is ours, not a pan */
  .lpdemo {
    --face: var(--bg);
    width: 2.6rem; height: 2.6rem; padding: 0; margin: 0 0 .9rem;
    border: 1px solid var(--line); border-radius: 50%; background: none;
    font: 1.1rem var(--mono); color: var(--ink);
    touch-action: none; user-select: none; -webkit-user-select: none;
    --orbit: inset 0 0 0 2px var(--face), inset 0 0 0 3px var(--line);
    box-shadow: var(--orbit);

    &:hover { box-shadow: var(--orbit), inset 0 0 0 99em var(--wash); }
  }
}

/* ── the search overlay (⌕) ────────────────────────────────────────── */
/* lib/query's hits, each under the § chain it lives in: the shape `bs q`
   prints, with every hit a way into its file. */
#find { width: min(34rem, 94vw); }
#findform {
  display: flex; gap: .4rem;

  input {
    font: inherit; flex: 1; min-width: 0; padding: .4rem .6rem;
    border: 1px solid var(--line); border-radius: calc(.4rem * var(--round));
    background: none; color: inherit;
  }
  button { font: inherit; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: calc(.4rem * var(--round)); background: none; color: inherit; }
}
/* the language, while there is nothing else to read */
.findnote { color: var(--dim); font-size: .78rem; margin: .4rem 0 0; line-height: 1.4; }
#find:has(#findout > *) .findnote { display: none; }
#findout { margin-top: .7rem; }
.fcount { color: var(--dim); font-size: .78rem; padding-bottom: .3rem; }
.fwait, .fnone { color: var(--dim); padding: 1.5rem 0; text-align: center; }
.ferr { color: var(--warn); padding: 1rem 0; }
.fgroup {
  padding: .45rem 0; border-top: 1px solid var(--line);

  /* the span this file covers, after the note it belongs to */
  .fhead {
    display: flex; gap: .5rem; align-items: baseline; font-size: .82rem;

    b { font-weight: 600; }
    span { color: var(--dim); }
  }
  /* a § the hit below it sits in, printed where the chain diverges */
  .fpath { color: var(--dim); font-size: .82rem; padding: .1rem 0 0 1rem; }
  /* a hit past its window says so, as its row does */
  .late { color: var(--dim); font-size: .78rem; font-style: italic; &.over { color: var(--warn); } }
  .fhit {
    display: block; width: 100%; text-align: left; font: inherit;
    background: none; border: none; color: var(--ink);
    padding: .1rem .2rem .1rem 1rem; border-radius: calc(.3rem * var(--round));

    &:active, &:hover { background: var(--chip); }
  }
}
body.hues .fgroup .fhead b { color: oklch(from var(--hue-ink) l c var(--hue)); }

/* ── the calendar / agenda overlay ─────────────────────────────────── */
#cal { width: min(28rem, 94vw); }
/* the overlay's name chips: tap to mute a note out of the merged view */
#calnames {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem;

  &:not(:has(button + button)) { display: none; }   /* one note: nothing to filter */
  button {
    font: inherit; font-size: .8rem; color: var(--accent);
    border: 1px solid var(--accent); border-radius: calc(.8rem * var(--round)); padding: 0 .55rem;
    background: var(--chip);

    &.off { color: var(--dim); border-color: var(--line); background: none; }
    .spark {
      display: inline-flex; align-items: flex-end; gap: 1px; height: .7em; margin-left: .4em;
      i { width: 2px; background: currentColor; opacity: .7; }
    }
  }
}
.calhead {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem;

  span { font-size: 1rem; font-weight: 600; }
}
.calnav { font: inherit; font-size: 1.1rem; line-height: 1; padding: .1rem .5rem; border: 1px solid var(--line); border-radius: calc(.4rem * var(--round)); background: none; color: inherit; }
.calwait { color: var(--dim); padding: 2rem 0; text-align: center; }
.cgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cwd { font-size: .7rem; color: var(--dim); text-align: center; padding-bottom: .15rem; }
.cday {
  display: flex; flex-direction: column; gap: 1px; min-height: 3.4rem;
  text-align: left; min-width: 0;
  border: 1px solid var(--line); border-radius: calc(.35rem * var(--round));
  color: inherit; font: inherit; padding: .12rem .2rem; cursor: pointer;
  /* logged minutes tint the cell, scaled 0..1 into the chip green */
  background: color-mix(in srgb, var(--accent) calc(var(--load) * 42%), transparent);

  &.dim { opacity: .4; }
  &.today { border-color: var(--rubric, var(--accent)); border-width: 2px; }
  &.focus { outline: 2px solid var(--amber); outline-offset: -2px; }
  .ctop { display: flex; align-items: baseline; justify-content: space-between; }
  .cn { font-size: .8rem; font-variant-numeric: tabular-nums; }
  .cop { font-size: .62rem; color: var(--dim); }
  /* the day's own prose: a ¶ beside the date, darkening with how much of
     it there is. It sits by the number so it never pairs with the count */
  .cwr { font-size: .62rem; margin: 0 auto 0 .15rem; opacity: calc(.3 + .7 * var(--w)); }
  .cevs { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; }
  .cev {
    font-size: .6rem; line-height: 1.25; color: var(--accent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

    /* a timed task on the month grid reads in ink, an event in accent */
    &.task { color: var(--ink); }
  }
  .cmore { font-size: .58rem; color: var(--dim); }
  /* the day's clock shape, pinned to the cell's foot: a bar per block in
     its note's hue, translucent, so an overlap reads darker, and the
     logged line under them. Percent geometry, so it holds at any width */
  .cstrip {
    position: relative; display: block; height: 8px; margin-top: auto;
    border-top: 1px solid var(--line);

    i { position: absolute; }
    .cbar {
      top: 0; height: 5px; min-width: 1px; border-radius: 1px;
      background: color-mix(in srgb, var(--ink) 45%, transparent);
    }
    .cbar.pt { width: 2px; background: color-mix(in srgb, var(--ink) 70%, transparent); }
    .clog {
      bottom: 0; height: 2px; min-width: 1px; background: var(--spent);

      &.off { background: var(--amber); }
      &.none { background: var(--dim); }
    }
  }
}
#calagenda { margin-top: 1rem; border-top: 1px solid var(--line); }
.aday {
  padding: .4rem 0; border-bottom: 1px solid var(--line);

  &.today .ahead b { color: var(--accent); }
  /* the retro half reads as quiet history; a far-off day's label quiets too */
  &.past .ahead b { color: var(--dim); }
  &.far .ahead b { color: var(--dim); font-size: .85rem; }
}
.ahead {
  display: flex; align-items: baseline; gap: .5rem;

  b { font-weight: 600; font-variant-numeric: tabular-nums; }
}
.acount { color: var(--dim); font-size: .82rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.aev {
  font-size: .88rem; padding: .1rem 0 0 1rem; color: var(--ink);

  &.span { color: var(--dim); }
  &.task.done { color: var(--dim); text-decoration: line-through; }
  .aat { color: var(--accent); font-variant-numeric: tabular-nums; }
  /* the rule badge on a collapsed recurrence: '↻ mwf' after the one shown */
  .rbadge { color: var(--alert); font-size: .78rem; font-style: normal; }
  .rbadge.over { color: var(--warn); }
}
/* how a day of notes reads in the list: its first line, one line deep */
.awr {
  font-size: .82rem; padding: .1rem 0 0 1rem; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asect { font-size: .7rem; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; padding: .7rem 0 .1rem; }
/* a projected (ghost) occurrence reads faint: a preview, not a record */
.cday .cev.ghost, .aev.ghost { opacity: .55; font-style: italic; }
.calempty { color: var(--dim); padding: 1rem 0; text-align: center; }
} /* @layer components */