/* The frame (core/layout.js, design/v5/V5Work.dc.html): the page fills the window; the floating
   sidebar sits 10px in from its edges; the toolbar floats along the top; the main area slides with
   the sidebar. */

html,
body { height: 100%; }
/* Pull-to-refresh is a touch gesture. With a trackpad or a mouse, scrolling past the top of a list
   or a note just stops there: nothing reloads, and the page doesn't stretch. Only up and down: a
   two-finger swipe sideways still goes back. (Touch keeps the browser's own, where it has one.) */
@media (hover: hover) and (pointer: fine) {
  html,
  body { overscroll-behavior-y: none; }
}

.app {
  --side-w: 240px;
  --main-l: 0px;
  /* the top row (UI-12): where its left cluster starts (the toolbar's left) and its right one ends (the
     toolbar's right inset); their widths are measured (core/layout.js: --lead-w, --tb-rw); the main area's
     right inset (Ava's pane pushing it, capsules.css) */
  --tb-l: 12px;
  --tb-rx: 12px;
  --main-r: 0px;
  position: fixed;
  inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  overflow: hidden;
}
.app.side-on:not(.side-over) { --main-l: calc(var(--side-w) + 10px); --tb-l: calc(var(--side-w) + 20px); }
/* past the sidebar's capsule while it's closed (8 after it), 10 past the sidebar while it's open */
.app.side-cap { --tb-l: 54px; }

/* ---- the sidebar: an inset glass pane; core's spaces list on top, the space's own part, the profile.
   It's laid out at its full size all the time; closed, it's hidden and its capsule shows at the top
   left, and opening uncovers it from the capsule's rect on transforms (core/side-pane.js, capsule.js:
   design/v5/V5Sidebar.dc.html). Its glass goes from the control's to the pane's; its contents fade in after. */
.side-pane {
  position: absolute;
  z-index: 30;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: var(--side-w);
  max-width: calc(100% - 20px);
  border-radius: 18px;
  visibility: hidden;
  pointer-events: none;
}
.side-pane.shown { visibility: visible; }
.side-pane.open { pointer-events: auto; }
/* its glass, the pane's, on the reveal's carrier; the capsule fading out over it is the change from the
   control's glass (a colour change would be redrawn on the page's own frames, UI-9c) */
.side-glass { overflow: hidden; }
.sp-in {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 8px;
  opacity: 0;
  /* out over 100 ms as it folds; in over 200 once it's well under way (V5Morph's sidebar, UI-9h) */
  transition: opacity 100ms var(--ease);
}
.side-pane.open .sp-in { opacity: 1; transition: opacity 200ms var(--ease) 160ms; }
@media (prefers-reduced-motion: reduce) {
  .side-pane.open .sp-in { transition-delay: 0s; }
}
.sp-top,
.sp-foot { flex: none; }
.sp-body { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; }
/* the profile is its own group: one faint hairline above it, inset 10px each side (no line above the Bin) */
.sp-line { display: block; flex: none; height: 1px; margin: 8px 10px; background: var(--sep); }
.sp-body:empty + .sp-line,
.app.side-fixed .sp-line,
.app.side-fixed .sp-foot { display: none; }

/* the capsule it grows out of: 36px at the top left, over the pane while it fades out */
.side-toggle {
  position: absolute;
  z-index: 31;
  top: 10px;
  left: 10px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 18px;
  color: var(--fg);
  /* back once the pane has nearly folded into it (V5Morph: 160 ms after 260); gone at once as it opens */
  transition: opacity 160ms var(--ease) 260ms, background-color 120ms var(--ease);
}
.side-toggle[hidden] { display: none; }
.app.side-on .side-toggle { opacity: 0; pointer-events: none; transition: opacity 100ms var(--ease), background-color 120ms var(--ease); }
/* while it's open, the collapse button at the left of the space's header */
.side-collapse {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: var(--muted);
}

/* the drag handle on its right edge: an accent line on hover or focus */
.side-split {
  position: absolute;
  z-index: 31;
  top: 28px;
  bottom: 28px;
  left: calc(var(--side-w) + 5px);
  display: flex;
  justify-content: center;
  width: 10px;
  cursor: col-resize;
  touch-action: none;
}
.side-split[hidden] { display: none; }
.side-split i { width: 2px; height: 100%; border-radius: 1px; background: var(--accent); opacity: 0; transition: opacity 120ms var(--ease); }
.side-split:hover i,
.side-split.active i { opacity: .6; }
/* the keyboard on it: the app's focus ring, round the handle (Tom's pick, UI-11: it showed its line instead) */
.side-split:focus-visible { border-radius: 5px; outline: 2px solid var(--accent); outline-offset: -2px; }

/* the spaces list, when Settings puts it at the top of the sidebar */
.sp-spaces { display: flex; flex-direction: column; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--sep); }
.sp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--fg);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.sp-ic { display: inline-flex; flex: none; color: var(--muted); }
.sp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the space you're on: selected, as the open file's row is (UI-14d: UI-11 gave it the quiet fill, which is the
   hover's, so with one space its only row looked lit up and stuck); a press shows as on any row */
.sp-row.b[aria-current="page"] { background-color: var(--sel); color: var(--fg-strong); cursor: default; }
.sp-row[aria-current="page"] .sp-ic { color: var(--accent-text); }

/* the profile, at the bottom of the sidebar */
.acct-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  color: var(--fg);
  font: 400 13px var(--font-ui);
  text-align: left;
  white-space: nowrap;
}
.acct-av {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--sel);
  color: var(--fg-strong);
  font-size: 10px;
  font-weight: 600;
}
.acct-name { flex: 1; min-width: 0; overflow: hidden; line-height: 20px; text-overflow: ellipsis; }

