/* The screenshot studio's own stylesheet.

   It used to live in landing.css, which the marketing pages load and the app
   shell does not. Putting the editor in the app's Tools nav therefore rendered
   every canvas at its full export size: a 1290x2796 element in a sidebar
   layout. Shared markup needs shared styles, so both shells load this file.

   Page-specific framing (the full-bleed tool page, the in-app panel) stays
   with whichever stylesheet owns that page. */

/* ------------------------------------------------ screenshot studio
   Three columns: layers, the strip, properties. The strip scrolls
   horizontally because a set is a strip -- seeing frame four next to frame
   three is the whole point of a background that runs across both, and
   stacking them vertically would hide exactly the thing being edited. */
/* One palette, two design systems.

   The marketing pages call it --surface / --ink / --line-2; the app calls the
   same roles --panel / --tx / --line. Rather than fork the stylesheet, the
   studio names its own colours once here and each falls back to whichever
   variable the host page actually defines. A rule referring to a variable that
   does not exist simply does nothing, which is an invisible way to break a
   layout, so this indirection is worth the extra line.  */
.ss-wrap, .ss-gate {
  --ss-surface: var(--surface, var(--panel));
  --ss-bg: var(--bg, var(--bg));
  --ss-bg-alt: var(--bg-alt, var(--panel-alt));
  --ss-ink: var(--ink, var(--tx));
  --ss-ink-2: var(--ink-2, var(--tx-2));
  --ss-ink-3: var(--ink-3, var(--tx-3));
  --ss-line: var(--line, var(--line));
  --ss-line-2: var(--line-2, var(--line));
  --ss-blue: var(--blue, var(--blue));
  --ss-blue-line: var(--blue-line, var(--blue-line));
  --ss-blue-tint: var(--blue-tint, var(--blue-tint));
  --ss-red: var(--red, var(--red));
  --ss-mono: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.ss-wrap{display:flex;flex-direction:column;gap:16px}
.ss-bar{display:grid;grid-template-columns:auto minmax(350px,1fr) auto;gap:18px;align-items:center;
  padding:14px 16px 15px;background:var(--ss-surface);border:1px solid var(--ss-line);border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.08)}
.ss-bar-setup{display:grid;grid-template-columns:1fr 126px;gap:8px 10px;align-items:end;min-width:286px}
.ss-bar-setup .ss-kicker,.ss-template-picker .ss-kicker{grid-column:1/-1}
.ss-template-picker{min-width:0;padding:0 18px;border-left:1px solid var(--ss-line);border-right:1px solid var(--ss-line)}
.ss-kicker{display:block;font:700 10px/1 var(--ss-mono);letter-spacing:.1em;color:var(--ss-ink-3)}
.ss-bar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;white-space:nowrap}
.ss-field{display:flex;flex-direction:column;gap:5px;font-size:12.5px;
  color:var(--ss-ink-3);min-width:0}
.ss-field select,.ss-field input[type=text],.ss-field input[type=number],.ss-field textarea{
  font:inherit;font-size:14px;padding:7px 9px;border-radius:8px;
  border:1px solid var(--ss-line-2);background:var(--ss-bg);color:var(--ss-ink);width:100%}
.ss-field textarea{resize:vertical;line-height:1.35}
.ss-field input[type=color]{width:100%;height:32px;padding:2px;border-radius:8px;
  border:1px solid var(--ss-line-2);background:var(--ss-bg)}
.ss-field input[type=range]{width:100%;accent-color:var(--ss-blue)}
.ss-check{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ss-ink-2)}

/* Template is a visual choice, not a word in a dropdown. These rules belong
   with the shared studio so the app and public tool show the same picker. */
.ss-tpls{display:flex;gap:7px;overflow-x:auto;padding:3px 1px 1px;scrollbar-width:thin}
.ss-tpl{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;gap:5px;
  border:0;background:none;padding:0;cursor:pointer;width:48px;color:var(--ss-ink)}
