/* The Mogger Manual screens. Tokens only (theme.css); color is used only
   for status, and every status also has a glyph and a word. */

.manual-head { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.manual-head .label { margin: 0; color: var(--ink-muted); }
.manual-progress {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-tag);
  color: var(--ink-muted);
}

.manual-note {
  margin: 0 0 var(--s5);
  padding: var(--s4);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

.manual-phase { margin-bottom: var(--s5); }
.manual-phase-name { color: var(--ink-muted); }

.manual-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }

.manual-tile {
  min-height: var(--tap);
  padding: var(--s4);
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--t-tap);
}
a.manual-tile:active { transform: scale(var(--tap-scale)); }
a.manual-tile:focus-visible { outline: calc(var(--hairline) * 2) solid var(--ink); outline-offset: var(--s1); }
.manual-tile.skel { height: calc(var(--tap) * 2); margin-bottom: var(--s2); }

.manual-num {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);
  line-height: var(--lh-title);
}
.manual-body { display: grid; gap: var(--s1); min-width: 0; }
.manual-title {
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--track-title);
}
.manual-outcome { color: var(--ink-muted); font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.manual-state { margin-top: var(--s1); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; }
.manual-why { font-size: var(--fs-caption); color: var(--ink-muted); }

/* Locked: dimmed text, but the words still say LOCKED (not color alone). */
.manual-tile.is-locked .manual-title { color: var(--ink-muted); }

.manual-disclaimer {
  margin: var(--s6) 0 var(--s5);
  color: var(--ink-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
}
.manual-disclaimer summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: underline;
}
.manual-disclaimer p { margin: 0 0 var(--s3); }

/* ---- Module reader ---- */
/* Room at the bottom so the pinned "Mark module complete" button never
   covers the last lines. */
.manual-reader { padding-bottom: calc(var(--button-h-primary) + var(--s7) + var(--safe-bottom)); }
.manual-module-title { font-size: var(--fs-title); letter-spacing: var(--track-title); }
.manual-lede { margin: 0; font-size: var(--fs-heading); line-height: var(--lh-body); color: var(--ink-muted); }
.manual-done { margin: 0 0 var(--s5); font-size: var(--fs-body-sm); color: var(--ink-muted); }

.manual-prose { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.manual-prose h2 {
  margin: var(--s6) 0 var(--s3);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.manual-prose h3 { margin: var(--s5) 0 var(--s2); font-size: var(--fs-heading); font-weight: var(--fw-semibold); }
.manual-prose p, .manual-prose ul, .manual-prose ol { margin: 0 0 var(--s4); }
.manual-prose ul, .manual-prose ol { padding-left: var(--s5); }
.manual-prose li { margin-bottom: var(--s2); }
.manual-prose strong { font-weight: var(--fw-semibold); }
.manual-prose code { font-family: var(--mono); font-size: var(--fs-meta); }
.manual-prose hr { border: 0; border-top: var(--hairline) solid var(--line); margin: var(--s5) 0; }

/* Tables scroll sideways inside their box instead of widening the page. */
.manual-table { margin: 0 0 var(--s4); overflow-x: auto; border: var(--hairline) solid var(--line); border-radius: var(--r-field); }
.manual-prose table { border-collapse: collapse; min-width: 100%; font-size: var(--fs-body-sm); }
.manual-prose th, .manual-prose td { padding: var(--s2); border-bottom: var(--hairline) solid var(--line); text-align: left; vertical-align: middle; }
.manual-prose th {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-tag);
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Worksheet blanks: real text boxes, at least a tap tall. */
.manual-input { display: inline-block; height: var(--tap); margin: var(--s1) 0; }
.manual-prose p > .manual-input, .manual-prose li > .manual-input { width: 100%; }
.manual-cell { min-width: calc(var(--tap) * 3); }

.manual-app-links { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); }
.manual-app-links .btn-pill { margin-top: 0; }

/* ---- Sales page (manual-sales.js) ---- */
.manual-sales > p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 var(--s4); }
.manual-hero { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.manual-hero .label { margin: 0; color: var(--ink-muted); }
.manual-hero-img {
  width: 100%;
  height: auto;
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.manual-proof { margin: 0; color: var(--ink-muted); font-size: var(--fs-body-sm); }
.manual-promise { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-semibold); line-height: var(--lh-title); letter-spacing: var(--track-title); }
.manual-pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.manual-pill {
  display: inline-flex;
  align-items: center;
  height: var(--tag-h);
  padding: 0 var(--s3);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: var(--fs-tag);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-tag);
  color: var(--ink-muted);
}
.manual-price {
  margin: var(--s5) 0;
  padding: var(--s4);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.manual-tiers { display: grid; gap: var(--s5); }
.manual-tier { display: grid; gap: var(--s2); }
.manual-tier + .manual-tier { padding-top: var(--s5); border-top: var(--hairline) solid var(--line); }
.manual-tier-name { margin: 0; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: var(--track-label); color: var(--ink-muted); }
.manual-tier-price { margin: 0; font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-muted); }
.manual-tier-price strong { font-size: var(--fs-title); color: var(--ink); }
.manual-tier ul { margin: 0 0 var(--s2); padding-left: var(--s5); font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.manual-buy { display: flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; padding: 0 var(--s3); }
.manual-fine { margin: var(--s4) 0 var(--s1); font-family: var(--mono); font-size: var(--fs-label); letter-spacing: var(--track-label); color: var(--ink-muted); text-align: center; }
.manual-fine-note { font-size: var(--fs-caption); color: var(--ink-muted); line-height: var(--lh-body); }
.manual-price .manual-fine-note { margin: 0; text-align: center; }
.manual-inline-btn { display: inline-flex; min-height: var(--tap); padding: 0; color: var(--ink); text-decoration: underline; }
.manual-section-title { margin: var(--s6) 0 var(--s4); font-size: var(--fs-heading); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--track-title); }
.manual-example { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-muted); }
.manual-cta-row { display: grid; gap: var(--s3); }
/* The module someone tried to open: a stronger border, and the locked
   note above says which one (not color alone). */
