/* myceons skal på datorn (okt 2026) — js/myceon-frame.js, platserna i js/myceon-places.js (docs/SKALET.md Del 2).
   Mekaniken är golvets (css/floor-shell.css: app-shell, regionerna, ikonkolumnen, nedre raden, verktygstipset — i lager);
   här står myceons utseende, oskiktat, så det vinner över golvets standard. Bara myceons tokens (app.css, ljust och mörkt). */

/* ── Golvets ord på myceons tokens (nedre raden, verktygstipset, räknarnas prick) ─────────────────── */
#myceon-shell {
  --primary: var(--accent); --on-primary: #fff; --surface: var(--bg-surface); --surface-base: var(--bg-surface); --sidebar-bg: var(--bg-elevated);
  --sidebar-text: var(--text-primary); --border: var(--border-default); --text: var(--text-primary); --background: var(--bg-surface); --danger: var(--error);
  --nav-active-bg: var(--accent-subtle); --nav-active-color: var(--accent); --radius-md: 8px; --space-2xs: 2px; --space-xs: 6px; --space-sm: 8px; --space-md: 12px;
  --rail-l: 220px; --rail-icons: 60px; --tabbar-size: 56px;
  --areas-sm: "h" "m"; --rows-sm: auto minmax(0, 1fr); --cols-sm: minmax(0, 1fr);
  flex: 1 1 auto; min-height: 0; height: 100%; min-block-size: 0; background: var(--bg-base); color: var(--text-primary);
}
[data-shell-tip] { background: var(--text-primary); color: var(--bg-surface); font: 500 12.5px/1.4 var(--font-sans); padding: 3px 8px; border-radius: 6px; z-index: 100200; }
#myceon-shell > [data-region] { min-height: 0; min-width: 0; }
#myceon-shell > [data-region="m"] { overflow: hidden; display: flex; flex-direction: column; background: var(--bg-base); }
#myceon-shell > [data-region="m"]:focus { outline: none; }

/* Synlig bara för skärmläsare. */
.ms-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Hoppa till innehållet: syns när den får fokus. */
.ms-skip { position: absolute; left: 12px; top: -48px; z-index: 100300; padding: 8px 14px; border-radius: 8px; background: var(--accent); color: #fff;
  font: 600 14px/1.2 var(--font-sans); text-decoration: none; box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: no-preference) { .ms-skip { transition: top .12s ease; } }
.ms-skip:focus { top: 10px; outline: 2px solid var(--text-primary); outline-offset: 2px; }
body.auth-mode .ms-skip, html.boot-auth .ms-skip { display: none; }

/* ── Layouterna: A = kolumn (sidebar-full), ikonkolumn, B = tunn topbar (sidebar) ───────────────── */
/* A: ingen global topbar — h döljs (dess rad blir noll). B: h är den tunna topbaren. */
#myceon-shell[data-layout="sidebar-full"] > .ms-bar { display: none; }
#myceon-shell[data-layout="sidebar"] .ms-col-top, #myceon-shell[data-layout="sidebar"] .ms-col-acts, #myceon-shell[data-layout="sidebar"] .ms-col-foot { display: none; }
/* Högerpanelen (Öppna bredvid) tar en tredje kolumn. */
#myceon-shell { --ms-side-w: var(--ms-col-r, 380px); }
#myceon-shell[data-side="collapsed"] { --ms-side-w: 2.75rem; }
#myceon-shell[data-side][data-layout="sidebar-full"] { --areas: "l h h" "l m r" "l f f"; --cols: var(--col-l, var(--rail-l)) minmax(0, 1fr) var(--ms-side-w); }
#myceon-shell[data-side][data-layout="sidebar"] { --areas: "h h h" "l m r" "f f f"; --cols: var(--col-l, var(--rail-l)) minmax(0, 1fr) var(--ms-side-w); }
@media (min-width: 40.0625rem) {
  #myceon-shell[data-side][data-rail="icons"] { --cols: var(--rail-icons-col, 60px) minmax(0, 1fr) var(--ms-side-w); }
}

