/* ============================================================
   Executive accessibility & mobile UX  (40+ demographic)
   + Comments / Feedback section styling.
   Loaded last so it can gently raise touch targets and legibility
   without touching the existing component CSS.
   ============================================================ */

/* ---------- Comments / Feedback ---------- */
.comments-section{ display:flex; flex-direction:column; gap:16px; }

.comment-composer{ padding:18px; }
.comment-input{
  width:100%; box-sizing:border-box; resize:vertical; min-height:96px;
  padding:14px 16px; font-family:inherit; font-size:16px; line-height:1.6;
  color:var(--ink); background:var(--surface); border:1.5px solid var(--line-strong);
  border-radius:12px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.comment-input::placeholder{ color:var(--faint); }
.comment-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

.comment-actions{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:12px; flex-wrap:wrap;
}
.comment-hint{ font-size:12.5px; color:var(--faint); }
.comment-submit{ min-height:48px; padding:12px 22px; font-size:15px; border-radius:12px; }
.comment-submit:disabled{ opacity:.5; cursor:not-allowed; }

.comment-list{ display:flex; flex-direction:column; gap:12px; }
.comment-item{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px;
}
.comment-item .avatar.md{ flex:none; }
.comment-body{ flex:1; min-width:0; }
.comment-meta{ display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; margin-bottom:5px; }
.comment-author{ font-size:15px; color:var(--ink); }
.comment-when{ font-size:12px; color:var(--muted); }
.comment-text{ font-size:15.5px; line-height:1.65; color:var(--ink2); white-space:pre-wrap; word-break:break-word; }
.comment-del{ flex:none; width:40px; height:40px; color:var(--faint); }
.comment-del:hover{ color:var(--danger); }

.next-step-link:hover b{ text-decoration:underline; }

/* ============================================================
   Mobile-first touch & legibility (≤ 999px = the app's mobile mode).
   Executives skew 40+, so on phones/tablets we enforce comfortable
   48px touch targets and larger text without disturbing desktop.
   ============================================================ */
@media (max-width:999px){
  /* Comfortable tap targets — buttons, tabs, nav, inputs ≥ 48px */
  .btn, .btn.sm{ min-height:48px; }
  .btn.sm{ padding:10px 16px; font-size:14px; }
  .tab{ min-height:48px; padding:11px 16px; font-size:15px; }
  .icon-btn{ min-width:48px; min-height:48px; }
  .bottomnav a{ min-height:56px; }
  .bottomnav a span{ font-size:12px; }

  /* Legible form controls */
  input, select, textarea{ min-height:48px; font-size:16px; }   /* 16px avoids iOS zoom */

  /* Larger key data on the executive project cards */
  .proj-card-title{ font-size:17px !important; }
  .exec-card-clickable{ padding:18px !important; }

  /* Comment composer/list breathe a bit more on phones */
  .comment-input{ font-size:16px; }
  .comment-text{ font-size:16px; }
  .comment-item{ padding:16px; }

  /* Snapshot tiles: bigger numbers, easier to read at arm's length */
  .exec-stat .v{ font-size:26px; }
  .exec-stat .l{ font-size:13.5px; }
}

/* Very small phones — let the executive snapshot tiles stack 2-up cleanly */
@media (max-width:440px){
  .comment-actions{ flex-direction:column-reverse; align-items:stretch; }
  .comment-submit{ width:100%; justify-content:center; }
  .comment-hint{ text-align:center; }
}

/* ---------- Executive Snapshot: header + collapse toggle ---------- */
.exec-snap-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.exec-snap-toggle{ flex:none; min-height:40px; padding:8px 14px; gap:6px; white-space:nowrap; }
.exec-snap-hint{ margin-top:10px; font-size:12.5px; color:var(--muted); }
.exec-allclear{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-radius:14px;
  background:var(--exec-ok-tint, var(--raised)); border:1px solid var(--line-soft);
  color:var(--ink2); font-size:15px; font-weight:600;
}
.exec-allclear .ic{
  width:26px; height:26px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:var(--ok); color:#fff; font-size:15px; font-weight:700;
}

/* Mobile: compact snapshot grid so tiles no longer eat the whole screen.
   A single issue-tile stretches full width; two-or-more go 2-up. */
@media (max-width:999px){
  .exec-screen .exec-snapshot{
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:10px;
  }
  .exec-screen .exec-stat{ padding:14px 14px; gap:4px; }
  .exec-snapshot-card{ padding:16px !important; }
}

/* ============================================================
   LINE Report Studio — editor + live preview
   ============================================================ */
.lrs-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:16px; align-items:start; }
@media (max-width:900px){ .lrs-wrap{ grid-template-columns:1fr; } }
.lrs-editor{ min-width:0; }
.lrs-preview{ min-width:0; }
.lrs-preview-sticky{ position:sticky; top:14px; }

/* Phone / LINE chat mockup */
.lrs-phone{ border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#8CABD9; box-shadow:var(--shadow); }
.lrs-chat-top{ display:flex; align-items:center; gap:10px; padding:11px 14px; background:#fff; border-bottom:1px solid rgba(0,0,0,.06); }
.lrs-oa-av{ width:34px; height:34px; border-radius:10px; background:#2F5D50; color:#FAF8F3; display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:14px; flex:none; }
.lrs-chat-body{ padding:14px 12px 18px; background:#8CABD9; min-height:220px;
  background-image:linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.05)); }
.lrs-msg-row{ display:flex; gap:8px; align-items:flex-start; }
.lrs-msg-av{ width:30px; height:30px; border-radius:50%; background:#2F5D50; color:#FAF8F3; display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:12px; flex:none; }
.lrs-skel{ background:#fff; border-radius:12px; padding:20px 16px; font-size:13px; color:#6E6757; text-align:center; max-width:280px; }

/* dark theme: keep the LINE mockup light (LINE chat is light regardless of app theme) */
[data-theme="dark"] .lrs-chat-top{ background:#fff; }
[data-theme="dark"] .lrs-skel{ color:#6E6757; }

@media (max-width:900px){
  .lrs-preview-sticky{ position:static; }
}