/* Pages added in the four-page layout: 今天写什么, the drafts preview, 发了效果 and 写法设置.
   Tokens and shared pieces (buttons, cards, chips) come from app.css. */

/* ── 今天写什么 ──────────────────────────────────────────────── */
.must {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 2rem;
  padding: 1.7rem 2rem; border: 1px solid var(--line); border-left: 4px solid var(--mist);
  border-radius: 8px var(--radius) var(--radius) 8px; background: var(--surface-strong); box-shadow: var(--emboss), var(--highlight);
  animation: rise 450ms var(--ease) both;
}
.must__when { font: 500 0.8rem/1 var(--sans); letter-spacing: 0.1em; color: var(--mist); }
.must__title { margin: 0.75rem 0 0.5rem; font: 400 clamp(1.35rem, 1rem + 1vw, 1.85rem)/1.4 var(--title); }
.must__why { margin: 0; font-size: 0.86rem; color: var(--ink-soft); }
.must__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.must--quiet { border-left-color: var(--sage); }
.btn--big { padding: 0.75rem 1.6rem; font-size: 1rem; }

.h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem; margin: 2.2rem 0 0.9rem; }
.h2 h2 { margin: 0; font: 400 1.15rem/1.4 var(--title); }
.h2 small { font-size: 0.78rem; color: var(--muted); }
.h2 .btn { margin-left: auto; }
.ages { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; font-size: 0.74rem; color: var(--muted); }
.ages .is-stale { color: var(--clay); }

.lanes3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.lane3 { --lane: var(--ochre); display: grid; gap: 0.7rem; padding: 1rem; border: 1px solid var(--line-soft); border-top: 3px solid var(--lane); border-radius: 14px; background: rgba(255, 255, 255, 0.22); }
.lane3--short { --lane: var(--mist); }
.lane3--quote { --lane: var(--clay); }
.lane3 h3 { margin: 0; font: 400 1.02rem/1.4 var(--title); color: var(--lane); }
.lane3 h3 small { display: block; font: 400 0.74rem/1.5 var(--sans); color: var(--muted); }
.lane3__empty { margin: 0; font-size: 0.82rem; color: var(--muted); }
.pick { display: grid; gap: 0.3rem; padding: 0.8rem 0.9rem; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface-strong); animation: rise 400ms var(--ease) both; }
.pick b { font: 400 0.95rem/1.5 var(--title); font-weight: 400; }
.pick p { margin: 0; font-size: 0.8rem; color: var(--ink-soft); }
.pick__src { font-size: 0.72rem; color: var(--muted); }
.pick .btn { justify-self: start; margin-top: 0.2rem; }
.pick q { display: block; padding: 0.5rem 0.7rem; border-left: 3px solid #b8b3a8; border-radius: 4px 10px 10px 4px; background: rgba(255, 255, 255, 0.4); font: 400 0.84rem/1.6 var(--serif); quotes: none; overflow-wrap: anywhere; }
.raw { margin-top: 0.9rem; font-size: 0.86rem; }
.raw summary { cursor: pointer; color: var(--ink-soft); }
.raw ol { margin: 0.6rem 0 0; padding-left: 1.3rem; color: var(--ink-soft); font-size: 0.82rem; line-height: 1.9; columns: 2; column-gap: 2rem; }
.raw li span { color: var(--muted); font-size: 0.74rem; }

.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.55rem; }
.day { display: flex; flex-direction: column; gap: 0.4rem; min-height: 8rem; padding: 0.75rem; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(255, 255, 255, 0.22); font-size: 0.78rem; }
.day__date { font: 400 0.74rem/1 var(--mono); color: var(--muted); }
.day__task { margin: 0; font: 400 0.82rem/1.55 var(--serif); color: var(--ink-soft); overflow-wrap: anywhere; }
.day__status { margin-top: auto; font-size: 0.72rem; color: var(--muted); }
.day__status.is-ok { color: var(--sage); }
.day__status.is-miss { color: var(--clay); }
.day.is-post { border-top: 3px solid var(--mist); }
.day.is-post .day__task { color: var(--ink); }
.day.is-today { border-color: var(--mist); background: var(--surface-strong); box-shadow: var(--emboss-sm); }
.day .check { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: auto; font-size: 0.72rem; color: var(--muted); cursor: pointer; }
.day .check input { accent-color: var(--sage); }
.day__open { margin-top: auto; justify-self: start; border: none; background: none; padding: 0; font-size: 0.72rem; color: var(--mist); cursor: pointer; text-align: left; }

