/* Collect and Addboards (/tools/collect/, /) on SakinLab UI 2.
   The controls are the central library's (/assets/ui/ui.css, contracts in docs/ui2/README.md); this file only
   places them in Collect's chrome: toolbar place and crumbs, the boards sidebar, the heading, the add bar, the view
   popover, the links panel and the full-window detail, note and archive pages. Colours are the palette's
   (tool-base.css) read through the UI 2 roles; sizes, radii and type are UI 2's.
   The board views themselves (cards, rows, lanes, columns, canvas, folder artwork) are drawn by views.css, which
   sits in the lower `legacy` layer (index.html) and reads the tokens set at the top of this file. */

/* ---------- the views' tokens, set to UI 2's scale ---------- */
:root[data-ui="2"] {
  --ctl-font: var(--ui-fs-body); --ctl-font-sm: var(--ui-fs-caption); --fs-micro: var(--ui-fs-micro);
  --radius: var(--ui-r-item); --radius-lg: var(--ui-r-box); --title-weight: var(--ui-w-semibold);
  --bg-hover: var(--ui-hover); --bg-selected: var(--ui-active); --text-secondary: var(--ui-muted);
}
html, body { height: 100%; }
body { background: var(--ui-canvas, var(--bg-canvas)); }
.detail-time { font: var(--ui-w-semibold) var(--ui-fs-caption)/1 var(--ui-font); }

/* ---------- toolbar: back / forward, the crumbs, the board's actions ---------- */
.collect-place { flex: 1; gap: var(--ui-sp-2); }
.collect-place .collect-nav { flex: none; }
.header-end { justify-content: flex-end; }
.collect-extension .ui-icon, .collect-extension svg { width: 16px; height: 16px; }

/* ---------- boards sidebar ---------- */
.collect-side { padding: var(--ui-sp-2); gap: 0; }
.side-top { display: flex; align-items: center; gap: var(--ui-sp-1); height: var(--ui-panel-head, 44px); margin: calc(var(--ui-sp-2) * -1) 0 var(--ui-sp-1); flex: none; }   /* the panel head: 44 px, the hide button where every tool has it */
.side-search { flex: 1; height: 28px; margin: 0; padding: 0 8px; gap: 6px; }
.side-search > .ui-icon { --ui-icon: 14px; width: 14px; height: 14px; color: var(--ui-subtle); }
.side-search #search { height: 100%; padding: 0; font-size: var(--ui-fs-caption); }
/* the field opens the search menu (search.js): it reads as a field, keeps the filter's words, and shows ⌘K at rest
   (FF's sidebar search field) or a clear button while the library is filtered */
