/* =========================================================================
   MOBILE — AUTO-SUGGESTION

   One view: the auto-suggestion page linked to whichever sprint is currently
   active. No entry picker, no sprint picker, no separate "Scripts" screen —
   see the file header in mobile-autosuggest.js.

   The photo gallery is deliberately a plain wrapped grid of tappable
   thumbnails, not desktop's drag/resize corkboard — see the file header in
   mobile-autosuggest.js for why that's safe for the data desktop stores.
   ========================================================================= */

/* ---------------- document card ---------------- */
.as-doc{ padding:16px; }

.as-head{ margin-bottom:12px; }
.as-title{
  margin:0; font-family:var(--font-display); font-size:21px; font-weight:600;
  line-height:1.28; color:var(--text); word-break:break-word;
}
.as-title-edit{
  width:100%; min-height:var(--tap); padding:0 10px;
  background:var(--card-subtle); color:var(--text);
  border:1px solid var(--accent); border-radius:var(--r-md);
  font-family:var(--font-display); font-size:19px; font-weight:600;
}
.as-title-edit:focus{ outline:none; box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3); }
.as-meta{
  margin-top:5px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.6px; color:var(--faint);
}

.as-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line-soft);
}

/* ---------------- the reading bar ----------------
   Narration player + text-size stepper, pinned to the top of the scroll area
   for as long as the document card is on screen. The scroll container is
   .screens (app.css), and .as-doc is this element's containing block, so it
   releases naturally at the end of the document rather than floating over the
   next screen.

   top is NEGATIVE, and that is load-bearing. A sticky element's constraint
   rectangle is inset by the scroll container's padding, and .screens carries
   18px of padding-top (app.css) — so top:0 pins the bar ~22px down from the
   scrollport edge and body text scrolls visibly through the strip above it.
   The negative top cancels that inset and pins the bar flush; the same amount
   is folded into padding-top so the bar's contents sit in the same place stuck
   or unstuck. Overshooting is harmless (the scroller clips at its padding box)
   but undershooting brings the sliver of scrolling text back, so if .screens
   padding ever changes, re-check this by measuring rather than by arithmetic.

   Full-bleed to the card's edges via negative side margins, so the pinned
   state reads as a bar and not as a card that got stuck. */
.as-readbar{
  position:sticky; top:-22px; z-index:6;
  /* The negative top margin cancels .as-actions' own bottom margin, which the
     padding-top below then re-supplies from INSIDE the sticky box — so the gap
     above the player travels with it when it pins. .as-actions keeps that
     margin for the case where this bar is not emitted at all (no clip). */
  margin:-16px -16px 16px; padding:32px 16px 0;
  background:var(--card);              /* opaque: body text scrolls cleanly under it */
  border-bottom:1px solid var(--line-soft);
}
.as-readbar .as-audio{ margin-bottom:10px; }

/* ---------------- journal: text size stepper ----------------
   These pages run to many screens of text and get read in very different
   conditions; one fixed body size cannot serve all of them. Device-local, not
   synced — see READ_SIZE_KEY in mobile-autosuggest.js.

   Sits in the actions row (not the sticky bar) — it is a set-once control, and
   pinning it would spend permanent reading space on something nobody reaches
   for mid-read. Pushed to its own full-width line so it never competes with
   Archive/Delete for a tap. */
.as-readsize{
  flex:1 1 100%;
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
}
.as-readsize-btn{
  min-width:40px; height:32px; padding:0 10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--card-subtle); color:var(--muted);
  border:1px solid var(--line-soft); border-radius:var(--r-md);
  font-family:var(--font-display); font-size:13px; font-weight:600; cursor:pointer;
}
.as-readsize-btn-lg{ font-size:16px; }
.as-readsize-btn:active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.as-readsize-btn[disabled]{ opacity:.35; cursor:default; }
.as-readsize-dots{ display:flex; align-items:center; gap:4px; }
.as-readsize-dots i{
  width:5px; height:5px; border-radius:50%; background:var(--line-bright);
}
.as-readsize-dots i.on{ background:var(--accent); }

/* ---------------- journal: narration audio (read-only) ----------------
   Play/pause + scrub row for an MP3 desktop attached to this entry. Mobile
   never attaches/replaces/removes a clip, so unlike desktop's equivalent
   row there is no upload control here — only playback. Sized for a touch
   target (~40px), bigger than desktop's 26px mouse-sized button. */
.as-audio{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  margin-bottom:16px; padding:10px 12px;
  background:var(--card-subtle); border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
}
/* Ref synced, bytes have not — an inert control that says so, rather than a
   live-looking play button that does nothing when tapped. */
