:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--bg:#f4f2f7;--card:#fff;--ink:#2f2a33;--muted:#625b69;--line:#e6e2ec;--accent:#7a5c8e;
--radius:16px;
--accent-dark:#4f3c5c;--accent-dark:color-mix(in srgb,var(--accent) 65%,#000);--tint:#ece6f1;--tint:color-mix(in srgb,var(--accent) 12%,#fff)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-wrap:break-word;background:var(--bg);color:var(--ink);font:17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;padding-bottom:84px}
h1,h2,h3,.hero-name,.brand span{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;font-weight:normal;line-height:1.25}
h1{font-size:1.7rem;margin:.4em 0 .5em}h2{font-size:1.25rem;margin:0 0 .6em}h3{font-size:1.1rem;margin:.2em 0}
a{color:var(--accent)}
.muted{color:var(--muted)}.small{font-size:.86rem}.center{text-align:center}
.wrap{max-width:960px;margin:0 auto;padding:16px}
.plain-wrap{max-width:520px;margin:0 auto;padding:32px 16px}
.card{background:var(--card);border-radius:var(--radius);padding:20px;margin:0 0 16px;box-shadow:0 1px 3px rgba(60,40,70,.06);border:1px solid var(--line);display:block}
.card.link{text-decoration:none;color:inherit}.card.link:hover{border-color:var(--accent)}
.empty{color:var(--muted);font-style:italic}
.flash{background:#eef6ea;border:1px solid #cfe3c4;padding:12px 16px;border-radius:12px;margin-bottom:16px}
.flash.error{background:#fbecec;border-color:#efc9c9}.flash.dev{background:#fff7e0;border-color:#f0dca0}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:999px;padding:12px 22px;font-size:1rem;cursor:pointer;text-decoration:none;font-family:inherit}
.btn-lg{padding:16px 30px;font-size:1.1rem}
.btn-ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.btn.small{padding:8px 16px;font-size:.92rem}
.linkish{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;text-decoration:underline}
.pill{display:inline-block;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-size:.88rem;cursor:pointer}
.pill.warn{background:#fff3d6;border-color:#f0d58a}
.tag{display:inline-block;font-size:.75rem;padding:2px 8px;border-radius:999px;background:var(--line);color:var(--ink);vertical-align:middle}
.tag.you{background:var(--accent);color:#fff}
input,select,textarea{width:100%;font:inherit;padding:11px 12px;border:1px solid #857d8f;border-radius:10px;background:#fff;margin-top:4px}
input[type=checkbox],input[type=radio]{width:auto;margin:0 6px 0 0;transform:scale(1.15)}
input[type=color]{width:60px;height:40px;padding:2px}
input.num{width:80px;display:inline-block}
label{display:block}
.stack{display:flex;flex-direction:column;gap:14px}
fieldset.choice{border:0;padding:0;margin:0}fieldset.choice legend{margin-bottom:6px}fieldset.choice label{padding:6px 0}
.bordered{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.row-gap{display:flex;gap:10px;align-items:center}.wrap-row{flex-wrap:wrap}.wrap-row label{flex:1;min-width:130px}
.list-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:0}.list-row.link{text-decoration:none;color:inherit}
.copy{font-size:.85rem;background:#f9f8fb}
.avatar-lg{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.avatar-sm{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block;margin:6px 0}
/* header & nav */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:1.1rem}
.brand img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.topbar-right{display:flex;gap:12px;align-items:center}
.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;border-top:1px solid var(--line);z-index:10;padding-bottom:env(safe-area-inset-bottom)}
.tabs a{flex:1;text-align:center;padding:8px 2px;font-size:.72rem;color:var(--muted);text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:2px}
.tabs a span{font-size:1.2rem;line-height:1}
.tabs a.on{color:var(--accent);font-weight:600}
@media (min-width:760px){
  body{padding-bottom:0}
  .tabs{position:sticky;top:57px;bottom:auto;justify-content:center;border-top:0;border-bottom:1px solid var(--line)}
  .tabs a{flex:0 0 auto;flex-direction:row;font-size:.95rem;padding:12px 18px;gap:8px}
  .tabs a span{font-size:1rem}
}
.subnav{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:8px}
.subnav a{white-space:nowrap;padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);font-size:.9rem}
.subnav a.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.seg a{padding:6px 14px;text-decoration:none;color:var(--ink);font-size:.9rem}.seg a.on{background:var(--accent);color:#fff}
/* hero */
.hero{text-align:center;padding:24px 8px 28px}
.hero-photo{width:min(240px,60vw);aspect-ratio:1;border-radius:50%;object-fit:cover;border:6px solid #fff;box-shadow:0 6px 24px rgba(60,40,70,.15)}
.hero-name{font-size:2.3rem;margin:.4em 0 .1em}
.hero-years{color:var(--muted);letter-spacing:.08em}
.hero-tagline{font-family:Georgia,serif;font-style:italic;font-size:1.25rem;max-width:560px;margin:14px auto 20px}
.video{margin:0 0 20px}.video video{width:100%;border-radius:12px;background:#000;max-height:70vh}
.video figcaption{padding-top:8px}
video.thumb{width:100%;max-height:260px;border-radius:10px;background:#000}
.prose p{margin:0 0 1em}
/* dashboard */
.grid{display:grid;gap:16px;grid-template-columns:1fr}
.grid>.card{margin:0;min-width:0}
@media (min-width:760px){.grid{grid-template-columns:1fr 1fr}.span2{grid-column:span 2}}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--muted);margin-bottom:10px}
.days{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:600px){.days{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
.days.list{grid-template-columns:1fr}
.day{min-width:0;overflow-wrap:anywhere;word-break:break-word;border:1px solid var(--line);border-radius:12px;padding:10px;min-height:70px;background:#fff}
.day.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.day.blocked{background:#fff;color:#4a4450}
.day-head{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:6px}
.day-name{font-weight:600}.day-date{color:var(--muted)}
.blocked-label{font-size:.82rem;font-style:italic;margin-bottom:4px}
.item{display:flex;gap:8px;padding:6px 8px;border-radius:8px;margin-top:6px;font-size:.88rem;border:1px solid #e5e5e5;background:#f5f5f5}
.item.mine{background:var(--tint);border-color:var(--accent)}
.item-icon{font-size:1rem}
.slot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.slot:last-child{border-bottom:0}
.widget.medical{border-top:4px solid var(--accent)}
.readmore{color:var(--accent)}
.pager{margin:16px 0}
.person{display:grid;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.person:last-child{border-bottom:0}
.person-opts{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}.person-opts select{width:auto;margin:0}
.person-opts label{font-size:.92rem}
.foot{text-align:center;color:var(--muted);font-size:.82rem;padding:24px 16px 32px}
.foot strong{font-family:Georgia,serif;font-weight:normal;color:var(--ink)}
/* accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tabs a{min-height:48px}
.cal-add{position:relative;display:inline-block}
.cal-add summary{list-style:none;cursor:pointer}.cal-add summary::-webkit-details-marker{display:none}
.cal-menu{position:absolute;z-index:20;right:0;margin-top:6px;background:#fff;border:1px solid #857d8f;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.12);padding:6px;min-width:210px}
.cal-menu a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink);text-decoration:none}
.slot-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* icons */
.fa-solid{line-height:1}
.item-icon{width:1.25em;text-align:center;padding-top:3px}
.legend .fa-solid{margin-right:2px}
/* purple icons: two shades */
.item-icon,.legend .fa-solid,.widget h2 .fa-solid,.card h2 .fa-solid{color:var(--accent)}
.tabs a{color:var(--accent);transition:background-color .15s,color .15s}
.tabs a.on{color:var(--accent-dark);font-weight:700;background:var(--tint);box-shadow:inset 0 3px 0 var(--accent-dark)}
@media (min-width:760px){.tabs a.on{box-shadow:inset 0 -3px 0 var(--accent-dark)}}
/* "your" item: soft purple background */
.item.mine .btn-ghost{background:#fff}
.item.mine .btn-ghost:hover,.item.mine .cal-add[open] .btn-ghost{background:var(--accent);color:#fff}
/* hover affordances */
.btn,.pill,.seg a,.subnav a,.card.link,.cal-menu a,.linkish{transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s,transform .15s}
.btn:hover{background:var(--accent-dark);box-shadow:0 4px 12px rgba(60,40,80,.25);transform:translateY(-1px)}
.btn-ghost:hover,.cal-add[open] .btn-ghost{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn:active{transform:translateY(0);box-shadow:none}
.tabs a:hover{background:var(--tint);color:var(--accent-dark)}
.seg a:not(.on):hover,.subnav a:not(.on):hover,.pill:hover{background:var(--tint);color:var(--accent-dark);border-color:var(--accent)}
.card.link:hover{box-shadow:0 6px 18px rgba(60,40,80,.14);transform:translateY(-2px)}
.cal-menu a:hover,.cal-menu a:focus-visible{background:var(--tint);color:var(--accent-dark)}
a:hover{text-decoration-thickness:2px}
.linkish:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;transform:none!important}}
.item-body{flex:1;min-width:0}
.item.mine{padding:12px 14px}
.item{flex-wrap:wrap;align-items:flex-start;position:relative}
.item-icon{padding-top:0;flex:0 0 1.4rem;width:1.4rem;height:1.364rem;display:flex;align-items:center;justify-content:center}
.item.mine .item-body{padding-right:56px}
.item.mine .tag.you{position:absolute;top:12px;right:14px}
.item:not(.mine) .item-icon{color:#6b6b6b}
.item-cta{flex-basis:100%;display:flex;justify-content:flex-start;margin-top:10px;padding:4px 0 2px calc(1.4rem + 8px)}
.item-cta .cal-menu{right:auto;left:0}
.item+.item{margin-top:12px}
.kind{color:var(--muted);margin-top:2px}
.kind .fa-solid{margin-right:4px;width:1em;text-align:center}
.legend-break{flex-basis:100%;height:0}
.brand{font-size:clamp(1.45rem,5vw,1.75rem)}
.topbar-right .linkish,.topbar-right .pill{font-size:.85rem}
.topbar-right{gap:14px}
.topbar-right{flex-shrink:0}.brand{min-width:0;line-height:1.2}
/* header icon buttons */
.topbar-right{display:flex;align-items:center;gap:6px}
.inline-form{display:flex;margin:0}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--accent);font-size:1.15rem;cursor:pointer;text-decoration:none;padding:0;transition:background-color .15s,color .15s}
.icon-btn:hover,.icon-btn.on{background:var(--tint);color:var(--accent-dark)}
/* tooltips: show on hover and keyboard focus, stay while hovered, Esc hides */
.tip{position:relative}
.tip::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#2f2a33;color:#fff;font:500 .8rem/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;padding:6px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s;z-index:30}
.tip.tip-end::after{left:auto;right:0;transform:none}
.tip.tip-start::after{left:0;transform:none}
.tip:hover::after,.tip:focus-visible::after{opacity:1;visibility:visible}
.tips-off .tip::after{opacity:0!important;visibility:hidden!important}
.inline-edit{position:relative}
.inline-edit>summary{list-style:none;cursor:pointer;display:inline-block}.inline-edit>summary::-webkit-details-marker{display:none}
.inline-edit[open]>summary{background:var(--tint);color:var(--accent-dark);border-color:var(--accent)}
.edit-panel{margin-top:10px;padding:14px;border:1px solid var(--accent);border-radius:12px;background:#fff;min-width:min(320px,80vw)}
.list-row .inline-edit[open]{flex-basis:100%}
.admin-edit{font-size:.88rem;display:inline-flex;align-items:center;gap:6px}
.admin-edit-row{margin:-8px 0 16px;display:flex;justify-content:flex-end}
.item-cta+.item-cta{margin-top:6px}
.item-edit{position:absolute;top:4px;right:4px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--accent);text-decoration:none;font-size:.9rem}
.item-edit:hover{background:var(--tint);color:var(--accent-dark)}
.item.has-edit .item-body{padding-right:40px}
.item.has-edit.mine .tag.you{right:52px}
.item.has-edit.mine .item-body{padding-right:100px}
/* Caregiver visits */
.visit-day+.visit-day{margin-top:24px}
.visit-date{font-size:1.15rem;margin:0 0 10px}
.visit{border-color:var(--accent);background:var(--tint)}
.visit-title{font-size:1.2rem;margin:0 0 4px;display:flex;gap:10px;align-items:baseline}
.visit-title i{color:var(--accent-dark);width:1.4rem;text-align:center;flex-shrink:0}
.visit p{margin:.35em 0}
.visit-needs-title{font-size:1rem;margin:14px 0 6px}
.visit-needs{margin:0;padding-left:1.3em}
.visit-needs li+li{margin-top:4px}
.visit-cta{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.visit .fa-location-dot{color:var(--accent-dark);margin-right:4px}
.caregiver-fields{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0;display:grid;gap:10px;min-width:0}
.caregiver-fields legend{padding:0 6px;font-weight:600}
.pill,.tag{white-space:nowrap}
.pill i,.tag i{margin-right:4px}
@media (max-width:599px){
  .list-row{flex-wrap:wrap}
  .list-row>div:first-child{flex:1 1 100%;min-width:0}
}
.btn-danger{background:#fff;color:#a8231a;border:1.5px solid #a8231a}
.btn-danger:hover,.btn-danger:focus-visible{background:#a8231a;color:#fff}
.deleted-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.deleted-row:last-child{border-bottom:0}
#removed .row-between{flex-wrap:wrap;gap:8px}
.btn{white-space:nowrap}
.person .row-gap{flex-wrap:wrap}
.tag-strong{background:var(--accent-dark);color:#fff}
.error{color:#a8231a;font-weight:600}
.list-row .danger-zone{flex-basis:100%}
.list-row .danger-zone:not([open]){flex-basis:auto}
.choice-cards{display:grid;gap:10px;border:0;padding:0;margin:0}
.choice-cards legend{font-weight:600;margin-bottom:8px;padding:0}
.choice-card{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:#fff}
.choice-card input{margin-top:5px;width:20px;height:20px;flex-shrink:0;accent-color:var(--accent-dark)}
.choice-card>span{display:grid;gap:2px}
.choice-card:has(input:checked){border-color:var(--accent);background:var(--tint)}
.choice-card:has(input:focus-visible){outline:3px solid var(--accent-dark);outline-offset:2px}
/* Update editor */
.editor{display:grid;gap:8px;min-width:0}
.editor-label{font-weight:600}
.editor-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.editor-tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:8px 14px;font:inherit;color:var(--muted);cursor:pointer}
.editor-tabs button.on{color:var(--accent-dark);border-bottom-color:var(--accent-dark);font-weight:600}
.editor-tabs button:hover{color:var(--accent-dark)}
.editor-toolbar{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.editor-toolbar button{width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--accent-dark);cursor:pointer;font-size:1rem}
.editor-toolbar button:hover{background:var(--tint);border-color:var(--accent)}
.editor-circle-link select{height:44px;margin:0;width:auto;max-width:100%}
.editor-link-panel{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:8px;background:var(--tint)}
.editor-preview{border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:8rem;background:#fff}
.thumb{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.update-photo{margin:0 0 1em}
.update-photo img{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;border-radius:12px;background:var(--bg)}
.email-status{margin-top:2px;color:var(--ink)}
.email-status i{color:var(--accent-dark);margin-right:4px}
.prose h2,.prose h3,.prose h4{margin:1em 0 .4em}
.prose ul,.prose ol{padding-left:1.4em}
[hidden]{display:none!important}
.page-head{align-items:center}
.info-pop{position:relative}
.info-pop>summary{list-style:none;cursor:pointer;color:var(--accent-dark)}
.info-pop>summary::-webkit-details-marker{display:none}
.info-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(340px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(60,40,70,.15);padding:14px 16px}
.info-panel h2{font-size:1.05rem;margin:0 0 8px}
.info-panel dl{margin:0;display:grid;gap:4px}
.info-panel dt{font-weight:600}
.info-panel dd{margin:0 0 6px;color:var(--ink);font-size:.92rem}
/* Memory Wall */
.share-memory{margin:0 0 16px}
.share-memory>summary{list-style:none}
.share-memory>summary::-webkit-details-marker{display:none}
.memory{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff}
.memory+.memory{margin-top:12px}
.memory-photo{display:block;width:100%;max-height:60vh;object-fit:contain;border-radius:10px;margin-bottom:10px;background:var(--bg)}
.memory-body{font-family:Georgia,"Iowan Old Style",serif;font-size:1.08rem;line-height:1.6}
.memory-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px}
.memory-foot form{margin:0}
.heart{display:inline-flex;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);cursor:pointer;font:inherit}
.heart:hover{border-color:var(--accent);color:var(--accent-dark)}
.heart[aria-pressed=true]{color:#a8231a;border-color:#a8231a;background:#fdf1f0}
.comment{padding:12px 0;border-bottom:1px solid var(--line)}
.comment-head{margin-bottom:4px}
.comment-body{overflow-wrap:anywhere}
.comment form{margin-top:4px}
.comment-form{margin-top:14px}
.item-cta{display:flex;flex-wrap:wrap;gap:8px}
.handoff-menu{padding:12px 14px;min-width:min(300px,calc(100vw - 48px));display:grid;gap:10px}
.handoff-menu hr{border:0;border-top:1px solid var(--line);margin:2px 0;width:100%}
.handoff-menu form{margin:0}
.handoff-menu select{width:100%}
.item-tasks{flex-basis:100%;padding-left:calc(1.4rem + 8px);margin-top:6px}
.item-tasks ul{margin:2px 0 0;padding-left:1.2em}
.cant-make-it[open]{flex-basis:100%}
.cant-make-it .cal-menu{position:static;margin-top:8px;box-shadow:none;border-color:var(--line)}
.cant-make-it[open]{display:block;width:100%}
.cant-make-it .cal-menu{min-width:0;width:100%}
/* Icon actions (edit, duplicate, delete) with tooltips; 44px targets */
.icon-action{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--accent-dark);font-size:1rem;cursor:pointer;text-decoration:none;padding:0;list-style:none;transition:background-color .15s,color .15s,border-color .15s}
.icon-action::-webkit-details-marker{display:none}
.icon-action:hover,.icon-action:focus-visible,.inline-edit[open]>.icon-action{background:var(--tint);border-color:var(--accent)}
.icon-action.danger:hover,.icon-action.danger:focus-visible{background:#fdf1f0;border-color:#a8231a;color:#a8231a}
.row-gap:has(>.icon-action),.row-gap:has(>form>.icon-action){gap:6px}
/* Icon buttons that open an inline panel (<summary>): keep the icon centered in every browser */
.inline-edit>summary.icon-action,.info-pop>summary.icon-btn{display:inline-flex;align-items:center;justify-content:center;line-height:1;text-align:center;box-sizing:border-box}
.icon-action i{display:block;line-height:1}
/* Inbox */
.has-badge{position:relative}
.badge{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#a8231a;color:#fff;font:700 .7rem/18px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-align:center}
.inbox{padding:4px 0}
.inbox-row{display:flex;gap:12px;align-items:flex-start;padding:12px 18px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.inbox-row:last-child{border-bottom:0}
.inbox-row:hover,.inbox-row:focus-visible{background:var(--tint)}
.inbox-dot{width:10px;height:10px;border-radius:50%;margin-top:7px;flex-shrink:0;background:transparent}
.inbox-row.unread .inbox-dot{background:var(--accent-dark)}
.inbox-main{display:grid;gap:1px;flex:1;min-width:0}
.inbox-from{font-weight:600}
.inbox-row.unread .inbox-subject{font-weight:700}
.inbox-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-date{flex-shrink:0;white-space:nowrap}
/* Schedule: list / month switch */
.view-switch{display:inline-flex;gap:4px;margin:0 0 12px;border-bottom:1px solid var(--line);width:100%}
.view-switch a{padding:8px 14px;text-decoration:none;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.view-switch a.on{color:var(--accent-dark);border-bottom-color:var(--accent-dark);font-weight:600}
.view-switch a:hover{color:var(--accent-dark)}
/* Month grid */
.month-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 10px}
.month-nav h2{margin:0;font-size:1.3rem}
.month-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:3px;margin:0 -3px}
.month-grid th{font-size:.8rem;font-weight:600;color:var(--muted);padding:4px 0}
.month-grid th abbr{text-decoration:none}
.month-grid td{vertical-align:top;height:64px;padding:0;background:#fff;border:1px solid var(--line);border-radius:10px}
.month-grid td.out{background:transparent;border-color:transparent}
.month-grid td.blocked{background:#f1eff3}
.month-grid td.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.month-grid td.picked{background:var(--tint);border-color:var(--accent-dark);box-shadow:inset 0 0 0 2px var(--accent-dark)}
.month-grid td a{display:flex;flex-direction:column;gap:2px;height:100%;min-height:64px;padding:4px;text-decoration:none;color:var(--ink);border-radius:10px}
.month-grid td a:hover{background:var(--tint)}
.mday{font-weight:600;font-size:.9rem}
.mitems{display:flex;flex-wrap:wrap;gap:2px 4px;font-size:.75rem;color:#6b6b6b}
.mitem.mine{color:var(--accent-dark)}
.mtext{display:none}
.mmore{font-size:.7rem;color:var(--muted)}
.mblocked{color:#4a4450}
@media (min-width:760px){
  .month-grid td{height:96px}
  .month-grid td a{min-height:96px}
  .mitems{display:grid;gap:2px}
  .mitem{display:flex;gap:4px;align-items:baseline;min-width:0}
  .mitem.mine{font-weight:600}
  .mtext{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
}
#day-detail{margin-top:16px}
.day-detail-title{font-size:1.15rem;margin:0 0 8px}
/* Top bar on small phones: Manage becomes an icon so the Circle name fits */
.manage-pill i{display:none}
.manage-pill.tip::after{display:none}
@media (max-width:479px){
  .manage-pill{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--accent);font-size:1.1rem;border-radius:50%}
  .manage-pill i{display:block}
  .manage-pill .manage-label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .manage-pill.tip::after{display:block}
  .manage-pill:hover{background:var(--tint)}
  .topbar-right{gap:0}
}
/* Projects & chapters (manage) */
.add-panel{margin:6px 0 14px}
.life-item{border-top:1px solid var(--line);padding:14px 0}
.life-head h3{margin:0}
.thumb-sm{width:56px;height:56px}
.sub-h{font-size:1rem;margin:18px 0 4px}
.entry-row .row-gap{align-items:center}
/* Life Story: chapters, projects, moments */
.chapter-toc ol{margin:0 0 12px;padding-left:1.3em}
.chapter+.chapter{border-top:1px solid var(--line);margin-top:18px;padding-top:6px}
.story-photo{display:block;width:100%;max-height:60vh;object-fit:contain;border-radius:12px;margin:8px 0 12px;background:var(--bg)}
.project-card{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink)}
.project-card+.project-card{margin-top:10px}
.project-card:hover,.project-card:focus-visible{border-color:var(--accent);background:var(--tint)}
.project-card img{width:72px;height:72px;object-fit:cover;border-radius:10px;flex-shrink:0}
.project-text{display:grid;gap:2px;flex:1;min-width:0}
.timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:3px solid var(--tint)}
.moment{position:relative;padding:0 0 18px 8px}
.moment::before{content:"";position:absolute;left:-27px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--accent-dark);border:3px solid #fff}
.moment-when{font-weight:600;color:var(--accent-dark);font-size:.9rem}
.moment h3{margin:2px 0 4px}
.entry+.entry{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}
.entry-date{font-size:1rem;margin:0 0 6px;color:var(--accent-dark)}
/* Day rows: date on the left, plans reading across (wide screens); stacked on phones */
.days.rows .day{min-height:0}
.days.rows .day:not(.today) .empty-day{display:none}
@media (min-width:600px){
  .days.rows .day{display:grid;grid-template-columns:7.5rem minmax(0,1fr);column-gap:16px;row-gap:0;align-items:start;padding:12px 14px}
  .days.rows .day-head{grid-column:1;grid-row:1 / span 40;flex-direction:column;justify-content:flex-start;gap:2px;margin:0;font-size:.95rem;padding-top:6px}
  .days.rows .day>*:not(.day-head){grid-column:2}
  .days.rows .day .item:first-of-type,.days.rows .blocked-label{margin-top:0}
  .days.rows .blocked-label{padding-top:6px}
  .days.rows .item{font-size:.95rem}
}
.empty-day{margin:4px 0 0}
.story-tabs{overflow-x:auto;white-space:nowrap}
.spotlight{border-color:var(--accent);box-shadow:0 2px 10px rgba(60,40,70,.08)}
.spotlight h2{font-size:1.4rem}
/* Manage menu: every option visible on any screen (wraps instead of scrolling sideways) */
.subnav{flex-wrap:wrap;overflow:visible}
.subnav a{min-height:40px;display:inline-flex;align-items:center}
.story-tabs{flex-wrap:wrap;overflow:visible;white-space:normal}
.view-switch a{white-space:nowrap}
@media (max-width:479px){.story-tabs a{padding:8px 9px;font-size:.9rem}}
@media (max-width:479px){.wide-only{display:none}}
/* Header: Circle name with its Manage icon on the left; personal icons on the right */
.topbar-left{display:flex;align-items:center;gap:4px;min-width:0}
.manage-btn{flex-shrink:0}
@media (max-width:479px){.topbar-right{gap:0}.topbar{padding:8px 10px}}
@media (max-width:479px){
  .topbar .icon-btn{width:40px;height:40px;font-size:1.05rem}
  .brand{font-size:1.3rem}
}
/* Admin ⋯ menu: phones only */
.more-menu{display:none;position:relative}
.more-menu>summary{list-style:none;cursor:pointer}
.more-menu>summary::-webkit-details-marker{display:none}
.more-menu[open]>summary{background:var(--tint);color:var(--accent-dark)}
.badge-dot{min-width:10px;width:10px;height:10px;padding:0;top:8px;right:8px;border:2px solid #fff;box-sizing:content-box}
.more-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:230px;background:#fff;border:1px solid #857d8f;border-radius:14px;box-shadow:0 8px 24px rgba(60,40,70,.18);padding:6px;display:grid}
.more-panel a,.more-panel button{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;border-radius:10px;text-decoration:none;color:var(--ink);font:inherit;font-size:1rem;background:none;border:0;width:100%;text-align:left;cursor:pointer}
.more-panel i{width:1.25rem;text-align:center;color:var(--accent-dark)}
.more-panel a:hover,.more-panel a:focus-visible,.more-panel button:hover,.more-panel button:focus-visible{background:var(--tint);color:var(--accent-dark)}
.more-panel a[aria-current]{font-weight:600;color:var(--accent-dark)}
.more-panel form{margin:0;border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.more-panel .tag{margin-left:auto}
@media (max-width:599px){
  .topbar-right.is-admin>*:not(.more-menu),.topbar .admin-wide{display:none!important}
  .topbar-right.is-admin .more-menu{display:block}
}
/* Home-screen directions */
.install-tip{border-color:var(--accent);background:var(--tint)}
.install-head h2{margin:0;font-size:1.15rem}
.install-head h2 i{color:var(--accent-dark);margin-right:6px}
.install-steps{padding-left:1.4em;margin:8px 0 12px}
.install-steps li{margin:6px 0;line-height:1.5}
.key{display:inline-flex;align-items:center;justify-content:center;min-width:1.8em;height:1.8em;padding:0 4px;border:1px solid #857d8f;border-radius:6px;background:#fff;color:#1a64d6;vertical-align:middle;font-size:.9em}
.foot a[data-install-show]{color:var(--accent-dark)}
.install-head{flex-wrap:nowrap;align-items:flex-start;gap:8px}
.install-head .icon-btn{flex-shrink:0;margin:-6px -8px 0 0}
.install-others{margin:4px 0 10px}
.install-others>summary,.install-other>summary{cursor:pointer;color:var(--accent-dark);min-height:32px;display:list-item}
.install-others h3{margin:12px 0 4px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.install-other{margin:2px 0 2px 8px}
.install-other .install-steps{margin-top:4px}
/* Legend: its own quiet box, with room between items and around it */
.legend{gap:10px 20px;margin:10px 0 18px;padding:12px 14px;background:var(--bg);border-radius:12px;line-height:1.3}
.legend>span{display:inline-flex;align-items:center;gap:6px}
.legend .fa-solid{margin-right:0}
.legend-break{margin:2px 0;border-top:1px solid var(--line);height:0}
/* Legend on one line when there's room; wraps naturally on smaller screens */
.legend{align-items:center}
.legend-break{flex-basis:auto;width:1px;height:1.2em;border-top:0;background:var(--line);margin:0 2px}
@media (max-width:599px){.legend-break{flex-basis:100%;width:auto;height:0;background:none;border-top:1px solid var(--line);margin:2px 0}}
/* Super admin account menu (desktop) uses the same panel as the phone ⋯ menu */
.account-menu{display:block}
.account-menu[open]>summary.tip::after{display:none}
@media (max-width:599px){.topbar-right.is-admin>.account-menu{display:none!important}}
.topbar{z-index:20}
/* Footer: ring mark beside the business name and slogan */
.foot-brand{display:inline-flex;align-items:center;gap:10px;text-align:left;max-width:560px}
.foot-brand .logo-mark{flex-shrink:0}
.foot-brand strong{font-size:1.05rem}
/* Footer lockup: name over slogan; the ring is exactly 2px taller than the words, top and bottom */
.foot-brand{display:inline-grid;grid-template-columns:auto auto;column-gap:10px;align-items:stretch;text-align:left;max-width:560px}
.foot-brand .logo-mark{height:calc(100% + 4px);width:auto;aspect-ratio:1;margin:-2px 0;align-self:stretch}
.foot-words{display:flex;flex-direction:column;justify-content:center}
.foot-name{font-family:Georgia,"Iowan Old Style",serif;font-weight:normal;font-size:1.15rem;line-height:1.2;color:var(--ink)}
.foot-tag{font-size:.82rem;line-height:1.35;color:var(--muted)}
/* Footer lockup v2: ring sits with the name (2px taller than it, top and bottom); slogan underneath, aligned with the name */
.foot-brand{display:inline-grid;grid-template-columns:auto auto;grid-template-areas:"mark name" ". tag";column-gap:8px;row-gap:2px;align-items:center;text-align:left;max-width:560px}
.foot-brand .logo-mark{grid-area:mark;height:calc(100% + 4px);width:auto;aspect-ratio:1;margin:-2px 0;align-self:stretch}
.foot-brand .foot-name{grid-area:name}
.foot-brand .foot-tag{grid-area:tag}
.foot-brand .foot-name{font-size:1.1rem;line-height:1.2}
.foot-brand .logo-mark{font-size:1.1rem;height:calc(1.2em + 4px);width:calc(1.2em + 4px);margin:0;align-self:center}
.nowrap{white-space:nowrap}
/* Footer lockup v3: "Powered by Full Circle" over the slogan; the ring is centered vertically beside both lines */
.foot-brand{grid-template-areas:"mark name" "mark tag"}
.foot-brand .logo-mark{grid-row:1 / span 2;align-self:center}
.foot-brand .foot-name strong{font-family:Georgia,"Iowan Old Style",serif;font-weight:normal;font-size:1em;color:var(--ink)}
.foot-powered{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:.72em;color:var(--muted);letter-spacing:.02em}
.foot-install{margin-top:20px}
/* Footer lockup v4: "Powered by" above the name; ring centered between name and slogan; smaller name */
.foot-brand{grid-template-areas:". powered" "mark name" "mark tag";row-gap:1px}
.foot-brand .foot-powered{grid-area:powered;font-size:.72rem;line-height:1.2}
.foot-brand .foot-name{grid-area:name;font-family:Georgia,"Iowan Old Style",serif;font-weight:normal;font-size:.98rem;line-height:1.2;color:var(--ink)}
.foot-brand .logo-mark{grid-row:2 / span 2;align-self:center;font-size:.98rem}
/* Footer v5: one line on wide screens (ring · name · slogan); on phones the slogan drops below, centered */
.foot-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:8px;row-gap:4px}
.foot-line .logo-mark{font-size:.98rem;height:calc(1.2em + 4px);width:calc(1.2em + 4px);flex-shrink:0}
.foot-line .foot-name{font-family:Georgia,"Iowan Old Style",serif;font-weight:normal;font-size:.98rem;line-height:1.2;color:var(--ink)}
.foot-line .foot-sep{color:var(--muted)}
.foot-line .foot-tag{font-size:.82rem;line-height:1.35;color:var(--muted)}
@media (max-width:599px){
  .foot-line .foot-sep{display:none}
  .foot-line .foot-tag{flex-basis:100%;text-align:center}
}
.foot-line .foot-tag{font-size:.76rem}
/* Footer v6: as quiet as possible while staying AA (no fixed sizes, 4.5:1+ contrast, zooms to 200%) */
.foot{padding:20px 16px 28px}
.foot-line{column-gap:6px;row-gap:2px}
.foot-line .foot-name{font-size:.75rem;color:var(--muted)}
.foot-line .logo-mark{font-size:.75rem;opacity:.85}
.foot-line .foot-tag{font-size:.6875rem;line-height:1.4}
.foot-line .foot-sep{font-size:.75rem}
.foot-install{margin-top:16px;font-size:.75rem}
.slot-note{margin-top:4px;color:var(--ink)}
.slot-note i{color:var(--accent-dark)}
.note-menu{min-width:min(280px,calc(100vw - 48px));padding:12px}
.note-edit[open]{flex-basis:100%}
.note-edit .cal-menu{position:static;margin-top:6px;box-shadow:none;border-color:var(--line)}
.code-input{font-size:1.6rem;letter-spacing:.3em;text-align:center;max-width:12rem;margin:0 auto}
.code-form label{font-weight:600}
.memory-comments{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.memory-comments>summary{cursor:pointer;color:var(--accent-dark);min-height:32px;display:flex;align-items:center;gap:6px;list-style:none}
.memory-comments>summary::-webkit-details-marker{display:none}
.memory-comment{padding:6px 0 6px 10px;border-left:2px solid var(--tint);margin:6px 0}
.memory-comment form{margin:2px 0 0}
.memory-comment-form{margin-top:6px}
.widget.medical{border-top:1px solid var(--line)}
/* Gallery */
.gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--bg)}
.gallery a:focus-visible img{outline:3px solid var(--accent-dark);outline-offset:2px}
.gallery figcaption{margin-top:4px;line-height:1.35}
.photo-admin-grid{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.photo-admin{border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:8px;background:#fff}
.photo-admin img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.photo-admin .row-gap{flex-wrap:wrap}
.photo-admin .inline-edit[open]{flex-basis:100%}
/* Conversations */
.thread{list-style:none;margin:12px 0;padding:0;display:grid;gap:10px}
.thread-msg{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff}
.thread-msg.mine{background:var(--tint);border-color:var(--accent)}
.thread-msg .prose p:last-child{margin-bottom:0}
.reply-form{margin-top:8px}
.mark-unread{margin-top:6px}
/* Split button: Sign up | ▾ (sign up with a note) */
.split-btn{display:inline-flex;align-items:stretch;position:relative;flex-shrink:0}
.split-btn form{margin:0;display:flex}
.split-btn .split-main{border-radius:999px 0 0 999px;padding-right:14px}
.split-more{display:flex}
.split-more>summary{list-style:none}
.split-more>summary::-webkit-details-marker{display:none}
.split-toggle{border-radius:0 999px 999px 0;padding:0 14px 0 12px;display:inline-flex;align-items:center;border-left:1px solid rgba(255,255,255,.55);min-width:44px;justify-content:center}
.split-toggle i{font-size:.8rem;transition:transform .15s}
.split-more[open] .split-toggle i{transform:rotate(180deg)}
.split-more[open]>summary.tip::after{display:none}
.split-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:15;width:min(300px,calc(100vw - 48px));background:#fff;border:1px solid #857d8f;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.12);padding:12px;text-align:left}
/* Placeholder examples: comfortable padding, readable grey (4.5:1+), clearly lighter than typed text */
input,textarea{padding:12px 14px;line-height:1.45}
textarea{min-height:3.2em}
::placeholder{color:#6f6878;opacity:1;font-style:normal;letter-spacing:.01em}
.choice-inline{display:flex;flex-wrap:wrap;gap:10px 20px}.choice-inline legend{flex-basis:100%;margin-bottom:4px}
/* Manage menu: always one line */
.subnav{flex-wrap:nowrap;overflow:visible;gap:6px}
.subnav a{flex:0 0 auto}
.subnav-icon{width:44px;justify-content:center;padding:6px 0}
@media (max-width:479px){.subnav{gap:4px}.subnav a{padding:6px 10px;font-size:.88rem}.subnav-icon{width:40px;padding:6px 0}}
/* Manage overview: movable cards */
.ov-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:760px){.ov-grid{grid-template-columns:1fr 1fr}.ov-grid .span2{grid-column:span 2}}
.ov-card{margin:0}
.ov-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ov-head h2{margin:0;flex:1}
.ov-grip{cursor:grab;color:var(--muted);width:24px;display:none;justify-content:center}
@media (hover:hover) and (pointer:fine){.ov-grip{display:inline-flex}}
.ov-move{display:flex;gap:4px}
.ov-move form{margin:0}
.ov-move .icon-action{width:36px;height:36px;font-size:.85rem}
.ov-move .icon-action:disabled{opacity:.35;cursor:default;background:#fff;border-color:var(--line)}
.ov-card.dragging{opacity:.5;outline:2px dashed var(--accent)}
.ov-link{font-weight:400;font-size:.9rem}
/* Notification settings: radio cards with even padding; radio lined up with each option's title */
.choice-cards .choice-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;margin:0}
.choice-cards .choice-card input[type=radio],.choice-cards .choice-card input[type=checkbox]{flex-shrink:0;width:20px;height:20px;margin:2px 0 0;transform:none}
.choice-cards .choice-card strong{display:block;line-height:1.35}
.choice-cards{gap:12px}
.choice-cards legend{margin-bottom:12px}
.foot-install a{display:inline-flex;align-items:center;gap:6px}
.tag.covered{background:#e8f2e3;color:#2f5a22}
.ride-inline{display:grid;gap:8px;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;background:var(--bg)}
.tag.ride-tag{background:#e6eef8;color:#1d3f6e}
.ride-line{color:#1d3f6e}
.ride-line i{margin-right:4px}
/* Even form grids: two columns on phones, more on wider screens; every field fills its cell */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 12px;align-items:start}
.form-grid>label{display:flex;flex-direction:column;min-width:0;margin:0}
.form-grid input,.form-grid select{width:100%;min-width:0;margin-top:4px}
.form-grid input[type=date],.form-grid input[type=time]{min-height:46px;-webkit-appearance:none;appearance:none;background:#fff}
.form-grid .check-cell{flex-direction:row;align-items:center;gap:8px;align-self:center;padding-top:22px}
.form-grid .check-cell input{width:20px;height:20px;margin:0;transform:none}
.field-help{font-size:.8rem;color:var(--muted);margin-top:4px;line-height:1.35}
@media (min-width:600px){.form-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:599px){.form-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid-3>label:first-child{grid-column:span 2}}
/* Repeat: the number gets its own row, "Weekdays only" sits on the line below */
.form-grid .check-cell{grid-column:1 / -1;padding-top:0;align-self:start}
@media (max-width:599px){.form-grid>label:has(input[name=repeat_days]){grid-column:1 / -1}}
/* Dropdowns: one consistent chevron, centered, with even room on the right in every browser */
select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  min-height:46px;line-height:1.3;
  padding:11px 44px 11px 14px;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%234f3c5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px;
  text-overflow:ellipsis;cursor:pointer;
}
select::-ms-expand{display:none}
select:hover{border-color:var(--accent)}
select:disabled{opacity:.6;cursor:default}
.person-opts select{padding-right:40px;background-position:right 12px center}
.editor-circle-link select{min-height:44px;height:auto}
/* People: Role and Type as two equal boxes with their labels above */
.person-opts>label:has(select){flex:1 1 150px;display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:.92rem;min-width:0}
.person-opts>label:has(select) select{width:100%;margin:0;font-weight:normal}
.person-opts>label:has(input[type=checkbox]){display:inline-flex;align-items:center;gap:8px;min-height:32px}
.person-opts>label:has(input[type=checkbox]) input{width:20px;height:20px;margin:0;transform:none}
/* People options as a tidy grid: Role | Type, then each tick box on its own line */
.person-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;align-items:end}
.person-opts>label:has(select){flex:none}
.person-opts>label:has(input[type=checkbox]),.person-opts>span{grid-column:1 / -1}
@media (min-width:760px){.person-opts{grid-template-columns:repeat(4,minmax(0,1fr))}.person-opts>label:has(input[type=checkbox]){grid-column:auto}}
/* Update editor: the "Link to a Circle page" menu fits its row */
.editor-circle-link{flex:1 1 100%;min-width:0;display:block}
.editor-circle-link select{width:100%;max-width:100%}
@media (min-width:600px){.editor-circle-link{flex:1 1 220px}}
/* People: Access options under one label, on one line */
.access-set{grid-column:1 / -1;border:0;margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:6px 18px;align-items:center;min-width:0}
.access-set legend{font-weight:600;font-size:.92rem;padding:0;margin-bottom:6px;float:left;width:100%}
.access-set label{display:inline-flex;align-items:center;gap:8px;min-height:44px;white-space:nowrap;font-size:.92rem;margin:0}
.access-set input{width:20px;height:20px;margin:0;transform:none;flex-shrink:0}
@media (max-width:479px){
  .access-set{gap:4px 14px}
  /* Phones: short names (screen readers still hear the full ones) */
  .access-long{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:760px){.access-set{grid-column:1 / -1}}
/* Access v2: label above, three options on one line */
.access-set{display:block;grid-column:1 / -1;border:0;margin:0;padding:0;min-width:0}
.access-set legend{float:none;width:auto;display:block;font-weight:600;font-size:.92rem;padding:0;margin:0 0 4px}
.access-opts{display:flex;flex-wrap:nowrap;gap:0 18px;align-items:center}
.access-opts label{display:inline-flex;align-items:center;gap:8px;min-height:44px;white-space:nowrap;font-size:.92rem;margin:0}
.access-opts input{width:20px;height:20px;margin:0;transform:none;flex-shrink:0}
.access-short{display:none}
@media (max-width:479px){
  .access-opts{gap:0 14px}
  .access-long{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .access-short{display:inline}
}
/* "Add to calendar" and "I can't make it" side by side, even on phones */
.item-cta{flex-wrap:wrap;align-items:flex-start}
@media (max-width:479px){
  .item-cta{padding-left:0}
  .item-cta>.cal-add>summary.btn,.item-cta>.cant-make-it>summary.btn{padding:8px 12px;font-size:.85rem}
}
/* Access v3: more room above it; the label-to-options gap matches Role/Type (4px) */
.access-set{margin-top:10px}
.access-set legend{margin:0 0 4px;line-height:1.55}
.access-opts label{min-height:28px}
.access-opts input{margin:0}
.access-set legend{margin-bottom:3px}.access-set{margin-bottom:8px}
/* Buttons side by side get a comfortable gap (Approve / Decline, Save / Cancel, etc.) */
.row-gap:has(>.btn),.row-gap:has(>form>.btn),.row-gap:has(>a.btn){gap:12px}
.person .row-gap{gap:12px}
.row-gap:has(>.btn),.row-gap:has(>form>.btn),.row-gap:has(>a.btn),.person .row-gap{gap:16px}
.access-set{margin-bottom:16px}
/* Access and Approval: one line when it fits, tidy wrap on phones */
.access-opts{flex-wrap:wrap;gap:2px 20px}
.access-opts label{font-size:.92rem}
/* Inbox: the empty message gets the same padding as the rows */
.inbox>.empty{margin:0;padding:18px 20px}
.inbox-row{padding:14px 18px}
.reply-form textarea{min-height:6em}
/* View as: a clear, sticky banner; action buttons look switched off */
.view-as-bar{position:sticky;top:0;z-index:40;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:10px 16px;background:#2f2a33;color:#fff}
.view-as-bar p{margin:0;font-size:.92rem}
.view-as-bar strong{color:#fff}
.view-as-who{color:#e4dcea}
.view-as-bar form{margin:0}
.view-as-exit{background:#fff;color:#2f2a33}
.view-as-exit:hover{background:#e4dcea;color:#2f2a33}
.viewing-as .topbar{top:0}
.viewing-as button:disabled,.viewing-as input[type=submit]:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.viewing-as .topbar{top:var(--vab-h,44px)}
.ov-disabled{visibility:hidden}
.upkeep-status{margin:10px 0 0}.settings-actions{margin-top:12px}
/* Keepsake card */
.keepsake-row{border-top:1px solid var(--line);padding:12px 0;margin-top:12px}
.inline-check{display:inline-flex;align-items:center;gap:8px;min-height:40px}
.inline-check input{width:20px;height:20px;margin:0;transform:none}
.share-people{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0 18px}
.share-people legend{font-weight:600;margin-bottom:4px}
/* Storage meter */
.meter{height:12px;border-radius:6px;background:var(--bg);border:1px solid var(--line);overflow:hidden;margin:6px 0 8px}
.meter-fill{display:block;height:100%;background:var(--accent-dark)}
.meter-fill.warn{background:#a86b00}
.meter-fill.full{background:#a8231a}
.inline-field{display:inline-flex;align-items:center;gap:8px}
.inline-field input{width:90px;margin:0}
.keepsake-actions{display:grid;gap:10px;justify-items:start}
.keepsake-make{gap:6px;justify-items:start}
/* Auto-save status */
.autosave-status{margin:6px 0 0;min-height:1.4em;color:var(--muted)}
.autosave-status.saved{color:#2f5a22}
.autosave-status.error{color:#a8231a;font-weight:600}
.invite-panel{margin-top:12px}
.invite-panel>summary{display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer}
.invite-panel>summary::-webkit-details-marker{display:none}
.invite-panel .edit-panel{margin-top:12px}
@media (max-width:599px){.invite-grid{grid-template-columns:1fr}.invite-grid>label:first-child{grid-column:auto}}
.ov-card p .ov-link{display:inline-block;padding:8px 0;margin:-8px 0}
.invite-check p{margin:6px 0 0}
.invite-check .invite-ok{color:#2f5a22}
.invite-check .invite-note{color:var(--muted)}
.invite-check .invite-warn{color:#a8231a;font-weight:600}
.contact-import{margin-top:12px}
.contact-import>.field-help{margin-top:10px}
.file-btn{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.file-btn:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.contacts-list fieldset{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0 0}
.contacts-list legend{font-weight:600;padding:0 4px}
.contacts-filter{display:flex;flex-direction:column;margin-bottom:8px}
.contacts-list ul{list-style:none;margin:0;padding:0;max-height:320px;overflow:auto;border-top:1px solid var(--line)}
.contacts-list li{border-bottom:1px solid var(--line)}
.contacts-list li label{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 2px;cursor:pointer;overflow-wrap:anywhere}
.contacts-list li input{width:20px;height:20px;flex:none;margin:0}
.contacts-list li .tag{margin-left:auto;flex:none}
/* Join link card: the link, Reset link and Invite by email each get room to breathe (and 44px tap targets). */
#card-join .copy{display:block;width:100%;margin:4px 0 0}
.join-reset{margin:12px 0 0}
.join-reset .linkish{display:inline-flex;align-items:center;min-height:44px;padding:0}
.invite-suggest{list-style:none;margin:6px 0 0;padding:4px;border:1px solid var(--line);border-radius:12px;background:#fff;max-height:280px;overflow:auto;box-shadow:0 6px 18px rgba(47,42,51,.08)}
.invite-suggest li{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:8px;cursor:pointer;overflow-wrap:anywhere}
.invite-suggest li .tag{margin-left:auto;flex:none}
.invite-suggest li:hover,.invite-suggest li[aria-selected=true]{background:var(--tint);outline:2px solid var(--accent);outline-offset:-2px}
/* Help icon beside a dashboard card title; its note opens across the card so it never runs off a phone screen. */
.ov-card{position:relative}
.ov-head:has(.ov-help) h2{flex:0 1 auto}
.ov-head .ov-help{position:static;margin-right:auto}
.ov-help .info-panel{left:16px;right:16px;top:64px;width:auto}
.ov-help .info-panel p{margin:0;font-size:.92rem}
.autosave-status:empty{display:none}
/* All Circles page: practices, practice admins and the Full Circle team */
.practice-head{font-size:1.1rem;margin:22px 0 4px}
.list-row{flex-wrap:wrap}
.list-row .circle-tools{flex-basis:100%;justify-content:flex-start;align-items:flex-start;margin-top:-2px}
.list-row .circle-tools .inline-edit[open]{flex-basis:100%}
.practice-block{border-top:1px solid var(--line);padding:16px 0 4px;margin-top:16px}
.practice-block h3{margin:0 0 10px;font-size:1.05rem}
.people-mini{list-style:none;margin:0 0 12px;padding:0}
.people-mini li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:4px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.people-mini li:last-child{border-bottom:0}
.form-grid.form-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:599px){.form-grid.form-grid-2{grid-template-columns:1fr}}
/* Family invitations */
.dash-invite{margin:20px 0 0;text-align:center}
.dash-invite .btn{display:inline-flex;align-items:center;gap:8px}
/* Practice branding: a practice's logo in the footer, and the branding form on All Circles */
.foot-line .foot-logo{height:24px;width:auto;max-width:120px;object-fit:contain;flex-shrink:0}
.brand-panel label.check{display:flex;align-items:center;gap:10px;min-height:44px}
.brand-panel label.check input{width:22px;height:22px;flex-shrink:0;margin:0}
.brand-color-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand-color-row label{flex-basis:100%}
.brand-color-row input[type=color]{width:64px;height:44px;cursor:pointer}
.brand-swatch-text{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border-radius:10px;color:#fff;font-weight:600;background:var(--accent)}
.brand-logo-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.brand-logo-row label{flex:1;min-width:200px}
.brand-logo-row input[type=file]{min-height:44px;width:100%}
.brand-logo-preview{height:44px;width:auto;max-width:140px;object-fit:contain;border:1px solid var(--line);border-radius:8px;padding:4px;background:#fff}
.field-help.error{color:#a8231a}
.brand-panel>summary,.brand-panel .btn{min-height:44px}
/* Caregiver visits use the Schedule day cards; their day heading is an h2 for screen readers but looks like the others. */
.day h2.day-head{font-family:inherit;font-size:.85rem;font-weight:400;line-height:inherit;margin:0 0 6px}
.item .fa-location-dot{color:var(--accent-dark);margin-right:2px}
.hide-client{display:flex;gap:8px;align-items:flex-start}
.hide-client input{margin-top:4px;flex:none}
.people-mini li{flex-wrap:wrap}
.remove-panel[open]{flex-basis:100%;display:flex;flex-direction:column;position:static}
.people-mini li{position:relative}
.remove-panel[open]>summary{position:absolute;top:4px;right:0}
.remove-panel .edit-panel{margin-top:6px}
/* People lookup (names and emails): suggestions under a field, and contacts picked from a file or the phone */
.pl-tools{margin-top:4px}
.pl-tools>.field-help{margin-top:10px}
.pl-note:empty{display:none}
.pl-note{margin:6px 0 0;color:#2f5a22}
.pl-suggest{list-style:none;margin:6px 0 0;padding:4px;border:1px solid var(--line);border-radius:12px;background:#fff;max-height:280px;overflow:auto;box-shadow:0 6px 18px rgba(47,42,51,.08)}
.pl-suggest li{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:8px;cursor:pointer;overflow-wrap:anywhere}
.pl-suggest li .tag{margin-left:auto;flex:none}
.pl-suggest li:hover,.pl-suggest li[aria-selected=true]{background:var(--tint);outline:2px solid var(--accent);outline-offset:-2px}
.pl-choose{display:flex;width:100%;min-height:44px;align-items:center;text-align:left;background:none;border:0;padding:4px 2px;font:inherit;color:inherit;cursor:pointer;overflow-wrap:anywhere}
.pl-choose:hover,.pl-choose:focus-visible{background:var(--tint)}

/* ==========================================================================
   Spacing system. One scale for the whole app (4, 8, 12, 16, 24, 32 px):
     label to its field ........... 6px        icon to its text ......... 8px
     field to its help text ....... 6px        icon buttons side by side  8px
     field to field ............... 16px       buttons side by side ..... 12px
     card padding ................. 20px (16px on phones)
     card to card ................. 16px       panel padding ............ 16px
   Later rules in this file only for genuine exceptions.
   ========================================================================== */
h1{margin:var(--s2) 0 var(--s4)}
h2{margin:0 0 var(--s3)}
h3{margin:0 0 var(--s2)}
.card{padding:20px;margin:0 0 var(--s4)}
@media (max-width:599px){.card{padding:var(--s4)}}
.card>:last-child,.edit-panel>:last-child,.stack>:last-child{margin-bottom:0}

/* labels and fields */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),select,textarea{margin-top:6px}
.stack{gap:var(--s4)}
.form-grid{gap:var(--s4) var(--s3)}
.form-grid input,.form-grid select{margin-top:6px}
.field-help{margin:6px 0 0}
label>.field-help,label+.field-help{margin-top:6px}
.field-help+textarea,.field-help+input,.field-help+select{margin-top:var(--s2)}
fieldset{margin:0;padding:0;border:0;min-width:0}
legend{padding:0;margin-bottom:var(--s2);font-weight:600}

/* checkboxes and radios: box and words side by side, 8px apart, aligned to the first line */
label:has(>input[type=checkbox]),label:has(>input[type=radio]){display:flex;align-items:flex-start;gap:var(--s2)}
label:has(>input[type=checkbox])>input,label:has(>input[type=radio])>input{flex:none;width:20px;height:20px;margin:2px 0 0;transform:none}

/* buttons and icons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2)}
summary.btn{display:inline-flex}
.btn>i,.pill>i,.linkish>i{margin:0}
.row-gap,.row-gap:has(>.btn),.row-gap:has(>form>.btn),.row-gap:has(>a.btn),.person .row-gap{gap:var(--s3)}
.row-gap:has(>.icon-action),.row-gap:has(>form>.icon-action),.row-gap:has(>details>.icon-action){gap:var(--s2)}
.stack>div:has(>.btn:only-child){margin-top:var(--s1)}

/* panels that open in place */
.edit-panel{margin-top:var(--s3);padding:var(--s4)}
.add-panel{margin:var(--s2) 0 var(--s4)}
.flash{margin-bottom:var(--s4)}
.flash.error>div+div{margin-top:var(--s1)}
/* label text and its "(optional)" note stay on one line; the field sits 6px below */
.form-grid>label{display:block}
.form-grid>label>input,.form-grid>label>select,.form-grid>label>textarea{display:block}
.form-grid .check-cell{display:flex}
/* buttons inside a wrapping row keep their natural width */
.wrap-row>label.btn,.wrap-row>.file-btn{flex:none;min-width:0}
.pl-tools{margin-top:var(--s3)}
.pl-tools>.field-help{margin-top:var(--s2)}
.pl-note{margin-top:var(--s2)}
.contact-import{margin-top:var(--s3)}
/* form buttons keep their natural width (no full-width bars), lined up on the left */
.stack>button,.stack>.btn,.stack>a.btn{align-self:flex-start}
/* help notes written as small muted text after a field: 6px below the field, 16px before the next field */
fieldset>label+.muted.small,label+span.muted.small,fieldset>select+.muted.small{display:block;margin-top:6px}
fieldset>.muted.small+label,fieldset>label+label,fieldset>.field-help+label{margin-top:var(--s4)}
fieldset>legend+label,fieldset>legend+.muted.small{margin-top:0}
/* list rows: words on the left (wrapping if long), the action icon stays on the right of the same row */
.people-mini li{flex-wrap:nowrap}
.people-mini li>span:first-child{flex:1;min-width:0}
.people-mini li:has(.remove-panel[open]){flex-wrap:wrap}

/* ==========================================================================
   Desktop (1024px and up): the "Manage this Circle" toolbar on the left, and Manage mode.
   Phones and tablets are unchanged: the toolbar and the Manage band don't show there.
   ========================================================================== */
.manage-rail,.manage-band{display:none}
@media (min-width:1024px){
  body.has-rail{--rail-w:248px;padding-left:var(--rail-w)}
  body.has-rail.rail-collapsed{--rail-w:72px}
  .manage-rail{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);z-index:25;
    background:var(--accent-dark);color:#fff;padding:var(--s3) var(--s3) var(--s4);overflow-y:auto;transition:width .15s}
  .rail-head{display:flex;align-items:center;justify-content:flex-end;gap:var(--s2);min-height:44px;margin-bottom:var(--s3)}
  .rail-title{display:flex;align-items:center;gap:var(--s3);margin:0;padding-left:var(--s3);font-size:1rem;line-height:1.25;color:#fff;min-width:0}
  .rail-title i{flex:none;width:20px;text-align:center}
  .rail-toggle.icon-btn{color:#fff;flex:none}
  .rail-toggle.icon-btn:hover,.rail-toggle.icon-btn:focus-visible{background:rgba(255,255,255,.14);color:#fff}
  .rail-list{display:flex;flex-direction:column;gap:2px}
  .rail-link{display:flex;align-items:center;gap:var(--s3);min-height:44px;padding:0 var(--s3);border-radius:10px;color:#fff;text-decoration:none;white-space:nowrap}
  .rail-link i{flex:none;width:20px;text-align:center}
  .rail-link:hover,.rail-link:focus-visible{background:rgba(255,255,255,.14)}
  .rail-link.on{background:#fff;color:var(--accent-dark);font-weight:600}
  .rail-link.in-section{background:rgba(255,255,255,.14);font-weight:600}
  body.rail-collapsed .rail-link.in-section{background:#fff;color:var(--accent-dark)}
  .rail-sub{min-height:40px;padding-left:calc(var(--s3) + 20px + var(--s3));font-size:.92rem}
  .rail-sub i{display:none}
  .rail-badge{margin-left:auto;background:#fff;color:var(--accent-dark);border-radius:999px;font-size:.75rem;font-weight:700;padding:1px 8px}
  .rail-link.on .rail-badge{background:var(--accent-dark);color:#fff}
  .rail-sep{border:0;border-top:1px solid rgba(255,255,255,.25);margin:var(--s2) 0}
  .rail-link:focus-visible,.rail-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px}
  /* collapsed: icons only, names as tooltips to the right */
  body.rail-collapsed .rail-label,body.rail-collapsed .rail-sub{display:none}
  body.rail-collapsed .rail-link{position:relative}
  body.rail-collapsed .rail-badge{position:absolute;top:4px;right:6px;margin:0;font-size:.68rem;padding:0 5px;line-height:1.5}
  body.rail-collapsed .rail-head{justify-content:center}
  body.rail-collapsed .rail-title{display:none}
  body.rail-collapsed .rail-link{justify-content:center;padding:0}
  .rail-link.tip::after{top:50%;left:calc(100% + 10px);transform:translateY(-50%)}
  /* the Manage tabs at the top of Manage pages give way to the toolbar */
  body.has-rail .manage-topnav{display:none}
  /* Manage mode: a different look so it's always clear you're managing, and the page is about the task */
  body.manage-mode{background:#ebe6f0}
  body.manage-mode .tabs{display:none}
  .manage-band{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);position:sticky;top:57px;z-index:15;
    background:var(--tint);border-bottom:2px solid var(--accent-dark);color:var(--accent-dark);font-weight:400;font-size:.86rem;padding:var(--s1) var(--s5)}
  .manage-band i{margin-right:var(--s2)}
  .manage-band a{color:var(--accent-dark);font-weight:400;min-height:44px;display:inline-flex;align-items:center}
  body.manage-mode .wrap{max-width:1040px}
}
/* Edit name and email: a pencil at the top right of a person; its panel opens across the full width */
.person-info{position:relative}
.details-edit-slot{float:right;margin:0 0 var(--s2) var(--s2)}
.details-edit-slot .details-panel[open]{float:none}
.person-info:has(.details-panel[open]) .details-edit-slot{float:none;margin:0 0 var(--s3)}
.people-mini li .details-panel{flex:none}
.people-mini li:has(.details-panel[open]){flex-wrap:wrap}
.people-mini li .details-panel[open]{flex-basis:100%;order:3}