/* Bureo shell M1 · Settings on the kit (app/m1-settings.js puts the classes on). Closest owner reference: "hiring" (m1-origin.md:
   profile card, pill tabs, pill rows) + offloop (air). Kit tokens only; scoped under html.b-m1, so the classic layout is untouched.
   Two reusable patterns live here until they are folded into the kit (kit-extra.css): the certificate card (.k-cert) and the
   step guide (.k-guide). Markup for both: see the comments at their rules. */

/* ---------- the certificate card · reusable ----------
   <article class="k-card2 k-cert">                                   (or a .k-cert block inside a card)
     <div class="k-c2h"><b>Partner certificate</b><span class="k-spill k-ok"><i></i>Valid</span></div>
     <div class="k-cert-h"><span class="k-logo"><img src="(provider logo)" alt=""></span>   (else a neutral initial: <span class="k-logo">G</span>)
       <div class="k-cert-t"><b>Gestoría Ficticia SL · NIF B12345674</b><span>Valid until 2 Nov 2026 · 21 days left</span></div></div>
     <div class="k-cert-life k-warn" style="--p:.06"><i></i></div>      (optional: share of the validity left; k-warn from 30 days)
     <p class="k-banner k-banner--warn" role="status">Expires on 2 Nov 2026. Upload the renewed one.</p>
     <div class="k-cert-act"><button class="k-btn k-pri">Upload the renewed one</button><button class="k-btn k-sm">Remove</button></div>
     <label class="k-field"><span>Certificate file (.p12)</span><input class="k-input" type="file"></label>
     <p class="k-cert-note">(lock svg)<span>Stored sealed; used only to sign what you approve.</span></p>
   </article> */
html.b-m1 .k-cert{display:flex;flex-direction:column;gap:10px;min-width:0}
html.b-m1 .k-cert-h{display:flex;align-items:center;gap:12px;min-width:0;background:var(--ka-canvas);border-radius:16px;padding:12px 14px}
html.b-m1 .k-cert-h>.k-logo{width:40px;height:40px;border-radius:12px;font-size:var(--k-t-sm)}
html.b-m1 .k-cert-t{flex:1;min-width:0}
html.b-m1 .k-cert-t b{display:block;font-size:var(--k-t-sm);font-weight:500;overflow-wrap:anywhere}
html.b-m1 .k-cert-t span,html.b-m1 .k-cert-t small{display:block;font-size:var(--k-t-xs);color:var(--k-text-3)}
html.b-m1 .k-cert-life{height:6px;border-radius:999px;background:var(--ka-soft);overflow:hidden}
html.b-m1 .k-cert-life i{display:block;height:100%;width:calc(var(--p,1) * 100%);border-radius:inherit;background:var(--k-ok)}
html.b-m1 .k-cert-life.k-warn i{background:var(--k-warn)}
html.b-m1 .k-cert-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
html.b-m1 .k-cert-note{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--k-t-xs);color:var(--k-text-3)}
html.b-m1 .k-cert-note svg{flex:none}

/* ---------- the step guide · reusable ----------
   <div class="k-guidebox">                                           (or <details class="k-guidebox" open><summary>How to …</summary>)
     <p class="k-eyebrow">Getting ready</p>
     <ol class="k-guide">
       <li class="k-done"><span class="k-gn">(check svg or 1)</span><div><b>Get the certificate</b><p>One line.</p></div></li>
       <li aria-current="step"><span class="k-gn">2</span><div><b>Upload it here</b><p>One line. <a class="k-lnk" href="…">Open the AEAT ↗</a></p></div></li>
       <li><span class="k-gn">3</span><div><b>Next step</b><p>One line.</p></div></li>
     </ol></div>
   done = soft green tick, current = a soft grey number (HQ 19: no lime here, the menu and the view keep it), next = a quiet outlined number; a hairline joins them.
   The body may be a <span> with plain text (Spain 7's gateway steps) instead of the <div><b><p>. */
