/* Skalets navigering, ovanpå husse-skal.css: den smala sidomenyn, menyerna i verktygsraden
   (husväljaren och kontot), flikradens aktiva flik, menyarkets kanter och appens fot.
   Länkas bara på sidor med appskal, efter sidornas egna mallar och före husse-vuxen.css.
   Bara regler för skalets egna klasser: knappar, kort och hover i övrigt bor i husse-skal.css.
   Beteendet (pilar, Escape, klick utanför, svep, fokusfälla) ligger i js/skal.js. */

/* ── Sidomenyn ─────────────────────────────────────────────────────────── */

.hk-nav.app-nav a { min-height: 40px; }

/* Smal meny. Knappen finns bara där sidomenyn ligger vid sidan, alltså över 980 px. */
.hk-collapse {
  position: relative; flex: none; display: flex; align-items: center; gap: 10px; min-height: 40px;
  padding: 0 12px; border: var(--bw) solid transparent; border-radius: var(--r-m);
  background: transparent; color: var(--ink-2); font: 600 14px/1.2 var(--f-body); cursor: pointer;
}
.hk-collapse:hover { background: var(--card); color: var(--ink); }
.hk-collapse .hk-icon { flex: none; }
@media (max-width: 980px) { .hk-collapse { display: none; } }

@media (min-width: 981px) {
  :root[data-meny="smal"] { --sidebar-w: 76px; }

  :root[data-meny="smal"] .hk-side { padding: 14px 10px 16px; gap: 14px; align-items: center; overflow-x: hidden; }
  /* Märket står kvar som väg till översikten; husväljaren flyttar upp i verktygsraden. */
  :root[data-meny="smal"] .hk-brand { padding: 0; border: 0; background: none; box-shadow: none; justify-content: center; }
  :root[data-meny="smal"] .hk-brand-word,
  :root[data-meny="smal"] .hk-side .hk-house,
  :root[data-meny="smal"] .hk-side .pop-houses { display: none; }
  :root[data-meny="smal"] .hk-top-house { display: block; }

  :root[data-meny="smal"] .hk-nav.app-nav { align-items: center; gap: 10px; width: 100%; }
  :root[data-meny="smal"] .hk-nav-group { align-items: center; gap: 4px; width: 100%; }
  /* Grupperna skiljs av en linje; rubriken finns kvar för skärmläsaren, som grupperna pekar på. */
  :root[data-meny="smal"] .hk-nav-group + .hk-nav-group { border-top: 1px solid var(--line); padding-top: 10px; }
  :root[data-meny="smal"] .hk-nav-head {
    position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  :root[data-meny="smal"] .hk-nav.app-nav a { width: 50px; min-height: 44px; padding: 0; gap: 0; justify-content: center; }

  /* Namnet blir en etikett bredvid ikonen vid hover och fokus. Den ligger fast i fönstret, eftersom
     sidomenyn rullar och klipper allt som sticker ut; skal.js ger den radens höjd (--hk-tip-y).
     Dold med clip-path och inte display: none, så att länken behåller sitt namn. */
  :root[data-meny="smal"] .hk-nav-label,
  :root[data-meny="smal"] .hk-collapse-label {
    position: fixed; z-index: 60; left: calc(var(--sidebar-w) + 8px); top: var(--hk-tip-y, -100px);
    transform: translateY(-50%); clip-path: inset(50%); pointer-events: none; white-space: nowrap;
    padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--paper);
    font: 600 14px/1.2 var(--f-body); box-shadow: var(--lift);
  }
  :root[data-meny="smal"] .hk-nav.app-nav a:hover .hk-nav-label,
  :root[data-meny="smal"] .hk-nav.app-nav a:focus-visible .hk-nav-label,
  :root[data-meny="smal"] .hk-collapse:hover .hk-collapse-label,
  :root[data-meny="smal"] .hk-collapse:focus-visible .hk-collapse-label { clip-path: none; }

  :root[data-meny="smal"] .hk-household { padding: 8px 4px; align-items: center; gap: 8px; }
  :root[data-meny="smal"] .hk-people { flex-direction: column; }
  :root[data-meny="smal"] .hk-people .hk-av { margin: 0 0 -8px; }
  :root[data-meny="smal"] .hk-people-names,
  :root[data-meny="smal"] .hk-install { display: none; }
  :root[data-meny="smal"] .hk-theme { flex-direction: column; border-radius: var(--r-m); }
  :root[data-meny="smal"] .hk-theme-btn { min-width: 36px; min-height: 32px; }
  :root[data-meny="smal"] .hk-theme-btn span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  :root[data-meny="smal"] .hk-collapse { width: 50px; padding: 0; justify-content: center; }
  /* Pilen pekar åt det håll menyn går när man trycker. */
  :root[data-meny="smal"] .hk-collapse .hk-icon { transform: scaleX(-1); }
}

