/*
 * Unity Social shared look. Copyright 2026 WorkflowUnity LLC. Unity Plan.
 * Used by upload.html, approve.html, inbox.html, connect.html. Keep this API small and stable.
 *
 * HOW TO USE
 *   <link rel="stylesheet" href="assets/unity-social.css">
 *   <body class="us-body"> <main class="us-page"> ... </main> </body>
 *   Brand: unity-social.js US.applyBrand(tenant.brand) sets --us-brand and --us-accent on <html>.
 *   You can also set them by hand: <html style="--us-brand:#1b4f72;--us-accent:#c0392b">
 *
 * CLASSES
 *   .us-page        centered column, max 640px, 16px side gutters
 *   .us-header      top bar with .us-logo (img) and .us-tenant (church name)
 *   .us-title       big page title (one per screen)
 *   .us-lead        20px intro text under the title
 *   .us-card        panel with padding and border
 *   .us-btn         big button (min 56px tall). Variants: .us-btn-primary (brand fill, default look),
 *                   .us-btn-secondary (outline), .us-btn-danger. Add .us-btn-block for full width, .us-btn-huge for 88px.
 *   .us-field       wrapper for label + input; .us-label, .us-input (56px tall)
 *   .us-banner      status box: .us-banner-success / -error / -info. Use US.showBanner(el, kind, text) or markup:
 *                   <div class="us-banner us-banner-error" role="alert"><span class="us-icon" aria-hidden="true">!</span><div>text</div></div>
 *   .us-progress    <div class="us-progress"><div class="us-progress-bar" style="width:40%"></div></div>
 *   .us-list / .us-row   plain list of rows; .us-pill status chip (.us-pill-ok, -work, -wait, -bad)
 *   .us-muted       softer text (still passes contrast)
 *   .us-hidden      display:none
 *   .us-dropzone    dashed drop target; .us-dropzone.is-over while dragging
 *   .us-stack       vertical gap helper (children spaced 16px)
 *   .us-sr          screen reader only text
 * Rules: 18px base text, 56px buttons, 48px minimum for any tap target, focus ring always visible,
 * works in light and dark, respects reduced motion.
 */
