/* Taam: library.css. The photo catalog (#/studio/library) and its tag editor (docs/look/system.md 4.9).
   Builds on base.css: tokens, .page, .page-head, .tile, .fact, .tokens, .token, .seg, .pgrid--library, .ptile,
   .modal--drawer, .edited 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-head            the page head: __text (eyebrow over the title row), __title (title and the count)
   .lib-notes           the row of two notices: .lib-note (what a change does) and the catalog check
   .lib-count           the number inside a filter token
   .lib-health          catalog check, a row tile: __line (icon + sentence), __body (the details), __group, __list
   .lib-filters         the sticky glass 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 (facts, credit, __step),
                        __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); --lib-drawer: 520px; }

/* 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(0px, calc(var(--lib-drawer) + var(--s-5) - max(var(--gutter), (100vw - var(--wrap)) / 2)));
  }
  .lib--editing .pgrid--library { --cols: 3; }
}
@media (min-width: 1280px) {
  .lib--editing .pgrid--library { --cols: 4; }
}
@media (min-width: 1600px) {
  .lib--editing .pgrid--library { --cols: 5; }
}

/* ---------- page head and the two notices ---------- */

/* The same page head as Projects and Settings (.sec-head--page): the eyebrow's size and the offset from the bar. */
.lib-head { margin-block-start: var(--s-3); }
.lib-head__text { display: grid; gap: 4px; min-width: 0; }
.lib-head .t-eyebrow { font-size: 17px; }
@media (min-width: 1100px) { .lib-head .t-eyebrow { font-size: 21px; } }
.lib-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }

.lib-notes { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  .lib-notes { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-tiles); }
  .lib--editing .lib-notes, .lib-notes:has(.lib-health--bad) { grid-template-columns: minmax(0, 1fr); }
  /* With the details open the check grows; the note beside it keeps its own height. */
  .lib-notes:has(.disclosure__body) { align-items: start; }
}
.lib-note { flex-direction: column; align-items: flex-start; gap: 4px; }
.lib-note p { text-wrap: pretty; }

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

.lib-health { align-items: center; align-content: center; gap: var(--s-1) var(--s-3); }
.lib-health__line { display: flex; align-items: flex-start; gap: var(--s-2); flex: 1 1 260px; min-width: 0; }
.lib-health__line .icon { width: 20px; height: 20px; margin-block-start: 1px; }
.lib-health__errors { flex: 1 1 100%; }
.lib-health > .disclosure { flex: 0 1 auto; }
.lib-health > .disclosure:has(> .disclosure__body) { flex-basis: 100%; }
.lib-health__body {
  display: grid; gap: var(--s-4);
  padding: var(--s-4); border-radius: var(--r-sm); background: var(--ground);
}
.lib-health--bad .lib-health__body { background: var(--tile); }
.lib-health__group { font: 600 15px/1.3 var(--font); }
.lib-health__list { display: grid; gap: var(--s-1); font: 400 15px/1.45 var(--font); }
.lib-health__list .link { text-align: start; }

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

.lib-filters {
  position: sticky; top: calc(var(--sticky-top) + var(--s-2)); z-index: 5;
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: 12px 16px; border-radius: var(--r-md); overflow: hidden;
  background: var(--glass-bar);
  -webkit-backdrop-filter: var(--blur-bar); backdrop-filter: var(--blur-bar);
  box-shadow: var(--shadow-soft);
}
.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; }
@media (pointer: coarse) { .lib-filters__label { padding-block-start: 12px; } }
.lib-filters__row > .tokens { flex: 1 1 0; min-width: 0; align-items: center; }
.lib-filters .btn--sm { min-height: 36px; }
@media (pointer: coarse) { .lib-filters .btn--sm { min-height: 44px; } }

/* 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 wider gap where the toggles begin. */
.lib-filters__flow > .tokens { display: contents; }
.lib-filters__flow > .lib-filters__toggles > :first-child { margin-inline-start: var(--s-3); }
/* 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 13px/1.3 var(--font); color: var(--ink-3); }
.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 bar; the toggles
   get a row of their own, in line with the tokens above them. */
.lib-filters__row > .tokens--scroll { margin-inline-end: -16px; padding-inline-end: 16px; }
.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: -16px; padding-inline-start: 16px; }
}

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

.lib .ptile { scroll-margin-top: 260px; }   /* clear of the bar and the sticky filters 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__cap .chip { max-width: 100%; color: var(--ink); }
.lib-tile__cap .chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The photo open in the editor: an accent ring around its frame. */
.lib .ptile[aria-current="true"] .ptile__frame { box-shadow: 0 0 0 3px var(--accent); }

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