/* ── Kolumnen ─────────────────────────────────────────────────────────────────────────────────── */
/* Utseendet gäller alltid; geometrin (display, storlek) bara över 40rem — under det är kolumnen golvets nedre rad. */
.ms-col { background: var(--bg-elevated); color: var(--text-primary); }
#myceon-shell .ms-col .nav-item { border: 0; border-radius: 8px; background: none; color: var(--text-secondary); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; box-shadow: none; }
#myceon-shell .ms-col .nav-item[aria-current], #myceon-shell .ms-col [data-shell-more][data-shell-active] { background: var(--accent-subtle); color: var(--accent); font-weight: 600; }
#myceon-shell .ms-col .nav-item:focus-visible, .ms-subitem:focus-visible, .ms-bar :is(button, a):focus-visible, .ms-tab:focus-visible, .ms-btab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#myceon-shell .ms-col .nav-item .ui-icon { flex: none; }
#myceon-shell .ms-badge { right: auto; letter-spacing: 0; text-transform: none; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 650; }
#myceon-shell .ms-badge[hidden] { display: none; }
.ms-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#myceon-shell .ms-live { color: var(--error); font-weight: 600; }
#myceon-shell .ms-live[hidden], #myceon-shell .ms-pa[hidden] { display: none; }
.ms-live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--error); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 22%, transparent); }
@media (prefers-reduced-motion: no-preference) { .ms-live-dot { animation: ms-pulse 1.6s ease-in-out infinite; } @keyframes ms-pulse { 50% { opacity: .45; } } }
@media (min-width: 40.0625rem) {
  .ms-col { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px 10px; border-inline-end: 1px solid var(--border-default); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
  .ms-col-top { display: flex; align-items: center; gap: 4px; padding: 0 0 8px; min-width: 0; }
  .ms-col-top .org-switch-host { flex: 1 1 auto; min-width: 0; display: flex; }
  .ms-col-top .org-switch { max-width: 100%; }
  .ms-rail-toggle { flex: none; width: 32px; height: 32px; border-radius: 8px; color: var(--text-muted); }
  .ms-rail-toggle:hover { color: var(--text-primary); background: var(--bg-hover); }
  .ms-col-acts { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border-subtle); }
  .ms-nav { display: flex; flex-direction: column; gap: 2px; }
  #myceon-shell .ms-col .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; font-size: 13.5px; line-height: 1.2; text-align: start; }
  #myceon-shell .ms-col .nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
  #myceon-shell .ms-col .nav-item[aria-current]:hover { background: var(--accent-subtle); color: var(--accent); }
  #myceon-shell .ms-col .nav-item .ui-icon { width: 18px; height: 18px; opacity: .9; }
  #myceon-shell .ms-col [data-shell-more] { display: none; }
  #myceon-shell .ms-badge { position: static; margin-inline-start: auto; min-width: 20px; height: 18px; padding: 0 6px; font-size: 11px; line-height: 18px; text-align: center; flex: none; }
  .ms-search kbd { margin-inline-start: auto; font: inherit; font-size: 11px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--border-default); color: var(--text-muted); }
  .ms-sep { height: 1px; margin: 8px 6px; background: var(--border-subtle); }
  .ms-sub { display: flex; flex-direction: column; gap: 1px; padding-inline-start: 22px; margin: 0 0 2px; }
  .ms-sub[hidden] { display: none; }
  .ms-subitem { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 4px 10px; border: 0; border-radius: 7px; background: none;
    color: var(--text-secondary); font: inherit; font-size: 12.5px; text-align: start; cursor: pointer; }
  .ms-subitem:hover { background: var(--bg-hover); color: var(--text-primary); }
  .ms-subitem.is-on { color: var(--accent); font-weight: 600; }
  .ms-sub-dot { width: 6px; height: 6px; border-radius: 2px; background: currentColor; opacity: .55; flex: none; }
  .ms-col-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
  .ms-account { display: flex; align-items: center; gap: 8px; padding: 2px 4px; min-width: 0; }
  .ms-account .account-chip { display: inline-flex; align-items: center; gap: 8px; }
  /* Planen står i avatarens meny, inte i skalet. */
  #myceon-shell .ms-account .plan-badge { display: none; }
  /* Ikonkolumnen: organisationen som märket, Nytt och Sök som ikoner, räknaren en prick; fästa verktyg syns inte. */
  #myceon-shell[data-rail="icons"] .ms-col { padding-inline: 6px; }
  #myceon-shell[data-rail="icons"] .ms-col-top { flex-direction: column; }
  #myceon-shell[data-rail="icons"] .org-switch-name, #myceon-shell[data-rail="icons"] .org-switch-chev { display: none; }
  #myceon-shell[data-rail="icons"] .ms-col .nav-item { justify-content: center; padding-inline: 0; position: relative; }
  #myceon-shell[data-rail="icons"] .ms-badge { position: absolute; top: 5px; right: 9px; min-width: 0; width: 8px; height: 8px; padding: 0; font-size: 0; line-height: 0; color: transparent; background: var(--error); box-shadow: 0 0 0 2px var(--bg-elevated); }
  #myceon-shell[data-rail="icons"] .ms-account { justify-content: center; padding: 0; flex-direction: column; }
  #myceon-shell[data-rail="icons"] .ms-account .plan-badge, #myceon-shell[data-rail="icons"] .ms-sub { display: none; }
}
/* Nedre raden (under 40rem): golvets geometri; räknaren som en liten bricka över ikonen. */
@media (max-width: 40rem) {
  #myceon-shell .ms-badge { position: absolute; top: 2px; left: calc(50% + 4px); min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; }
  #myceon-shell .ms-col .nav-item[aria-current] { background: var(--accent-subtle); }
  #myceon-shell .ms-col .nav-item .ui-icon { width: 22px; height: 22px; }
}