/* ── Menyerna i verktygsraden och sidomenyn ───────────────────────────────── */

.app-header .pop-item {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px;
  font: 500 15px/1.25 var(--f-body); color: var(--ink);
}
.app-header .pop-item > .hk-icon { flex: none; color: var(--ink-2); }
/* Popoverna har overflow: hidden, så en ring utanför raden klipptes av i kanterna. */
.app-header .pop-item:focus-visible { outline-offset: -3px; }
.app-header .pop-sep { height: 1px; margin: 4px 0; background: var(--line); }
.app-header .pop-form { margin: 0; }

.pop-house { align-items: flex-start; }
.pop-check { flex: none; width: 18px; display: grid; place-items: center; padding-top: 3px; }
.pop-house-text { min-width: 0; display: grid; gap: 2px; }
.pop-house-text .pop-title { overflow-wrap: anywhere; }

.app-header .pop-item.hk-nytt-item { justify-content: flex-start; }
.app-header .hk-nytt-item .hk-nytt-ord { margin-left: auto; }

/* Kontoknappen: initialerna i en rund bricka. Två bokstäver i 17 px rymdes inte i 44 px. */
.hk-userbtn { display: grid; place-items: center; padding: 0; font: 750 15px/1 var(--f-display); letter-spacing: .01em; }
.hk-topbar .pop-user { width: 280px; }
.pop-user-head {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line);
}
.hk-userav {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lilac); color: var(--on-color); font: 750 15px/1 var(--f-display);
}
.pop-user-who { min-width: 0; display: grid; gap: 2px; }
.pop-user-who b { font: 650 15.5px/1.25 var(--f-display); overflow-wrap: anywhere; }
.pop-user-mail { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }

/* ── Telefonen: flikraden och arket ─────────────────────────────────────── */

@media (max-width: 760px) {
  /* Den aktiva fliken har en yta och ett streck ovanför ikonen; strecket är en form, så det syns
     även för den som inte ser skillnad på ytorna. Meny får strecket när sidan bara finns i arket. */
  .hk-tab { position: relative; }
  .hk-tab.active::after,
  .hk-tab-menu.is-inside::after {
    content: ""; position: absolute; top: 4px; left: 50%; width: 20px; height: 3px; border-radius: 2px;
    transform: translateX(-50%); background: currentColor;
  }
  .hk-tab.active { font-weight: 800; }

  .hk-tabs {
    width: min(398px, calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }
  .hk-side.is-open { padding-right: max(16px, env(safe-area-inset-right)); touch-action: pan-y; }
  /* Greppet säger att arket går att dra ner. */
  .hk-side.is-open .hk-sheet-grip { width: 44px; height: 5px; }
  .hk-topbar .pop-user { width: min(300px, calc(100vw - 32px)); }
}

/* ── Appens fot ─────────────────────────────────────────────────────────── */

.hk-foot {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--line);
}
.hk-foot .tt-foot { margin-top: 0; padding-top: 0; border-top: 0; }
.hk-foot-nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.hk-foot-nav a {
  display: inline-flex; align-items: center; min-height: 36px;
  font: 500 14px/1.3 var(--f-body); color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.hk-foot-nav a:hover { color: var(--ink); }
.hk-foot-version { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .hk-foot-nav a { min-height: 44px; }
}
@media print { .hk-foot { display: none; } }