@layer components {
/* ── the one bar: tabs and actions on a single line ─────────────── */
/* The level tabs sit left, the global actions and status right; the
   nav's auto-margin is the gap between them. When the line would
   overflow, fit() (app.js) folds the actions into the ⋯ menu. */
#top {
  display: flex; gap: .4rem; align-items: center;
  padding: .3rem .55rem; padding-top: calc(.3rem + env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);

  select, button {
    font: inherit; background: none; border: 1px solid var(--line);
    border-radius: calc(.4rem * var(--round)); padding: .1rem .45rem; color: inherit;
    flex: none;
  }
  .collapsed { display: none; }
}
/* the file strip: one chip per note at the focused level, + for a new one */
#files {
  display: flex; gap: .3rem; align-items: center;
  padding: .2rem .55rem; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;

  button {
    font: inherit; font-size: .8rem; background: none; color: var(--dim);
    border: 1px solid var(--line); border-radius: calc(.8rem * var(--round)); padding: 0 .55rem;
    flex: none;

    &.on { color: var(--accent); border-color: var(--accent); background: var(--chip); }
    &.unborn { border-style: dashed; opacity: .75; }   /* no file here yet */
    &.pinned::before { content: '•'; margin-right: .25rem; }
    &.lifted { position: relative; z-index: 1; background: var(--bg); box-shadow: 0 2px 6px color-mix(in oklab, var(--shade) 18%, transparent); cursor: grabbing; }
  }
  /* the boxes the note still has open at this span: a counter, not a
     word, so it wears a fill of its own and never reads as the name */
  .nopen {
    display: inline-block; margin: 0 -.2rem 0 .35rem; padding: 0 .32rem;
    border-radius: calc(.7rem * var(--round)); background: var(--line); color: var(--ink);
    font-size: .68rem; font-variant-numeric: tabular-nums; vertical-align: 1px;
  }
  input {
    font: inherit; font-size: .8rem; width: 6rem;
    border: 1px solid var(--line); border-radius: calc(.8rem * var(--round)); padding: 0 .55rem;
    background: none; color: inherit; outline: none;
  }
  .namein { flex: none; display: flex; }
}
/* the name input's completions: the strip scrolls and clips, so the
   list floats over the page like the menu does */
#files .sugg {
  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: 6rem;

  &[hidden] { display: none; }
  button {
    border: none; border-radius: calc(.35rem * var(--round)); text-align: left;
    padding: .35rem .5rem;

    &:active { background: var(--chip); }
  }
}
#local.on { border-color: var(--accent); color: var(--accent); background: var(--chip); }
/* a shadow on the side today lies, before or after the focus */
#today {
  --lean: 0 0 transparent;
  box-shadow: var(--lean);

  &[data-lies="before"] { --lean: -3px 0 4px -2px color-mix(in oklab, var(--ink) 45%, transparent); }
  &[data-lies="after"] { --lean: 3px 0 4px -2px color-mix(in oklab, var(--ink) 45%, transparent); }
}
@media (hover: hover) and (pointer: fine) {
  #today:not(:disabled):hover { box-shadow: var(--lean), inset 0 0 0 99em var(--wash); }
}
/* the focus is already today, so the button has nowhere to go */
#today.here { color: var(--dim); border-color: transparent; cursor: default; box-shadow: none; }
#net {
  font-size: .8rem; color: var(--dim);

  &::before { transition: color var(--bleed); }
  &.dirty::before { content: '●'; color: oklch(from var(--amber) calc(l + .14) calc(c * 1.25) h); }
  &.saved::before { content: '●'; color: var(--accent); }
  &.offline::before { content: '○'; color: var(--warn); }
}
#clockchip {
  background: var(--chip); border-color: var(--spent) !important;
  color: var(--spent); font-variant-numeric: tabular-nums;
}
#evchip {
  color: var(--accent); font-size: .8rem; font-variant-numeric: tabular-nums;
  max-width: 9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* an action icon (index.html's sprite): a line drawing in the text
   colour, sized to the glyphs it sits among */
svg.i {
  width: 1.15em; height: 1.15em; vertical-align: -.2em;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
#top > button:has(> svg.i):not(.collapsed) { display: inline-flex; align-items: center; padding: .2rem .3rem; }
#tabs button.tnav { padding-inline: .1rem; }
#tabs .tnav svg.i { width: .95em; height: .95em; }

/* ── tabs ───────────────────────────────────────────────────────── */
/* The five levels are tabs with short names; a tab scrolls to its
   sheet and the current level's tab is marked. Arrows flank the strip
   and step by the current level. The strip's auto-margin pushes the
   actions to the far edge. */
#tabs {
  display: flex; align-items: center; gap: .2rem;
  margin-right: auto;

  .tab, .tnav {
    font: inherit; font-size: .82rem; border: none; background: none;
    color: var(--dim); padding: .2rem .42rem; border-radius: calc(.4rem * var(--round));
    user-select: none; -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  /* the underline is the span's progress — awake time burned, the day's
     clocked ranges in --spent; paintTabs draws the gradient */
  .tab {
    flex: 0 1 auto; white-space: nowrap;
    background-repeat: no-repeat; background-position: bottom; background-size: 100% 2px;

    &.sel { color: var(--ink); font-weight: 600; background-color: var(--chip); }
  }
  .tnav:disabled { visibility: hidden; }
  .tab:active, .tnav:active { background-color: var(--chip); }
}
} /* @layer components */