/* =============================================================================
   HEM (AT-216, 2026-11-07) — EN plats för Hems stil. Desktop och mobil bor i samma fil så att de inte kan glida isär.
   Allt går via temats tokens (--text-primary, --text-secondary, --accent-primary, --border-color, --bg-dark-*), så att
   varje tema följer med utan egna Hem-regler. Lägesfärgerna (lugnt/väntar/över tidsgränsen) sätts här och bärs av
   html.atlas-light-theme (ljusa teman) respektive standardvärdet (mörka teman). Kontrasten är mätt per tema (KVITTO.md).
   Markup: Renderer/index.html (#home-widgets-area), home-widgets.js, home-status.js, home-todos.js.
   ============================================================================= */

#home-widgets-area.hm-area {
  --hm-calm: #0b6b46;
  --hm-warn: #8a4b00;
  --hm-danger: #b0231b;
  --hm-muted: color-mix(in srgb, var(--text-primary) 62%, transparent);
  --hm-line: color-mix(in srgb, var(--border-color, var(--text-primary)) 45%, transparent);
  --hm-fill: color-mix(in srgb, var(--text-primary) 5%, transparent);
  --hm-fill-hover: color-mix(in srgb, var(--text-primary) 9%, transparent);
  --hm-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 20px 16px;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  box-sizing: border-box;
  color: var(--text-primary);
}
body:not(.atlas-light-theme) #home-widgets-area.hm-area {
  --hm-calm: #6fdcae;
  --hm-warn: #f6c25b;
  --hm-danger: #ff9188;
}

/* Barnen krymper aldrig (annars pressas bandet ihop när ytan är lägre än innehållet); ytan scrollar i stället. */
#home-widgets-area.hm-area > * { flex: 0 0 auto; }
/* Den globala mobilregeln `:root body button { min-height: 44px }` gör annars ringen och rutan till ovaler. Träffytan på 44 px
   ges av ::after (ringen) och raden, inte av knappens egen höjd. */
#home-widgets-area .hm-ring, #home-widgets-area .hm-check { min-height: 0 !important; min-width: 0 !important; }

/* Rutorna ovanför klipps inte rakt mot frågefältet i Trafik: mjuk uttoning nertill + luft när man scrollat till botten. */
@media (min-width: 769px) {
  html:not(.atlas-edition-standard):not(.atlas-edition-unresolved) #home-widgets-area.hm-area {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
    padding-bottom: 28px;
  }
}

/* ---------- Kort ---------- */
.hm-card {
  background: color-mix(in srgb, var(--bg-dark-secondary) 86%, transparent);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  box-shadow: 0 1px 2px rgba(10, 25, 35, 0.06), 0 10px 28px -10px rgba(10, 25, 35, 0.22);
  padding: 16px 18px;
  box-sizing: border-box;
  min-width: 0;
}
.hm-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-height: 30px; }
.hm-card-icon { display: inline-flex; color: var(--accent-primary); flex: 0 0 auto; }
.hm-card-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-primary); flex: 1 1 auto; min-width: 0;
}
.hm-count {
  font-size: 12px; font-weight: 700; min-width: 22px; padding: 1px 8px; text-align: center; border-radius: 999px;
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent); color: var(--text-primary);
}
.hm-empty { padding: 14px 4px; font-size: 13px; color: var(--hm-muted); text-align: center; }
.hm-empty-ok { color: var(--hm-calm); font-weight: 600; }
.hm-sep { opacity: 0.5; margin: 0 5px; }

/* ---------- Lägesband ---------- */
.hm-band {
  --hm-tone: var(--text-secondary);
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 2.4fr) auto;
  align-items: center;
  gap: 22px;
  padding: 12px 22px 12px 24px;
  min-height: 80px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--hm-tone) 9%, transparent), transparent 55%), color-mix(in srgb, var(--bg-dark-secondary) 90%, transparent);
  border-color: var(--hm-line);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.hm-band::before { /* tonmarkering: en bred kant till vänster som syns på avstånd */
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--hm-tone); opacity: 0.7;
}
.hm-band[data-state="calm"]    { --hm-tone: var(--hm-calm); }
.hm-band[data-state="waiting"] { --hm-tone: var(--hm-warn); }
.hm-band[data-state="over"]    { --hm-tone: var(--hm-danger); }
.hm-band[data-state="offline"] { --hm-tone: var(--hm-danger); }
.hm-band[data-state="offline"] { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--hm-danger) 9%, transparent) 0 12px, transparent 12px 24px), color-mix(in srgb, var(--bg-dark-secondary) 90%, transparent); }
.hm-band[data-state="loading"] { --hm-tone: var(--hm-muted); }

