/* SakinGallery (gallery.js): selecting, acting on and moving cards, the same in every gallery (projects, pictures,
   assets). Colours from the tokens; motion from the tool tokens (tool-base.css). */

/* the check on a card: hidden until the card is under the pointer, shown on every card once something is selected */
.sk-g-item{ position:relative; }
.sk-g-check{ position:absolute; top:8px; left:8px; z-index:3; width:20px; height:20px; padding:0; display:grid; place-items:center;
  border-radius:50%; border:1.5px solid var(--on-accent); background:rgb(var(--shadow-rgb) / .28); color:transparent; cursor:pointer;
  box-shadow:0 0 0 1px rgb(var(--shadow-rgb) / .18); opacity:0; transition:opacity var(--duration-fast) var(--ease-out-strong), background-color var(--duration-fast); }
.sk-g-check svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.sk-g-item:hover > .sk-g-check, .sk-g-selecting .sk-g-check, .sk-g-check:focus-visible{ opacity:1; }
.sk-g-check:hover{ background:rgb(var(--shadow-rgb) / .45); color:color-mix(in srgb, var(--on-accent) 70%, transparent); }
.sk-g-item.is-selected > .sk-g-check{ opacity:1; background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.sk-g-item.is-selected{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-lg); }
@media (hover:none){ .sk-g-check{ opacity:1; } }

/* the box drawn over empty space */
.sk-g-box{ position:fixed; z-index:60; pointer-events:none; border:1px solid var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); border-radius:2px; }

/* the bar while something is selected: at the foot of the gallery, in its middle */
.sk-g-bar{ position:fixed; z-index:55; translate:-50% -100%; display:flex; align-items:center; gap:4px; height:40px; padding:0 4px 0 12px;
  background:var(--panel, var(--bg)); color:var(--text); border-radius:12px; box-shadow:0 0 0 1px var(--border), 0 8px 24px rgb(var(--shadow-rgb) / .18);
  font:500 var(--ctl-font, 11px)/16px var(--font-sans, system-ui), sans-serif; white-space:nowrap; animation:sk-pop-up var(--duration-ui, 220ms) var(--ease-out-strong, ease-out); }
/* the count is a state, not a button: muted, regular weight, a line between it and the actions */
.sk-g-count{ display:flex; align-items:center; height:16px; padding-inline-end:var(--sp-3, 12px); margin-inline-end:var(--sp-1, 4px); border-inline-end:1px solid var(--border);
  color:var(--text-muted); font-weight:400; font-variant-numeric:tabular-nums; }
.sk-g-act, .sk-g-close{ display:inline-flex; align-items:center; gap:var(--sp-2, 8px); height:32px; padding:0 var(--sp-3, 12px); border:none; border-radius:8px; background:none; color:var(--text); font:inherit; cursor:pointer; }
.sk-g-act:hover, .sk-g-close:hover{ background:var(--bg-hover); }
.sk-g-act svg, .sk-g-close svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.sk-g-act.danger{ color:var(--danger); }
.sk-g-act.danger.armed{ background:var(--danger); color:var(--on-accent); }
.sk-g-close{ width:32px; padding:0; justify-content:center; color:var(--text-muted); }
/* too narrow for the words: icons alone (the name is in the tooltip) */
.sk-g-bar.compact .sk-g-act{ width:32px; padding:0; justify-content:center; }
.sk-g-bar.compact .sk-g-act span{ display:none; }

/* dragging cards onto a folder */
.sk-g-ghost{ position:fixed; z-index:70; pointer-events:none; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:4px 10px; border-radius:999px;
  background:var(--accent); color:var(--on-accent); font:500 var(--ctl-font, 11px)/16px var(--font-sans, system-ui), sans-serif; box-shadow:0 6px 18px rgb(var(--shadow-rgb) / .2); }
html.sk-g-dragging, html.sk-g-dragging *{ cursor:grabbing !important; user-select:none; }
[data-drop].sk-g-over{ outline:2px solid var(--accent); outline-offset:-2px; background:color-mix(in srgb, var(--accent) 10%, transparent); }
@media (prefers-reduced-motion: reduce){ .sk-g-bar{ animation-name:sk-fade-in; } }

/* A page declares its card fields; cardInfo changes only their presentation. */
.sk-info-card{position:relative;}
.sk-view-select{appearance:auto;max-width:110px;height:28px;border:0;border-radius:var(--radius);padding:0 var(--sp-1);background:transparent;color:var(--muted);font:500 var(--ctl-font-sm)/1 var(--font-sans);cursor:pointer;}
.sk-view-select option{color:var(--text);background:var(--panel);}
.sk-view-select:hover{background:var(--bg-hover);color:var(--text);}
[data-card-info="name"] .sk-info-detail,[data-card-info="name"] .sk-info-tags,[data-card-info="none"] .sk-info-detail,[data-card-info="none"] .sk-info-tags{display:none !important;}
[data-card-info="none"] .sk-info-meta{position:absolute !important;left:0;right:0;bottom:0;height:20px !important;margin:0 !important;padding:0 var(--sp-1) !important;display:flex;align-items:center;gap:var(--sp-1);overflow:hidden;border-radius:0 0 var(--radius) var(--radius);background:color-mix(in srgb,var(--panel) 92%,transparent);opacity:0;pointer-events:none;z-index:2;transition:opacity var(--duration-fast);}
[data-card-info="none"] .sk-info-card:hover .sk-info-meta,[data-card-info="none"] .sk-info-card:focus-within .sk-info-meta{opacity:1;pointer-events:auto;}
[data-card-info="none"] .sk-info-name{line-height:20px !important;}
[data-card-info="none"] .sk-info-meta .icon-btn{height:20px;width:20px;}
[data-card-info="name"] .sk-info-meta{min-height:20px;}
@media(prefers-reduced-motion:reduce){.sk-info-meta{transition:none !important;}}