:root{color-scheme:light;--ink:#17233b;--muted:#5b6474;--brand:#7b2f2f;--gold:#b98728;--paper:#fffdf8;--line:#e5dfd3}*{box-sizing:border-box}html,body{margin:0;max-width:100%;overflow-x:hidden}body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#f4f0e8;color:var(--ink);line-height:1.5}.shell{width:min(100% - 24px,760px);margin:0 auto;padding:6px 0 12px}.test-banner{margin:0 -12px 12px;padding:8px 14px;background:#241b1b;color:#fff;text-align:center;font-weight:800;letter-spacing:.04em}.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:clamp(12px,3.4vw,22px);box-shadow:0 8px 30px #2f24120f}h1{font-family:Georgia,serif;font-size:clamp(1.45rem,5.6vw,2.1rem);line-height:1.08;margin:.12em 0 .35em}.eyebrow{color:var(--brand);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}.summary{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin:12px 0}.item{border-top:1px solid var(--line);padding:7px 0}
/* One line per fact: a label above its value doubles the height of the page the client must scroll */
.summary .item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:baseline;padding:1px 0}
.summary .item>span{font-size:.72rem;color:var(--muted)}
.summary .item>strong{text-align:right;font-weight:600;font-size:.86rem}
.signout-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.signout-row button{margin-top:0;padding:11px 12px}
/* A client must be able to see the password he is typing (the owner asked for this after
   registering a real church). The eye is a real button, big enough to tap, and never submits. */
