/* The asset library (/dam/, site/dam.py). The site's two colours: black on white, greys for lines; the only colour is in the pictures.
   No picture is cropped: every tile is a 3:4 box the picture sits inside whole; a landscape picture or film takes two columns. */
:root {
  --bg: #ffffff;
  --fg: #0d0d0d;
  --muted: #6b6b76;
  --line: #e9e9ee;
  --soft: #f5f5f3;
  --tile: 190px;
  --head: 60px;
  --side: 232px;
  --gutter: clamp(16px, 2.4vw, 32px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
:root[data-size="s"] { --tile: 132px; }
:root[data-size="l"] { --tile: 280px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* header */
.top { position: sticky; top: 0; z-index: 20; height: var(--head); display: flex; align-items: center; gap: 20px; padding: 0 var(--gutter); background: rgba(255, 255, 255, .9); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); }
.mark { flex: none; width: calc(var(--side) - 20px); font-size: 18px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.mark span { color: var(--muted); font-weight: 400; margin-left: 8px; font-size: 14px; letter-spacing: 0; }
.search { flex: 1; min-width: 0; max-width: 520px; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; transition: border-color .15s; }
.search:focus-within { border-color: var(--fg); }
.search svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; color: inherit; }
.search input::placeholder { color: var(--muted); }
.sizes { flex: none; margin-left: auto; display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.sizes button { width: 38px; height: 34px; text-align: center; font-size: 13px; color: var(--muted); }
.sizes button[aria-pressed="true"] { background: var(--fg); color: #fff; }

/* the two columns */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); align-items: start; }
.side { position: sticky; top: var(--head); max-height: calc(100vh - var(--head)); overflow-y: auto; padding: 22px 12px 40px var(--gutter); }
.side h2 { margin: 22px 0 6px 10px; font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
.side h2:first-child { margin-top: 0; }
.side button { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; padding: 6px 10px; border-radius: 8px; font-size: 14px; color: var(--fg); }
.side button:hover { background: var(--soft); }
.side button[aria-pressed="true"] { background: var(--fg); color: #fff; }
.side button i { font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.side button[aria-pressed="true"] i { color: rgba(255, 255, 255, .7); }
.side button.none { color: #b4b4bc; }

main { min-width: 0; padding: 22px var(--gutter) 96px 20px; border-left: 1px solid var(--line); min-height: calc(100vh - var(--head)); }
.lede { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.lede b { font-size: 15px; font-weight: 600; color: var(--fg); }
.lede .clear { color: var(--fg); border-bottom: 1px solid currentColor; }
.empty { padding: 96px 0; text-align: center; color: var(--muted); }

/* a kind of material, and the groups inside it */
.cat { padding-top: 30px; }
.cat > h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.cat > h2 i { margin-left: 10px; font-style: normal; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.cat > p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.group { margin-top: 20px; content-visibility: auto; contain-intrinsic-size: auto 520px; }
.group > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 9px 0; border-top: 1px solid var(--fg); }
.group h3 { margin: 0; font-size: 14px; font-weight: 600; }
.group header span { font-size: 13px; color: var(--muted); }
.group header .acts { margin-left: auto; display: flex; gap: 16px; }
.group header .acts button { font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.group header .acts button:hover { color: var(--fg); border-bottom-color: var(--fg); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr)); grid-auto-flow: row dense; gap: 18px 12px; padding-top: 6px; }      /* dense: a wide tile that does not fit the end of a row leaves no hole */
.tile { position: relative; display: flex; flex-direction: column; min-width: 0; }
.tile .pic { position: relative; flex: 1 1 auto; aspect-ratio: 3 / 4; background: var(--soft); overflow: hidden; }
.tile.wide { grid-column: span 2; }
.tile.wide .pic { aspect-ratio: 16 / 9; }
.tile .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .2s; }
.tile:hover .pic img { opacity: .86; }
.tile .cap { display: block; padding: 8px 2px 0; min-width: 0; }
.tile .cap b, .tile .cap i { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tile .cap b { font-size: 13px; font-weight: 500; }
.tile .cap i { font-style: normal; font-size: 12px; color: var(--muted); }
.tile .flag, .tile .len { position: absolute; z-index: 1; font-style: normal; font-size: 11px; line-height: 1; padding: 5px 7px; border-radius: 999px; }
.tile .flag { top: 8px; left: 8px; background: var(--fg); color: #fff; }
.tile .len { right: 8px; bottom: 8px; background: rgba(13, 13, 13, .78); color: #fff; font-variant-numeric: tabular-nums; }
.tile .play { position: absolute; z-index: 1; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; }
.tile .play svg { width: 18px; height: 18px; margin-left: 2px; fill: var(--fg); }

/* one file, opened: the picture or film on the left, what there is to know about it on the right */
.viewer { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) 392px; grid-template-rows: minmax(0, 1fr); background: #fff; }
.viewer .stage { position: relative; min-width: 0; background: var(--soft); }
/* never larger than the file itself (--w, --h), so the small picture standing in does not jump when the full one arrives */
.viewer .frame { position: absolute; inset: 28px 64px; display: flex; align-items: center; justify-content: center; }
.viewer .frame img, .viewer .frame video { width: min(100%, var(--w, 100%)); height: min(100%, var(--h, 100%)); object-fit: contain; }
.viewer .nav { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; }
.viewer .nav:hover { border-color: var(--fg); }
.viewer .nav svg { width: 18px; height: 18px; fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viewer .prev { left: 12px; }
.viewer .next { right: 12px; }
.viewer .count { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.viewer .info { position: relative; overflow-y: auto; padding: 22px 26px 40px; border-left: 1px solid var(--line); }
.viewer .shut { position: sticky; top: 0; float: right; z-index: 2; width: 36px; height: 36px; margin: -6px -10px 0 8px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.viewer .shut:hover { background: var(--soft); }
.viewer .shut svg { width: 18px; height: 18px; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; }
.info .kind { font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.info h2 { margin: 6px 0 2px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; overflow-wrap: anywhere; }
.info .sub { margin: 0; color: var(--muted); font-size: 14px; }
.info .pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.info .pills span { font-size: 11px; line-height: 1; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--fg); }
.info .pills span.on { background: var(--fg); color: #fff; }
.info .text { margin: 16px 0 0; font-size: 14px; line-height: 1.7; }
.info .caution { margin: 16px 0 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--fg); font-size: 13px; line-height: 1.7; }
.info .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.btn { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; border: 1px solid var(--line); transition: background .15s, border-color .15s; }
.btn:hover { border-color: var(--fg); }
.btn.solid { background: var(--fg); border-color: var(--fg); color: #fff; }
.btn.solid:hover { background: #2b2b2f; }
.info dl { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 7px 12px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; }
.info dt { color: var(--muted); }
.info dd { margin: 0; overflow-wrap: anywhere; }
.info dd.path { font-family: var(--mono); font-size: 12px; line-height: 1.6; }
.info h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.info h3 button { font-size: 13px; font-weight: 400; color: var(--muted); border-bottom: 1px solid var(--line); }
.info h3 button:hover { color: var(--fg); border-bottom-color: var(--fg); }
.info h3 + h3 { border-top: 0; padding-top: 0; margin-top: 16px; }
.info .copy { margin: 0; font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.info .copy.small { font-size: 12.5px; color: var(--muted); }
.info .near { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.info .near button { display: block; min-width: 0; }
.info .near span { display: block; aspect-ratio: 3 / 4; background: var(--soft); position: relative; overflow: hidden; }
.info .near img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.info .near i { display: block; margin-top: 4px; font-style: normal; font-size: 11px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.toast { position: fixed; z-index: 60; left: 50%; bottom: 28px; transform: translate(-50%, 12px); padding: 9px 16px; border-radius: 999px; background: var(--fg); color: #fff; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* narrow windows: the filters become rows that scroll sideways; an opened file stacks */
@media (max-width: 900px) {
  :root { --tile: 150px; --head: 56px; }
  :root[data-size="s"] { --tile: 104px; }
  :root[data-size="l"] { --tile: 220px; }
  .top { gap: 12px; }
  .mark { width: auto; }
  .mark span { display: none; }
  .shell { display: block; }
  .side { position: sticky; top: var(--head); z-index: 10; max-height: none; padding: 8px var(--gutter); background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .side::-webkit-scrollbar { display: none; }
  .side h2 { display: none; }
  .side div { display: flex; gap: 6px; padding-right: 10px; margin-right: 4px; border-right: 1px solid var(--line); }
  .side div:last-child { border-right: 0; }
  .side button { width: auto; white-space: nowrap; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
  .side button[aria-pressed="true"] { border-color: var(--fg); }
  main { padding: 16px var(--gutter) 72px; border-left: 0; }
  .viewer { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 46vh) minmax(0, 1fr); }
  .viewer .frame { inset: 14px 52px 24px; }
  .viewer .nav { width: 38px; height: 38px; margin-top: -19px; }
  .viewer .prev { left: 6px; }
  .viewer .next { right: 6px; }
  .viewer .info { border-left: 0; border-top: 1px solid var(--line); padding: 18px var(--gutter) 40px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* fAIshion DAM additions: the edit form in the side panel, the pages around the library */
.edit { display: grid; gap: 10px; margin-top: 8px; }
.edit label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.edit input, .edit select, .edit textarea { font: inherit; font-size: 14px; color: var(--fg); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.edit textarea { min-height: 64px; resize: vertical; }
.edit fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 14px; }
.edit .tick { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--fg); }
.toplinks { display: flex; gap: 4px; margin-left: 12px; }
.toplinks a { padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--muted); }
.toplinks a:hover, .toplinks a[aria-current="page"] { background: var(--soft); color: var(--fg); }