/* The page of the studio. Colours, type and shape come from the tokens in
   app.css, so both themes work and the two sites read as one house. */
.studio-page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.s-top, .s-main, .s-foot { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.s-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding-top: calc(18px + env(safe-area-inset-top, 0px)); padding-bottom: 18px; }
.s-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; font-weight: 600; font-size: var(--t-lead); letter-spacing: -.03em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.s-brand img { display: block; flex: none; }
.s-nav { display: inline-flex; align-items: center; gap: 6px; }
.s-nav a { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; white-space: nowrap; border-radius: var(--pill); font-size: var(--t-small); font-weight: 500; color: var(--dim); text-decoration: none; transition: color .15s, background .15s; }
.s-nav a:hover { color: var(--ink); background: var(--hover); }
.s-nav svg { width: 13px; height: 13px; flex: none; }
.s-x { font-family: var(--mono); }

.s-main { display: grid; gap: clamp(56px, 9vw, 112px); padding-top: clamp(28px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 96px); }
.s-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.s-label { margin: 0 0 18px; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.s-hero h1 { margin: 0; font-family: var(--pixel); font-weight: 400; font-size: clamp(44px, 10.5vw, 112px); line-height: 1; letter-spacing: 0; color: var(--ink); text-wrap: balance; }
.s-hero h1 em { font-style: normal; color: var(--up); }
.s-lead { margin: 26px 0 0; max-width: 56ch; font-size: clamp(16px, 2.1vw, 19px); line-height: 1.5; color: var(--text); }
.s-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.s-cta .btn { height: 48px; padding: 0 22px; font-size: var(--t-base); }

/* The mark: a T and the line of a prompt. The line comes and goes the way a prompt does while it waits:
   a cover in the colour of the tile sits over it for half of every beat. The places are the ones of
   the drawing, in parts of its 64 units. */
.s-mark { --paper: #ffffff; display: none; position: relative; justify-self: start; width: clamp(150px, 22vw, 280px); aspect-ratio: 1; }
.s-mark img { display: block; width: 100%; height: 100%; }
.s-blink { position: absolute; display: block; left: 53.5%; top: 65.4%; width: 28.2%; height: 15.2%; background: var(--paper); animation: prompt 1.2s steps(1) infinite; }
@keyframes prompt { 0%, 58% { opacity: 0; } 59%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .s-blink { animation: none; opacity: 0; } }

.s-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 18px; }
.s-head h2 { margin: 0; font-weight: 500; font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -.025em; color: var(--ink); }
.s-tooltitle { display: inline-flex; align-items: center; gap: 12px; }
.s-tooltitle img { display: block; flex: none; }
.s-note { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-small); color: var(--dim); }

