/* First run: the sign-in screen's pitch, the story over the app (js/onboarding.js), the empty states' extras.
   Tokens and base components are in theme.css; the story's cards are the builder's (.bc, builder.css). */

/* ---------- sign-in: what Lowcut is, next to the form (above it on a phone) */
.auth-wrap { width: 100%; max-width: 880px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "pitch box" "foot box";
  column-gap: var(--s-8); row-gap: var(--s-5); align-items: start; align-content: start; }
.auth-pitch { grid-area: pitch; display: grid; gap: var(--s-4); }
.auth-wrap .auth-box { grid-area: box; padding-top: 60px; }                 /* the form starts at the headline's line */
.auth-foot { grid-area: foot; display: grid; gap: var(--s-3); justify-items: start; }
.auth-h { font: var(--t-display); letter-spacing: -.02em; text-wrap: balance; margin-top: var(--s-2); }
.auth-pitch .sub { margin: 0; max-width: 44ch; }
.auth-points { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.auth-points li { display: flex; align-items: center; gap: var(--s-3); }
.auth-points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.auth-foot .note { margin: 0; max-width: 46ch; }
.auth-reg { display: grid; gap: var(--s-1); margin-top: var(--s-3); }
.auth-reg .note { margin: 0; }
@media (max-width: 860px) {
  .auth { --auth-top: var(--s-6); }
  .auth-wrap { max-width: 360px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "pitch" "box" "foot"; }
  .auth-wrap .auth-box { padding-top: 0; }
  .auth-pitch { gap: var(--s-3); }
  .auth-pitch .brand-big { font-size: 32px; }
  .auth-h { font: var(--t-title); margin-top: 0; }
  .auth-pitch .sub { font: var(--t-small); }
  .auth-points { margin-top: 0; gap: var(--s-1); font: var(--t-small); }
}

/* ---------- the story */
html.ob-open, html.ob-open body { overflow: hidden; }       /* the page behind neither scrolls nor widens a phone's viewport */
.ob { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--s-4); background: rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity var(--d-3) linear; overflow-y: auto; }
.ob.on { opacity: 1; }
.ob-card { width: min(560px, 100%); min-width: 0; min-height: min(560px, calc(100dvh - 2 * var(--s-4))); display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-4) var(--s-5) var(--s-5); background: var(--raised); border-radius: var(--r-l); box-shadow: var(--shadow-float);
  transform: translateY(8px); transition: transform var(--d-5) var(--ease-sheet); }
.ob.on .ob-card { transform: none; }
.ob-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-right: calc(-1 * var(--s-2)); }
.ob-dots { display: flex; gap: 6px; }
.ob-dots button { width: 28px; height: 24px; padding: 0; background: transparent; border-radius: var(--r-s); }
.ob-dots button::before { content: ""; width: 100%; height: 4px; border-radius: 2px; background: var(--fill-strong); transition: background-color var(--d-2) linear; }
.ob-dots button.on::before { background: var(--text); }
.ob-dots button:hover:not(:disabled) { background: transparent; }
.ob-body { flex: 1; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.ob-body.swap { animation: swap var(--d-3) var(--ease-out); }
.ob-title { font: var(--t-display); letter-spacing: -.02em; text-wrap: balance; }
.ob-text { margin: 0; color: var(--text-2); font: 400 17px/26px var(--font-ui); text-wrap: pretty; }
.ob-steps { list-style: none; counter-reset: ob; margin: var(--s-2) 0; padding: 0; display: grid; gap: var(--s-4); }
.ob-steps li { counter-increment: ob; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-3); align-items: start; font: 400 17px/26px var(--font-ui); }
.ob-steps li::before { content: counter(ob); width: 32px; height: 32px; margin-top: -3px; border-radius: 50%; background: var(--fill-strong); display: grid; place-items: center;
  font: 600 14px/1 var(--font-ui); font-feature-settings: var(--ff-num); }
.ob-body .note { margin: 0; }
.ob-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.ob-foot .primary { margin-left: auto; height: 44px; min-width: 132px; font-size: 15px; }
.ob-foot .quiet { height: 44px; }
/* the pictures */
.ob-art { margin-bottom: var(--s-3); padding: var(--s-4); border-radius: var(--r-m); background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline); display: grid; gap: var(--s-3); }
.ob-now { display: flex; align-items: center; gap: var(--s-2); font: var(--t-small); color: var(--text-2); font-feature-settings: var(--ff-num); }
.ob-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.ob-trio .bc { padding: var(--s-3); gap: var(--s-1); border-radius: var(--r-m); cursor: default; }
.ob-trio .bc-t { font: 600 15px/20px var(--font-ui); -webkit-line-clamp: 1; }
.ob-trio .bc-a { margin-top: 0; }
.ob-trio .bc-num { font: 500 13px/18px var(--font-ui); gap: 2px var(--s-2); }
.ob-wave { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.ob-play { width: 24px; height: 24px; border-radius: 50%; background: var(--text); color: var(--on-light); display: grid; place-items: center; flex: none; }
.ob-play .ic { width: 12px; height: 12px; }
.ob-wave i { flex: 1; height: 20px; opacity: .7;
  background: repeating-linear-gradient(90deg, var(--text-3) 0 2px, transparent 2px 5px);
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
.ob-trio .bc.on .ob-wave i { background: repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 5px); opacity: 1; }
.ob-set { display: grid; }
.ob-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 32px 28px; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; font: var(--t-small); }
.ob-row + .ob-row { box-shadow: 0 -1px 0 var(--hairline); }
.ob-row-t { display: grid; font: 500 14px/18px var(--font-ui); color: var(--text); min-width: 0; }
.ob-row-t small { font: var(--t-small); }
.ob-cues { display: flex; gap: 3px; }
.ob-cues i { width: 10px; height: 10px; border-radius: 3px; background: var(--good); }
.ob-cues i:nth-child(2) { background: var(--warn); } .ob-cues i:nth-child(3) { background: var(--accent); } .ob-cues i:nth-child(4) { background: var(--bad); }
@media (max-width: 560px) {
  .ob { padding: 0; place-items: stretch; }
  .ob-card { width: 100%; min-height: 100dvh; border-radius: 0; padding: var(--s-4) var(--s-4) max(var(--s-5), env(safe-area-inset-bottom)); }
  .ob-title { font: 600 26px/31px var(--font-ui); }
  .ob-trio .bc { padding: var(--s-2); }
  .ob-trio .bc-a { display: none; }
  .ob-art { padding: var(--s-3); }
}

/* ---------- empty states: a quiet line under the text, the actions, the help link */
.empty-state .note { margin: calc(-1 * var(--s-1)) 0 var(--s-2); }
.empty-state .acts { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
.empty-state .acts .btn, .empty-state .acts button { height: 44px; padding: 0 22px; font-size: 15px; }
.empty-state .es-help { font: var(--t-small); margin-top: var(--s-2); }