/* Mit abonnement (/konto) and the other server-rendered pages: /log-ind, /konto/slet, /afmeld
   and the /join warning (src/kuppresale/web_pages.py). Concept: a quiet desk. One narrow
   column of paper cards, the thing to decide in bold, forms that look like the site. */

/* Members have a subscription: the header's trial button would only confuse. */
.is-member .site-header__cta{display:none}

/* Notices under the header (server-rendered, so never hidden) */
.konto-notice .notice__inner{align-items:center}
.konto-notice--warn{background:var(--paper);box-shadow:inset 0 -1px 0 var(--line)}
.konto-notice .konto-inline{display:inline-flex}

/* Log ind */
.konto-login{padding-block:clamp(2.5rem,1.5rem + 4vw,5rem) var(--section)}
.konto-login__title{font-size:clamp(2.25rem,1.6rem + 3vw,3.75rem);line-height:1.04;max-width:14em}
.konto-login .lede{margin-top:var(--space-s)}
.konto-providers{display:grid;gap:var(--space-xs);max-width:24rem;margin-top:var(--space-xl)}
/* Google's sign-in button rules: the unaltered "G" on white, a thin grey border, dark text.
   Both providers get the same shape and size (Google must not be less prominent). The two
   colours below are Google's, not ours. */
.konto-provider{display:flex;align-items:center;justify-content:center;gap:.75rem;min-height:56px;padding:.75rem 1.5rem;border-radius:var(--r-pill);background:#FFFFFF;box-shadow:inset 0 0 0 1px #747775;color:var(--ink);font-weight:700;font-size:1.0625rem;text-decoration:none;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.konto-provider img{flex:none;width:20px;height:20px}
.konto-provider:hover{box-shadow:inset 0 0 0 2px var(--ink);transform:translateY(-1px)}
.konto-login__hint{margin-top:var(--space-l);padding-left:var(--space-s);border-left:3px solid var(--mint);max-width:34em}
.konto-login .fine{margin-top:var(--space-l);max-width:34em}

/* Mit abonnement */
.konto{padding-block:clamp(2rem,1rem + 4vw,4rem) var(--section)}
.konto-head h1{font-size:clamp(2.5rem,1.7rem + 3.6vw,4.5rem)}
.konto-card{margin-top:var(--space-l);padding:var(--space-m);border-radius:var(--r-l);background:var(--paper)}
.konto-card>*+*{margin-top:var(--space-s)}
.konto-card h2{font-size:clamp(1.5rem,1.3rem + .9vw,2rem);letter-spacing:-.03em}
.konto-card--end{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.konto-status{font-size:var(--fs-lead);font-weight:700;line-height:1.3}
.konto-card__text{color:var(--muted)}
.konto-actions{--cluster:var(--space-xs)}
.konto-inline{display:inline-flex;margin:0}
.konto-warn{padding:.6rem .9rem;border-radius:var(--r-s);background:var(--cream);box-shadow:inset 3px 0 0 var(--blue)}
.konto-channel{padding-top:var(--space-m);border-top:1px solid var(--line)}
.konto-channel>*+*{margin-top:var(--space-s)}
.konto-channel h3{font-size:var(--fs-h4)}
.konto-form>*+*{margin-top:var(--space-s)}
.konto-check,.konto-radio{display:flex;align-items:center;gap:.6rem;min-height:44px;font-weight:600;cursor:pointer}
.konto-check input,.konto-radio input,.konto-cat input{flex:none;width:1.25rem;height:1.25rem;margin:0;accent-color:var(--blue)}
.konto-check input:disabled+span{color:var(--muted)}
.konto-address{color:var(--muted);overflow-wrap:anywhere}
.konto-addresses,.konto-cats{margin:0;padding:0;border:0;min-width:0}
.konto-addresses legend,.konto-cats legend{padding:0;margin-bottom:var(--space-2xs);font-weight:700}
.konto-radio span{overflow-wrap:anywhere}
.konto-cats__list{display:grid;gap:1px;border-radius:var(--r-m);overflow:hidden;background:var(--line)}
.konto-cat{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:.75rem;row-gap:.1rem;min-height:56px;padding:.6rem .9rem;background:var(--cream);cursor:pointer}
.konto-cat input{grid-row:span 2}
.konto-cat__name{font-weight:700}
.konto-cat__price,.konto-cat__rate{grid-column:2;color:var(--muted);font-size:var(--fs-sm)}
/* A split band ("AirPods … · Apple Watch …") may wrap; .kr would keep it on one line. */
.konto-cat__price{white-space:normal}
.konto-cat:has(input:checked){background:var(--mint-soft)}
@media (min-width:640px){
  .konto-cat{grid-template-columns:auto minmax(0,1fr) auto}
  .konto-cat input{grid-row:auto}
  .konto-cat__price{grid-column:3;text-align:right}
  .konto-cat__rate{grid-column:2/span 2}
}
.konto-facts{display:grid;gap:var(--space-2xs)}
.konto-facts div{display:grid;gap:0 var(--space-s)}
@media (min-width:480px){.konto-facts div{grid-template-columns:minmax(0,9rem) minmax(0,1fr)}}
.konto-facts dt{font-weight:700}
.konto-facts dd{margin:0;overflow-wrap:anywhere}
.konto-subhead{font-size:var(--fs-h4)}
.konto-logins{display:grid;gap:0;margin:0;padding:0}
/* Phones: name over state, the button to the right; wider: one line per login. */
.konto-login-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--space-s);row-gap:.1rem;padding-block:var(--space-xs);border-top:1px solid var(--line)}
.konto-login-row__name{grid-column:1;font-weight:700}
.konto-login-row__state{grid-column:1;color:var(--muted);overflow-wrap:break-word}
.konto-login-row>form,.konto-login-row>.btn{grid-column:2;grid-row:1/span 2}
.konto-login-row__note{grid-column:1/-1;margin-top:var(--space-2xs)}
@media (min-width:640px){
  .konto-login-row{grid-template-columns:7rem minmax(0,1fr) auto}
  .konto-login-row__name,.konto-login-row__state{grid-row:1}
  .konto-login-row__state{grid-column:2}
  .konto-login-row>form,.konto-login-row>.btn{grid-column:3;grid-row:1}
}
.konto-login-row button:disabled{opacity:.5;cursor:not-allowed;transform:none}
.konto-danger{--btn-bg:var(--ink);--btn-fg:var(--cream)}
.konto-danger:hover{--btn-bg:var(--blue-deep)}
@media (min-width:800px){
  .konto-card{padding:var(--space-l)}
}

