/* A shared folder's subfolders as a tree to tick (folder-picker.js, the dialog in dialogs.html). Phone first: the
   dialog is .clip-dialog's min(560px, 96vw), its Continue sticky at the foot while the tree scrolls; at a desktop's
   width the same tree with room, nothing rearranged. Every side is logical, so a right-to-left page mirrors it. */

.folder-picker .look-header { align-items: flex-start; }
.folder-picker .look-header h3 { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 1.1rem; }
.folder-picker .folder-picker-intro { margin: 4px 0 10px; color: var(--muted); font-size: .9rem; }

/* Select all / Deselect all: one control ahead of the rows, the whole height a finger needs, its glyph at the start
   side (flex follows the page's direction). */
.folder-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 0;
  padding-inline: 2px 10px; border: 0; background: none; color: var(--accent); font: inherit; font-size: .9rem;
  font-weight: 600; cursor: pointer; }
.folder-all[hidden] { display: none; }
.folder-all:disabled { color: var(--muted); cursor: default; }
.folder-all svg { width: 22px; height: 22px; flex: none; }
.folder-all .folder-all-tick { stroke: var(--surface); }
.folder-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* One row: box | name | counts. The name's track is minmax(0, 1fr) and the cell min-width: 0, or a long folder name
   pushes the counts off a phone's screen. The indentation is the start padding, one step per level. */
.folder-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: 44px; padding-block: 0; padding-inline: calc(2px + var(--depth, 0) * 22px) 2px;
  border-bottom: 1px solid var(--line); }
.folder-row.is-checked { background: var(--selected-bg); }

/* The box: each state its own shape -- empty, a tick, a bar for some, a slash on a dashed square for a folder that
   cannot go in. A box ticks while the counts are still coming in, too: only "Use these folders" waits for them. The
   button is the row's full height, so the finger has 44 px. */
.folder-box { display: grid; place-items: center; width: 28px; min-height: 44px; padding: 0; border: 0; background: none;
  color: inherit; cursor: pointer; }
.folder-box::before { content: ""; grid-area: 1 / 1; width: 24px; height: 24px; box-sizing: border-box; border-radius: 6px;
  border: 2px solid var(--ink-dim); }
.folder-box > .folder-glyph { grid-area: 1 / 1; display: grid; place-items: center; width: 24px; height: 24px; }
.folder-box svg { width: 16px; height: 16px; }
.folder-box.is-on::before { background: var(--gold); border-color: var(--gold); }
.folder-box.is-on { color: var(--on-accent); }
.folder-box.is-mixed::before { border-color: var(--accent); }
.folder-box.is-mixed { color: var(--accent); }
.folder-box.is-blocked::before { border-style: dashed; border-color: var(--muted); }
.folder-box.is-blocked { color: var(--muted); cursor: help; }
.folder-box:focus-visible { outline: none; }
.folder-box:focus-visible::before { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

/* The name: chevron, folder, the words (two lines at most), and a tail mark for a folder that is not as the others. */
.folder-name { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 44px; padding: 0; border: 0;
  background: none; color: var(--ink); font: inherit; font-size: .9rem; text-align: start; cursor: pointer; }
.folder-name .folder-glyph { display: inline-flex; flex: none; color: var(--ink-dim); }
.folder-name .folder-glyph svg { width: 18px; height: 18px; }
.folder-name .folder-chev-wrap { color: var(--muted); }
.folder-name .folder-chev-wrap svg { width: 16px; height: 16px; }
.folder-chev-gap { width: 16px; flex: none; }
/* Collapsed points to the end side: right in English, left in Hebrew. */
[dir="rtl"] .folder-chev-right { transform: scaleX(-1); }
.folder-label { min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; }
.folder-row.is-off .folder-name, .folder-row.is-off .folder-counts { color: var(--muted); }
.folder-row.is-off .folder-name .folder-glyph { color: var(--muted); }

/* Photos and videos, two numbers with their own glyphs, never one total. A parent's are everything under it. */
.folder-counts { display: flex; gap: 10px; align-items: center; font-size: .82rem; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.folder-counts > span { display: inline-flex; align-items: center; gap: 4px; }
.folder-counts svg { width: 14px; height: 14px; }
.folder-counts b { font-weight: 600; color: var(--ink-dim); }
.folder-counts.is-sum b { color: var(--ink); }
.folder-wait { font-style: italic; gap: 3px; }
.folder-wait i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
  animation: folder-blink 1.2s infinite; }
.folder-wait i:nth-child(2) { animation-delay: .2s; }
.folder-wait i:nth-child(3) { animation-delay: .4s; }
@keyframes folder-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.folder-loading { width: 28px; height: 28px; margin: 24px auto 12px; border-radius: 50%; border: 3px solid var(--line-strong);
  border-top-color: var(--gold); animation: folder-spin 1s linear infinite; }
@keyframes folder-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .folder-loading, .folder-wait i { animation: none; } }

/* Open, the dialog is a column: the head, the tree that scrolls, and the foot that never leaves the screen. */
.folder-picker[open] { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.folder-picker[hidden] { display: none; }
.folder-picker .folder-tree { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-inline: -4px; padding-inline: 4px; }

/* The foot: the reason lines, the count of what is chosen, and Use these folders across the whole width. */
.folder-picker .folder-picker-foot { display: block; flex: none; position: static; margin: 0 -16px; padding: 10px 16px 16px;
  background: var(--surface); border-top: 1px solid var(--line); }
.folder-note { margin: 0; color: var(--muted); font-size: .86rem; }
.folder-note:empty { display: none; }
.folder-note-line { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; }
.folder-note-line.is-bad { color: var(--warning); }
.folder-note-line .folder-glyph { display: inline-flex; flex: none; margin-top: 2px; }
.folder-note-line svg { width: 16px; height: 16px; }
/* Retry, when the count stopped coming: a button a finger can hit, after the sentence that says why. */
.folder-retry { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-block: -12px;
  margin-inline-start: auto; padding-inline: 10px; border: 0; background: none; color: var(--accent); font: inherit;
  font-weight: 600; white-space: nowrap; cursor: pointer; }
.folder-retry .folder-glyph { margin-top: 0; }
.folder-retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.folder-count { margin: 0 0 8px; font-size: .86rem; color: var(--ink-dim); }
.folder-count[hidden] { display: none; }
.folder-picker .folder-use { display: block; width: 100%; padding: 13px; border: 0; border-radius: var(--r-pill);
  background: var(--gold); color: var(--on-accent); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; }
.folder-picker .folder-use:disabled { background: var(--surface-hover); color: var(--muted); border: 1px solid var(--line-strong);
  cursor: not-allowed; }

/* The chip on the Album found card: how many of the folders go in, and the way back to them. */
.folder-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; min-height: 32px; margin-top: 4px;
  padding-block: 4px; padding-inline: 8px 10px; border: 1px solid var(--accent); border-radius: var(--r-pill);
  background: transparent; color: var(--accent); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.folder-chip svg { width: 14px; height: 14px; flex: none; }
.folder-chip[hidden] { display: none; }