/* SCF Sale Calendar, the creative studio.
   Wave 3, contract section 14. A darkroom: the artwork is the only lit object, and the copy frames are
   white because the surfaces they stand for are white. The room stays dark in both themes on purpose,
   so the tokens below are pinned rather than inherited. The accent is pinned to the light powder blue
   for the same reason: on a dark ground the dark mode accent would go muddy, and the house rule is dark
   ink on the fill, never light text.

   The one structural device on the stage is the floor. A pool of light sits at the foot of the room and
   the artwork stands in it, so the space around a creative that is not square reads as headroom in a lit
   room rather than as dead ground. Three things were removed to pay for it: the white wash on the head,
   the double gradient on the copy bar, and the diagonal hatch behind an empty slot, which contract 13.2
   bans anyway. Nothing else on the stage glows, tilts or floats.

   Type across the four bands, each differing from the one above in at least two of font, size, weight,
   tracking and colour:
     head       Cabinet Grotesk 26 at minus tracking, with an accent eyebrow above it
     stage      Cabinet Grotesk 15 as a gallery label, Satoshi 11.5 tabular beside it
     slot rail  Satoshi 9.5 uppercase at wide tracking, the figures leading the row
     copy bar   Cabinet Grotesk 13.5 in sentence case, ink, with a tracked tabular count
*/

.st{
  --st-ground:#141210;
  --st-floor:#0E0C0A;
  --st-plinth:#1D1A16;
  --st-line:#312B22;
  --st-line-2:#453D31;
  --st-ink:#F6EFE1;
  --st-ink-2:#B3A891;
  /* The quietest text in the room, and it is still text: sale dates, the readiness label, the dimensions
     and file size and owner under the creative. Measured against the three grounds it is ever set on it
     reads 4.95 to 1 on the plinth, 5.34 to 1 on the room, 5.58 to 1 on the floor, so the darkest ground
     is no longer the one that fails. It stays a clear step under `--st-ink-2`, which reads 7.37 to 1. */
  --st-dim:#918878;
  --st-accent:#A7C7E7;
  --st-accent-ink:#15283D;
  /* the accent as a mark on a light ground, pinned here because the global token flips in dark mode and
     the six copy frames are white in every theme */
  --st-focus:#2F6099;
  --st-good:#7FC79E;
  --st-warn:#E0B45E;
  --st-bad:#EE8A70;

  /* the light on the studio floor, and the ring a live control wears */
  --st-pool:rgba(246,239,225,.115);
  --st-halo:rgba(167,199,231,.2);

  /* the paper the frames are printed on, the same in every theme */
  --st-white:#FFFFFF;
  --st-paper:#F4F4F4;
  --st-paper-ink:#1B1B1B;
  --st-paper-ink-2:#5C5C5C;
  --st-paper-ink-3:#8C8C8C;
  --st-paper-line:#E2E2E2;

  position:fixed;
  inset:0;
  width:100vw;
  max-width:100vw;
  height:100dvh;
  max-height:100dvh;
  margin:0;
  padding:0;
  border:0;
  overflow:hidden;
  background:var(--st-ground);
  color:var(--st-ink);
  font-family:var(--f-ui);
  color-scheme:dark;
}

.st:not([open]){display:none}
.st::backdrop{background:rgba(9,7,5,.86)}

.st-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(180px,1fr) auto auto;
  height:100%;
  min-height:0;
  overflow:hidden;
}
.st-shell > *{min-width:0}

/* Enter. The panel comes up from just under full size, never from nothing. */
@media (prefers-reduced-motion:no-preference){
  .st[open] .st-shell{animation:st-in .26s var(--ease) both}
  .st[open]::backdrop{animation:st-veil .2s var(--ease) both}
}
@keyframes st-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
@keyframes st-veil{from{opacity:0}to{opacity:1}}

/* ==========================================================================
   1. Head. The first thing a buyer sees, so it is built as a masthead rather
   than a toolbar: an accent eyebrow, the sale name at frame size, the dates as
   a tracked figure beside it, and the readiness number set large enough to be
   read from the doorway. Reading order left to right is name, then number,
   then the queue, then the door out.
   ========================================================================== */
.st-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:0 24px;
  padding:12px 16px 13px 24px;
  border-bottom:1px solid var(--st-line);
  background:var(--st-ground);
}
.st-head-id{
  display:grid;
  grid-template-columns:minmax(0,max-content) auto;
  align-items:baseline;
  column-gap:14px;
  row-gap:4px;
  min-width:0;
}
.st-eyebrow{
  font:700 10px/1 var(--f-ui);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--st-accent);
  white-space:nowrap;
}
.st-head-id .st-eyebrow{
  grid-column:1 / -1;
  font-size:9.5px;
  letter-spacing:.3em;
  color:var(--st-accent);
  opacity:.9;
}
.st-title{
  grid-column:1;
  font:700 26px/1.05 var(--f-display);
  letter-spacing:-.022em;
  color:var(--st-ink);
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.st-when{
  grid-column:2;
  justify-self:start;
  font:700 11px/1.2 var(--f-ui);
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--st-dim);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.st-head-right{display:flex;align-items:center;gap:16px;flex:0 0 auto}

/* The readiness figure leads the controls, because the number is the point and the buttons are the way
   to move it. One numeral at display size, its label small and tracked underneath the same baseline.

   The reorder on the next line is a deliberate departure from contract 14.2, which orders the head as
   eyebrow, title, dates, queue, readiness, close, and `studio.js` emits exactly that. It is kept because
   the readiness count is the one number on this surface, and a masthead that opens with two buttons and
   reports the number afterwards buries it. The departure costs nothing a reader can lose: the figure is
   a span and cannot take focus, so the two buttons still meet the eye and the keyboard in the same
   order, queue and then close, and the only thing that moves is a figure nobody tabs to. Contract 14.2
   should be amended to read eyebrow, title, dates, readiness, queue, close. */
.st-ready{
  order:-1;
  display:inline-flex;
  align-items:baseline;
  gap:9px;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  font:700 9.5px/1 var(--f-ui);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--st-dim);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.st-ready b{
  font:700 25px/1 var(--f-display);
  letter-spacing:-.03em;
  color:var(--st-ink);
}
.st-ready.is-full{color:var(--st-good)}
.st-ready.is-full b{color:var(--st-good)}

.st-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:34px;
  padding:0 13px;
  border-radius:var(--r-sm);
  border:1px solid var(--st-line-2);
  background:transparent;
  color:var(--st-ink);
  font:500 13px/1 var(--f-ui);
  cursor:pointer;
  transition:background .16s var(--ease),border-color .16s var(--ease),transform .12s var(--ease),color .16s var(--ease);
}
.st-btn .ic{width:17px;height:17px}
.st-btn:active{transform:scale(.97)}
.st-btn:focus-visible{outline:2px solid var(--st-accent);outline-offset:2px}
.st-btn[disabled]{opacity:.4;pointer-events:none}
.st-btn-primary{background:var(--st-accent);border-color:var(--st-accent);color:var(--st-accent-ink);font-weight:700}
.st-btn-icon{width:34px;padding:0;color:var(--st-ink-2)}
.st-btn-sm{height:28px;padding:0 10px;font-size:12px}
.st-btn-sm .ic{width:14px;height:14px}

/* The queue is a door, not a chip, so in the head it keeps full button height. */
.st-head .st-queue{height:34px;padding:0 13px;font-size:12.5px;letter-spacing:.01em}
.st-head .st-queue .ic{width:16px;height:16px}

@media (hover:hover) and (pointer:fine){
  .st-btn:hover{background:rgba(255,255,255,.06);border-color:var(--st-dim)}
  .st-btn-primary:hover{background:#BBD5EE;border-color:#BBD5EE}
  .st-btn-icon:hover{color:var(--st-ink)}
}

/* ==========================================================================
   2. Stage. One object, lit, standing on the floor of the room. The pool of
   light below is the only device on this band.
   ========================================================================== */
.st-stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  min-height:0;
  min-width:0;
  padding:24px 78px 0;
}
.st-plate{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:20px;
  min-height:0;
  min-width:0;
  overflow:hidden;
}
/* The floor. A wide, shallow pool whose centre sits just below the band, so what shows is the falloff
   and never a hard bright edge where the stage meets the caption. */
.st-plate::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-46px;
  width:min(1040px,94%);
  height:min(212px,54%);
  transform:translateX(-50%);
  background:radial-gradient(ellipse 46% 100% at 50% 100%,var(--st-pool) 0,transparent 72%);
  pointer-events:none;
  z-index:0;
}
.st-shot,.st-void,.st-card,.st-none{position:relative;z-index:1}
.st-shot{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:5px;
  background:var(--st-plinth);
  box-shadow:0 26px 56px -28px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.07);
}
/* The empty state and the undrawable file are panels, not objects, so they hold the centre. */
.st-void,.st-card{align-self:center}

@media (prefers-reduced-motion:no-preference){
  .st-lit{animation:st-lit .2s var(--ease) both}
}
@keyframes st-lit{
  from{opacity:0;transform:translateY(6px) scale(.99)}
  to{opacity:1;transform:none}
}

/* A slot with nothing in it. It takes the same room as a filled one, because a missing creative is the
   most useful thing this screen can tell you. The slot name carries it and the size is the second figure,
   so they are set three ways apart: face, size and colour. */
.st-void{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  width:min(560px,100%);
  max-height:100%;
  overflow:auto;
  padding:32px 34px 30px;
  border:1px dashed var(--st-line-2);
  border-radius:14px;
  background:var(--st-plinth);
  text-align:center;
}
.st-void-ic{color:var(--st-dim);margin-bottom:15px;line-height:0}
.st-void-ic .ic{width:30px;height:30px}
.st-void-name{
  font:700 28px/1.06 var(--f-display);
  letter-spacing:-.022em;
  color:var(--st-ink);
}
.st-void-hint{
  margin-top:10px;
  font:700 10px/1 var(--f-ui);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--st-accent);
  font-variant-numeric:tabular-nums;
}
.st-void-say{
  margin:15px 0 0;
  font:400 13px/1.55 var(--f-ui);
  color:var(--st-ink-2);
  max-width:36ch;
}
.st-void .st-form{margin-top:21px}
.st-void-acts{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.st-void-err{
  margin:12px 0 0;
  font:500 12px/1.4 var(--f-ui);
  color:var(--st-bad);
  min-height:1em;
}

/* A file the browser cannot draw, and a link out. */
.st-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:13px;
  width:min(480px,100%);
  max-height:100%;
  overflow:auto;
  padding:30px 32px;
  border-radius:12px;
  background:var(--st-plinth);
  box-shadow:0 0 0 1px rgba(255,255,255,.07);
  text-align:center;
}
.st-card-ic{color:var(--st-accent);line-height:0}
.st-card-ic .ic{width:44px;height:44px}
.st-card-name{font:700 19px/1.2 var(--f-display);letter-spacing:-.012em;color:var(--st-ink);word-break:break-word}
.st-card-sub{font:400 12.5px/1.45 var(--f-ui);color:var(--st-ink-2);word-break:break-all}

