/* Outline and inline formatting: the outline panel, rows, notes, the banner, search and format
   toolbars, the touch toolbar and the palette. Loaded after app.css; the shared base (buttons,
   shared :root theme vars, [hidden]) stays in app.css. */

/* Outline theme palette: highlight background and the fixed text colors (the shared theme vars are in app.css) */
:root {
  --hi: #fff3bf;
  --fmt-color-red: #b91c1c; --fmt-color-orange: #b45309; --fmt-color-yellow: #8a6d00;
  --fmt-color-green: #15803d; --fmt-color-blue: #1d4ed8; --fmt-color-purple: #7e22ce;
}
@media (prefers-color-scheme: dark) {
  :root {
    --hi: #4a3f10;
    --fmt-color-red: #f87171; --fmt-color-orange: #fb923c; --fmt-color-yellow: #facc15;
    --fmt-color-green: #4ade80; --fmt-color-blue: #60a5fa; --fmt-color-purple: #c084fc;
  }
}

/* view banner, zoom breadcrumbs and the search toolbar */
#view-banner {
  margin: 6px 10px 0; padding: 6px 10px; background: var(--soft); border: 1px solid var(--border);
  border-radius: 6px; display: flex; align-items: center; gap: 8px; font-size: 13px;
}
#view-banner-text { flex: 1; }
#view-banner button { border: none; background: none; padding: 0 6px; min-height: 28px; }
#crumbs { padding: 6px 12px 0; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px; }
#crumbs button { border: none; background: none; padding: 0 2px; min-height: 0; color: var(--accent); font-size: 13px; }
#toolbar { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; padding: 8px 10px; }
#search {
  flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg);
}
#hide-done-label { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); white-space: nowrap; }
#btn-add { white-space: nowrap; }

/* format toolbar: always visible above the outline, one compact wrapping row */
#format-toolbar {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 0 10px 6px; min-width: 0;
}
#format-toolbar > * { flex: 0 0 auto; }
#format-toolbar button, #format-toolbar select { min-height: 36px; min-width: 36px; padding: 3px 6px; }
#format-toolbar select {
  font: inherit; max-width: 9.5em; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--fg); cursor: pointer;
}
#format-toolbar select:disabled { opacity: .5; cursor: default; }
#format-toolbar button.fmt-btn-text { font-size: 15px; line-height: 1; }
#format-toolbar button.fmt-btn-text.fmt-bold { font-weight: 800; }
#format-toolbar button.fmt-btn-text.fmt-italic { font-style: italic; }
#format-toolbar button.fmt-btn-text.fmt-underline { text-decoration: underline; }
#format-toolbar :focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* outline */
#outline { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 40vh; -webkit-overflow-scrolling: touch; }
#outline ul { list-style: none; margin: 0; padding: 0 0 0 18px; }
#outline > ul { padding-left: 0; }
#outline .row { display: flex; align-items: flex-start; gap: 2px; border-radius: 4px; }
#outline .row:hover { background: var(--hover); }
#outline .row.focus-row { background: var(--hover); }
.toggle, .bullet {
  flex: 0 0 auto; border: none; background: none; padding: 0; min-height: 24px; min-width: 22px;
  display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px;
}
.bullet { color: var(--muted); font-size: 16px; cursor: zoom-in; border-radius: 50%; }
.bullet:hover { background: var(--border); }
.toggle:hover { background: none; color: var(--fg); }
.toggle { font-size: 17px; color: var(--fg); opacity: .55; }    /* the collapse arrow: visible, not shouting */
.toggle:empty { opacity: 0; }
@media (pointer: coarse) { .toggle { min-width: 30px; min-height: 30px; font-size: 19px; } }
.row input[type=checkbox] { flex: 0 0 auto; width: 16px; height: 16px; margin: 5px 4px 0 0; cursor: pointer; accent-color: var(--accent); }
.item-main { flex: 1; min-width: 0; padding: 2px 0; }
.item-text {
  display: block; padding: 1px 2px; border-radius: 3px; outline: none; white-space: pre-wrap;
  word-break: break-word; min-height: 1.4em; cursor: text;
}
.item-text:focus { outline: 1px solid var(--accent); background: var(--bg); }
.item-text .tag { color: var(--accent); cursor: pointer; }
.item-text .tag:hover { text-decoration: underline; }
.item-text strong, .note strong { font-weight: 800; }
.done > .row .item-text { color: var(--done); text-decoration: line-through; }
.done > .row input[type=checkbox] { opacity: .7; }
.ancestor > .row .item-text { color: var(--done); }
.hit > .row .item-text { background: var(--hi); }
.note {
  margin: 1px 0 2px 2px; padding: 2px 4px; font-size: 12.5px; color: var(--muted);
  white-space: pre-wrap; word-break: break-word; border-radius: 3px; cursor: text; outline: none;
}
.note:hover { background: var(--soft); }
.note:focus { outline: 1px solid var(--accent); background: var(--bg); color: var(--fg); }
.note-empty { margin: 1px 0 2px 2px; padding: 1px 4px; font-size: 12.5px; color: var(--done); cursor: text; }
.root-heading { font-weight: 600; font-size: 16px; padding: 6px 0 4px; word-break: break-word; }