html.b-m1 .k-guidebox{display:flex;flex-direction:column;gap:10px;background:var(--ka-canvas);border-radius:16px;padding:12px 14px;min-width:0}
html.b-m1 .k-guidebox .k-eyebrow{font-size:var(--k-t-cap);margin:0}
html.b-m1 .k-guide{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;border:0}
html.b-m1 .k-guide>li{position:relative;display:flex;gap:12px;align-items:flex-start;margin:0;padding:0 0 12px;font-size:var(--k-t-md);line-height:1.45;color:var(--k-text)}
html.b-m1 .k-guide>li:last-child{padding-bottom:0}
html.b-m1 .k-guide>li::before{content:"";position:absolute;left:11.5px;top:28px;bottom:4px;width:1px;background:var(--ka-soft)}
html.b-m1 .k-guide>li:last-child::before{display:none}
html.b-m1 .k-guide .k-gn{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:var(--k-t-xs);font-weight:600;font-variant-numeric:tabular-nums;background:var(--ka-card);color:var(--k-text-3);box-shadow:inset 0 0 0 1px var(--ka-soft)}
html.b-m1 .k-guide>li.k-done .k-gn{background:var(--k-ok-soft);color:var(--k-ok-ink);box-shadow:none}
html.b-m1 .k-guide>li[aria-current] .k-gn{background:var(--ka-soft);color:var(--k-text);box-shadow:none}
html.b-m1 .k-guide>li>div,html.b-m1 .k-guide>li>span:not(.k-gn){flex:1;min-width:0;padding-top:2px;overflow-wrap:anywhere}
html.b-m1 .k-guide b{display:block;font-weight:500}
html.b-m1 .k-guide b small{font-weight:400}
html.b-m1 .k-guide p{margin:1px 0 0;font-size:var(--k-t-xs);color:var(--k-text-2)}
html.b-m1 .k-guide>li.k-done{color:var(--k-text-2)}
html.b-m1 .k-guide>li:not(.k-done):not([aria-current])>span:not(.k-gn){color:var(--k-text-2)}
html.b-m1 .k-guide .k-lnk{font-size:var(--k-t-xs);white-space:nowrap}
html.b-m1 details.k-guidebox{border:0;overflow:visible}
html.b-m1 details.k-guidebox>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:0;margin:0;font-size:var(--k-t-md);font-weight:500;color:var(--k-text);cursor:pointer}
html.b-m1 details.k-guidebox>summary::-webkit-details-marker{display:none}
html.b-m1 details.k-guidebox>summary::after{content:"";width:7px;height:7px;margin-left:auto;border-right:1.6px solid var(--k-text-3);border-bottom:1.6px solid var(--k-text-3);transform:rotate(45deg) translateY(-2px);flex:none}
html.b-m1 details.k-guidebox[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
html.b-m1 details.k-guidebox>.k-guide{margin-top:12px}

/* ---------- the Settings screen: section tabs, cards, rows (app/m1-settings.js) ---------- */
html.b-m1 #main>section.k-m1s:not([hidden]){display:flex;flex-direction:column;gap:10px;min-width:0}
html.b-m1:not(.m1-chrome) #main>section.k-m1s[data-m1stab="general"]>article:not([data-m1set="general"]),
html.b-m1:not(.m1-chrome) #main>section.k-m1s[data-m1stab="plan"]>article:not([data-m1set="plan"]),
html.b-m1:not(.m1-chrome) #main>section.k-m1s[data-m1stab="people"]>article:not([data-m1set="people"]),
html.b-m1:not(.m1-chrome) #main>section.k-m1s[data-m1stab="certs"]>article:not([data-m1set="certs"]){display:none!important}
html.b-m1 .k-m1s-tabs{display:flex;gap:2px;padding:2px 0 2px;overflow-x:auto;scrollbar-width:none;flex:none}
html.b-m1 .k-m1s-tabs::-webkit-scrollbar{display:none}
html.b-m1 .k-m1s-tabs[hidden]{display:none}
html.b-m1 .k-m1s-tabs button{flex:none;min-height:32px;padding:5px 13px;font-size:var(--k-t-md);white-space:nowrap;cursor:pointer}
/* the card: the study's .card2 (radius 20, soft shadow) with the settings' air */
html.b-m1 #main>section.k-m1s>article.k-card2{margin:0;padding:14px 16px 16px;gap:10px;border:0;border-radius:20px;background:var(--ka-card);box-shadow:0 10px 30px -24px rgba(20,22,30,.45);color:var(--k-text)}
html.b-m1 #main>section.k-m1s>article.k-card2[style*="display: none"]{display:none!important}
html.b-m1 .k-m1s .k-c2h{padding-right:0;flex-wrap:wrap;row-gap:6px}
html.b-m1 .k-m1s .k-c2h h2,html.b-m1 .k-m1s #m1Theme>h2,html.b-m1 .k-m1s #m1Access>h2,html.b-m1 .k-m1s #gwNotifH{margin:0;font-size:var(--k-t-sm);font-weight:500;letter-spacing:-.01em;line-height:1.4}
html.b-m1 .k-m1s #m1Theme>h2,html.b-m1 .k-m1s #gwNotifH{min-height:30px;display:flex;align-items:center}
html.b-m1 .k-m1s .gw-h3{margin:8px 0 0;padding-top:12px;border-top:1px solid var(--ka-soft);font-size:var(--k-t-md);font-weight:500}
html.b-m1 .k-m1s .gw-sub,html.b-m1 .k-m1s .gw-empty{margin:0;font-size:var(--k-t-sm);line-height:1.5;color:var(--k-text-3)}
html.b-m1 .k-m1s .gw-empty{color:var(--k-text-2)}
html.b-m1 .k-m1s .gw-sub:not(.muted):not(.k-muted):not(.k-banner){color:var(--k-text-2)}
html.b-m1 .k-m1s .gw-err{margin:0;font-size:var(--k-t-sm);color:var(--k-warn-ink)}
html.b-m1 .k-m1s .gw-err[hidden]{display:none}
html.b-m1 .k-m1s .k-banner{margin:0;font-size:var(--k-t-sm);line-height:1.45;color:var(--k-text)}
/* Plan: the plan line, the credits as the study's big light numeral */
html.b-m1 .k-m1s #gwSetPlan>p:not([class]){margin:0!important;font-size:var(--k-t-sm)!important;color:var(--k-text)}
html.b-m1 .k-m1s .gw-nums{margin:4px 0 0;gap:28px}
html.b-m1 .k-m1s .gw-nums small{font-size:var(--k-t-xs);color:var(--k-text-2)}
html.b-m1 .k-m1s .gw-nums b{font-size:34px;font-weight:300;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums}
html.b-m1 .k-m1s .gw-cta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 0}
html.b-m1 .k-m1s .k-check{min-height:32px;font-size:var(--k-t-sm);color:var(--k-text-2);gap:8px}
html.b-m1 .k-m1s .k-check input{width:16px;height:16px;margin:0;accent-color:var(--k-text)}
/* buttons: the kit's pill; the primary is the view's one black pill */
html.b-m1 .k-m1s .k-btn{min-height:36px;padding:8px 16px;font-size:var(--k-t-sm);font-weight:500;line-height:1.2;border:1px solid var(--k-line-strong);background:var(--ka-card);color:var(--k-text);border-radius:var(--k-r-pill);box-shadow:none;flex:none;cursor:pointer}
html.b-m1 .k-m1s .k-btn.k-sm{min-height:32px;padding:5px 12px;font-size:var(--k-t-sm)}
html.b-m1 .k-m1s .k-btn.k-pri{background:var(--k-text);color:var(--ka-card);border-color:transparent}
html.b-m1 .k-m1s .k-btn:hover{border-color:var(--k-text-3)}
html.b-m1 .k-m1s .k-btn.k-pri:hover{opacity:.88}
html.b-m1 .k-m1s .k-btn:disabled{opacity:.45;cursor:default}
html.b-m1 .k-m1s .k-btn[hidden]{display:none}
/* status: the kit's dot pills (the classic chip colours and its soft dot off) */
html.b-m1 .k-m1s .k-spill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 9px 3px 7px;font-size:var(--k-t-cap);font-weight:500;line-height:1.4;background:var(--ka-canvas);color:var(--k-text-2);border:1px solid var(--ka-soft);white-space:nowrap;flex:none}
html.b-m1 .k-m1s .k-spill::before{content:none}
/* rows: the menu's row look (k-mi) on hairlines, with the neutral initial */
html.b-m1 .k-m1s .gw-list{display:flex;flex-direction:column;gap:0;margin:0}
html.b-m1 .k-m1s .k-m1s-row{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin:0;padding:8px 0;border:0;border-top:1px solid var(--ka-soft);border-radius:0;background:none;cursor:default;color:var(--k-text)}
html.b-m1 .k-m1s .gw-list>.k-m1s-row:first-child{border-top:0}
html.b-m1 .k-m1s .k-m1s-row:hover{border-color:var(--ka-soft)}
html.b-m1 .k-m1s .k-m1s-row .t,html.b-m1 .k-m1s .k-cert-h .t{flex:1;min-width:0}
html.b-m1 .k-m1s .k-m1s-row .t b{display:block;font-size:var(--k-t-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.b-m1 .k-m1s .k-m1s-row .t span{display:block;font-size:var(--k-t-xs);color:var(--k-text-3);overflow-wrap:anywhere}
html.b-m1 .k-m1s .k-cert-h{border:0;cursor:default;width:100%;margin:0}
html.b-m1 .k-m1s .k-cert-h:hover{border:0}
/* the ES partner block inside the VERI*FACTU card: its own section on a hairline */
html.b-m1 .k-m1s .gw-es-partner.k-cert{margin-top:6px!important;padding-top:14px;border-top:1px solid var(--ka-soft)}
html.b-m1 .k-m1s .gw-es-partner .gw-h3{margin-top:4px}
/* fields: kit-extra's k-field + k-input over the classic .field */
html.b-m1 .k-m1s .gw-f{display:flex;flex-direction:column;gap:10px;margin:2px 0 0!important}
html.b-m1 .k-m1s .gw-f .form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
html.b-m1 .k-m1s .k-field{display:flex;flex-direction:column;gap:6px;margin:0;font-size:var(--k-t-sm);color:var(--k-text)}
html.b-m1 .k-m1s .k-field>span{margin:0;font-size:var(--k-t-sm);font-weight:500;color:var(--k-text)}
html.b-m1 .k-m1s .k-input{width:100%;min-height:42px;margin:0;padding:0 12px;border:1px solid var(--ka-soft);border-radius:14px;background:var(--ka-card);color:var(--k-text);font:inherit;font-size:var(--k-t-sm);box-sizing:border-box}
html.b-m1 .k-m1s .k-input:focus{outline:none;border-color:var(--k-text);box-shadow:0 0 0 3px var(--ka-soft)}
html.b-m1 .k-m1s .k-input[type=file]{padding:5px 6px;font-size:var(--k-t-sm);color:var(--k-text-2)}
html.b-m1 .k-m1s .k-input[type=file]::file-selector-button{margin-right:10px;border:1px solid var(--k-line-strong);background:var(--ka-canvas);color:var(--k-text);border-radius:999px;padding:5px 12px;font:inherit;font-size:var(--k-t-sm);font-weight:500;cursor:pointer}
html.b-m1 .k-m1s select.k-input{padding-right:36px}
html.b-m1 .k-m1s .acts{position:static;display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;padding:0;background:none;z-index:auto}
html.b-m1 .k-m1s .acts .k-btn{flex:none}
html.b-m1 .k-m1s a.k-lnk{color:var(--k-text-2)}
/* Appearance: the study's segmented pill (white on grey), not a black one: black stays for the primary */
html.b-m1 .k-m1s #m1Theme .k-segp,html.b-m1 .k-m1s #m1Access .k-segp{max-width:420px;margin:0;border:0}
html.b-m1 .k-m1s #m1Theme .k-segp button,html.b-m1 .k-m1s #m1Access .k-segp button{min-height:32px;padding:6px 10px;border:0;font-size:var(--k-t-sm);color:var(--k-text-3);background:none;white-space:nowrap}
html.b-m1 .k-m1s #m1Theme .k-segp button[aria-pressed="true"],html.b-m1 .k-m1s #m1Access .k-segp button[aria-pressed="true"]{background:var(--ka-card);color:var(--k-text);box-shadow:0 2px 8px -4px rgba(20,22,30,.3)}
html.b-m1[data-theme="dark"] .k-m1s #m1Theme .k-segp button[aria-pressed="true"],html.b-m1[data-theme="dark"] .k-m1s #m1Access .k-segp button[aria-pressed="true"]{background:var(--ka-canvas)}
@media (max-width:860px){
  html.b-m1 .k-m1s-tabs button,html.b-m1 .k-m1s .k-btn,html.b-m1 .k-m1s .k-btn.k-sm,html.b-m1 .k-m1s #m1Theme .k-segp button{min-height:var(--k-tap,44px)}
  html.b-m1 .k-m1s-tabs button{padding:5px 8px}   /* the four sections fit a phone without the last one cut («Certificados», es) */
  html.b-m1 .k-m1s .k-input{min-height:var(--k-tap,44px);font-size:var(--k-t-base)}
  html.b-m1 .k-m1s .k-check{min-height:var(--k-tap,44px)}
  html.b-m1 #main>section.k-m1s>article.k-card2{padding:14px 14px 16px}
}
html.b-m1:not(.m1-chrome) .k-m1s .k-m1s-into{display:none}
/* the work panel is a flex column: a page taller than the sheet shrank the head (and the grabber) to a sliver on phone; keep them
   whole on Settings (the same holds for every tall page: shell-m1.css .m1-whead could carry flex:none for all) */
html.b-m1 #app:has(>#main>section.k-m1s:not([hidden]))>#m1WorkHead,html.b-m1 #app:has(>#main>section.k-m1s:not([hidden]))>#m1Grab{flex-shrink:0}
html.b-m1 .k-m1s-tabs{scroll-margin-top:96px}
/* a partner company sees only its own certificate block: no section line above it */
html.b-m1 .k-m1s .gw-es-partner.k-cert:first-child{margin-top:0!important;padding-top:0;border-top:0}

/* ---------- kit controls the screen needs (fold into kit-extra): switch, select, pill toggle ----------
   <input type="checkbox" class="k-m1s-switch">  ·  <select class="k-input k-m1s-sel">  ·  <button class="k-m1s-chip" aria-pressed="true|false|mixed"> */
html.b-m1 .k-m1s input.k-m1s-switch{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:40px;height:24px;margin:0;border:0;border-radius:999px;background:var(--ka-soft);cursor:pointer;vertical-align:middle}
html.b-m1 .k-m1s input.k-m1s-switch::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ka-card);box-shadow:0 2px 6px -2px rgba(20,22,30,.35)}
html.b-m1 .k-m1s input.k-m1s-switch:checked{background:var(--k-text)}
html.b-m1 .k-m1s input.k-m1s-switch:checked::before{left:19px;background:var(--k-accent)}
html.b-m1 .k-m1s input.k-m1s-switch:focus-visible{outline:2px solid var(--k-focus);outline-offset:2px}
html.b-m1 .k-m1s select.k-m1s-sel{-webkit-appearance:none;appearance:none;width:auto;min-height:34px;padding:0 32px 0 14px;border-radius:999px;font-size:var(--k-t-sm);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--k-text-3) 50%),linear-gradient(135deg,var(--k-text-3) 50%,transparent 50%);background-position:right 16px center,right 11px center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
html.b-m1 .k-m1s .k-m1s-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--ka-soft);background:var(--ka-canvas);color:var(--k-text-2);font:inherit;font-size:var(--k-t-sm);font-weight:500;cursor:pointer;white-space:nowrap}
html.b-m1 .k-m1s .k-m1s-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--k-text-3);opacity:.5;flex:none}
html.b-m1 .k-m1s .k-m1s-chip[aria-pressed="true"]{background:var(--k-text);color:var(--ka-card);border-color:transparent}
html.b-m1 .k-m1s .k-m1s-chip[aria-pressed="true"]::before{background:var(--k-accent);opacity:1}
html.b-m1 .k-m1s .k-m1s-chip[aria-pressed="mixed"]{color:var(--k-text);border-color:var(--k-line-strong)}
html.b-m1 .k-m1s .k-m1s-chip[aria-pressed="mixed"]::before{background:linear-gradient(90deg,var(--k-text) 50%,var(--ka-soft) 50%);opacity:1}