.hm-greet { font-size: 15px; line-height: 1.3; }
.hm-greet b { font-weight: 700; }
.hm-date { margin-top: 3px; font-size: 12px; color: var(--hm-muted); }

.hm-band-status { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hm-status-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--hm-tone); background: color-mix(in srgb, var(--hm-tone) 16%, transparent);
}
.hm-status-text { flex: 1 1 auto; min-width: 0; }
.hm-status-head { font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-primary); }
.hm-band[data-state="offline"] .hm-status-head { color: var(--hm-tone); }
.hm-status-sub { margin-top: 3px; font-size: 14px; color: var(--hm-muted); line-height: 1.35; }
.hm-over-tag {
  display: inline-block; margin-left: 8px; vertical-align: 3px; white-space: nowrap; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--text-primary); background: color-mix(in srgb, var(--hm-danger) 12%, transparent);
}
.hm-away {
  margin-top: 6px; display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent); color: var(--text-primary);
}
.hm-next {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
  padding: 11px 18px; min-height: 44px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 14px;
  background: color-mix(in srgb, var(--hm-tone) 14%, transparent) !important; color: var(--text-primary); border: 1px solid color-mix(in srgb, var(--hm-tone) 40%, transparent);
}
.hm-next:hover { background: color-mix(in srgb, var(--hm-tone) 24%, transparent) !important; }
.hm-clock {
  font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}

/* En puls är kort och går sedan över i ett stilla läge (aldrig en rörelse som aldrig tar slut). */
/* Pulsen är en kort tonton i bandet (ingen ram/ring), en gång. */
@keyframes hm-glow { 0% { opacity: 0.18; } 100% { opacity: 0; } }
.hm-band::after { content: ''; position: absolute; inset: 0; background: var(--hm-tone); opacity: 0; pointer-events: none; }
.hm-band.is-pulse::after { animation: hm-glow 1.8s ease-out 1; }
@keyframes hm-plus {
  0%   { opacity: 0; transform: translateY(5px) scale(0.85); }
  15%  { opacity: 1; transform: none; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Mittrad: rutor + privat testyta ---------- */
.hm-mid { display: flex; gap: 12px; align-items: stretch; }
.hm-tiles { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.hm-tile {
  --hm-tone: var(--text-primary);
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  padding: 10px 14px; min-height: 78px; box-sizing: border-box; font: inherit; color: var(--text-primary); cursor: pointer;
  background: color-mix(in srgb, var(--bg-dark-secondary) 86%, transparent) !important;
  border: 1px solid var(--hm-line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(10, 25, 35, 0.05);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.hm-tile:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--bg-dark-secondary) 70%, var(--hm-fill-hover)) !important; }
.hm-tile:focus-visible { outline: 2px solid var(--accent-primary) !important; outline-offset: 2px; }
.hm-tile[data-tone="waiting"], .hm-tile[data-tone="over"] {
  background: linear-gradient(160deg, color-mix(in srgb, var(--hm-danger) 17%, transparent), transparent 78%), color-mix(in srgb, var(--bg-dark-secondary) 86%, transparent) !important;
}
.hm-tile[data-tone="calm"] {
  background: linear-gradient(160deg, color-mix(in srgb, var(--hm-calm) 15%, transparent), transparent 78%), color-mix(in srgb, var(--bg-dark-secondary) 86%, transparent) !important;
}
.hm-tile-value b { color: var(--text-primary); }
/* Nollor och lugna rutor tonas ner så att ögat dras till rutorna som faktiskt har något; Interna är ett totalantal utan tidsgräns och får ett eget, stillsammare uttryck. */
.hm-tile[data-tone="calm"] .hm-tile-value b { color: var(--hm-muted); font-weight: 600; }
.hm-tile[data-tone="calm"] .hm-tile-unit { color: var(--hm-muted); font-weight: 500; }
.hm-tile[data-tone="internal"] { background: color-mix(in srgb, var(--bg-dark-secondary) 80%, transparent) !important; box-shadow: none; }
.hm-tile[data-tone="internal"] .hm-tile-value b { font-size: 22px; color: var(--hm-muted); font-weight: 600; }
.hm-tile[data-tone="internal"] .hm-tile-unit { font-size: 13px; color: var(--hm-muted); font-weight: 500; }
.hm-tile-label {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--hm-muted);
}
.hm-tile-value { display: inline-flex; align-items: baseline; gap: 6px; position: relative; }
.hm-tile-value b { font-size: 28px; line-height: 1; font-weight: 700; color: var(--hm-tone); font-variant-numeric: tabular-nums; }
.hm-tile-unit { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.hm-tile-total { font-size: 12.5px; color: var(--hm-muted); }
.hm-plus {
  align-self: center; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800;
  color: var(--text-primary); background: color-mix(in srgb, var(--accent-primary) 22%, transparent); animation: hm-plus 2.6s ease-out 1 forwards;
}

.hm-private { flex: 0 0 400px; padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
/* Standard saknar privat AI på Hem. Döljs fail-closed även före tenantprofilen är löst (FASG-SLICE-1 R1). */
html.atlas-edition-standard .hw-private-card,
html.atlas-edition-unresolved .hw-private-card { display: none !important; }
.hm-private-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-primary); }
.hm-private-text { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); }
.hm-private-note { font-size: 11.5px; font-style: italic; color: var(--hm-muted); }

