/* licensing.editstock.com — EditStock house style.
   Pulled from editstock.com's computed styles: body #1f1f1f, accent #ED5023,
   Archivo Black for display, DM Sans for everything else. #333333 is the
   structural charcoal — panels, cards, table headers, controls. */

:root{
  color-scheme:dark;
  --bg:#1f1f1f; --bg-2:#262626;
  --surface:#333333; --surface-2:#3d3d3d;
  --line:#454545; --line-soft:#3a3a3a;
  --text:#ffffff; --text-dim:#cfcfcf; --mute:#9a9a9a; --mute-2:#7d7d7d;
  --accent:#ED5023; --accent-ink:#ffffff; --accent-soft:rgba(237,80,35,.14);
  --danger:#e8734f; --good:#7fc7a4;
  --online:#ED5023; --offline:#9a9a9a; --scaling:#d9a05a;
  --display:'Archivo Black','Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'DM Sans','Helvetica Neue',Arial,sans-serif;
  --num:'DM Sans','Helvetica Neue',Arial,sans-serif;
  --r:4px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6;
  letter-spacing:-.004em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
a:hover:not(.btn):not(.card){text-decoration:underline}
h1,h2{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.018em}
h3,h4,h5{font-family:var(--body);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.008em}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.muted{color:var(--mute);font-size:14px}
.err{color:var(--danger);font-size:13.5px;margin:8px 0 0}
.ok{color:var(--good);font-size:13.5px;margin:8px 0 0}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.label{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mute-2)}
.tnum{font-variant-numeric:tabular-nums}

/* nav */
.nav{display:flex;align-items:center;gap:18px;padding:0 20px;height:60px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;background:var(--bg)}
.logo{display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo img{height:26px;width:auto;display:block}
.logo .sub{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2);padding-left:10px;border-left:1px solid var(--line)}
.nav .sp{flex:1}
.navlinks{display:flex;gap:18px;font-size:14px;color:var(--mute)}
.btn{font-family:var(--body);font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:var(--r);border:1px solid transparent;background:transparent;color:var(--text);white-space:nowrap;display:inline-block;text-align:center}
.btn-a{background:var(--accent);color:var(--accent-ink)}
.btn-a:hover{background:#f2603a}
.btn-o{border-color:var(--accent);color:var(--accent)}
.btn-o:hover{background:var(--accent);color:#fff}
.btn-b{border-color:var(--line);color:var(--text-dim)}
.btn-b:hover{border-color:var(--mute-2);color:var(--text)}
.btn:disabled{opacity:.5}

.wrap{max-width:1500px;margin:0 auto;padding-inline:20px}
.stack{display:grid;gap:10px}
.stack label.fl{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-2);margin-bottom:-4px}
.stack input,.stack textarea,.stack select{border:1px solid var(--line);background:var(--bg);padding:10px 11px;font-family:var(--body);font-size:14.5px;color:var(--text);border-radius:var(--r);width:100%}
.stack textarea{resize:vertical;min-height:64px}
.stack select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.req{color:var(--accent)}
.fineprint{font-size:12px;color:var(--mute-2);margin:8px 0 0;line-height:1.45}

/* gate */
.gatewrap{max-width:380px;margin:0 auto;padding:14vh 20px 40px}
.gatewrap h1{font-size:29px;line-height:1.12}
.gatewrap form{margin-top:22px}

/* layout */
.catbody{display:grid;grid-template-columns:250px 1fr;align-items:start}
.rail{border-right:1px solid var(--line);padding:18px 16px 40px;position:sticky;top:60px;max-height:calc(100vh - 60px);overflow-y:auto}
.results{padding:16px 20px 60px;min-width:0}
.search{width:100%;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);color:var(--text);font-family:var(--body);font-size:15px}
.search::placeholder{color:var(--mute-2)}
.chips-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.grp{margin-bottom:16px;border-bottom:1px solid var(--line-soft);padding-bottom:12px}
.grp>summary{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mute-2);cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
.grp>summary::-webkit-details-marker{display:none}
.grp>summary::before{content:"\25b8";font-size:10px}
.grp[open]>summary::before{content:"\25be"}
.grp>summary .n{margin-left:auto;color:var(--accent)}
.facets{margin-top:10px;max-height:260px;overflow-y:auto}
.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-dim);padding:3px 0;cursor:pointer}
.chk input{accent-color:var(--accent);margin:0;flex:none}
.chk .n{margin-left:auto;font-size:12px;color:var(--mute-2);font-variant-numeric:tabular-nums}
.chk .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chk2{align-items:flex-start;padding:6px 0}
.chk2 input{margin-top:2px}
.chk2 .v{white-space:normal;line-height:1.3}
.chk2 .sub{display:block;font-size:11.5px;color:var(--mute-2);letter-spacing:.01em}
.chk2 .n{margin-top:1px}

.resbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cnt{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.cnt b{color:var(--text)}
.pill{font-size:12px;padding:4px 9px;border:1px solid rgba(237,80,35,.45);border-radius:100px;color:var(--accent);background:transparent}
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg button{font-size:12.5px;font-weight:700;letter-spacing:.06em;padding:6px 14px;color:var(--mute);background:transparent;border:0}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.spacer{margin-left:auto}

/* column manager */
.colsbtn[hidden]{display:none}
.colsbtn{font-size:12.5px;font-weight:700;letter-spacing:.06em;padding:6px 12px;border-radius:var(--r);
  border:1px solid rgba(237,80,35,.55);background:transparent;color:var(--accent)}
.colsbtn:hover{border-color:var(--accent);background:var(--accent-soft)}
.colsbtn[aria-expanded="true"],.colsbtn[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
#colsReset{background:var(--accent);color:#fff;border-color:var(--accent)}
#colsReset:hover{background:#f2603a}
.colspanel{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px;margin-bottom:14px}
.colspanel .hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.colspanel .hd h5{font-size:13px;letter-spacing:.04em}
.colspanel .hd .muted{font-size:12.5px}
.collist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px}
.colitem{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--bg-2);border:1px solid transparent;border-radius:3px;font-size:13.5px;color:var(--text-dim);cursor:grab}
.colitem[draggable="true"]:hover{border-color:var(--line)}
.colitem.dragging{opacity:.4}
.colitem.over{border-color:var(--accent)}
.colitem input{accent-color:var(--accent);margin:0;flex:none}
.colitem .gr{color:var(--mute-2);font-size:14px;letter-spacing:-1px;flex:none}
.colitem .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.colitem .lk{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);flex:none}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.card{border:1px solid var(--line);background:var(--surface);display:block;border-radius:var(--r);overflow:hidden}
.card:hover{border-color:var(--accent)}
.still{aspect-ratio:16/9;position:relative;border-bottom:1px solid var(--line);display:block;background-size:cover;background-position:center}
.still .av{position:absolute;right:9px;top:9px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:2px;background:rgba(31,31,31,.78);color:var(--text-dim)}
.s0{background:linear-gradient(145deg,#2b2b2b,#4a3a33 52%,#ED5023)}
.s1{background:linear-gradient(160deg,#242424,#503a33 55%,#c9552c)}
.s2{background:linear-gradient(135deg,#1f1f1f,#3d3733 50%,#a8562f)}
.s3{background:linear-gradient(150deg,#2a2622,#5a4034 48%,#ED5023)}
.s4{background:linear-gradient(140deg,#202020,#413531 52%,#b8552e)}
.s5{background:linear-gradient(155deg,#262322,#4c3b31 50%,#d95c2f)}
.cbody{padding:13px 14px 15px;display:block}
.cbody h4{font-size:15.5px;line-height:1.3;letter-spacing:-.01em}
.lic{display:block;margin:7px 0 0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 11px}
.chip{font-size:11.5px;letter-spacing:.04em;padding:2.5px 7px;border:1px solid var(--line);color:var(--mute);border-radius:2px}
.spec{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:12.5px;font-variant-numeric:tabular-nums;margin:0}
.spec dt{color:var(--mute-2)}
.spec dd{margin:0;color:var(--text-dim);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spec dd.dlic{font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:11.5px;color:var(--text)}

/* table */
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r);overscroll-behavior:contain}
table.tbl{width:auto;min-width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--mute);text-align:left;
  padding:10px 22px 10px 12px;border-bottom:1px solid var(--line);background:var(--surface);white-space:nowrap;
  position:sticky;top:0;z-index:3;max-width:260px;overflow:hidden;text-overflow:ellipsis}
/* the frozen first column */
.tbl th:first-child,.tbl td:first-child{position:sticky;left:0;box-shadow:1px 0 0 var(--line)}
.tbl th:first-child{z-index:5}
.tbl td:first-child{z-index:2;background:var(--bg)}
.tbl tbody tr:hover td:first-child{background:#2b2b2b}
/* dragging a column, spreadsheet style */
.tbl th[data-col]{cursor:grab;user-select:none}
.tbl th[data-col]:active{cursor:grabbing}
.tbl th.dragging{opacity:.45}
.tbl th.overL{background-image:linear-gradient(90deg,var(--accent) 0 3px,transparent 3px)}
.tbl th.overR{background-image:linear-gradient(270deg,var(--accent) 0 3px,transparent 3px)}
.tbl th.sortable{cursor:pointer;user-select:none}
.tbl th.sortable:hover{color:var(--text)}
.tbl th .ar{color:var(--accent);margin-left:5px}
.tbl th[aria-sort]{color:var(--text)}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums;color:var(--text-dim);
  white-space:normal;overflow-wrap:anywhere;max-width:260px;vertical-align:middle}
.tbl td.nm{font-weight:700;color:var(--text);min-width:180px;max-width:240px}
.tbl th:first-child{min-width:180px;max-width:240px}
/* the grip on a header's right edge */
/* (no position:relative here — it used to override the sticky header. A sticky
   cell is already a containing block for the absolute grip.) */
.rz{position:absolute;right:0;top:0;bottom:0;width:9px;cursor:col-resize;user-select:none}
.rz::after{content:"";position:absolute;right:3px;top:7px;bottom:7px;width:1px;background:var(--line)}
.rz:hover::after{background:var(--accent);right:2px;width:2px;top:3px;bottom:3px}
body.rzing{cursor:col-resize;user-select:none}
body.rzing .tbl th{cursor:col-resize}
.tbl td.avail{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.tbl td.avail.av-online{color:var(--text-dim)}
.tbl td.lic{color:var(--text-dim);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;display:table-cell;margin:0}
.tbl tbody tr:hover{background:rgba(255,255,255,.035)}
.locked-cell::after{content:"\2022\2022\2022";letter-spacing:.12em;color:var(--mute-2)}

/* request access */
.gate{border:1px solid var(--line);background:var(--surface);padding:18px;border-radius:var(--r)}
.gate h5{font-size:15px;margin:0 0 4px}
.gate p.sub{font-size:13.5px;color:var(--mute);margin:0 0 14px}
.rows{border:1px solid var(--line);background:var(--bg);padding:12px;border-radius:var(--r)}
.lrow{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;padding:5px 0;border-bottom:1px dotted var(--line-soft)}
.lrow:last-child{border-bottom:0}
.lrow span:first-child{color:var(--mute-2)}
.lrow span:last-child{color:var(--text-dim)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* detail */
.det{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);align-items:start}
.detmain{padding:24px 24px 60px;border-right:1px solid var(--line);min-width:0}
.detside{padding:24px 20px 60px;background:var(--bg-2)}
.crumb{font-size:12.5px;color:var(--mute);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.crumb a{color:var(--text-dim);border-bottom:1px dotted var(--mute-2)}
.crumb a:hover{color:var(--accent);text-decoration:none;border-bottom-color:var(--accent)}
.crumb .sep{color:var(--mute-2)}
.crumb .here{color:var(--text-dim)}
.detmain h1{font-size:33px;line-height:1.08}
.licbar{display:inline-block;margin:12px 0 0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);background:transparent;border:1px solid var(--line);border-left:3px solid var(--mute-2);padding:4px 10px;border-radius:3px}
.logline{color:var(--text-dim);font-size:15.5px;max-width:62ch;margin:14px 0 22px}
.detstill{aspect-ratio:2.35/1;border:1px solid var(--line);margin-bottom:22px;border-radius:var(--r)}
.specgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.specgrid>div{background:var(--surface);padding:12px 14px}
.specgrid .k{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-2)}
.specgrid .v{font-size:14.5px;color:var(--text);margin-top:4px;font-variant-numeric:tabular-nums;word-break:break-word}

/* admin */
.admin{padding-block:24px 80px}
.admin h1{font-size:27px}
.adminnav{display:flex;gap:8px;flex-wrap:wrap;font-size:13.5px;margin:16px 0 22px;
  border-bottom:1px solid var(--line);padding-bottom:0}
.adminnav a{font-weight:700;letter-spacing:.01em;color:var(--mute);padding:9px 14px;border-radius:var(--r) var(--r) 0 0;
  border:1px solid transparent;border-bottom:0;position:relative;top:1px}
.adminnav a:hover{color:var(--text);background:var(--bg-2);text-decoration:none}
.adminnav a.on{color:var(--text);background:var(--surface);border-color:var(--line);box-shadow:inset 0 2px 0 var(--accent)}
.panel{border:1px solid var(--line);background:var(--surface);padding:18px;margin-bottom:18px;border-radius:var(--r)}
.panel h3{font-size:16px;margin-bottom:8px}
.panel-toggle{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:0;
  margin:0 0 8px;color:inherit;text-align:left}
.panel-toggle h3{margin:0;flex:1}
.panel-toggle .caret{flex:none;width:9px;height:9px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);
  transform:rotate(45deg);margin-right:3px;transition:transform .12s ease}
.panel-toggle:hover .caret{border-color:var(--accent)}
.panel.shut .panel-toggle{margin-bottom:0}
.panel.shut .panel-toggle .caret{transform:rotate(-45deg)}
.panel.shut .panel-body{display:none}
.panel .tbl th{background:var(--surface-2)}
.field-edit{display:grid;grid-template-columns:200px minmax(0,1fr) 92px;gap:10px;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--line-soft)}
.field-edit>*{min-width:0}
.field-edit>label:last-child{display:flex;align-items:center;gap:6px;justify-self:end;white-space:nowrap;font-size:12.5px}
.field-edit label{font-size:12.5px;color:var(--mute);overflow-wrap:anywhere}
.tag-hidden{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:2px;font-size:10px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(237,80,35,.5);cursor:help}
.field-edit input,.field-edit textarea{background:var(--bg);border:1px solid var(--line);color:var(--text);padding:7px 9px;font-family:var(--body);font-size:13.5px;border-radius:3px;width:100%}
.field-edit.overridden input,.field-edit.overridden textarea{border-color:var(--accent)}
.badge{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:2px;border:1px solid var(--line);color:var(--mute)}
.badge.on{border-color:var(--accent);color:var(--accent)}
.warn{border-left:3px solid var(--danger);padding-left:12px}
.revoke{font-size:12.5px;color:var(--danger);white-space:nowrap}
.revoke:hover{color:#fff;background:var(--danger);padding:2px 6px;border-radius:3px;text-decoration:none}
.favtitle{font-size:23px;margin:0 0 10px}
/* the sign-up that has to be filled in — the library stays visible behind it */
.modal-force::backdrop{background:rgba(20,20,20,.38);backdrop-filter:blur(1.5px)}
.soon{border-left:3px solid var(--mute-2);padding-left:12px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--text-dim)}

@media(max-width:900px){
  .catbody{grid-template-columns:1fr}
  .rail{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line)}
  .det{grid-template-columns:1fr}
  .detmain{border-right:0;border-bottom:1px solid var(--line)}
  .tabs{grid-template-columns:1fr}
  .field-edit{grid-template-columns:1fr}
  .navlinks{display:none}
}
@media(max-width:720px){
  /* a phone must never scroll a table sideways: each row becomes a card, so
     there is nothing to freeze and nothing to scroll inside */
  .tablewrap{overflow:visible;max-height:none;border:0}
  .tbl th:first-child,.tbl td:first-child{position:static;box-shadow:none;background:transparent}
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{border:1px solid var(--line);margin-bottom:10px;padding:6px 0;border-radius:var(--r)}
  .tbl td{border:0;white-space:normal;display:flex;justify-content:space-between;gap:12px}
  .tbl td::before{content:attr(data-label);color:var(--mute-2);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;flex:none}
  .two{grid-template-columns:1fr}
}

/* ---- signed-in identity in the nav */
.who{font-size:13px;color:var(--mute);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn .ct{display:inline-block;min-width:17px;padding:0 4px;margin-left:5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11.5px;line-height:16px;text-align:center;font-weight:700}
.btn-b.on{border-color:var(--accent);color:var(--text)}
.linky{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer}

/* ---- the sign-up window */
.modal{border:1px solid var(--line);background:var(--bg-2);color:var(--text);border-radius:6px;
  padding:20px;width:min(440px,calc(100vw - 32px));position:relative;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.modal::backdrop{background:rgba(10,10,10,.72)}
.modal .gate{border:0;background:transparent;padding:0}
.modal .fineprint a{color:var(--accent)}
.modalx{position:absolute;right:10px;top:8px;background:none;border:0;color:var(--mute);font-size:23px;line-height:1;padding:4px 8px}
.modalx:hover{color:var(--text)}

/* ---- call to action strip */
.cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px;padding:12px 16px;
  border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--surface);border-radius:var(--r)}
.cta h5{font-size:14px;margin:0 0 2px}
.cta .muted{margin:0;max-width:70ch;font-size:13px}
.cta .btn{margin-left:auto}

/* ---- columns B and C */
.tbl td.linkcell{padding-top:6px;padding-bottom:6px}
.ext{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.05em;padding:4px 9px;border-radius:3px;
  border:1px solid var(--line);color:var(--text-dim);background:transparent;white-space:nowrap}
a.ext:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.ext.locked{color:var(--accent);border-color:rgba(237,80,35,.55);cursor:pointer}
.ext.locked:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---- the links block on a project page */
.links{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.lnk{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--mute);padding:9px 14px;
  border:1px solid var(--line);border-radius:var(--r);background:transparent;text-align:left}
.lnk b{font-size:13.5px;color:var(--text)}
a.lnk.on:hover{border-color:var(--accent);text-decoration:none}
a.lnk.on:hover b{color:var(--accent)}
.lnk.locked{border-style:dashed;cursor:pointer}
.lnk.locked b{color:var(--accent)}
.lnk.locked:hover{border-style:solid;border-color:var(--accent)}
.lnk.off{opacity:.5}
.lnk.off b{color:var(--mute-2)}

/* ---- saving */
.titlerow{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.titlerow h1{flex:1;min-width:0}
.wishform{margin:0}
.wish{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:8px 13px;
  border:1px solid var(--line);border-radius:var(--r);background:transparent;color:var(--text-dim);white-space:nowrap}
.wish .star{font-size:15px;line-height:1}
.wish:hover{border-color:var(--accent);color:var(--text)}
.wish.on{border-color:var(--accent);color:var(--accent)}
.cardwrap{position:relative}
.wishdot{position:absolute;left:9px;top:9px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:rgba(31,31,31,.8);color:var(--text-dim);font-size:16px;line-height:1;padding:0;z-index:2}
.wishdot:hover{border-color:var(--accent);color:var(--accent)}
.wishdot.on{color:var(--accent);border-color:var(--accent)}
.wishdot:disabled{opacity:.5}


@media(max-width:720px){
  .cta .btn{margin-left:0;width:100%}
  .tbl td.linkcell{justify-content:space-between}
}


/* ---- the catalog as an app shell.
   The page itself does not scroll: the nav, the three status cards and the
   toolbar are fixed, and the table is its own scroll box. That is what makes
   the frozen header row and frozen first column hold — a sticky cell only
   sticks to the box that scrolls, so the box has to be the table. */
body.app{height:100vh;overflow:hidden;display:flex;flex-direction:column}
body.app .nav{flex:none}
body.app .catbody{flex:1;min-height:0;align-items:stretch}
body.app .rail{position:static;max-height:none;height:100%;overflow-y:auto}
body.app .results{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:16px}
body.app .resbar,body.app .colspanel,body.app .cta,body.app .ok{flex:none}
body.app .cta{margin-top:0;margin-bottom:14px}
body.app #out{flex:1;min-height:0;overflow:auto}
body.app #out .tablewrap{height:100%}
body.app #out .grid{padding-bottom:8px}

@media(max-width:900px){
  /* back to an ordinary page: the rail sits above the results and nothing
     is frozen, so nothing needs its own scroll box */
  body.app{height:auto;overflow:visible;display:block}
  body.app .results,body.app .rail{height:auto;overflow:visible;display:block}
  body.app #out{overflow:visible}
  body.app #out .tablewrap{height:auto}
}


@media(max-width:560px){
  /* the nav is one row of buttons too wide for a phone: break the line
     after the logo and let the controls sit underneath */
  .nav{flex-wrap:wrap;height:auto;min-height:56px;padding:8px 14px;gap:8px;row-gap:6px}
  .nav .sp{flex-basis:100%;height:0;margin:0}
  .logo .sub{display:none}
  .logo img{height:22px}
  .btn{padding:7px 11px;font-size:12.5px}
  .who{display:none}
  .resbar{gap:8px}
  .seg button{padding:6px 11px}
}


/* ---- save star in List view */
.tbl td.nm{display:table-cell}
.wishrow{background:none;border:0;padding:0 8px 0 0;margin:0;color:var(--mute-2);font-size:15px;line-height:1;vertical-align:baseline}
.wishrow:hover{color:var(--accent)}
.wishrow.on{color:var(--accent)}
.wishrow:disabled{opacity:.5}
@media(max-width:720px){
  .tbl td.nm{display:flex}
  .wishrow{padding:0 8px 0 0}
}


/* ---- Update 10: beta banner, featured strip */
.beta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:7px 16px;
  background:var(--accent);color:#fff;font-size:13.5px;font-weight:500;line-height:1.35;text-align:center}
.betatag{font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  border:1.5px solid #fff;border-radius:3px;padding:1px 8px 0}
body.app .beta{flex:none}

.featured{flex:none;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);padding:10px 12px 12px}
.featured[hidden]{display:none}
.feathd{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:0;color:inherit;text-align:left}
.feathd .eyebrow{margin:0}
.feathd .n{font-size:12px;color:var(--mute-2)}
.feathd .caret{margin-left:auto;width:8px;height:8px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg);margin-right:4px}
.featured.shut .caret{transform:rotate(-45deg)}
.featured.shut .featrow{display:none}
.featrow{display:flex;gap:12px;overflow-x:auto;margin-top:10px;padding-bottom:4px;scroll-snap-type:x proximity}
.fcard{flex:0 0 250px;display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);overflow:hidden;scroll-snap-align:start}
.fcard:hover{border-color:var(--accent)}
.fthumb{display:block;height:54px;position:relative}
.fthumb .av{position:absolute;right:7px;top:7px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:2px;background:rgba(31,31,31,.78);color:var(--text-dim)}
.fbody{display:block;padding:9px 11px 11px}
.fbody b{display:block;font-size:14.5px;line-height:1.25}
.fmeta{display:block;font-size:12px;color:var(--mute);margin-top:3px}
.fl2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;color:var(--text-dim);margin-top:6px;line-height:1.4}
.featbtn{font-size:12px;font-weight:700;padding:4px 9px;border-radius:3px;border:1px solid var(--line);background:transparent;color:var(--mute);white-space:nowrap}
.featbtn:hover{border-color:var(--accent);color:var(--accent)}
.featbtn.on{border-color:var(--accent);color:var(--accent)}
@media(max-width:900px){ .fcard{flex-basis:220px} }

.badge.hid{border-color:var(--danger);color:var(--danger);margin-left:6px;white-space:nowrap}
.hidnote{font-size:13.5px;color:var(--text-dim);border-left:3px solid var(--danger);padding:6px 0 6px 12px;margin:10px 0 0}
.hidnote a{color:var(--accent);text-decoration:underline}
.cnt .more{color:var(--mute-2)}
.cnt .more a{color:var(--accent);text-decoration:underline}

/* ---- Update 11: the two libraries, a firmer sign-up backdrop */
.libtabs{display:flex;gap:0;margin-bottom:12px;border-bottom:1px solid var(--line);flex:none}
.libtabs[hidden],.libnote[hidden]{display:none}
.libtabs button{background:none;border:0;border-bottom:3px solid transparent;padding:6px 18px 9px 0;margin-right:22px;
  text-align:left;color:var(--mute);display:flex;flex-direction:column;gap:1px;position:relative;top:1px}
.libtabs button b{font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:-.01em;color:var(--mute)}
.libtabs button span{font-size:12.5px;color:var(--mute-2)}
.libtabs button:hover b{color:var(--text)}
.libtabs button[aria-selected="true"]{border-bottom-color:var(--accent)}
.libtabs button[aria-selected="true"] b{color:var(--text)}
.libnote{flex:none;font-size:13.5px;color:var(--text-dim);border:1px solid var(--line);border-left:3px solid var(--scaling);
  background:var(--surface);border-radius:var(--r);padding:10px 14px;margin:0 0 12px;line-height:1.5}
.libnote b{color:var(--text)}
.libnote a{color:var(--accent);text-decoration:underline}
.modal-force::backdrop{background:rgba(12,12,12,.78);backdrop-filter:blur(3px)}
.grantform .two{align-items:center}

/* ---- Update 12: search above the table, frozen columns, wider genre/camera */
.chips-row:empty{display:none}
.chips-row{margin:0 0 12px}
.tabletop{flex:none;display:flex;align-items:center;gap:12px;margin:0 0 10px}
.tabletop .search{max-width:320px}
.tbl th.pin,.tbl td.pin{position:sticky}
.tbl td.pin{z-index:2;background:var(--bg)}
.tbl th.pin{z-index:6}
.tbl tbody tr:hover td.pin{background:#2b2b2b}
.tbl .pinlast{box-shadow:1px 0 0 var(--line),6px 0 8px -6px rgba(0,0,0,.6)}
.tbl th:not(.pinlast):first-child,.tbl td:not(.pinlast):first-child{box-shadow:none}
.tbl th.wider,.tbl td.wider{max-width:300px}
/* admin tables: their own scroll box, so the header row stays put */
.admin .tablewrap{max-height:72vh}
.admin .tbl th{position:sticky;top:0}
@media(max-width:720px){
  .tbl th.pin,.tbl td.pin{position:static}
  .admin .tablewrap{max-height:none}
}

/* ---- Update 13: Shopify stills */
.still[style*="background-image"],.fthumb[style*="background-image"],.detstill[style*="background-image"]{
  background-size:cover;background-position:center;background-repeat:no-repeat}
.fthumb{height:90px}
.imgpick{display:flex;flex-wrap:wrap;gap:10px}
.imgopt{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-size:12px;color:var(--mute)}
.imgopt input{accent-color:var(--accent)}
.imgopt img{width:150px;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--line);border-radius:3px}
.imgopt input:checked + img,.imgopt input:checked + .auto{border-color:var(--accent)}
.imgopt .auto{width:150px;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:2px solid var(--line);border-radius:3px;color:var(--text-dim);font-size:13px;text-align:center}

/* ---- Update 14: Suggested Projects — the one block on the page that glows */
@property --sgang{syntax:'<angle>';inherits:false;initial-value:0deg}
.featured{position:relative;border:0;border-radius:10px;padding:16px 18px 18px;margin:0 0 16px;isolation:isolate;
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(237,80,35,.22),transparent 55%),
    radial-gradient(90% 120% at 100% 100%,rgba(217,160,90,.14),transparent 60%),
    #262220}
.featured::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:-1;
  background:conic-gradient(from var(--sgang),#ED5023,#f2a65a,#ED5023 40%,rgba(237,80,35,.15) 60%,#ED5023);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:sgspin 9s linear infinite}
@keyframes sgspin{to{--sgang:360deg}}
.feathd{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:0;color:inherit;text-align:left}
.sgstar{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:#fff;
  background:radial-gradient(circle at 35% 30%,#ff8a5c,#ED5023 60%,#b83a14);box-shadow:0 0 0 4px rgba(237,80,35,.18),0 0 22px rgba(237,80,35,.45)}
.sgtitle{display:flex;flex-direction:column;font-family:var(--display);font-size:22px;line-height:1.1;letter-spacing:-.01em;color:#fff}
.sgtitle small{font-family:var(--body);font-size:13px;letter-spacing:0;color:var(--text-dim);margin-top:4px}
.sgtoggle{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.feathd:hover .sgtoggle{color:var(--text)}
.featured .caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 2px 3px 0}
.featured.shut .caret{transform:rotate(-135deg);margin-bottom:-3px}
.featured.shut{padding-bottom:16px}
.featrow{display:flex;gap:14px;overflow-x:auto;margin-top:14px;padding:2px 2px 6px;scroll-snap-type:x proximity}
.fcard{flex:0 0 250px;background:var(--surface);border:1px solid rgba(255,255,255,.06);border-radius:8px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.fcard:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 24px rgba(0,0,0,.45),0 0 0 1px var(--accent)}
.fthumb{height:auto;aspect-ratio:16/9}
.fnum{position:absolute;left:8px;bottom:6px;font-family:var(--display);font-size:30px;line-height:1;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.7);letter-spacing:-.02em}
.fbody b{font-size:15px}
@media(prefers-reduced-motion:reduce){.featured::before{animation:none}.fcard{transition:none}.fcard:hover{transform:none}}
@media(max-width:560px){.sgtitle{font-size:18px}.sgtitle small{display:none}.fcard{flex-basis:210px}}

.detmain .detstill{margin-top:16px}
.detmain .detstill + .logline{margin-top:0}

/* ---- Update 15: Contact us, always recruiting */
.contactfab{position:fixed;right:22px;bottom:22px;z-index:40;display:flex;align-items:center;gap:9px;
  padding:13px 20px 13px 16px;border:0;border-radius:999px;background:var(--accent);color:#fff;
  font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:.01em;
  box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 0 4px rgba(237,80,35,.18);transition:transform .15s ease,box-shadow .15s ease}
.contactfab:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.55),0 0 0 6px rgba(237,80,35,.22)}
.cf-dot{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#contactModal{width:min(520px,calc(100vw - 32px))}
#contactModal .two{grid-template-columns:1fr 1fr;gap:10px}
.recruit{display:flex;align-items:center;gap:10px;margin-left:8px;padding:7px 14px;border-radius:999px;
  border:1px solid rgba(237,80,35,.6);background:rgba(237,80,35,.12);color:var(--text);font-size:14px;white-space:nowrap}
.recruit b{font-weight:700}
.recruit .rcta{color:var(--accent);font-weight:700}
.recruit:hover{background:var(--accent);border-color:var(--accent)}
.recruit:hover .rcta{color:#fff}
.rdot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(237,80,35,.6);animation:rpulse 2.2s ease-out infinite}
.recruit:hover .rdot{background:#fff}
@keyframes rpulse{0%{box-shadow:0 0 0 0 rgba(237,80,35,.6)}70%{box-shadow:0 0 0 9px rgba(237,80,35,0)}100%{box-shadow:0 0 0 0 rgba(237,80,35,0)}}
@media(prefers-reduced-motion:reduce){.rdot{animation:none}.contactfab{transition:none}}
@media(max-width:1250px){.recruit .rcta{display:none}}
@media(max-width:1000px){.recruit{display:none}}
@media(max-width:560px){.contactfab{right:14px;bottom:14px;padding:11px 16px 11px 13px;font-size:14px}
  #contactModal .two{grid-template-columns:1fr}}

/* ---- Update 16: teams */
.invitebtn{display:inline-flex;align-items:center;gap:7px}
.ivplus{font-size:16px;line-height:1;font-weight:700}
.teambar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:-2px 0 14px;padding:10px 14px;flex:none;
  border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--surface);border-radius:var(--r);font-size:14px;color:var(--text-dim)}
.teambar b{color:var(--text)}
.teambar .colsbtn{margin-left:auto}
#inviteModal{width:min(520px,calc(100vw - 32px))}
#inviteModal .two{grid-template-columns:1fr 1fr;gap:10px}
.teamrows{margin-top:4px}
.teamrows .lrow{align-items:center;font-size:13.5px}
.teamrows .lrow span:first-child{color:var(--text)}
.teamrows small{display:block;color:var(--mute-2);font-size:11.5px}
.teamrows i{color:var(--mute);font-style:normal}
@media(max-width:1100px){.who{display:none}}
@media(max-width:560px){#inviteModal .two{grid-template-columns:1fr}}
.teamrows .lrow span.muted{color:var(--mute-2)}

/* ---- Update 17 */
/* .stack input is width:100% for text fields — a checkbox inside .stack must
   not inherit that, or its label is pushed off the right edge. */
.stack input[type="checkbox"],.stack input[type="radio"]{width:auto;flex:none}
.grantform .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.grantform .chk{white-space:normal}
/* admin panels: drag to reorder */
.panel-toggle{cursor:pointer}
.panel-grip{flex:none;cursor:grab;color:var(--mute-2);font-size:15px;letter-spacing:-1px;padding:2px 4px;user-select:none;line-height:1}
.panel-grip:hover{color:var(--accent)}
.panel.dragging{opacity:.45}
.panel.dropbefore{box-shadow:0 -3px 0 var(--accent)}
.panel.dropafter{box-shadow:0 3px 0 var(--accent)}
.panel-head{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.panel-head .panel-toggle{margin:0}
.panel.shut .panel-head{margin-bottom:0}
.adminbar{display:flex;gap:10px;align-items:center;margin:-8px 0 14px;font-size:12.5px;color:var(--mute-2)}
.adminbar .linky{font-size:12.5px}
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:6px}
.glance>div{background:var(--bg-2);padding:12px 14px}
.glance .k{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-2)}
.glance .v{font-family:var(--display);font-size:24px;line-height:1.15;margin-top:4px}
.glance .d{font-size:12.5px;color:var(--mute);margin-top:4px;line-height:1.4}
.glance .d a{color:var(--accent);text-decoration:underline}
.glance .bad .v{color:var(--danger)}
.glance .good .v{color:var(--good)}


/* ---- Update 18: dataset totals above the results */
.dstotals{flex:none;margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:12px 14px}
.dstotals[hidden]{display:none}
.dstop{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.dstop .eyebrow{margin:0}
.dsof{font-size:13px;color:var(--accent);font-weight:700;white-space:nowrap}
.dsrow{display:flex;gap:28px;flex-wrap:wrap}
.dstile{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.dsn{font-family:var(--display);font-size:26px;color:var(--text);line-height:1}
.dsl{font-size:13.5px;color:var(--text-dim)}
@media(max-width:560px){.dsrow{gap:6px 18px}.dsn{font-size:21px}}