/* journal.css - layout and components. Colours all come from theme.css, which
   is generated from the Windows app template so the two stay in step. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-stack);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent-300); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono-stack); font-size: .9em; }

/* --- login ------------------------------------------------------------- */
.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.gate .card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: min(360px, 100%);
  display: grid;
  gap: 14px;
}
.gate h1 { margin: 0; font-size: 20px; font-weight: 600; }
.gate input, .gate button {
  font: inherit;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--bg);
  color: var(--text);
}
.gate input:focus-visible, #q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.gate button {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  cursor: pointer;
}
.gate button:hover { background: var(--accent-600); }
.warn { margin: 0; color: var(--error); font-size: 13px; }

/* --- top bar ----------------------------------------------------------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  padding: calc(6px + env(safe-area-inset-top, 0px)) 16px 0;
  /* Sticky is left in for the login page, which is a plain scrolling page. */
  display: grid;
  gap: 2px;
  /* A grid track defaults to min-content, so the row with the search box and
     five icons would push the whole page wider than the phone rather than let
     the box shrink. Every child has to be told it may. */
  grid-template-columns: minmax(0, 1fr);
}
.bar > * { min-width: 0; }
.bar-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bar h1 { margin: 0; font-size: 16px; font-weight: 600; white-space: nowrap; }

#q {
  flex: 1 1 140px;
  min-width: 0;
  font: inherit;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--bg);
  color: var(--text);
}

.icon {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--bg);
  color: var(--text-70);
  cursor: pointer;
  font-size: 15px;
  text-decoration: none;
}
.icon:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }

/* --- filters ----------------------------------------------------------- */
.filters { display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); }

.group { min-width: 0; }
.group > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  color: var(--text-45);
  user-select: none;
}
.group > summary::-webkit-details-marker { display: none; }
/* A triangle that turns, drawn rather than imported. */
.group > summary::before {
  content: "";
  flex: none;
  width: 0; height: 0;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform .12s ease;
}
.group[open] > summary::before { transform: rotate(90deg) translateX(1px); }
.group > summary:hover { color: var(--text-70); }

.g-label { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.g-value { color: var(--text-70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Narrowed by something: say so even while shut. */
.group.filtering > summary { color: var(--accent-300); }
.group.filtering .g-value { color: var(--accent-300); font-weight: 600; }

.group[open] > .chips { padding: 2px 0 6px; }
/* Wrap rather than scroll sideways: a chip half off the edge is a chip you do
   not know exists, and the tag list is the whole point of the page. The tag row
   is capped to a couple of lines by journal.js, which adds a "+N" to open it. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.chip.more {
  border-style: dashed;
  color: var(--accent-300);
}

.chip {
  flex: none;
  font: inherit;
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: var(--bg);
  color: var(--text-70);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { background: var(--surface-hover); color: var(--text); }
.chip[aria-pressed="true"] {
  background: var(--accent-800);
  border-color: var(--accent);
  color: var(--text);
}
.chip .n { color: var(--text-45); margin-left: 5px; font-variant-numeric: tabular-nums; }

/* At the foot of the filters pane, under the filters it describes. */
.status { font-size: 12px; color: var(--text-45); padding-top: 14px; }

/* --- entries ----------------------------------------------------------- */


.area-title {
  margin: 22px 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-45);
}
.area-title:first-child { margin-top: 4px; }

.entry {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: 13px 15px;
  margin-bottom: 10px;
}
.entry-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 7px;
}
.entry-title { font-weight: 600; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.entry-title.untitled { color: var(--text-45); font-weight: 500; font-style: italic; }

/* Date and buttons travel together, pinned to the top right. Aligned to each
   other rather than to the title's baseline: a title that wraps to three lines
   would otherwise leave them at two different heights. */
.entry-meta {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.entry-date {
  flex: none;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-45);
  font-variant-numeric: tabular-nums;
}

/* Picture beside the text on a wide screen, above it on a phone, where a
   96px column would leave the lines too narrow to read. */
.entry-body { display: flex; gap: 12px; align-items: flex-start; }
.entry-lines { flex: 1; min-width: 0; }

.thumb {
  flex: none;
  width: 104px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--bg);
  display: block;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover { border-color: var(--accent-700); }

@media (max-width: 560px) {
  .entry-body { flex-direction: column; gap: 10px; }
  .thumb { width: 100%; aspect-ratio: 16 / 9; }
}

.entry ul { margin: 0; padding-left: 18px; }
/* A note can hold a long URL or a Windows path with no spaces in it, and one of
   those will push the whole page sideways on a phone if it is allowed to. */
.entry li { margin: 3px 0; color: var(--text-70); overflow-wrap: anywhere; }
.entry li.done { text-decoration: line-through; color: var(--text-45); }
.entry li .when {
  font-size: 11px;
  color: var(--text-45);
  margin-right: 5px;
  font-variant-numeric: tabular-nums;
}

mark {
  background: var(--accent-800);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0 2px;
}

.empty {
  text-align: center;
  color: var(--text-45);
  padding: 48px 16px;
}

@media (max-width: 560px) {
  .bar h1 { display: none; }
  /* Five icons plus a search box is tight on a phone; shrink the icons rather
     than squeeze the box down to a stub. */
  .bar-main { gap: 6px; }
  .icon { width: 30px; height: 30px; font-size: 14px; }
  /* Every row of the sticky bar is a row of notes you are not reading. */
  .bar { gap: 6px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .group > summary { padding: 3px 2px; }
}

/* --- tags -------------------------------------------------------------- */
.entry-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: -2px 0 8px;
}
.entry-tags:empty { display: none; }
body.hide-tags .entry-tags { display: none; }

.tag {
  font: inherit;
  font-size: 11.5px;
  line-height: 1.6;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: var(--bg);
  color: var(--text-55);
  cursor: pointer;
  white-space: nowrap;
}
.tag:hover { color: var(--text); border-color: var(--accent-700); }
/* Untagged is a to-do list, not a category: it should nag a little. */
.tag.untagged { color: var(--error); border-style: dashed; }
.tag.pick[aria-pressed="true"],
.tag.on {
  background: var(--accent-800);
  border-color: var(--accent);
  color: var(--text);
}

.warn-chip { color: var(--error); }
.chip[aria-pressed="true"].warn-chip { color: var(--text); }

/* --- per-entry actions ------------------------------------------------- */
.acts { display: flex; gap: 2px; flex: none; }
.act {
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: none;
  color: var(--text-45);
  cursor: pointer;
}
.act:hover { background: var(--surface-hover); color: var(--text); border-color: var(--divider); }
.act.on { background: var(--accent-800); border-color: var(--accent); color: var(--text); }

.entry.trashed { opacity: .62; border-style: dashed; }

/* --- the bin ----------------------------------------------------------- */
.bin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--divider);
  background: var(--surface);
  font-size: 13px;
  color: var(--text-70);
}
.bin-bar.pending { border-color: var(--error); color: var(--error); }

.danger {
  margin-left: auto;
  flex: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: var(--radius-md);
  border: 1px solid var(--error);
  background: transparent;
  color: var(--error);
  cursor: pointer;
}
.danger:hover { background: var(--error); color: var(--bg); }

.purging {
  flex: none;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px dashed var(--error);
  color: var(--error);
  white-space: nowrap;
}

/* --- comments ---------------------------------------------------------- */
.comments {
  list-style: none;
  margin: 9px 0 0;
  padding: 9px 0 0;
  border-top: 1px solid var(--divider);
  display: grid;
  gap: 6px;
}
.comments li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  /* Your words are not the document's: give them a visible edge so you never
     have to wonder which of the two you are reading. */
  border-left: 2px solid var(--accent-700);
  padding-left: 9px;
}
.c-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.c-when { flex: none; font-size: 11px; color: var(--text-45); }
.c-del {
  flex: none;
  font: inherit;
  line-height: 1;
  border: none;
  background: none;
  color: var(--text-45);
  cursor: pointer;
  padding: 0 2px;
}
.c-del:hover { color: var(--error); }

