@import "./theme.css";

/* =============================================================================
   Annot — skal: inloggning, sidhuvud, projektlåda, ytor, toaster.

   Inga hex-värden. Allt går genom tokens från @instinctly/ui via theme.css.
   Ytorna skiljs med luft och ljushet, inte med streck. Ett streck ritas bara
   när det bär betydelse, aldrig som dekoration.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif);
  font-size: 13px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; }
[hidden] { display: none !important; }

/* ============================================================== inloggning */

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background:
    radial-gradient(900px 520px at 20% -10%,
      color-mix(in oklch, var(--color-accent) 14%, transparent), transparent 62%),
    radial-gradient(680px 440px at 108% 108%,
      color-mix(in oklch, var(--color-success) 10%, transparent), transparent 60%),
    var(--color-bg);
}

.gate-card {
  width: min(380px, 100%);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  animation: annot-rise var(--dur-slow) var(--ease-out) both;
}

.gate .logo {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.gate .lead {
  margin: var(--space-1) 0 var(--space-5);
  color: var(--color-faint);
  font-size: 12.5px;
}

/* Segmenterad kontroll — ett val, inte två knappar. */
.seg {
  display: flex;
  gap: var(--space-0-5);
  padding: 3px;
  margin-bottom: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}
.seg button {
  flex: 1;
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-ink-muted);
  font-size: 12.5px;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.seg button:hover { color: var(--color-ink); }
.seg button[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-xs);
}

.fld {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-faint);
}
.fld input {
  display: block;
  width: 100%;
  margin-top: var(--space-1-5);
  padding: var(--space-2-5) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.fld input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.fld.pw { position: relative; }
.fld.pw input { padding-right: var(--space-10); }

/* Ögat sitter i fältet. 34 px synligt, 44 px träffyta. */
.pw-eye {
  position: absolute;
  right: var(--space-1-5);
  bottom: 4px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--color-faint);
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.pw-eye::before { content: ""; position: absolute; inset: -5px; }
.pw-eye:hover { color: var(--color-ink); background: var(--color-surface-2); }
/* Struket öga = dolt. Trycker man visar det sig, och strecket försvinner. */
.pw-eye[aria-pressed="true"] { color: var(--color-accent); }
.pw-eye[aria-pressed="true"] .pw-slash { display: none; }

.err {
  margin: 0 0 var(--space-3);
  color: var(--color-danger);
  font-size: 12px;
}

button.primary {
  padding: var(--space-2-5) var(--space-4);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: filter var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
button.primary:hover { filter: brightness(1.08); }
button.primary:active { transform: scale(0.98); }
button.wide { width: 100%; }

/* En avstängd knapp måste se avstängd ut. Utan det här är enda skillnaden
   att inget händer när man klickar, vilket läser som en bugg. */
button:disabled,
button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.4);
}
button:disabled:hover,
button[aria-disabled="true"]:hover {
  filter: grayscale(0.4);
  transform: none;
  background: inherit;
}
button:disabled:active,
button[aria-disabled="true"]:active { transform: none; }

/* ================================================================= skalet */

#app {
  height: 100%;
  display: grid;
  grid-template-columns: var(--nav-w) 1fr var(--side-w);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "bar bar bar"
    "nav stage panel";
  /* Kommentarspanelen fäller ihop sig på iPad genom att skriva om --side-w.
     Utan den här övergången hoppar kolumnen medan panelen animerar. */
  transition: grid-template-columns var(--dur-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  #app { transition: none; }
}
body.nav-hidden #app   { grid-template-columns: 0 1fr var(--side-w); }
body.panel-hidden #app { grid-template-columns: var(--nav-w) 1fr 0; }
body.panel-hidden #panel { display: none; }
body.nav-hidden.panel-hidden #app { grid-template-columns: 0 1fr 0; }

/* Fokusläge: allt utom canvasen försvinner. Sidhuvudet tas ur rutnätet
   helt i stället för att bara döljas, annars ligger en tom rad kvar.

   Presentationsläget gör samma sak. present.js sätter `pr-presenting` på
   body och gömmer canvasens egna verktyg, men skalet är app.css ansvar —
   klassen sattes tidigare utan att någon regel lyssnade på den, så
   sidhuvudet, projektlistan och kommentarspanelen låg kvar mitt i
   presentationen. `#exitFocus` hör inte hit: presentatören har en egen
   väg ut och två utgångar i samma hörn är en för mycket. */
body.focus #app,
body.pr-presenting #app {
  grid-template-columns: 0 1fr 0;
  grid-template-rows: 0 1fr;
}
body.focus #bar,
body.focus #nav,
body.focus #panel,
body.focus #scrim,
body.pr-presenting #bar,
body.pr-presenting #nav,
body.pr-presenting #panel,
body.pr-presenting #scrim { display: none; }

body.pr-presenting #exitFocus { display: none; }

/* Vägen ut. Svävar i hörnet, tonas ned tills man närmar sig. */
#exitFocus {
  position: fixed;
  top: calc(var(--space-3) + var(--safe-t));
  right: calc(var(--space-3) + var(--safe-r));
  z-index: 60;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: color-mix(in oklch, var(--color-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-line);
  color: var(--color-ink-muted);
  box-shadow: var(--shadow-md);
  opacity: 0.35;
  transition: opacity var(--dur-base) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
#bar::-webkit-scrollbar { display: none; }

#exitFocus::before { content: ""; position: absolute; inset: -6px; }
#exitFocus:hover, #exitFocus:focus-visible { opacity: 1; color: var(--color-ink); }
@media (pointer: coarse) { #exitFocus { opacity: 1; width: 44px; height: 44px; } }
body.nav-hidden #nav { display: none; }

/* Sidhuvudet svävar över canvasen i stället för att sitta på den.
   Ingen underkant — separationen görs av suddet och skuggan. */
#bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Utan detta sätter knapparnas sammanlagda bredd en minsta bredd på hela
     rutnätet, och sidan blir bredare än fönstret. På 500 px stack #app ut
     14 px åt höger och innehållet klipptes. `min-width: 0` låter kolumnen
     krympa; `overflow-x` gör sidhuvudet rullbart i stället för att spilla.
     Rullisten göms — den skulle äta av en redan låg rad. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  height: calc(var(--bar-h) + var(--safe-t));
  padding: var(--safe-t) var(--space-3) 0;
  background: color-mix(in oklch, var(--color-bg) 78%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 1px 0 var(--color-line);
  z-index: 20;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #bar { background: var(--color-bg); }
}

.grow { flex: 1; }

.crumb {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
  color: var(--color-faint);
  font-size: 12.5px;
  white-space: nowrap;
}
.crumb strong {
  color: var(--color-ink);
  font-weight: 620;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crumb i { font-style: normal; opacity: 0.45; }

/* Ikonknapp: 28 px synligt, 44 px träffyta. Tricket är ett osynligt
   pseudoelement, inte en större knapp — annars spricker layouten på desktop. */
button.icon {
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--color-ink-muted);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
button.icon::before { content: ""; position: absolute; inset: -8px; }
button.icon:hover { background: var(--color-surface-2); color: var(--color-ink); }
button.icon:active { transform: scale(0.94); }
button.icon.sm { width: 22px; height: 22px; font-size: 15px; line-height: 1; }

button.ghost {
  position: relative;
  padding: var(--space-1-5) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink-muted);
  font-size: 12.5px;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
button.ghost::before { content: ""; position: absolute; inset: -6px; }
button.ghost:hover { color: var(--color-ink); border-color: var(--color-line-2); }
button.ghost:active { transform: scale(0.98); }

/* ============================================================== närvaro */

.peers { display: flex; align-items: center; margin-right: var(--space-1); }
.peers .pz {
  width: 26px;
  height: 26px;
  margin-left: -7px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-bg);
  color: var(--color-accent-ink);
  font-size: 10.5px;
  font-weight: 700;
  cursor: default;
  animation: annot-fade var(--dur-base) var(--ease-out) both;
  transition: transform var(--dur-fast) var(--ease-out);
}
.peers .pz:hover { transform: translateY(-2px); z-index: 1; }
.peers .pz.more {
  background: var(--color-surface-2);
  color: var(--color-ink-muted);
}

/* =========================================================== projektlåda */

#nav {
  grid-area: nav;
  overflow-y: auto;
  padding: var(--space-2);
  padding-bottom: calc(var(--space-2) + var(--safe-b));
  background: var(--color-surface);
  box-shadow: 1px 0 0 var(--color-line);
}

.nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2) var(--space-2-5);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-faint);
}

.cl { margin-bottom: var(--space-3); }
.cl-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2);
  font-size: 12.5px;
  font-weight: 620;
}
/* Projektnivån markeras med indrag och dämpad text, inte med en linje. */
.pr { margin: 2px 0 var(--space-1-5) var(--space-3); }
.pr-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-1-5);
  color: var(--color-ink-muted);
  font-size: 12px;
}
.bd {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--space-1-5) var(--space-2-5);
  text-align: left;
  border-radius: var(--radius-md);
  color: var(--color-ink-muted);
  font-size: 12.5px;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.bd:hover { background: var(--color-surface-2); color: var(--color-ink); }
.bd[aria-current="true"] {
  background: var(--color-accent-soft);
  color: var(--color-ink);
  font-weight: 600;
}

/* ================================================================== ytor */

#stage {
  grid-area: stage;
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}

/* Översikten tar hela ytan och lägger undan canvas, panel och låda.
   Kolumnantalet måste matcha det rutnät som gäller för skärmbredden —
   sätter man tre kolumner på en layout som bara har en, hamnar allt
   innehåll i den första och kläms ihop till ingenting. */
#home { grid-area: stage; position: relative; overflow: hidden auto; }
body.home #stage,
body.home #panel,
body.home #nav,
body.home #scrim { display: none; }

@media (min-width: 821px) {
  body.home #app { grid-template-columns: 0 1fr 0; }
}
@media (max-width: 820px) {
  body.home #app {
    grid-template-columns: 1fr;
    grid-template-areas: "bar" "stage";
  }
}

#panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: -1px 0 0 var(--color-line);
}

#scrim {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: color-mix(in oklch, var(--color-bg) 55%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: annot-fade var(--dur-base) var(--ease-out) both;
}

/* ============================================================== toaster */

#toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-5) + var(--safe-b));
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1-5);
  pointer-events: none;
}
.toast {
  padding: var(--space-2-5) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: 12.5px;
  animation: annot-rise var(--dur-base) var(--ease-out) both;
}
.toast.bad {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
  color: var(--color-ink);
}

/* ============================================================ responsivt

   iPad och telefon får egna beslut, inte ett `md:`-undantag ovanpå en
   mobilvy. Panelen sköter sitt eget läge (comments.css), skalet sköter
   lådan och sidhuvudet. */

/* iPad liggande och nedåt: lådan lägger sig över canvasen. */
@media (max-width: 1100px) {
  #app { grid-template-columns: 0 1fr var(--side-w); }
  #nav {
    position: fixed;
    top: calc(var(--bar-h) + var(--safe-t));
    bottom: 0;
    left: 0;
    z-index: 30;
    width: min(var(--nav-w), 82vw);
    padding-left: calc(var(--space-2) + var(--safe-l));
    display: none;
    box-shadow: var(--shadow-xl);
  }
  body.nav-open #nav {
    display: block;
    animation: annot-slide-in var(--dur-slow) var(--ease-out) both;
  }
}

/* Telefon: panelen tas ur rutnätet och blir ett ark i underkanten. */
@media (max-width: 820px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-areas: "bar" "stage";
  }
  #panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    box-shadow: 0 -1px 0 var(--color-line), var(--shadow-xl);
  }
  .crumb i, .crumb #cbClient, .crumb #cbProject { display: none; }
  #bar { gap: var(--space-2); padding-inline: var(--space-2); }
}

/* Sidhuvudet rymmer tio knappar på desktop. På telefon får plats för tre
   eller fyra innan de börjar klämmas ihop, så resten göms i tur och ordning
   efter hur ofta de behövs där.

   Panelväxlaren behövs inte — arket har ett eget handtag. Fokusläget är
   meningslöst när skalet ändå är minimalt. Exportera och Logga ut hör till
   skrivbordet. Kvar blir menyn, Presentera, skärmlistan, Dela och tema. */
@media (max-width: 820px) {
  #btnPanel, #btnFocus { display: none; }
}
@media (max-width: 520px) {
  button.ghost.hide-narrow { display: none; }
  #btnLang { display: none; }              /* språk byts sällan, finns på desktop */
  #bar { gap: var(--space-1-5); }
}
@media (max-width: 400px) {
  #btnPresent { padding-inline: var(--space-2); font-size: 12px; }
}

@keyframes annot-slide-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

/* Pekskärm: allt klickbart blir tummvänligt. */
@media (pointer: coarse) {
  .bd, .seg button { padding-block: var(--space-2-5); }
  button.icon { width: 34px; height: 34px; }
  button.icon::before { inset: -5px; }
}