:root {
  --us-brand: #1b4f72;
  --us-accent: #b9470b;
  --us-on-brand: #ffffff;
  --us-bg: #f6f7f9;
  --us-card: #ffffff;
  --us-text: #14181f;
  --us-muted: #4a5360;
  --us-border: #8a94a3;
  --us-ok-bg: #e3f6e8; --us-ok-fg: #0b4a1f; --us-ok-bd: #1a7a38;
  --us-err-bg: #fde8e6; --us-err-fg: #6b1008; --us-err-bd: #c0281a;
  --us-info-bg: #e5effa; --us-info-fg: #0d3560; --us-info-bd: #2a6cb5;
  --us-focus: #0a58ca;
  --us-on-bd: #ffffff;
  --us-radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --us-bg: #0f1318; --us-card: #1a2029; --us-text: #f2f4f7; --us-muted: #b6bfcc; --us-border: #6b7686;
    --us-ok-bg: #0f2e1a; --us-ok-fg: #c9f2d5; --us-ok-bd: #3fb561;
    --us-err-bg: #3a1411; --us-err-fg: #ffd9d4; --us-err-bd: #ff7a6b;
    --us-info-bg: #12263d; --us-info-fg: #cfe2fa; --us-info-bd: #6aa8ee;
    --us-focus: #8ab8ff;
    --us-on-bd: #0b1118;
  }
}
:root[data-theme="dark"] {
  --us-bg: #0f1318; --us-card: #1a2029; --us-text: #f2f4f7; --us-muted: #b6bfcc; --us-border: #6b7686;
  --us-ok-bg: #0f2e1a; --us-ok-fg: #c9f2d5; --us-ok-bd: #3fb561;
  --us-err-bg: #3a1411; --us-err-fg: #ffd9d4; --us-err-bd: #ff7a6b;
  --us-info-bg: #12263d; --us-info-fg: #cfe2fa; --us-info-bd: #6aa8ee;
  --us-focus: #8ab8ff;
  --us-on-bd: #0b1118;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 100%; }
.us-body, body.us-body {
  margin:0; background: var(--us-bg); color: var(--us-text);
  font: 1.125rem/1.5 var(--us-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
}
.us-page { max-width:40rem; margin:0 auto; padding:1rem 1rem max(3rem, calc(1.5rem + env(safe-area-inset-bottom))); padding-left:max(1rem, env(safe-area-inset-left)); padding-right:max(1rem, env(safe-area-inset-right)); }
.us-header { display: flex; align-items: center; gap:0.75rem; padding:0.5rem 0 1rem; flex-wrap: wrap; min-width:0; }
.us-logo { max-height:3.5rem; max-width:10rem; border-radius: 8px; }
.us-tenant { font-size:1.25rem; font-weight: 700; overflow-wrap: anywhere; min-width:0; }
.who, .pick, .us-caption, .ap-caption, h1, h2, .us-title { overflow-wrap: anywhere; min-width:0; }
.us-title { font-size:2rem; line-height: 1.2; margin:0.5rem 0 0.75rem; font-weight: 800; }
.us-lead { font-size:1.25rem; margin:0 0 1.25rem; color: var(--us-muted); }
.us-card { background: var(--us-card); border: 2px solid var(--us-border); border-radius: var(--us-radius); padding:1.25rem; }
.us-stack > * + * { margin-top:1rem; }
.us-muted { color: var(--us-muted); }
.us-hidden { display: none !important; }
.us-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.us-btn {
  display: inline-flex; align-items: center; justify-content: center; gap:0.5rem;
  min-height:3.5rem; min-width:3.5rem; padding:0.75rem 1.5rem; border-radius: var(--us-radius);
  border: 3px solid var(--us-btn-edge, var(--us-brand)); background: var(--us-brand); color: var(--us-on-brand);
  font: inherit; font-size:1.25rem; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center;
}
.us-btn-primary { background: var(--us-brand); color: var(--us-on-brand); }
.us-btn-secondary { background: transparent; color: var(--us-text); border-color: var(--us-border); }
.us-btn-danger { background: var(--us-err-bd); border-color: var(--us-err-bd); color: var(--us-on-bd, #fff); }
.us-btn-block { display: flex; width: 100%; }
@media (hover: hover) { .us-btn:hover { box-shadow: 0 0 0 3px var(--us-focus); } }
.us-btn[disabled], .us-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.us-btn-huge { min-height:5.5rem; font-size:1.625rem; }

.us-field { display: block; }
.us-label { display: block; font-weight: 700; margin-bottom:0.5rem; }
.us-input {
  width: 100%; min-height:3.5rem; padding:0.75rem 0.875rem; font: inherit; color: var(--us-text);
  background: var(--us-card); border: 2px solid var(--us-border); border-radius: 12px;
}
:focus-visible { outline: 4px solid var(--us-focus); outline-offset: 3px; }
/* Headings get script focus on load (screen readers start there); they are not controls, so no ring (UI review 10-27). */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

.us-banner { display: flex; gap:0.75rem; align-items: flex-start; padding:1rem; border-radius: var(--us-radius); border: 2px solid; font-size:1.125rem; }
.us-banner .us-icon { flex: none; width:2rem; height:2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--us-on-bd, #fff); }
.us-banner-success { background: var(--us-ok-bg); color: var(--us-ok-fg); border-color: var(--us-ok-bd); }
.us-banner-success .us-icon { background: var(--us-ok-bd); }
.us-banner-error { background: var(--us-err-bg); color: var(--us-err-fg); border-color: var(--us-err-bd); }
.us-banner-error .us-icon { background: var(--us-err-bd); }
.us-banner-info { background: var(--us-info-bg); color: var(--us-info-fg); border-color: var(--us-info-bd); }
.us-banner-info .us-icon { background: var(--us-info-bd); }

.us-progress { height:1.75rem; border-radius: 14px; background: var(--us-border); overflow: hidden; }
.us-progress-bar { height: 100%; width:0; background: var(--us-brand); box-shadow: inset 0 0 0 3px var(--us-btn-edge, transparent); border-radius: 14px; transition: width .3s ease; }

.us-list { list-style: none; margin:0; padding:0; }
.us-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap:0.5rem 0.75rem; min-height:3.5rem; padding:0.625rem 0; border-bottom: 1px solid var(--us-border); }
.us-row > * { min-width:0; overflow-wrap: anywhere; }
.us-row:last-child { border-bottom: 0; }
.us-pill { display: inline-block; padding:0.375rem 0.875rem; border-radius: 999px; font-weight: 700; font-size:1rem; border: 2px solid; white-space: normal; text-align: center; overflow-wrap: anywhere; }
.us-pill-ok { background: var(--us-ok-bg); color: var(--us-ok-fg); border-color: var(--us-ok-bd); }
.us-pill-work { background: var(--us-info-bg); color: var(--us-info-fg); border-color: var(--us-info-bd); }
.us-pill-wait { background: var(--us-card); color: var(--us-text); border-color: var(--us-border); }
.us-pill-bad { background: var(--us-err-bg); color: var(--us-err-fg); border-color: var(--us-err-bd); }

.us-h2 { font-size:1.5rem; line-height: 1.25; margin:0 0 0.5rem; font-weight: 800; }
.us-linkbtn { background: none; border: 0; padding:0.75rem 0.25rem; min-height:3rem; font: inherit; font-size:1.125rem; color: var(--us-text); text-decoration: underline; cursor: pointer; text-align: left; }
.us-inline-error { display: flex; gap:0.5rem; align-items: flex-start; margin:0.5rem 0 0; padding:0.625rem 0.75rem; border-radius: 10px; border: 2px solid var(--us-err-bd); background: var(--us-err-bg); color: var(--us-err-fg); font-weight: 700; }
.us-inline-error::before { content: "!"; flex: none; width:1.5rem; height:1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--us-err-bd); color: var(--us-on-bd, #fff); font-weight: 800; }
[aria-invalid="true"] { border-color: var(--us-err-bd) !important; }
.us-confirmbox { border: 3px solid var(--us-text); border-radius: var(--us-radius); padding:1rem; background: var(--us-card); }
.us-confirmbox p { margin:0 0 0.75rem; font-weight: 700; }
.us-actions { display: grid; gap:0.75rem; }
.us-ext { color: var(--us-text); font-weight: 700; overflow-wrap: anywhere; }
.us-dropzone { border: 3px dashed var(--us-border); border-radius: var(--us-radius); padding:1.25rem; text-align: center; }
.us-dropzone.is-over { border-color: var(--us-brand); background: var(--us-info-bg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (min-width: 700px) { .us-title { font-size:2.5rem; } }
.us-banner > div { min-width:0; overflow-wrap: anywhere; }
.us-banner:focus { outline: 4px solid var(--us-focus); outline-offset: 3px; }
.us-small { font-size:1rem; }
.us-lead-strong { color: var(--us-text); }

/* ---- approve page ---- */
  /* approve page only; everything else comes from unity-social.css */
  .ap-card { margin:1.25rem 0; scroll-margin-top: 16px; }
  .ap-media { display: block; width: 100%; max-height:70vh; border-radius: 12px; background: #000; object-fit: contain; }
  @media (min-width: 700px) { .ap-media { max-width:22.5rem; margin:0 auto; } }
  .ap-caption { white-space: pre-wrap; font-size:1.25rem; line-height: 1.5; margin:1rem 0; }
  /* One block per network when they publish different words or pictures (R1 H1). */
  .ap-net { border-top: 1px solid var(--us-border, #d0d5dd); padding-top: 0.75rem; margin-top: 0.75rem; }
  .ap-net-title { font-size:1.125rem; font-weight: 700; margin:0 0 0.5rem; }
  .ap-count { font-size:1.125rem; font-weight: 700; color: var(--us-muted); margin:0 0 0.5rem; }
  .ap-when { font-size:1.125rem; font-weight: 700; margin:0 0 0.5rem; }
  .ap-yes { background: #146c2e; border-color: #146c2e; color: #fff; }
  .ap-no { background: transparent; color: var(--us-text); border-color: var(--us-text); }
  :root[data-theme="dark"] .ap-yes { background: #2f9e4f; border-color: #2f9e4f; color: #04140a; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ap-yes { background: #2f9e4f; border-color: #2f9e4f; color: #04140a; } }
  .ap-edit textarea { width: 100%; min-height:10rem; padding:0.75rem; font: inherit; font-size:1.25rem; line-height: 1.5; color: var(--us-text); background: var(--us-card); border: 2px solid var(--us-border); border-radius: 12px; }
  .ap-actions { display: grid; gap:0.75rem; margin-top:1rem; }
  .ap-deadline { font-size:1.75rem; font-weight: 800; line-height: 1.25; margin:0 0 0.5rem; overflow-wrap: anywhere; }
  .ap-all { margin-top:0.5rem; padding-top:1rem; border-top: 2px solid var(--us-border); }
  .ap-done { text-align: center; padding:2rem 1rem; }
  .ap-done h2 { font-size:2rem; margin:0 0 0.75rem; }
  .ap-fine { font-size:1rem; color: var(--us-muted); margin:0.5rem 0 0; }
  .ap-edited { font-size:1rem; color: var(--us-muted); margin:0 0 0.5rem; }
  /* YouTube choices on the approve page and calendar (10-28) */
  .us-yt { margin-top:1rem; padding-top:1rem; border-top: 2px solid var(--us-border); }
  .us-yt-select { width: 100%; min-height:3rem; padding:0.5rem 0.75rem; font: inherit; font-size:1.125rem; color: var(--us-text); background: var(--us-card); border: 2px solid var(--us-border); border-radius: 12px; }
  .us-yt-kids { border: 0; margin:0; padding:0; min-width:0; }
  .us-yt-kids legend { padding:0; margin-bottom:0.5rem; }
  .us-yt-radio { display: flex; align-items: center; gap:0.5rem; min-height:3rem; font-size:1.125rem; }
  .us-yt-radio input { width:1.5rem; height:1.5rem; margin:0; flex: none; }
  .us-yt-needs { font-weight: 700; color: var(--us-text); }

/* ---- upload page ---- */
  .up-pct { font-size:2rem; font-weight: 800; margin:0; }
  .up-name { overflow-wrap: anywhere; color: var(--us-text); }
  .up-recent-title { font-weight: 700; }
  .up-recent-when { font-size:1rem; }

/* ---- inbox page ---- */
  /* inbox page only; everything else comes from unity-social.css */
  .ib-item { display: block; width: 100%; text-align: left; font: inherit; font-size:1.25rem; color: var(--us-text); background: var(--us-card);
    border: 2px solid var(--us-border); border-radius: var(--us-radius); padding:1rem; margin:0 0 0.875rem; min-height:4.5rem; cursor: pointer; }
  .ib-item:focus-visible, .ib-msg-box:focus-visible { outline: 4px solid var(--us-focus); outline-offset: 2px; }
  .ib-urgent { background: var(--us-err-bg); color: var(--us-err-fg); border-color: var(--us-err-bd); border-width: 4px; }
  .ib-tag { display: inline-block; font-weight: 800; font-size:1.125rem; padding:0.25rem 0.75rem; border-radius: 999px; margin-bottom:0.5rem; border: 2px solid; }
  .ib-tag-urgent { background: var(--us-err-bd); color: var(--us-on-bd, #fff); border-color: var(--us-err-bd); }
  .ib-tag-wait { background: var(--us-info-bg); color: var(--us-info-fg); border-color: var(--us-info-bd); }
  .ib-preview { display: block; margin-top:0.25rem; overflow-wrap: anywhere; }
  .ib-when { display: block; margin-top:0.375rem; font-size:1.125rem; opacity: .9; }
  .ib-thread { display: flex; flex-direction: column; gap:0.75rem; margin:1rem 0; }
  .ib-msg { max-width:92%; padding:0.75rem 1rem; border-radius: 16px; font-size:1.25rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; border: 2px solid var(--us-border); background: var(--us-card); }
  .ib-msg small { display: block; font-size:1rem; color: var(--us-muted); margin-bottom:0.25rem; font-weight: 700; }
  .ib-msg.me { align-self: flex-end; background: var(--us-info-bg); border-color: var(--us-info-bd); color: var(--us-info-fg); }
  .ib-msg.me small { color: var(--us-info-fg); }
  .ib-msg-box { width: 100%; min-height:10rem; padding:0.875rem; font: inherit; font-size:1.25rem; line-height: 1.5; color: var(--us-text); background: var(--us-card); border: 2px solid var(--us-border); border-radius: 12px; }
  .ib-until { font-size:1.25rem; font-weight: 700; margin:0.5rem 0; }
  .ib-back { background: none; border: 0; font: inherit; font-size:1.25rem; min-height:3.5rem; padding:0.5rem 0.25rem; color: var(--us-text); text-decoration: underline; cursor: pointer; }
  .ib-urgent .ib-lead-mark { font-weight: 800; }
  .ib-undo { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); }
  .ib-actions { display: grid; gap:0.75rem; margin-top:0.75rem; }
  .ib-empty { text-align: center; padding:2rem 0.5rem; }
  .ib-empty h2 { font-size:1.875rem; margin:0 0 0.5rem; }

/* ---- connect page ---- */
  .net { padding:1.25rem; margin-bottom:1rem; min-width:0; }
  .net h2 { font-size:1.5rem; margin:0 0 0.25rem; }
  .net .who { font-size:1.25rem; margin:0.25rem 0 0.75rem; font-weight: 700; }
  .net .us-btn { margin-top:0.5rem; }
  .net p { margin:0.5rem 0; }
  .reassure { font-size:1.25rem; font-weight: 700; margin:0; }
  .pick { display: block; width: 100%; text-align: left; margin-bottom:0.75rem; white-space: normal; height:auto; }
  .cn-list { margin:0.5rem 0 0; padding-left:1.5rem; }
  .cn-list li { margin:0.25rem 0; }
  .cn-agree { display: flex; gap:0.75rem; align-items: flex-start; margin:0.75rem 0 0; min-height:3rem; }
  .cn-agree input { width:3rem; height:3rem; margin:0; flex: none; }
  .cn-agree { align-items: center; }
  .cn-link { display: flex; align-items: center; min-height:3rem; font-size:1.125rem; }
  .cn-agree label { font-size:1.125rem; min-width:0; overflow-wrap: anywhere; }
  .cn-come { font-weight: 700; margin:0.5rem 0 0; }

/* ---- shared helpers that replaced inline style attributes ---- */
.us-tight { margin: 0; }
.us-tight + .us-tight { margin-top: 0.75rem; }
.us-gap { margin-top: 0.5rem; }
.us-bold { font-weight: 700; }
.us-p0 { margin: 0 0 0.25rem; }
.us-p1 { margin: 0 0 0.5rem; }
.us-mt { margin-top: 1rem; }
.us-mt-lg { margin-top: 1.25rem; }
.us-grow { flex: 1; }
.us-h2-lg { font-size: 1.625rem; }
.us-note { font-size: 1rem; }
.us-offline-note { font-size: 1rem; font-weight: 700; margin: 0.5rem 0 0; }
.ap-heldlist .ap-card { margin: 1rem 0; }
.ap-conflict { margin-top: 0.75rem; }
/* Added 10-26: the group (a church ministry) a post is filed under. */
.ap-group { display: inline-block; font-size: 1.125rem; font-weight: 700; margin: 0 0 0.5rem; padding: 0.25rem 0.75rem; border: 2px solid var(--us-border); border-radius: 999px; overflow-wrap: anywhere; }
.ap-fine { font-size: 1rem; }
@media (max-width: 380px) { .us-title { font-size: 1.75rem; } .us-btn-huge { font-size: 1.375rem; } }
#confirmBox { margin-top: 1rem; }
/* very large text or very narrow screens: long words break instead of pushing the page sideways */
.us-page, .us-page p, .us-page li, .us-page strong, .us-page span, .us-page h1, .us-page h2, .us-page .us-btn, .ib-tag { overflow-wrap: anywhere; }
.ib-tag { max-width: 100%; white-space: normal; }
.us-btn { max-width: 100%; }