/* --- the editor -------------------------------------------------------- */
.editor {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--divider);
  display: grid;
  gap: 8px;
}
.editor-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.tags-pick { gap: 5px; }
.editor-note { margin: -2px 0 0; font-size: 12px; color: var(--text-45); }
.editor-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-45);
}
.editor-label + .editor-row { margin-top: -3px; }

.new-tag, .new-comment {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}
.new-tag:focus-visible, .new-comment:focus-visible,
.reattach-to:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.go {
  flex: none;
  font: inherit;
  font-size: 13px;
  padding: 7px 13px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  cursor: pointer;
}
.go:hover { background: var(--accent-600); }

/* --- orphans ----------------------------------------------------------- */
#orphans { max-width: 900px; margin: 0 auto; padding: 0 16px; }

.orphan-bar {
  width: 100%;
  margin-top: 12px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  padding: 9px 13px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--error);
  background: var(--surface);
  color: var(--text-70);
  cursor: pointer;
}
.orphan-bar:hover { color: var(--text); }

.orphan-box {
  margin-top: 12px;
  padding: 14px 15px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--error);
  background: var(--surface);
}
.orphan-box h2 { margin: 0 0 4px; font-size: 14px; }
.orphan-box > p { margin: 0 0 12px; font-size: 13px; color: var(--text-45); }

.orphan {
  border-top: 1px solid var(--divider);
  padding: 10px 0;
  display: grid;
  gap: 7px;
}
.orphan-what { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 14px; }
.orphan-area, .orphan-tags { font-size: 12px; color: var(--text-45); }
.orphan-comment { font-size: 13px; color: var(--text-70); border-left: 2px solid var(--accent-700); padding-left: 9px; }
.orphan-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.reattach-to {
  flex: 1;
  min-width: 140px;
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--bg);
  color: var(--text);
}
.orphan-close {
  margin-top: 10px;
  font: inherit;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--bg);
  color: var(--text-70);
  cursor: pointer;
}

/* --- dialog ------------------------------------------------------------ */
.modal-back {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(0 0 0 / .55);
  backdrop-filter: blur(2px);
}
.modal {
  width: min(420px, 100%);
  max-height: 80dvh;
  overflow-y: auto;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--divider);
  background: var(--surface);
  box-shadow: 0 20px 60px rgb(0 0 0 / .5);
}
.modal h2 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }

.modal-list {
  margin: 0 0 14px;
  padding: 10px 12px;
  list-style: none;
  display: grid;
  gap: 4px;
  max-height: 34dvh;
  overflow-y: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--bg);
  font-size: 14px;
}
.modal-list li { overflow-wrap: anywhere; }

