/* BidDesk Quant: the Studio (composer, unranked variants, readback, editor), saved strategies and settings. */
.st { display: grid; grid-template-columns: minmax(360px, 440px) 1fr; gap: 48px; align-items: start; }
.st-compose { position: sticky; top: 96px; }
.st-words { margin-top: 26px; width: 100%; min-height: 132px; resize: vertical; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-2);
  padding: 14px 16px; font-size: 16px; line-height: 1.5; outline: none; transition: opacity var(--fast) var(--ease); }
.st-words:focus { border-color: var(--ink-3); }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.st-count { color: var(--ink-3); font-size: 12px; }
.st-demos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; align-items: center; }
.st-demos > span { color: var(--ink-3); font-size: 13px; margin-right: 2px; }
.chip { border: 1px solid var(--line-2); background: transparent; border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--ink-2); cursor: pointer;
  transition: transform var(--fast) var(--ease); }
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip:active { transform: scale(.98); }
.st-alt { margin-top: 16px; display: flex; gap: 18px; flex-wrap: wrap; }
.st-beta { margin: 14px 0 0; font-size: 13px; line-height: 1.5; max-width: 60ch; }
.st-fields { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 14px; }
.st-fields summary { cursor: pointer; color: var(--ink-2); font-size: 14px; list-style: none; }
.st-fields summary::-webkit-details-marker { display: none; }
.st-fields summary::before { content: "+ "; color: var(--ink-3); }
.st-fields[open] summary::before { content: "− "; }
.st-fields ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.st-fields li { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px 12px; font-size: 13px; color: var(--ink-2); padding: 7px 0; border-bottom: 1px solid var(--line); }
.st-fields li > span:first-child { flex: 1 1 16ch; min-width: 0; padding-top: 2px; }
/* The tags wrap among themselves and never stretch with a two-line label; under ~480 px they sit under the label. */
.st-fields li > span:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 4px; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.st-fields li .tag { align-self: flex-start; max-width: 100%; }
@media (max-width: 480px) { .st-fields li { flex-direction: column; gap: 6px; } .st-fields li > span:first-child { flex: none; padding-top: 0; } .st-fields li > span:last-child { justify-content: flex-start; } }

.st-pane { min-width: 0; }
.st-empty { border: 1px solid var(--line); border-radius: var(--r-3); padding: 36px; background: linear-gradient(180deg, var(--surface), var(--bg)); }
.steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: s; }
.steps li { counter-increment: s; border-top: 1px solid var(--line-2); padding-top: 12px; font-size: 14px; color: var(--ink-2); }
.steps li::before { content: counter(s, decimal-leading-zero); display: block; font: 300 22px/1 var(--serif); color: var(--ink-3); margin-bottom: 8px; }
.st-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.st-head h2 { font: 300 28px/1.1 var(--serif); letter-spacing: -.02em; margin: 0; }
.st-head p { margin: 0; color: var(--ink-3); font-size: 13px; }
.notice { border: 1px solid var(--line-2); border-radius: var(--r-2); padding: 12px 14px; margin-bottom: 16px; font-size: 14px; color: var(--ink-2); background: var(--surface); }
.notice b { color: var(--ink); font-weight: 500; }
.busy { color: var(--ink-3); font-size: 14px; padding: 28px 0; }

.vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.vcard { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 12px;
  animation: rise var(--fast) var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vcard header { display: flex; align-items: center; gap: 10px; }
.vtag { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); font-size: 12px; font-weight: 600; color: var(--ink-2); }
/* A variant is named by its readback: the whole name, wrapped, never cut (the part that tells two variants apart is
   often at its end, a stop of 5% against 3%). On a phone the check's state sits under it, so the name has the width. */
.vcard header { flex-wrap: wrap; row-gap: 6px; }
.vcard h3 { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 500; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vstate { font-size: 12px; white-space: nowrap; }
.vstate.ok { color: var(--go); } .vstate.bad { color: var(--kill); }
.vdiff { font-size: 12.5px; color: var(--ink-3); }
.vdiff b { color: var(--ink-2); font-weight: 500; }
.vcard footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: auto; padding-top: 4px; }

.rb { display: grid; grid-template-columns: 76px 1fr; gap: 8px 14px; margin: 0; font-size: 14px; }
.rb dt { color: var(--ink-3); font-size: 12.5px; padding-top: 1px; }
.rb dd { margin: 0; color: var(--ink); }
.rb.big { font-size: 15.5px; gap: 12px 18px; grid-template-columns: 88px 1fr; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.checks li { padding-left: 14px; position: relative; }
.checks li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; }
.checks.bad li { color: var(--kill); } .checks.bad li::before { background: var(--kill); }
.checks.note li { color: var(--ink-3); } .checks.note li::before { background: var(--ink-4); }