#myceon-shell .ms-account .plan-badge { display: none; }

/* ── Den tunna topbaren (B, och på smal skärm) ────────────────────────────────────────────────── */
.ms-bar { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 12px; background: var(--bg-surface); border-bottom: 1px solid var(--border-default); }
.ms-bar .org-switch-host { display: flex; min-width: 0; flex: 0 1 auto; }
.ms-bar-search { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 320px; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--border-default); border-radius: 9px;
  background: var(--bg-base); color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; text-align: start; }
.ms-bar-search:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.ms-bar-search kbd { margin-inline-start: auto; font: inherit; font-size: 11px; }
.ms-bar-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--border-default); border-radius: 9px; background: var(--bg-surface);
  color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ms-bar-btn:hover { background: var(--bg-hover); }
.ms-bar-btn.ms-live { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent); }
.ms-bar-btn[hidden] { display: none; }
.ms-fill { flex: 1 1 auto; }

/* ── Smal skärm (datorvyn i telefonen): topbaren överst, platserna i nedre raden (golvets data-tabbar) ── */
@media (max-width: 40rem) {
  #myceon-shell > .ms-bar { display: flex !important; padding: 6px 10px; gap: 6px; grid-area: h; align-self: stretch; }
  #myceon-shell > [data-region="m"] { grid-area: m; align-self: stretch; }
  #myceon-shell .ms-bar-search { flex: 0 0 auto; width: 34px; padding: 0; justify-content: center; }
  #myceon-shell .ms-bar-search > :not(svg), #myceon-shell .ms-bar-btn.ms-new > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #myceon-shell .ms-bar .org-switch-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
  /* myceons rem är mindre än golvets (13 px) — målen anges i px: minst 48. */
  #myceon-shell[data-shell-tabbar] .ms-col :is([data-shell-slot], [data-shell-more]) { min-height: 52px; }
  #myceon-shell .ms-side { display: none !important; }
}