.as-audio-waiting{ opacity:.72; }
.as-audio-play.is-waiting{
  background:transparent; color:var(--faint);
  border:1px dashed var(--line-bright); cursor:default;
}
.as-audio-play{
  flex:none; width:40px; height:40px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff;
  border:0; border-radius:50%;
  font-size:14px; line-height:1; cursor:pointer;
}
.as-audio-play:active{ transform:scale(.94); }
.as-audio-scrub{
  flex:1; min-width:60px; height:40px; margin:0;
  accent-color:var(--accent);
}
.as-audio-time{
  flex:none; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.3px; color:var(--faint); white-space:nowrap;
}
.as-audio-name{
  flex:1 1 100%; order:1;
  font-size:12.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------------- journal: rendered / editable body ----------------
   Long-form reading surface. Everything below is expressed against --as-fs
   (the body font size set by the .as-body--s1..s5 scale) so one stepper tap
   moves the whole typographic system — headings, spacing and rules included —
   instead of just inflating paragraphs out of proportion with their headings.

   Sizes rise slightly faster than line-height falls, which is what keeps the
   longest settings readable rather than airy. */
.as-body{
  --as-fs:16.5px;
  --as-lh:1.72;
  font-size:var(--as-fs); line-height:var(--as-lh); color:var(--text);
  /* Longer measures read better with a touch of extra word spacing, and these
     pages are full of short affirmative sentences that otherwise clump. */
  letter-spacing:.005em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.as-body h1, .as-body h2, .as-body h3{
  font-family:var(--font-display); font-weight:600; color:var(--text);
  line-height:1.25; letter-spacing:-.01em;
  margin:1.6em 0 .5em;
}
.as-body h1:first-child, .as-body h2:first-child, .as-body h3:first-child{ margin-top:0; }
.as-body h1{ font-size:1.32em; }
.as-body h2{ font-size:1.16em; }
.as-body h3{ font-size:1.02em; }
.as-body p{ margin:0 0 .9em; white-space:pre-wrap; }
.as-body p:last-child{ margin-bottom:0; }
.as-body blockquote{
  margin:1.1em 0; padding:.15em 0 .15em .85em;
  border-left:3px solid var(--accent); color:var(--muted);
  font-style:italic;
}
.as-body blockquote p{ margin:0 0 .45em; }
.as-body blockquote p:last-child{ margin-bottom:0; }
.as-body hr{
  margin:1.6em 0; border:0; border-top:1px solid var(--line-soft);
}
.as-body strong{ color:var(--text); font-weight:700; }
.as-body-empty{ color:var(--faint); }

/* The editor tracks the reading size, so committing an edit does not resize
   the text under you. */
.as-body-edit{
  --as-fs:16.5px;
  --as-lh:1.7;
  width:100%; min-height:220px; padding:11px;
  background:var(--card-subtle); color:var(--text);
  border:1px solid var(--accent); border-radius:var(--r-md);
  font-family:var(--font); font-size:var(--as-fs); line-height:var(--as-lh);
  resize:vertical;
}
.as-body-edit:focus{ outline:none; box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3); }

/* The scale itself. Declared LAST on purpose: it shares specificity (0,1,0)
   with the .as-body / .as-body-edit defaults above and is applied alongside
   them on the same element, so source order is the only thing that lets it
   win. Moving this block earlier silently pins both surfaces at their
   defaults and the stepper stops doing anything. */
.as-body--s1{ --as-fs:14.5px; --as-lh:1.66; }
.as-body--s2{ --as-fs:15.5px; --as-lh:1.7;  }
.as-body--s3{ --as-fs:16.5px; --as-lh:1.72; }
.as-body--s4{ --as-fs:18.5px; --as-lh:1.7;  }
.as-body--s5{ --as-fs:21px;   --as-lh:1.62; }

/* ---------------- reading modes: Reader / Focus / Sections ----------------
   A second axis alongside the size stepper above: how much of the page is on
   screen at once, not how big it is. Shared by the Journal document card
   (mobile-autosuggest.js) and the Briefing Auto-Suggestion step
   (mobile-briefing.js) — same classes, same markup shape, so this one block
   styles both surfaces. */
.as-readmode{ margin:14px 0; }
.as-readmode-row{ display:flex; align-items:center; gap:10px; margin:14px 0; flex-wrap:wrap; }
.as-readmode-row .as-readmode{ flex:1 1 190px; margin:0; }

/* ---- Sections: heading-grouped cards + a jump strip ---- */
.as-jumper{
  display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:4px; margin-bottom:14px;
}
.as-jump{
  flex:none; min-height:32px; padding:0 12px;
  display:inline-flex; align-items:center;
  background:var(--card-subtle); color:var(--muted);
  border:1px solid var(--line); border-radius:20px;
  font-size:12.5px; font-weight:600; font-family:var(--font);
  white-space:nowrap; cursor:pointer;
}
.as-jump:active{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

.as-section{
  margin:0 0 14px; padding:14px 15px;
  background:var(--card-subtle); border:1px solid var(--line-soft);
  border-left:3px solid rgba(var(--accent-rgb),.5);
  border-radius:var(--r-lg);
}
.as-section:last-child{ margin-bottom:0; }
.as-section.is-collapsed .as-section-body{
  max-height:56px; overflow:hidden; position:relative;
}
.as-section.is-collapsed .as-section-body::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:30px;
  background:linear-gradient(180deg, rgba(7,9,17,0), var(--card-subtle));
}
.as-section-more{
  display:inline-flex; margin-top:8px; padding:0;
  background:none; border:0;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.8px;
  text-transform:uppercase; color:var(--accent); cursor:pointer;
}

/* ---- Focus: one passage at a time, dimmed neighbours for orientation ---- */
.as-focus{ position:relative; padding:4px 0 6px; }
.as-focus-chunk{ margin:0 0 18px; }
.as-focus-chunk p{ margin:0 0 .8em; }
.as-focus-chunk p:last-child{ margin:0; }
.as-focus-past, .as-focus-future{
  font-size:calc(var(--as-fs, 16.5px) * .82); line-height:1.55;
  color:var(--faint); opacity:.55;
}
.as-focus-now{
  font-size:calc(var(--as-fs, 16.5px) * 1.5); line-height:1.5;
  color:var(--text); font-weight:450; letter-spacing:-.2px;
  padding-left:14px; border-left:3px solid var(--accent);
}
.as-focus-kicker{
  display:block; margin-bottom:8px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--accent);
}
.as-focus-tap{
  position:absolute; top:0; bottom:0;
  border:0; background:transparent; padding:0; margin:0; cursor:pointer;
}
.as-focus-tap-l{ left:0; width:32%; }
.as-focus-tap-r{ right:0; width:68%; }
.as-focus-tap[disabled]{ cursor:default; }
.as-focus-rail{ display:flex; gap:4px; margin:4px 0 8px; }
.as-focus-rail i{ flex:1; height:3px; border-radius:2px; background:var(--line-soft); }
.as-focus-rail i.done{ background:rgba(var(--accent-rgb),.45); }
.as-focus-rail i.now{ background:var(--accent); }
.as-focus-count{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--faint); margin-bottom:6px;
}

