/* Tags and smart folders. The behaviour is public/tags.js; the rules are server/tags.js.
 *
 * NO COLOUR IN THIS FILE IS A COLOUR. A tag stores a palette NAME ("red", "teal"), and each name
 * is a token below, derived from tokens every theme already sets. So a theme never has to know
 * this feature exists to keep it readable: Paper's dark red stays legible on white, Y2K's on
 * silver, Kirameki's on black, because each theme already tuned its own --danger for exactly that
 * background. A theme that wants different tag colours sets --tag-* on its own block.
 *
 * The six hues are rotations of the theme's own --danger in OKLCH, which keeps its lightness and
 * chroma -- the two things that decide contrast -- and changes only the hue. Where the browser
 * cannot do relative colour, the fallback mixes the named tokens instead. */
:root, [data-theme] {
  --tag-red: var(--danger);
  --tag-orange: color-mix(in oklab, var(--danger), var(--sun));
  --tag-yellow: var(--sun);
  --tag-green: var(--ok);
  --tag-teal: var(--sky);
  --tag-blue: color-mix(in oklab, var(--sky) 60%, var(--text));
  --tag-purple: color-mix(in oklab, var(--danger) 50%, var(--sky));
  --tag-grey: var(--mut);
}
@supports (color: oklch(from red l c h)) {
  :root, [data-theme] {
    --tag-orange: oklch(from var(--danger) l c calc(h + 38));
    --tag-yellow: oklch(from var(--danger) calc(l + .05) c calc(h + 72));
    --tag-green: oklch(from var(--danger) l c calc(h + 122));
    --tag-teal: oklch(from var(--danger) l c calc(h + 172));
    --tag-blue: oklch(from var(--danger) l c calc(h + 228));
    --tag-purple: oklch(from var(--danger) l c calc(h + 290));
  }
}

.tg-dot[data-c=red], .tg-nav-ic[data-c=red] { --tg: var(--tag-red); }
.tg-dot[data-c=orange], .tg-nav-ic[data-c=orange] { --tg: var(--tag-orange); }
.tg-dot[data-c=yellow], .tg-nav-ic[data-c=yellow] { --tg: var(--tag-yellow); }
.tg-dot[data-c=green], .tg-nav-ic[data-c=green] { --tg: var(--tag-green); }
.tg-dot[data-c=teal], .tg-nav-ic[data-c=teal] { --tg: var(--tag-teal); }
.tg-dot[data-c=blue], .tg-nav-ic[data-c=blue] { --tg: var(--tag-blue); }
.tg-dot[data-c=purple], .tg-nav-ic[data-c=purple] { --tg: var(--tag-purple); }
.tg-dot[data-c=grey], .tg-nav-ic[data-c=grey] { --tg: var(--tag-grey); }

/* ---- the dots on a row or a card ---- */
.tg-dots {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 7px; vertical-align: middle; position: relative; top: -1px;
}
.tg-dot {
  display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tg, var(--mut));
}
.tg-more { font-family: var(--font-meta); font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--dim); margin-left: 1px; }
/* A folder chip's name is a flex row of its own; keep the dots beside the text, not under it. */
.chip-name .tg-dots { margin-left: 6px; }

/* ---- a chip: a tag with its name ---- */
.tg-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: calc(3 * var(--sp)) calc(9 * var(--sp)); border-radius: var(--r-pill);
  background: var(--chip); color: var(--text2); border: 1px solid transparent;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A chip that opens its tag, and the dots on a row that do the same. */
.tg-go { cursor: pointer; transition: background .12s, color .12s; }
.tg-go:hover { color: var(--text); background: var(--glass); }
.tg-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tg-dots[data-tg-dots] { cursor: pointer; padding: 3px 2px; margin-top: -3px; margin-bottom: -3px; border-radius: var(--r-pill); }
.tg-dots[data-tg-dots]:hover { background: var(--glass); }
.tg-head-dot { width: 12px; height: 12px; margin-right: 10px; vertical-align: middle; position: relative; top: -2px; }
.tg-toggle { cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.tg-toggle:hover { color: var(--text); }
.tg-toggle.on { background: var(--accent-tint); color: var(--accent-text); border-color: var(--accent-ring); }

/* ---- the picker ---- */
.tg-list { flex: none; display: flex; flex-direction: column; gap: 1px; max-height: min(320px, 46vh); overflow-y: auto; overflow-x: hidden; margin: -6px -4px 10px; padding: 4px; }
/* (4px, not 2: on touch every .iconbtn grows a 44px hit area past its 36px box, and in a scroller that reads as overflow.) */
.tg-none { margin: 4px 0 10px; }
.tg-opt { display: flex; align-items: center; gap: 4px; border-radius: var(--r-sm); }
.tg-opt:not(.tg-edit):hover { background: var(--glass); }
.tg-lbl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: calc(7 * var(--sp)) calc(8 * var(--sp)); cursor: pointer; font-size: var(--fs-base); }
.tg-lbl .tg-dot { width: 10px; height: 10px; }
.tg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.tg-n { font-family: var(--font-meta); font-size: var(--fs-sm); color: var(--dim); }
.tg-pen { flex: none; color: var(--dim); }
.tg-pen svg { width: 15px; height: 15px; }
@media (hover: hover) {
  /* faint, not hidden: it is the only way to rename, recolour or delete a tag */
  .tg-opt .tg-pen { opacity: .4; transition: opacity .12s; }
  .tg-opt:hover .tg-pen, .tg-pen:focus-visible { opacity: 1; }
}
.tg-edit { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; background: var(--glass); margin: 2px 0; }
.tg-edit-acts { display: flex; align-items: center; gap: 8px; }