/* "+ note" sits under the text (never on top of it); Shift+Enter opens a note, so the button only
   shows on the active row of touch screens, which have no Shift+Enter */
.add-note { display: none; border: none; background: none; color: var(--done); font-size: 11.5px; padding: 0 4px; min-height: 0; line-height: 1.5; cursor: pointer; }
.add-note:hover { color: var(--accent); }
@media (pointer: coarse) { .item-text:focus ~ .add-note { display: inline-block; } }

/* fixed format palette: text colors and highlights, theme-aware. A highlight sets a readable
   foreground; an explicit .fmt-color-* (declared after the highlights) wins over it. */
.fmt-highlight-red { background-color: #fecaca; color: #450a0a; }
.fmt-highlight-orange { background-color: #fed7aa; color: #431407; }
.fmt-highlight-yellow { background-color: #fef08a; color: #422006; }
.fmt-highlight-green { background-color: #bbf7d0; color: #052e16; }
.fmt-highlight-blue { background-color: #bfdbfe; color: #172554; }
.fmt-highlight-purple { background-color: #e9d5ff; color: #2e1065; }
@media (prefers-color-scheme: dark) {
  .fmt-highlight-red { background-color: #7f1d1d; color: #fee2e2; }
  .fmt-highlight-orange { background-color: #7c2d12; color: #ffedd5; }
  .fmt-highlight-yellow { background-color: #713f12; color: #fef9c3; }
  .fmt-highlight-green { background-color: #14532d; color: #dcfce7; }
  .fmt-highlight-blue { background-color: #1e3a8a; color: #dbeafe; }
  .fmt-highlight-purple { background-color: #581c87; color: #f3e8ff; }
}
/* an explicit text color wins over a highlight's own foreground */
#outline .fmt-color-red { color: var(--fmt-color-red); }
#outline .fmt-color-orange { color: var(--fmt-color-orange); }
#outline .fmt-color-yellow { color: var(--fmt-color-yellow); }
#outline .fmt-color-green { color: var(--fmt-color-green); }
#outline .fmt-color-blue { color: var(--fmt-color-blue); }
#outline .fmt-color-purple { color: var(--fmt-color-purple); }

/* touch toolbar */
#touch-toolbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 50;
  display: flex; gap: 2px; padding: 4px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 4px 16px #0003;
}
#touch-toolbar button { min-width: 38px; min-height: 38px; padding: 0; font-size: 16px; border: none; background: none; }
#touch-toolbar button:hover { background: var(--hover); }

/* touch: outline rows get bigger tap targets (the shell buttons' touch rule is in app.css) */
@media (pointer: coarse) {
  .toggle, .bullet { min-height: 32px; min-width: 30px; }
  .row input[type=checkbox] { width: 20px; height: 20px; margin-top: 7px; }
  .item-main { padding: 6px 0; }
  .item-text { padding: 4px 2px; }
}

/* multi-item keyboard selection (Shift+Up/Down); last in the sheet so it wins over hover/focus */
#outline .row.sel {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}