.hm-tiles.is-stale .hm-tile { opacity: 0.55; }
.hw-stat-skeleton { pointer-events: none; }
.hw-skeleton-bar { height: 12px; border-radius: 6px; background: var(--hm-fill-hover); }

/* ---------- Kom igång-raden (kortet ritas av onboarding-guide.js; här placering och hopfällning) ---------- */
#home-widgets-area .atlas-onboarding-summary-card {
  display: grid; grid-template-columns: minmax(0, 1.5fr) auto auto; align-items: center; gap: 8px 22px;
  padding: 9px 18px; margin: 0; flex: 0 0 auto; min-height: 0 !important;
  background: color-mix(in srgb, var(--bg-dark-secondary) 86%, transparent);
  border: 1px solid var(--hm-line); border-radius: var(--hm-radius);
  box-shadow: 0 1px 2px rgba(10, 25, 35, 0.06), 0 10px 28px -10px rgba(10, 25, 35, 0.22);
}
#home-widgets-area .atlas-onboarding-summary-card .atlas-onboarding-summary-copy h3 { margin: 1px 0 0; font-size: 15px; }
#home-widgets-area .atlas-onboarding-summary-card .atlas-onboarding-summary-copy p { margin: 1px 0 0; font-size: 12.5px; }
#home-widgets-area .atlas-onboarding-summary-card .atlas-onboarding-summary-progress { display: flex; flex-direction: row; align-items: center; gap: 10px; text-align: left; }
#home-widgets-area .atlas-onboarding-summary-card .atlas-onboarding-summary-actions { display: flex; align-items: center; gap: 10px; }
.hm-guide-toggle { display: none; }
#home-widgets-area .atlas-onboarding-summary-card[data-hm-collapsible="1"] { grid-template-columns: minmax(0, 1fr); }
#home-widgets-area .atlas-onboarding-summary-card[data-hm-collapsible="1"] .hm-guide-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 0; border: 0; background: none !important; cursor: pointer;
  font: inherit; color: var(--text-primary); text-align: left; min-height: 36px;
}
.hm-guide-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.hm-guide-progress { font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent-primary) 16%, transparent); }
.hm-guide-toggle .hm-chev { margin-left: auto; transition: transform 0.2s ease; }
.atlas-onboarding-summary-card:not(.is-collapsed) .hm-guide-toggle .hm-chev { transform: rotate(180deg); }
#home-widgets-area .atlas-onboarding-summary-card.is-collapsed > :not(.hm-guide-toggle) { display: none; }
/* Hopfällbar (mobil, eller dator när guiden är klar): raden bär redan "Kom igång" och "N av N", så de dubbleras inte inne i kortet. */
#home-widgets-area .atlas-onboarding-summary-card[data-hm-collapsible="1"] .atlas-system-status-kicker,
#home-widgets-area .atlas-onboarding-summary-card[data-hm-collapsible="1"] [data-onboarding-progress],
#home-widgets-area .atlas-onboarding-summary-card[data-hm-collapsible="1"] .atlas-onboarding-summary-progress > span { display: none; }
#home-widgets-area .atlas-onboarding-summary-card[data-hm-collapsible="1"]:not(.is-collapsed) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
#home-widgets-area .atlas-onboarding-summary-card[data-hm-collapsible="1"]:not(.is-collapsed) > .hm-guide-toggle { flex: 1 1 100%; }
#home-widgets-area .atlas-onboarding-summary-card[data-hm-collapsible="1"]:not(.is-collapsed) > .atlas-onboarding-summary-copy { flex: 1 1 100%; }
#home-widgets-area .atlas-onboarding-summary-card[data-hm-collapsible="1"]:not(.is-collapsed) > .atlas-onboarding-summary-actions { flex: 1 1 auto; justify-content: flex-end; }
/* AT-219 tillägg p.3 (Patrik 11-07, skärmbild Box4 "3 av 3"): onboarding-status.css gör knappytan till en 120 px smal kolumn
   (knapparna staplades mitt i kortet) och kugghjulet ("Fortsätt konfigurera") hamnade ensamt på en egen rad. Ordning nu:
   rubriken (och klar-texten) till vänster, kugghjulet direkt före knapparna, knapparna på EN rad till höger. */
