@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);
}
/* Flikarna tar det utrymme som blir över i sidhuvudet, men får aldrig knuffa
   ut knapparna. `min-width: 0` igen: utan den sätter flikarnas sammanlagda
   bredd en minsta bredd på hela raden, och vi är tillbaka i samma spill som
   knapparna orsakade. */
#tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* Brödsmulan viker för flikarna — men först när det finns mer än en flik.
   Sidhuvudet är hårt om plats: knappar, brödsmula och gap äter drygt tusen
   pixlar innan en enda flik får utrymme, så på 1280 syntes bara en. Med en
   ensam flik säger brödsmulan något flikarna inte säger (klient och projekt),
   och då får den vara kvar. Från två flikar och uppåt är boardnamnet redan
   synligt i remsan, och klient/projekt står i flikens verktygstips. */
#bar:has(.atb-strip > .atb-tab:nth-of-type(2)) .crumb { display: none; }

/* Under 720 px göms flikremsan av tabs.css. Utan detta står behållaren kvar
   och äter ett dött gap i telefonens sidhuvud. */
@media (max-width: 719px) {
  #tabs { display: none; }
}

#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; }
}


/* Uppställning och AI ändrar boarden och kräver redigerare. Knapparna göms för
   den som ändå skulle få 403 — samma skäl som ritverktygen i canvas.css. */
body[data-role="viewer"]    #btnArrange,
body[data-role="commenter"] #btnArrange,
body[data-role="viewer"]    #btnAi,
body[data-role="commenter"] #btnAi { display: none; }