/* EVO TrustGuard — page-updates.css
 *
 * Owned by:    updates.html
 * Category:    portal feature page
 * Cascade:     tokens → base → utilities → components → portal-chrome → shared → shared-themes → page
 * Edit policy: rules unique to this page only. Anything used by 5+
 *              pages should be promoted to /css/components.css or
 *              /css/portal-chrome.css with a /css/AGENTS.md update.
 *
 * Extracted:   1 <style> block(s), 124 lines.
 * Method:      verbatim move — no token substitution applied yet.
 *              See C56 audit Section 10.A for the deferred token
 *              normalization sprint plan.
 */

  body { font-family: var(--font-sans); background: var(--bg); color: var(--dark); line-height: var(--leading-relaxed); min-height: 100vh; display: flex; flex-direction: column; padding-bottom: var(--space-6); }

  /* TOP BAR — mirrors suggestion-box.html / profile.html */
  .top-bar { background: var(--white); border-bottom: 0.5px solid var(--border); padding: calc(12px + env(safe-area-inset-top)) 16px 12px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); position: sticky; top: 0; z-index: var(--z-nav); }
  .top-bar-back { background: none; border: none; padding: var(--space-1-5); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--dark); min-width: 36px; min-height: 36px; }
  .top-bar-back svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }
  .top-bar-title { font-family: var(--font-sans); font-size: var(--text-input); font-weight: var(--weight-semibold); color: var(--dark); flex: 1; text-align: center; }
  .top-bar-action { background: none; border: none; padding: var(--space-1-5) var(--space-2); cursor: pointer; font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--red); min-height: 36px; transition: opacity 0.15s; }
  .top-bar-action:disabled { opacity: 0.4; cursor: not-allowed; }
  .top-bar-action:hover:not(:disabled) { opacity: 0.85; }

  /* FILTER TABS — same shape as the admin tab bar but row-aligned + scrollable.
     Sticky offset matches the top-bar's actual height including the iOS
     notch's safe-area inset. The top bar is calc(12 + safe-inset) + ~36
     content + 12 = 60 + inset, so the filter bar sticks immediately below it. */
  .filter-bar { background: var(--white); border-bottom: 1px solid var(--border); padding: 0 var(--space-4); display: flex; gap: var(--space-1); overflow-x: auto; -webkit-overflow-scrolling: touch; position: sticky; top: calc(60px + env(safe-area-inset-top)); z-index: 90; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { padding: var(--space-3) var(--space-3-5); background: none; border: none; border-bottom: 3px solid transparent; font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--light); cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s; min-height: 44px; }
  .filter-btn:hover { color: var(--dark); }
  .filter-btn.active { color: var(--red); border-bottom-color: var(--red); }

  /* PAGE WRAP */
  .page { max-width: 720px; margin: 0 auto; width: 100%; padding: var(--space-3-5) var(--space-3-5) var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }

  /* POST CARD */
  .post-card { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: var(--space-4) var(--space-4) var(--space-3-5); box-shadow: 0 2px 6px rgba(0,0,0,0.04); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s; display: flex; flex-direction: column; gap: var(--space-2); overflow: hidden; }
  .post-card:hover { border-color: var(--border-strong); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
  .post-card:active { transform: scale(0.997); }

  /* Unread cards: red left border + brighter background. Read cards stay
     on the default white card with a thinner left border to dim. */
  .post-card.is-unread { border-left: 4px solid var(--red); padding-left: 13px; background: var(--white); }
  .post-card.is-read   { opacity: 0.78; }

  /* HEADER IMAGE — full-bleed banner above the title. Card has
     overflow:hidden + border-radius so the banner top corners follow
     the card's rounding without the bottom corners curving back. The
     negative margins suck the image to the card edges, then the body
     padding resumes after. */
  .post-header-img { display: block; width: calc(100% + 32px); margin: -16px -16px 4px; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg); }
  .post-card.is-unread .post-header-img { width: calc(100% + 30px); margin-left: -13px; margin-right: -16px; }

  .post-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .post-pill { display: inline-block; font-size: var(--text-xxs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.4px; padding: 3px 8px; border-radius: 6px; background: var(--border); color: #4b5563; line-height: var(--leading-normal); }
  .post-pill.t-feature, .post-pill.t-improvement { background: var(--status-active-wash); color: var(--status-active-hover); }
  .post-pill.t-fix         { background: var(--border); color: #4b5563; }
  .post-pill.t-news        { background: var(--red-light); color: var(--red); }
  .post-pill.t-maintenance { background: #fef3c7; color: #92400e; }
  .post-when { font-size: var(--text-sm); color: var(--light); font-weight: var(--weight-regular); }

  .post-title { font-family: var(--font-sans); font-size: 17px; font-weight: var(--weight-bold); color: var(--dark); line-height: var(--leading-snug); }
  .post-body { font-size: var(--text-base); color: var(--mid); line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
  .post-learn { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--red); text-decoration: none; align-self: flex-start; }
  .post-learn:hover { text-decoration: underline; }

  .post-author { font-size: var(--text-xs); color: var(--light); font-weight: var(--weight-regular); }

  /* COLLAPSIBLE BODY — posts whose body length crosses POST_COLLAPSE_THRESHOLD
     (250 chars) are gated behind a 3-line preview with a fade-out gradient.
     Tap the card OR the Read more / Show less button to flip. State is
     per-render only (not persisted) — page reload re-collapses long bodies
     by design.
     The wrapper holds overflow during the 200ms max-height transition, the
     ::after sits inside the wrapper so the fade aligns with the clip line.
     Expanded uses a 5000px ceiling so any reasonable body fits — we never
     animate to "auto" because that breaks the transition. */
  .post-body-wrap { position: relative; }
  .post-card.is-collapsible .post-body-wrap { transition: max-height 0.2s ease; overflow: hidden; }
  .post-card.is-collapsible:not(.is-expanded) .post-body-wrap { max-height: 4.5em; }
  .post-card.is-collapsible.is-expanded     .post-body-wrap { max-height: 5000px; }
  .post-card.is-collapsible:not(.is-expanded) .post-body-wrap::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white));
    pointer-events: none;
  }
  .post-toggle { background: none; border: none; padding: var(--space-2-5) 0 var(--space-1-5); min-height: 44px; align-self: flex-start; font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--red); cursor: pointer; line-height: var(--leading-normal); }
  .post-toggle:hover { text-decoration: underline; }
  .post-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: var(--space-0-5); border-radius: var(--radius-sm); }

  /* LOAD MORE / EMPTY / LOADING */
  .feed-loading { padding: 60px 20px; text-align: center; }
  .feed-empty   { padding: 60px 20px; text-align: center; color: var(--light); }
  .feed-empty h2 { font-family: var(--font-serif); font-size: var(--text-3xl); color: var(--dark); margin-bottom: var(--space-1-5); }
  .feed-empty p  { font-size: var(--text-base); color: var(--light); max-width: 320px; margin: 0 auto; }
  .spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--red); border-radius: 50%; animation: spin 0.6s linear infinite; margin: 0 auto 12px; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .load-more-btn { margin: 12px auto 0; padding: 11px 20px; border: 1.5px solid var(--border); background: var(--white); font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--dark); border-radius: 10px; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
  .load-more-btn:hover { border-color: var(--dark); }
  .load-more-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  /* TOAST */
  .toast { position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%); background: var(--dark); color: var(--white); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-md); font-weight: var(--weight-medium); box-shadow: 0 4px 14px rgba(0,0,0,0.3); z-index: var(--z-modal); opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
  .toast.error { background: var(--red); }

  /* DARK MODE OVERRIDES — explicit because the .post-card / .top-bar /
     .filter-bar shapes use var(--white) which is brand white in both
     themes; surfaces flip via the [data-theme="dark"] selector. */
  [data-theme="dark"] .top-bar     { background: var(--surface); border-bottom-color: var(--border); }
  [data-theme="dark"] .filter-bar  { background: var(--surface); border-bottom-color: var(--border); }
  [data-theme="dark"] .top-bar-title { color: var(--text); }
  [data-theme="dark"] .top-bar-back  { color: var(--text); }
  [data-theme="dark"] .filter-btn    { color: var(--text-muted); }
  [data-theme="dark"] .filter-btn:hover { color: var(--text); }
  [data-theme="dark"] .filter-btn.active { color: var(--red); }
  [data-theme="dark"] .post-card  { background: var(--surface); border-color: var(--border); }
  /* Unread border accent must win the cascade in dark mode — the rule
     above sets `border-color` (shorthand → all four sides), which would
     otherwise repaint the unread red left border to the dim --border
     token and make it disappear against the dark surface. */
  [data-theme="dark"] .post-card.is-unread { border-left-color: var(--red); }
  [data-theme="dark"] .post-title { color: var(--text); }
  [data-theme="dark"] .post-body  { color: var(--text-muted); }
  [data-theme="dark"] .post-when, [data-theme="dark"] .post-author { color: var(--text-muted); }
  /* Fade-out gradient color must match the surface beneath the body
     wrapper in each theme; otherwise the dark-mode collapse leaves a
     hard white ribbon at the cut line. */
  [data-theme="dark"] .post-card.is-collapsible:not(.is-expanded) .post-body-wrap::after {
    background: linear-gradient(to bottom, rgba(20,20,20,0), var(--surface));
  }
  [data-theme="dark"] .feed-empty h2 { color: var(--text); }
  [data-theme="dark"] .load-more-btn { background: var(--surface); border-color: var(--border); color: var(--text); }
  [data-theme="dark"] .load-more-btn:hover { border-color: var(--text-muted); }