.tg-new { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.modal-body .tg-new .tg-new-in { flex: 1 1 150px; width: auto; min-width: 0; }
.tg-sw { display: flex; flex-wrap: wrap; gap: 1px; }
.tg-new .tg-sw { flex-basis: 100%; }
.tg-swatch {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid transparent; cursor: pointer;
}
.tg-swatch .tg-dot { width: 13px; height: 13px; }
.tg-swatch:hover { background: var(--glass); }
.tg-swatch.on { border-color: var(--text2); }

/* ---- the smart folder editor ---- */
.tg-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-pick .tg-chip { font-size: var(--fs-md); padding: calc(5 * var(--sp)) calc(11 * var(--sp)); }
.tg-match { display: flex; gap: 16px; margin-top: 9px; font-size: var(--fs-md); color: var(--mut); }
.tg-match label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tg-row2 select { width: 100%; }
.tg-count { min-height: 1.4em; margin-bottom: 10px; }
.sm-del { margin-top: 2px; }
@media (max-width: 520px) { .tg-row2 { grid-template-columns: 1fr; gap: 0; } }

/* ---- the sidebar section ---- */
.nav-smart { margin-top: calc(16 * var(--sp)); min-height: 0; display: flex; flex-direction: column; }
.nav-smart[hidden] { display: none; }
.tg-side-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(4 * var(--sp)) calc(5 * var(--sp)) calc(11 * var(--sp));
  font-size: var(--fs-xs); letter-spacing: calc(.2em * var(--tracking)); font-weight: var(--fw-bold);
  color: var(--dim); text-transform: var(--label-case);
}
.tg-side-add { width: 24px; height: 24px; border-radius: var(--r-2xs); display: grid; place-items: center; color: var(--dim); }
.tg-side-add svg { width: 15px; height: 15px; }
.tg-side-add:hover { background: var(--glass); color: var(--text); }
.nav-smart .nav { overflow-y: auto; max-height: 34vh; }
/* In the phone drawer the whole drawer scrolls instead: an inner scroller there was ~90px tall. */
html[data-narrow] .side { overflow-y: auto; overscroll-behavior: contain; }
html[data-narrow] .nav-smart { flex: none; }
html[data-narrow] .nav-smart .nav { max-height: none; overflow: visible; }
.tg-nav-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-btn > i.tg-nav-ic, .nav-btn.on > i.tg-nav-ic { color: var(--tg, var(--mut)); }

/* ---- a smart folder's heading ---- */
.tg-head { align-items: center; flex-wrap: wrap; }
.tg-head .sub { min-width: 0; }
.tg-head-edit { margin-left: auto; }

/* ---- the details panel ---- */
.rail-meta > .tg-rail { align-items: flex-start; }
.tg-rail dd { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.tg-rail .tg-chip { font-size: var(--fs-xs); padding: calc(2 * var(--sp)) calc(8 * var(--sp)); }
.tg-rail-edit { font-size: var(--fs-sm); color: var(--accent-text); padding: 2px 4px; border-radius: var(--r-2xs); }
.tg-rail-edit:hover { background: var(--glass); }
.tg-cb { accent-color: var(--accent); width: 15px; height: 15px; flex: none; margin: 0; }
/* `.field input` sizes every input in a field like a text box; these are radios. */
.field .tg-match input { width: auto; height: auto; padding: 0; margin: 0; border: 0; accent-color: var(--accent); }
.tg-match label { white-space: nowrap; }

/* Kirameki. Its sidebar is transparent over the livery, and the racing stripe is placed to cross
   the free column under Trash -- which is where this section lands. So under Kirameki alone the
   section is moved below Trash (Trash stays part of the nav, as the theme draws it) and set on a
   solid plate, the theme's own rule for anything that sits over the stripe ("the panels over it
   are SOLID"). Same guard as kira.css uses for its own sidebar. */
html[data-deep=kira]:not([data-narrow]) .nav-smart {
  order: 1; position: relative; z-index: 1;
  margin: calc(12 * var(--sp)) 0 calc(4 * var(--sp));
  padding: calc(10 * var(--sp)) calc(6 * var(--sp)) calc(6 * var(--sp));
  background: var(--k-panel, var(--panel)); border: 1px solid var(--k-line, var(--line));
}
html[data-deep=kira]:not([data-narrow]) .side > .stor-wrap,
html[data-deep=kira]:not([data-narrow]) .side > .report-btn,
html[data-deep=kira]:not([data-narrow]) .side > .side-user { order: 2; }

/* The selection bar's Tag button: an icon and a word, and on a phone just the icon, so the bar's
   four actions and its close button still fit one row there. */
#sel-tag { display: inline-flex; align-items: center; gap: 6px; }
#sel-tag .btn-ic { width: 16px; height: 16px; display: inline-flex; }
#sel-tag .btn-ic svg { width: 16px; height: 16px; }
@media (max-width: 780px) {
  #sel-tag .sel-tag-t { display: none; }
  #sel-tag { padding-inline: calc(10 * var(--sp)); }
}
@media (max-width: 780px) { #sel-tag { width: 34px; padding: 0; justify-content: center; } }