/* Screen primitives — copied verbatim from prototype/styles.css.
   Keep in sync if the screen design changes. */

/* ── Screen: shared tokens ──────────────────────────────────── */

.rs {
  --bg: oklch(0.20 0.016 55);
  --bg2: oklch(0.245 0.018 56);
  --bg3: oklch(0.295 0.020 58);
  --line: oklch(0.36 0.018 58);
  --tx: oklch(0.95 0.012 75);
  --tx2: oklch(0.755 0.016 70);
  --tx3: oklch(0.60 0.016 70);
  --acc: oklch(0.80 0.09 62);
  --accq: oklch(0.32 0.045 62);
  --sage: oklch(0.80 0.09 165);
  --onacc: oklch(0.22 0.03 60);

  width: 402px;
  min-height: 874px;
  background: var(--bg);
  color: var(--tx);
  font-family: 'Work Sans', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  padding: 64px 24px 34px;
  position: relative;
  overflow: hidden;
}

.rs[data-theme="light"] {
  --bg: oklch(0.976 0.008 80);
  --bg2: oklch(1 0 0);
  --bg3: oklch(0.945 0.012 80);
  --line: oklch(0.895 0.012 80);
  --tx: oklch(0.26 0.020 55);
  --tx2: oklch(0.475 0.018 60);
  --tx3: oklch(0.635 0.016 60);
  --acc: oklch(0.585 0.11 52);
  --accq: oklch(0.945 0.032 62);
  --sage: oklch(0.525 0.08 165);
  --onacc: oklch(0.99 0.008 80);
}

.rs.has-keyboard { min-height: 0; height: 100%; padding-bottom: 12px; }

@keyframes rsBreath { 0%,100% { transform: scale(0.62); opacity: .45 } 50% { transform: scale(1); opacity: 1 } }
@keyframes rsWave   { 0%,100% { transform: scaleY(0.25) } 50% { transform: scaleY(1) } }
@keyframes rsFade   { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

.rs .pane { display: flex; flex-direction: column; flex: 1; }
.rs .spacer { flex: 1; }
.rs .serif { font-family: Newsreader, serif; font-weight: 400; }

.rs h1 { margin: 0; font-family: Newsreader, serif; font-weight: 400; line-height: 1.1; }
.rs p { margin: 0; }

.rs .kick {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx3);
}

.rs .kick-sm {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx3);
}

.rs .kick-acc { color: var(--acc); }
.rs .kick-sage { color: var(--sage); }

.rs button { font-family: 'Work Sans', system-ui, sans-serif; }

.rs .primary {
  appearance: none;
  border: none;
  cursor: pointer;
  background: var(--acc);
  color: var(--onacc);
  font-size: 17px;
  font-weight: 600;
  padding: 18px;
  border-radius: 18px;
  width: 100%;
}

.rs .primary[disabled] { background: var(--bg3); color: var(--tx3); cursor: default; }

.rs .quiet {
  appearance: none;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--tx3);
  font-size: 14px;
  padding: 2px;
}

.rs .backlink {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--tx3);
  font-size: 18px;
  padding: 0;
  align-self: flex-start;
}

.rs .card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.rs .card-sm { border-radius: 18px; padding: 16px 18px; }
.rs .card-flat { background: var(--bg3); border: none; border-radius: 16px; padding: 15px 17px; }
.rs .card-glow { background: linear-gradient(160deg, var(--accq), var(--bg2) 78%); }

.rs .tag {
  font-size: 12.5px;
  padding: 6px 11px;
  border-radius: 9px;
  background: var(--bg3);
  color: var(--tx2);
}

.rs .tag-acc { background: var(--accq); color: var(--acc); }

.rs .segrow { display: flex; gap: 6px; background: var(--bg3); padding: 4px; border-radius: 12px; }

.rs .segrow button {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--tx2);
}

.rs .segrow button[aria-pressed="true"] { background: var(--acc); color: var(--onacc); }

.rs .rule { border-top: 1px solid var(--line); }

.rs textarea, .rs input {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  color: var(--tx);
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.55;
  outline: none;
  resize: none;
}

.rs textarea:focus, .rs input:focus { border-color: var(--acc); }
.rs input.bare { background: transparent; border: none; border-radius: 0; padding: 0; font-family: Newsreader, serif; font-size: 24px; }
.rs input.bare:focus { border: none; }
.rs textarea.serif-area { font-family: Newsreader, serif; font-size: 19px; line-height: 1.6; }

.rs .tabbar { display: flex; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }

.rs .tabbar button {
  appearance: none;
  border: none;
  cursor: pointer;
  flex: 1;
  background: transparent;
  color: var(--tx3);
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.rs .tabbar button i { width: 7px; height: 7px; border-radius: 50%; background: var(--tx3); opacity: .5; display: block; }
.rs .tabbar button[aria-current="true"] { color: var(--acc); }
.rs .tabbar button[aria-current="true"] i { background: var(--acc); opacity: 1; }

.rs .fade { animation: rsFade .35s ease both; }