.side-search.is-command, .side-search.is-command #search { cursor: pointer; }
.side-search.is-command #search { text-overflow: ellipsis; }
.side-search-kbd { flex: none; font: inherit; font-size: var(--ui-fs-micro, 11px); color: var(--ui-subtle); opacity: 0; transition: opacity 80ms; pointer-events: none; }
.side-search.is-command:is(:hover, :focus-within) .side-search-kbd { opacity: 1; }
.side-search-clear { flex: none; width: 20px; height: 20px; margin-inline-end: -4px; }
.side-search-clear .ui-icon, .side-search-clear svg { width: 12px; height: 12px; }
.side-search:not(.has-value) .side-search-clear, .side-search.has-value .side-search-kbd { display: none; }
@media (hover: none) { .side-search-kbd { display: none; } }
/* a row: the shared nav item; the tree's depth, its twist and the board's ⋯ stay views.css's geometry */
.side-row { min-height: 28px; gap: 0; margin-inline: 0; }
.ui-nav:has(> .side-row) { gap: 0; }
.side-row + .side-row { margin-top: 4px; }   /* a list row of 32 (docs/tasarim-yonergesi.md §4) */
.side-row .side-pick { height: 28px; gap: var(--ui-sp-2); padding: 0 8px; border-radius: var(--ui-r-item); font-size: var(--ui-fs-body); }
.side-row .side-pick > .ui-icon, .side-row .tree-symbol { --ui-icon: 16px; color: var(--folder, var(--ui-muted)); }
.side-row.active .side-pick { color: var(--ui-fg); }
.side-row.sk-g-over .side-pick { background: var(--ui-accent-soft); color: var(--ui-accent-text); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.side-row:is(.drop-before, .drop-after) .side-pick { background: transparent; color: inherit; box-shadow: none; }
.side-row .tree-toggle { top: 6px; inset-inline-start: calc(var(--depth, 0) * 16px + 8px); left: auto; }
.side-row [data-board-menu] { --ui-h: 24px; }
.side-count { color: var(--ui-subtle); font-size: var(--ui-fs-caption); }
/* a section title (Boards, Tags): caption, muted, with its + flush right */
.side-heading { min-height: 28px; margin: var(--ui-sp-4) 0 var(--ui-sp-1); padding: 0 9px 0 8px; color: var(--ui-muted); font-size: var(--ui-fs-caption); font-weight: var(--ui-w-semibold); letter-spacing: 0; }
.side-heading.sk-g-over { border-radius: var(--ui-r-item); background: var(--ui-accent-soft); }
.side-title { gap: var(--ui-sp-2); }
.side-title > .ui-icon { --ui-icon: 14px; color: var(--ui-subtle); }
.side-title > .side-chev { --ui-icon: 12px; transition: transform var(--ui-moderate) var(--ui-ease-moderate); }
#tags-section:not([open]) .side-chev { transform: rotate(-90deg); }
#tag-filters { display: flex; flex-wrap: wrap; gap: var(--ui-sp-1); padding: 0 4px 0 8px; }
#tag-filters:empty::before { color: var(--ui-subtle); font-size: var(--ui-fs-caption); }
#tag-filters > .ui-link { flex-basis: 100%; justify-content: flex-start; margin-top: var(--ui-sp-1); font-size: var(--ui-fs-caption); }
/* automatic tags (kind, shape, colour): a quiet sub-heading that folds, its groups below */
.auto-toggle { display: flex; align-items: center; gap: 4px; flex-basis: 100%; max-width: 216px; height: 24px; margin: var(--ui-sp-2) 0 0; padding: 0; border: 0; background: none; color: var(--ui-muted); cursor: pointer; }
.auto-toggle::after { content: none; }
.auto-toggle > .ui-icon { --ui-icon: 12px; transition: transform var(--ui-moderate) var(--ui-ease-moderate); }
.auto-toggle[aria-expanded="false"] > .ui-icon { transform: rotate(-90deg); }
.auto-toggle:hover { color: var(--ui-fg); }
.auto-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-sp-1); flex-basis: 100%; margin-top: var(--ui-sp-1); }
.auto-name { flex-basis: 100%; margin: 0; }

/* ---------- main: heading, cards, empty state, add bar ---------- */
/* a folder card's ring is its frame (views.css), not the shared focus line on its picture */
.collect-card[data-board] .card-open:focus-visible { outline: 0; }
.collect-scroll.is-dropping { outline: 1px solid var(--ui-accent); outline-offset: -1px; background-color: var(--ui-accent-soft); }
.collect-heading { gap: var(--ui-sp-2); margin: 0 0 var(--ui-sp-3); }
.active-tags { display: flex; flex-wrap: wrap; gap: var(--ui-sp-1); }
.head-acts { gap: 2px; }
.head-view.is-filtered::after { top: 4px; inset-inline-end: 4px; width: 6px; height: 6px; background: var(--ui-accent); }
.collect-empty { display: flex; flex-direction: column; align-items: center; gap: var(--ui-sp-2); }
.collect-empty .empty-mark { width: 32px; height: 32px; margin: 0 0 var(--ui-sp-2); color: var(--ui-subtle); }
.collect-empty .empty-mark svg { width: 32px; height: 32px; }
.collect-empty h2 { margin: 0; font-size: var(--ui-fs-subtitle); line-height: var(--ui-lh-subtitle); }
.collect-empty p { margin: 0 0 var(--ui-sp-2); color: var(--ui-muted); font-size: var(--ui-fs-body); }
.library-import-bar { gap: 2px; }

/* ---------- view options popover ---------- */
.view-menu { position: fixed; z-index: 80; width: 288px; display: flex; flex-direction: column; gap: var(--ui-sp-1); padding: var(--ui-sp-2) var(--ui-sp-3); }
/* one row per choice: the name on the left, the control on the right (FF settings rows); Simple mode leads */
.view-option, .view-menu > .view-simple { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-sp-3); min-height: var(--ui-row); color: var(--ui-muted); font-size: var(--ui-fs-caption); }
.view-menu > .view-simple { color: var(--ui-fg); cursor: pointer; }
.view-option > .ui-label { flex: none; margin: 0; color: inherit; font-size: inherit; }
.view-option > .ui-segmented { flex: 0 1 auto; min-width: 0; }
.view-option > .ui-select { flex: 0 1 168px; min-width: 0; }
.view-menu .ui-pop-sep { margin: var(--ui-sp-1) calc(var(--ui-sp-3) * -1); }
.view-menu .view-reset { justify-content: flex-start; margin: 0 calc(var(--ui-sp-2) * -1); color: var(--ui-muted); }
.view-option:has(:disabled) > span { opacity: .5; }