.modal-note { margin: 0 0 18px; font-size: 13px; color: var(--text-45); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

.quiet {
  font: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--bg);
  color: var(--text-70);
  cursor: pointer;
}
.quiet:hover { background: var(--surface-hover); color: var(--text); }
.modal-actions .danger { margin-left: 0; padding: 8px 14px; }
.modal button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* --- toast ------------------------------------------------------------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px);
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 15px;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  box-shadow: 0 6px 24px rgb(0 0 0 / .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 20;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { border-color: var(--error); color: var(--error); }

/* --- touch --------------------------------------------------------------
   Last in the file on purpose. These override .act and .c-del, which are
   defined further up, and equal specificity means the later rule wins —
   sitting these next to the other media query left them silently ignored.
   Keyed off width as well as pointer type, because a phone that reports a
   fine pointer still has a thumb on it. */
@media (max-width: 560px), (pointer: coarse) {
  .act { padding: 9px 12px; font-size: 14px; }
  .c-del { padding: 4px 7px; font-size: 16px; }
  .tag { padding: 3px 10px; font-size: 12.5px; }
}

/* --- the two panes ------------------------------------------------------
   A scroll-snapping strip rather than touch handlers: the swipe is the
   browser's own horizontal scroll, so it keeps its momentum and never fights
   Android's back gesture at the screen edge. */
.tabs { display: flex; gap: 4px; }
.tab {
  flex: 1;
  font: inherit;
  /* The one decision on the whole top bar, so it gets the room. */
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 9px 10px 8px;
  border: 1px solid transparent;
  border-bottom: 2px solid var(--divider);
  background: none;
  color: var(--text-45);
  cursor: pointer;
}
.tab[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tab .n {
  margin-left: 6px;
  font-size: 12px;
  color: var(--accent-300);
  font-variant-numeric: tabular-nums;
}

/* The app is exactly one screen tall and does not scroll: each pane scrolls
   INSIDE itself. That is not tidiness, it is the difference between three
   views and one long page cut into columns — with a shared scrollbar, reading
   halfway down the journal and swiping across landed you below the end of a
   short pane, looking at nothing. Each pane now keeps its own position, so
   coming back to the notes returns you to where you were reading. */
body.app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.app .bar, body.app #orphans { flex: none; }

.panes {
  display: flex;
  flex: 1;
  /* A flex item will not shrink below its content without this, and the strip
     would push its own scrollbar off the bottom of the screen. */
  min-height: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.panes::-webkit-scrollbar { display: none; }
.pane {
  /* Full width of the strip, always: a pane narrower than the viewport makes
     the snap land between the two and the swipe feel broken. The reading
     width is capped on the contents instead. */
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  overflow-y: auto;
  /* A pane that has run out does not hand the scroll to the one behind it. */
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.pane > * { max-width: 900px; margin-inline: auto; }


/* --- discovery cards ---------------------------------------------------- */
.d-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.d-card.voted-up { border-color: var(--accent-700); }
.d-card.voted-save { border-color: var(--accent); }

/* Picture beside the headline; everything you can act on lives below it, at
   the card's own left edge. */
.d-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.d-text { flex: 1; min-width: 0; }

.d-thumb {
  flex: none;
  width: 176px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--bg);
}
.d-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.d-source {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-45);
  margin-bottom: 3px;
}
.d-card h3 { margin: 0 0 5px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.d-card h3 a { color: var(--text); overflow-wrap: anywhere; }
.d-card h3 a:hover { color: var(--accent-300); text-decoration: none; }

.d-why { margin: 0 0 7px; font-size: 13px; color: var(--text-70); }
/* Reserved on purpose, and said so: a thumb down here is about this one item,
   not about a subject he never asked for in the first place. */
.d-why.wildcard { color: var(--accent-300); font-style: italic; }

.d-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.d-tags .tag { cursor: default; }

.d-actions { display: flex; gap: 6px; align-items: center; }
.d-act {
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 7px 11px;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--bg);
  color: var(--text-70);
  cursor: pointer;
}
.d-act:hover { background: var(--surface-hover); color: var(--text); }
.d-act[aria-pressed="true"] {
  background: var(--accent-800);
  border-color: var(--accent);
  color: var(--text);
}
/* Set apart from the two thumbs: it is the one that does something
   beyond teaching the filter. */
.d-act.save { margin-left: auto; }
.d-act.save[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Already looked at. Not an opinion — just a reading position, so it is
   the quietest possible mark: the card recedes rather than being labelled. */
.d-card.opened { opacity: .68; }
.d-card.opened h3 a { color: var(--text-55); }
.d-card.opened:hover { opacity: 1; }

.dim { color: var(--text-45); font-size: 13px; }

@media (max-width: 560px) {
  .pane { padding: 12px; }
  .d-head { flex-direction: column; gap: 10px; }
  .d-thumb { width: 100%; aspect-ratio: 16 / 9; }
  .d-act { padding: 9px 13px; font-size: 14px; }
}

/* --- material icons ----------------------------------------------------- */
.mi {
  width: 1.25em;
  height: 1.25em;
  display: block;
  flex: none;
}
.icon .mi, .d-act .mi, .back .mi { width: 20px; height: 20px; }
.edge .mi { width: 18px; height: 18px; }

/* --- the filters pane and the way in ------------------------------------
   The controls are a third pane rather than a drawer: one more swipe past the
   notes they act on, which is the same gesture as everything else here. */
.tools-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tools-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.back {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--bg);
  color: var(--text-70);
  cursor: pointer;
}
.back:hover { background: var(--surface-hover); color: var(--text); }

.drawer-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

/* A tab held against the right edge: on a phone it says the swipe exists, on
   a desktop it IS the swipe. It leaves with the journal — the feed has
   nothing to filter, and the filters do not need a way into themselves. */
.edge {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 26px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--divider);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--surface);
  color: var(--text-45);
  cursor: pointer;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), opacity .18s ease;
}
.edge:hover { color: var(--text); }
/* The mirror of it, for Discovery's own settings. Same idea on the other side:
   a pane's controls are one swipe outward, and the tab says which way. */
