/* Verita Studio: lightweight, local-font, responsive visual system. */
:root { --teal: #38d9bc; --teal-deep: #087965; --out: #dff6ed; --r: 16px; }
body { letter-spacing: -.015em; }
button, a, input, textarea { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 3px; }
.bar { padding-inline: 14px; min-height: calc(72px + var(--st)); box-shadow: none; }
.icon-btn { border-radius: 13px; }
@media (hover:hover) { .icon-btn:hover { background: #ffffff12; } }
.inbox-heading { display: flex; align-items: center; justify-content: space-between; padding: 26px 24px 12px; }
.inbox-heading span:first-child { color: var(--muted); font-size: 10px; letter-spacing: .16em; font-weight: 700; }
.inbox-heading h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.045em; margin: 7px 0 0; }
.privacy-label { display: flex; align-items: center; gap: 5px; color: var(--teal-deep); font-size: 11px; background: var(--out); padding: 7px 10px; border-radius: 20px; }
.privacy-label svg { width: 12px; height: 12px; }
.search { padding: 12px 20px 6px; }
.search input { height: 46px; border-radius: 12px; border: 1px solid var(--line); font-size: 14px; }
.inbox-search { position:relative; }
.inbox-search input { padding-right:44px; }
.inbox-search input::-webkit-search-cancel-button { display:none; }
.inbox-search .search-clear { position:absolute; right:22px; top:13px; width:44px; height:44px; color:var(--muted); }
.inbox-search .search-clear[hidden] { display:none; }
.empty .empty-action { display:inline-flex; width:auto; min-height:44px; padding:10px 20px; margin-top:18px; }
#chatlist-body .empty { padding:24px 20px; }
.left.empty-inbox > .fab[aria-label="New chat"] { display:none; }
#chatlist-body .empty .mark { display:block; width:42px; height:82px; object-fit:contain; margin:0 auto 12px; }
#chatlist-body .empty h3 { font-size:23px; line-height:1.25; }
.chips { padding: 10px 20px 16px; border: 0; gap: 6px; }
.chip { border-radius: 9px; height: 31px; font-size: 12px; }
#chatlist-body { padding-inline: 10px; }
#chatlist-body .row { min-height: 84px; border-radius: 14px; margin-bottom: 3px; }
#chatlist-body .row .mid { border: 0; }
#chatlist-body .row.active { background: var(--out); }
#chatlist-body .row .title { font-size: 15px; }
#chatlist-body .row .preview { font-size: 13px; margin-top: 4px; }
.av { border-radius: 17px; }
.av img { border-radius: inherit; }
.av.sm { border-radius: 13px; }
.av.lg { border-radius: 36px; }
.tabbar { padding: 10px 12px calc(10px + var(--sb)); box-shadow: none; border-top: 1px solid var(--line); }
.fab { border-radius: 19px; box-shadow: 0 8px 24px #08796526; }
.bubble { box-shadow: 0 2px 5px #10252208; border-radius: 17px; }
.bubble .text { line-height: 1.55; }
.e2e-banner { max-width: 460px; margin-inline: auto; font-size: 11px; border-radius: 12px; }
.composer { padding: 12px 16px calc(12px + var(--sb)); }
.wall-empty h1 { color: var(--text); font-size: clamp(24px, 3vw, 36px); letter-spacing: -.045em; font-weight: 600; }
.wall-empty .logo { width: 185px; }
.wall-empty .home-greeting { color:var(--text); font-size:clamp(26px, 3vw, 36px); line-height:1.7; margin:18px 0 6px; letter-spacing:normal; }
.pane.has-wall { background-image: radial-gradient(ellipse at 65% 20%, #38d9bc0c, transparent 65%); background-color: var(--wall); }
.auth { background: var(--bg); }
.auth-top { width: 100%; background: #142e2b; background-image: radial-gradient(ellipse at 20% 20%, #38d9bc18, transparent 65%); padding: 44px 28px 74px; text-align: left; color: #effaf5; }
.auth-top .logo { width: 160px; margin: 0; }
.auth-eyebrow { font-size: 10px; letter-spacing: .2em; color: #8edbc5; margin-top: 44px; font-weight: 600; }
.auth-top h1 { font-size: clamp(42px, 5vw, 76px); line-height: 1.05; letter-spacing: -.055em; margin: 20px 0; font-weight: 500; }
.auth-top p { margin: 0; max-width: 360px; line-height: 1.7; color: #c2d7d1; opacity: 1; }
.auth-features { display: flex; flex-direction: column; gap: 16px; margin-top: 36px; font-size: 13px; color: #d3e9e1; }
.auth-features span { display: flex; align-items: center; gap: 12px; }
.auth-features svg { width: 17px; height: 17px; color: #70dec1; }
.auth-card { border: 1px solid var(--line); border-radius: 22px; padding: 22px 26px 28px; box-shadow: 0 16px 60px #1025220a; }
.auth-card .tabs { margin-bottom: 24px; }
.field input { border-radius: 10px; }
.btn { border-radius: 11px; }
.fine { line-height: 1.6; }
.board-body { padding: 22px 18px 100px; }
.board-intro { margin-bottom: 24px; }
.board-eyebrow { font-size: 10px; color: var(--teal-deep); font-weight: 700; letter-spacing: .15em; }
.board-intro h1 { font-size: 30px; letter-spacing: -.04em; margin: 8px 0; }
.board-intro p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.prayer-card { padding: 20px; background: var(--out); border: 1px solid var(--line); border-radius: 19px; }
.board-card-head, .board-list-heading, .notice-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.board-card-head h2, .board-list-heading h2 { font-size: 16px; margin: 0; }
.prayer-location { color: var(--muted); font-size: 12px; margin: 8px 0 16px; }
.prayer-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px 8px; }
.prayer-slot { display: flex; flex-direction: column; gap: 3px; }
.prayer-slot span { font-size: 11px; color: var(--muted); }
.prayer-slot strong { font-size: 23px; font-variant-numeric: tabular-nums; }
.prayer-slot small { font-size: 9px; color: var(--muted); }
.board-list-heading { margin: 28px 0 14px; }
.board-list-heading > span { font-size: 11px; color: var(--muted); }
.notice-card { border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin-bottom: 14px; background: var(--bg); }
.notice-card h2 { font-size: 18px; line-height: 1.35; margin: 0 0 12px; overflow-wrap: anywhere; }
.notice-content { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; font-size: 14px; }
.notice-pinned { display:flex; align-items:center; gap:5px; color:var(--teal-deep); font-size:10px; margin-bottom:12px; }
.notice-pinned svg { width:12px; height:12px; }
.notice-footer { border-top:1px solid var(--line); padding-top:12px; margin-top:20px; }
.notice-footer time { font-size:11px; color:var(--muted); }
.board-text-btn { font-size:12px; color:var(--read); font-weight:600; padding:8px; }
.board-text-btn.danger { color:var(--danger); }
.board-body .empty > svg { width:32px; height:32px; margin:auto; }
.board-scrim { align-items:center; }
.weekly-schedule { margin-top:20px; border:1px solid var(--line); border-radius:18px; padding:18px; background:var(--bg); }
.weekly-schedule .board-card-head { align-items:flex-start; }
.weekly-schedule .board-card-head h2 { line-height:1.4; }
.weekly-schedule .board-text-btn { display:inline-flex; align-items:center; gap:4px; }
.weekly-schedule .board-text-btn svg { width:15px; height:15px; }
.schedule-empty { color:var(--muted); font-size:13px; line-height:1.6; }
.schedule-day { font-size:11px; text-transform:uppercase; letter-spacing:.1em; margin:20px 0 10px; color:var(--read); }
.schedule-entry { padding:14px; border-radius:12px; background:var(--panel); margin-bottom:8px; overflow-wrap:anywhere; }
.schedule-time { font-size:11px; font-weight:600; color:var(--read); font-variant-numeric:tabular-nums; }
.schedule-entry h4 { margin:8px 0; font-size:15px; }
.schedule-entry p { font-size:12px; margin:6px 0; line-height:1.5; }
.schedule-meta { color:var(--muted); }
.schedule-notes { white-space:pre-wrap; }
.schedule-actions { display:flex; justify-content:flex-end; margin:6px -8px -8px; }
.schedule-frequency { display:inline-block; font-size:10px; margin-top:8px; padding:4px 7px; border:1px solid var(--line); border-radius:6px; color:var(--muted); }
.schedule-week-nav { display:flex; justify-content:space-between; border-block:1px solid var(--line); margin:14px 0; }
.schedule-inactive { font-size:12px; }
.board-form [hidden] { display:none; }
.weekly-table-scroll { width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:12px; margin-top:16px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.weekly-table { width:100%; min-width:820px; border-collapse:separate; border-spacing:0; text-align:left; font-size:12px; }
.weekly-table th, .weekly-table td { padding:14px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.weekly-table thead th { background:var(--panel); color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.weekly-table tbody tr:last-child > * { border-bottom:0; }
.weekly-table .weekly-day { position:sticky; left:0; z-index:1; background:var(--bg); color:var(--read); font-size:12px; min-width:100px; border-right:1px solid var(--line); }
.weekly-table .weekly-day-start > * { border-top:1px solid var(--line); }
.weekly-time { white-space:nowrap; font-variant-numeric:tabular-nums; }
.weekly-time strong, .weekly-time span, .weekly-location span, .weekly-location small { display:block; }
.weekly-time span, .weekly-location small { color:var(--muted); font-size:11px; margin-top:5px; }
.weekly-person { min-width:130px; }
.weekly-title { display:block; min-width:130px; font-size:13px; }
.weekly-notes { margin-top:8px; color:var(--muted); }
.weekly-notes summary { cursor:pointer; font-size:11px; }
.weekly-notes p { white-space:pre-wrap; overflow-wrap:anywhere; max-width:240px; }
.weekly-empty td { color:var(--muted); background:var(--panel); font-size:11px; }
.weekly-actions { white-space:nowrap; }
.weekly-table .schedule-frequency { margin-top:0; white-space:nowrap; }
.weekly-mobile { display:none; }
@media (max-width:599px) {
  .board-body { padding:18px 12px 100px; }
  .weekly-schedule { padding:14px 10px; }
  .weekly-table { min-width:0; table-layout:auto; font-size:12px; }
  .weekly-table th, .weekly-table td { padding:12px 7px; overflow-wrap:anywhere; }
  .weekly-table thead th:first-child { width:68px; }
  .weekly-table thead th:nth-child(2) { width:72px; }
  .weekly-table .weekly-day { min-width:0; font-size:11px; }
  .weekly-table .weekly-person { min-width:100px; }
  .weekly-table .weekly-desktop, .weekly-desktop-label { display:none; }
  .weekly-mobile { display:block; }
  .weekly-table thead th { white-space:normal; }
  .weekly-mobile-details { margin-top:8px; }
  .weekly-mobile-details > strong, .weekly-mobile-details > small { display:block; margin-bottom:6px; line-height:1.5; }
  .weekly-mobile-details > small { color:var(--muted); }
  .weekly-table .schedule-frequency { white-space:normal; font-size:10px; }
  .weekly-mobile-actions { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
  .weekly-mobile-actions .board-text-btn { padding:8px 4px; }
  .board-text-btn, .weekly-notes summary { min-height:44px; display:inline-flex; align-items:center; }
  .board-card-head > h2 { min-width:0; }
  .board-card-head > button { flex-shrink:0; }
  .notice-footer { flex-wrap:wrap; }
  .prayer-card, .notice-card { padding:16px; }
  .prayer-slot strong { font-size:20px; }
  .board-form { padding:18px; }
  .board-dialog { max-height:calc(100dvh - var(--st) - var(--sb) - 24px); }
  .field input, .field select, .field textarea, .search input { font-size:16px; min-width:0; }
  .chip { min-height:44px; }
  .chips.fit { overflow-x:auto; justify-content:flex-start; }
  .tabbar { padding-inline:4px; }
  .tabbar .tab { min-height:52px; font-size:11px; }
  #app.board-view .left.has-tabs .fab { position:static; align-self:flex-end; margin:8px 12px; min-height:44px; padding:10px 16px; }
  .composer { padding-inline:8px; }
  .inbox-heading { padding:16px 20px 8px; }
  .inbox-heading h1 { font-size:27px; margin-top:4px; }
  #chatlist-body .row { min-height:76px; }
  .bar .brand { min-width:0; }
  .bar .brand .logo { max-width:100%; }
  .inbox-search input { font-size:16px; }
  #chips { padding-inline:12px; scrollbar-width:none; }
  #chips::-webkit-scrollbar { display:none; }
  #chips .chip { padding-inline:12px; flex-shrink:0; }
  .voice, .filecard { min-width:0; max-width:100%; }
  .auth-top { padding-top:calc(30px + var(--st)); }
  .cal-title { min-width:0; flex:1; }
  .cal-title { font-size:15px; white-space:nowrap; }
  .type-switches { overflow-x:auto; justify-content:flex-start; padding-inline:10px; min-height:62px; }
  .tsw { width:44px; height:44px; }
  .icon-btn { width:44px; height:44px; }
  .tbl { min-width:0; }
  .tbl .c-task { width:36%; }
  .tbl .c-who { width:22%; }
  .tbl .st { font-size:10px; padding-inline:4px; }
}
@media (min-width:900px) {
  #app.board-view .left { width:100%; border-right:0; }
  #app.board-view .right { display:none; }
  #app.board-view .board-body { width:100%; max-width:1320px; margin-inline:auto; padding:32px 36px 110px; }
  #app.board-view .prayer-card { max-width:600px; }
  #app.board-view .prayer-grid { grid-template-columns:repeat(7,minmax(0,1fr)); }
  #app.board-view .tabbar { padding-inline:max(12px,calc((100vw - 800px)/2)); }
}
.board-dialog { width:min(480px, calc(100vw - 28px)); margin:auto; max-height:calc(100dvh - 40px); overflow:auto; background:var(--bg); border-radius:20px; }
.board-form { padding:24px; }
.board-form header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.board-form header h2 { font-size:22px; margin:0; }
.board-form .notice-message-input { min-height:150px; resize:vertical; }
.board-pin-field { display:flex; align-items:center; gap:10px; margin:18px 0; }
.prayer-inputs { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.tabbar .tab { font-size:11px; }
.tabbar .tab .tab-ic { width:48px; }
@media (min-width:900px) {
  .left { width: 370px; }
  .auth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
  .auth-top { height: 100%; padding: clamp(48px, 7vw, 110px); display: flex; flex-direction: column; justify-content: center; }
  .auth-card { width: min(440px, calc(100% - 70px)); max-width: none; margin: 40px auto; }
  .wall { padding-inline: clamp(24px, 5vw, 88px); }
}
@media (min-width:1400px) { .left { width: 410px; } }
@media (max-width:480px) { .auth-top h1 { font-size: 44px; } .auth-features { display:none; } }
@media (prefers-reduced-motion:no-preference) { .auth-card { animation: studio-enter .3s ease-out; } @keyframes studio-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } }