/* The app's stylesheet. Fonts, colour tokens and the header style come from the
   main site's styles.css (gatvesgimnastika-website). The site has one, dark,
   colour scheme and no light mode, so the app has the same. */

:root{
  --ink:#0D0D0D;
  --ink-2:#121212;
  --ink-3:#181818;
  --steel:#404040;
  --steel-dim:#2a2a2a;
  --bone:#EDEDED;
  --bone-dim:#9a9a9a;
  --red:#BF000C;
  --blood:#7F0008;
  --ok:#3fae5a;

  --micro: .72rem;

  --font-display:"Barlow Condensed",system-ui,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  --gut: clamp(16px, 5vw, 80px);
  --maxw: 960px;
  --ease: cubic-bezier(.16,1,.3,1);
  color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* --- type ---------------------------------------------------------------- */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:-.01em;
  margin:0 0 .6em;
}
h1{font-size:clamp(2rem,6vw,3.2rem)}
h2{font-size:clamp(1.35rem,3.4vw,1.9rem)}
h3{font-size:1.15rem;line-height:1.05}
p{margin:0 0 1em}
.muted{color:var(--bone-dim)}

/* --- header (the site's .nav, always in its condensed "solid" state) ----- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;
  padding:9px var(--gut);
  background:rgba(9,9,9,.86);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--steel-dim);
}
.nav__brand{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;font-size:1.25rem;text-decoration:none;color:var(--bone);
}
.nav__links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-left:auto;align-items:center}
.nav__links a,.nav__out{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;font-size:.86rem;color:#cfcfcf;position:relative;padding:6px 0;
  text-decoration:none;transition:color .25s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);
}
.nav__links a[aria-current="page"]{color:var(--bone)}
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover){
  .nav__links a:hover,.nav__out:hover{color:var(--bone)}
  .nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
}

/* --- layout -------------------------------------------------------------- */
.page{max-width:var(--maxw);margin:0 auto;padding:28px var(--gut) 64px}
.page--narrow{max-width:460px}
.card{
  background:var(--ink-2);border:1px solid var(--steel-dim);
  padding:20px;margin:0 0 24px;
}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.stack>*+*{margin-top:14px}

/* --- buttons (the site's .btn, without the hover sweep) ------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:.92rem;padding:.75em 1.3em;min-height:44px;border:1px solid var(--red);
  background:var(--red);color:#fff;text-decoration:none;transition:background .25s,color .25s;
}
.btn:hover{background:var(--blood)}
.btn:disabled{opacity:.5;cursor:default}
.btn--ghost{background:transparent;border-color:var(--steel);color:var(--bone)}
.btn--ghost:hover{background:var(--ink-3);border-color:var(--bone)}
.btn--sm{font-size:.8rem;padding:.45em .9em;min-height:36px}
.btn--danger{background:transparent;border-color:var(--red);color:#ff5a62}
.btn--danger:hover{background:var(--blood);color:#fff}

/* --- forms --------------------------------------------------------------- */
.field{display:block}
.field__label{
  display:block;margin-bottom:6px;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:var(--micro);color:var(--bone-dim);
}
.field__hint{display:block;margin-top:4px;font-size:.85rem;color:var(--bone-dim)}
input[type=email],input[type=password],input[type=text],input[type=file],select,textarea{
  display:block;width:100%;max-width:100%;
  font:inherit;color:var(--bone);background:var(--ink);
  border:1px solid var(--steel);border-radius:0;padding:10px 12px;min-height:44px;
}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus,.btn:focus-visible,a:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;
}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--red)}
.fixed-value{
  font-weight:600;padding:10px 12px;border:1px dashed var(--steel);background:var(--ink-3);
  overflow-wrap:anywhere;
}
progress{width:100%;height:10px;accent-color:var(--red)}

.msg{margin:12px 0 0;padding:10px 12px;border-left:3px solid var(--red);background:var(--ink-3)}
.msg--ok{border-left-color:var(--ok)}

/* --- lists --------------------------------------------------------------- */
.list{list-style:none;margin:0;padding:0}
.item{
  display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--steel-dim);
}
.item__main{flex:1 1 200px;min-width:0}
.item__title{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:1.1rem;letter-spacing:.03em;overflow-wrap:anywhere;
}
.item__meta{font-size:.85rem;color:var(--bone-dim);overflow-wrap:anywhere}
.item__actions{display:flex;flex-wrap:wrap;gap:8px}
.item--active{background:var(--ink-3)}
.points{
  font-family:var(--font-display);font-weight:800;font-size:1.4rem;color:var(--red);
  font-variant-numeric:tabular-nums;
}
.status{font-size:.9rem}
.status--failed{color:#ff5a62}
.tag{
  display:inline-block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:var(--micro);padding:1px 6px;border:1px solid var(--steel);
  color:var(--bone-dim);margin-left:6px;vertical-align:middle;
}
.tag--red{border-color:var(--red);color:#ff5a62}

/* --- video dialog and admin panel --------------------------------------- */
dialog{
  background:var(--ink-2);color:var(--bone);border:1px solid var(--steel);
  padding:16px;width:min(720px,calc(100vw - 24px));max-width:none;
}
dialog::backdrop{background:rgba(0,0,0,.75)}
video{display:block;width:100%;max-height:70vh;background:#000}
.panel{border-top:2px solid var(--red)}
pre{
  margin:8px 0 0;padding:12px;background:var(--ink);border:1px solid var(--steel-dim);
  overflow:auto;max-height:420px;font-size:.8rem;
}
details summary{cursor:pointer;font-weight:600}
.comment{padding:10px 0;border-bottom:1px solid var(--steel-dim)}
.comment__body{white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end}
.panel h3{margin-top:22px}
.panel .row{margin:10px 0}