/* ---------- Notifications (notify.js, its DOM kept): every alert in one row, the per-alert grid behind a disclosure ---------- */
html.b-m1 .k-m1s .k-m1s-notif{display:flex;flex-direction:column;gap:4px}
html.b-m1 .k-m1s .k-m1s-notif fieldset{margin:0;padding:0;border:0;min-width:0}
html.b-m1 .k-m1s .k-m1s-notif legend{padding:12px 0 4px;font-size:var(--k-t-cap);letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--k-text-3)}
html.b-m1 .k-m1s .k-m1s-notif>fieldset.k-m1s-types>legend{display:none}
html.b-m1:not(.m1-chrome) .k-m1s .k-m1s-notif:not(:has(>#m1NotifMore[open]))>fieldset.k-m1s-types{display:none}
html.b-m1 .k-m1s .k-m1s-nall{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:16px;background:var(--ka-canvas)}
html.b-m1 .k-m1s .k-m1s-nh b{display:block;font-size:var(--k-t-md);font-weight:500}
html.b-m1 .k-m1s .k-m1s-nh small{display:block;font-size:var(--k-t-xs);color:var(--k-text-3)}
html.b-m1 .k-m1s .k-m1s-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
html.b-m1 .k-m1s .k-m1s-nall .k-m1s-chip{background:var(--ka-card)}
html.b-m1 .k-m1s .k-m1s-nall .k-m1s-chip[aria-pressed="true"]{background:var(--k-text)}
html.b-m1 .k-m1s .k-m1s-nall select.k-m1s-sel{margin-left:auto}
html.b-m1 .k-m1s .k-m1s-more>summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:40px;font-size:var(--k-t-sm);font-weight:500;color:var(--k-text-2);cursor:pointer}
html.b-m1 .k-m1s .k-m1s-more>summary::-webkit-details-marker{display:none}
html.b-m1 .k-m1s .k-m1s-more>summary::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px)}
html.b-m1 .k-m1s .k-m1s-more[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
html.b-m1 .k-m1s .k-m1s-notif .bn-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:44px;padding:6px 0;border-top:1px solid var(--ka-soft);font-size:var(--k-t-md);color:var(--k-text)}
html.b-m1 .k-m1s .k-m1s-notif fieldset>legend+.bn-row,html.b-m1 .k-m1s .k-m1s-notif fieldset>.bn-row:first-child{border-top:0}
html.b-m1 .k-m1s .k-m1s-notif .bn-name{flex:1 1 150px;min-width:0;font-weight:500}
/* a per-alert channel: the label is the pill toggle, its checkbox is kept (focus, change) but not drawn */
html.b-m1 .k-m1s .k-m1s-notif .bn-row>label:has(input.k-m1s-cb){position:relative;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;background:var(--ka-canvas);border:1px solid var(--ka-soft);font-size:var(--k-t-xs);font-weight:500;color:var(--k-text-2);cursor:pointer}
html.b-m1 .k-m1s .k-m1s-notif .bn-row>label:has(input.k-m1s-cb)::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--k-text-3);opacity:.5}
html.b-m1 .k-m1s .k-m1s-notif .bn-row>label:has(input.k-m1s-cb:checked){background:var(--k-text);color:var(--ka-card);border-color:transparent}
html.b-m1 .k-m1s .k-m1s-notif .bn-row>label:has(input.k-m1s-cb:checked)::before{background:var(--k-accent);opacity:1}
html.b-m1 .k-m1s .k-m1s-notif .bn-row>label:has(input.k-m1s-cb:focus-visible){outline:2px solid var(--k-focus);outline-offset:2px}
html.b-m1 .k-m1s .k-m1s-notif input.k-m1s-cb{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
html.b-m1 .k-m1s .k-m1s-notif .bn-tap{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:flex-start}
html.b-m1 .k-m1s .k-m1s-notif .bn-row>label[for]{font-size:var(--k-t-md);color:var(--k-text);cursor:pointer;flex:1 1 200px;min-height:44px;display:inline-flex;align-items:center}
html.b-m1:not(.m1-chrome) .k-m1s .k-m1s-notif input.k-m1s-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
html.b-m1 .k-m1s .k-m1s-notif input.k-m1s-time{width:72px;min-height:34px;padding:0 10px;border-radius:999px;text-align:center;font-size:var(--k-t-sm);font-variant-numeric:tabular-nums}
html.b-m1 .k-m1s .k-m1s-notif .bn-hint{margin:2px 0;font-size:var(--k-t-xs);color:var(--k-text-3)}
html.b-m1 .k-m1s .k-m1s-notif .bn-status{font-size:var(--k-t-xs);color:var(--k-text-2);min-height:0}

/* ---------- Plan: the credits tile (the study's big light numeral) and the plan tiles ---------- */
html.b-m1:not(.m1-chrome) .k-m1s .k-m1s-into{display:none!important}
html.b-m1 .k-m1s .k-m1s-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin:2px 0 4px}
html.b-m1 .k-m1s .k-m1s-plans .k-kt{background:var(--ka-canvas);box-shadow:none;padding:12px 14px;gap:4px;min-height:118px}
html.b-m1 .k-m1s .k-m1s-plans .k-kt b{font-size:30px;line-height:1.15}
html.b-m1 .k-m1s .k-m1s-plans .k-kt b small{font-size:var(--k-t-xs);font-weight:400;letter-spacing:0;color:var(--k-text-3)}
html.b-m1 .k-m1s .k-m1s-plans .k-kt em{font-style:normal;font-size:var(--k-t-xs);color:var(--k-text-3)}
html.b-m1 .k-m1s .k-m1s-plans .k-kh{font-size:var(--k-t-xs);color:var(--k-text);font-weight:500;padding-right:36px;gap:8px}
html.b-m1 .k-m1s .k-m1s-plans .k-m1s-cr{background:var(--ka-card);box-shadow:inset 0 0 0 1px var(--ka-soft)}
html.b-m1 .k-m1s .k-m1s-plans .k-m1s-cr b{font-size:40px;font-weight:300}
html.b-m1 .k-m1s .k-m1s-plans .k-m1s-cr .k-kh{font-weight:400;color:var(--k-text-2)}
html.b-m1 .k-m1s .k-m1s-plans .k-arr{cursor:pointer}
html.b-m1 .k-m1s .k-m1s-curp{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;background:var(--k-text);color:var(--ka-card);font-size:var(--k-t-cap);font-weight:500}
html.b-m1 .k-m1s .k-m1s-pl.k-cur{box-shadow:inset 0 0 0 1px var(--k-line-strong)}

