/* MPLS Ramah v1.6.6 — Design System Foundation
   Safe bridge: no markup refactor and no legacy stylesheet removal. */

/* Semantic surfaces used by schedule and newer modules. */
.schedule-page,
.schedule-shell,
.schedule-card,
.schedule-day-card,
.schedule-activity-card,
.schedule-detail-card,
.schedule-material-card{
  color:var(--text-primary);
}
.schedule-card,
.schedule-day-card,
.schedule-activity-card,
.schedule-detail-card,
.schedule-material-card{
  border-color:var(--border-color);
  background:var(--surface-card);
  box-shadow:var(--shadow-soft);
}

/* One consistent keyboard focus language across the application. */
:where(a[href],button,input,select,textarea,summary,[role="button"],[role="menuitem"],[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:3px solid var(--app-blue);
  outline-offset:3px;
  box-shadow:var(--app-focus-ring);
}
:where(input,select,textarea):focus-visible{
  outline-width:2px;
  outline-offset:1px;
}
:where(.button,.icon-button,.mobile-tab,.profile-button,.sheet-menu-item,.preference-row):focus-visible{
  border-radius:inherit;
}

/* Central layering scale: prevent sheets, emoji pickers, toasts, and modals from overlapping. */
.skip-link{z-index:var(--app-z-critical)}
.app-topbar{z-index:var(--app-z-sticky)}
.mobile-tabbar{z-index:var(--app-z-tabbar)}
.floating-safe-button{z-index:var(--app-z-floating)}
.sheet-backdrop{z-index:var(--app-z-sheet-backdrop)}
.more-sheet{z-index:var(--app-z-sheet)}
.toast-stack,.celebration-toast{z-index:var(--app-z-toast)}
.discussion-new-comments{z-index:calc(var(--app-z-sticky) + 1)}
.discussion-topic-reaction-picker,
.discussion-comment-reaction-picker,
.discussion-quick-emoji,
.discussion-mention-menu,
.discussion-moderation-menu>div{z-index:var(--app-z-picker)}
.photo-editor-overlay,.qr-fullscreen-v165{z-index:var(--app-z-modal)}
.discussion-report-dialog{z-index:var(--app-z-modal-top)}

/* Touch target foundation. Visual icons can stay compact while the tap area remains safe. */
@media (pointer:coarse), (max-width:820px){
  body.role-peserta :where(.button,.button-small,.icon-button,.profile-button,.mobile-tab,.preference-row,.sheet-menu-item),
  .discussion-topic-love,
  .discussion-share-button,
  .discussion-emoji-button,
  .discussion-send-button,
  .discussion-comment-love,
  .discussion-comment-action,
  .discussion-moderation-menu summary,
  .discussion-topic-reaction-picker button,
  .discussion-comment-reaction-picker button,
  .discussion-quick-emoji button,
  .discussion-reply-context button,
  .discussion-lock-button,
  .discussion-new-comments,
  .qr-fullscreen-close-v165{
    min-height:var(--app-touch-target);
  }
  .discussion-emoji-button,
  .discussion-send-button,
  .discussion-comment-love,
  .discussion-moderation-menu summary,
  .qr-fullscreen-close-v165{
    min-width:var(--app-touch-target);
    width:var(--app-touch-target);
    height:var(--app-touch-target);
  }
  .discussion-comment-action{
    padding:8px 7px;
  }
  .discussion-reply-context button{
    min-width:var(--app-touch-target);
    display:grid;
    place-items:center;
  }
  .mpls-card-disclosure-v165>summary,
  .participant-stage-pill-v165,
  .participant-day-card-v165,
  .attendance-timeline-item-v165{
    min-height:var(--app-touch-target);
  }
}

/* Participant typography: prevent critical metadata from falling below a readable mobile size. */
.role-peserta .participant-day-card-head-v165 small,
.role-peserta .participant-stage-head-v165 small,
.role-peserta .participant-stage-pill-v165 span,
.role-peserta .mpls-card-role-v165,
.role-peserta .mpls-card-disclosure-v165>summary small,
.role-peserta .mpls-history-panel-v165 header small,
.role-peserta .qr-fullscreen-brand-v165 small{
  font-size:var(--app-font-meta);
  line-height:1.25;
}
.role-peserta .participant-day-card-v165>em,
.role-peserta .mpls-card-status-list-v165 .mpls-card-status small,
.role-peserta .mpls-card-detail-list-v165 dt,
.role-peserta .mpls-card-detail-list-v165 dd,
.role-peserta .mpls-card-security-note-v165,
.role-peserta .attendance-timeline-item-v165 small,
.role-peserta .attendance-timeline-item-v165 em,
.role-peserta .attendance-timeline-item-v165>span:last-child{
  font-size:var(--app-font-meta);
  line-height:1.4;
}
.mobile-tab{font-size:11px}

/* Discussion typography and spacing. */
.discussion-head>div:first-child>small,
.discussion-summary,
.discussion-moderator-links a,
.discussion-comment-who small,
.discussion-comment-reaction-summary{
  font-size:var(--app-font-meta);
  line-height:1.35;
}
.discussion-comment-who em,
.discussion-status-chip,
.discussion-report-chip{
  font-size:10.5px;
  line-height:1.2;
  padding:4px 7px;
}
.discussion-comment-action{font-size:12px}
.discussion-comment-text{font-size:14px;line-height:1.5}
.discussion-composer{grid-template-columns:38px minmax(0,1fr) var(--app-touch-target)}
.discussion-emoji-button,.discussion-send-button{font-size:20px}

/* One-time helper injected by design-system-v166.js. */
.discussion-press-hint-v166{
  width:max-content;
  max-width:100%;
  margin:0 0 8px;
  padding:7px 10px;
  border:1px solid var(--app-separator);
  border-radius:999px;
  background:var(--app-blue-soft);
  color:var(--app-text-secondary);
  font-size:11px;
  font-weight:650;
  line-height:1.25;
  opacity:1;
  transform:translateY(0);
  transition:opacity .18s var(--app-ease),transform .18s var(--app-ease);
}
.discussion-press-hint-v166.is-hiding{opacity:0;transform:translateY(-3px)}

/* Reconnect hard-coded module surfaces to the shared app palette. */
.discussion-shell,
.discussion-report-card,
.discussion-topic-reaction-picker,
.discussion-comment-reaction-picker,
.discussion-quick-emoji,
.discussion-mention-menu,
.discussion-moderation-menu>div,
.mpls-card-disclosure-v165,
.mpls-history-panel-v165,
.participant-stage-card-v165,
.participant-day-card-v165{
  border-color:var(--app-separator);
  background:var(--app-surface-solid);
  color:var(--app-text);
}
.discussion-topic-love,
.discussion-share-button,
.discussion-composer,
.mpls-card-status-list-v165 .mpls-card-status,
.attendance-timeline-dot-v165,
.participant-stage-pill-v165 i{
  border-color:var(--app-separator);
  background:var(--app-surface-secondary);
  color:var(--app-text);
}
.discussion-moderation-menu button{color:var(--app-text)}
.discussion-moderation-menu button:hover,
.discussion-mention-item:hover,
.discussion-mention-item:focus,
.discussion-topic-reaction-picker button:hover,
.discussion-topic-reaction-picker button:focus-visible,
.discussion-topic-reaction-picker button.is-active,
.discussion-comment-reaction-picker button:hover,
.discussion-comment-reaction-picker button:focus-visible,
.discussion-comment-reaction-picker button.is-active{
  background:var(--app-surface-secondary);
}

/* Explicit app-selected dark mode overrides older hard-coded module palettes. */
html[data-theme="dark"] .discussion-shell,
html[data-theme="dark"] .discussion-report-card,
html[data-theme="dark"] .discussion-topic-reaction-picker,
html[data-theme="dark"] .discussion-comment-reaction-picker,
html[data-theme="dark"] .discussion-quick-emoji,
html[data-theme="dark"] .discussion-mention-menu,
html[data-theme="dark"] .discussion-moderation-menu>div,
html[data-theme="dark"] .mpls-card-disclosure-v165,
html[data-theme="dark"] .mpls-history-panel-v165,
html[data-theme="dark"] .participant-stage-card-v165,
html[data-theme="dark"] .participant-day-card-v165{
  background:var(--app-surface-solid);
  color:var(--app-text);
  border-color:var(--app-separator);
}
html[data-theme="dark"] .discussion-topic-love,
html[data-theme="dark"] .discussion-share-button,
html[data-theme="dark"] .discussion-composer,
html[data-theme="dark"] .mpls-card-status-list-v165 .mpls-card-status,
html[data-theme="dark"] .attendance-timeline-dot-v165,
html[data-theme="dark"] .participant-stage-pill-v165 i{
  background:var(--app-surface-secondary);
  color:var(--app-text);
  border-color:var(--app-separator);
}
html[data-theme="dark"] .participant-day-card-v165.is-today{
  background:linear-gradient(145deg,var(--app-blue-soft),var(--app-surface-solid) 64%);
}
html[data-theme="dark"] .participant-day-card-v165.is-complete{
  background:linear-gradient(145deg,var(--app-green-soft),var(--app-surface-solid) 64%);
}
html[data-theme="dark"] .discussion-comment{border-color:var(--app-separator)}
html[data-theme="dark"] .discussion-comment-who em{background:var(--app-surface-secondary);color:var(--app-text-secondary)}
html[data-theme="dark"] .discussion-comment-action,
html[data-theme="dark"] .discussion-comment-reaction-summary,
html[data-theme="dark"] .discussion-summary,
html[data-theme="dark"] .discussion-typing{color:var(--app-text-secondary)}
html[data-theme="dark"] .discussion-input-wrap textarea{color:var(--app-text)!important}
html[data-theme="dark"] .discussion-input-wrap textarea::placeholder{color:var(--app-text-tertiary)}

/* System dark mode when the user has not selected light explicitly. */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .discussion-shell,
  html:not([data-theme="light"]) .discussion-report-card,
  html:not([data-theme="light"]) .discussion-topic-reaction-picker,
  html:not([data-theme="light"]) .discussion-comment-reaction-picker,
  html:not([data-theme="light"]) .discussion-quick-emoji,
  html:not([data-theme="light"]) .discussion-mention-menu,
  html:not([data-theme="light"]) .discussion-moderation-menu>div,
  html:not([data-theme="light"]) .mpls-card-disclosure-v165,
  html:not([data-theme="light"]) .mpls-history-panel-v165,
  html:not([data-theme="light"]) .participant-stage-card-v165,
  html:not([data-theme="light"]) .participant-day-card-v165{
    background:var(--app-surface-solid);
    color:var(--app-text);
    border-color:var(--app-separator);
  }
  html:not([data-theme="light"]) .discussion-topic-love,
  html:not([data-theme="light"]) .discussion-share-button,
  html:not([data-theme="light"]) .discussion-composer,
  html:not([data-theme="light"]) .mpls-card-status-list-v165 .mpls-card-status,
  html:not([data-theme="light"]) .attendance-timeline-dot-v165,
  html:not([data-theme="light"]) .participant-stage-pill-v165 i{
    background:var(--app-surface-secondary);
    color:var(--app-text);
    border-color:var(--app-separator);
  }
  html:not([data-theme="light"]) .participant-day-card-v165.is-today{
    background:linear-gradient(145deg,var(--app-blue-soft),var(--app-surface-solid) 64%);
  }
  html:not([data-theme="light"]) .participant-day-card-v165.is-complete{
    background:linear-gradient(145deg,var(--app-green-soft),var(--app-surface-solid) 64%);
  }
  html:not([data-theme="light"]) .discussion-comment{border-color:var(--app-separator)}
  html:not([data-theme="light"]) .discussion-comment-who em{background:var(--app-surface-secondary);color:var(--app-text-secondary)}
  html:not([data-theme="light"]) .discussion-comment-action,
  html:not([data-theme="light"]) .discussion-comment-reaction-summary,
  html:not([data-theme="light"]) .discussion-summary,
  html:not([data-theme="light"]) .discussion-typing{color:var(--app-text-secondary)}
  html:not([data-theme="light"]) .discussion-input-wrap textarea{color:var(--app-text)!important}
  html:not([data-theme="light"]) .discussion-input-wrap textarea::placeholder{color:var(--app-text-tertiary)}
}

/* Compact screens: preserve width after the 44 px touch-target upgrade. */
@media(max-width:390px){
  .discussion-composer{grid-template-columns:30px minmax(0,1fr) var(--app-touch-target);gap:5px}
  .discussion-composer-avatar{width:30px;height:30px}
  .discussion-comment-actions{gap:1px 3px}
  .discussion-comment-action{padding-inline:5px}
  .discussion-press-hint-v166{font-size:10.5px}
}

@media(prefers-reduced-motion:reduce){
  .discussion-press-hint-v166{transition:none}
}