.lib-ed .modal__body { gap: var(--s-6); }
/* 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); }
  .lib-ed .modal__foot .btn--primary { padding-inline: 20px; }
}
/* 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)); }
}

/* The photo, and beside it what it is: its room, its credit, and the way to its neighbours. */
.lib-ed__top { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s-4); }
/* 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), 300px); aspect-ratio: 4 / 5;
  background: var(--stone); border-radius: var(--r-md);
}
.lib-ed__under { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
@media (max-width: 599.98px) { .lib-ed__photo { width: min(54%, calc(40vh * 4 / 5)); } }
.lib-ed__facts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* As tall as its two lines (the space beside the photo is not a link); what follows stays at the bottom. */
.lib-ed__credit { flex: 0 0 auto; align-self: flex-start; margin-block-end: auto; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.lib-ed__step { display: flex; gap: var(--s-2); }
.lib-ed__step .icon-btn { background: var(--wash); }
@media (hover: hover) and (pointer: fine) { .lib-ed__step .icon-btn:hover { background: var(--wash-2); } }

.lib-ed__sec { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.lib-ed__sec-head { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; }
.lib-ed__label { display: inline-flex; align-items: center; gap: var(--s-2); }
.lib-ed__help { flex: none; min-height: 44px; display: inline-flex; align-items: center; font: 400 15px/1.3 var(--font); }

/* Styles: radio (primary), chip, weight. On a narrow sheet the weight control wraps under the name. */
.lib-styles { display: grid; gap: 6px; }
.lib-style {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2);
  min-height: 52px; padding: 4px 12px; padding-inline-start: 4px;
  border-radius: var(--r-sm); background: var(--ground);
}
.lib-style__pick {
  flex: none; width: 44px; height: 44px;   /* 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(--accent); cursor: pointer; }
.lib-style__name { flex: 1 1 112px; min-width: 0; display: inline-flex; align-items: center; gap: var(--s-2); }
.lib-style:not(.is-on) .chip__name { color: var(--ink-2); font-weight: 400; }
.lib-style.is-primary .chip__name { font-weight: 700; }
.lib-style .seg { flex: none; margin-block: 4px; margin-inline-start: auto; }
.lib-style .seg__item { padding-inline: 12px; }
/* "No" is the answer in most rows: there the thumb stays plain, and the few styles that do carry a
   weight show it in ink, so they are the ones that stand out. */
.lib-style:not(.is-on) .seg__item[aria-checked="true"] { color: var(--ink-2); font-weight: 400; box-shadow: none; }
.lib-style.is-on .seg__item[aria-checked="true"] { background: var(--ink); color: var(--ivory); box-shadow: none; }
.lib-style__one {
  flex: none; margin-block: 4px; margin-inline-start: auto; min-height: 44px; padding-inline: 20px;
  display: inline-flex; align-items: center; border-radius: var(--pill);
  background: var(--ink); color: var(--ivory); font: 600 15px/1.3 var(--font);
}
@media (max-width: 599.98px) {
  /* The weight control takes the row under the name, at its full width. */
  .lib-style { padding-block-end: 8px; }
  .lib-style .seg { display: flex; flex: 1 1 100%; margin-block-start: 0; margin-inline-start: 8px; }
  .lib-style .seg__item { flex: 1 1 0; }
}
.lib-help { flex: 1 0 100%; padding: 2px 44px 8px; font: 400 14px/1.45 var(--font); color: var(--ink-2); }

/* Scales: the editor variant of the scale bar. Five radio stops on a rounded track, -2 at the start. */
.lib-scales { display: grid; gap: 6px; }
.lib-scale {
  display: grid; align-items: center; gap: 0 var(--s-3);
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  grid-template-areas: "name name name" "neg line pos" "help help help";
  padding: 10px 16px 6px; border-radius: var(--r-sm); background: var(--ground);
}
/* Phone: the five stops need 148px between the pole words, so the words take narrower columns (and wrap). */
@media (max-width: 599.98px) {
  .lib-scale { grid-template-columns: 56px minmax(148px, 1fr) 56px; column-gap: var(--s-2); padding-inline: 12px; }
  .lib-scale__pole { overflow-wrap: anywhere; }
}
.lib-scale__name { grid-area: name; display: inline-flex; align-items: center; gap: var(--s-2); font: 600 15px/1.3 var(--font); }
.lib-scale__pole { font: 400 14px/1.3 var(--font); color: var(--ink-3); }
.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(--ink); font-weight: 600; }
.lib-scale__line {
  grid-area: line; position: relative; height: 44px; margin-inline: 4px;
  display: flex; align-items: center; justify-content: space-between;
}
.lib-scale__line::before {
  content: ""; position: absolute; inset-inline: 0; top: 50%; height: 12px; margin-top: -6px;
  border-radius: var(--pill); background: var(--stone);
}
.lib-scale__stop {
  position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.lib-scale__stop:focus-visible { border-radius: 50%; }
.lib-scale__stop::after { content: ""; position: absolute; inset: -8px; }     /* the 44px target */
.lib-scale__stop::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: var(--tile); box-shadow: 0 0 0 1.5px var(--stone-deep);
}
.lib-scale__stop:hover::before { box-shadow: 0 0 0 1.5px var(--ink); }
.lib-scale__stop[aria-checked="true"]::before {
  width: 18px; height: 18px; background: var(--ink); box-shadow: 0 0 0 2px var(--tile);
}
.lib-rubric {
  grid-area: help; margin: 0; padding-block: 2px 6px;
  display: grid; gap: 2px;
  font: 400 14px/1.4 var(--font); color: var(--ink-2); 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(--ink); }

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