.scrim { position: fixed; inset: 0; background: rgba(6, 5, 4, .72); z-index: 30; display: grid; place-items: center; padding: 16px; animation: fade var(--fast) var(--ease) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet { width: min(680px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-3);
  padding: 28px; box-shadow: var(--shadow); animation: rise var(--fast) var(--ease) both; }
.sheet h3 { font: 300 30px/1.1 var(--serif); letter-spacing: -.02em; margin: 0 0 6px; }
.sheet h3[tabindex]:focus { outline: none; }
.sheet .sub { color: var(--ink-3); font-size: 13.5px; margin: 0 0 20px; }
.confirm { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 18px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-2); font-size: 14px; color: var(--ink-2); cursor: pointer; }
.confirm input { margin-top: 3px; accent-color: var(--go); width: 16px; height: 16px; flex: none; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* Editor: the rule as blocks on the left, the readback and checks on the right, both live. */
.ed { display: grid; grid-template-columns: 1fr minmax(320px, 420px); gap: 32px; align-items: start; }
.ed-blocks { display: grid; gap: 12px; }
.blk { border: 1px solid var(--line); border-radius: var(--r-2); padding: 16px; background: var(--surface); display: grid; gap: 12px; }
.blk > h4 { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.blk .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.blk .cond { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.blk .cond:first-of-type { border-top: 0; padding-top: 0; }
.blk .cond > .field:first-child { grid-column: span 2; }   /* a field's name is the longest word in the row: it gets two lanes */
.ed-side { position: sticky; top: 96px; display: grid; gap: 14px; border: 1px solid var(--line); border-radius: var(--r-3); padding: 20px; background: var(--bg-2); }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.check-row input { accent-color: var(--go); }

/* Saved strategies and settings. */
.list { display: grid; gap: 12px; }
.srow { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); padding: 18px 20px; display: grid; gap: 10px; }
.srow-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.srow-top h3 { margin: 0; font-size: 16px; font-weight: 500; flex: 1; min-width: 200px; }
.ladder { display: flex; gap: 4px; flex-wrap: wrap; }
.ladder span { font-size: 11px; padding: 3px 7px; border-radius: 4px; border: 1px solid var(--line); color: var(--ink-3); }
.ladder span.on { color: var(--ink); border-color: var(--line-2); background: var(--surface-2); }
.srow-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.set { display: grid; gap: 20px; max-width: 720px; }
.set .blk p { margin: 0; color: var(--ink-2); font-size: 14px; }
.sebi { border-left: 2px solid var(--line-2); padding: 4px 0 4px 14px; color: var(--ink); font-size: 14.5px; }

/* With variants on screen the words fold into one bar and the variants take the width, side by side. */
.st.has-draft { grid-template-columns: 1fr; gap: 24px; }
.st.has-draft .st-compose { position: static; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
.st.has-draft .st-compose > :is(.eyebrow, .display, .lede, .st-demos, .st-alt, .st-beta, .st-fields) { display: none; }
.st.has-draft .st-words { min-height: 64px; height: 64px; margin-top: 0; font-size: 15px; }
.st.has-draft .st-row { margin-top: 0; flex-direction: column; align-items: flex-end; gap: 6px; }
.st.has-draft .vgrid { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.rb dd.diff { color: var(--ink); background: var(--surface-2); margin: -3px -8px; padding: 3px 8px; border-radius: 4px; }
.rb dt.diff { color: var(--ink-2); }
.st.editing { grid-template-columns: 1fr; }
.st.editing .st-compose { display: none; }
@media (max-width: 1100px) { .st { grid-template-columns: 1fr; gap: 32px; } .st-compose { position: static; } .ed { grid-template-columns: 1fr; } .ed-side { position: static; } }
@media (max-width: 600px) { .vcard h3 { flex-basis: calc(100% - 36px); } .vcard .vstate { margin-left: 36px; } }
@media (max-width: 760px) {
  .vgrid { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; }
  .rb, .rb.big { grid-template-columns: 1fr; gap: 2px; } .rb dd { margin-bottom: 8px; }
  .sheet { padding: 20px; } .sheet-actions .btn { flex: 1; justify-content: center; }
  .st-empty { padding: 22px; }
  .st.has-draft .st-compose { grid-template-columns: 1fr; }
  .btn kbd { display: none; }
  .st.has-draft .st-row { flex-direction: row; align-items: center; }
}
.notice .dim { color: var(--ink-3); }

/* 13 Oct 2026: the drafting wait, as two cards taking shape (a sheen; still under reduced motion). */
.st-skel .vskel { min-height: 260px; } .vskel header h3 span, .vsk-l span { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--bg-2), var(--surface-2)); background-size: 200% 100%; animation: st-sheen 1.4s ease-in-out infinite; }
.vskel header h3 span { width: 60%; height: 14px; } .vsk-l { margin: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 12px; color: var(--ink-3); }
.vsk-l:nth-child(odd) span { width: 82%; } .vsk-l:nth-child(even) span { width: 64%; }
.st-head .busy { padding: 0; }
@keyframes st-sheen { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .vskel header h3 span, .vsk-l span { animation: none; } }
/* 13 Oct 2026: on a phone a variant's buttons sit under its name, not 600 px down under the read-back. */
@media (max-width: 600px) { .vgrid:not(.st-skel) .vcard > * { order: 2; } .vgrid:not(.st-skel) .vcard > header { order: 0; } .vgrid:not(.st-skel) .vcard > footer { order: 1; justify-content: flex-start; margin-top: 0; padding-top: 0; } }
@media (max-width: 600px) { .vgrid:not(.st-skel) .vcard > footer [data-num] { order: -1; } }
/* 14 Oct 2026: a desk link reaching a Studio in use (studio.js offerPreset, keptNotice). */
.st-offer, .st-kept { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.steps b { color: var(--ink); font-weight: 500; }