/* Taam — library.css: the photo catalog (#/studio/library) and its tag editor (ux.md 2.9, 5.8.13).
   Builds on base.css: tokens, .page, .page-head, .panel, .tokens, .token, .seg, .pgrid--library, .ptile,
   .modal--drawer, .dim, .revision and .field__error are used as they are.

   CLASSES
   .lib                 the page; .lib--editing while the editor is open on desk (the grid makes room for it)
   .lib-count           the number inside a filter token
   .lib-health          catalog check: __line (icon + sentence), __body (the details), __list
   .lib-filters         the sticky filter bar: __row, __label, __flow (rooms + toggles as one wrapping run, desk),
                        __toggles, __row--toggles (the toggles' own row on touch layouts)
   .lib-tile__cap       tile caption: __meta (number and room) over the primary style chip
   .lib-ed              the editor drawer (a class on .modal): __top, __photo, __under (credit, previous / next),
                        __sec, __sec-head, __label, __help, __blocked
   .lib-styles          the 14 style rows: .lib-style (.is-on, .is-primary), __pick, __name, __one
   .lib-scales          the 7 scale rows: .lib-scale, __name, __pole (.is-lean), __line, __stop
   .lib-help            a style's description under its row     .lib-rubric   a scale's rubric (English, LTR)
*/

.lib { display: flex; flex-direction: column; gap: var(--s-4); }

/* The drawer covers the end side of the window. The page keeps clear of it, so every tile stays in reach. */
@media (min-width: 1100px) {
  .lib--editing {
    padding-inline-end: max(var(--gutter), calc(440px + var(--s-5) - max(0px, (100vw - 1200px) / 2)));
  }
  .lib--editing .pgrid--library { --cols: 3; }
}
@media (min-width: 1280px) {
  .lib--editing .pgrid--library { --cols: 4; }
}

/* ---------- catalog check ---------- */

.lib-health { display: flex; flex-direction: column; gap: var(--s-1); }
.lib-health__line { display: flex; align-items: flex-start; gap: var(--s-2); }
.lib-health__line .icon { width: 20px; height: 20px; margin-block-start: 1px; }
.lib-health__body {
  display: flex; flex-direction: column; gap: var(--s-5);
  padding-inline-start: var(--s-4); border-inline-start: 1px solid var(--c-rule-strong);
}
.lib-health__list { display: flex; flex-direction: column; gap: var(--s-1); font: 400 0.875rem/1.375rem var(--font-text); }
.lib-health__list .link { text-align: start; }

/* ---------- filter bar ---------- */

.lib-filters {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-direction: column; gap: var(--s-2);
  padding-block: var(--s-3);
  background: var(--c-board);
  border-block-end: 1px solid var(--c-rule-strong);
}
.lib-filters__row { display: flex; align-items: flex-start; gap: var(--s-3); min-width: 0; }
.lib-filters__label { flex: none; min-width: 40px; padding-block-start: 8px; color: var(--c-pencil); }
.lib-filters__row > .tokens { flex: 1 1 0; min-width: 0; align-items: center; }
.lib-filters .btn--sm { min-height: 32px; }

/* Desk: rooms and toggles wrap as one run of tokens. The two groups keep their own elements (and
   their roles) but lay out as if they were one, with a hairline where the toggles begin. */
.lib-filters__flow > .tokens { display: contents; }
.lib-filters__flow > .lib-filters__toggles::before {
  content: ""; flex: none; width: 1px; height: 24px; margin-inline: var(--s-1); background: var(--c-rule-strong);
}
/* While the editor is open the grid is narrow and the bar wraps into many lines: let it scroll away. */
.lib--editing .lib-filters { position: static; }

.lib-count { margin-inline-start: 6px; font: 400 0.8125rem/1.125rem var(--font-label); color: var(--c-pencil); }
.token[aria-pressed="true"]:not(.token--swatch) .lib-count { color: inherit; }

/* Touch layouts: one scrolling row per group, running out to the end edge of the screen; the toggles
   get a row of their own, in line with the tokens above them. */
.lib-filters__row > .tokens--scroll { margin-inline-end: calc(-1 * var(--gutter)); padding-inline-end: var(--gutter); }
.lib-filters__row--toggles { padding-inline-start: calc(40px + var(--s-3)); }
@media (max-width: 599.98px) {
  .lib-filters__row--toggles { padding-inline-start: 0; }
  /* No room for the row labels; the swatches and room names label themselves. */
  .lib-filters { padding-block: var(--s-2); }
  .lib-filters__label {
    position: absolute; width: 1px; height: 1px; min-width: 0; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .lib-filters__row > .tokens--scroll { margin-inline-start: calc(-1 * var(--gutter)); padding-inline-start: var(--gutter); }
}

/* ---------- grid ---------- */

.lib .ptile { scroll-margin-top: 200px; }   /* clear of the sticky filter bar when the editor steps to it */
.lib-tile__cap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Number and room sit together at the start: pushed apart, one tile's room reads as the next tile's number. */
.lib-tile__meta { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); }
.lib-tile__meta > span { color: var(--c-graphite); }
.lib-tile__cap .chip { max-width: 100%; }
.lib-tile__cap .chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Revision triangle on an edited tile: top start corner, on a paper tab so it reads on any photo. */
.lib .ptile__rev {
  position: absolute; z-index: 1; top: 0; inset-inline-start: 0;
  box-sizing: content-box; padding: 4px;
  background: var(--c-sheet); border-end-end-radius: var(--r-1);
}
/* The photo open in the editor. Drawn as an overlay: an outline on the frame would sit under the photo. */
.lib .ptile[aria-current="true"] .ptile__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border: 3px solid var(--c-blue); border-radius: inherit;
}

