/* EV-EL Fair 'n' Share — member pages. A layer on top of site.css: it uses the site's tokens and
   fonts (Claude Design 2026-09-24) and only adds the member components (cards, forms, bars, pills). */
:root{--blue-soft:#E4EFF5;--green-soft:#E6F1EA;--warn:#8F6224;--warn-soft:#F8EBD9;--crit-soft:#F5DEDE;--mono:ui-monospace,SFMono-Regular,Menlo,monospace}
.site-main{background:var(--sand)}
.wrap{max-width:760px;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) 1.25rem 4rem}.wrap--wide{max-width:1180px}
.wrap h1{font-size:clamp(2rem,4.5vw,2.75rem)}.wrap h2{font-size:1.5rem}.wrap h3{font-size:1.15rem}
.card{background:var(--bg);border:1px solid var(--sand-line);border-radius:var(--radius);padding:clamp(1.25rem,3vw,2rem);margin:0 0 1.25rem}
.card h2{margin-top:0}
.flash{border-left:4px solid var(--green);background:var(--green-soft);padding:.8rem 1.1rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:0 0 1.25rem}
.flash--err{border-color:var(--crit);background:var(--crit-soft)}
.field{display:grid;gap:.35rem;margin:0 0 1.1rem}.field label{font-weight:600;font-size:.95rem;color:var(--navy)}.field .hint{color:var(--muted);font-size:.88rem}
.field .err{color:var(--crit);font-size:.9rem}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=datetime-local],select,textarea{width:100%;font:inherit;padding:.75rem .95rem;border:1px solid var(--sand-line);border-radius:var(--radius-sm);background:#fff;color:var(--navy)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
input.code{font-family:var(--mono);font-size:1.6rem;letter-spacing:.4em;text-align:center}
.check{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 .8rem;font-size:.95rem}.check input{margin-top:.35rem;accent-color:var(--navy)}
.btn--small{min-height:40px;padding:0 1.1rem;font-size:.92rem}
.btn--disabled,.btn--disabled:hover{color:#9aa1ad;border-color:#d5d8de;background:transparent;cursor:not-allowed;transform:none}
.btn--danger{background:var(--crit);border-color:var(--crit);color:#fff}.btn--danger:hover{background:#8f2e2e;border-color:#8f2e2e;color:#fff}
.btn--link{background:none;border:none;min-height:0;color:var(--link);padding:0;text-decoration:underline;font-weight:500}.btn--link:hover{background:none;color:var(--link-hover)}
.row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
/* bars */
.bar{margin:0 0 1.5rem}.bar__label{display:flex;justify-content:space-between;gap:1rem;font-weight:600;color:var(--navy);margin-bottom:.4rem}.bar__label span:last-child{font-variant-numeric:tabular-nums}
.bar__track{position:relative;height:22px;background:var(--sand);border:1px solid var(--sand-line);border-radius:999px;overflow:visible}
.bar__fill{height:100%;background:var(--accent);border-radius:999px;transition:width .3s}.bar__fill--green{background:var(--green)}
.bar__mark{position:absolute;top:-6px;width:2px;height:34px;background:var(--navy)}.bar__mark span{position:absolute;top:36px;left:50%;transform:translateX(-50%);font-size:.75rem;white-space:nowrap;color:var(--muted)}
.bar__note{margin-top:2.4rem;font-size:.95rem}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin:0 0 1rem}.stat div{background:var(--sand);border-radius:var(--radius-sm);padding:.9rem}.stat b{display:block;font-family:var(--head);font-size:1.5rem;color:var(--navy);font-variant-numeric:tabular-nums}.stat small{color:var(--muted)}
.pill{display:inline-block;font-size:.8rem;font-weight:600;border-radius:999px;padding:.15rem .65rem;background:var(--blue-soft);color:var(--link)}.pill--green{background:var(--green-soft);color:var(--green-ink)}.pill--warn{background:var(--warn-soft);color:var(--warn)}.pill--crit{background:var(--crit-soft);color:var(--crit)}.pill--muted{background:var(--sand);color:var(--muted)}
.code{font-family:var(--mono);font-size:1.4rem;letter-spacing:.15em;background:var(--blue-soft);color:var(--navy);padding:.3rem .7rem;border-radius:var(--radius-sm);display:inline-block}
/* tables */
.tbl{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.93rem;background:#fff}th,td{text-align:left;padding:.55rem .65rem;border-bottom:1px solid var(--sand-line);vertical-align:top}th{background:var(--paper);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.muted{color:var(--muted)}.small{font-size:.88rem}.mono{font-family:var(--mono);font-size:.85rem}
.grid2{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
details summary{cursor:pointer;font-weight:600;color:var(--link)}
textarea{min-height:4.5rem}

/* ---- Member side, Claude Design round 3 (2026-09-26): Min side, code step, Velkommen, Virksomhed, Indstillinger ---- */
.mb{background:var(--sand)}
.mb-tabs{background:var(--sand);border-bottom:1px solid var(--sand-line)}
.mb-tabs__inner{display:flex;align-items:center;gap:.4rem 1.75rem;flex-wrap:wrap;padding-block:.75rem}
.mb-tabs a{color:var(--navy);text-decoration:none;font-weight:500;padding:.35rem 0;border-bottom:2px solid transparent}
.mb-tabs a[aria-current=page]{font-weight:600;border-bottom-color:var(--navy)}
.mb-tabs a:hover{border-bottom-color:var(--sand-line)}
.mb-tabs form{margin-left:auto}
.mb-flash-wrap{padding-top:1.25rem}.mb-flash-wrap .flash{margin:0}
.mb-head{padding:clamp(1.75rem,4vw,2.5rem) 0 clamp(1.25rem,3vw,2.25rem)}
.mb-head__inner{display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem 1.5rem;flex-wrap:wrap}
.mb-head h1{font-size:clamp(2rem,5vw,3rem);margin:0 0 .35rem;overflow-wrap:anywhere}
.mb-head__lead{margin:0;font-size:1.06rem;color:var(--text)}
.mb-updated{margin:0;font-size:.85rem;color:var(--muted)}
.mb-body{padding-bottom:clamp(2rem,5vw,3.5rem)}
.mb-grid,.mb-grid2{display:grid;gap:1.5rem;margin-bottom:1.5rem}
@media (min-width:960px){.mb-grid{grid-template-columns:2.25fr 1fr}}
@media (min-width:760px){.mb-grid2{grid-template-columns:1fr 1fr}}
.mb-grid2:last-child,.mb-grid:last-child{margin-bottom:0}
.mb-stack{display:grid;gap:1.5rem;align-content:start}
.mb-card{background:var(--bg);border:1px solid var(--sand-line);border-radius:var(--radius);padding:clamp(1.25rem,3vw,2rem);min-width:0}
.mb-card__top{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem .75rem;flex-wrap:wrap}
.mb-kicker{margin:0;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.mb-kicker--rows{margin:1.1rem 0 .1rem}
.mb-label{margin:1.5rem 0 .75rem;font-size:.9rem;font-weight:600;color:var(--navy)}
.mb-h3{font-size:1.35rem;margin:0 0 .6rem}
.mb-sub{margin:.65rem 0 0;font-size:.9rem;line-height:1.55;color:var(--text)}
.mb-note{margin:.85rem 0 0;font-size:.95rem;line-height:1.55;color:var(--text)}
.mb-big{margin:.6rem 0 1.1rem;font-family:var(--head);font-size:clamp(2.25rem,5vw,2.75rem);line-height:1;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.mb-big span{font-size:1.1rem;font-weight:600;color:var(--muted)}
.mb-big--green{color:var(--green-ink)}.mb-big--green span{color:var(--green-ink)}
/* level + discount "equation" */
.mb-level{display:flex;align-items:center;gap:.5rem .8rem;flex-wrap:wrap;margin-top:1rem}
.mb-level__part{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap}
.mb-level__name{font-family:var(--head);font-size:clamp(1.9rem,4vw,2.6rem);line-height:1;font-weight:700;color:var(--navy)}
.mb-level__name--eco{color:var(--green-ink)}
.mb-level__op{font-family:var(--head);font-size:1.9rem;font-weight:700;color:#6F7C92}
.mb-chip{display:inline-flex;align-items:center;min-height:2.3rem;padding:0 .9rem;border-radius:999px;background:var(--green-soft);color:var(--green-ink);font-weight:700;font-size:1rem;white-space:nowrap}
.mb-chip--navy{background:var(--navy);color:#fff}
/* price now + price rows */
.mb-stations{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.6rem}
.mb-station{padding:.85rem 1rem;border-radius:14px;background:var(--sand);min-width:0}
.mb-station p{margin:0}
.mb-station__name{font-size:.88rem;color:var(--muted);margin-bottom:.25rem!important}
.mb-station__price{font-family:var(--head);font-size:clamp(1.75rem,4vw,2.1rem);line-height:1;font-weight:700;color:var(--green-ink)}
.mb-station__price span{font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--muted)}
.mb-station__normal{margin-top:.4rem!important;font-size:.8rem;color:var(--muted)}
.mb-rows{width:100%;border-collapse:collapse;background:transparent;font-size:.92rem}
.mb-rows td{padding:.55rem 0;border-top:1px solid var(--line);border-bottom:0;color:var(--text)}
.mb-rows td.num{padding-left:1rem;font-weight:700;color:var(--navy)}
.mb-fallback{margin-top:1.25rem;padding:1rem 1.1rem;border-radius:14px;background:var(--sand)}
.mb-fallback p{margin:0}.mb-fallback p+p{margin-top:.35rem;font-size:.92rem}
/* voucher code */
.mb-code{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:.6rem}
.mb-code__value{font-family:var(--head);font-size:1.85rem;font-weight:700;letter-spacing:.08em;color:var(--navy);user-select:all;overflow-wrap:anywhere}
.mb-code--large{flex-direction:column;gap:1rem}
.mb-code--large .mb-code__value{font-size:clamp(2.25rem,9vw,4rem);line-height:1;letter-spacing:.1em}
/* meters (bars): the number and a word are always beside the colour */
.mb-pill{display:inline-flex;align-items:center;gap:.35rem;min-height:1.75rem;padding:.1rem .75rem;border-radius:999px;font-size:.84rem;font-weight:600;background:var(--sand);color:var(--navy);white-space:nowrap}
.mb-pill--green{background:var(--green-soft);color:var(--green-ink)}
.mb-meter{position:relative;height:22px;border-radius:999px;background:#E8EAEE;overflow:hidden}
.mb-meter__fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:999px}
.mb-meter__fill--green{background:var(--green)}
.mb-meter__fill--own{background:var(--navy)}
.mb-meter__mark{position:absolute;top:0;bottom:0;width:2px;background:#fff}
.mb-scale{position:relative;height:2.6rem;font-size:.8rem;color:var(--muted)}
.mb-scale span{position:absolute;top:.45rem;line-height:1.3}
.mb-scale__mark{transform:translateX(-50%);text-align:center}
.mb-scale__mark--end{transform:none;text-align:right}
.mb-scale strong{color:var(--navy)}
.mb-legend{display:flex;gap:.4rem 1.25rem;flex-wrap:wrap;margin:.35rem 0 0;font-size:.88rem;color:var(--text)}
.mb-legend span::before{content:"";display:inline-block;width:.75rem;height:.75rem;border-radius:3px;margin-right:.4rem;vertical-align:-1px}
.mb-legend__own::before{background:var(--navy)}.mb-legend__rest::before{background:var(--accent)}
/* charges + drivers tables */
.mb-charges{background:var(--bg);padding:clamp(2rem,5vw,3.5rem) 0}
.mb-charges__head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;margin-bottom:.9rem}
.mb-charges__head h2{margin:0;font-size:clamp(1.5rem,3.5vw,2rem)}
.mb-charges__head .mb-usage{margin:0 0 0 auto;flex-wrap:nowrap}  /* the month list and Hent PDF on one row (feedback 2b092206): the global select{width:100%} pushed the button down */
.mb-usage{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .75rem;margin:0 0 1rem}.mb-usage label{font-weight:600;color:var(--navy)}.mb-usage select{width:auto;min-height:40px;padding:0 .6rem;border:1px solid var(--line,#d9d2c3);border-radius:8px;background:#fff;font:inherit}
.mb-empty{padding:1.25rem 1.4rem;border:1px dashed var(--sand-line);border-radius:var(--radius);background:var(--paper)}
.mb-empty p{margin:0}.mb-empty p+p{margin-top:.35rem;color:var(--text)}
.mb-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--sand-line);border-radius:16px;overflow:hidden;background:#fff;font-size:.93rem;margin-bottom:.75rem}
.mb-table th,.mb-table td{padding:.7rem .85rem;border-bottom:1px solid var(--line);vertical-align:middle}
.mb-table thead th{background:var(--paper);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap}
.mb-table tbody tr:last-child td{border-bottom:0}
.mb-table tfoot th,.mb-table tfoot td{background:var(--paper);font-weight:700;color:var(--navy);border-top:1px solid var(--sand-line);border-bottom:0;text-align:left}
.mb-table tfoot td.num{text-align:right}
@media (min-width:1024px){.mb-table tfoot th{white-space:nowrap}}
.mb-table__when{white-space:nowrap;color:var(--navy);font-weight:500}
.mb-table__saved{color:var(--green-ink);font-weight:600}
.mb-table__inline{display:none}
/* the 8-column charges table needs ~1000 px; below that each charge is a block of rows */
@media (max-width:1023px){
  .mb-table{border:0;border-radius:0;border-top:1px solid var(--line);background:transparent}
  .mb-table thead{display:none} /* each row carries its own labels here */
  .mb-table tbody,.mb-table tfoot{display:block}
  .mb-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem .75rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
  .mb-table th,.mb-table td{padding:0;border:0!important;background:transparent!important;text-align:left}
  .mb-table .num{text-align:right}
  .mb-table__wide{display:none}
  .mb-table__inline{display:inline}
  .mb-table__when{grid-area:1/1;font-weight:700}
  .mb-table__amount{grid-area:1/2;font-weight:700;color:var(--navy)}
  .mb-table__where{grid-area:2/1;font-size:.88rem}
  .mb-table__saved{grid-area:2/2}
  .mb-table__normal{grid-area:3/1;text-align:left!important;font-size:.82rem;color:var(--muted)}
  .mb-table__tag{grid-area:3/2;text-align:right}
  .mb-table tfoot tr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem}
  .mb-table tfoot th{flex-basis:100%}
  .mb-table tfoot td:empty{display:none}
  .mb-table tfoot .mb-table__saved{order:3}
  .mb-table--drivers tbody tr{grid-template-columns:minmax(0,1fr) auto}
  .mb-table--drivers tbody td:first-child{grid-column:1/-1;font-weight:600;color:var(--navy)}
  .mb-table--drivers tbody td:nth-child(3){text-align:left}
  .mb-table--drivers tbody td:nth-child(4){grid-column:1}
  .mb-table--drivers tbody td.mb-table__action{grid-column:2;text-align:right}
  .mb-table--drivers tbody td.mb-table__action:empty{display:none}
  .mb-table--drivers tbody .mb-table__free td{grid-column:1/-1}
  .mb-table--drivers tbody .mb-table__former td:first-child{font-weight:500;color:var(--muted)}
  .mb-table--drivers tbody .mb-table__former td:last-child{grid-column:1/-1}
  .mb-table--drivers tfoot th{flex-basis:auto}
}
/* code step */
.mb-otp{padding:clamp(2rem,6vw,4rem) 0}
.mb-otp__card{max-width:34rem;margin:0 auto;display:grid;gap:1rem}
.mb-otp__card h1{font-size:clamp(1.75rem,4vw,2.1rem);margin:0}
.mb-otp__card .mb-kicker{margin-bottom:-.5rem}
.mb-otp__lead{margin:0;color:var(--text)}.mb-otp__lead strong{white-space:nowrap}
.mb-otp__card .flash{margin:0}
.mb-otp__card form{margin:0}
.mb-otp__card .field{margin:0 0 1rem}
.mb-otp input.code{font-family:var(--head);font-weight:700;font-size:2rem;letter-spacing:.55em;padding-left:1.1rem;text-align:center;border:1.5px solid #DED5C3;border-radius:12px;min-height:4rem}
.mb-otp__submit{width:100%}
.mb-otp__links{display:flex;justify-content:space-between;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;font-size:.95rem}
.mb-otp__links form{margin:0}.mb-otp__links .btn--link{font-weight:600;text-decoration:none}
/* Velkommen */
.mb-welcome{padding:clamp(2.5rem,7vw,4.5rem) 0}
.mb-welcome__inner{max-width:calc(60rem + 2 * var(--gutter));display:grid;gap:1.5rem}
.mb-welcome__head{text-align:center}
.mb-welcome__head h1{font-size:clamp(2.1rem,6vw,3.25rem);margin:1rem 0 .6rem}
.mb-welcome__head p{margin:0 auto;max-width:40rem;font-size:1.1rem}
.mb-welcome__tick{display:inline-flex;align-items:center;justify-content:center;width:4.5rem;height:4.5rem;border-radius:50%;background:var(--green-soft);color:var(--green-ink);font-size:2rem;font-weight:700}
.mb-welcome__code{text-align:center}
.mb-welcome__code .mb-code{align-items:center}
.mb-welcome__actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.mb-warn{padding:.9rem 1rem;border-radius:12px;background:#FFF3DF;border:1px solid #F2DDB8;color:var(--warn);text-align:center}
.mb-warn p{margin:0}
.mb-steps{margin:0;padding-left:1.4rem;display:grid;gap:.5rem;color:var(--text)}
/* Virksomhed */
.mb-driver{margin-top:1.5rem}.mb-driver .mb-sub{margin-bottom:1.1rem}
.mb-driver__form{display:grid;gap:0 1rem}
@media (min-width:760px){.mb-driver__form{grid-template-columns:repeat(3,minmax(0,1fr))}.mb-driver__submit{grid-column:1/-1}}
/* Indstillinger */
.mb-settings{display:grid;gap:1.5rem;max-width:calc(48rem + 2 * var(--gutter))}
.mb-facts{margin:.5rem 0 0;display:grid;gap:.6rem}
.mb-facts div{display:grid;grid-template-columns:minmax(7rem,10rem) minmax(0,1fr);gap:.1rem 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.mb-facts dt{color:var(--muted);font-size:.9rem}.mb-facts dd{margin:0;color:var(--navy);overflow-wrap:anywhere}
@media (max-width:480px){.mb-facts div{grid-template-columns:1fr}}
.mb-switch{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line);cursor:pointer}
.mb-switch__text{display:grid;gap:.1rem}.mb-switch__text strong{color:var(--navy)}.mb-switch__text span{font-size:.88rem;color:var(--muted)}
.mb-switch input{appearance:none;-webkit-appearance:none;flex:none;width:3.1rem;height:1.8rem;border-radius:999px;background:#C9CED8;position:relative;cursor:pointer;margin:0;transition:background .15s}
.mb-switch input::after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.4rem;height:1.4rem;border-radius:50%;background:#fff;transition:transform .15s}
.mb-switch input:checked{background:var(--green-ink)}
.mb-switch input:checked::after{transform:translateX(1.3rem)}
.mb-settings form .btn{margin-top:.75rem}
.mb-delete__box{border:1px solid #E7C3C3;background:#FBF1F1;border-radius:14px;padding:1.1rem 1.2rem}
.mb-delete__box h3{margin:0 0 .4rem;font-size:1.2rem}
.mb-delete__box p{margin:0 0 .8rem}
/* help line */
.mb-help{background:var(--sand);border-top:1px solid var(--sand-line)}
.mb-help__inner{display:flex;justify-content:center;flex-wrap:wrap;gap:.35rem 1.75rem;padding-block:1.25rem;font-size:.95rem;color:var(--text);text-align:center}
.mb-help strong{color:var(--navy)}
.mb-table__action{text-align:right;white-space:nowrap}
.mb-table__free td{font-style:italic}
.mb-remove{margin-bottom:1rem}
/* Share card on Min side and the profile form */
.mb-share{margin-top:1.5rem}
.mb-share form{display:flex;gap:.5rem 1rem;flex-wrap:wrap;align-items:flex-end;margin-top:.75rem}
.mb-share .field{margin:0;flex:1 1 14rem}
.mb-profile{display:grid;gap:0 1rem;align-items:start}
@media (min-width:640px){.mb-profile{grid-template-columns:1fr 1fr}.mb-profile .mb-profile__wide{grid-column:1/-1}}
.mb-profile h3{font-size:1.05rem;margin:.75rem 0 .5rem}