/* Caption. The gallery label at the foot of the object: the name in the display face, the real figures
   beside it in tabular Satoshi, then the controls that change it. */
.st-cap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  flex-wrap:wrap;
  padding:14px 0 16px;
  min-height:56px;
}
.st-cap-name{
  font:700 15px/1 var(--f-display);
  letter-spacing:.004em;
  color:var(--st-ink);
}
.st-cap-meta{
  font:400 11.5px/1 var(--f-ui);
  letter-spacing:.03em;
  color:var(--st-dim);
  font-variant-numeric:tabular-nums;
}
.st-cap-sep{width:3px;height:3px;border-radius:50%;background:var(--st-line-2);flex:0 0 auto}
.st-sel{
  height:28px;
  padding:0 26px 0 10px;
  border-radius:999px;
  border:1px solid var(--st-line-2);
  background:transparent;
  color:var(--st-ink);
  font:500 12px/1 var(--f-ui);
  cursor:pointer;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) 12px,calc(100% - 9px) 12px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.st-sel:focus-visible{outline:2px solid var(--st-accent);outline-offset:2px}
.st-sel option{background:var(--st-plinth);color:var(--st-ink)}
.st-sel.is-ready{border-color:var(--st-good);color:var(--st-good)}
.st-sel.is-draft{border-color:var(--st-warn);color:var(--st-warn)}

/* Arrows. Always present, dim until wanted, never a mystery gesture. They stop above the caption so the
   label reads as one line rather than a row with two lids on it. */
.st-arrow{
  position:absolute;
  top:0;
  bottom:70px;
  width:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  color:var(--st-dim);
  cursor:pointer;
  transition:color .16s var(--ease),background .16s var(--ease);
}
.st-arrow .ic{width:26px;height:26px}
.st-arrow:focus-visible{outline:2px solid var(--st-accent);outline-offset:-6px}
.st-arrow[disabled]{opacity:.18;pointer-events:none}
.st-prev{left:0}
.st-next{right:0}
@media (hover:hover) and (pointer:fine){
  .st-arrow:hover{color:var(--st-ink);background:rgba(255,255,255,.04)}
}

/* ==========================================================================
   3. Slot rail. The carousel's spine, on the darkest ground in the room so the
   stage above it keeps the light. Empty slots keep their place, and the two
   real figures lead the row and stay put while the cells scroll under them.
   ========================================================================== */
.st-rail{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 22px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  border-top:1px solid var(--st-line);
  background:var(--st-floor);
  scrollbar-width:thin;
  scrollbar-color:var(--st-line-2) transparent;
}
.st-rail::-webkit-scrollbar{height:6px}
.st-rail::-webkit-scrollbar-thumb{background:var(--st-line-2);border-radius:3px}
.st-cell{
  position:relative;
  flex:0 0 auto;
  width:68px;
  height:50px;
  padding:0;
  border-radius:6px;
  border:1px solid var(--st-line-2);
  background:var(--st-plinth);
  color:var(--st-dim);
  cursor:pointer;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s var(--spring),border-color .16s var(--ease),color .16s var(--ease);
}
/* Contained, not cropped: the point of a contact sheet is telling one slot from another, and a crop of
   the middle of a banner tells you nothing. */
.st-cell img{width:100%;height:100%;object-fit:contain;display:block;padding:3px 3px 5px}
.st-cell .ic{width:18px;height:18px}
.st-cell.is-void{border-style:dashed;background:transparent}
.st-cell:focus-visible{outline:2px solid var(--st-accent);outline-offset:2px}
.st-cell[aria-current="true"]{
  border-color:var(--st-accent);
  border-style:solid;
  color:var(--st-ink);
  transform:scale(1.06);
  box-shadow:0 0 0 3px var(--st-halo);
}
@media (hover:hover) and (pointer:fine){
  .st-cell:hover{border-color:var(--st-dim);color:var(--st-ink-2)}
}
/* The readiness mark. A filled slot that nobody has approved still reads as unfinished. */
.st-cell::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:transparent;
}
.st-cell.is-draft::after{background:var(--st-warn)}
.st-cell.is-ready::after{background:var(--st-good)}
.st-rail-tail{
  order:-1;
  position:sticky;
  left:0;
  z-index:2;
  flex:0 0 auto;
  margin:0 6px 0 -22px;
  padding:3px 15px 3px 22px;
  border-right:1px solid var(--st-line);
  background:var(--st-floor);
  font:700 9.5px/1.5 var(--f-ui);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--st-ink-2);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ==========================================================================
   4. The copy bar. Every field inside the frame it is read in. Flat ground, so
   the only lit thing in the room is still the artwork and the six white cards.
   ========================================================================== */