/* ── 写稿: progress line, sessions tags, video attachment ─────────── */
.topbar__main { flex: 1; min-width: 0; }
.prog { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin: 0.3rem 0 0; font-size: 0.76rem; color: var(--muted); }
.prog .is-done { color: var(--sage); }
.prog .is-now { color: var(--mist); font-weight: 600; }
.session__tag { display: inline-block; margin-right: 0.35rem; padding: 0 0.45rem; border-radius: 999px; background: var(--mist-wash); color: var(--mist); font-size: 0.68rem; }
.session__tag.is-pub { background: var(--sage-wash); color: var(--sage); }
.session__tag.is-run { background: var(--ochre-wash); color: var(--ochre); }
.stop { flex: none; height: 34px; padding: 0 0.8rem; border: 1px solid var(--clay); border-radius: 999px; background: var(--clay-wash); color: var(--clay); font: 500 0.8rem/1 var(--sans); cursor: pointer; }
.stop:hover { background: rgba(155, 116, 108, 0.22); }
.msg--queued .msg__body { opacity: 0.6; border-style: dashed; }
.clip { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink-soft); font-size: 1.05rem; cursor: pointer; }
.clip:hover { background: var(--surface); }
.composer__box { align-items: center; }
.attach { display: grid; gap: 0.35rem; margin-bottom: 0.6rem; font-size: 0.82rem; color: var(--ink-soft); }
.attach__item { display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0.6rem; border: 1px dashed var(--line); border-radius: 14px; }
.composer.is-drop .composer__box { border-color: var(--mist); background: var(--mist-wash); }
.msg__more summary { margin-top: 0.4rem; cursor: pointer; font: 500 0.78rem/1.6 var(--sans); color: var(--mist); }
.attach img, .media-thumb img { width: 72px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.attach__item span { flex: 1; overflow-wrap: anywhere; }
.media-thumb { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; font: 400 0.78rem/1.4 var(--sans); color: var(--ink-soft); }

/* ── drafts panel: raw / preview switch and the X-style preview ──── */
.drafts__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.phone { width: min(100%, 360px); margin: 0 auto; border: 1px solid #dcdcdc; border-radius: 22px; background: #fff; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: #0f1419; }
.phone__bar { padding: 0.5rem 0.9rem; border-bottom: 1px solid #eff3f4; font-size: 0.76rem; color: #536471; }
.phone__body { max-height: 32rem; overflow-y: auto; }
.xt { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0.6rem; padding: 0.8rem 0.9rem; }
.xt + .xt { border-top: 1px solid #eff3f4; }
.xt__avatar { width: 38px; height: 38px; border-radius: 50%; background: #26251f; color: #f2f0eb; display: grid; place-items: center; font: 400 0.9rem/1 Georgia, serif; }
.xt__avatar--other { background: #cfd9de; color: #536471; }
.xt__who { font-size: 0.82rem; line-height: 1.3; }
.xt__who b { margin-right: 0.3rem; }
.xt__who span { color: #536471; }
.xt__to { margin: 0.1rem 0 0; font-size: 0.78rem; color: #536471; }
.xt__to b { color: #1d9bf0; font-weight: 400; }
.xt__text { margin: 0.25rem 0 0; font-size: 0.9rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.xt__quote { margin-top: 0.6rem; padding: 0.55rem 0.7rem; border: 1px solid #cfd9de; border-radius: 14px; font-size: 0.8rem; line-height: 1.5; }
.xt__quote p { margin: 0.2rem 0 0; color: #0f1419; }
.xt__media { position: relative; margin-top: 0.6rem; border: 1px solid #cfd9de; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #e7ecf0 center / cover no-repeat; display: grid; place-items: center; color: #536471; font-size: 0.78rem; }
.xt__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xt__media span { position: relative; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(15, 20, 25, 0.75); color: #fff; }
.xt__foot { display: flex; justify-content: space-between; margin-top: 0.6rem; font-size: 0.74rem; color: #536471; }
.xa__cover { aspect-ratio: 5 / 2; display: grid; place-items: center; background: repeating-linear-gradient(135deg, #f1f3f4 0 10px, #e9ecee 10px 20px); color: #536471; font-size: 0.78rem; text-align: center; padding: 0 1rem; }
.xa__title { margin: 0.8rem 0.9rem 0.6rem; font-size: 1.25rem; line-height: 1.3; font-weight: 800; }
.xa__who { display: flex; align-items: center; gap: 0.5rem; margin: 0 0.9rem 0.8rem; font-size: 0.8rem; }
.xa__who .xt__avatar { width: 30px; height: 30px; font-size: 0.75rem; }
.xa__who span { color: #536471; }
.xa__body { padding: 0 0.9rem 1rem; }
.xa__body .md { font-family: inherit; font-size: 0.9rem; line-height: 1.7; letter-spacing: 0; }
.xa__body .md h4 { margin: 1.1rem 0 0.35rem; font-family: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; color: #0f1419; }
.xa__body .md strong { background: none; }
.xa__body .md li::marker { color: #0f1419; }

/* ── 发了效果 ─────────────────────────────────────────────────── */
.sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.sum__card { padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--emboss-sm), var(--highlight); }
.sum__n { font: 400 1.8rem/1.3 var(--title); }
.sum__l { font-size: 0.8rem; color: var(--muted); }
#page-data .tracker { padding: 0; overflow: visible; }
#page-data .tracker__list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* ── 写法设置 ─────────────────────────────────────────────────── */
#page-rules .structures { padding: 0; overflow: visible; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
#page-rules .playbook { max-height: none; }

/* ── narrow screens: the page menu moves to the bottom ───────────── */
@media (max-width: 1100px) {
  .lanes3 { grid-template-columns: minmax(0, 1fr); }
  .two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--railh); }
  .rail { order: 2; flex-direction: row; padding: 0.3rem 0.4rem calc(0.3rem + env(safe-area-inset-bottom)); border-right: none; border-top: 1px solid var(--line); background: var(--paper); }
  .rail__brand, .rail__foot { display: none; }
  .menu { grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  .menu__item { flex-direction: column; gap: 0.1rem; padding: 0.3rem; font-size: 0.74rem; }
  .write { height: 100%; }
  .page { padding: 1.3rem 1rem 2rem; }
  .must { grid-template-columns: minmax(0, 1fr); padding: 1.3rem 1.2rem; }
  .must__actions { align-items: flex-start; }
  .week { grid-template-columns: repeat(7, 8.6rem); overflow-x: auto; padding-bottom: 0.4rem; }
  .sum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .raw ol { columns: 1; }
  .ph__side { margin-left: 0; }
}

/* 写法设置 · writer models, writing-service status and remaining Antigravity quota */
.engine { --quota-fill: #3a72b0; margin: 0 0 1.1rem; padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--emboss-sm); font-size: 0.85rem; }
.engine p { margin: 0.15rem 0; }
.engine__line { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; justify-content: space-between; }
.engine__on { color: var(--sage); }
.engine__off { color: var(--clay); font-weight: 600; }
.engine__quota { display: grid; grid-template-columns: 4em minmax(0, 1fr) minmax(0, 1fr) 9.5em; gap: 0.3rem 1.2rem; align-items: center; margin: 0.45rem 0; }
.engine__quota b { font-weight: 600; }
.engine__quota small, .engine__meta { color: var(--muted); font-size: 0.78rem; }
.quota-bar { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.quota-bar__label { flex: none; width: 3.4em; color: var(--ink-soft); }
.quota-bar__track { flex: 1; min-width: 60px; height: 8px; border-radius: 999px; background: var(--paper-deep); overflow: hidden; }
.quota-bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--quota-fill); }
.quota-bar__value { flex: none; min-width: 3.6em; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.quota-bar.is-low .quota-bar__fill { background: var(--clay); }
.quota-bar.is-low .quota-bar__value { color: var(--clay); font-weight: 600; }
@media (max-width: 720px) {
  .engine__quota { grid-template-columns: 1fr; gap: 0.25rem; }
}