/* Karma – telefonen. Webbappen på smala skärmar: ett flikfält i flytande glas längst ner (js/mobile.js),
 * arbetsytan över hela skärmen och chill-vyn ordnad för en hand. Laddas sist, så att det gäller i båda temana.
 * Tillägget och exemplet på landningssidan (.framed) berörs inte.
 */

.mnav { display: none; }

@media (max-width: 680px) {
  body.web-app:not(.framed) {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --mnav-h: 53px;
    /* Pang!s färger (vibes/src/theme): primary, primaryForeground, mutedForeground, pink, background. */
    --mnav-pill: #F3BEF4;
    --mnav-ink: hsl(220, 15%, 5%);
    --mnav-muted: hsl(220, 10%, 55%);
    --mnav-badge: #F472B6;
    --mnav-badge-ink: #1A1A1A;
    /* Det som måste ligga fritt ovanför fältet. */
    --mnav-space: calc(var(--mnav-h) + max(var(--safe-bottom), 12px) + 14px);
  }

  /* ——— Flikfältet, som i Pang! (vibes: LiquidGlassTabBar) ———
   * Mörkt glas med en hårfin kant, bara ikoner (fyllda när fliken är vald, konturer annars) och ett
   * lila piller under den valda som fjädrar dit. Krymper lite när man rullar nedåt. */
  body.web-app:not(.framed) .mnav {
    position: fixed; z-index: 40; left: 12px; right: 12px; bottom: max(var(--safe-bottom), 12px);
    height: var(--mnav-h); padding: 8px 6px;
    display: grid; grid-template-columns: repeat(5, 1fr); border-radius: 999px; overflow: hidden;
    background: rgba(10, 12, 20, .55);
    border: .5px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    transform-origin: 50% 100%;
    transition: transform .18s ease-out, opacity .18s ease-out;
  }
  /* Nedåt i en lista: tio procent mindre och upp till arton punkter ned, som i Pang!. Nedåt bara så långt
   * som utrymmet ovanför hemindikatorn räcker; utan den (eller i webbläsaren) krymper det på stället. */
  body.web-app:not(.framed) .mnav.shrunk { transform: translateY(min(18px, max(var(--safe-bottom) - 12px, 0px))) scale(.9); opacity: .93; }

  /* Pillret: lika brett som en flik, placeras ur den valda flikens nummer. Fjädern är Pang!s
   * (damping 16, stiffness 220, mass 0.7), uträknad till en kurva. */
  .mnav-lens {
    position: absolute; z-index: 0; top: 8px; bottom: 8px; left: 6px;
    width: calc((100% - 12px) / 5); border-radius: 999px;
    background: var(--mnav-pill);
    transform: translateX(calc(var(--i, 0) * 100%));
    transition: transform .6s cubic-bezier(.3, 1.3, .45, 1);
    transition-timing-function: linear(0, .054, .182, .345, .514, .669, .8, .904, .978, 1.028, 1.057, 1.069, 1.07, 1.064, 1.053, 1.041, 1.03, 1.019, 1.011, 1.004, 1, .997, .996, .995, .995, .996, .997, .997, .998, .999, 1);
  }
  .mnav.still .mnav-lens { transition: none; }

  .mnav-tab {
    position: relative; z-index: 1; display: grid; place-items: center; border-radius: 999px;
    color: var(--mnav-muted); -webkit-tap-highlight-color: transparent;
    transition: color .2s;
  }
  .mnav-tab.on { color: var(--mnav-ink); }
  .mnav-ic { position: relative; display: grid; place-items: center; }
  .mnav-ic svg { width: 25px; height: 25px; fill: currentColor; }
  .mnav-ic .ic-on { display: none; }
  .mnav-tab.on .ic-on { display: block; }
  .mnav-tab.on .ic-off { display: none; }
  .mnav-badge {
    position: absolute; top: -3px; right: -7px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px;
    display: grid; place-items: center; font-style: normal; font-size: 8px; font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--mnav-badge); color: var(--mnav-badge-ink);
  }
  .mnav-badge:empty { display: none; }

  /* När tangentbordet är uppe behövs inte fältet, och på iOS skulle det lägga sig ovanpå. */
  body.web-app:has(.work input:focus, .work textarea:focus, .work [contenteditable]:focus, .notes textarea:focus, .center input:focus, .name:focus) .mnav {
    opacity: 0; pointer-events: none; transform: translateY(24px);
  }

  /* ——— Överst: inget lägesval (det finns i fältet), sökfältet tar bredden ——— */
  /* Sökfältet behövs inte: telefonens webbläsare har ett eget. Kvar blir vädret och Logga in. */
  body.web-app:not(.framed) .top { padding-top: calc(var(--safe-top) + 12px); display: block; }
  body.web-app:not(.framed) .top-left, body.web-app:not(.framed) .search, body.web-app:not(.framed) .world-clocks { display: none; }
  body.web-app:not(.framed) .top-right { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  body.web-app:not(.framed) .top-right .weather { order: -1; padding-left: 4px; }
  body.web-app.mode-work:not(.framed) .top { opacity: 0; pointer-events: none; }
  /* Under välkomsten ska Logga in synas ändå. */
  body.web-app.mode-work.onboarding-on:not(.framed) .top { opacity: 1; pointer-events: auto; }

  /* ——— Chill: klockan högre upp, nedräkningar och knappar ovanför fältet ——— */
  body.web-app:not(.framed) .center { justify-content: flex-start; padding: calc(var(--safe-top) + 92px) 16px 0; }
  body.web-app:not(.framed) .clock { font-size: clamp(84px, 27vw, 120px); }
  body.web-app:not(.framed) .greeting { font-size: 28px; }
  body.web-app:not(.framed) .focus input { font-size: 20px; }
  body.web-app:not(.framed) .bottom {
    bottom: var(--mnav-space); padding: 0 12px 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  }
  body.web-app:not(.framed) .bottom-left, body.web-app:not(.framed) .countdowns { align-items: stretch; width: 100%; }
  body.web-app:not(.framed) .cdv { width: 100%; }
  body.web-app:not(.framed) .actions { justify-self: auto; justify-content: flex-end; min-height: 56px; }
  body.web-app:not(.framed) .actions #btn-notes, body.web-app:not(.framed) .actions #btn-todo { display: none; }
  body.web-app:not(.framed) .actions .icon-btn { width: 44px; height: 44px; }
  body.web-app:not(.framed) .actions .game-btn { height: 44px; }
  body.web-app:not(.framed) .todo-panel { left: 10px; right: 10px; width: auto; bottom: var(--mnav-space); }
  body.web-app:not(.framed) .toasts { bottom: calc(var(--mnav-space) + 8px); }
  body.web-app:not(.framed) .reminders { left: 12px; right: 12px; width: auto; bottom: calc(var(--mnav-space) + 4px); }

  /* ——— Arbeta: över hela skärmen, innehållet rullar under glaset ——— */
  body.web-app:not(.framed) .work {
    inset: 0; border-radius: 0; border: 0; box-shadow: none;
    padding-top: var(--safe-top);
  }
  body.web-app.has-photo:not(.framed) .work { background: rgba(8, 8, 14, .78); }
  [data-theme="pang"] body.web-app:not(.framed) .work { border-radius: 0; background: var(--p-panel); }
  body.web-app:not(.framed) .side-toggle { display: none; }
  body.web-app:not(.framed) .work-head { padding: 12px 14px 10px 16px; gap: 8px; }
  body.web-app:not(.framed) .work-title h2, body.web-app:not(.framed) .work-title-input { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  [data-theme="pang"] body.web-app:not(.framed) .work-title h2, [data-theme="pang"] body.web-app:not(.framed) .work-title-input { font-size: 18px; }
  body.web-app:not(.framed) .work-tools { gap: 4px; }
  body.web-app:not(.framed) .work-tools .av-stack, body.web-app:not(.framed) .work-tools .here-chip { display: none; }
  body.web-app:not(.framed) .work-tools .tool { width: 38px; height: 38px; padding: 0; justify-content: center; }
  body.web-app:not(.framed) .work-tools .tool.live { width: auto; padding: 0 12px; }
  body.web-app:not(.framed) .work-body,
  body.web-app:not(.framed) .board { padding-bottom: calc(var(--mnav-space) + 12px); }
  body.web-app:not(.framed) .chat-main { padding-bottom: var(--mnav-space); }
  body.web-app:not(.framed) .chat-main:has(textarea:focus) { padding-bottom: 8px; }
  body.web-app:not(.framed) .thread { padding-bottom: var(--mnav-space); }
  body.web-app:not(.framed) .chat-pane { padding-bottom: calc(var(--mnav-space) + 8px); }
  /* Kanban: en kolumn i taget som man sveper mellan, med en flik av nästa synlig. */
  body.web-app:not(.framed) .kb { padding: 0 16px 8px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; }
  body.web-app:not(.framed) .kb-col { flex-basis: calc(100vw - 56px); scroll-snap-align: start; max-height: none; }
  /* Kalendern: hela vyn rullar, med rutnätet högt nog att se dagen och planeringen under. */
  body.web-app:not(.framed) .cal { padding: 0 12px var(--mnav-space); overflow-y: auto; }
  /* Kalendern rullar själv, under glaset: arbetsytan behöver ingen egen luft under den. */
  body.web-app:not(.framed) .work-body[data-view="calendar"] { padding-bottom: 0; }
  body.web-app:not(.framed) .cal-main { flex: none; }
  body.web-app:not(.framed) .cal-tl { flex: none; height: 64vh; }
  body.web-app:not(.framed) .cal-side { max-height: none; overflow: visible; }
  body.web-app:not(.framed) .side-scroll, body.web-app:not(.framed) .ws-rail { padding-bottom: calc(var(--mnav-space) + 8px); }
  body.web-app:not(.framed) .side-foot { padding-bottom: calc(var(--mnav-space) + 4px); }

  /* Sidomenyn som en låda från vänster, över en mörk hinna. */
  body.web-app:not(.framed) .work-side { width: min(300px, calc(100vw - 68px - 40px)); padding-top: var(--safe-top); }
  body.web-app:not(.framed) .work.has-rail .work-side { width: min(290px, calc(100vw - 68px - 52px)); }
  body.web-app:not(.framed) .ws-rail { padding-top: calc(var(--safe-top) + 14px); }
  body.web-app:not(.framed) .work::before {
    content: ''; position: absolute; inset: 0; z-index: 4; background: rgba(0, 0, 0, .5);
    opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
  }
  body.web-app.drawer-open:not(.framed) .work::before { opacity: 1; }
  body.web-app:not(.framed) .work-side .nav-item { padding-top: 11px; padding-bottom: 11px; font-size: 15px; }

  /* Ark nerifrån, som på telefonen. */
  body.web-app:not(.framed) dialog.sheet {
    width: 100vw; max-width: 100vw; max-height: calc(100dvh - var(--safe-top) - 24px);
    margin: auto 0 0; border-radius: 26px 26px 0 0; padding: 22px 18px calc(22px + var(--safe-bottom));
  }
  /* Inställningarna: texten först och knapparna under när de inte får plats bredvid. */
  body.web-app:not(.framed) .row:not(.stack), body.web-app:not(.framed) .row-split { flex-wrap: wrap; gap: 10px 16px; }
  body.web-app:not(.framed) .row:not(.stack) > div:first-child:not(.acct-who), body.web-app:not(.framed) .row-split > div:first-child { flex: 1 1 180px; min-width: 0; }
  body.web-app:not(.framed) .bg-row-btns { flex-wrap: wrap; }
  body.web-app:not(.framed) .row .field { width: auto; flex: 1 1 160px; min-width: 0; }
  body.web-app:not(.framed) dialog.sheet[open] { animation: sheetUp .45s cubic-bezier(.2, .9, .25, 1); }
  @keyframes sheetUp { from { transform: translateY(40%); opacity: 0; } }
  /* Lapparna: hela skärmen, kategorierna i en rad som går att svepa, Klar ovanför fältet. */
  body.web-app:not(.framed) .pi-panel { width: 100vw; height: 100dvh; padding: calc(var(--safe-top) + 14px) 12px 0; }
  body.web-app:not(.framed) .pi-head { gap: 10px; padding: 0 0 12px; }
  body.web-app:not(.framed) .pi-head h2 { flex: 1; font-size: 22px; }
  body.web-app:not(.framed) .pi-close { order: 2; }
  body.web-app:not(.framed) .pi-filters { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 2px 12px; }
  body.web-app:not(.framed) .pi-filters::-webkit-scrollbar { display: none; }
  body.web-app:not(.framed) .pi-filters > * { flex: none; }
  body.web-app:not(.framed) .pi-search { order: 4; flex: 1 0 100%; }
  body.web-app:not(.framed) .pi-search input { width: 100%; }
  body.web-app:not(.framed) .pi-wall { padding: 12px 4px calc(var(--mnav-space) + 80px); }
  body.web-app:not(.framed) .pi-done { bottom: calc(var(--mnav-space) + 6px); }
  body.web-app:not(.framed) .pi-bin { bottom: calc(var(--mnav-space) + 6px); }
  body.web-app:not(.framed) .pi-undo { bottom: calc(var(--mnav-space) + 70px); }
  body.web-app:not(.framed) .pi-done kbd, body.web-app:not(.framed) .pi-hint { display: none; }
  /* Medan man skriver ligger tangentbordet där fältet var: då räcker det med Klar längst ner. */
  body.web-app:not(.framed):has(.notes textarea:focus) .pi-done { bottom: 14px; }
}

/* Låga telefoner (iPhone SE): klockan och nedräkningen krymper så att fokusfrågan får plats. */
@media (max-width: 680px) and (max-height: 760px) {
  body.web-app:not(.framed) .center { padding-top: calc(var(--safe-top) + 64px); }
  body.web-app:not(.framed) .clock { font-size: clamp(64px, 21vw, 84px); }
  body.web-app:not(.framed) .greeting { font-size: 23px; }
  body.web-app:not(.framed) .focus { margin-top: 14px; }
  body.web-app:not(.framed) .cdv { padding: 12px 16px; }
  body.web-app:not(.framed) .cdv-name small { display: none; }
}

/* Utan oskärpa (äldre webbläsare): ett mörkare fält som ändå går att läsa. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 680px) { body.web-app .mnav { background: rgba(10, 12, 20, .92); } }
}