.manual-tile.is-highlight { border-color: var(--ink-muted); }

/* ---- $79 templates ---- */
.manual-subhead { margin: var(--s5) 0 var(--s3); font-size: var(--fs-heading); font-weight: var(--fw-semibold); }
.manual-import-links { margin: var(--s2) 0 0; }

/* ---- Promo cards and the Closet's manual row ----
   .manual-promo (the card itself) lives in landing.css, shared with the
   free guides. Here: the × and the in-app spacing. */
#view .manual-promo { margin: var(--s4) 0; }
.manual-promo-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.manual-promo-x {
  min-width: var(--tap);
  min-height: var(--tap);
  margin: calc(var(--s3) * -1) calc(var(--s3) * -1) 0 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-size: var(--fs-title);
  cursor: pointer;
}
.manual-promo-text { font-size: var(--fs-body); line-height: var(--lh-body); }
.manual-row {
  margin-top: var(--s5);
  min-height: var(--tap);
  padding: 0 var(--s4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-tag);
  text-decoration: none;
}
/* In the app the landing page's link style doesn't apply: plain ink, underlined. */
#view .manual-promo .text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
}

/* ---- $129 closet review ---- */
.manual-reply { padding: var(--s4); border: var(--hairline) solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.manual-reply p { margin: 0 0 var(--s3); line-height: var(--lh-body); }
.manual-reply p:last-child { margin-bottom: 0; }
.manual-reply-box { height: calc(var(--textarea-h) * 3); }

/* Upgrade offers for owners (pay the difference). */
.manual-upgrades p { margin: 0 0 var(--s3); }
.manual-upgrades p:last-child { margin-bottom: 0; }
.manual-upgrades a, .manual-upgrades button { color: var(--ink); font-weight: var(--fw-semibold); }

/* ---- Tablets and computers (same breakpoints as landing.css) ----
   The rest of the app stays phone-shaped; the manual is long reading and
   a sales page, so it widens. :has() picks the screen by what it shows. */
@media (min-width: 768px) {
  .view:has(> .manual-sales), .view:has(> .manual-page) { max-width: var(--page-max-md); }
  .view:has(> .manual-reader) { max-width: var(--prose-max); }
  .manual-list { grid-template-columns: 1fr 1fr; }
  .manual-sales > p { max-width: var(--prose-max); }
}

@media (min-width: 1100px) {
  .view:has(> .manual-sales) { max-width: var(--page-max-lg); }
  /* Hero: words on the left, the cover on the right. */
  .manual-hero { grid-template-columns: 1fr 1.2fr; column-gap: var(--s7); align-items: center; }
  .manual-hero > * { grid-column: 1; }
  .manual-hero > .manual-hero-img { grid-column: 2; grid-row: 1 / span 5; }
  .manual-sales .manual-hero .title { font-size: var(--fs-hero-md); }
  /* Tiers side by side, buy buttons lined up along the bottom. */
  .manual-tiers { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .manual-tier { grid-template-rows: auto auto 1fr auto; padding: 0 var(--s5); }
  .manual-tier:first-child { padding-left: 0; }
  .manual-tier:last-child { padding-right: 0; }
  .manual-tier + .manual-tier { padding-top: 0; border-top: 0; border-left: var(--hairline) solid var(--line); }
  .manual-sales .manual-list { grid-template-columns: repeat(3, 1fr); }
  .manual-cta-row { grid-template-columns: repeat(3, 1fr); }
}