/* The sections drawer (sections.js): slides out from the left, beside the
   laptop menu, over the page on phones. */
.sections-drawer {
  position: fixed; top: 0; bottom: 0; left: var(--side-w, 0px); z-index: 20;
  width: min(320px, 85vw); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--card); border-radius: 0 12px 12px 0; box-shadow: 0 0 40px rgba(0, 0, 0, .18);
  transform: translateX(-100%); visibility: hidden;
  transition: transform .25s ease, visibility .25s;
}
body[data-drawer="sections"] .sections-drawer, .sections-drawer.dragging { transform: none; visibility: visible; }
.sections-drawer.dragging { transition: none; }
.sections-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 8px 8px; }
.sections-head h2 { font-size: 1.15rem; margin: 0; }
.sections-drawer button {
  font: inherit; width: auto; margin: 0; border: 0; background: none; color: inherit; cursor: pointer;
}
.sections-close { padding: 0; color: var(--muted) !important; text-decoration: underline; font-weight: 400 !important; }
.sections-drawer .tree { list-style: none; margin: 0; padding: 0; }
.tree-row {
  display: flex; align-items: center; gap: 2px;
  padding-left: calc(var(--depth, 0) * 18px);
}
.sections-drawer .tree-pick {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px;
  border-radius: 10px; text-align: left; font-weight: 600; overflow-wrap: anywhere;
}
.tree-pick svg, .tree-fold svg, .tree-more svg, .sections-new svg { width: 18px; height: 18px; flex: none; }
.tree-pick svg { color: var(--muted); }
.sections-drawer .tree-pick:hover, .sections-drawer .tree-pick:focus-visible { background: var(--bg); }
.sections-drawer .tree-pick[aria-current="true"] { background: var(--accent); color: var(--accent-text); }
.tree-pick[aria-current="true"] svg { color: inherit; }
.sections-drawer .tree-fold, .sections-drawer .tree-more {
  display: inline-flex; flex: none; padding: 8px 4px; border-radius: 8px; color: var(--muted);
}
.sections-drawer .tree-fold { padding: 8px 2px; }
.tree-fold svg { transition: transform .15s ease; }
.tree-fold[aria-expanded="true"] svg { transform: rotate(90deg); }
.tree-fold:disabled { visibility: hidden; }
/* The top two (All, Not in a section) have no fold arrow: line them up with
   the sections' names anyway. */
.tree > li > .tree-row:not(:has(.tree-fold)) { padding-left: 22px; }
.sections-drawer .tree-more:hover, .sections-drawer .tree-more:focus-visible,
.sections-drawer .tree-more[aria-expanded="true"] { color: var(--text); background: var(--bg); }
/* A small dropdown under a section's ⋯. */
.tree-actions {
  position: absolute; z-index: 5; top: 100%; right: 0; margin-top: 2px; min-width: 140px;
  display: flex; flex-direction: column; padding: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.sections-drawer .tree-actions button { width: 100%; padding: 9px 12px; border-radius: 6px; text-align: left; font-weight: 500; }
.sections-drawer .tree-actions button:hover { background: var(--bg); }
.sections-drawer .tree-actions button:last-child { color: var(--error); }
.tree-empty { color: var(--muted); font-size: .92rem; padding: 10px 10px 10px 22px; }
.sections-drawer .sections-new {
  display: flex; align-items: center; gap: 10px; margin: 8px 0 0 22px; padding: 10px;
  border-radius: 10px; color: var(--accent); font-weight: 600;
}
.sections-drawer .sections-new:hover { background: var(--bg); }
.sections-msg { color: var(--error); font-size: .92rem; margin: 8px 10px; }
@media (prefers-reduced-motion: reduce) { .sections-drawer, .tree-fold svg { transition: none; } }

/* The backdrop behind it on phones (Tasks has its own; Notes gets one from
   sections.js). */
.drawer-backdrop { display: none; }
body[data-drawer] .drawer-backdrop {
  display: block; position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, .3);
}
/* Phones: the button is just its icon; the drag is the main way in. */
@media (max-width: 959px) {
  .sections-open .sections-label { display: none; }
}
/* Laptops: the list moves over to make room instead of being covered. */
@media (min-width: 960px) {
  /* Any drawer: the page stays usable beside it, nothing greyed out. */
  body[data-drawer] .drawer-backdrop { display: none; }
  main { transition: margin-left .25s ease, margin-right .25s ease; }
  .sections-open .sections-label {
    max-width: 16em; overflow: hidden; text-overflow: ellipsis;
  }
}

/* Between sections: a gap that, when you point at it, shows a line with a
   round + at its left to add a section there. Touch screens have no
   pointing, so they use the + beside each section and New section instead. */