/* Reader mode reuses .suggestion (the Briefing step's existing reading card)
   for its bordered look, but the font now tracks the shared size stepper
   instead of a fixed 16px — declared here so it wins over app.css's .suggestion
   rule by source order (mobile-autosuggest.css loads after app.css). */
.suggestion.as-body{
  font-size:var(--as-fs, 16px); line-height:var(--as-lh, 1.65);
  white-space:normal;
}

/* ---------------- journal: photo gallery ----------------
   Deliberately not a pinboard: a wrapped grid of thumbnails. See the header
   comment in mobile-autosuggest.js for the reasoning and the data contract
   this preserves. */
.as-photos{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); }
.as-photos-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.as-photos-head span{
  font-family:var(--font-mono); font-size:11px; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--faint);
}
.as-photos-empty{ margin:0; font-size:13px; color:var(--faint); }

.as-gallery{ display:flex; flex-wrap:wrap; gap:10px; }
.as-photo{
  position:relative; margin:0; width:92px; height:92px; flex:none;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-soft); background:var(--card-subtle);
  cursor:pointer;
}
.as-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.as-photo-x{
  position:absolute; top:3px; right:3px; z-index:1;
  width:24px; height:24px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,7,13,.72); color:#fff;
  border:0; border-radius:50%; font-size:12px; line-height:1; cursor:pointer;
}
.as-photo-x:active{ background:rgba(var(--danger-rgb),.8); }

/* ---------------- journal: lightbox ---------------- */
.as-lightbox{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(5,7,13,.92);
}
.as-lightbox img{
  max-width:100%; max-height:100%;
  border-radius:var(--r-lg); box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.as-lightbox-close{
  position:absolute; top:calc(env(safe-area-inset-top) + 14px); right:16px;
  width:40px; height:40px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--card-2); color:var(--text);
  border:1px solid var(--line-bright); border-radius:50%;
  font-size:16px; cursor:pointer;
}