.edge.left {
  right: auto;
  left: 0;
  border-right: 1px solid var(--divider);
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Away by default and shown only on the pane it belongs to. Stated as "when to
   appear" rather than "when to hide": with four panes the hide-list is where a
   new one gets forgotten and an arrow ends up floating over the wrong screen.
   Slid rather than blinked, and transformed rather than hidden, since
   display:none cannot be eased. */
.edge { transform: translateX(110%); opacity: 0; pointer-events: none; }
.edge.left { transform: translateX(-110%); }
body[data-pane="out"] #edge,
body[data-pane="discovery"] #setup-edge {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .edge { transition: none; }
}

/* --- what Discovery should bring ---------------------------------------- */
/* The back arrow of a LEFT-hand pane belongs on its right: it points the way
   you came, which is the opposite way round from the filters. */
.tools-head.out h2 { margin-right: auto; }

.lede { margin: 0 0 14px; font-size: 13px; color: var(--text-70); }
.lede code {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--divider);
}

.add-form { display: grid; gap: 8px; margin-bottom: 16px; }
.add-row { display: flex; gap: 8px; }
.add-form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--bg);
  color: var(--text);
}
.add-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.go:disabled { opacity: .5; cursor: default; }

.mine {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--divider);
  background: var(--surface);
}
.mine-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mine-kind {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  color: var(--text-45);
}
/* A subject and a source are not the same promise, so they do not look alike:
   one widens the filter, the other sends us somewhere new every hour. */
.mine-kind.k-topic { border-color: var(--accent-700); color: var(--accent-300); }
.mine-what { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.mine-topic { font-size: 12px; color: var(--text-45); }
.mine-x {
  margin-left: auto;
  flex: none;
  display: grid;
  place-items: center;
  padding: 4px;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-45);
  cursor: pointer;
}
.mine-x:hover { background: var(--surface-hover); color: var(--error); }
.mine-x .mi { width: 18px; height: 18px; }

.st { display: inline-block; margin-top: 6px; font-size: 12px; }
.st.wait { color: var(--text-45); font-style: italic; }
.st.good { color: var(--accent-300); }
.st.bad { color: var(--error); }

.empty.small { padding: 22px 12px; font-size: 14px; }
#reading-group { margin-top: 18px; }
#reading-list .chip { cursor: default; }
#reading-list .chip:hover { background: var(--bg); color: var(--text-70); }

@media (max-width: 560px), (pointer: coarse) {
  .mine-x { padding: 7px; }
}