/* web/css/ui.css — components in the EcoPower Framer look: white rounded cards, pill buttons and nav, chips, fields, row lists, tables, .lg (liquidGL target). */
.glass,.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-card)}
.glass-strong,.toast{background:var(--s2);border:1px solid var(--line)}
.toast{box-shadow:var(--shadow-menu)}
.toast.lg{background:var(--s2);-webkit-backdrop-filter:none;backdrop-filter:none}
.top,.tabs,.lg{background:var(--bar-bg);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%)}
/* edge bars keep one border (the screen-facing edges stay open); .x.lg outranks the shorthand above */
.top.lg{border-width:0 0 1px}.tabs.lg,.cam-bar.lg{border-width:1px 0 0}
@media (min-width:641px){.tabs.lg{border-width:0 0 1px}}
.banner,.err{background:var(--warn-bg);border:1px solid var(--warn-line)}
.err{background:var(--err-bg);border-color:var(--err-line)}
.rule,.flags li{background:var(--s2)}
/* liquid mode: the lens supplies blur and refraction, CSS only adds the dye */
html:not(.glass-css) .lg:not([data-lg-css]){background:var(--lg-tint);-webkit-backdrop-filter:none;backdrop-filter:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .top,.tabs,.lg,.cam-bar{background:var(--bg)}
}
.chip{--chip:var(--fg-muted);display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:99px;font-size:13px;font-weight:600;color:var(--chip);
  background:color-mix(in srgb, var(--chip) 16%, var(--s1))}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--chip)}
.chip.open{--chip:var(--info)}.chip.accepted,.chip.done{--chip:var(--elev)}.chip.confirmed{--chip:var(--low)}
.chip.disputed,.chip.rejected,.chip.overdue{--chip:var(--high-dot)}
button,.btn,select,input,textarea{font:inherit;min-height:44px;border-radius:var(--radius-sm);border:1px solid var(--field-border);
  background:var(--s1);color:var(--fg);padding:8px 12px;transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
button,.btn{background:var(--s1);font-weight:600;border-radius:999px;padding:8px 20px;border-color:var(--line)}
button:hover:not(:disabled),.btn:hover{background:var(--s2)}
textarea{min-height:80px}
button:active,.btn:active{transform:scale(.97)}
button.primary,.btn.primary{background:var(--accent-fill);color:#fff;border-color:transparent}
button.primary:hover:not(:disabled),.btn.primary:hover{background:var(--accent-fill-hover)}
button.link{border:0;background:none;color:var(--accent);padding:4px 8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#view:focus-visible{outline:none}                    /* router focuses the view container on navigation; it is not an interactive control */
input::placeholder,textarea::placeholder{color:var(--fg-muted)}
.sub{background:var(--s1);border:1px solid var(--line);border-radius:26px;padding:4px;gap:4px}
.sub a{border:0;background:none;color:var(--fg-muted);border-radius:999px;transition:background var(--dur-fast) var(--ease)}
.sub a.on{background:var(--s2);color:var(--accent);font-weight:700}
.list{background:var(--s1);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:0 0 16px}
.list>.card{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;margin:0;padding:16px}
.list>.card:last-child{border-bottom:0}
.list>.card:focus-visible{outline-offset:-2px}   /* .list clips overflow: keep the ring inside the row */
.empty+.btn{display:flex;width:max-content;margin:0 auto}
.list>a.card:hover{background:var(--s2)}
.list>.card.hl{box-shadow:inset 3px 0 0 var(--high-dot)}
.list>.tasklink{display:block;position:relative;padding-right:48px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.chev{color:var(--fg-muted);position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.avatar{min-width:44px;min-height:44px;width:44px;padding:0;border:0;border-radius:50%;background:none;font-size:13px;font-weight:700;color:#fff;position:relative;isolation:isolate}
.avatar::before{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--accent-fill);z-index:-1}
.avatar:hover:not(:disabled){background:none}
.acct{margin-left:auto}
.menu{position:fixed;inset:auto 12px auto auto;top:calc(var(--top-h) + 4px);margin:0;min-width:220px;background:var(--s2);color:var(--fg);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-menu);padding:8px}
.menu p{margin:0;padding:2px 8px}.menu-name{font-weight:600}.menu-role{margin-bottom:6px!important}
.menu-item{width:100%;justify-content:flex-start;gap:8px;border:0;text-align:left}
.menu-inline .avatar{display:none}
.menu-inline .menu{position:static;display:flex;align-items:center;gap:8px;min-width:0;background:none;border:0;box-shadow:none;padding:0}
.menu-inline .menu-item{width:auto;white-space:nowrap}
.menu-inline .menu-role{display:none}
.empty{text-align:center;padding:32px;color:var(--fg-muted)}
.empty .ic{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.5}.empty p{margin:8px 0 0}
table{border-collapse:separate;border-spacing:0;font-size:14px}
th{position:sticky;top:var(--top-h);background:var(--s2);z-index:1}
td,th{border-bottom:1px solid var(--line)}
/* Framer pieces: arrow pill (.go). Login rows and initials live in phone.css. */
button.primary,.btn.primary,button.big{border-radius:999px}
.btn.go{gap:2px;padding:0;border:0;background:none;color:#fff;min-height:44px}
.btn.go:hover{background:none}
.btn.go>span,.btn.go>i{display:inline-flex;align-items:center;min-height:44px;border-radius:999px;background-color:var(--accent-fill);transition:background-color var(--dur-fast) var(--ease)}
.btn.go>span{padding:0 22px}
.btn.go>i{width:44px;justify-content:center;background-image:var(--arrow);background-repeat:no-repeat;background-position:center;background-size:18px}
.btn.go:hover>span,.btn.go:hover>i{background-color:var(--accent-fill-hover)}