/* Gemensam grafisk profil för agility.sambis.se.

   Varje sida hade sin egen kopia av paletten – åtta kopior som glider isär.
   Nu ligger den här och bara här. Underlaget är moodboarden i
   OneDrive\Claude\Agility\Agility_moodboard.html (2026-08-26).

   Utgångspunkten: appen läses stående på en gräsplan, i solljus, mellan två
   lopp. Därav hög kontrast och tjocka streck. Accenterna betyder saker och får
   inte återanvändas som dekoration:
     gul  = det här är du        röd  = det är nära nu
     blå  = någon annanstans     guld = merit (pinne, stjärna, placering)      */

:root{
  /* bas */
  --ink:#0E211B;    /* Banmörk   – all brödtext och rubriker */
  --muted:#5D7268;  /* Dimgrön   – banor, storlekar, detaljrader */
  --linje:#DCE5DF;  /* Linje     – kanter och avdelare, aldrig text */
  --kort:#FFFFFF;   /* Kort      */
  --bg:#F3F6F2;     /* Gräsdis   – sidans botten */
  --bg-2:#E9EFE9;   /* Passerad yta */

  /* primär */
  --gron:#1B6E4B;   /* Bana      – knappar, aktiv markering, länkar */
  --gron-m:#12523A; /* Bana mörk – hover, och små versaler mot vitt */
  --gron-l:#E4F1EA; /* Bana tint */

  /* accent */
  --gul:#FFC53D;    --gul-l:#FFF3D2;
  --rod:#C33B1E;    --rod-m:#A32E13;  --rod-l:#FBE9E4;
  --bla:#1F6CB4;    --bla-l:#E7F0F9;
  --guld:#7A5200;   /* merit */
  --passerad:#52655C;

  /* typografi. Archivo (rubriker) och Inter (brödtext) ska självhostas som
     woff2 i static/fonts/ innan de sätts in här – ingen CDN. En font som inte
     laddar gör schemat oläsligt, och täckningen på en tävlingsplats är usel. */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --disp:var(--sans);
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;

  /* radie och rytm */
  --r-kort:12px;  --r-ruta:9px;  --r-panel:14px;
  --tryckyta:44px;                /* minsta klickyta – tummen ska räcka */
  --res-bredd:106px;              /* resultatkolumnen i schemat */

  /* Namnen från v1. Alla sidor är omskrivna sedan 2026-08-27 och ingen läser
     dessa längre – de står kvar som skyddsnät om något halkat förbi, och kan tas
     bort när profilen suttit en tävlingsdag. --blaa var primärfärgen förr. */
  --card:var(--kort);
  --blaa:var(--gron);
  --orange:var(--guld);
}

/* ---------------------------------------------------------------- grunder

   Härifrån och ner: det som såg likadant ut på varje sida. Kort, knappar,
   fält, status och brickor låg i åtta kopior och hann redan glida isär –
   admin hade lila och blå brickor som inte fanns i paletten. Sidorna behåller
   bara det som är deras eget: schemakorten, takttabellen, hundkorten.          */

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--sans);
     -webkit-font-smoothing:antialiased;padding:16px 12px 60px}
.wrap{max-width:640px;margin:0 auto}
h1{font-family:var(--disp);font-size:22px;margin:0 0 2px;letter-spacing:-.015em}
h2{font-size:13px;margin:24px 0 8px;text-transform:uppercase;letter-spacing:.06em;
   color:var(--muted);font-weight:700}
a{color:var(--gron)}
.sub{color:var(--muted);font-size:13px;margin:0 0 14px}
.liten-text{font-size:12px;color:var(--muted)}

.kort,.card{background:var(--kort);border:1px solid var(--linje);
            border-radius:var(--r-kort);padding:14px;margin-bottom:10px}

/* ---------------------------------------------------------------- fält

   16 px är inte en smaksak: under det zoomar iOS in när fältet får fokus, och
   då tappar man schemat ur synfältet mitt i inmatningen.                        */
input,select,textarea{width:100%;min-height:var(--tryckyta);padding:11px 10px;
     border:1px solid var(--linje);border-radius:var(--r-ruta);font-size:16px;
     font-family:inherit;background:var(--kort);color:inherit}
input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible,a:focus-visible{outline:2px solid var(--gron);outline-offset:2px}
input[type=checkbox]{width:auto;min-height:0}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
      color:var(--muted);margin:0 0 4px;font-weight:600}
.falt{margin-bottom:11px}
.rad{display:flex;gap:10px;flex-wrap:wrap}
.rad>.falt{flex:1;margin-bottom:11px}

/* ---------------------------------------------------------------- knappar */
button{width:100%;min-height:var(--tryckyta);padding:12px 18px;border-radius:10px;
       border:1px solid var(--gron);background:var(--gron);color:#fff;
       font:600 14.5px/1 var(--sans);cursor:pointer}
button:hover{background:var(--gron-m);border-color:var(--gron-m)}
/* sekundär: samma tyngd i formen, mindre i färgen */
button.tunn,button.grå,button.sekundar{background:var(--kort);color:var(--gron-m);
       border-color:var(--linje);font-weight:600}
button.tunn:hover,button.grå:hover,button.sekundar:hover{background:var(--gron-l)}
button.fara{background:var(--kort);color:var(--rod);border-color:#EBC6BC}
button.liten{width:auto;min-height:0;padding:7px 12px;font-size:13px}
button[disabled]{opacity:.5;cursor:not-allowed}

/* ---------------------------------------------------------------- brickor

   Rollmärken och liknande. Botten är mörkare än basfärgen: 10 px versaler
   behöver mer än 4.5:1 för att hålla ute på en gräsplan.                        */
.marke{display:inline-block;font:700 10px/1 var(--sans);letter-spacing:.09em;
       text-transform:uppercase;padding:4px 8px;border-radius:20px;
       background:var(--bg-2);color:var(--muted);vertical-align:2px}
.marke.admin{background:var(--gul-l);color:var(--guld);box-shadow:inset 0 0 0 1px #EBD09B}
.marke.arrangor{background:var(--gron-l);color:var(--gron-m)}

/* ---------------------------------------------------------------- status */
.status{font-size:13px;min-height:20px;color:var(--gron-m);font-weight:600}
.status.fel{color:var(--rod-m)}