.password-row{display:flex;gap:8px;align-items:stretch}.password-row input{flex:1 1 auto;min-width:0}
.password-row .reveal{flex:0 0 auto;width:52px;min-width:52px;min-height:44px;margin:8px 0 18px;padding:0;display:grid;place-items:center;background:#eef1f6;color:var(--ink);border:1px solid var(--line);border-radius:10px}
.password-row .reveal[aria-pressed="true"]{background:var(--gold);color:#fff;border-color:var(--gold)}
@media(min-width:540px){.password-row .reveal{width:56px;min-width:56px}}.item span{display:block;color:var(--muted);font-size:.82rem}.item strong{overflow-wrap:anywhere}.button,button{display:block;width:100%;border:0;border-radius:12px;padding:11px 14px;background:var(--brand);color:#fff;font:inherit;font-weight:750;text-align:center;text-decoration:none;cursor:pointer}button.secondary{background:#39475f}.options{display:grid;gap:10px;margin:16px 0}.option{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff}.option input{width:20px;height:20px;flex:none}.notice{border-left:4px solid var(--gold);padding:10px 12px;background:#fff8e8}.actions{display:grid;gap:6px;margin:6px 0}.actions>button,.actions>a.button-link{padding:10px 12px;font-size:.95rem}.button-link{display:block;width:100%;border:0;border-radius:12px;padding:11px 14px;background:var(--brand);color:#fff;font:inherit;font-weight:750;text-align:center;text-decoration:none}.button-link.secondary{background:#39475f}.annual{border-top:1px solid var(--line);margin-top:24px;padding-top:18px}.annual h2{font:700 1.2rem/1.25 Georgia,serif}.quiet{margin-top:18px;background:#646b78}.status{min-height:1.5em;font-weight:700}.small{font-size:.86rem;color:var(--muted)}label{display:block;font-weight:700}input[name="credential"]{display:block;width:100%;min-width:0;margin:8px 0 18px;padding:13px;border:1px solid var(--line);border-radius:10px;font:inherit}input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select{display:block;width:100%;max-width:100%;min-width:0;margin:8px 0 18px;padding:13px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit}input[type="file"]{display:block;width:100%;max-width:100%;min-width:0;margin:8px 0 18px;padding:13px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit}.proof,.legend{border-top:1px solid var(--line);margin-top:24px;padding-top:18px}.proof h2,.legend h2{font:700 1.2rem/1.25 Georgia,serif}.legend ul{list-style:none;padding:0;margin:12px 0;display:grid;gap:6px}.legend li{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff}.registry-shell{width:min(100% - 16px,900px)}.registry-search,.client-list,.pagination{display:grid;gap:12px}.client-list{margin-top:18px}.client-card{min-width:0;border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff}.client-card h2,.client-card p{margin:.35rem 0;overflow-wrap:anywhere}.client-card a{color:var(--brand)}.pagination{grid-template-columns:minmax(0,1fr);margin-top:18px}.account-control{border:1px solid var(--gold);border-radius:14px;padding:14px;margin:20px 0;background:#fff8e8}ul{padding-left:20px;overflow-wrap:anywhere}@media(min-width:540px){.summary{grid-template-columns:1fr 1fr}.button,button{width:auto;min-width:180px}.registry-search{grid-template-columns:repeat(2,minmax(0,1fr))}.registry-search button{grid-column:1/-1}.pagination{grid-template-columns:repeat(2,minmax(0,1fr))}}
.activation{margin:5px 0 2px;padding:8px 11px;border:1px solid rgba(226,192,90,.6);border-radius:14px;background:linear-gradient(180deg,rgba(11,37,69,.04),rgba(226,192,90,.12))}.activation h2{margin:0 0 1px;font-size:.9rem}.activation .code{margin:4px 0;padding:6px 8px;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(18px,4.8vw,24px);font-weight:700;letter-spacing:.04em;color:#0b2545;background:#fff;border:1px dashed rgba(11,37,69,.35);border-radius:10px;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.activation .covers{margin:2px 0 0;font-size:.8rem}.activation .how{margin:6px 0 0}.activation .how>summary{cursor:pointer;font-weight:700;font-size:.9rem}.activation .how p{margin:8px 0 0}.activation .small{opacity:.75}.rollup{border-top:1px solid var(--line);margin-top:8px;padding-top:6px}.rollup>summary{cursor:pointer;font:700 1rem/1.3 Georgia,serif;padding:3px 0}.rollup>summary::marker{color:var(--gold)}.rollup[open]>summary{margin-bottom:6px}.rollup>form,.rollup>ul,.rollup>p{margin-top:8px}.rollup h3{margin:12px 0 0;font-size:.92rem}
/* One row to reach everything a client rarely needs, so the page fits one phone screen */
.account-more>ul{margin:8px 0 0;padding-left:18px;font-size:.86rem;color:var(--muted)}
.annual-row{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}.annual-row p{margin:0 0 4px;font-size:.8rem}.annual-row button{padding:9px 12px}
.status{min-height:1.5em;font-weight:700}.status:empty{display:none}.notice{border-left:4px solid var(--gold);padding:8px 10px;background:#fff8e8;font-size:.87rem}.signout-row{margin-top:6px}.signout-row button{padding:10px 12px}
/* The owner's ruling, 9 October 2026: "The more should be in a button because it not every body
   that sees fast. Use a button which is attractive." Same rollup, wearing a button. */
.more-button>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:10px 12px;border:2px solid var(--gold);border-radius:14px;background:linear-gradient(180deg,rgba(185,135,40,.18),rgba(185,135,40,.05));font:700 .95rem/1.25 Georgia,serif;gap:6px;list-style:none;cursor:pointer}
.more-button>summary::-webkit-details-marker{display:none}
.more-button>summary::after{content:"Open ▾";font:600 .72rem/1 system-ui;color:var(--brand);white-space:nowrap}
.more-button[open]>summary::after{content:"Close ▴"}
/* The invitation meets the church where it lands, and hides itself once the app is installed —
   "if it has been installed, the click will not generate the install link again". */
.install-invite{margin:0;padding:5px;border:2px solid rgba(226,192,90,.55);border-radius:14px;background:linear-gradient(180deg,rgba(11,37,69,.04),rgba(226,192,90,.12))}
.install-invite .button-link{padding:10px 12px;font-size:.95rem}
/* The owner judges this page by scrolling, so reference sits two-up instead of stacked: same five
   facts, half the height. Adding a conspicuous button must not cost a screen of scrolling. */


/* The office's own inspection view of a church Portal: unmistakable, and readable. */
.builder-notice{border:1px solid var(--brand);border-left:6px solid var(--brand);border-radius:12px;padding:10px 12px;margin:14px 0;background:#eef4ff}
.builder-notice p{margin:0;color:#101a2e;font-size:.9rem;line-height:1.45}
/* 16 October 2026: the care agent is now a visible front door, not a hidden office form. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.glory-chat{margin:8px 0 6px;padding:11px;border-radius:18px;background:linear-gradient(145deg,#082b4b,#10476f);color:#fff;border:1px solid rgba(232,181,62,.72);box-shadow:0 10px 24px rgba(8,43,75,.2)}
.glory-heading{display:flex;align-items:center;gap:9px}.glory-avatar{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:#e8b53e;color:#082b4b;font:800 1.4rem/1 Georgia,serif;box-shadow:0 0 0 3px rgba(232,181,62,.16)}
.glory-chat .eyebrow{margin:0;color:#f5d778;font-size:.68rem}.glory-chat h2{margin:0;font:700 1.15rem/1.12 Georgia,serif}.glory-chat .agent-name{margin:2px 0 0;color:#d8e7f4;font-size:.74rem}.glory-welcome{margin:7px 0;font-size:.83rem;line-height:1.38;color:#f4f8fb}
.glory-question-form{display:grid;gap:6px}.glory-question-form[data-message-composer]{margin-top:18px;padding-top:16px;border-top:2px solid #d7dee8}.glory-question-form textarea{display:block;width:100%;min-width:0;resize:vertical;min-height:60px;margin:0;padding:9px 11px;border:2px solid #d8e7f4;border-radius:12px;background:#fff;color:#17233b;font:inherit;line-height:1.35}.glory-question-form textarea::placeholder{color:#5b6474;opacity:1}.glory-question-form button{margin:0;background:#e8b53e;color:#082b4b;min-height:44px;padding:8px 12px}.glory-question-form button:active{transform:translateY(1px)}
/* The upload button the owner asked for: a picture of a problem, sent with one tap. */
.composer-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center}
.composer-row button{grid-column:2;grid-row:1}
.attach-button{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 10px;border:2px solid #b9cde4;border-radius:12px;background:#fff;color:#173a63;font:700 .86rem/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;text-align:center}
.attach-button::before{content:"\1F4F7";font-size:1rem;line-height:1}
.attach-button:active{transform:translateY(1px)}
.glory-question-form input.attach-input[type="file"]{position:absolute;left:0;top:0;width:1px;height:1px;min-width:0;max-width:1px;padding:0;margin:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0}
.attach-input:focus-visible{outline:3px solid #e8b53e;outline-offset:2px}
.thread.chat .bubble .bubble-picture-link{display:block;margin-top:6px;text-decoration:none}.thread.chat .bubble .bubble-picture{display:block;max-width:100%;max-height:300px;width:auto;height:auto;object-fit:contain;border-radius:10px;border:1px solid rgba(0,0,0,.09);background:#fff;margin:0 auto}
.glory-chat+.conversation{margin-top:6px;padding-top:0;border-top:0}.glory-chat+.conversation>summary{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.83rem;color:var(--brand)}
/* The owner's own copy of the same desk, in his office. Same voice, same question box. */
.glory-picker{display:grid;gap:8px;margin:10px 0}
.glory-picker select{display:block;width:100%;min-width:0;min-height:44px;padding:8px 10px;border:2px solid #cfd8e4;border-radius:12px;background:#fff;color:#17233b;font:inherit}
.glory-desk{margin:12px 0;padding:12px;border-radius:16px;background:#f4f8fb;border:1px solid #cfd8e4}
.glory-desk h2{margin:0 0 4px;font:700 1.05rem/1.2 Georgia,serif;color:#082b4b}
.glory-desk .thread{margin:8px 0;max-height:none}
/* One conversation, drawn the way a chat is drawn: my side on the right in the light green of an
   outgoing message, the responder's on the left in white. A glance tells the two apart before a
   single sentence is read — the owner's instruction. */
.thread.chat{list-style:none;padding:10px 6px;margin:10px 0;display:flex;flex-direction:column;gap:8px;max-height:min(40vh,320px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.thread.chat .item{border-top:0;padding:0}
.thread.chat .bubble{max-width:88%;padding:8px 11px 9px;border-radius:16px;border:1px solid #e2ddd2;background:#fff;box-shadow:0 1px 2px #2f241212;position:relative}
.thread.chat .bubble .bubble-name{display:block;font:700 .68rem/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.01em;color:#5b6474;margin-bottom:2px}
.thread.chat .bubble .bubble-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9rem;line-height:1.42}
.thread.chat [data-speaker="client"]{align-self:flex-end;background:#d9fdd3;border-color:#b7e4ae;border-bottom-right-radius:5px}
.thread.chat [data-speaker="client"] .bubble-name{text-align:right;color:#3f6b34}
.thread.chat [data-speaker="glory"]{align-self:flex-start;background:#ffffff;border-bottom-left-radius:5px}
/* The technician answers on the responder's side, in his own tint: the pastor can see at a glance
   that the developer has taken the matter over, without being told. */
.thread.chat [data-speaker="technician"]{align-self:flex-start;background:#eaf3ff;border-color:#cfe0f7;border-bottom-left-radius:5px}
.thread.chat [data-speaker="technician"] .bubble-name{color:#1d4f8b}
.thread.chat [data-speaker="glory"] .bubble-name{color:#7b2f2f}
.thread.chat+.small{margin-top:6px}
.glory-desk textarea{display:block;width:100%;min-width:0;resize:vertical;min-height:72px;margin:0;padding:9px 11px;border:2px solid #cfd8e4;border-radius:12px;background:#fff;color:#17233b;font:inherit;line-height:1.35}
.glory-desk button{margin-top:6px;min-height:44px}
.app-access{margin:9px 0 6px;padding:10px 12px;border-radius:14px;background:#eef6ec;border:1px solid #b9d5b4}.app-access .eyebrow{margin:0;color:#2b6238;font-size:.66rem}.app-access h2{margin:1px 0 3px;font:700 1rem/1.2 Georgia,serif;color:#173f24}.app-access p:last-child{margin:0;font-size:.83rem;color:#284631}[data-app-open]{background:#7b2f2f}
@media(max-width:380px){.glory-chat{padding:10px}.glory-welcome{font-size:.8rem}.glory-avatar{flex-basis:44px;width:44px;height:44px}}