.st-copy{
  min-width:0;
  max-height:min(34vh,320px);
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--st-line);
  background:var(--st-floor);
}
.st-copy-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:9px 22px 6px;
  cursor:pointer;
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  color:inherit;
}
.st-copy-head:focus-visible{outline:2px solid var(--st-accent);outline-offset:-3px}
/* A heading, not a fourth eyebrow: the display face, sentence case, full ink. */
.st-copy-head .st-eyebrow{
  font:700 13.5px/1.2 var(--f-display);
  letter-spacing:.004em;
  text-transform:none;
  color:var(--st-ink);
  opacity:1;
}
.st-copy-count{
  font:700 9.5px/1 var(--f-ui);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--st-dim);
  font-variant-numeric:tabular-nums;
  margin-left:auto;
}
.st-copy-caret{color:var(--st-dim);display:flex;align-self:center;transition:transform .22s var(--ease)}
.st-copy-caret .ic{width:16px;height:16px}
.st[data-copy="shut"] .st-copy-caret{transform:rotate(180deg)}
.st[data-copy="shut"] .st-frames{display:none}

/* The row of frames runs off the right of the window, so it says so. The fade lives on the trailing edge
   at rest, which is the only edge there is anything past, and never covers the leading frame at scroll
   zero. Where the browser can read scroll position, the two edges swap as you move. */
@property --st-fade-l{syntax:"<length>";inherits:false;initial-value:0px}
@property --st-fade-r{syntax:"<length>";inherits:false;initial-value:54px}

.st-frames{
  display:flex;
  align-items:flex-start;
  gap:15px;
  min-width:0;
  min-height:0;
  flex:1;
  padding:2px 22px 16px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--st-line-2) transparent;
}
/* The fade lives inside the same test as the timeline that drives it. Without a scroll timeline the mask
   never animates away, so a browser that registers the custom property but cannot run the timeline would
   keep a permanent strip of fade over the last card and hide part of it for good. */
@supports (animation-timeline:scroll(self inline)){
  .st-frames{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--st-fade-l),#000 calc(100% - var(--st-fade-r)),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 var(--st-fade-l),#000 calc(100% - var(--st-fade-r)),transparent 100%);
  }
}
.st-frames::-webkit-scrollbar{height:8px}
.st-frames::-webkit-scrollbar-thumb{background:var(--st-line-2);border-radius:4px}

@supports (animation-timeline:scroll(self inline)){
  .st-frames{
    animation:st-fade-edges linear both;
    animation-timeline:scroll(self inline);
  }
}
@keyframes st-fade-edges{
  0%{--st-fade-l:0px;--st-fade-r:54px}
  7%{--st-fade-l:54px;--st-fade-r:54px}
  93%{--st-fade-l:54px;--st-fade-r:54px}
  100%{--st-fade-l:54px;--st-fade-r:0px}
}

.st-fr{flex:0 0 auto;display:flex;flex-direction:column;gap:6px}
.st-fr-tag{
  display:flex;
  align-items:center;
  gap:6px;
  font:700 9.5px/1 var(--f-ui);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--st-dim);
}
.st-fr-tag .ic{width:12px;height:12px}
.st-fr-body{
  position:relative;
  border-radius:8px;
  background:var(--st-white);
  color:var(--st-paper-ink);
  box-shadow:0 16px 30px -22px rgba(0,0,0,.85);
  overflow:hidden;
}

/* the editable text. It sits exactly where the words will sit, so the frame never jumps on click. */
.st-w{
  display:block;
  width:100%;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  text-align:inherit;
  resize:none;
  overflow:hidden;
  cursor:text;
  border-radius:3px;
  transition:box-shadow .14s var(--ease);
}
.st-w::placeholder{color:var(--st-paper-ink-3);font-style:italic}
/* Over the limit. This now sits above the focus rule rather than below it, so that at equal weight focus
   wins when a field is both. Nothing is lost by that: the character counter is red and on screen for the
   whole time a frame holds focus, so it carries the warning while the ring carries the focus. */
.st-w.is-over{box-shadow:0 0 0 4px rgba(179,52,28,.22)}
/* The focus ring is a solid 2px line in the accent at ink strength, with a soft wash outside it so a
   field in focus still reads as a lit screen rather than as a form control. Both edges of the ring were
   measured. Against the grounds it is drawn on: 6.45 to 1 on the white card, 5.87 to 1 on the phone
   frame, 5.32 to 1 on the phone bubble, 3.68 to 1 on the accent band. Against its own outer wash, which
   is the other thing touching it: 5.12, 4.66, 4.28 and 3.09 to 1 on the same four. The weakest boundary
   anywhere is 3.09 to 1, so the line is never the thing that disappears. */
.st-w:focus{outline:none;box-shadow:0 0 0 2px var(--st-focus),0 0 0 5px rgba(47,96,153,.16)}
@media (hover:hover) and (pointer:fine){
  .st-w:hover{box-shadow:0 0 0 4px rgba(167,199,231,.28)}
  .st-w:focus:hover{box-shadow:0 0 0 2px var(--st-focus),0 0 0 5px rgba(47,96,153,.16)}
  /* Over the limit outranks the hover wash, or a mouse passing over a field would take the warning away
     at the moment somebody is most likely looking at it. */
  .st-w.is-over:hover{box-shadow:0 0 0 4px rgba(179,52,28,.3)}
  .st-w.is-over:focus:hover{box-shadow:0 0 0 2px var(--st-focus),0 0 0 5px rgba(179,52,28,.22)}
}