/* ── Platserna ─────────────────────────────────────────────────────────────────────────────────── */
#ms-main > .ms-place { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }
#ms-main > .ms-place[hidden] { display: none; }
.ms-head { flex: none; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 18px; padding: 16px 24px 0; border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); }
.ms-head.ms-head-sr { padding: 0; border: 0; gap: 0; }
.ms-head.ms-head-sr:not(:has(.ms-tabs)) { position: absolute; }
.ms-head.ms-head-sr:has(.ms-tabs) { padding: 8px 24px 0; border-bottom: 1px solid var(--border-subtle); }
.ms-h1 { margin: 0 0 10px; font-size: 20px; font-weight: 650; color: var(--text-primary); }
.ms-h1:focus { outline: none; }
.ms-h1:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.ms-tabs { display: flex; gap: 2px; margin-bottom: -1px; overflow-x: auto; scrollbar-width: none; }
.ms-tab { display: inline-flex; align-items: center; height: 38px; padding: 0 12px; border-bottom: 2px solid transparent; color: var(--text-secondary); font-size: 13.5px; font-weight: 500;
  text-decoration: none; white-space: nowrap; }
.ms-tab:hover { color: var(--text-primary); }
.ms-tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.ms-head-link { margin: 0 0 12px auto; font-size: 12.5px; color: var(--text-muted); text-decoration: none; }
.ms-head-link:hover { color: var(--accent); text-decoration: underline; }
.ms-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ms-scroll { overflow-y: auto; }
.ms-pad { padding: 24px; }
.ms-dim { color: var(--text-muted); font-size: 13px; }
.ms-lead { margin: 0 0 14px; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.ms-panel[hidden] { display: none; }

/* Hem */
.ms-home { width: 100%; max-width: 720px; margin: 0 auto; padding: 28px 24px 48px; display: flex; flex-direction: column; gap: 22px; box-sizing: border-box; }
.ms-panel[data-ms-panel="strommen"] { width: 100%; max-width: 920px; margin: 0 auto; padding: 20px 24px 40px; box-sizing: border-box; }
.ms-panel[data-ms-panel="strommen"] #org-section-content { max-width: 860px; margin: 0 auto; }
.ms-panel[data-ms-panel="strommen"] .org-stream-header > h2 { display: none; }
.ms-panel[data-ms-panel="vaven"] { flex: 1 1 auto; min-height: 0; padding: 12px 16px; box-sizing: border-box; }

/* Samtal: Samtals fönster dockat (platform-chat.js) — inte ett lager över allt längre. */
.platform-chat-overlay.pc-docked { position: relative; inset: auto; z-index: auto; flex: 1 1 auto; min-height: 0; width: auto; height: auto; }
.platform-chat-overlay.pc-docked:not(.active) { display: none; }
@media (min-width: 721px) {
  .pc-docked > .platform-chat-topbar { display: none; }
  /* Trådlistan dold: topbaren bär bara "Visa sidopanel". */
  .pc-docked:has(.platform-chat-body.pc-sidebar-collapsed) > .platform-chat-topbar { display: flex; padding: 6px 12px; }
}
.pc-docked > .platform-chat-topbar :is(.pc-brand, .org-switch-host, .mode-switch, .btn-new, .pc-topbar-actions, .org-tools) { display: none !important; }

/* Tid och Kontakter */
.ms-tid { overflow-y: auto; padding: 22px 28px 40px; }
@media (max-width: 720px) { .ms-tid { padding: 14px 12px 32px; } }
.ms-tid > .tv-root { flex: 1 1 auto; min-height: 0; }
.ms-ct { flex-direction: row; }
.ms-ct > .ct-app { height: 100%; }

/* Ekonomi */
.ms-eco { width: 100%; max-width: 1080px; margin: 0 auto; padding: 18px 24px 40px; box-sizing: border-box; }
.ms-eco .eco-tabs { display: none; }
.eco-place-link { margin: 0 0 14px; font-size: 13px; color: var(--text-muted); }

/* Verktyg */
.ms-tools { width: 100%; max-width: 920px; margin: 0 auto; padding: 18px 24px 40px; box-sizing: border-box; }
.ms-tools-acts { margin: 0 0 16px; }
.ms-tool-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ms-tool-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-surface); }
.ms-tool-open { display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); font-weight: 600; text-decoration: none; font-size: 14px; }
.ms-tool-open:hover .ms-tool-t { text-decoration: underline; }
.ms-tool-card .ms-btn { align-self: flex-start; }
.ms-empty, .ms-note { color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.ms-place-verktyg.has-tool > .ms-head { display: none; }
.ms-tool-host { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ms-tool-host[hidden] { display: none; }
.org-tool-view.is-docked { position: relative; inset: auto; top: auto !important; z-index: auto; flex: 1 1 auto; min-height: 0; }
.ms-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-default); background: var(--bg-surface);
  color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.ms-btn:hover { background: var(--bg-hover); }
.ms-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ms-btn-primary:hover { background: var(--accent-hover); }
.ms-btn-ghost { border-color: transparent; color: var(--text-secondary); height: 28px; padding: 0 8px; }
.ms-btn .ui-icon { width: 14px; height: 14px; }

/* ── Bygg: verktygsraden (topbaren, nu platsens egen rad) ────────────────────────────────────── */
#myceon-shell .ms-place-bygg > .app-topbar { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; flex-wrap: nowrap; grid-template-areas: none; }
#myceon-shell .ms-place-bygg > .app-topbar .topbar-tabs { position: static; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; pointer-events: auto; left: auto; right: auto; }
#myceon-shell .ms-place-bygg > .app-topbar .tb-name-zone { display: flex; flex: 0 1 auto; min-width: 0; justify-content: flex-start; }
#myceon-shell .ms-place-bygg > .app-topbar .topbar-tabs .preview-tabs { margin: 0; }
#myceon-shell .ms-place-bygg > .app-topbar #history-controls { display: inline-flex !important; align-items: center; gap: 2px; }
#myceon-shell .ms-place-bygg > .app-topbar:not(.ms-has-project) :is(.topbar-tabs, #open-preview-tab-btn, #publish-btn),
#myceon-shell .ms-place-bygg > .app-topbar.ms-in-projects :is(.topbar-tabs, #open-preview-tab-btn, #publish-btn) { display: none !important; }
.ms-bygg-tabs { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg-base); flex: none; }
.ms-btab { height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.ms-btab:hover { color: var(--text-primary); }
.ms-btab[aria-pressed="true"] { background: var(--bg-surface); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-sm); }
.ms-project { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 260px; height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent;
  color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ms-project:hover { background: var(--bg-hover); }
.ms-project .project-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-bar-sep { width: 1px; height: 20px; background: var(--border-default); flex: none; }
#myceon-shell .ms-place-bygg > .app-layout { flex: 1 1 auto; min-height: 0; }
@media (max-width: 720px) {
  #myceon-shell .ms-place-bygg > .app-topbar { display: flex !important; flex-wrap: wrap; row-gap: 6px; }
  #myceon-shell .ms-place-bygg > .app-topbar .topbar-tabs { flex: 1 1 100%; overflow-x: auto; }
}

/* ── Högerpanelen: Öppna bredvid ──────────────────────────────────────────────────────────────── */
.ms-side { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--bg-surface); border-inline-start: 1px solid var(--border-default); }
.ms-side[hidden] { display: none; }
.ms-side-resize { position: absolute; inset-block: 0; inset-inline-start: -3px; width: 7px; cursor: col-resize; z-index: 2; }
.ms-side-resize:hover, .ms-side-resize:focus-visible { background: color-mix(in srgb, var(--accent) 35%, transparent); outline: none; }
.ms-side-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--border-subtle); min-height: 44px; }
.ms-side-head h2 { margin: 0; font-size: 14px; font-weight: 650; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-side-head h2:focus { outline: none; }
.ms-side-btn { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 12.5px; cursor: pointer; }
.ms-side-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.ms-side-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ms-side-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.ms-side-body[hidden] { display: none; }
#myceon-shell[data-side="collapsed"] .ms-side-head { flex-direction: column; padding: 8px 4px; border: 0; }
#myceon-shell[data-side="collapsed"] .ms-side-head > :not(#ms-side-collapse) { display: none; }
#myceon-shell[data-side="collapsed"] .ms-side-resize { display: none; }
.ms-side-tid, .ms-side-ct { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ms-side-tid { padding: 10px 12px 24px; }
.ms-side .ct-app { grid-template-columns: minmax(0, 1fr); }
.ms-side .ct-app.has-detail > .ct-list { display: none; }
.ms-side .ct-app:not(.has-detail) > .ct-detail { display: none; }
.ms-side-thread { padding: 14px 16px 24px; }
.ms-side-subj { margin: 0 0 4px; font-size: 15px; font-weight: 650; }
.ms-side-msgs { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ms-side-msg { padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-elevated); }
.ms-side-meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 12px; color: var(--text-muted); }
.ms-side-meta strong { color: var(--text-primary); font-weight: 600; }
.ms-side-text { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }

/* Plattformsadmins vy står över arbetsytan (left/top sätts av skalet). */
html.pa-open #myceon-shell .ms-pa { color: var(--accent); }

/* ── Fästen, kortkommandon (docs/SKALET.md Del 2 punkt 10–11) ──────────────────────────────────── */
/* Kortkommandot står tyst i kolumnen och syns när platsen pekas på eller får fokus. */
.ms-kbd { display: none; font: inherit; font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--border-default); color: var(--text-muted); white-space: nowrap; }
@media (min-width: 40.0625rem) {
  #myceon-shell:not([data-rail="icons"]) .ms-col .ms-item:is(:hover, :focus-visible) .ms-kbd { display: inline-block; margin-inline-start: auto; }
  #myceon-shell:not([data-rail="icons"]) .ms-col .ms-item:is(:hover, :focus-visible) .ms-kbd + .ms-badge:not([hidden]) { margin-inline-start: 6px; }
}
#myceon-shell[data-rail="icons"] .ms-kbd { display: none !important; }
@media (max-width: 40rem) { #myceon-shell .ms-kbd { display: none !important; } }
/* Rubriken i listan bredvid ikonkolumnen (bara där). */
.ms-sub-h { display: none; }
.ms-pin .ms-sub-dot { border-radius: 50%; }
.ms-sub-dot.is-sok { border-radius: 1px; transform: rotate(45deg); }
/* Ikonkolumnen: det fästa som en lista bredvid platsen (hover och fokus). Verktygstipset göms så länge. */
@media (min-width: 40.0625rem) {
  #myceon-shell[data-rail="icons"] .ms-sub.is-pop { display: flex; position: fixed; z-index: 100150; min-width: 200px; max-width: 280px; padding: 6px; margin: 0; gap: 1px;
    background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 10px; box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, .18)); }
  #myceon-shell[data-rail="icons"] .ms-sub.is-pop .ms-sub-h { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 4px 8px 6px; font-size: 12.5px; color: var(--text-primary); }
  #myceon-shell[data-rail="icons"] .ms-sub.is-pop .ms-sub-h span { margin-inline-start: auto; font-size: 11px; color: var(--text-muted); }
  #myceon-shell[data-rail="icons"] .ms-sub.is-pop .ms-subitem { font-size: 13px; }
}
html.ms-pinpop [data-shell-tip] { display: none !important; }
/* Mina inställningar → Utseende → Navigering, och organisationens standard (settings-shell.js). */
.ss-navopts { display: grid; gap: 8px; margin: 6px 0 14px; }
.ss-navopt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 10px; cursor: pointer; }
.ss-navopt:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); }
.ss-navopt input { margin-top: 3px; }
.ss-navopt b { display: block; font-size: 13.5px; }
.ss-navopt span { font-size: 12.5px; color: var(--text-muted); }
.ss-tabbar { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 6px; }
.ss-tabbar li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border-subtle); border-radius: 9px; }
.ss-tabbar li.is-on { border-color: var(--border-default); background: var(--bg-elevated); }
.ss-tabbar label { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ss-tabbar .ss-tb-n { min-width: 1.4em; color: var(--text-muted); font-size: 12px; text-align: center; }
.ss-tabbar button { min-width: 30px; height: 28px; border: 1px solid var(--border-default); border-radius: 7px; background: var(--bg-surface); color: var(--text-primary); cursor: pointer; font: inherit; }
.ss-tabbar button:disabled { opacity: .35; cursor: default; }
.ss-nav-note { font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; }
.ms-keys .ps-keys li { margin-bottom: 4px; }