

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:44px;padding:0 var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);
  font:600 var(--fs-body)/1 var(--font);white-space:nowrap;text-decoration:none;cursor:pointer;box-sizing:border-box;
  transition:background-color var(--motion),border-color var(--motion),color var(--motion)}
.btn:hover{background:var(--bg);border-color:var(--line-strong)}
.btn--primary{background:var(--blue);border-color:transparent;color:#fff}
.btn--primary:hover{background:var(--blue-hover);border-color:transparent}
.btn--ghost{background:none;border-color:transparent;color:var(--blue)}
.btn--ghost:hover{background:var(--bg);border-color:transparent;color:var(--blue-hover)}
.btn--on-media{background:rgba(255,255,255,.88);border-color:transparent;box-shadow:var(--shadow-media)}
.btn--on-media:hover{background:var(--surface);border-color:transparent}
.btn--danger{color:var(--danger);border-color:var(--danger)}
.btn--danger:hover{background:#FDF1F0;border-color:var(--danger)}

.btn--selected,.btn[aria-pressed="true"]{background:var(--blue-soft);border-color:var(--blue);color:var(--blue-text)}
.btn--selected:hover,.btn[aria-pressed="true"]:hover{background:#DCE8FB;border-color:var(--blue-hover);color:var(--blue-hover)}
.btn--selected::before,.btn[aria-pressed="true"]:not(.btn--icon)::before{content:"";width:14px;height:14px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.btn--s{height:36px;padding:0 var(--s-3)}
.btn--icon{width:44px;padding:0}
.btn--s.btn--icon{width:36px}
.btn--block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:default;pointer-events:none}
.btn svg{width:18px;height:18px;flex:none}

.btn--save svg path{fill:none}
.btn.btn--save::before{display:none}
.btn--save[aria-pressed="true"],.btn--save[aria-pressed="true"]:hover{background:var(--blue-soft);border-color:var(--blue-soft);color:var(--blue-text)}
.btn--save[aria-pressed="true"]:hover{border-color:var(--blue)}
.btn--save[aria-pressed="true"] svg{color:var(--blue)}
.btn--save[aria-pressed="true"] svg path{fill:currentColor}

.btn--save__label{position:relative;display:inline-block;height:1em;line-height:1;width:var(--w-text,2.3em);transition:width .15s ease}
.btn--save__label > span{position:absolute;left:50%;top:0;transform:translateX(-50%);white-space:nowrap;opacity:0;transition:opacity .15s ease}
.btn--save .btn--save__text{opacity:1}
.btn--save[aria-pressed="true"] .btn--save__label{width:var(--w-on,3em)}
.btn--save[aria-pressed="true"] .btn--save__text{opacity:0}
.btn--save[aria-pressed="true"] .btn--save__on{opacity:1}

.btn--save[aria-pressed="true"]:hover:not([data-fresh]) .btn--save__label{width:var(--w-off,8.6em)}
.btn--save[aria-pressed="true"]:hover:not([data-fresh]) .btn--save__on{opacity:0}
.btn--save[aria-pressed="true"]:hover:not([data-fresh]) .btn--save__off{opacity:1}
@media (prefers-reduced-motion:reduce){ .btn--save__label,.btn--save__label > span{transition:none} }

.plaque{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:0;border-radius:var(--r-sm);box-sizing:border-box;
  background:var(--surface);color:var(--ink-2);font:600 var(--fs-label)/1 var(--font);white-space:nowrap}
.plaque--pass{color:var(--blue);cursor:help}
.plaque--pass svg{width:14px;height:14px}
.plaque__flag{font-size:14px;line-height:1}

.plaque--ai{background:var(--ai-plaque);color:#fff;cursor:help;font-weight:400}
.plaque--ai svg{width:14px;height:14px;flex:none}
.plaque--ai::after{content:attr(data-label)}

.facts{display:inline-flex;flex-wrap:wrap;column-gap:1px;row-gap:8px;overflow:hidden;align-self:flex-start;max-width:100%;
  box-sizing:border-box;padding:8px 0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);vertical-align:top}
.facts__cell{position:relative;display:flex;flex-direction:column;gap:1px;flex:0 0 auto;padding:0 10px;white-space:nowrap}

.facts__cell::before{content:'';position:absolute;left:-1px;top:0;bottom:0;width:1px;background:var(--line)}

.facts__cell--when{flex:1 1 min-content;min-width:0;white-space:normal}
.facts__label{font-size:var(--fs-label);line-height:var(--lh-label);color:var(--muted)}
.facts__value{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-heading);font-weight:700;line-height:1.25;color:var(--ink)}
.facts__value--free{color:var(--free-fg)}
.facts__value--tbc{color:var(--tbc-fg)}
.facts__time{font-size:var(--fs-meta);line-height:1.3;color:var(--muted)}

.info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:0;
  background:none;color:var(--blue);cursor:help}
.info svg{width:14px;height:14px}
@media (pointer:coarse){.info::after{content:"";position:absolute;inset:-15px}}

.star{position:absolute;top:10px;right:10px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;
  border:0;border-radius:var(--r-pill);background:rgba(21,36,44,.45);color:#fff;cursor:pointer;transition:background-color var(--motion)}
.star::after{content:"";position:absolute;inset:-4px}
.star:hover{background:rgba(21,36,44,.6)}
.star[aria-pressed="true"]{background:var(--blue)}
.star svg{width:18px;height:18px}
.star[aria-pressed="true"] svg path{fill:currentColor}

.star.lauf-popping{animation:favpop .32s ease-out}
.btn--save.lauf-popping svg{animation:favpop .32s ease-out}
@keyframes favpop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}

.tip{position:absolute;z-index:2600;max-width:280px;box-sizing:border-box;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--surface);box-shadow:var(--shadow-pop);color:var(--ink-2);font:400 var(--fs-meta)/1.45 var(--font);text-align:left}
.tip[hidden]{display:none}
.tip__title{display:block;margin-bottom:2px;font-weight:700;color:var(--ink)}
.tip__link{display:inline-block;margin-top:6px}
.tip__arrow{position:absolute;width:12px;height:12px;background:var(--surface);transform:rotate(45deg)}
.tip[data-side="below"] .tip__arrow{top:-6px;box-shadow:-2px -2px 3px rgba(21,36,44,.06)}
.tip[data-side="above"] .tip__arrow{bottom:-6px;box-shadow:2px 2px 3px rgba(21,36,44,.06)}