.st-fr-count{
  position:absolute;
  top:5px;
  right:7px;
  padding:1px 5px;
  border-radius:3px;
  background:rgba(27,27,27,.82);
  color:#fff;
  font:600 10px/1.5 var(--f-ui);
  font-variant-numeric:tabular-nums;
  opacity:0;
  pointer-events:none;
  transition:opacity .14s var(--ease);
}
.st-fr-body:focus-within .st-fr-count{opacity:1}
.st-fr-count.is-over{background:#B3341C}

/* 4a. Inbox row. Sender, subject, preview, exactly as a mail list draws it. */
.st-inbox{width:344px;padding:12px 14px 13px;display:flex;gap:11px}
.st-inbox-av{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  background:var(--st-accent);color:var(--st-accent-ink);
  display:flex;align-items:center;justify-content:center;
  font:700 12px/1 var(--f-display);letter-spacing:.02em;
}
.st-inbox-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.st-inbox-from{display:flex;align-items:baseline;gap:8px}
.st-inbox-name{font:700 13px/1.2 var(--f-ui);color:var(--st-paper-ink);flex:1;min-width:0}
.st-inbox-time{font:400 11px/1.2 var(--f-ui);color:var(--st-paper-ink-3);flex:0 0 auto;font-variant-numeric:tabular-nums}
.st-inbox-sub .st-w{font:600 13px/1.35 var(--f-ui);color:var(--st-paper-ink)}
.st-inbox-pre .st-w{font:400 12px/1.4 var(--f-ui);color:var(--st-paper-ink-2)}

/* 4b. Phone. One outgoing message on a handset. */
.st-phone{width:218px;padding:11px 10px 13px;background:var(--st-paper)}
.st-phone-bar{
  display:flex;align-items:center;justify-content:space-between;
  font:600 10px/1 var(--f-ui);color:var(--st-paper-ink-3);
  padding:0 3px 9px;font-variant-numeric:tabular-nums;
}
.st-phone-who{
  text-align:center;font:700 11px/1 var(--f-ui);color:var(--st-paper-ink-2);
  padding-bottom:9px;border-bottom:1px solid var(--st-paper-line);margin-bottom:10px;
}
.st-bubble{
  background:#E9E9EB;border-radius:16px 16px 16px 5px;padding:8px 11px;max-width:96%;
}
.st-bubble .st-w{font:400 12.5px/1.4 var(--f-ui);color:var(--st-paper-ink)}

/* 4c. Top of the site. A band in the company accent, dark ink on it, never light. */
.st-strip{width:344px;background:#fff}
.st-strip-band{
  background:var(--st-accent);color:var(--st-accent-ink);
  padding:9px 14px;text-align:center;
}
.st-strip-band .st-w{
  font:700 11px/1.4 var(--f-ui);letter-spacing:.09em;text-transform:uppercase;
  color:var(--st-accent-ink);text-align:center;
}
.st-strip-band .st-w::placeholder{color:rgba(21,40,61,.55);text-transform:none;letter-spacing:.02em}
.st-strip-page{padding:13px 14px;display:flex;flex-direction:column;gap:7px}
.st-strip-logo{height:9px;width:96px;border-radius:2px;background:var(--st-paper-ink);opacity:.82}
.st-strip-rules{display:flex;flex-direction:column;gap:5px}
.st-strip-rules i{display:block;height:6px;border-radius:2px;background:var(--st-paper-line)}
.st-strip-rules i:nth-child(2){width:72%}
.st-strip-rules i:nth-child(3){width:54%}

/* 4d. Feed frames. These carry the creative on the stage, so the words and the picture move together. */
.st-feed{width:262px}
.st-feed-top{display:flex;align-items:center;gap:8px;padding:9px 11px}
.st-feed-av{
  width:24px;height:24px;border-radius:50%;flex:0 0 auto;
  background:var(--st-accent);color:var(--st-accent-ink);
  display:flex;align-items:center;justify-content:center;font:700 10px/1 var(--f-display);
}
.st-feed-who{font:600 12px/1 var(--f-ui);color:var(--st-paper-ink)}
.st-feed-tag{
  margin-left:auto;font:600 9px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--st-paper-ink-3);
}
.st-feed-img{
  display:block;width:100%;aspect-ratio:1/1;max-height:104px;object-fit:cover;background:var(--st-paper);
  border-top:1px solid var(--st-paper-line);border-bottom:1px solid var(--st-paper-line);
}
.st-feed-void{
  width:100%;aspect-ratio:1/1;max-height:104px;background:var(--st-paper);
  border-top:1px solid var(--st-paper-line);border-bottom:1px solid var(--st-paper-line);
  display:flex;align-items:center;justify-content:center;
  color:var(--st-paper-ink-3);
  font:500 11px/1.4 var(--f-ui);text-align:center;padding:0 24px;
}
.st-feed-body{padding:9px 11px 11px}
.st-feed-body .st-w{font:400 12px/1.45 var(--f-ui);color:var(--st-paper-ink)}
.st-feed-name{font:700 12px/1.45 var(--f-ui);color:var(--st-paper-ink);margin-right:5px}
.st-feed-cta{
  margin-top:8px;padding-top:8px;border-top:1px solid var(--st-paper-line);
  display:flex;align-items:center;justify-content:space-between;
  font:600 10px/1 var(--f-ui);color:var(--st-paper-ink-2);
}
.st-feed-cta span:last-child{color:var(--st-paper-ink-3);font-weight:400}
/* Meta puts the words above the picture, Instagram puts them under it. */
.st-meta .st-feed-body{padding:2px 11px 10px}

/* 4e. Search result. */
.st-serp{width:304px;padding:13px 14px 15px}
.st-serp-site{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.st-serp-fav{
  width:18px;height:18px;border-radius:50%;flex:0 0 auto;
  background:var(--st-accent);color:var(--st-accent-ink);
  display:flex;align-items:center;justify-content:center;font:700 9px/1 var(--f-display);
}
.st-serp-host{font:400 11px/1.2 var(--f-ui);color:var(--st-paper-ink-2)}
.st-serp-host b{display:block;font-weight:600;color:var(--st-paper-ink)}
.st-serp-head .st-w{font:400 17px/1.3 var(--f-ui);color:#1a0dab}
.st-serp-desc{margin-top:4px;font:400 12px/1.45 var(--f-ui);color:var(--st-paper-ink-2)}
.st-serp-ad{
  display:inline-block;margin-bottom:6px;font:700 10px/1 var(--f-ui);
  color:var(--st-paper-ink);letter-spacing:.02em;
}

/* 5. Empty sale: no slots at all. */
.st-none{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
  height:100%;text-align:center;padding:40px;
}
.st-none-h{font:700 26px/1.15 var(--f-display);letter-spacing:-.02em;color:var(--st-ink);margin:0}
.st-none-p{font:400 14px/1.55 var(--f-ui);color:var(--st-ink-2);max-width:44ch;margin:0}

/* 6. The link form, shown on an empty slot. */
.st-form{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;max-width:440px;
}
.st-in{
  flex:1 1 200px;min-width:0;height:34px;padding:0 11px;
  border-radius:var(--r-sm);border:1px solid var(--st-line-2);
  background:rgba(0,0,0,.3);color:var(--st-ink);
  font:400 13px/1 var(--f-ui);
}
.st-in::placeholder{color:var(--st-dim)}
.st-in:focus{outline:none;border-color:var(--st-accent)}

/* 7. Narrow. The bands keep their order, the room just gets tighter. On a phone the head splits in two:
   the name of the sale on top, then the number and the two controls under it. */
@media (max-width:900px){
  .st-head{
    grid-template-columns:minmax(0,1fr);
    gap:11px;
    padding:11px 14px 12px;
  }
  .st-head-id{grid-template-columns:minmax(0,1fr);row-gap:3px}
  .st-title{
    grid-column:1;
    font-size:20px;
    white-space:normal;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  .st-when{grid-column:1;font-size:10.5px}
  .st-head-right{gap:12px}
  .st-ready b{font-size:22px}
  .st-x{margin-left:auto}
  .st-stage{padding:14px 46px 0}
  .st-plate{padding-bottom:14px}
  .st-plate::before{bottom:-40px;height:min(150px,50%)}
  .st-arrow{width:42px;bottom:62px}
  .st-arrow .ic{width:22px;height:22px}
  .st-rail{padding:9px 12px}
  .st-rail-tail{margin-left:-12px;padding-left:12px}
  .st-frames{padding:2px 12px 14px;gap:12px}
  .st-copy-head{padding:8px 12px 6px}
  .st-cap{gap:10px;padding:12px 0 14px;min-height:50px}
  .st-cap-sep{display:none}
  .st-void{padding:26px 22px 24px}
  .st-void-name{font-size:23px}
  .st-inbox,.st-strip{width:288px}
  .st-serp{width:274px}
  .st-feed{width:238px}
  .st-phone{width:198px}
}

/* 7a. A short window at any width. The copy bar gives up height first and the six frames tighten inside
   it, so the stage is never cut off at the knee. Contract 14.2 caps the bar at 30vh under a 760px tall
   window and says nothing about width, so these rules carry no width guard. None of them sets a property
   the narrow block above sets, so on a short phone the two stack instead of fighting. */
@media (max-height:760px){
  .st-copy{max-height:min(30vh,320px)}
  .st-feed-img,.st-feed-void{max-height:72px}
  .st-fr{gap:5px}
  .st-fr-tag .ic{width:11px;height:11px}
  .st-feed-top{padding:7px 11px}
  .st-feed-av{width:22px;height:22px}
  .st-feed-body{padding:7px 11px 9px}
  .st-meta .st-feed-body{padding:2px 11px 8px}
  .st-feed-cta{margin-top:6px;padding-top:6px}
  .st-inbox{padding:10px 14px 11px}
  .st-phone{padding:10px 10px 11px}
  .st-serp{padding:11px 14px 13px}
  .st-strip-page{padding:11px 14px;gap:6px}
}

/* 7b. A short window that is also wide, which is a laptop and never a phone. Every rule below sets a
   property the narrow block above also sets, at equal weight, so without a guard it would win on source
   order alone and quietly undo the narrow layout. The guard picks up one pixel past where the narrow
   block stops, so a phone at 390 by 664, and every phone turned on its side, keeps its 20px title, its
   22px figure and its 12px gutters. */
@media (max-height:760px) and (min-width:901px){
  .st-copy-head{padding:7px 22px 5px}
  .st-frames{padding:2px 22px 12px}
  .st-stage{padding-top:14px}
  .st-plate{padding-bottom:14px}
  .st-plate::before{bottom:-38px;height:min(150px,50%)}
  .st-cap{padding:11px 0 12px;min-height:46px}
  .st-arrow{bottom:58px}
  .st-head{padding-top:10px;padding-bottom:11px}
  .st-title{font-size:23px}
  .st-ready b{font-size:24px}
}

@media (prefers-reduced-motion:reduce){
  .st *,.st *::before,.st *::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .st[open] .st-shell,.st[open]::backdrop{animation:none}
  .st-cell[aria-current="true"]{transform:none}
  /* The edge fade is not motion, it is where you are in the row, so it keeps its scroll timeline. A
     fixed duration would make it jump to the far end on the first pixel of scroll. */
  .st .st-frames{animation-duration:auto !important}
}

/* ==========================================================================
   8. The social queue. A panel over the studio in the same darkroom language:
   the room is dark, and the one thing that is light is the thing being judged.
   In this panel that thing is the caption, so it is set at reading size on its
   own ground, and the picture and the time sit under it as the two settings
   they are. Contract section 15.
   ========================================================================== */

.sq{
  border:0;
  padding:0;
  margin:auto;
  width:min(720px,calc(100vw - 32px));
  max-height:min(88dvh,880px);
  border-radius:14px;
  background:var(--st-ground,#141210);
  color:var(--st-ink,#F6EFE1);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.07);
  overflow:hidden;
  color-scheme:dark;
  font-family:var(--f-ui);
}
.sq:not([open]){display:none}
.sq::backdrop{background:rgba(9,7,5,.7)}
@media (prefers-reduced-motion:no-preference){
  .sq[open]{animation:st-in .24s var(--ease) both}
}

.sq-shell{
  --st-ground:#141210;
  --st-floor:#0E0C0A;
  --st-plinth:#1D1A16;
  --st-line:#312B22;
  --st-line-2:#453D31;
  --st-ink:#F6EFE1;
  --st-ink-2:#B3A891;
  /* the same raised quiet text as the studio, because this panel repaints the whole palette */
  --st-dim:#918878;
  --st-accent:#A7C7E7;
  --st-accent-ink:#15283D;
  --st-good:#7FC79E;
  --st-warn:#E0B45E;
  --st-bad:#EE8A70;
  --st-halo:rgba(167,199,231,.2);
  display:flex;
  flex-direction:column;
  max-height:inherit;
  overflow:auto;
}

.sq-head{
  display:flex;align-items:flex-start;gap:16px;
  padding:16px 16px 14px 20px;
  border-bottom:1px solid var(--st-line);
}
.sq-head-id{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.sq-head-id .st-eyebrow{font-size:9.5px;letter-spacing:.3em;opacity:.9}
.sq-title{
  font:700 22px/1.1 var(--f-display);letter-spacing:-.022em;color:var(--st-ink);margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* The one line that says whether anything can actually leave the building. */
.sq-state{
  display:flex;align-items:flex-start;gap:9px;margin:0;
  padding:11px 20px;
  border-bottom:1px solid var(--st-line);
  background:rgba(224,180,94,.07);
  font:400 12.5px/1.5 var(--f-ui);color:var(--st-ink-2);
}
.sq-state .ic{width:16px;height:16px;flex:0 0 auto;margin-top:1px;color:var(--st-warn)}
.sq-state.is-live{background:rgba(127,199,158,.09)}
.sq-state.is-live .ic{color:var(--st-good)}

/* The form. One payload and two settings, so the grid gives the payload the full measure and puts the
   picture and the time side by side underneath it. The three labels are the three <label> elements in
   source order: caption, picture, time. */
.sq-new{
  display:grid;
  grid-template-columns:minmax(0,1fr) 208px;
  gap:14px;
  padding:16px 20px 18px;
  border-bottom:1px solid var(--st-line);
}
.sq-nets{grid-column:1 / -1;display:flex;gap:9px;flex-wrap:wrap}
.sq-net{
  display:inline-flex;align-items:center;gap:8px;
  height:34px;padding:0 14px;
  border-radius:999px;border:1px solid var(--st-line-2);
  background:transparent;color:var(--st-ink-2);
  font:500 12.5px/1 var(--f-ui);cursor:pointer;
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease),transform .12s var(--ease);
}
.sq-net .ic{width:16px;height:16px}
.sq-net:active{transform:scale(.97)}
.sq-net:focus-visible{outline:2px solid var(--st-accent);outline-offset:2px}
.sq-net.is-on{background:var(--st-accent);border-color:var(--st-accent);color:var(--st-accent-ink);font-weight:700}
@media (hover:hover) and (pointer:fine){
  .sq-net:hover{border-color:var(--st-dim);color:var(--st-ink)}
  .sq-net.is-on:hover{background:#BBD5EE;border-color:#BBD5EE;color:var(--st-accent-ink)}
}
/* A filled dot means the credentials for that network are set and the publisher is on. */
.sq-net-dot{width:6px;height:6px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1px currentColor;opacity:.6}
.sq-net-dot.is-live{background:var(--st-good);box-shadow:none;opacity:1}

.sq-f{display:flex;flex-direction:column;gap:7px;min-width:0}
.sq-f-wide{grid-column:1 / -1}
.sq-f-label{
  font:700 9.5px/1 var(--f-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--st-dim);
}
.sq-in{
  width:100%;min-width:0;
  padding:9px 11px;
  border-radius:var(--r-sm);border:1px solid var(--st-line-2);
  background:rgba(0,0,0,.32);color:var(--st-ink);
  font:400 13px/1.45 var(--f-ui);
  transition:border-color .16s var(--ease);
}
.sq-in::placeholder{color:var(--st-dim)}
.sq-in:focus{outline:none;border-color:var(--st-accent)}
textarea.sq-in{resize:vertical;min-height:66px}
input.sq-in[type="datetime-local"]{font-variant-numeric:tabular-nums}

/* The caption is the post. It gets the measure, the size and the ink. */
.sq-new .sq-f:nth-of-type(1){grid-column:1 / -1}
.sq-new .sq-f:nth-of-type(1) .sq-f-label{font-size:10.5px;letter-spacing:.24em;color:var(--st-ink-2)}
.sq-new .sq-f:nth-of-type(1) .sq-in{
  min-height:104px;
  padding:13px 14px;
  background:rgba(0,0,0,.46);
  font:400 15px/1.55 var(--f-ui);
  color:var(--st-ink);
}
/* The picture and the time are settings. They sit on one row, quieter and smaller. */
.sq-new .sq-f:nth-of-type(2){grid-column:1 / 2}
.sq-new .sq-f:nth-of-type(3){grid-column:2 / 3}
.sq-new .sq-f:nth-of-type(2) .sq-f-label,
.sq-new .sq-f:nth-of-type(3) .sq-f-label{font-size:9px;letter-spacing:.2em}
.sq-new .sq-f:nth-of-type(2) .sq-in,
.sq-new .sq-f:nth-of-type(3) .sq-in{
  padding:8px 10px;
  font-size:12.5px;
  color:var(--st-ink-2);
}
.sq-new .sq-f:nth-of-type(2) .sq-in:focus,
.sq-new .sq-f:nth-of-type(3) .sq-in:focus{color:var(--st-ink)}

.sq-new-foot{
  grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:2px;
}
.sq-when-echo{
  font:700 10px/1.4 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--st-dim);
  font-variant-numeric:tabular-nums;
}
.sq-err{
  grid-column:1 / -1;margin:0;min-height:1em;
  font:500 12px/1.5 var(--f-ui);color:var(--st-warn);
}

.sq-list-head{display:flex;align-items:baseline;gap:12px;padding:15px 20px 9px}
.sq-list-head .st-eyebrow{
  font:700 13.5px/1.2 var(--f-display);letter-spacing:.004em;text-transform:none;color:var(--st-ink);
}
.sq-count{
  font:700 9.5px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--st-dim);
  font-variant-numeric:tabular-nums;
}

.sq-list{list-style:none;margin:0;padding:0 20px 20px;display:flex;flex-direction:column;gap:8px}
.sq-empty{
  padding:22px 0;text-align:center;
  font:400 13px/1.5 var(--f-ui);color:var(--st-dim);
}
/* A row reads in one order: which network, when it goes, what state it is in, then the words. */
.sq-row{
  display:flex;align-items:flex-start;gap:13px;
  padding:13px 14px;
  border-radius:10px;border:1px solid var(--st-line);
  background:var(--st-plinth);
}
.sq-row.is-armed{border-color:rgba(167,199,231,.42)}
.sq-row.is-posted{opacity:.72}
.sq-row.is-failed{border-color:rgba(238,138,112,.5)}
.sq-row-ic{flex:0 0 auto;color:var(--st-ink-2);display:flex;padding-top:3px}
.sq-row-ic .ic{width:18px;height:18px}
.sq-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.sq-row-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sq-row-when{
  font:700 14.5px/1.15 var(--f-display);letter-spacing:.004em;color:var(--st-ink);
  font-variant-numeric:tabular-nums;
}
.sq-row-cap{
  margin:0;font:400 12.5px/1.5 var(--f-ui);color:var(--st-ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sq-row-cap i{color:var(--st-dim)}
.sq-note{font:400 11.5px/1.45 var(--f-ui);color:var(--st-dim)}
.sq-note.is-bad{color:var(--st-bad)}
.sq-link{color:var(--st-accent);text-decoration:underline;text-underline-offset:2px}
.sq-row-acts{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.sq-arm.is-on{border-color:var(--st-accent);color:var(--st-accent)}

.sq-pill{
  display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:999px;
  font:700 9px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--st-line);color:var(--st-dim);
}
.sq-pill-armed{border-color:var(--st-accent);color:var(--st-accent)}
.sq-pill-sending{border-color:var(--st-warn);color:var(--st-warn)}
.sq-pill-posted{border-color:var(--st-good);color:var(--st-good)}
.sq-pill-failed{border-color:var(--st-bad);color:var(--st-bad)}

/* The queue count on the studio head. */
.st-queue.is-on{border-color:var(--st-accent);color:var(--st-accent)}
.st-queue-n:not(:empty){
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;margin-left:1px;
  border-radius:999px;background:var(--st-accent);color:var(--st-accent-ink);
  font:700 10px/1 var(--f-ui);
  font-variant-numeric:tabular-nums;
}

@media (max-width:640px){
  .sq{width:calc(100vw - 16px);max-height:92dvh}
  .sq-new{grid-template-columns:minmax(0,1fr);padding:14px 14px 16px}
  .sq-new .sq-f:nth-of-type(2),
  .sq-new .sq-f:nth-of-type(3){grid-column:1 / -1}
  .sq-head{padding:13px 12px 12px 16px}
  .sq-title{font-size:19px}
  .sq-state{padding:10px 16px}
  .sq-list{padding:0 14px 16px}
  .sq-list-head{padding:13px 16px 8px}
  .sq-row{flex-wrap:wrap}
  .sq-row-acts{width:100%;justify-content:flex-end}
}

@media (prefers-reduced-motion:reduce){
  .sq *,.sq *::before,.sq *::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .sq[open]{animation:none}
}