#home-widgets-area .atlas-onboarding-summary-card .atlas-onboarding-summary-actions { flex-direction: row; flex-wrap: nowrap; width: auto; justify-self: end; align-items: center; }
#home-widgets-area .atlas-onboarding-summary-card .atlas-onboarding-summary-actions > * { white-space: nowrap; }
#home-widgets-area .atlas-onboarding-summary-card[data-hm-collapsible="1"]:not(.is-collapsed) > .atlas-onboarding-summary-copy { flex: 1 1 260px; min-width: 0; }
#home-widgets-area .atlas-onboarding-summary-card[data-hm-collapsible="1"]:not(.is-collapsed) > .atlas-onboarding-summary-progress { flex: 0 0 auto; min-width: 0; margin-left: auto; justify-self: auto; }
#home-widgets-area .atlas-onboarding-summary-card[data-hm-collapsible="1"]:not(.is-collapsed) > .atlas-onboarding-summary-actions { flex: 0 0 auto; }
/* Läget klart: brickan "3 av 3" i klar-ton, och klar-texten syns även i låga fönster (den säger vad Slutför gör). */
#home-widgets-area .atlas-onboarding-summary-card[data-hm-complete="1"] .hm-guide-progress { background: color-mix(in srgb, var(--status-success, #34c759) 22%, transparent); }
#home-widgets-area .atlas-onboarding-summary-card[data-hm-complete="1"] .hm-guide-progress::before { content: "✓ "; }
#home-widgets-area .atlas-onboarding-summary-card[data-hm-complete="1"] .atlas-onboarding-summary-copy p { display: block !important; }

/* ---------- Nedre raden: Att göra + kontor ---------- */
.hm-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 12px; align-items: stretch; }
.hm-todo { display: flex; flex-direction: column; gap: 0; min-height: 130px; }
.hm-offices { display: flex; flex-direction: column; min-height: 130px; position: relative; }
/* AT-223 del 1: på datorn (två kolumner) avgör Att göra-kortet radens höjd; kontorskortets innehåll räknas inte (contain: size), så listan
   får hela kortets höjd och home-widgets.js visar så många hela rader som ryms. Utfällt ("Visa fler") växer kortet med listan. */
@media (min-width: 769px) { body:not(.atlas-single-office) .hm-offices:not(.is-expanded) { contain: size; } }
body.atlas-single-office .hm-bottom { grid-template-columns: minmax(0, 1fr); }