.tree-gap { position: relative; height: 8px; margin: -2px 0 -2px calc(var(--depth, 0) * 18px + 22px); }
.sections-drawer .tree-gap button {
  position: absolute; inset: 0; display: flex; align-items: center; width: 100%; padding: 0;
  opacity: 0; transition: opacity .12s;
}
.sections-drawer .tree-gap button::after {
  content: ""; flex: 1; height: 2px; margin-left: 4px; border-radius: 1px; background: var(--accent);
}
.tree-gap button svg {
  width: 16px; height: 16px; padding: 2px; flex: none; box-sizing: border-box;
  border-radius: 50%; background: var(--accent); color: var(--accent-text); stroke-width: 3;
}
.sections-drawer .tree-gap button:hover, .sections-drawer .tree-gap button:focus-visible { opacity: 1; }
@media (hover: none) { .tree-gap { display: none; } }
.tree.reordering .tree-gap { visibility: hidden; }
.sections-drawer .tree-add { padding: 8px 2px; }
.tree { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tree-row[data-id] { position: relative; border-radius: 10px; }
.tree-row.moving { opacity: .4; }
.tree.reordering .tree-row { cursor: grabbing; }
.tree-row.drop-inside { background: var(--chip); outline: 2px solid var(--accent); outline-offset: -2px; }
.tree-row.drop-before::before, .tree-row.drop-after::after {
  content: ""; position: absolute; left: calc(var(--depth, 0) * 18px + 22px); right: 0; height: 3px;
  border-radius: 2px; background: var(--accent); pointer-events: none;
}
.tree-row.drop-before::before { top: -2px; }
.tree-row.drop-after::after { bottom: -2px; }
/* Naming a new section in place (section-moves.js). */
.tree .section-naming { padding: 4px 4px 4px calc(var(--depth, 0) * 18px + 22px); }
.sections-drawer .section-naming input { padding: 9px 10px; font-weight: 600; }
/* Phones close it with a swipe or a tap beside it, so no Close button. */
@media (max-width: 959px) { .sections-close { display: none; } }
/* Laptops manage sections from the menu (nav.js), so no drawer or button. */
@media (min-width: 960px) { .sections-drawer, .sections-open { display: none !important; } }

/* Section icons (section-moves.js): the picker, and the icon by the section
   name on each task and note. */
.icon-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px;
  margin: 4px 4px 8px 22px; padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
.icon-picker button {
  display: inline-flex; align-items: center; justify-content: center; width: auto; height: 34px;
  margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
}
.icon-picker button svg { width: 18px; height: 18px; }
.icon-picker button:hover, .icon-picker button:focus-visible { background: var(--bg); color: var(--text); }
.icon-picker button[aria-selected="true"] { background: var(--accent); color: var(--accent-text); }
.section-tag { display: inline-flex; align-items: center; gap: 4px; vertical-align: -2px; }
.section-tag svg { width: 14px; height: 14px; flex: none; }
.icon-colours { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 8px; }
.icon-picker .icon-colours button {
  width: 22px; height: 22px; border-radius: 50%; background: var(--swatch);
  box-shadow: inset 0 0 0 2px var(--card);
}
.icon-picker .icon-colours button[aria-pressed="true"] { outline: 2px solid var(--swatch); outline-offset: 1px; }
/* A section <select> shown with icons (sections.js dress()). */
.section-choose {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; text-align: left;
  font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 10px; cursor: pointer;
}
.section-choose span, .section-choices span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-choose svg, .section-choices svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.section-choose { position: relative; }
/* Floats over what's below, so the drawer doesn't grow. */
.section-choices {
  position: absolute; z-index: 5; left: 0; right: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
  display: flex; flex-direction: column; margin-top: 4px; padding: 4px; max-height: 260px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
.section-choices[hidden] { display: none; }
.section-choices button {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 8px;
  padding: 8px 8px 8px calc(8px + var(--depth, 0) * 16px);
}
.section-choices button:hover, .section-choices button:focus-visible { background: var(--bg); }
.section-choices button[aria-selected="true"] { font-weight: 600; }
/* The whole row (fold, name, + and ⋯) is one strip that highlights. */
.tree-row { padding-left: 0; margin-left: calc(var(--depth, 0) * 18px); border-radius: 10px; }
.tree > li > .tree-row:not(:has(.tree-fold)) { padding-left: 0; margin-left: 22px; }
.sections-drawer .tree-pick[aria-current="true"], .sections-drawer .tree-pick:hover,
.sections-drawer .tree-pick:focus-visible { background: none; }
.tree-row:hover, .tree-row:focus-within { background: var(--bg); }
.tree-row:has(> .tree-pick[aria-current="true"]) { background: var(--accent); color: var(--accent-text); }
.tree-row:has(> .tree-pick[aria-current="true"]) .tree-more,
.tree-row:has(> .tree-pick[aria-current="true"]) .tree-fold { color: inherit; }
.sections-drawer .tree-row:has(> .tree-pick[aria-current="true"]) .tree-more:hover { background: rgba(255, 255, 255, .15); }
.tree-row.drop-before::before, .tree-row.drop-after::after { left: 22px; }
/* How many tasks are still to do in each section (sectionTools.counts). */
.tree-pick .section-count { font-size: .88rem; }
.tree-pick[aria-current="true"] .section-count { color: inherit; opacity: .85; }
/* A line under Master on Packing lists, setting it apart from the trips'. */
.tree-divider { height: 1px; margin: 6px 8px; background: var(--line); }