html.lauf-locked{overflow:hidden}
.dlg-backdrop{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  padding:var(--s-4);background:rgba(21,36,44,.45)}
.dlg{position:relative;width:440px;max-width:100%;max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;padding:var(--s-6);
  border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-pop);color:var(--ink);font:400 var(--fs-body)/var(--lh-text) var(--font)}
.dlg--wide{width:520px}
.dlg:focus{outline:none}
.dlg__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-2)}
.dlg__title{margin:0;font-size:var(--fs-title);font-weight:700;line-height:1.3;color:var(--ink)}
.dlg__close{flex:none;margin:-10px -12px 0 0;color:var(--ink)}
.dlg__close:hover{color:var(--ink)}
@media (max-width:860px){
  .dlg-backdrop{align-items:flex-end;padding:0}
  .dlg,.dlg--wide{width:100%;max-height:92dvh;padding:12px 20px 24px;border-radius:var(--r-md) var(--r-md) 0 0}
  .dlg::before{content:"";display:block;width:40px;height:4px;margin:0 auto 12px;border-radius:2px;background:var(--line)}
}

.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:var(--fs-label);font-weight:700;line-height:var(--lh-label);color:var(--ink)}
.field__hint{font-weight:400;color:var(--muted)}
.input{width:100%;height:44px;box-sizing:border-box;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:400 var(--fs-body)/1.4 var(--font);transition:border-color var(--motion),box-shadow var(--motion)}
textarea.input{height:auto;min-height:96px;padding:10px 12px;resize:vertical}
.input::placeholder{color:var(--muted)}
.input:focus,.input:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(42,111,219,.22)}
.input[aria-invalid="true"]{border-color:var(--error)}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(196,43,55,.18)}
.field__error{font-size:var(--fs-meta);line-height:1.35;color:var(--error)}
.field__error[hidden]{display:none}

.nx::after{content:attr(data-text)}