/* ---------- tag editor ---------- */

.lib-ed .modal__body { gap: var(--s-5); }
.lib-ed .revision { width: 10px; height: 10px; }
/* Phone: save, cancel and reset share one row from 375px up; the quiet buttons bring their own padding. */
@media (max-width: 599.98px) {
  .lib-ed .modal__foot { gap: var(--s-1); }
}
/* As a full-screen sheet the editor has its footer where toasts appear: "saved" must not cover "save". */
@media (max-width: 1099.98px) {
  body:has(.lib-ed) .toast-host { bottom: calc(73px + var(--s-3) + env(safe-area-inset-bottom)); }
}

.lib-ed__top { display: flex; flex-direction: column; gap: var(--s-1); }
/* 4:5, at most 40% of the window's height. */
.lib-ed__photo {
  position: relative; flex: none; overflow: hidden;
  width: min(100%, calc(40vh * 4 / 5)); aspect-ratio: 4 / 5;
  background: var(--c-vellum); border-radius: var(--r-1);
}
.lib-ed__under {
  display: flex; align-items: center; gap: var(--s-1);
  font: 400 0.8125rem/1.125rem var(--font-label); letter-spacing: 0.02em;
}

.lib-ed__sec { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.lib-ed__sec-head { display: flex; align-items: center; gap: var(--s-3); }
.lib-ed__label { display: inline-flex; align-items: center; gap: 6px; color: var(--c-ink); }
.lib-ed__help { flex: none; font: 400 0.8125rem/1.125rem var(--font-label); letter-spacing: 0.02em; min-height: 32px; }

/* Styles: radio (primary), chip, weight. On a narrow sheet the weight control wraps under the name. */
.lib-styles { display: flex; flex-direction: column; }
.lib-style {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2);
  min-height: 44px; padding-block: 0;
  border-block-end: 1px solid var(--c-rule);
}
.lib-style:last-child { border-block-end: 0; }
.lib-style__pick {
  flex: none; width: 44px; height: 44px; margin-inline-start: -10px;   /* a 44px touch target around the 20px radio */
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.lib-style__pick input { width: 20px; height: 20px; margin: 0; accent-color: var(--c-ink); cursor: pointer; }
.lib-style__name { flex: 1 1 112px; min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.lib-style:not(.is-on) .chip__name { color: var(--c-pencil); }
.lib-style.is-primary .chip__name { font-weight: 600; }
.lib-style .seg { flex: none; margin-block: 4px; margin-inline-start: auto; }
.lib-style .seg__item { padding-inline: 10px; }
/* "No" is the answer in most rows. It is marked with a ring instead of the ink fill, so the few
   styles that do carry a weight are the ones that stand out. */
.lib-style:not(.is-on) .seg__item[aria-checked="true"] {
  background: var(--c-vellum); color: var(--c-ink); box-shadow: inset 0 0 0 2px var(--c-rule-strong);
}
.lib-style:not(.is-on) .seg__item[aria-checked="true"]:focus-visible { outline-color: var(--c-blue); }
.lib-style__one { flex: none; margin-inline-start: auto; min-height: 36px; padding-inline: 10px; display: inline-flex; align-items: center; }
.lib-help { flex: 1 0 100%; padding-block: 2px 6px; font: 400 0.875rem/1.375rem var(--font-text); color: var(--c-graphite); }

/* Scales: the editor variant of the scale bar. Five 28px radio stops on the line, -2 at the start. */
.lib-scales { display: flex; flex-direction: column; gap: var(--s-3); }
.lib-scale {
  display: grid; align-items: center; gap: 0 var(--s-2);
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  grid-template-areas: "name name name" "neg line pos" "help help help";
}
.lib-scale__name { grid-area: name; display: inline-flex; align-items: center; gap: 6px; font: 500 0.875rem/1.375rem var(--font-text); }
.lib-scale__pole { font: 400 0.75rem/1rem var(--font-label); letter-spacing: 0.06em; color: var(--c-pencil); }
.lib-scale__pole--neg { grid-area: neg; text-align: end; }
.lib-scale__pole--pos { grid-area: pos; text-align: start; }
.lib-scale__pole.is-lean { color: var(--c-ink); font-weight: 700; }
.lib-scale__line {
  grid-area: line; position: relative; height: 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.lib-scale__line::before {
  content: ""; position: absolute; inset-inline: 14px; top: 50%; height: 1px; margin-top: -0.5px;
  background: var(--c-rule-strong);
}
.lib-scale__stop {
  position: relative; flex: none; width: 28px; height: 28px; border-radius: var(--r-round);
  display: inline-flex; align-items: center; justify-content: center;
}
.lib-scale__stop::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-sheet); border: 1.5px solid var(--c-rule-strong);
}
.lib-scale__stop:hover::before { border-color: var(--c-ink); }
.lib-scale__stop[aria-checked="true"]::before {
  width: 16px; height: 16px; border: 0; background: var(--c-ink); box-shadow: 0 0 0 2px var(--c-sheet);
}
.lib-rubric {
  grid-area: help; margin: 2px 0 0; padding-block: 4px 2px;
  display: flex; flex-direction: column; gap: 2px;
  font: 400 0.8125rem/1.125rem var(--font-text); color: var(--c-graphite); text-align: left;
}
.lib-rubric > div { display: flex; gap: var(--s-2); }
.lib-rubric dt { flex: none; width: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-ink); }

.lib-ed__blocked .lib-health__list { padding-inline-start: 28px; }