/* ---------- links panel ---------- */
.collect-links.ui-dialog { max-width: 560px; display: flex; flex-direction: column; }
.collect-links .ui-field + .links-actions { margin-top: var(--ui-sp-3); }
.collect-links #links-candidates:not(:empty) { margin-top: var(--ui-sp-3); }
.collect-links .links-save { align-items: center; justify-content: space-between; }

/* ---------- small dialogs (new board, rename, move, tag…) ---------- */
#action-dialog.ui-dialog, #tag-dialog.ui-dialog { max-width: 400px; overflow: visible; }
.tag-editor { position: relative; }
.tag-values { display: flex; flex-wrap: wrap; gap: var(--ui-sp-1); margin: 0 0 var(--ui-sp-2); }
.tag-values:empty { display: none; }
.tag-pill { padding-inline-end: 4px; }
.tag-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 3; min-width: 0; max-width: none; margin: 0; list-style: none; }
.tag-suggestions .ui-menu-item[aria-selected="true"] { background: var(--ui-hover); color: var(--ui-fg); }
#bulk-tags .tag-suggestions { position: static; margin-top: var(--ui-sp-1); box-shadow: inset 0 0 0 1px var(--ui-border-soft); }

/* ---------- detail: a full-window page (source, media, info) ---------- */
.collect-detail.ui-dialog { padding: 0; border-radius: 0; background: var(--ui-s1); box-shadow: none; translate: none; left: 0; top: 0; max-width: none; }
.collect-detail .detail-top { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 0 52px 0 var(--ui-sp-4); }
.collect-detail .detail-navigation { gap: 2px; }
.collect-detail .detail-info { gap: var(--ui-sp-3); padding: var(--ui-sp-4); background: var(--ui-s1); }
.collect-detail .detail-from { padding: var(--ui-sp-4); }
.collect-detail :is(.detail-info, .detail-from) { border: 0 !important; }
.collect-detail .detail-info { box-shadow: inset 1px 0 0 var(--ui-border-soft); }
.collect-detail .detail-from { box-shadow: inset -1px 0 0 var(--ui-border-soft); }
.collect-detail .detail-media { background: var(--ui-canvas); }
/* Full screen is the picture or video alone: this file is unlayered, so it wins over the layered views.css rules that hid the bars and info */
.collect-detail.is-fullscreen .detail-top,
.collect-detail.is-fullscreen :is(.detail-info, .detail-from),
.collect-detail.is-fullscreen :is(.detail-thumbnail, .ui-dialog-close) { display: none !important; }
.collect-detail.is-fullscreen .detail-body { display: flex; grid-template-columns: none; flex: 1; min-height: 0; }
.collect-detail.is-fullscreen .detail-media { width: 100%; height: 100%; }
.collect-detail > .ui-dialog-close { top: 10px; inset-inline-end: 10px; z-index: 25; }
.detail-label { margin: var(--ui-sp-2) 0 0; text-transform: none; letter-spacing: 0; }
.detail-actions { display: flex; flex-direction: column; gap: var(--ui-sp-1); }
.detail-action { min-height: 0; flex-direction: row; justify-content: flex-start; padding: 0 12px; font-size: var(--ui-fs-body); }
.detail-board { width: 100%; }
.detail-board-icon { display: inline-flex; color: var(--folder, var(--ui-muted)); }
.detail-board-icon > .ui-icon { --ui-icon: 16px; }
#detail-metadata { margin: 0; color: var(--ui-muted); font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); }
.detail-player { gap: 2px; }
.detail-player .detail-seek { flex: 1; min-width: 0; }
.detail-error { margin: var(--ui-sp-2) var(--ui-sp-4); }
@media (max-width: 850px) {
  .collect-detail.ui-dialog { overflow: auto; }
  .collect-detail .detail-info { box-shadow: none; }
}