/* Offices-lista */
/* Hela rader, ingen scrollruta: antalet styrs av Home.rowLimit() (samma som Att göra), resten bakom "Visa fler". */
.hm-offices-list { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.hm-office {
  display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 8px 11px; min-height: 36px;
  border: 1px solid; box-sizing: border-box; cursor: default;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hm-office.is-clickable { cursor: pointer; }
.hm-office.is-clickable:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); }
.hm-office-icon { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hm-office-name { font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }

/* ---------- Att göra: huvud och flikar ---------- */
.hm-todo-head { margin-bottom: 8px; }
/* AT-223 del 1: flikarna ÄR husets underflikar i pillerform (.atlas-segment / .atlas-segment-btn, admin-edit-state.css), samma som
   Policy & villkors ämnesrad; utseendet ärvs därifrån. Här bara: raden är så bred som flikarna (inte hela kortet), så att manualikonen
   står direkt efter dem, och flikarna krymper inte texten. ID-vikten matchar husets regel (som .office-duration-control gör). */
html body #hw-todo-card .hm-tabs.atlas-segment:not(#_a):not(#_b) { width: auto !important; flex: 0 1 auto !important; }
html body #hw-todo-card .hm-tabs.atlas-segment:not(#_a):not(#_b) > .atlas-segment-btn { flex: 0 0 auto !important; overflow: visible !important; }
.hm-tab-n { font-variant-numeric: tabular-nums; opacity: 0.85; }
.hm-bulk:focus-visible, .hm-more:focus-visible { outline: 2px solid var(--accent-primary) !important; outline-offset: 2px; }
/* Manualikonen (manual-links.js, place 'after') står direkt efter flikarna; huvudet har inga knappar (markeringsläget har egen rad). */
.hm-todo-head > .atlas-manual-link { flex: 0 0 auto; }

/* Välj-läge: verktygsrad */
.hm-selectbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 2px 8px; }
.hm-selall { display: inline-flex; align-items: center; gap: 9px; border: 0; background: none !important; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; min-height: 32px; }
.hm-bulk-icons { display: inline-flex; gap: 2px; margin-left: 6px; }
.hm-bulk-group { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.hm-icon.is-primary { color: var(--text-primary); background: color-mix(in srgb, var(--accent-primary) 18%, transparent) !important; gap: 4px; padding: 0 10px; min-width: 40px; }
.hm-icon.is-primary:hover { background: color-mix(in srgb, var(--accent-primary) 30%, transparent) !important; }
.hm-icon-count { font-size: 12px; font-weight: 700; }
.hm-bulk {
  padding: 6px 14px; min-height: 34px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  color: var(--text-primary); background: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important; border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, transparent);
}
.hm-bulk.is-danger { background: color-mix(in srgb, var(--hm-danger) 10%, transparent) !important; border-color: color-mix(in srgb, var(--hm-danger) 40%, transparent); color: var(--hm-danger); }
.hm-bulk.is-confirm { background: var(--hm-danger) !important; border-color: var(--hm-danger); color: #fff; }
body:not(.atlas-light-theme) .hm-bulk.is-confirm { color: #14161a; }
.hm-bulk:disabled { opacity: 0.45; cursor: default; }
.hm-check {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px; border: 2px solid color-mix(in srgb, var(--text-primary) 38%, transparent);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none !important; color: #fff; cursor: pointer; box-sizing: border-box;
}
.hm-check.is-on { background: var(--accent-primary) !important; border-color: var(--accent-primary); }
body:not(.atlas-light-theme) .hm-check.is-on { color: #14161a; }

/* ---------- Att göra: lista och rader ---------- */
/* Antalet HELA rader mäts av home-todos.js (_fitRows på dator, 5 på mobil); resten ligger bakom "Visa fler". Ingen scrollruta inne i kortet. */
.hm-list { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 1px 0; position: relative; }
.hm-row {
  --hm-row-accent: transparent;
  position: relative; display: flex; align-items: center; gap: 11px; padding: 6px 8px 6px 12px; min-height: 44px; box-sizing: border-box;
  -webkit-touch-callout: none; /* AT-223 del 1: långtryck startar markeringsläget, inte telefonens textmeny */
  background: var(--hm-fill); border: 1px solid var(--hm-line); border-radius: 12px;
  transition: background 0.15s ease, opacity 0.3s ease;
}
.hm-row:hover { background: var(--hm-fill-hover); }
.hm-row.is-over { background: color-mix(in srgb, var(--hm-danger) 5%, var(--hm-fill)); }
.hm-row.is-passed { background: color-mix(in srgb, var(--hm-warn) 6%, var(--hm-fill)); }
.hm-row.is-wait { background: color-mix(in srgb, var(--hm-warn) 4%, var(--hm-fill)); }
.hm-row.is-selected { border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 10%, var(--hm-fill)); }
.hm-row.is-done .hm-row-text { text-decoration: line-through; opacity: 0.6; }
.hm-row.is-cust::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--hm-row-accent); }
.hm-row.is-over::before { background: var(--hm-danger); opacity: 0.6; }