.ss-tpl-swatch{position:relative;display:block;width:44px;height:30px;border-radius:8px;
  border:2px solid transparent;box-shadow:0 0 0 1px var(--ss-line-2) inset,0 2px 7px rgba(0,0,0,.14);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.ss-tpl:hover .ss-tpl-swatch{transform:translateY(-2px);box-shadow:0 0 0 1px var(--ss-line-2) inset,0 5px 12px rgba(0,0,0,.2)}
.ss-tpl.on .ss-tpl-swatch{border-color:var(--ss-blue);box-shadow:0 0 0 1px var(--ss-blue) inset,0 4px 12px color-mix(in srgb,var(--ss-blue) 28%,transparent)}
.ss-tpl-lock{position:absolute;right:4px;bottom:3px;color:#fff;font-size:8px;text-shadow:0 1px 3px rgba(0,0,0,.72);line-height:1}
.ss-tpl-name{font-size:10.5px;color:var(--ss-ink-3);white-space:nowrap}
.ss-tpl.on .ss-tpl-name{color:var(--ss-ink);font-weight:650}

.ss-main{display:grid;grid-template-columns:210px minmax(0,1fr) 250px;gap:14px;
  align-items:start}
.ss-layers,.ss-props{background:var(--ss-surface);border:1px solid var(--ss-line);
  border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:7px;
  max-height:640px;overflow:auto}
.ss-panel-head{display:flex;align-items:center;justify-content:space-between;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ss-ink-3);
  font-weight:700;padding:4px 3px 10px;border-bottom:1px solid var(--ss-line)}
.ss-count{font-weight:600;text-transform:none;letter-spacing:0;font-size:11.5px;background:var(--ss-bg-alt);padding:2px 6px;border-radius:99px}

.ss-lgroup{border:1px solid transparent;border-radius:10px;padding:5px;background:color-mix(in srgb,var(--ss-bg-alt) 52%,transparent)}
.ss-lgroup.on{border-color:var(--ss-blue-line);background:var(--ss-blue-tint);box-shadow:inset 3px 0 var(--ss-blue)}
.ss-lhead{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding:5px 6px;cursor:pointer}
.ss-del{border:0;background:none;color:var(--ss-ink-3);cursor:pointer;font-size:16px;
  line-height:1;padding:0 4px;border-radius:5px}
.ss-del:hover{color:var(--ss-red)}
.ss-layer{display:grid;grid-template-columns:16px 1fr auto;gap:7px;align-items:center;
  padding:6px;border-radius:7px;cursor:pointer;font-size:12.5px;color:var(--ss-ink-2)}
.ss-layer:hover{background:var(--ss-bg-alt)}
.ss-layer.on{background:var(--ss-blue-tint);color:var(--ss-ink)}
.ss-lico{color:var(--ss-ink-3);font-size:11px;text-align:center}
.ss-lval{color:var(--ss-ink-3);max-width:88px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:11.5px}

.ss-stage{min-width:0}
.ss-strip{display:flex;gap:10px;overflow-x:auto;padding:14px;border-radius:14px;
  background:linear-gradient(180deg,var(--ss-surface),var(--ss-bg-alt));border:1px solid var(--ss-line);
  box-shadow:inset 0 1px rgba(255,255,255,.04);touch-action:pan-x;scrollbar-color:var(--ss-line-2) transparent}
.ss-frame{position:relative;flex:0 0 auto;cursor:grab}
.ss-frame:active{cursor:grabbing}
.ss-canvas{display:block;height:420px;width:auto;outline:2px solid transparent;
  outline-offset:-2px;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,.16);transition:opacity .16s ease,transform .16s ease}
.ss-frame:not(.on) .ss-canvas{opacity:.78}
.ss-frame:hover .ss-canvas{opacity:1;transform:translateY(-2px)}
.ss-frame.on .ss-canvas{outline-color:var(--ss-blue);opacity:1;box-shadow:0 0 0 4px var(--ss-blue-tint),0 12px 26px rgba(0,0,0,.2)}
.ss-frame-tag{position:absolute;left:9px;top:9px;background:rgba(5,8,14,.72);backdrop-filter:blur(6px);
  color:#fff;font-size:11px;border-radius:99px;padding:3px 7px;font-variant-numeric:tabular-nums}
.ss-hint{margin:10px 4px 0;font-size:12.5px;color:var(--ss-ink-3);line-height:1.5}
.ss-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}

.ss-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:13px 16px;background:var(--ss-surface);border:1px solid var(--ss-line);border-radius:14px}
.ss-foot-note{flex:1 1 240px;font-size:12.5px;color:var(--ss-ink-3)}
.ss-foot-actions{display:flex;gap:9px;flex-wrap:wrap}

.ss-gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:rgba(8,11,18,.62);padding:20px}
.ss-gate-card{max-width:430px;background:var(--ss-surface);border:1px solid var(--ss-line);
  border-radius:14px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.ss-gate-h{font-size:19px;font-weight:650;margin-bottom:8px}
.ss-gate-card p{font-size:14px;color:var(--ss-ink-2);line-height:1.55;margin:0 0 14px}
.ss-gate-actions{display:flex;gap:9px;flex-wrap:wrap}
.ss-gate-fine{font-size:12px;color:var(--ss-ink-3);margin:13px 0 0}

@media (max-width:1080px){
  .ss-bar{grid-template-columns:1fr;gap:14px}
  .ss-template-picker{padding:12px 0 0;border:0;border-top:1px solid var(--ss-line)}
  .ss-bar-actions{justify-content:flex-start}
  .ss-main{grid-template-columns:1fr}
  .ss-layers,.ss-props{max-height:none}
  .ss-canvas{height:320px}
}

/* Inside the app the studio sits in a normal content column, so it gets the
   app's own breathing room rather than the tool page's full-bleed treatment. */
.ss-in-app{margin-top:16px}
.ss-in-app .ss-wrap{gap:18px}
.ss-in-app .ss-canvas{height:min(52vh,520px)}
.ss-in-app .ss-layers,.ss-in-app .ss-props{max-height:min(52vh,520px)}
.ss-in-app .ss-main{grid-template-columns:200px minmax(0,1fr) 240px}
@media (max-width:1200px){
  .ss-in-app .ss-main{grid-template-columns:1fr}
  .ss-in-app .ss-canvas{height:320px}
  .ss-in-app .ss-layers,.ss-in-app .ss-props{max-height:none}
}
@media (max-width:620px){
  .ss-bar{padding:13px}
  .ss-bar-setup{grid-template-columns:1fr;min-width:0}
  .ss-bar-actions{flex-wrap:wrap}
  .ss-canvas{height:300px}
  .ss-in-app .ss-canvas{height:300px}
}