/* Account and admin area. Builds on /site.css (fonts, colours, top bar, .btn). */
body.app{background:#FFF3D6;color:var(--ink)}
.shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);width:min(1120px,100% - 2rem);margin:0 auto;padding:clamp(1rem,3vw,2rem) 0 4rem;align-items:start}
.side{position:sticky;top:76px;display:flex;flex-direction:column;gap:.25rem}
.side a,.side button{display:flex;align-items:center;gap:.6rem;font:600 1.05rem/1 var(--head);color:var(--ink);text-decoration:none;padding:.7rem .9rem;border-radius:14px;border:0;background:transparent;cursor:pointer;text-align:left;white-space:nowrap}
.side a:hover{background:rgba(27,24,72,.08)}
.side a[aria-current=page]{background:var(--ink);color:#fff}
.side svg{width:1.25rem;height:1.25rem;flex:none}
.side .sep{height:1px;background:rgba(27,24,72,.18);margin:.5rem .4rem}
.side .adm{color:#7A3FA0}
#app{min-width:0}
#app :focus-visible,.side :focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:10px}
.phead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem;margin:0 0 1rem}
#app h1{font-size:clamp(1.8rem,4vw,2.4rem);margin:0;line-height:1.1}
#app h2{font-size:1.3rem;margin:0 0 .6rem;line-height:1.2}
#app h3{font-size:1.05rem;margin:0 0 .4rem}
#app p{margin:0 0 .7rem;max-width:62ch}
.saved{font-size:.9rem;color:#4b4877;min-height:1.2em}
.card{background:#fff;border-radius:20px;padding:clamp(1rem,2.5vw,1.4rem);margin:0 0 1rem;box-shadow:0 1px 0 rgba(27,24,72,.12),0 8px 24px rgba(27,24,72,.06)}
.card.go{background:linear-gradient(135deg,#1B1848,#3A3690);color:#fff;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.card.go h2{font-size:clamp(1.5rem,3.5vw,2rem);margin:0 0 .2rem}
.card.go p{color:#DAD7FF;margin:0}
.card.warn{box-shadow:none;border:2px dashed rgba(163,38,26,.5);background:transparent}
.muted{color:#4b4877;font-size:.95rem}
.rowx{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.between{justify-content:space-between}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1rem}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:.75rem}
.tile{display:block;text-decoration:none;color:inherit;background:#fff;border-radius:16px;padding:.9rem 1rem;box-shadow:0 1px 0 rgba(27,24,72,.12),0 8px 24px rgba(27,24,72,.06)}
.tile:hover{box-shadow:0 0 0 2px var(--ink)}
.tile b{display:block;font:700 1.5rem/1.1 var(--head)}
.tile span{font-size:.95rem;color:#4b4877}
.b{font:600 1rem/1 var(--head);border:2px solid var(--ink);border-radius:999px;padding:.6rem 1.1rem;background:transparent;color:var(--ink);cursor:pointer;min-height:44px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.b:hover{background:rgba(27,24,72,.08)}
.b.on,.b.main{background:var(--ink);color:#fff}
.b.gold{background:var(--sun);border-color:var(--sun);color:var(--sun-ink);box-shadow:0 3px 0 #C58F00}
.b.danger{border-color:#A3261A;color:#A3261A}
.b.quiet{border-color:transparent;text-decoration:underline;text-underline-offset:.2em;padding-inline:.4rem}
.b.small{padding:.35rem .75rem;min-height:36px;font-size:.9rem}
.b[disabled]{opacity:.45;cursor:default}
.seg{display:inline-flex;background:rgba(27,24,72,.08);border-radius:999px;padding:4px;gap:2px;max-width:100%;overflow-x:auto}
.seg button{font:600 .95rem/1 var(--head);border:0;background:transparent;color:var(--ink);padding:.55rem 1rem;border-radius:999px;cursor:pointer;min-height:40px;white-space:nowrap}
.seg button[aria-selected=true],.seg button[aria-pressed=true]{background:#fff;box-shadow:0 1px 3px rgba(27,24,72,.25)}
.chips{display:flex;gap:.4rem;overflow-x:auto;padding:2px 2px .5rem;margin:0 -2px .5rem;scrollbar-width:thin}
.chips .b{flex:none}
#app label.f{display:grid;gap:.3rem;font-weight:700;font-size:.95rem}
#app input[type=text],#app input[type=time],#app input[type=number],#app input[type=search],#app select{font:400 1.05rem/1.2 var(--body);color:var(--ink);background:#fff;border:2px solid rgba(27,24,72,.35);border-radius:12px;padding:.55rem .7rem;width:100%;min-height:44px;min-width:0}
#app input:focus,#app select:focus{border-color:var(--ink)}
#app input[type=number]{width:4.2rem;text-align:center;padding-inline:.3rem}
.kdot{width:1rem;height:1rem;border-radius:50%;display:inline-block;flex:none}
.kid{border-radius:16px;padding:1rem;background:#FFF8E3;border-top:8px solid var(--kc,#4DA3FF)}
.sw{width:2.1rem;height:2.1rem;border-radius:50%;border:3px solid #fff;cursor:pointer;padding:0;box-shadow:0 0 0 1px rgba(27,24,72,.2)}
.sw.on{box-shadow:0 0 0 3px var(--ink)}
.wday{width:2.6rem;height:2.6rem;padding:0;border-radius:50%}
.job{display:grid;grid-template-columns:auto minmax(0,1fr) max-content;gap:.5rem;align-items:center;padding:.45rem 0;border-top:1px solid rgba(27,24,72,.12)}
.job:first-child{border-top:0}
.job .jctl{display:flex;flex-wrap:nowrap;white-space:nowrap;gap:.35rem;align-items:center;justify-content:flex-end}
.job .jctl>*{flex:none}
.ico{width:2.75rem;height:2.75rem;border-radius:12px;border:0;background:var(--sun);color:var(--sun-ink);display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
.ico svg{width:1.5rem;height:1.5rem}
.icons{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem 0;grid-column:1/-1}
.icons .ico{background:#FFF3D6}.icons .ico.on{background:var(--sun)}
.tog{display:flex;gap:.75rem;align-items:flex-start;padding:.5rem 0;cursor:pointer}
.tog input{width:1.4rem;height:1.4rem;margin:.15rem 0 0;accent-color:var(--ink);flex:none}
.tog span{display:block;font-weight:700}.tog small{display:block;color:#4b4877;font-size:.9rem;font-weight:400}
.badge{display:inline-block;font:600 .85rem/1 var(--head);padding:.3rem .6rem;border-radius:999px;background:var(--ink);color:#fff;white-space:nowrap}
.badge.free{background:rgba(27,24,72,.1);color:var(--ink)}
.badge.paid{background:#1F7A3A}.badge.gift{background:#7A3FA0}.badge.is-paused{background:#A3261A}
.code{font:700 1.6rem/1.2 var(--head);letter-spacing:.08em;-webkit-user-select:all;user-select:all}
.say{min-height:1.4em;font-weight:700;color:#7A3FA0}
table.t{width:100%;border-collapse:collapse;font-size:1rem}
table.t th,table.t td{text-align:left;padding:.45rem .5rem;border-top:1px solid rgba(27,24,72,.12);vertical-align:top}
table.t th{font-family:var(--head);border-top:0}
.scroll{overflow-x:auto}
.mplan{border-radius:16px;padding:1rem;background:#FFF8E3}
.mplan.best{background:linear-gradient(135deg,#FFE08A,#FFC93C)}
.mplan .mprice{font:700 1.8rem/1 var(--head)}
/* admin */
.filters{display:flex;gap:.5rem;overflow-x:auto;padding:2px 2px .6rem;margin:0 -2px .4rem}
.filters button{flex:none;font:600 .95rem/1.1 var(--head);text-align:left;border:0;border-radius:14px;padding:.6rem .9rem;background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 1px 0 rgba(27,24,72,.12)}
.filters button b{display:block;font-size:1.4rem}
.filters button[aria-pressed=true]{background:var(--ink);color:#fff}
details.fam{border-top:1px solid rgba(27,24,72,.12)}
details.fam:first-of-type{border-top:0}
details.fam>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:center;justify-content:space-between;padding:.8rem .2rem;font-family:var(--body)}
details.fam>summary::-webkit-details-marker{display:none}
details.fam>summary::after{content:none}
details.fam>summary .who{font-weight:700;min-width:0;overflow-wrap:anywhere}
details.fam[open]>summary{border-bottom:0}
details.fam .more{padding:0 .2rem 1rem;display:grid;gap:.8rem}
details.fam .box{background:#FFF8E3;border-radius:14px;padding:.8rem}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr);gap:.75rem;padding-top:.5rem}
  .side{position:sticky;top:58px;z-index:6;flex-direction:row;overflow-x:auto;gap:.3rem;padding:.4rem 0;background:#FFF3D6;margin:0 -1rem;padding-inline:1rem;scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side a,.side button{padding:.55rem .8rem;font-size:.95rem;background:#fff}
  .side .sep{display:none}
}
@media (max-width:560px){.job{grid-template-columns:auto minmax(0,1fr)}.job .jctl{grid-column:1/-1;justify-content:flex-start}}

/* the site-wide look for question boxes must not reach the admin list */
details.fam{background:transparent;border-radius:0;padding:0}
details.fam p{font-size:.95rem}

.sup{border:2px solid rgba(27,24,72,.18);border-radius:16px;padding:1rem;background:#FFFBEF}
.sup.is-on{border-color:#1F8A4C;background:#E9F8EE}
.supstate{font:700 .85rem/1 var(--head);padding:.4rem .7rem;border-radius:999px;background:rgba(27,24,72,.1);color:#4b4877;white-space:nowrap}
.sup.is-on .supstate{background:#1F8A4C;color:#fff}
.supwhat{margin:0;font-size:1.05rem}
.superr{margin:.4rem 0 0;color:#A3261A;font-weight:700;font-size:.95rem;min-height:0}
.superr:empty{display:none}