.hm-ring {
  position: relative; flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border-radius: 50%; box-sizing: border-box; cursor: pointer;
  border: 2px solid color-mix(in srgb, var(--text-primary) 42%, transparent); background: none !important; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, border-color 0.15s ease;
}
.hm-ring::after { content: ''; position: absolute; inset: -11px; } /* träffyta på minst 44 px */
button.hm-ring:hover { border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important; }
.hm-ring.is-checked { background: var(--accent-primary) !important; border-color: var(--accent-primary); }
body:not(.atlas-light-theme) .hm-ring.is-checked { color: #14161a; }
button.hm-ring:focus-visible { outline: 2px solid var(--accent-primary) !important; outline-offset: 3px; }
.hm-lead-spacer { flex: 0 0 22px; width: 22px; }

.hm-row-body { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 12px; position: relative; }
.hm-row-body.is-link { cursor: pointer; }
.hm-row-type { display: inline-flex; vertical-align: -3px; margin-right: 8px; color: var(--hm-muted); }
.hm-row.is-over .hm-row-type { color: var(--hm-danger); }
.hm-row-text { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-row.is-over .hm-row-meta { flex: 0 0 auto; font-size: 12px; color: var(--hm-muted); white-space: nowrap; }
.hm-row.is-over .hm-wait { color: var(--hm-danger); font-weight: 600; }
.hm-remind.is-passed { color: var(--hm-warn); font-weight: 700; }
.hm-remind svg { vertical-align: -2px; }
.hm-new {
  flex: 0 0 auto; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--text-primary); background: color-mix(in srgb, var(--accent-primary) 20%, transparent);
}
@keyframes hm-new-flash { 0% { background: color-mix(in srgb, var(--accent-primary) 16%, transparent); } 100% { background: var(--hm-fill); } }
.hm-row.is-new { animation: hm-new-flash 2.4s ease-out 1; background: color-mix(in srgb, var(--accent-primary) 9%, var(--hm-fill)); }

.hm-row-meta { min-width: 128px; text-align: right; padding-right: 6px; }
.hm-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0;
  border: 0; border-radius: 8px; background: none !important; color: var(--hm-muted); cursor: pointer; transition: color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.hm-icon:hover { color: var(--text-primary); background: var(--hm-fill-hover) !important; }
.hm-icon:focus-visible { outline: 2px solid var(--accent-primary) !important; outline-offset: 1px; }
.hm-bell.has-remind { color: var(--accent-primary); }
.hm-trash:hover { color: var(--hm-danger); }

/* Ett tryck: raden tonar bort medan "Klar · Ångra" visas där man tittar */
@keyframes hm-fade { from { opacity: 1; } to { opacity: 0.45; } }
.hm-row.is-flash { animation: hm-fade 5s linear 1 forwards; border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--hm-line)); }
.hm-flash-body { align-items: center; gap: 8px; font-size: 14px; }
/* AT-219 p.9: uppgiftens text överstruken + "Klar · Ångra" på EN rad (även i mobilen, där radkroppen annars är en kolumn). */
.hm-flash-body .hm-flash-done { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: line-through; color: var(--text-secondary); }
.hm-flash-body .hm-undo { min-height: 0; padding: 0 6px; line-height: inherit; } /* datorn: raden behåller sin höjd; mobilen sätter 44 px nedan */
.hm-flash-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hm-flash-text { font-weight: 700; color: var(--accent-primary); }
.hm-undo { border: 0; background: none !important; padding: 4px 6px; font: inherit; font-size: 14px; font-weight: 700; color: var(--text-primary); text-decoration: underline; cursor: pointer; min-height: 32px; }

/* AT-219 p.2: "Visa fler" är husets neråtpil (.scroll-hint-btn, style-tickets.css / mobile-soft-ticket-views.css).
   Här bara placeringen och läget utfällt: pilen uppåt och stilla. Utseendet ärvs, inget kopieras. */