.s-rows { display: grid; gap: 6px; min-height: 322px; min-width: 0; }
.s-live, .s-tool, .s-rules, .s-hero, .s-say { min-width: 0; }
.s-row { display: grid; grid-template-columns: 22px 38px minmax(0, 1fr) auto auto 48px; gap: 0 14px; align-items: center; padding: 11px 16px 11px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: inherit; text-decoration: none; transition: background .15s, border-color .15s, transform .38s cubic-bezier(.2, .7, .2, 1); }
.s-row:hover { background: var(--card-2); border-color: var(--line-2); }
.s-rank { font-family: var(--mono); font-size: var(--t-label); color: var(--faint); text-align: right; }
.s-row .ico { width: 36px; height: 36px; }
.s-id { display: grid; gap: 1px; min-width: 0; }
.s-id b { font-weight: 600; font-size: var(--t-lead); letter-spacing: -.015em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-id > .dotline { font-size: var(--t-label); color: var(--dim); }
.s-num { display: grid; gap: 1px; justify-items: end; text-align: right; min-width: 78px; }
.s-num b { font-weight: 600; font-size: var(--t-lead); color: var(--ink); white-space: nowrap; }
.s-num span { font-size: var(--t-label); color: var(--dim); white-space: nowrap; }
.s-num b.up { color: var(--up); }
.s-num b.dn { color: var(--down); }
.s-heat { font-weight: 600; font-size: var(--t-big); letter-spacing: -.03em; text-align: right; color: var(--dim); }
.s-heat.hot { color: var(--up); }
.s-heat.mid { color: var(--ink); }
.s-skel { height: 60px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(100deg, var(--card) 30%, var(--card-2) 50%, var(--card) 70%); background-size: 300% 100%; animation: sweep 1.6s linear infinite; }
.s-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; margin: 18px 0 14px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.s-counts:empty { display: none; }
.s-count { display: grid; gap: 2px; padding: 16px 18px; border-right: 1px solid var(--line); background: var(--card); }
.s-count:last-child { border-right: 0; }
.s-count b { font-weight: 500; font-size: clamp(24px, 4vw, 32px); letter-spacing: -.03em; line-height: 1.1; color: var(--ink); }
.s-count span { font-size: var(--t-label); color: var(--dim); }

/* The story: two columns of plain text, the pain and what was built for it. */
.s-story { min-width: 0; }
.s-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px 56px; border-top: 1px solid var(--line-2); padding-top: 22px; }
.s-cols h3 { margin: 0 0 10px; font-family: var(--mono); font-weight: 400; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.s-cols p { margin: 0; max-width: 52ch; font-size: clamp(16px, 2vw, 18px); line-height: 1.55; color: var(--text); }

/* Six questions a trader asks: three in a row on a wide screen, two on a tablet, one on a phone. */
.s-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; margin-bottom: 22px; }
.s-grid article { padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.s-grid h3 { margin: 0 0 8px; font-weight: 600; font-size: var(--t-lead); letter-spacing: -.015em; color: var(--ink); }
.s-grid p { margin: 0; font-size: var(--t-body); line-height: 1.5; color: var(--dim); }
.s-tool .btn { height: 46px; padding: 0 22px; }

.s-rules dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--line-2); }
.s-rules dl > div { padding: 20px 20px 4px 0; }
.s-rules dt { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.s-rules dd { margin: 0; font-size: var(--t-body); line-height: 1.5; color: var(--dim); max-width: 34ch; }

.s-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-top: 22px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.s-foot p { margin: 0; font-size: var(--t-small); color: var(--faint); }
.s-foot a { display: inline-block; padding: 6px 2px; color: var(--text); }
.s-sign { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--t-base); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.s-sign img { display: block; flex: none; }
.studio-page .themebtn { width: 36px; height: 36px; padding: 0; }
.studio-page .themebtn span { display: none; }

/* The trenches right now: the two numbers of the Trenches screen and four lines of its read. */
.s-trench { min-width: 0; }
.s-ix { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.s-ix:empty { display: none; }
.s-ixcard { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.s-ixk { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.s-ixv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.s-ixv b { font-weight: 500; font-size: clamp(40px, 7vw, 56px); line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.s-ixv span { font-size: var(--t-small); color: var(--faint); }
.s-ixv em { font-style: normal; font-size: var(--t-base); font-weight: 500; color: var(--ink); }
.s-ixband { position: relative; height: 8px; margin-top: 4px; border-radius: var(--pill); }
.s-ixband.activity { background: linear-gradient(90deg, var(--track), var(--up)); }
.s-ixband.health { background: linear-gradient(90deg, var(--z0), var(--z2) 50%, var(--z4)); }
.s-ixband i { position: absolute; top: -4px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--card); }
.s-ixs { font-size: var(--t-small); color: var(--text); }
.s-ixs b { font-weight: 600; }
.s-ixs b.up { color: var(--up); }
.s-ixs b.dn { color: var(--down); }
.s-brief { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
.s-brief:empty { display: none; }
.s-brief li { padding: 13px 0; border-top: 1px solid var(--line); font-size: var(--t-base); line-height: 1.5; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.s-trenchfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }
.s-trenchfoot .btn { height: 46px; padding: 0 22px; flex: none; }
.s-trenchfoot .fine { margin: 0; max-width: 64ch; }

/* The daily: the headline of the latest edition, as a card that leads to it. */
.s-daily { min-width: 0; }
.s-dcard { display: grid; gap: 10px; min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); text-decoration: none; transition: background .15s, border-color .15s; }
.s-dcard:hover { background: var(--card-2); border-color: var(--line-2); }
.s-dk { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.s-dcard b { max-width: 34ch; font-weight: 500; font-size: clamp(22px, 3.6vw, 32px); line-height: 1.18; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.s-dailyfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }
.s-dailyfoot .btn { height: 46px; padding: 0 22px; flex: none; }
.s-dailyfoot .fine { margin: 0; max-width: 64ch; }

/* Build with us: what the studio offers on the left, the form that writes the email on the right. */
.s-build { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-width: 0; scroll-margin-top: 24px; }
.s-buildtext h2 { margin: 0; font-weight: 500; font-size: clamp(26px, 4vw, 38px); letter-spacing: -.03em; color: var(--ink); }
.s-buildlead { margin: 14px 0 0; max-width: 46ch; font-size: clamp(16px, 2vw, 18px); line-height: 1.55; color: var(--text); }
.s-offers { margin: 22px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.s-offers > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.s-offers dt { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.s-offers dd { margin: 0; font-size: var(--t-body); line-height: 1.5; color: var(--dim); max-width: 44ch; }
.s-form { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.s-field { display: grid; gap: 6px; min-width: 0; }
.s-field > span { font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.s-field em { font-style: normal; font-weight: 400; color: var(--faint); }
.s-field input, .s-field textarea { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: var(--t-base); line-height: 1.4; transition: border-color .15s; }
.s-field textarea { resize: vertical; min-height: 120px; }
.s-field input::placeholder, .s-field textarea::placeholder { color: var(--faint); }
.s-field input:hover, .s-field textarea:hover { border-color: var(--line-3); }
.s-field input:focus-visible, .s-field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.s-send { display: grid; gap: 10px; }
.s-send .btn { justify-self: start; height: 46px; padding: 0 22px; }
.s-send .fine { margin: 0; }
.s-send .fine a { display: inline-block; padding: 4px 0; }
.s-sent { padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); font-size: var(--t-small); color: var(--text); }
.s-sent p { margin: 0 0 10px; }
.s-sentbtns { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 640px) {
  .s-row { grid-template-columns: 36px minmax(0, 1fr) auto 40px; gap: 0 12px; padding: 11px 12px; }
  .s-rank, .s-row .s-num.s-moved { display: none; }
  .s-count { border-right: 0; border-bottom: 1px solid var(--line); }
  .s-count:last-child { border-bottom: 0; }
  .s-nav { gap: 2px; }
  .s-nav a { padding: 0 9px; }
  .s-brand span { font-size: var(--t-base); }
}
/* On a phone the way to the radar is the first button of the page, so the top row keeps the name and the handle. */
@media (max-width: 479px) {
  .s-nav a[data-out="radar"] { display: none; }
}
/* On a narrow screen the way to the form is the part of the page itself and the link in the footer. */
@media (max-width: 599px) {
  .s-nav a.s-navbuild { display: none; }
}
/* The top row of a phone holds the name, the way to the daily, the handle and the switch of the theme. Under 400px
   the handle is its mark alone, and under 360px the daily is reached from its part of the page. */
@media (max-width: 399px) {
  .s-x { width: 36px; padding: 0; justify-content: center; }
  .s-x span { display: none; }
}
@media (max-width: 359px) {
  .s-nav a.s-navdaily { display: none; }
  /* The column of the size gives 14px to the name: the longest name of a chain needs them. */
  .s-row { gap: 0 10px; }
  .s-num { min-width: 64px; }
}
@media (min-width: 700px) {
  /* Four lines of the read, two by two. */
  .s-brief { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .s-top, .s-main, .s-foot { padding-left: 36px; padding-right: 36px; }
  .s-build { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
  .s-hero { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; }
  .s-mark { display: block; justify-self: end; }
}