/* ---------- People: the study's round gradient orbs (its own three orb colours, in turn down the list) ---------- */
html.b-m1 .k-m1s .k-m1s-orb{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:var(--k-t-xs);font-weight:600;color:#FFFFFF;box-shadow:0 0 0 2px var(--ka-card);text-shadow:0 1px 2px rgba(20,22,30,.25)}
html.b-m1 .k-m1s .k-m1s-orb.k-o1{background:radial-gradient(circle at 30% 30%,#FFD1E8,#F06AA8)}
html.b-m1 .k-m1s .k-m1s-orb.k-o2{background:radial-gradient(circle at 30% 30%,#FFE2B8,#F59D52)}
html.b-m1 .k-m1s .k-m1s-orb.k-o3{background:radial-gradient(circle at 30% 30%,#9DB4FF,#2440C8)}

/* ---------- an expiry alert (M1 alert style): a soft dot pill over a thin gradient risk bar, light and dark ---------- */
html.b-m1 .k-m1s .k-banner.k-m1s-alert{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;max-width:100%;padding:6px 12px 6px 10px;border-radius:999px;background:var(--ka-canvas);border:1px solid var(--ka-soft);color:var(--k-text-2);font-size:var(--k-t-xs);line-height:1.4}
html.b-m1 .k-m1s .k-banner.k-m1s-alert::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--k-warn);flex:none}
html.b-m1 .k-m1s .k-m1s-risk{position:relative;height:4px;margin:2px 2px 4px;border-radius:999px;background:linear-gradient(90deg,var(--k-ok),var(--k-accent) 55%,var(--k-warn));opacity:.9}
html.b-m1 .k-m1s .k-m1s-risk i{position:absolute;top:50%;left:calc(var(--p,0) * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--ka-card);box-shadow:0 0 0 2px var(--k-warn)}

@media (max-width:860px){
  html.b-m1 .k-m1s .k-m1s-chip,html.b-m1 .k-m1s select.k-m1s-sel,html.b-m1 .k-m1s .k-m1s-notif input.k-m1s-time,html.b-m1 .k-m1s .k-m1s-notif .bn-row>label:has(input.k-m1s-cb),html.b-m1 .k-m1s .k-m1s-more>summary{min-height:var(--k-tap,44px)}
  html.b-m1 .k-m1s select.k-m1s-sel,html.b-m1 .k-m1s .k-m1s-notif input.k-m1s-time{font-size:var(--k-t-base)}
  html.b-m1 .k-m1s .k-m1s-nall select.k-m1s-sel{margin-left:0}
  html.b-m1 .k-m1s .k-m1s-plans{grid-template-columns:1fr 1fr}
  html.b-m1 .k-m1s .k-m1s-plans .k-m1s-cr{grid-column:1/-1}
}
/* the classic suites flag-on run (html.m1-chrome) keeps the app own controls: our stand-ins step aside */
html.b-m1.m1-chrome .k-m1s .k-m1s-time,html.b-m1.m1-chrome #m1NotifAll,html.b-m1.m1-chrome #m1NotifMore,html.b-m1.m1-chrome #m1Plans{display:none}
@media (max-width:860px){html.b-m1 .k-m1s .k-m1s-notif .k-m1s-types .bn-name{flex-basis:100%}html.b-m1 .k-m1s .k-m1s-notif .k-m1s-types .bn-row{padding:10px 0}}

/* ---------- declutter (owner, via HQ 16): one job per section, secondary parts behind Show more, whitespace instead of lines,
   no lime in Settings (HQ 19 / 20: the guide's current step is soft grey; the toggles and chips stay black / white) ---------- */
html.b-m1:not(.m1-chrome) .k-m1s .k-m1s-notif:not(:has(>#m1NotifMore[open]))>:not(#m1NotifAll):not(#m1NotifMore):not(.bn-status){display:none}
html.b-m1:not(.m1-chrome) .k-m1s article:not(:has(details#m1PpMore[open])) [data-m1under="m1PpMore"],
html.b-m1:not(.m1-chrome) .k-m1s article:not(:has(details#m1OpMore[open])) [data-m1under="m1OpMore"]{display:none}
html.b-m1.m1-chrome .k-m1s details.k-more{display:none}
html.b-m1 .k-m1s .k-m1s-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html.b-m1 .k-m1s .k-m1s-curp.k-soft{background:var(--ka-soft);color:var(--k-text-2)}
html.b-m1 .k-m1s input.k-m1s-switch:checked::before{background:var(--ka-card)}
html.b-m1 .k-m1s .k-m1s-chip[aria-pressed="true"]::before,html.b-m1 .k-m1s .k-m1s-notif .bn-row>label:has(input.k-m1s-cb:checked)::before{background:var(--ka-card);opacity:.9}
html.b-m1 .k-m1s .k-m1s-row{border-top:0;padding:10px 0}
html.b-m1 .k-m1s .gw-h3{border-top:0;padding-top:0;margin-top:14px}
html.b-m1 .k-m1s .k-m1s-notif .bn-row{border-top:0}
html.b-m1 .k-m1s .gw-es-partner.k-cert{border-top:0;padding-top:0;margin-top:22px!important}
html.b-m1 .k-m1s .k-m1s-risk{background:linear-gradient(90deg,var(--k-ok),var(--k-warn))}
html.b-m1 .k-m1s details.k-more{margin-top:2px}
/* phone: the kit hides tile arrows (≤760); on a plan tile the ↗ is the way to choose it, so it stays, 44 px */
@media (max-width:860px){html.b-m1 .k-m1s .k-m1s-plans .k-arr{display:grid;width:44px;height:44px;top:4px;right:4px}html.b-m1 .k-m1s .k-m1s-plans .k-kh{padding-right:44px}}

/* ---------- HQ 18 ---------- */
/* a card title that repeats its tab (Plan, People) is gone; a head with nothing else left goes too */
html.b-m1:not(.m1-chrome) .k-m1s .k-m1s-tabdup{display:none}
html.b-m1:not(.m1-chrome) .k-m1s .gw-head.k-m1s-headless{display:none}
html.b-m1 .k-m1s #gwSetPeople>.gw-head{justify-content:flex-end;min-height:0}
/* a placeholder never reads as a value */
html.b-m1 .k-m1s .k-input::placeholder{color:var(--k-text-3);font-style:italic;opacity:1}
/* the switch in dark: a visible track when off */
html.b-m1[data-theme="dark"] .k-m1s input.k-m1s-switch{background:var(--k-line-strong)}
html.b-m1[data-theme="dark"] .k-m1s input.k-m1s-switch:checked{background:var(--k-text)}
html.b-m1[data-theme="dark"] .k-m1s input.k-m1s-switch:checked::before{background:var(--ka-card)}
/* the kit file chooser (Spain 7's .gw-file): a quiet pill button + the chosen file's name */
html.b-m1 .k-m1s .gw-file{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
html.b-m1 .k-m1s .gw-file>label{position:relative}
html.b-m1 .k-m1s .gw-file-name{font-size:var(--k-t-sm);color:var(--k-text-3)}
/* the step guide, one step at a time: --only shows just the current step; --one keeps the others as one-line rows */
html.b-m1 .k-guide.k-guide--only>li:not([aria-current]){display:none}
html.b-m1 .k-guide.k-guide--only>li::before{display:none}
html.b-m1 .k-guide.k-guide--one>li:not([aria-current])>span:not(.k-gn),html.b-m1 .k-guide.k-guide--one>li:not([aria-current])>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.b-m1 .k-guide.k-guide--one>li:not([aria-current]){padding-bottom:8px}
html.b-m1 .k-guide.k-guide--one>li:not([aria-current]) .k-lnk{display:none}
/* the risk marker: warn inside the last 30 days, else ok */
html.b-m1 .k-m1s .k-m1s-risk:not(.k-warn) i{box-shadow:0 0 0 2px var(--k-ok)}
html.b-m1 .k-m1s .k-m1s-risk.k-warn i{background:var(--k-warn);box-shadow:0 0 0 2px var(--ka-card)}
/* phone: the certificate's status pill goes under its line instead of squeezing it */
@media (max-width:860px){
  html.b-m1 .k-m1s .k-cert-h{flex-wrap:wrap;row-gap:6px}
  html.b-m1 .k-m1s .k-cert-h>.k-cert-t{flex:1 1 calc(100% - 56px)}
  html.b-m1 .k-m1s .k-cert-h>.k-spill{margin-left:52px}
}
/* People: Invite sits on the lead line (the head has no title any more) */
html.b-m1:not(.m1-chrome) .k-m1s #gwSetPeople>.gw-head{position:absolute;top:12px;right:14px;margin:0}
html.b-m1:not(.m1-chrome) .k-m1s #gwSetPeople>.gw-head+.gw-sub{min-height:36px;display:flex;align-items:center;padding-right:120px}
/* Spain 7 route tabs (k-segp): 44 px taps on phone */
@media (max-width:860px){html.b-m1 .k-m1s .es-tabs.k-segp button{min-height:var(--k-tap,44px)}}
/* the Show-more parts follow the details element's own [open] (set at once on the click; the toggle event that kept a data- flag arrives a task later, so a reader right after the click saw the parts still hidden) */
/* HQ 19: the client-certificates guide walks one step at a time: the step counter and Back / Next under the current step */
html.b-m1 .k-guidebox .k-m1s-gnav{display:flex;align-items:center;gap:8px;margin-top:2px;padding-left:36px;font-size:var(--k-t-xs)}
html.b-m1 .k-guidebox .k-m1s-gnav .k-btn:disabled{opacity:.4;cursor:default}
@media (max-width:860px){html.b-m1 .k-guidebox .k-m1s-gnav{padding-left:0}html.b-m1 .k-guidebox .k-m1s-gnav .k-btn{min-height:var(--k-tap,44px);min-width:var(--k-tap,44px)}}
/* HQ 22: the guide sits in the card without a grey box; the CSV field waits for the last step; one status pill, no repeated
   title or lead; Back / Next and the unselected route tab read clearly; a person's address and role on two lines */
html.b-m1 .k-m1s .k-guidebox{background:none;padding:4px 0 0;border-radius:0}
html.b-m1:not(.m1-chrome) .k-m1s .k-m1s-later,html.b-m1:not(.m1-chrome) .k-m1s .k-m1s-dup{display:none}
html.b-m1 .k-guidebox .k-m1s-gnav .k-btn{color:var(--k-text)}
html.b-m1 .k-guidebox .k-m1s-gnav .k-btn:disabled{opacity:.55;color:var(--k-text-2)}
html.b-m1 .k-m1s .es-tabs.k-segp button[aria-pressed="false"]{color:var(--k-text-2)}
html.b-m1 .k-m1s .k-m1s-row .t .k-m1s-mail{display:block;font-size:var(--k-t-xs);color:var(--k-text-2);overflow-wrap:anywhere}
/* type floor (owner, slice 1): body 16 px, labels 14 px */
html.b-m1 .k-m1s :is(.k-faint,small,.k-spill,.k-eyebrow,.k-guide p,.k-cert-t span,.k-cert-note,.k-m1s-tabs button){font-size:14px}
html.b-m1 .k-m1s :is(p:not(.k-faint),.k-guide>li,.k-c2h){font-size:16px}
/* the credits tile: its head (Krediti + «Vaš paket · Business») wraps instead of running out of the tile (taxes audit) */
html.b-m1 .k-m1s .k-m1s-plans .k-m1s-cr .k-kh{flex-wrap:wrap;white-space:normal;row-gap:4px;padding-right:0}
html.b-m1 .k-m1s .k-m1s-plans .k-m1s-cr .k-kh .k-spill{max-width:100%;white-space:normal}