.hm-more.scroll-hint-btn { margin: 6px auto 0; padding: 0; }
.hm-more.scroll-hint-btn svg { transition: transform .15s; }
.hm-more.scroll-hint-btn[aria-expanded="true"] { animation: none; opacity: 1; }
.hm-more.scroll-hint-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Ny uppgift: alltid synlig */
.hm-todo-input-row { display: flex; gap: 8px; margin-top: 10px; flex: 0 0 auto; }
.hm-todo-input {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 14px; border-radius: 12px; font: inherit; font-size: 14px; box-sizing: border-box;
  background: color-mix(in srgb, var(--bg-dark-primary) 70%, transparent) !important; border: 1px solid var(--hm-line); color: var(--text-primary); outline: none !important;
}
.hm-todo-input::placeholder { color: var(--hm-muted); }
.hm-todo-input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 16%, transparent); }
.hm-add {
  flex: 0 0 auto; width: 44px; height: 40px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, transparent); cursor: pointer;
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important; color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center;
}
.hm-add:hover { background: color-mix(in srgb, var(--accent-primary) 28%, transparent) !important; }

/* ---------- Mobil (≤768 px): en kolumn, ingen scrollruta inne i kortet, träffytor på minst 44 px ---------- */
@media (max-width: 768px) {
  #home-widgets-area.hm-area { padding: 12px 12px 16px; gap: 12px; }
  .hm-card { padding: 14px 14px; }
  .hm-band { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'id clock' 'status status'; gap: 10px 14px; padding: 14px 16px 14px 20px; min-height: 0; }
  .hm-band-id { grid-area: id; }
  .hm-clock { grid-area: clock; font-size: 32px; }
  /* Mobil: ikon och text på samma rad, knappen under. Tre rader i stället för fem. */
  .hm-band-status { grid-area: status; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; }
  .hm-status-text { min-width: 0; }
  .hm-status-head { font-size: 18px; }
  .hm-over-tag { display: inline-block; margin: 4px 0 0; }
  .hm-status-sub { font-size: 13px; }
  .hm-status-icon { width: 42px; height: 42px; }
  .hm-status-head { font-size: 19px; }
  .hm-next { grid-column: 1 / -1; width: 100%; justify-content: center; min-height: 40px; padding: 8px 16px; }
  .hm-mid { flex-direction: column; }
  .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hm-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  body.atlas-no-colleagues .hm-tile:nth-last-child(2) { grid-column: 1 / -1; } /* Interna är dold utan kollegor: den tredje (sista synliga) rutan tar hela raden */
  .hm-tile { min-height: 0; padding: 10px 12px; }
  .hm-tile-value b { font-size: 26px; }
  .hm-tile-total { font-size: 12px; }
  .hm-private { display: none; } /* förklarande text som annars äter första skärmens arbetsyta (Fråga Atlas-fältet finns nertill) */
  #home-widgets-area .atlas-onboarding-summary-card { grid-template-columns: minmax(0, 1fr); padding: 6px 14px; }
  /* AT-219 p.3: i mobilen står texten på egen rad, sedan kugghjulet och knapparna på en rad (knapparna delar bredden). */
  #home-widgets-area .atlas-onboarding-summary-card[data-hm-collapsible="1"]:not(.is-collapsed) > .atlas-onboarding-summary-copy { flex-basis: 100%; }
  #home-widgets-area .atlas-onboarding-summary-card[data-hm-collapsible="1"]:not(.is-collapsed) > .atlas-onboarding-summary-progress { margin-left: 0; }
  #home-widgets-area .atlas-onboarding-summary-card[data-hm-collapsible="1"]:not(.is-collapsed) > .atlas-onboarding-summary-actions { flex: 1 1 auto; }
  .hm-bottom { grid-template-columns: minmax(0, 1fr); }
  .hm-row { padding: 4px 4px 4px 12px; min-height: 56px; }
  .hm-row-body { flex-direction: column; align-items: flex-start; gap: 1px; }
  .hm-row-body.hm-flash-body { flex-direction: row; align-items: center; gap: 8px; } /* AT-219 p.9: en rad, ingen stapling */
  .hm-flash-body .hm-undo { min-height: 44px; min-width: 44px; } /* tryckmål ryms i radens 56 px */
  .hm-row-text { width: 100%; }
  .hm-row-meta { font-size: 12px; min-width: 0; text-align: left; }
  .hm-row.is-new .hm-row-body { padding-right: 44px; }
  .hm-row.is-new .hm-new { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin: 0; }
  .hm-icon { min-width: 44px; min-height: 44px; }
  .hm-bulk { min-height: 44px; }
  .hm-selall { min-height: 44px; }
  .hm-todo-input { height: 44px; }
  .hm-add { height: 44px; }
}