/* ---------- note and archive pages ---------- */
.collect-note.ui-dialog, .collect-archive.ui-dialog { padding: 0; border-radius: 0; box-shadow: none; translate: none; left: 0; top: 0; max-width: none; }
.collect-note > .ui-dialog-close, .collect-archive > .ui-dialog-close { top: 10px; inset-inline-end: 10px; z-index: 25; }
.note-top, .archive-top { padding: 0 52px 0 var(--ui-sp-4); }
.note-name { flex: 1; min-width: 0; height: 28px; padding: 0 6px; border: 0; border-radius: var(--ui-r-small); background: none; color: var(--ui-fg); font-size: var(--ui-fs-body); font-weight: var(--ui-w-semibold); outline: none; }
.note-name:hover { background: var(--ui-hover); }
.note-name:focus { box-shadow: inset 0 0 0 1px var(--ui-focus); }
.note-info { gap: var(--ui-sp-3); padding: var(--ui-sp-4); box-shadow: inset 1px 0 0 var(--ui-border-soft); }
.note-refs { gap: 1px; }
.note-ref { width: 100%; text-decoration: none; }
.note-open-all { margin-bottom: var(--ui-sp-1); }
.note-suggest { position: absolute; z-index: 5; }
#collect-backup-settings .small-note { margin: 0 0 var(--ui-sp-2); padding: 0 8px; }

/* ---------- List (FF table): a table on the paper, not on the workspace grid. One hairline between rows (the grid's
   lines would cross them), a stronger one under the column titles; hover and selection are washes ---------- */
.collect-scroll:has(> .collect-cards[data-layout="list"]) { --sk-line: transparent; --sk-dot: transparent; }
.collect-cards[data-layout="list"] .collect-row { gap: var(--ui-sp-3); min-height: 40px; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--ui-border-soft); }
.collect-cards[data-layout="list"] .collect-row .row-open { height: 40px; gap: var(--ui-sp-2); border-radius: 0; }
.collect-cards[data-layout="list"] .row-thumb { width: 28px; height: 28px; border-radius: var(--ui-r-small); background: var(--ui-track); }
.collect-cards[data-layout="list"] .row-cell { color: var(--ui-muted); font-size: var(--ui-fs-caption); }
.collect-cards[data-layout="list"] .list-head { min-height: 32px; box-shadow: inset 0 -1px 0 var(--ui-border); color: var(--ui-muted); font-size: var(--ui-fs-caption); }
.collect-cards[data-layout="list"] .list-head .row-name-head { padding-inline-start: calc(28px + var(--ui-sp-2)); font-size: inherit; }
@media (hover: hover) and (pointer: fine) { .collect-cards[data-layout="list"] .collect-row:not(.list-head):hover { background: var(--ui-hover); } }
.collect-cards[data-layout="list"] .collect-row.sk-g-item.is-selected { background: var(--ui-accent-soft); }

/* ---------- the work area: one spacing system ----------
   The content sits 16 px inside the work area (after the rulers; 12 on a phone) and keeps 88 px under it, so the last
   row clears the bars. Every floating bar stands 12 px (--bar-floor) off the work area's edges, the rulers not
   counted, and all bottom bars share one floor. The examples' Remove sits in the header, not over the pictures. */
@media (min-width: 621px) {
  .collect-scroll.sk-board-ruled:not(.is-lanes) { padding-top: calc(var(--ui-sp-4) + 18px); padding-bottom: 88px; }
  html[data-sk-norulers] .collect-scroll.sk-board-ruled:not(.is-lanes) { padding-top: var(--ui-sp-4); }
}
#main .sk-view-dock { inset-inline-start: calc(var(--bar-floor) + 18px); }
html[data-sk-norulers] #main .sk-view-dock { inset-inline-start: var(--bar-floor); }
@media (max-width: 480px) { #main .sk-view-dock, html[data-sk-norulers] #main .sk-view-dock { inset-inline-start: var(--ui-sp-2); } }
@container library-workspace (min-width: 721px) { .library-import-bar { bottom: var(--bar-floor); } }
/* the examples' Remove: a quiet button in the header, beside View (an icon on a phone) */
.head-acts > .samples-remove { color: var(--ui-muted); }
@media (max-width: 620px) { .head-acts > .samples-remove > span:not(.ui-icon):last-child { display: none; } .head-acts > .samples-remove { padding-inline: 6px; } }
/* Simple mode keeps only the views in the corner: an empty zoom bar is not drawn */
:root[data-library-simple] .sk-board-zoom:not(:has(> .lane-nav:not([hidden]))) { display: none; }

/* the hidden strip: the button 8 px from the top, as in every tool */
@media (min-width: 851px) { body.sk-closed-left .collect-side .side-top { align-items: flex-start; padding-top: 8px; box-sizing: border-box; } }