/* StringPhoto v7.31 — the Studio on phones (up to 760 px wide). Computers and tablets are unchanged.
   A step rail (Photo, Algorithm, Preview) drawn as three nails on a pink thread that fills in as you go,
   tighter cards, the Generate button pinned to the bottom while you edit, and a calmer preview:
   the color details fold into a small button instead of covering the design. */
.sm-rail{display:none}
@media (max-width:760px){
  /* header: smaller, the steps carry the page */
  .studio .st-head{padding-top:4px;margin-bottom:6px}
  .studio .st-head h1{font-size:clamp(1.55rem,7vw,1.9rem);line-height:1.02;margin-top:6px}
  .studio .st-head .eyebrow{margin-bottom:0}

  /* the page clipped sideways with overflow:hidden, which stops the rail from staying pinned; clip does the same job without that */
  @supports (overflow:clip){ body.studio-page,main#studio{overflow:visible;overflow-x:clip} }

  /* ---- step rail: three nails joined by a thread ---- */
  .sm-rail{display:block;position:sticky;top:84px;z-index:30;margin:0 0 12px;padding:10px 14px 8px;
    background:rgba(251,250,247,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border:1px solid rgba(21,18,15,.08);border-radius:18px;box-shadow:0 10px 24px -18px rgba(21,18,15,.45)}
  .sm-rail ol{position:relative;z-index:1;display:flex;justify-content:space-between;margin:0;padding:0;list-style:none}
  .sm-rail li{flex:0 0 auto}
  .sm-rail button{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:72px;padding:0;border:0;background:none;
    font:600 .72rem/1 var(--sans,system-ui);color:#8A8178;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sm-rail i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:700 .74rem/1 var(--sans,system-ui);font-style:normal;
    background:#fff;color:#8A8178;border:1.5px solid rgba(21,18,15,.22);transition:background .25s,border-color .25s,color .25s,box-shadow .25s}
  .sm-rail li.done i{background:#15120F;border-color:#15120F;color:#fff}
  .sm-rail li.now i{border-color:var(--accent,#E0207A);color:var(--accent,#E0207A);box-shadow:0 0 0 4px rgba(224,32,122,.14)}
  .sm-rail li.done button,.sm-rail li.now button{color:#15120F}
  .sm-rail button:focus-visible i{outline:2px solid var(--accent,#E0207A);outline-offset:2px}
  /* the thread: runs between the first and last nail, pink up to the step you're on */
  .sm-thread{position:absolute;left:calc(14px + 36px);right:calc(14px + 36px);top:23px;height:2px;background:rgba(21,18,15,.12);border-radius:2px}
  .sm-thread b{position:absolute;left:0;top:0;bottom:0;width:var(--sm-p,0%);background:var(--accent,#E0207A);border-radius:2px;transition:width .45s cubic-bezier(.2,.7,.2,1)}

  /* cards: less padding, so more fits on the screen */
  .studio .st-card{padding:16px 16px 18px;border-radius:20px}
  .studio .st-step{margin-bottom:10px}
  .studio .st-step h2{font-size:1.28rem}
  .studio .st-choice{padding:10px 14px}
  .studio .palette-tab{padding:12px 10px}
  .studio .palette-tab b,.studio .palette-tab strong{font-size:.86rem}

  /* ---- Generate: pinned to the bottom while you edit ---- */
  .studio .st-go{position:fixed!important;left:0;right:0;bottom:0;top:auto!important;z-index:60;margin:0!important;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom))!important;
    background:rgba(251,250,247,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid rgba(21,18,15,.1);box-shadow:0 -12px 28px -20px rgba(21,18,15,.5);
    transition:transform .32s cubic-bezier(.2,.7,.2,1)}
  .studio .st-go .action-row{max-width:520px;margin:0 auto}
  .studio .st-go .st-go-note{margin:6px auto 0;max-width:520px;font-size:.74rem;line-height:1.35;text-align:center}
  body.sm-go-away .studio .st-go{transform:translateY(115%)}
  main#studio{padding-bottom:128px}

  /* ---- preview ---- */
  .studio .st-empty-steps{display:none}
  .studio .st-toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:12px 12px 10px}
  .studio .st-toolbar .st-tb-group{display:contents}
  .studio .st-toolbar .st-tb-label{display:none}
  .studio .st-toolbar .bg-btn,.studio .st-toolbar .panel-dl-btn,.studio .st-toolbar .sim-toggle-btn{min-height:34px;height:34px;padding:0 12px;font-size:.76rem}
  .studio .st-toolbar #bg-transparent{order:1}
  .studio .st-toolbar .bg-color-wrap{order:2}
  .studio .st-toolbar #view-3d-chunk{order:3}
  .studio .st-toolbar #sim-toggle-chunk{order:4}
  .studio .st-toolbar .st-dl{order:5}
  .studio .st-toolbar .st-cta{order:6;width:100%}
  /* the color details fold into a button */
  #panel-chunked #usage-legend-chunked{display:none;top:52px;left:10px;right:10px;max-width:none;font-size:.74rem}
  #panel-chunked.sm-legend-open #usage-legend-chunked:not(:empty){display:block}
  .sm-legend-btn{display:none}
  .studio .sm-has-legend .sm-legend-btn{display:inline-flex;align-items:center;gap:7px;position:absolute;top:10px;left:10px;z-index:16;height:32px;padding:0 12px;
    border:1px solid rgba(21,18,15,.14);border-radius:99px;background:rgba(255,255,255,.94);color:#15120F;
    font:600 .74rem/1 var(--sans,system-ui);box-shadow:0 6px 16px -10px rgba(21,18,15,.5);cursor:pointer}
  .sm-legend-btn .sm-dots{display:inline-flex}
  .sm-legend-btn .sm-dots span{width:9px;height:9px;border-radius:50%;margin-left:-3px;border:1.5px solid #fff}
  .sm-legend-btn .sm-dots span:first-child{margin-left:0}
  .sm-legend-btn[aria-expanded="true"]{background:#15120F;color:#fff;border-color:#15120F}
  .studio .zoom-btn{width:38px;height:38px}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .studio .st-go,.sm-thread b,.sm-rail i{transition:none}
}