/* ---------- Låga fönster (≤ 780 px) och smal datorvy: mindre luft så att Hem ryms utan sidscroll ---------- */
@media (min-width: 769px) and (max-height: 780px) {
  #home-widgets-area.hm-area { gap: 10px; padding: 10px 20px 12px; }
  .hm-band { min-height: 68px; padding-top: 8px; padding-bottom: 8px; }
  .hm-clock { font-size: 32px; }
  .hm-status-icon { width: 38px; height: 38px; }
  .hm-tile { min-height: 66px; padding: 8px 14px; }
  .hm-private-text { display: none; } /* rubriken och raden "sparas inte som ärenden" räcker i ett lågt fönster */
  #home-widgets-area .atlas-onboarding-summary-card { padding: 6px 18px; }
  #home-widgets-area .atlas-onboarding-summary-card .atlas-onboarding-summary-copy p { display: none; }
}
@media (min-width: 769px) and (max-height: 740px) {
  .hm-card { padding-top: 12px; padding-bottom: 12px; }
  .hm-todo-input, .hm-add { height: 36px; }
  .hm-todo-input-row { margin-top: 8px; }
  .hm-more.scroll-hint-btn { margin-top: 4px; }
  .hm-card-head { margin-bottom: 6px; }
  .hm-row { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .hm-private { display: none; } /* som på mobil: Fråga Atlas-fältet finns nertill */
}

/* ---------- Rörelse ---------- */
@media (prefers-reduced-motion: reduce) {
  .hm-band.is-pulse::after { animation: none; opacity: 0.1; }
  .hm-plus { animation: none; }
  .hm-row.is-new, .hm-row.is-flash { animation: none; }
  .hm-tile, .hm-office, .hm-guide-toggle .hm-chev { transition: none; }
}

/* ---------- Smal datorvy (sidomenyn tar plats): bandet bryter till två rader innan det blir trångt ---------- */
@media (min-width: 769px) and (max-width: 1100px) {
  .hm-band { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'status clock' 'id id'; }
  .hm-band-status { grid-area: status; }
  .hm-clock { grid-area: clock; font-size: 32px; }
  .hm-band-id { grid-area: id; display: flex; gap: 12px; align-items: baseline; }
  .hm-date { margin-top: 0; }
  .hm-private { flex-basis: 240px; }
  .hm-bottom { grid-template-columns: minmax(0, 1fr) 200px; }
}

/* ---------- Påminnelsepopover (ritas av home-todos.js, flyttad hit ordagrant ur gamla home-widgets.css) ---------- */
/* Tidsstämpel-pill till vänster om texten */
.hw-todo-reminder-popover {
position: absolute;
z-index: 10050;
display: grid;
grid-template-columns: 124px 86px;
gap: 7px;
padding: 8px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(20,22,30,0.88);
backdrop-filter: blur(18px);
box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}
.hw-todo-reminder-fields {
display: contents;
}
.hw-todo-reminder-actions {
grid-column: 1 / -1;
display: flex;
gap: 6px;
align-items: center;
}
.hw-todo-reminder-date,
.hw-todo-reminder-time {
height: 28px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(255,255,255,0.08);
color: var(--text-primary);
font-size: 12px;
padding: 0 7px;
outline: none;
color-scheme: dark;
}
.hw-todo-reminder-date {
width: 124px;
}
.hw-todo-reminder-time {
width: 86px;
}
.hw-todo-reminder-date:focus,
.hw-todo-reminder-time:focus {
border-color: var(--accent-primary);
}
.hw-todo-reminder-save,
.hw-todo-reminder-clear {
width: 28px;
height: 28px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.08);
color: var(--text-primary);
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, filter 0.15s;
}
.hw-todo-reminder-save svg,
.hw-todo-reminder-clear svg {
width: 14px;
height: 14px;
stroke: currentColor;
}
.hw-todo-reminder-save {
color: var(--accent-primary);
border-color: color-mix(in srgb, var(--accent-primary) 40%, rgba(255,255,255,0.14));
}
.hw-todo-reminder-clear {
color: #ff6b6b;
border-color: rgba(255,69,58,0.28);
}
.hw-todo-reminder-save:hover,
.hw-todo-reminder-clear:hover {
background: rgba(255,255,255,0.14);
transform: scale(1.04);
filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 45%, transparent));
}