/* Studio dashboard. Studio Manager's shape (tiles, tabs, sheets, press
   feedback) on the isou.ca cream / ink / green palette that gallery.css
   already carries, so the three surfaces read as one studio. */

.studio-page main{min-height:calc(100svh - 68px);padding-bottom:48px}
.studio-page .wrap{width:min(1180px,calc(100% - 48px))}

/* ---- Icons ---------------------------------------------------------- */
.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- Primary tabs. Underline tabs on desktop, bottom bar on phones. --- */
.tabs{position:sticky;top:68px;z-index:9;background:rgba(247,243,238,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.tabs .wrap{display:flex;align-items:center;gap:4px;height:54px}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:0 14px;height:54px;font-size:13px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}
.tabs a.on{color:var(--ink);border-bottom-color:var(--green)}
.tabs a.on .ic{color:var(--green)}
.tabs a.cta{order:10;margin-left:auto;height:36px;padding:0 16px;border-radius:999px;background:var(--green);color:var(--cream);border:0;font-weight:600;transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s}
.tabs a.cta.on{background:var(--ink)}

/* ---- Screen header (ScreenHeader) ----------------------------------- */
.screen{padding:34px 0 20px}
.screen h1{font-size:clamp(30px,4.5vw,46px)}
.screen .eyebrow{margin-bottom:10px}
.screen .sub{color:var(--muted);margin-top:10px;font-size:14px}
.screen .row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:4px 0 20px}
.toolbar input{flex:1 1 220px;max-width:340px;padding:10px 16px;border-radius:999px;font-size:13px;background:#fff}

/* ---- Segmented control (SegmentedControl) ---------------------------- */
.pseg{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--cream-2);max-width:100%;overflow-x:auto;scrollbar-width:none}
.pseg::-webkit-scrollbar{display:none}
.pseg a,.pseg button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--muted);border:0;background:none;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,transform 90ms}
.pseg a:active,.pseg button:active{transform:scale(.97)}
.pseg .on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(28,28,30,.1)}
.pseg .n{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
/* One pill slides between states (Studio Manager's segmented control): the
   indicator is translated to the active item in 350 ms on the standard curve,
   no bounce. Items go transparent once the indicator is in place. */
.pseg .pseg-ind{position:absolute;top:3px;left:0;height:calc(100% - 6px);width:0;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(28,28,30,.1);transform:translateX(var(--x,0px));transition:transform var(--dur-slide) var(--ease-standard),width var(--dur-slide) var(--ease-standard);pointer-events:none;z-index:0}
.pseg.live .pseg-ind{width:var(--w,0px)}
.pseg.live .on{background:transparent;box-shadow:none}
.pseg .pseg-ind.still{transition:none}

/* ---- Tiles (OverviewCard / AttentionTile) ---------------------------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{display:flex;flex-direction:column;justify-content:space-between;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;color:inherit;text-align:left;font-family:inherit;cursor:pointer;transition:transform 90ms cubic-bezier(.22,1,.36,1),box-shadow .2s}
.tile:active{transform:scale(.985)}
.tile .lbl{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;font-size:12px;font-weight:500;color:var(--muted)}
.tile .lbl .ic{width:15px;height:15px}
.tile .val{margin-top:14px;font-family:'Almarai',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.tile .cap{margin-top:7px;font-size:11px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile.fill{background:var(--green);border-color:var(--green);color:var(--cream)}
.tile.fill .lbl,.tile.fill .cap{color:rgba(247,243,238,.8)}
.rail{height:4px;background:var(--cream-2);border-radius:999px;overflow:hidden;margin-top:10px}
/* Bars scale on transform, never width, so they stay on the compositor. --p is 0..1. */
.rail i{display:block;height:100%;width:100%;transform:scaleX(var(--p,0));transform-origin:left;background:var(--green);border-radius:999px;transition:transform .5s var(--ease-out)}
.tile.fill .rail{background:rgba(247,243,238,.25)}
.tile.fill .rail i{background:rgba(247,243,238,.85)}
/* Attention tile: a glyph in a toned ring, the count opposite, the label under. */
.tile.att .lbl{align-items:center}
.ring{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}
.ring .ic{width:15px;height:15px}
.ring.warn{background:var(--warn);color:var(--warn-ink)}
.ring.crit{background:var(--crit);color:#fff}
.ring.ok{background:var(--green);color:var(--cream)}
.ring.calm{background:var(--sage);color:var(--green)}
.tile.att .cnt{font-family:'Almarai',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.tile.att .nm{margin-top:12px;font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.att .cap{margin-top:3px}

/* ---- Sections ------------------------------------------------------- */
.sect{margin-top:30px}
.sect-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.sect-h h2{font-size:17px}
.sect-h a,.sect-h .n{font-size:12px;color:var(--green);font-weight:600}
.sect-h .n{color:var(--muted);font-weight:500}

/* ---- Gallery tiles -------------------------------------------------- */
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.gt{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;color:inherit;padding:0;transition:transform 90ms cubic-bezier(.22,1,.36,1),box-shadow .2s}
.gt:active{transform:scale(.985)}
.cv{aspect-ratio:16/10;background:linear-gradient(140deg,var(--sage),var(--cream-2));position:relative;overflow:hidden}
.cv img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.cv .blank{position:absolute;inset:0;display:grid;place-items:center;color:var(--green);opacity:.45}
.cv .blank .ic{width:28px;height:28px;stroke-width:1.5}
.cv .pills{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:rgba(28,28,30,.72);color:var(--cream);white-space:nowrap}
.pill .ic{width:10px;height:10px}
.pill.lock{background:var(--cream);color:var(--green)}
.pill.warn{background:var(--warn);color:var(--warn-ink)}
.pill.light{background:var(--cream-2);color:var(--muted)}
.pill.ok{background:rgba(45,85,35,.12);color:var(--green)}
.gt .bd{padding:12px 14px 14px}
.gt h3{font-size:15px;line-height:1.15;letter-spacing:-.01em;text-transform:none;font-family:'Inter',system-ui,sans-serif;font-weight:600}
.gt .sl{font-size:11px;color:var(--muted);margin-top:3px}
.gt .mt{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:10px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.gt .mt b{color:var(--ink);font-weight:500}
.gt .mt .bad{color:var(--danger)}

/* ---- Gallery detail ------------------------------------------------- */
.back{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--green);font-weight:600;margin-top:24px}
.back .ic{width:18px;height:18px}
.dhead{display:flex;gap:20px;align-items:flex-start;padding:16px 0 18px}
.dhead .cv{width:132px;aspect-ratio:4/3;border-radius:10px;flex:none;border:1px solid var(--line)}
.dhead .ttl{min-width:0;flex:1}
.dhead h1{font-size:clamp(24px,3.6vw,38px);word-break:break-word}
.dhead .sl{font-size:13px;color:var(--muted);margin-top:6px}
.dhead .pills{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 0}
.dhead .pills .pill{background:var(--cream-2);color:var(--ink)}
.dhead .pills .pill.lock{background:var(--ink);color:var(--cream)}
.dhead .pills .pill.warn{background:var(--warn);color:var(--warn-ink)}
.dhead .pills .pill.ok{color:var(--green)}
.dhead .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.subtabs{margin:4px 0 18px}

/* ---- Cards / sheets ------------------------------------------------- */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.card2{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.card2 h3{font-size:15px;margin-bottom:14px;text-transform:none;font-family:'Inter',system-ui,sans-serif;font-weight:600;letter-spacing:-.01em}
.card2 h3 .ic{vertical-align:-3px;margin-right:6px;color:var(--green)}
.card2 .field:last-child{margin-bottom:0}
.card2.danger{border-color:var(--danger-line)}
.card2.danger h3 .ic{color:var(--danger)}
.card2 + .card2{margin-top:14px}
.two > .card2{margin-top:0}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:first-of-type{padding-top:0}
.kv:last-child{border-bottom:0;padding-bottom:0}
.kv .k{color:var(--muted);font-size:12px;flex:none}
.kv .v{text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}
.linkbox{display:flex;gap:8px;align-items:center;background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:8px 8px 8px 14px;font-size:14px}
.linkbox span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.btn.icon .ic{width:14px;height:14px}
.btn.danger{color:var(--danger);border-color:var(--danger-line)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center}
.form-note{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.field .pseg{margin-bottom:2px}

/* ---- Lists (ListRow) ------------------------------------------------ */
.lrow{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;cursor:pointer;text-align:left;background:none;border-left:0;border-right:0;border-top:0;width:100%;font-family:inherit;color:inherit}
.lrow:last-child{border-bottom:0}
.lrow .av{width:34px;height:34px;border-radius:50%;background:var(--sage);color:var(--green);display:grid;place-items:center;font-weight:600;font-size:12px;flex:none;text-transform:uppercase}
.lrow .tx{flex:1;min-width:0}
.lrow .tx b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .tx span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .tr{flex:none;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.lrow:active{opacity:.6}
.empty2{padding:48px 20px;text-align:center;color:var(--muted);font-size:14px;background:#fff;border:1px dashed var(--line);border-radius:var(--r)}
.empty2 h3{font-size:18px;margin-bottom:6px;color:var(--ink)}

/* ---- Uploads -------------------------------------------------------- */
.ufile{margin-bottom:12px}
.ufile .nm{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.ufile .nm span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Responsive ----------------------------------------------------- */
.two > *{min-width:0}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles.three{grid-template-columns:repeat(2,minmax(0,1fr))}.two{grid-template-columns:minmax(0,1fr)}.field .pseg{display:flex;flex-wrap:wrap}.field .pseg button{flex:1 1 auto;justify-content:center}}
@media(max-width:760px){
  /* ---- Phone: Studio Manager's app shape. System sans, no editorial caps,
     compact translucent chrome, white grouped lists, chips, bottom bar. ---- */
  :root{--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif}
  body{font-family:var(--sans)}
  .studio-page .wrap{width:calc(100% - 32px)}
  .studio-page main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  header{background:rgba(247,243,238,.8);backdrop-filter:blur(24px) saturate(180%);border-bottom:0;box-shadow:0 .5px 0 0 var(--line)}
  header .wrap{height:52px}
  header .wordmark{font-size:16px}
  header nav{gap:10px}
  header nav .site-link,header .meta{display:none}
  header .btn{padding:7px 12px;font-size:12px}
  /* Bottom bar: four destinations around a raised create button. */
  .tabs{position:fixed;top:auto;bottom:0;left:0;right:0;border-bottom:0;border-top:0;box-shadow:0 -.5px 0 0 var(--line);padding-bottom:env(safe-area-inset-bottom);background:rgba(247,243,238,.82);backdrop-filter:blur(24px) saturate(180%)}
  .tabs .wrap{width:100%;height:56px;gap:0;justify-content:space-around}
  .tabs a{flex:1;flex-direction:column;justify-content:center;gap:4px;height:56px;padding:0 4px;font-size:10.5px;font-weight:500;border-bottom:0;margin:0;color:var(--muted)}
  .tabs a .ic{width:22px;height:22px;stroke-width:1.8}
  .tabs a.on{color:var(--green)}
  .tabs a.cta{order:0;flex:0 0 auto;margin:-28px 6px 0;width:56px;height:56px;padding:0;border-radius:50%;box-shadow:0 10px 24px rgba(45,85,35,.35),0 0 0 4px var(--cream)}
  .tabs a.cta span{display:none}
  .tabs a.cta .ic{width:24px;height:24px}
  /* Screen header: big bold sans title, subtitle under it. */
  .screen{padding:18px 0 14px}
  .screen .eyebrow{display:none}
  .screen h1,.dhead h1,h2,h3{font-family:var(--sans);text-transform:none;letter-spacing:-.024em;line-height:1.08}
  .screen h1{font-size:30px;font-weight:700}
  .screen .sub{font-size:14px;margin-top:4px}
  .screen .row{align-items:center}
  .screen .row > .btn{padding:0;width:40px;height:40px;border-radius:50%;font-size:0}
  .screen .row > .btn:before{content:'+';font-size:24px;line-height:1;font-weight:400}
  .screen .row .actions{flex:none}
  .sect{margin-top:22px}
  .sect-h h2{font-size:20px;font-weight:700}
  .sect-h a{font-size:13px}
  /* Search pill and filter chips, as on Work / Projects. */
  .toolbar{flex-direction:column-reverse;align-items:stretch;gap:10px;margin:0 0 14px}
  .toolbar input{flex:0 0 auto;max-width:none;background:var(--cream-2);border-color:transparent;padding:12px 16px 12px 40px;font-size:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364665c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px center;background-size:17px}
  .toolbar input:focus{border-color:var(--green)}
  .toolbar .pseg{background:none;padding:0;gap:8px;margin:0 -16px;padding:0 16px;border-radius:0}
  .toolbar .pseg a{border:1px solid var(--line);background:#fff;padding:8px 14px;font-size:14px;color:var(--ink)}
  .toolbar .pseg .on{background:var(--green);border-color:var(--green);color:var(--cream);box-shadow:none}
  .toolbar .pseg .on .n{color:rgba(247,243,238,.8)}
  /* Chips: the sliding pill is the green fill, the chip border stays. */
  .toolbar .pseg .pseg-ind{top:0;height:100%;background:var(--green);box-shadow:none}
  .toolbar .pseg.live .on{background:transparent;border-color:var(--green)}
  /* Tiles: same 2-up as Today. */
  .tiles{gap:10px}
  .tile{padding:14px;border-radius:12px}
  .tile .val,.tile.att .cnt{font-family:var(--sans);font-weight:700;letter-spacing:-.02em}
  .tile .val{font-size:26px;margin-top:12px}
  .tile .lbl{font-size:13px}
  .tile .cap{font-size:12px}
  /* Galleries as a grouped list of rows, not cover cards. */
  .glist{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .grow{display:flex;align-items:center;gap:12px;padding:11px 12px 11px 12px;border-bottom:1px solid var(--line);color:inherit;min-height:66px}
  .grow:last-child{border-bottom:0}
  .grow:active{background:var(--cream)}
  .grow .th{width:48px;height:48px;border-radius:10px;overflow:hidden;flex:none;background:linear-gradient(140deg,var(--sage),var(--cream-2));display:grid;place-items:center;color:var(--green)}
  .grow .th img{width:100%;height:100%;object-fit:cover}
  .grow .th .ic{opacity:.5}
  .grow .tx{flex:1;min-width:0}
  .grow .tx b{display:block;font-size:16px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .grow .tx span{display:block;font-size:13px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .grow .tr{flex:none;display:flex;align-items:center;gap:8px;color:var(--muted)}
  .grow .tr .pill{letter-spacing:0;text-transform:none;font-size:12px;font-weight:500;padding:4px 10px}
  .grow .tr .pill.ok{background:rgba(45,85,35,.12);color:var(--green)}
  .grow .tr .pill.lock{background:var(--cream-2);color:var(--ink)}
  .grow .tr .pill.light{background:var(--cream-2);color:var(--muted)}
  .grow .tr .ic{width:16px;height:16px}
  /* Detail: cover banner, title, then actions and chips. */
  .back{margin-top:14px;font-size:15px}
  .dhead{flex-direction:column;gap:12px;padding:10px 0 12px}
  .dhead .cv{width:100%;aspect-ratio:16/9;border-radius:12px}
  .dhead h1{font-size:26px;font-weight:700}
  .dhead .sl{font-size:13px}
  .dhead .pills .pill{letter-spacing:0;text-transform:none;font-size:12px;font-weight:500;padding:5px 10px}
  .dhead .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .dhead .acts .btn{width:100%}
  .subtabs{margin:0 -16px 14px;padding:0 16px}
  .subtabs .pseg{display:flex}
  .subtabs .pseg a{flex:1;justify-content:center}
  /* Cards and forms, Studio Manager's sign-in look: plain labels, white fields, tall buttons. */
  .card2{padding:16px;border-radius:14px}
  .card2 h3{font-size:17px;font-weight:600;margin-bottom:12px}
  label{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:6px}
  input,select,textarea{background:#fff;padding:12px 14px;font-size:16px;border-radius:12px}
  select{padding-right:40px}
  .field{margin-bottom:14px}
  .form-note{font-size:12.5px}
  .btn.primary:not(.sm){padding:15px 22px;border-radius:12px;font-size:16px}
  .chk span{font-size:15px}
  .kv{font-size:15px}
  .kv .k{font-size:13px}
  .linkbox{font-size:13px}
  .drop{padding:24px 16px;font-size:15px}
  .empty2{padding:36px 16px}
  .banner{font-size:14px;border-radius:12px}
  .lrow .tx b{font-size:16px}
}
@media(max-width:420px){.tiles{gap:10px}.tile{padding:13px}.tile .val{font-size:22px}}
@media(prefers-reduced-motion:reduce){.tile,.gt{transition:opacity .15s linear}.tile:active,.gt:active{transform:none;opacity:.6}}

/* ---- Dropdowns, file rows, banners (create flow, 2026-10-14) ---------- */
select{appearance:none;-webkit-appearance:none;width:100%;padding:13px 40px 13px 15px;border:1px solid var(--line);border-radius:10px;background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364665c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px;font-family:inherit;font-size:15px;color:var(--ink);cursor:pointer}
select:focus{outline:none;border-color:var(--green)}
.frow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.frow:last-child{border-bottom:0}
.frow .kind{color:var(--muted);display:inline-flex}
.frow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .sz{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
.frow .x{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;font-family:inherit}
.frow .x[disabled]{opacity:.4}
.banner{display:flex;align-items:center;gap:12px;background:rgba(45,85,35,.08);border:1px solid rgba(45,85,35,.25);border-radius:var(--r);padding:14px 16px;margin-bottom:14px;font-size:14px;color:var(--ink)}
.banner .ic{color:var(--green);flex:none}
.pill.draft{background:var(--warn);color:var(--warn-ink)}
.gt.isdraft .cv{opacity:.85}
.gt.isdraft{border-style:dashed}

/* ---- Workspace: sets sidebar + file grid (Pixieset collection page) ---- */
.ws{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.ws-sets{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px;position:sticky;top:136px}
.ws-h{display:flex;justify-content:space-between;align-items:baseline;padding:6px 8px 10px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.setrow{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:none;color:var(--ink);font-family:inherit;font-size:14px;text-align:left;cursor:pointer;position:relative}
.setrow .ic{color:var(--muted);flex:none}
.setrow > span:not(.setacts){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setrow em{font-style:normal;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.setrow.on{background:var(--cream-2);font-weight:600}
.setrow.on .ic{color:var(--green)}
.setacts{display:none;flex:none;gap:2px;margin:-4px -6px -4px 0;background:#fff;border-radius:8px;padding:2px}
.setrow.on .setacts{display:flex}
.setrow.on em{display:none}
.setacts button{width:24px;height:24px;border:0;background:none;border-radius:6px;color:var(--muted);cursor:pointer;font-family:inherit;font-size:12px;display:grid;place-items:center}
.setacts button[disabled]{opacity:.3}
.setacts .ic{width:12px;height:12px}
.addset{display:flex;gap:6px;margin:8px 0 4px;padding:8px 0 0;border-top:1px solid var(--line)}
.addset input{padding:9px 12px;font-size:13px;border-radius:999px}
.addset .btn{padding:8px 14px;flex:none}
.suggest{display:flex;flex-wrap:wrap;gap:6px;padding:8px 4px 2px;align-items:center}
.suggest .note{width:100%;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.suggest button{border:1px dashed var(--line);background:none;border-radius:999px;padding:5px 10px;font-size:12px;color:var(--green);font-family:inherit;cursor:pointer}
.ws-main{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;min-height:360px}
.ws-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ws-title h3{font-size:17px;text-transform:none;font-family:'Inter',system-ui,sans-serif;font-weight:600;letter-spacing:-.01em}
.ws-title .note{display:block;margin-top:2px}
.ws-acts{display:flex;gap:8px}
.ws-acts label.btn{cursor:pointer}
.selbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin-bottom:12px;font-size:13px}
.selbar select{width:auto;padding:8px 36px 8px 12px;font-size:13px;background-color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
/* Photos tab layouts: Tiles (default squares), Large (bigger squares), Natural
   (justified rows at each file's own shape, like the client gallery). */
.ws-views{display:flex;justify-content:flex-end;margin-bottom:12px}
.pgrid.v-large{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pgrid.v-natural{display:flex;flex-wrap:wrap;gap:8px;--row:200px}
.pgrid.v-natural .ph{flex:var(--r,1.5) 1 calc(var(--r,1.5) * var(--row));aspect-ratio:var(--r,1.5);max-width:100%}
.pgrid.v-natural:after{content:'';flex:999999 1 0;min-width:0}
.ph{position:relative;margin:0;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--cream-2);cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform 90ms}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph .vid{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:var(--cream);font-size:11px;padding:10px;text-align:center}
.ph .vid .ic{width:22px;height:22px;opacity:.8}
.ph .vid span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ph .ck{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.85);border:1px solid rgba(0,0,0,.15);display:grid;place-items:center;color:transparent;transition:background .15s}
.ph .ck .ic{width:13px;height:13px}
.ph.sel{border-color:var(--green)}
.ph.sel .ck{background:var(--green);color:var(--cream);border-color:var(--green)}
.ph:active{transform:scale(.98)}
.cv-tag,.set-tag{position:absolute;bottom:8px;left:8px;background:rgba(28,28,30,.75);color:var(--cream);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:999px}
.cv-tag{background:var(--green)}
.set-tag{left:auto;right:8px}
.ws-empty{margin:0;padding:48px 20px;line-height:1.8}
.ws-empty .ic{width:28px;height:28px;color:var(--green)}
.ws-dropzone{position:absolute;inset:0;align-items:center;justify-content:center;background:rgba(247,243,238,.9);border:2px dashed var(--green);border-radius:var(--r);color:var(--green);font-weight:600;font-size:16px;pointer-events:none;z-index:2}
.dhead.draft .pills{margin:0 0 10px}
.dhead.draft .acts .btn.primary{padding:12px 22px}
.newcard{max-width:560px}
.two.tight{gap:12px}
.two.tight .field{margin-bottom:14px}

/* ---- Upload panel: fixed bottom-right, every file with its percentage ---- */
#uppanel{position:fixed;right:20px;bottom:20px;width:min(380px,calc(100% - 32px));z-index:40;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(28,28,30,.18);overflow:hidden;font-size:13px}
#uppanel.min .up-list{display:none}
.up-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 10px 10px 14px}
.up-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.up-t strong{font-size:14px;font-variant-numeric:tabular-nums}
.up-btns{display:flex;gap:4px;flex:none}
.up-btns button{height:28px;min-width:28px;padding:0 8px;border:1px solid var(--line);background:#fff;border-radius:8px;font-family:inherit;font-size:14px;color:var(--muted);cursor:pointer}
.up-bar{height:4px;background:var(--cream-2)}
.up-bar i{display:block;height:100%;width:100%;transform:scaleX(var(--p,0));transform-origin:left;background:var(--green);transition:transform .2s linear}
.up-list{max-height:min(320px,45vh);overflow:auto}
.up-row{position:relative;display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line)}
.up-ic{color:var(--muted);display:inline-flex;flex:none}
.up-nm{flex:1;min-width:0}
.up-nm b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-nm span{display:block;font-size:11.5px;color:var(--muted)}
.up-pct{flex:none;font-variant-numeric:tabular-nums;font-weight:600;min-width:38px;text-align:right;display:inline-flex;justify-content:flex-end}
.up-pct .ic{color:var(--green)}
.up-row.failed .up-pct{color:var(--danger)}
.up-row.failed .up-nm span{color:var(--danger)}
.up-mini{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--green);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .2s linear}
.up-row.done .up-mini,.up-row.failed .up-mini,.up-row.cancelled .up-mini{display:none}
.up-row.cancelled .up-nm b,.up-row.cancelled .up-ic{color:var(--muted);text-decoration:line-through}
.up-row.cancelled .up-pct{color:var(--muted);font-weight:500}
.up-x{flex:none;width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center}
.up-btns button.danger{color:var(--danger);border-color:var(--danger-line)}
@media(max-width:900px){.ws{grid-template-columns:200px minmax(0,1fr)}}
@media(max-width:760px){
  .ws{grid-template-columns:1fr;gap:10px}
  .ws-sets{position:static;padding:8px;display:flex;flex-wrap:wrap;gap:4px}
  .ws-h{width:100%;padding:4px 6px 6px}
  .ws-sets .setrow{width:auto;padding:7px 12px;border-radius:999px;border:1px solid var(--line);font-size:13px;gap:6px}
  .ws-sets .setrow.on{background:var(--green);color:var(--cream);border-color:var(--green)}
  .ws-sets .setrow.on .ic,.ws-sets .setrow.on em{color:rgba(247,243,238,.85)}
  .setacts{display:none!important}
  .addset{width:100%;border-top:0;margin:4px 0 0;padding:0}
  .suggest{width:100%}
  .ws-main{padding:12px;min-height:240px}
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .pgrid.v-large{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgrid.v-natural{display:flex;gap:4px;--row:120px}
  .ws-views .pseg{width:100%;display:flex}
  .ws-views .pseg button{flex:1;justify-content:center}
  .ph{border-radius:8px}
  .selbar select{flex:1}
  #uppanel{right:0;bottom:calc(56px + env(safe-area-inset-bottom));left:0;width:100%;border-radius:14px 14px 0 0}
  .dhead.draft .acts{grid-template-columns:1fr auto}
}
.ws-acts label.btn{text-transform:none;letter-spacing:0;font-size:13px;margin:0;color:var(--cream);display:inline-flex}

/* ---- Gallery page (Pixieset-style): compact header, stacked set sections ---- */
.ib{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;font-family:inherit;flex:none;padding:0}
.ib .ic{width:18px;height:18px}
.ghead{display:flex;align-items:center;gap:12px;padding:22px 0 6px}
.ghead .gtitle{flex:1;min-width:0;font-size:clamp(22px,3vw,32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none;font-family:'Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.gacts{display:flex;align-items:center;gap:8px;flex:none}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green-light);flex:none;vertical-align:middle}
.dot.draft{background:#c8c2b8}
.gsub{font-size:13px;color:var(--muted);margin:0 0 18px 50px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gsub .pill{letter-spacing:.08em}
.setsec{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 18px;margin-bottom:14px}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sec-h h3{font-size:18px;text-transform:none;font-family:'Inter',system-ui,sans-serif;font-weight:600;letter-spacing:-.015em}
.sec-h h3 .n{font-size:13px;color:var(--muted);font-weight:500;margin-left:6px}
.addmedia{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-size:14px;font-weight:600;cursor:pointer;letter-spacing:0;text-transform:none;margin:0;padding:6px 10px;border-radius:999px}
.addmedia .ic{width:17px;height:17px}
.secdrop{padding:38px 20px;line-height:1.9;font-size:15px;color:var(--ink)}
.secdrop .ic{width:26px;height:26px;color:var(--muted)}
.selbar.float{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:35;margin:0;background:var(--ink);color:var(--cream);border:0;box-shadow:0 14px 40px rgba(28,28,30,.35);border-radius:999px;padding:8px 10px 8px 16px}
.selbar.float select{background-color:#fff;color:var(--ink)}
.selbar.float .btn.ghost{border-color:rgba(247,243,238,.5);color:var(--cream)}
.selbar.float .ib{width:30px;height:30px;background:transparent;color:var(--cream);border-color:rgba(247,243,238,.4)}
.popmenu{position:absolute;right:24px;top:72px;z-index:30;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(28,28,30,.16);padding:6px;min-width:220px}
.popmenu a,.popmenu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:none;border-radius:10px;font-family:inherit;font-size:14px;color:var(--ink);cursor:pointer;text-align:left}
.popmenu .ic{color:var(--muted)}
.popmenu .danger{color:var(--danger)}
.popmenu .danger .ic{color:var(--danger)}
.gpage{position:relative}
/* Always-visible gallery navigation; controls render on the page beneath it. */
.gallery-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 22px;padding:0;background:var(--cream)}
.gallery-tabs a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-bottom:3px solid transparent;color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap}
.gallery-tabs a.on{color:var(--green);border-bottom-color:var(--green)}
.gallery-tabs a:focus-visible{outline:2px solid var(--green);outline-offset:-4px;border-radius:8px}
.gallery-tabs .ic{width:18px;height:18px}
.gallery-content{min-width:0}
.sets-content{max-width:none}
.sm-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.setrow.mgr{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;padding:10px 10px 10px 12px;cursor:default}
.setrow.mgr .grip{color:var(--muted);display:inline-flex}
.setrow.mgr .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.setrow.mgr .setacts{display:flex;background:none}
.setrow.mgr em{display:inline}
.sets-content .addset{border-top:0;margin-top:12px}
/* Phone galleries: 2-up cover cards, title, dot + meta */
.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
.pcard{display:block;color:inherit}
.pcard .cv{display:block;aspect-ratio:1;border-radius:4px;overflow:hidden;background:var(--cream-2);position:relative}
.pcard .cv img{width:100%;height:100%;object-fit:cover}
.pcard .cv .blank{position:absolute;inset:0;display:grid;place-items:center;color:var(--green);opacity:.45}
.pcard .cv .pill{position:absolute;top:8px;right:8px;padding:6px}
.pcard b{display:block;margin-top:9px;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .meta{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12px;color:var(--muted)}
@media(max-width:760px){
  .ghead{gap:8px;padding:14px 0 4px}
  .ghead .desk{display:none}
  .ghead .gtitle{font-size:20px}
  .gsub{margin-left:0;font-size:12px}
  .setsec{padding:12px 12px 14px;border-radius:12px}
  .sec-h h3{font-size:17px}
  .secdrop{padding:26px 12px;font-size:14px}
  .popmenu{right:16px;top:64px}
  .gallery-tabs{gap:0;margin-bottom:16px}
  .gallery-tabs a{flex:1;min-width:0;flex-direction:column;gap:5px;padding:10px 2px 9px;font-size:11px;min-height:60px}
  .gallery-tabs .ic{width:19px;height:19px}
  .selbar.float{bottom:calc(72px + env(safe-area-inset-bottom));width:calc(100% - 24px);justify-content:space-between;padding:8px 8px 8px 14px}
}
.setrow.mgr .nm{text-align:left}
@media(max-width:760px){.setrow.mgr .setacts{display:flex!important}.setrow.mgr{padding:8px 8px 8px 10px}.setacts button{width:28px;height:28px}}
.secname[data-ren]{cursor:text;display:inline-flex;align-items:center;gap:8px}
.secname .ic{width:14px;height:14px;color:var(--muted);opacity:0;transition:opacity .15s}
.secname:hover .ic,.secname:focus .ic{opacity:1}
input.rename{width:auto;min-width:200px;padding:6px 10px;font-size:18px;font-weight:600;border-radius:8px}
.addset.page{margin:4px 0 20px;border-top:0;padding:0;flex-wrap:wrap;align-items:center}
.addset.page input{flex:1 1 220px;max-width:320px;background:#fff}
.addset.page .btn{display:inline-flex;align-items:center;gap:6px}
.addset.page .sug{border:1px dashed var(--line);background:none;border-radius:999px;padding:7px 12px;font-size:12px;color:var(--green);font-family:inherit;cursor:pointer}
@media(max-width:760px){.secname .ic{opacity:1}.addset.page input{max-width:none}}


/* Hover rules, mouse only (see gallery.css). */
@media(hover:hover) and (pointer:fine){
  .tabs a:hover{color:var(--ink)}
  .tabs a.cta:hover{background:var(--green-mid);transform:translateY(-1px)}
  .tile:hover{box-shadow:0 10px 30px rgba(28,28,30,.08)}
  .gt:hover{box-shadow:0 12px 32px rgba(28,28,30,.1)}
  .gt:hover .cv img{transform:scale(1.04)}
  .btn.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
  .frow .x:hover{border-color:var(--danger);color:var(--danger)}
  .setrow:not(.on):hover{background:var(--cream)}
  .setacts button:hover{background:#fff;color:var(--ink)}
  .suggest button:hover{border-style:solid;background:#fff}
  .ph:hover .ck{background:#fff}
  .up-btns button:hover{color:var(--ink)}
  .up-x:hover{background:var(--cream-2);color:var(--ink)}
  .up-row.uploading .up-x:hover,.up-row.queued .up-x:hover{color:var(--danger)}
  .up-btns button.danger:hover{background:var(--danger-bg);color:var(--danger)}
  .ib:hover{background:var(--cream)}
  .addmedia:hover{background:var(--cream)}
  .selbar.float .btn.ghost:hover{background:var(--cream);color:var(--ink)}
  .popmenu a:hover,.popmenu button:hover{background:var(--cream)}
  .gallery-tabs a:hover{color:var(--green);background:var(--cream-2)}
  .addset.page .sug:hover{border-style:solid;background:#fff}
}
/* ---- Press feedback for the studio's own controls -------------------------- */
.ib,.up-btns button,.up-x,.addmedia,.suggest button,.addset.page .sug,.frow .x,.setacts button,.clients .row button,.pseg a,.pseg button{transition:transform var(--dur-press) var(--ease-soft),background .2s,color .2s,border-color .2s}
.ib:active,.up-btns button:active,.up-x:active,.addmedia:active,.suggest button:active,.addset.page .sug:active,.frow .x:active,.setacts button:not([disabled]):active,.clients .row button:active,.pseg a:active,.pseg button:active{transform:scale(.94);opacity:1}
.tile:active,.gt:active,.ph:active{opacity:1}
.tabs a.cta:active{transform:scale(.96);opacity:1}
.tabs a:active{opacity:.6}
.gallery-tabs a{transition:color .15s,background .15s}
.gallery-tabs a:active{opacity:1;background:var(--cream-2)}
.pcard:active,.grow:active,.lrow:active{opacity:.6}
.popmenu a:active,.popmenu button:active{opacity:1;background:var(--cream-2)}
/* Selects get the same focus ring as inputs. */
select{transition:border-color .2s,box-shadow .2s}
select:focus{box-shadow:0 0 0 3px rgba(45,85,35,.16)}
/* ⋯ menu scales in from its button (top right), not from nothing or from centre.
   Enter 140 ms ease-out, exit 100 ms, interruptible either way. */
.popmenu{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.96) translateY(-4px);transform-origin:top right;transition:opacity 100ms ease,transform 100ms ease,visibility 0s linear 100ms}
.popmenu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity 140ms var(--ease-out),transform 140ms var(--ease-out),visibility 0s}
/* Upload panel and the floating selection bar rise into place when they first
   appear. Rows inside the panel never animate: the list repaints on every
   progress tick and any row animation would replay with it. */
#uppanel{transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
@starting-style{#uppanel:not([hidden]){opacity:0;transform:translateY(12px)}}
.selbar.float{transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
@starting-style{.selbar.float:not([hidden]){opacity:0;transform:translate(-50%,10px)}}
/* Drop target fades rather than popping. */
.ws-dropzone{display:flex;opacity:0;visibility:hidden;transition:opacity 120ms ease,visibility 0s linear 120ms}
.ws-dropzone.on{opacity:1;visibility:visible;transition:opacity 120ms ease,visibility 0s}
/* Phone tap targets: nothing a thumb has to hit is under 32 px. */
@media(max-width:760px){.up-x{width:34px;height:34px}.up-btns button{height:32px;min-width:32px}.frow .x{width:34px;height:34px}.ib{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.popmenu,.popmenu.open,#uppanel,.selbar.float{transition:opacity .15s linear!important;transform:none!important}.popmenu{transform:none}.selbar.float,.selbar.float.open{transform:translateX(-50%)!important}}

/* ---- Notifications: the bell, and a feed built on the list rows and rings
   every other list here uses. Unread rows carry a green dot and a tint. ---- */
.notification-bell{position:relative;display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:50%;color:var(--ink);transition:background .2s,transform var(--dur-press) var(--ease-soft)}
.notification-bell .ic{width:20px;height:20px;stroke-width:1.8}
.notification-bell span{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--green);color:var(--cream);font-size:10px;font-weight:600;line-height:18px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--cream)}
.notification-bell [hidden]{display:none}
.notification-bell:active{transform:scale(.92);opacity:1}
.activity-feed{margin-top:0;padding:6px 22px}
.activity-feed .lrow{align-items:flex-start;gap:14px;padding:14px 0;cursor:pointer;isolation:isolate;position:relative}
.activity-feed .lrow .ring{margin-top:1px}
.activity-feed .lrow .tx b{white-space:normal}
.activity-feed .lrow .tx span{white-space:normal;overflow-wrap:anywhere}
.activity-feed .lrow .tx time{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.activity-feed .lrow .tr{align-self:center}
.activity-feed .lrow.unread .tx b{font-weight:600}
.activity-feed .lrow.unread .tr:after{content:'';width:8px;height:8px;border-radius:50%;background:var(--green)}
.activity-feed .lrow.unread:before{content:'';position:absolute;inset:0 -22px;background:var(--tint);z-index:-1}
.activity-feed .note,.activity-feed .err{padding:18px 0}
.activity-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.gallery-activity{margin-top:22px}.gallery-activity .two>section{min-width:0}
.visitor-row{display:grid;gap:6px;padding:14px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere;font-size:13px}.visitor-row span{font-size:12px;color:var(--muted)}
.favourite-summary{padding:14px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.favourite-summary summary{cursor:pointer;font-size:14px}.favourite-summary summary span{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.favourite-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin-top:16px}.favourite-preview a{display:flex;flex-direction:column;gap:8px;font-size:11px;overflow-wrap:anywhere}.favourite-preview img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
@media(max-width:760px){.studio-page header nav{gap:8px}.activity-feed{padding:4px 14px}.activity-feed .lrow.unread:before{inset:0 -14px}.gallery-activity .actions{flex-wrap:wrap}.notification-bell{min-width:40px}}
@media(hover:hover) and (pointer:fine){.notification-bell:hover{background:var(--cream-2)}}

/* =====================================================================
   Gallery workspace, full width (2026-10-15): cover + sections on the left,
   the open tab on the right. Phones stack it: cover banner, title, tabs, content.
   ===================================================================== */
.studio-page #app > .gpage{width:auto;max-width:none;margin:0}
.gpage{display:grid;grid-template-columns:272px minmax(0,1fr);gap:0;min-height:calc(100svh - 122px);align-items:start}
.gside{position:sticky;top:122px;max-height:calc(100svh - 122px);overflow:auto;scrollbar-width:thin;border-right:1px solid var(--line);background:#fff;padding-bottom:20px}
.gmain{min-width:0;padding:0 28px 48px 28px}
.gcover{position:relative;aspect-ratio:4/3;background:linear-gradient(140deg,var(--sage),var(--cream-2));overflow:hidden}
.gcover img{width:100%;height:100%;object-fit:cover}
.gcover .blank{position:absolute;inset:0;display:grid;place-items:center;color:var(--green);opacity:.45}
.gcover .blank .ic{width:30px;height:30px;stroke-width:1.5}
.cover-btn{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(28,28,30,.72);color:var(--cream);font:inherit;font-size:12px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s,transform var(--dur-press) var(--ease-soft),opacity .2s}
.cover-btn .ic{width:13px;height:13px}
.cover-btn[disabled]{opacity:.5;cursor:not-allowed}
.cover-btn:not([disabled]):active{transform:scale(.96)}
.gside-t{display:flex;gap:10px;align-items:flex-start;padding:14px 12px 6px}
.gside-t .ib{width:34px;height:34px;flex:none;margin-top:1px}
.gside-tt{min-width:0;flex:1}
.gside .gtitle{font-size:17px;line-height:1.2;white-space:normal;overflow-wrap:anywhere;text-transform:none;font-family:'Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;display:flex;gap:8px;align-items:flex-start}
.gside .gtitle .dot{margin-top:6px}
.gside .gsub{margin:5px 0 0;font-size:12px}
.gside .gallery-tabs{flex-direction:column;gap:2px;border-bottom:0;margin:10px 8px 6px;padding:10px 0 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:none}
.gside .gallery-tabs a{justify-content:flex-start;min-height:40px;padding:8px 12px;border-bottom:0;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink)}
.gside .gallery-tabs a.on{background:var(--cream-2);color:var(--ink);font-weight:600}
.gside .gallery-tabs a.on .ic{color:var(--green)}
.gside .gallery-tabs a:focus-visible{outline-offset:-2px}
.gside-sets{padding:0 8px}
.gside-sets .ws-h{padding:6px 12px 6px}
.gside-sets .ws-h a{display:inline-flex;align-items:center;gap:4px;color:var(--green);letter-spacing:0;text-transform:none;font-size:12px}
.gside-sets .ws-h a .ic{width:12px;height:12px}
.gside-sets .setrow{font-size:14px;padding:8px 12px;color:var(--ink)}
.ghead{padding:18px 0 8px;gap:12px}
.gh-t{flex:1;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--muted)}
.gh-t .ic{color:var(--green)}
.setsec.flash{box-shadow:0 0 0 3px rgba(45,85,35,.25);transition:box-shadow .3s}
/* Tab content enters from a few pixels below, every time the tab changes. */
.gallery-content{animation:tabin var(--dur-base) var(--ease-out) both}
@keyframes tabin{from{opacity:0;transform:translateY(8px)}}
/* Screens slide in; the gallery page itself only animates on arrival. */
.studio-page #app > .enter{animation:pagein var(--dur-base) var(--ease-out) both}
@keyframes pagein{from{opacity:0;transform:translateY(10px)}}
.studio-page .gmain .popmenu{right:28px;top:62px}
/* Cover picker dialog. */
/* Enter, exit and scrim come from gallery.css (.cover-dialog, shared with the list-name dialog). */
.cover-dialog{width:min(920px,calc(100% - 32px));max-height:calc(100svh - 48px);padding:22px 22px 24px;overflow:auto}
.cd-h{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}
.cd-h h2{font-size:20px;text-transform:none;font-family:'Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.cd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.cd-ph{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;background:var(--cream-2);cursor:pointer;transition:border-color .15s,transform var(--dur-press) var(--ease-soft)}
.cd-ph img{width:100%;height:100%;object-fit:cover;display:block}
.cd-ph .ck{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.12);display:grid;place-items:center;color:transparent}
.cd-ph .ck .ic{width:13px;height:13px}
.cd-ph.on{border-color:var(--green)}
.cd-ph.on .ck{background:var(--green);color:var(--cream);border-color:var(--green)}
.cd-ph:active{transform:scale(.97)}
.cd-ph.busy{opacity:.6}
.cover-pick{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:linear-gradient(140deg,var(--sage),var(--cream-2));position:relative}
.cover-pick img{width:100%;height:100%;object-fit:cover}
.cover-pick .blank{position:absolute;inset:0;display:grid;place-items:center;color:var(--green);opacity:.45}
/* Switches: label on the left, knob slides 20 px, 180 ms ease-out. */
.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;cursor:pointer;margin:0;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);border-top:1px solid var(--line)}
.switch + .switch{border-top:1px solid var(--line)}
.switch .sw-tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.switch .sw-tx b{font-weight:600;font-size:14px}
.switch .sw-n{font-size:12.5px;color:var(--muted);line-height:1.4}
.switch input{position:absolute;opacity:0;width:0;height:0;margin:0}
.switch .sw-k{position:relative;flex:none;width:46px;height:28px;border-radius:999px;background:#d9d3ca;transition:background var(--dur-fast) var(--ease-out)}
.switch .sw-k:after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--dur-fast) var(--ease-out)}
.switch input:checked + .sw-k{background:var(--green)}
.switch input:checked + .sw-k:after{transform:translateX(18px)}
.switch input:focus-visible + .sw-k{outline:2px solid var(--green);outline-offset:3px}
.switch:active .sw-k:after{width:26px}
.switch input:checked:active + .sw-k:after{transform:translateX(14px)}
.codebox{display:flex;gap:8px;align-items:stretch}
.codebox input{flex:1;min-width:0;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.codebox .btn{flex:none}
.form-note.bad{color:var(--danger);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.form-note.bad .ic{width:14px;height:14px;flex:none;color:var(--danger)}
.linkbtn{border:0;background:none;color:var(--green);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
@media(max-width:980px){.gpage{grid-template-columns:232px minmax(0,1fr)}.gmain{padding:0 18px 48px}}
@media(max-width:760px){
  .gpage{display:block;min-height:0}
  .gside{position:static;max-height:none;overflow:visible;border-right:0;background:none;padding-bottom:0}
  .gcover{aspect-ratio:16/9;border-radius:0}
  .gside-t{padding:12px 16px 0}
  .gside .gtitle{font-size:20px}
  .gside .gallery-tabs{flex-direction:row;gap:0;margin:12px 0 0;padding:0 8px;border-top:0;border-bottom:1px solid var(--line);background:var(--cream);overflow-x:auto;scrollbar-width:none}
  .gside .gallery-tabs::-webkit-scrollbar{display:none}
  .gside .gallery-tabs a{flex:1 0 auto;flex-direction:column;gap:5px;padding:10px 8px 9px;font-size:11px;min-height:58px;border-radius:0;justify-content:center;color:var(--muted)}
  .gside .gallery-tabs a.on{background:none;color:var(--green);box-shadow:inset 0 -3px 0 var(--green)}
  .gside-sets{display:none}
  .gmain{padding:0 16px 48px}
  .ghead{padding:12px 0 6px}
  .studio-page .gmain .popmenu{right:16px;top:56px}
  .cover-dialog{padding:16px;border-radius:14px}
  .cd-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .switch .sw-k{width:51px;height:31px}
  .switch .sw-k:after{width:25px;height:25px}
  .switch input:checked + .sw-k:after{transform:translateX(20px)}
  .switch input:checked:active + .sw-k:after{transform:translateX(16px)}
}
@media(hover:hover) and (pointer:fine){
  .gside .gallery-tabs a:not(.on):hover{background:var(--cream)}
  .cover-btn:not([disabled]):hover{background:var(--green)}
  .cd-ph:hover .ck{background:#fff}
  .gside-sets .setrow:hover{background:var(--cream)}
}
@media(prefers-reduced-motion:reduce){.gallery-content,.studio-page #app > .enter{animation:none}.switch .sw-k:after{transition:none}.pseg .pseg-ind{transition:none}.rail i,.up-bar i,.up-mini{transition:none}}

/* New gallery: one sheet, three steps. The masthead is the client's opening
   frame taking shape as the form is filled (name, link, pills, then the cover);
   the rail under it carries progress with the --p scaleX indicator; each step
   is one card. Motion: steps slide 8px and fade (220 ms), the code field opens
   on grid-template-rows like the drawers, creation settles the sheet in 200 ms.
   Reduced motion keeps the fades and drops the movement. */
.np{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.np-hero{position:relative;overflow:hidden;border-radius:var(--r);min-height:200px;aspect-ratio:21/9;display:flex;flex-direction:column;justify-content:flex-end;padding:22px 24px;background:linear-gradient(160deg,var(--green) 0%,var(--ink-2) 100%);color:var(--cream)}
.np-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:opacity var(--dur-base) var(--ease-out)}
@starting-style{.np-hero > img{opacity:0}}
.np-hero.has-cover::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(28,28,30,.12) 0%,rgba(28,28,30,.08) 40%,rgba(28,28,30,.72) 100%)}
.np-hero > *:not(img){position:relative;z-index:2}
.np-hero > .np-hero-pills{position:absolute;top:14px;left:16px;display:flex;flex-wrap:wrap;gap:6px}
.np-hero-pills .pill.live{background:var(--green-light);color:var(--cream)}
.np-hero h1{font-family:var(--font-display),system-ui,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(26px,4.4vw,46px);line-height:.98;letter-spacing:-.01em;overflow-wrap:anywhere;text-wrap:balance;max-width:14ch;text-shadow:0 2px 24px rgba(0,0,0,.28);transition:opacity var(--dur-fast) var(--ease-out)}
.np-hero h1.untitled{opacity:.5}
.np-hero-link{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;letter-spacing:.02em;color:var(--sage);min-width:0}
.np-hero-link .ic{width:14px;height:14px;flex:none}
.np-hero-link span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-hero-link b{color:var(--cream);font-weight:600}

/* Step rail: three dots on a line, the green part of the line is --p of the way. */
.np-rail{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:0 10%}
.np-rail-line{position:absolute;left:calc(10% + 16.66%);right:calc(10% + 16.66%);top:13px;height:2px;background:var(--line);border-radius:1px;overflow:hidden}
.np-rail-line b{position:absolute;inset:0;background:var(--green);transform:scaleX(var(--p,0));transform-origin:left center;transition:transform var(--dur-slide) var(--ease-standard)}
.np-rail button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:none;padding:0 0 4px;font:inherit;color:var(--muted);cursor:pointer;min-height:44px}
.np-rail button:disabled{cursor:default}
.np-rail .np-dot{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);background:var(--cream);color:var(--muted);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-press) var(--ease-soft)}
.np-rail .np-dot .ic{position:absolute;width:14px;height:14px;opacity:0;transform:scale(.8);transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.np-rail .np-num{transition:opacity var(--dur-fast) var(--ease-out)}
.np-rail .np-lbl{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:color var(--dur-fast) var(--ease-out)}
.np-rail .on .np-dot{background:var(--green);border-color:var(--green);color:var(--cream)}
.np-rail .on .np-lbl{color:var(--ink)}
.np-rail .done .np-dot{background:var(--tint);border-color:var(--green);color:var(--green)}
.np-rail .done .np-num{opacity:0}
.np-rail .done .np-dot .ic{opacity:1;transform:none}
.np-rail button:not(:disabled):active .np-dot{transform:scale(.94)}
.np-rail button:focus-visible{outline:none}
.np-rail button:focus-visible .np-dot{outline:2px solid var(--green);outline-offset:3px}

/* Steps enter from 8px below (or above when going back). */
.np-step{animation:npin var(--dur-base) var(--ease-out) both}
.back .np-step{animation-name:npback}
@keyframes npin{from{opacity:0;transform:translateY(8px)}}
@keyframes npback{from{opacity:0;transform:translateY(-8px)}}
@keyframes npfade{from{opacity:0}}
.np-step .field:last-child{margin-bottom:0}
input.big{font-size:17px;font-weight:500;padding:15px 16px}
.np-linkbox{padding:0 0 0 14px;background:var(--cream)}
.np-linkbox .pre{flex:none;color:var(--muted);font-size:14px}
.np-linkbox input{border:0;background:var(--cream);border-radius:0 10px 10px 0}
.np-linkbox input:focus{box-shadow:none}
.np-linkbox:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--tint)}
.np-linkbox input[readonly]{color:var(--muted)}

/* Category as toggles, not a dropdown: chips that wrap. */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:40px;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:var(--cream);color:var(--ink);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-press) var(--ease-soft)}
.chips button.on{background:var(--green);border-color:var(--green);color:var(--cream)}
.chips button:active{transform:scale(.97)}
.chips button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(hover:hover) and (pointer:fine){.chips button:not(.on):hover{border-color:var(--green-mid);color:var(--green)}}

/* The code field opens under the Private switch the way the drawers do. */
.np .switch:first-child{border-top:0;padding-top:4px}
.reveal{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-out),visibility 0s var(--dur-base)}
.reveal > div{overflow:hidden;min-height:0}
.reveal.open{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-out) 60ms,visibility 0s}
.np-code{padding:4px 0 16px;margin-bottom:0}
.np-code .codebox #ncopy .ic{width:14px;height:14px;margin-right:5px}
.np-code .codebox .btn.ok,.np-code .codebox .btn.ok:hover{color:var(--green);border-color:var(--green);background:var(--tint)}

/* Photos step: the drop zone, then a cover grid that fills as uploads land.
   The floating upload panel stays hidden here: the drop zone carries the progress. */
body:has(#newg) #uppanel{display:none}
.np-drop{position:relative;overflow:hidden}
.np-drop .np-up{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line);opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.np-drop .np-up b{position:absolute;inset:0;background:var(--green);transform:scaleX(var(--p,0));transform-origin:left center;transition:transform var(--dur-base) linear}
.np-drop.busy .np-up{opacity:1}
.np-drop{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;margin:0;text-transform:none;letter-spacing:0;font-size:14px;padding:30px 24px;color:var(--muted);transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),transform var(--dur-press) var(--ease-soft)}
.np-drop .ic{width:22px;height:22px;color:var(--green);margin-bottom:4px}
.np-drop b{color:var(--ink);font-weight:600;font-size:15px}
.np-drop .note{margin:0;font-size:13px}
.np-drop .note strong{color:var(--ink);font-weight:600}
.np-drop:active{transform:scale(.99)}
.np-drop.over{border-color:var(--green);background:var(--tint)}
.np-drop:focus-within{outline:2px solid var(--green);outline-offset:2px}
@media(hover:hover) and (pointer:fine){.np-drop:hover{border-color:var(--green-mid)}}
.np-covers{margin-top:18px}
.np-covers .cd-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.np-covers .cd-ph{animation:npin var(--dur-base) var(--ease-out) both;animation-delay:calc(min(var(--i,0),7) * 30ms)}
.np-covers .cd-ph.on .ck{background:var(--green);color:var(--cream)}
.np-covers-note{margin-top:14px}

/* Footer: back on the left, the error in the middle, the next step on the right. */
.np-f{display:flex;align-items:center;gap:14px;padding:0 0 8px}
.np-f-l,.np-f-r{display:flex;align-items:center;gap:10px;flex:none}
.np-f .err{flex:1;margin:0;min-height:0;text-align:right}
.np-f .btn[hidden],.np-f .linkbtn[hidden]{display:none}
.np-f #nback .ic{width:14px;height:14px;margin-right:4px}
.np-f .linkbtn{font-size:13px}

/* Created: the button turns into the check, the sheet settles while the Clients page loads. */
.np{transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.np.done{opacity:.55;transform:translateY(-4px);pointer-events:none}
.np.done .np-hero{opacity:1}

@media(max-width:760px){
  .np{gap:14px}
  .np-hero{aspect-ratio:auto;min-height:168px;padding:16px 16px 14px;border-radius:12px}
  .np-hero > .np-hero-pills{top:10px;left:12px}
  .np-hero h1{font-size:clamp(24px,7.4vw,32px);max-width:100%}
  .np-hero-link{font-size:12px}
  .np-rail{padding:0 4%}
  .np-rail-line{left:calc(4% + 16.66%);right:calc(4% + 16.66%)}
  .np-rail .np-lbl{font-size:10px;letter-spacing:.12em}
  .np-cancel{display:none}
  .np-step.card2{padding:16px}
  .chips button{min-height:44px}
  .np-covers .cd-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .np-f{position:sticky;bottom:calc(72px + env(safe-area-inset-bottom));z-index:5;margin:0 -16px;padding:10px 16px;background:rgba(247,243,238,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);flex-wrap:wrap}
  .np-f .btn{flex:none;min-height:44px}
  .np-f #nback{width:44px;padding:0;justify-content:center}
  .np-f #nback .ic{margin:0}
  .np-f #nback span{display:none}
  .np-f-r{flex:1;justify-content:flex-end}
  .np-f-r .btn.primary{flex:1;justify-content:center;max-width:300px;white-space:nowrap}
  .np-f .linkbtn{white-space:nowrap}
  .np-code .codebox{flex-wrap:wrap}
  .np-code .codebox input{flex:1 1 100%;font-size:17px}
  .np-code .codebox .btn{flex:1;justify-content:center;min-height:44px}
  .np-f .err{text-align:left;font-size:12.5px;flex-basis:100%;order:3;margin-top:-2px}
  .np-f .err:empty{display:none}
}
@media(prefers-reduced-motion:reduce){
  .np-step,.back .np-step,.np-covers .cd-ph{animation-name:npfade}
  .np-rail-line b,.np-rail .np-dot,.np-rail .np-dot .ic,.chips button,.np-drop,.np,.reveal,.reveal.open{transition-duration:0s}
  .reveal,.reveal.open{transition:none}
  .np.done{transform:none}
}