/* Single-message pages: /konto/slet, /afmeld, the /join warning */
.konto-single{padding-block:clamp(2.5rem,1.5rem + 4vw,5rem) var(--section)}
.konto-single h1{font-size:clamp(2.25rem,1.6rem + 3vw,3.75rem);line-height:1.04}
.konto-single .lede{margin-top:var(--space-s)}
.konto-single .konto-warn,.konto-single .konto-card__text,.konto-single .fine{margin-top:var(--space-s)}
.konto-single .konto-actions{margin-top:var(--space-l)}
.konto-saved{margin:0;font-weight:600;color:var(--ink)}

/* Member filters: the list on /konto (#filtre) and the form on /konto/filtre */
.konto-filters{padding-top:var(--space-s)}
.konto-filters>*+*{margin-top:var(--space-xs)}
.konto-filter-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.konto-filter-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--space-s);row-gap:.1rem;padding-block:var(--space-xs);border-top:1px solid var(--line)}
.konto-filter-row__name{grid-column:1;font-weight:700}
.konto-filter-row__text{grid-column:1;color:var(--muted);font-size:var(--fs-sm);overflow-wrap:anywhere}
.konto-filter-row>.btn{grid-column:2;grid-row:1/span 2}
.konto-back{margin-bottom:var(--space-xs);font-weight:600}
.konto-fieldset{margin:0;padding:0;border:0;min-width:0}
.konto-fieldset legend{padding:0;margin-bottom:var(--space-2xs);font-weight:700}
.konto-fieldset>*+*{margin-top:var(--space-2xs)}
.konto-field{display:grid;gap:.35rem;font-weight:700}
.konto-field .fine{font-weight:400}
.konto-price{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xs)}
.konto-input{width:100%;min-height:48px;padding:.6rem .9rem;border:0;border-radius:var(--r-s);background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:inherit;font-weight:400}
.konto-input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (min-width:640px){
  .konto-types{grid-template-columns:repeat(2,minmax(0,1fr))}
  .konto-types .konto-cat{grid-template-columns:auto minmax(0,1fr)}
}