/* ---- the main area. It doesn't animate its left or right:
   when the sidebar toggles or Ava's pane opens, core/motion.js lays it out once and slides what's in
   it on transforms. It stacks below every floating window (z-index 1): nothing in a note, its header's
   controls included, ever paints over the sidebar, the toolbar, the Focus panel or Ava's pane */
.app-body {
  position: absolute;
  z-index: 1;
  top: 0;
  right: var(--main-r);
  bottom: 0;
  left: var(--main-l);
  display: flex;
}
.app-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 56px 12px 12px;
}
.view {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
}
/* a space whose view runs under the toolbar, with its own scroll-edge fade (the workspace) */
.app-main:has(> .view > :is(.ws-main, .focus)) { padding: 0; }
.app[data-chrome="none"] .app-main { padding: 0; }
.app[data-chrome="none"] .view { max-width: none; }
.view-error { color: var(--muted); }

/* ---- the toolbar: capsules floating along the top; the gaps between them don't catch clicks */
.app-toolbar {
  position: absolute;
  z-index: 20;
  top: 10px;
  right: var(--tb-rx);
  left: var(--tb-l);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  pointer-events: none;
}
.app-toolbar > *,
.tb-right > * { pointer-events: auto; }
.app-toolbar .tb-fill { flex: 1 1 0; min-width: 8px; pointer-events: none; }
/* the space's own buttons beside the sidebar's toggle (UI-12: Split View) */
.tb-lead { display: flex; flex: none; gap: 8px; }
.tb-lead:empty { display: none; }
/* a quiet space (focus) keeps its own tools and the status capsule, at the right on any width */
.app[data-chrome="quiet"] .tb-right { margin-left: auto; }
.app[data-chrome="quiet"] .app-toolbar > :not(.tb-right, .tb-fill),
.app[data-chrome="quiet"] .tb-right > :not(.status, .tb-mod),
.app[data-chrome="none"] .app-toolbar > :not(.tb-right),
.app[data-chrome="none"] .tb-right > :not(.status) { display: none; }

.tb-group {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  height: 36px;
  /* (a pill's padding, UI-10: its 28 px buttons 4 from every edge, 3 inside its hairline) */
  padding: 0 3px;
  border-radius: 18px;
}
.tb-group[hidden],
.tb-group:has(> .side-toggle[hidden]) { display: none; }
.tb-group > button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: var(--fg);
}
/* it can shrink, so on a phone the status capsule gives way (its words end in …) before anything is pushed off */
.tb-right { display: flex; flex: 0 1 auto; align-items: center; gap: 8px; min-width: 0; pointer-events: none; }
.tb-right > :not(.status) { flex-shrink: 0; }
.tb-group > button[hidden] { display: none; }
.tb-mod { display: flex; gap: 8px; }
.tb-mod:empty { display: none; }
.tb-round {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 18px;
  color: var(--fg);
}
.tb-round:disabled { color: var(--faint); }

/* glass buttons keep their glass under hover and press: the fill goes over it, not instead of it */
@media (hover: hover) {
  .glass.ctl.b:hover:not(:disabled) { background-color: var(--glass-ctl); background-image: linear-gradient(var(--fill), var(--fill)); }
}
.glass.ctl.b:active:not(:disabled) { background-color: var(--glass-ctl) !important; background-image: linear-gradient(var(--press), var(--press)); }
/* (its glass stays under the selected fill, as under hover: the fill goes over it, once) */
.glass.ctl.b[aria-pressed="true"],
.glass.ctl.b[aria-haspopup="menu"][aria-expanded="true"] { background-color: var(--glass-ctl); background-image: linear-gradient(var(--sel), var(--sel)); }
@media (hover: hover) {
  .glass.ctl.b[aria-haspopup="menu"][aria-expanded="true"]:hover { background-image: linear-gradient(var(--sel), var(--sel)); }
}

/* the status capsule: only when something's waiting or failing */
.status {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 420px;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  color: var(--fg);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.status[hidden] { display: none; }
.status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.status-dot { flex: none; width: 8px; height: 8px; border-radius: 4px; background: var(--task); }
.status[data-state="error"] .status-dot { background: var(--drift); }
.status-act { flex: none; height: 28px; margin-right: -10px; padding: 0 10px; border: 0; border-radius: 14px; color: var(--fg-strong); font: 600 12px var(--font-ui); }
.status-act[hidden] { display: none; }

/* dragging the sidebar's edge: no easing, so it follows the pointer */
.resizing { cursor: col-resize; -webkit-user-select: none; user-select: none; }

/* ---- a narrow window: the sidebar slides over the page; the toolbar keeps what fits */
@media (max-width: 700px) {
  .app-main { padding: 56px 8px 8px; }
  /* (the row's ends as variables: the sidebar's capsule and the capsules' own insets still win) */
  .app { --tb-l: 8px; --tb-rx: 8px; }
  .app-toolbar .tb-fill { display: none; }
  /* the search takes what's left, so the status capsule keeps its words */
  .app-toolbar .search { flex: 1 1 0; min-width: 36px; max-width: none; }
  .status { max-width: 45vw; }
}