/* Billy presentation only; controllers and storage remain in app.mjs. */
:root{color:#1c2933;background:#fafaf8;--green:#984c34;--muted:#566371;--line:#dce1e2}
*,*::before,*::after{letter-spacing:0!important}
body{padding-bottom:0;line-height:1.5}
body :is(h1,h2,h3,label,p){overflow-wrap:anywhere}
header,main,footer{max-width:1280px;padding:24px 40px}
header{border-bottom:1px solid var(--line);min-height:96px}
header a{min-height:44px;display:inline-flex;align-items:center}
.brand{font-size:24px;color:#202c32}.brand>img{border-radius:8px}
.hero{padding:22px 0 32px;align-items:flex-start}
.hero h1{font-size:48px;line-height:1.1;margin:8px 0 12px;color:#1c2933;font-weight:550}
.hero .eyebrow,.hero-art,.step{display:none}
.hero p{margin:8px 0}.hero #accountLink{min-height:44px;display:inline-flex;align-items:center;font-weight:600}
.layout{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.panel{border:0;border-radius:0;padding:0;background:transparent;box-shadow:none;min-width:0}
.panel-title h2{font-size:22px;color:#202c32;font-weight:600}
.entry{padding:24px;background:#f5ebe2;border-top:3px solid #984c34}
.collection{background:#fff;border-top:3px solid #984c34;padding:24px 26px 8px}
.collection>.topline{padding-bottom:18px;border-bottom:1px solid var(--line)}
.entry form{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:20px}
label{font-size:13px;color:#37464c;font-weight:500}
input,select,textarea{background:#fff;color:#202c32;border-color:#bbc5c8;min-height:44px;font-size:14px}
button,.import,.record .actions button{min-height:44px;font-size:14px;border-radius:6px;padding:10px 14px}
button.secondary,.import{background:#fff;color:#34494f;border:1px solid #bbc5c8}
button:disabled{opacity:.6}button:hover:not(:disabled){filter:brightness(.94)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,.import:focus-within{outline:3px solid #256b83;outline-offset:3px}
.upload{background:transparent;border:0;border-bottom:1px solid #decabc;border-radius:0;padding:16px 0;margin-top:20px}
.upload-icon{display:none}.upload-label{text-align:left;justify-items:start}.upload .actions{justify-content:flex-start}
.upload-label input{min-height:44px}.upload strong{color:#34494f}
.search-label{margin:20px 0 8px}
summary{min-height:44px;align-content:center;cursor:pointer;font-size:14px}
.collection>details{border-bottom:1px solid var(--line);padding-bottom:8px}
.filters{padding:8px 0}.topline{gap:8px}#count{font-variant-numeric:tabular-nums}
.record{position:relative;padding:22px 0 22px 62px;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:start}
.record::before{content:"";position:absolute;left:0;top:24px;width:42px;height:48px;border:1px solid #decabc;border-radius:7px;background:#fff9f3 url("billy.svg") center/30px 30px no-repeat}
.record h3{grid-column:1;grid-row:1;font-size:19px;line-height:1.4;margin:0 0 6px;color:#202c32;text-transform:none}
.record>.pill{grid-column:2;grid-row:1;align-self:center}
.record>.muted,.record>.actions,.record>.detail{grid-column:1/-1}
.record .muted{overflow-wrap:anywhere}.record .actions{gap:8px}
.pill{border:1px solid #dce1e2;border-radius:6px;background:#fff;color:#47555b;font-size:12px;padding:5px 9px;max-width:100%;overflow-wrap:anywhere}
.pill.active{background:#e5f1ec;color:#275744}.pill.soon{background:#fff1cf;color:#72501c;border-left:3px solid #b77e18}
.pill.expired{background:#fae9e7;color:#903c34;border-left:3px solid #ad5146}
.detail{background:#f4f6f6;border-radius:8px;padding:14px 16px}.detail .attachment{min-height:44px;align-items:center}
.empty{min-height:230px;display:grid;align-content:center;justify-items:center;padding:40px 16px}.empty-symbol{color:#984c34}
.collection>.search-label{font-size:12px;font-weight:600}.collection #search{background:#fafbfc}
.record .actions button{background:#fff;color:#566371;border:1px solid #dce1e2}.record .actions button:hover{border-color:#984c34;color:#984c34}
.privacy{background:transparent;border-top:1px solid var(--line);border-radius:0;padding:24px 0}.privacy-icon{display:none}
#message{border-radius:8px;background:#e5f1ec;overflow-wrap:anywhere}#message.error{background:#fae9e7}
.s7-disclosure,.s7-disclosure[open]{border-radius:8px!important;background:#fff!important;box-shadow:none}
.s7-disclosure>summary::before{display:none}.s7-bottom-label{color:var(--muted)}
.s7-apps>nav,.s7-apps>nav>a{border-radius:8px}.s7-apps>summary{min-width:44px;min-height:44px}
.import:focus-within{outline:3px solid #256b83}.muted{color:var(--muted)}
footer{border-top:1px solid var(--line);gap:16px}
[hidden]{display:none!important}
.purchase-toolbar{display:flex;justify-content:flex-end;margin:0 0 20px}
.collection>.search-label{background:#edf3f2;padding:16px;margin:20px 0 0}
.collection>.topline{background:#f5ebe2;padding:16px;margin:-24px -26px 0}
.entry #backToCollection{margin-bottom:20px}
.entry form{max-width:760px}
@media(max-width:650px){.collection>.topline{margin:-20px -16px 0;padding:16px}.purchase-toolbar{justify-content:stretch}.purchase-toolbar button{width:100%}}
@media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}.entry{padding-right:0;border-right:0;padding-bottom:28px;border-bottom:1px solid var(--line)}.entry form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){header,main,footer{padding:20px}.hero{overflow:visible;padding:8px 0 24px}.hero h1{font-size:34px}.hero p:not(.eyebrow){max-width:none;font-size:14px}.entry form,.pair,.filters{grid-template-columns:minmax(0,1fr)}.brand span{font-size:22px}.panel-title h2{font-size:20px}.layout{gap:24px}.s7-apps{right:20px}.collection{padding:20px 16px 8px}.record{padding-left:0;grid-template-columns:minmax(0,1fr);gap:4px}.record::before{display:none}.record>.pill{grid-column:1;grid-row:2;justify-self:start}.record .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:8px}.record .actions button:last-child{grid-column:1/-1}.backup{gap:8px}.hero>div{min-width:0;width:100%}}
